![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：总结的不错, 元素的概念用在html中, 在js叫节点, 标签很多时候,与元素同义
Collection
Collection
1. 对html标签，元素，属性的理解并举例说明
1.1标签：Html又叫超文本标记（标签）语言。超文本是指有跳转链接的信息。标记语言：又叫标签语言即对于网页中的内容文本，用标签来描述。因此我们可以知道，html是写网站的，而用来组成网站的主体就是一系列标签。例如<h1></h1>----<h6>的标题标签，<p></p>段落标签，换行<br>标签。 标签又分为两大类。一是双标签，就是像标题标签和段落标签那样成对出现的，有开始标签（<p>）也有结束标签（</p>）开始标签和结束标签之内写入内容。二是单标签，即不成对出现，只有一个开始标签如<br>
1.2元素：元素可以当做是标签的另一种称呼，这种称呼通常被用户使用。标签是程序员说的。详细见下图。
1.3属性：html中的属性就是为html元素（标签）提供附加信息的工具。
属性的语法结构：属性名=属性值，对于属性的设置在开始标签中设置例如
<p color=”red”>php中文网</p>
在这里 color为属性名。Red为属性值。php中文网被修饰为红色。
2.关于列表
2.1html中常见列表有三种。分别是，有序列表<ol>，无序列表<ul>，定义列表<dl>
有序列表：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <ol> <li>信息</li> <li>信息</li> <li>信息</li> </ol> </body> </html>
有序列表在浏览器中会自动在列表信息前加上序号，进行自动排列，换行。
无序列表：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <ul> <li>信息</li> <li>信息</li> <li>信息</li> </ul> </body> </html>
无序列表在浏览器中会用圆点来代表序号，和有序列表相比，就是把序号换成了圆点。无序列表在后期可以使用css对圆点进行修饰，替换为用户想要的样式，因此无序列表是使用频率较高的一种列表
定义列表
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <dl> <dt>苹果<dt> <dd>苹果是红色的</dd> <dt>香蕉<dt> <dd>香蕉是黄色的</dd> </dl> </body> </html>
在定义列表<dl>中有<dt>和<dd>两种标签。<dt>常用作写入列表信息。而<dd>常用作对列表信息进行注释说明。
3.列表和表格的区别与联系，分别在什么时候使用？
表格：对于多列且每一列之间有关联的数据用表格
列表：对于能用较少列就能表达清楚信息用列表
表格就是关联性大且数据多的列表组合而成。
如何选择：如果表格能用一列数据来表示则用列表，如果需要多列数据来表示则选择表格（数据少且关联性不强用列表，数据多且关联大用表格）
4.使用列表表现工作计划：下面一次性把三个列表的编程都写出来了。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>这是列表</title> </head> <body> <h2>这是工作计划列表.无序</h2> <ul> <li>08：00到达工作现场</li> <li>08：20-09：30巡回检查保证设备运行正常</li> <li>09：40-11：30对故障设备进行处理</li> <li>14：00-15：30巡回检查</li> <li>15：40交接班</li> </ul> <h2>这是工作计划列表.有序</h2> <ol> <li>08：00到达工作现场</li> <li>08：20-09：30巡回检查保证设备运行正常</li> <li>09：40-11：30对故障设备进行处理</li> <li>14：00-15：30巡回检查</li> <li>15：40交接班</li> </ol> <h2>这是工作计划列表.定义列表</h2> <dl> <dt>08:00</dt> <dd>到达工作现场</dd> <dt>08：20-09：30</dt> <dd>巡回检查保证设备运行正常</dd> <dt>09：40-11：30</dt> <dd>对故障设备进行处理</dd> <dt>14：00-15：30</dt> <dd>巡回检查</dd> <dt>15：40</dt> <dd>交接班</dd> </dl> </body> </html>
效果图：
5.商品清单，表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>这是表格</title> </head> <body> <h2>这是商品清单</h2> <table border="1" width="500" cellspacing="0" cellpadding="10"> <caption> <h3>商品清单</h3> </caption> <tr bgcolor="lightblue"> <th>编号</th> <th>名称</th> <th>数量</th> <th>价格</th> <th>金额</th> <th>备注</th> </tr> <tr bgcolor="lightyellow"> <th>1</th> <th>方便面</th> <th>5</th> <th>5</th> <th>25</th> <th rowspan="4"></th> </tr> <tr bgcolor="lightyellow"> <th>2</th> <th>火腿肠</th> <th>10</th> <th>2</th> <th>20</th> </tr> <tr bgcolor="lightyellow"> <th>3</th> <th>薯片</th> <th>20</th> <th>4</th> <th>80</th> </tr> <tr bgcolor="lightyellow"> <th colspan="3" align="center">合计</th> <th>35</th> <th>525</th> </tr> </table> </body> </html>
border="1"的作用是给表格添加内外边框线。1则表示边框线的宽度。
width="500"是指每一小格的宽为500，现在编号两字就放在宽为500的格子里。
cellspacing="0"表格刚做出来若没有添加这一属性，则表现为：
故添加之后看起来更清爽。
<caption>双标签定义表头
bgcolor="lightblue" 在tr中添加此属性，即将第一行的背景色设置为淡蓝色
<th rowspan="4"></th> 作用是纵向合并四个单元格
<th colspan="3" align="center">作用是横向合并3格单元格
6.注册表单的展示，
注册表单使用的是<form>双标签。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>这是注册表单</title> </head> <body> <h2>注册页面</h2> <form action="" method="POST"> <p> <label for="username">账号</label> <input type="text" id="username" name="username" placeholder="不能使用特殊字符"> </p> <p> <label for="password">密码</label> <input type="password" id="password" name="username" placeholder="不得少于10个字符"> </p> <p> <label for="email">邮箱</label> <input type="email" id="email" name="email" placeholder="example@email.com"> </p> <p> <label for="age">年龄</label> <input type="number" id="age" name="age" min="16" max="60"> </p> <p> <label for="">课程</label> <select name="" id=""> <optgroup label="文科"> <option value="" selected>请选择</option> <option value="">历史</option> <option value="">地理</option> <option value="">政治</option> </optgroup> <optgroup label="理科"> <option value="">化学</option> <option value="">物理</option> <option value="">生物</option> </optgroup> </select> </p> <p> <label for="">爱好</label> <input type="checkbox" name="hobby[]" value="game" id="game" checked><label for="game">玩游戏</label> <input type="checkbox" name="hobby[]" value="movie" id="movie"><label for="movie">看电影</label> <input type="checkbox" name="hobby[]" value="music" id="music"><label for="music">听音乐</label> </p> <p> <label for="male">性别</label> <input type="radio" name="gender" id="male"><label for="male">男</label> <input type="radio" name="gender" id="female"><label for="female">女</label> <input type="radio" name="gender" id="secrecy" checked><label for="secrecy">保密</label> </p> <p> <input type="submit" name="submit" value="提交"> </p> </form> </body> </html>
<form action="" method="POST"> 这里的action=“”意义：表单上的数据提交给服务器的某个程序处理，这里离没有添加。 method=“”表示表单的提交方式，这里做简单说明。常见有get，post两种。get适用少量数据提交，安全系数较低，应避免用此提交敏感信息，且浏览器地址栏之后会残留有关参数信息。post对数据的长度没有要求，安全系数高，可用于提交敏感信息（手机号）且不会被浏览器保存，在地址栏没有参数信息。
label中的 for=“”与下方input中的id值保持一致，这样在点击label双标签中的内容时，会自动锁定到输入框。
input中的name=“”是指将表单提交到服务器时，它的变量名。
placeholder=“”是用于在输入框中添加提示性文本，这些文本在用户输入时会自动消失。
type=“”表示输入框的内容形式，文字用text，数字用number，邮箱用email
<select>双标签用来写下拉框，是一个复合标签，在这里option是他的复合。option双标签内写的就是下拉框要填入的内容。在其中加入selected意为设置某为默认值。
如果下拉框中内容较多，且有类可分，可使用<optgroup label="类别">进行分类
input type="checkbox" 在input中设置type为checkbox，意为将input设置为多选框，且应该在name中写入hobby【】，多选框这种一对多的束缚关系，添加此这样有利于php对此进行处理。
input type=“radio”就是设置单选；
对于最后的提交按钮做法是将type的值改为submit。
效果图：
html中的常用标签有<h1>~<h6>依次表示六种不同大小的标题，但是不能因为大小的特点而乱用标题标签
<p>为段落标签，上下自动换行，在排版时可以使用p标签，整个页面看起来更整洁
<a href="" target="">a单标签用来设置超链接 href 创建指向另一个文档的链接 使用 target ，定义被链接的文档在何处显示：默认为就在本窗口跳转，"_blank"意为打开新的标签页进行跳转。
<img src="" alt="">此单标签用于在网页添加图片， src=“”内写入图片的地址，alt=“”写入的内容在图片能加载出来时不会出现，只有在图片加载不出来时，才会出现的替换性内容，意为告诉用户，这里本来是有图片的，但因为一些原因，没有加载出来。
其余的列表，表格，表单标签在前有述就不在多余解释了。