![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：qualified
Teacher's comments：总结的非常棒, 你的博客可以当做你的开发手册查询
Collection
Collection
什么是HTML标签、元素、属性
HTML，是英文Hyper Text Markup Language的首写字母组成的。翻译过来就是超文本标记语言。超文本是相对纯本文而言，可以包含非常丰富的信息，比如图片、视频、音频、网页上其他链接等等。而标记语言可以理解是和浏览器通过一种约定的方式来展示信息。
HTML标签很多,是由一对尖括号和尖括号中间的标签名组成的,<标签名>。比如<h1>,<img>,<p>,<ul>,<ol>,<li>。<img>这个可以称之为img标签，<p>可以叫做p标签。我认为标签，就是在文档的某个地方给了浏览器一个标记。浏览器可以通过标签来采取不同的渲染和处理方式。比如<h1>php中文网</h1>，出现在文档中，浏览器就知道“php中文网”是一个一级标题。而<img>标签，可以让浏览器知道这个地方需要加载一张图片。
需要注意的是，在HTML中，标签大部分是成对出现的，如<h1></h1>，<h1>是开始标签，</h1>是结束标签。还有一部分是单标签，比如<img>标签，是没有结束标签的。这些都可以自己去PHP中文网上查看HTML手册哦。
标签的属性，额外定义了标签的一些行为和表现方式。它总以“属性名=属性值”这种名值对的形式出现，而且属性总是在HTML元素的开始标签中进行定义。 写法如：<标签名 属性名 = “属性值”></标签名>
从浏览器角度看，属性是对标签的一种补充。有时候这种补充是必不可少的。比如<img>标签一定需要通过src属性来告知浏览器从哪里加载图片，<a>标签需要通过href属性来告知链接的具体地址。如果缺少这些属性，这2个标签可以说是名存实亡了。
那什么是元素呢？对浏览器来说，一个HTML页面，是有许许多多的元素共同的组成。而这些元素是由标签和内容构成的。
下面我们来分析一个标准的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> <h1>PHP中文网</h1> <p>php中文网第八期课程上线啦！这是宣传图片<img src="存放图片的路径">，马上进入官网吧,<a href="https://www.php.cn">www.php.com</a></p> </body> </html>
示例解释：
<!DOCTYPE html>是HTML5的 文档类型声明，告诉浏览器这个一个html文档，写在第一行。
<html></html>是根元素，所有的HTML代码都要放在这对标签里面。<html>的开始标签里面有个lang属性，值为"en"。这个属性告诉了浏览器该文档的主体语言是英语。
<head></head>是头部元素，里面的代码信息是给浏览器看的，用户一般看不到。通常在在这个部分定义了编码格式，文档标题等等。
<body></body>是主体元素，这部分就是网页的主体内容，用户浏览网页看到的内容信息，都是这个部分的代码显示出来的。
<h1></h1>这个标签定义的一个一级标题，PHP中文网，而<p></p>定义了一个段落，段落里面还包括了<img>标签和<a>标签。
总结：从浏览器的角度看，<html><head><body><h1><p><img><a>这些标签和标签里面的内容构成了一个HTML页面。其中某些元素在浏览器看来是必不可少的。如<head><body>分别代表了头部和主体元素。如果你没有写上这2个标签，浏览会自动补上去的。
HTML中的列表与表格
列表与表格区别
如果你只是想罗列一些项目、元素之类的，比如去超市买年货，怕忘记了，想把要买的商品整理出来，这时候可以采用列表形式罗列出来。但是如果还想要整理每件商品的数量、价格，做一个预算。这时候就要采用表格的形式。可以说表格是比列表更复杂的一种表现形式。
HTML列表标签
在HTML中的列表，有序列表、无序列表、定义列表。这3种列表可以通过不同的标签来定义。
有序列表，由标签<ol></ol>定义，列表项由<li></li>定义，列表项中按一定顺序排序。其项目左侧显示的标记默认是数字，但也可以指定为字母、罗马数字。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>有序列表</title> </head> <body> <!-- 有序列表，项目左侧默认是数字排序 --> <ol> <li>铅笔</li> <li>橡皮擦</li> <li>圆珠笔</li> </ol> <!-- 有序列表，项目左侧是大写字母排序 --> <ol type=A> <li>铅笔</li> <li>橡皮擦</li> <li>圆珠笔</li> </ol> <!-- 有序列表，项目左侧是小写字母排序 --> <ol type=a> <li>铅笔</li> <li>橡皮擦</li> <li>圆珠笔</li> </ol> <!-- 有序列表，项目左侧是大写罗马数字排序 --> <ol type=I> <li>铅笔</li> <li>橡皮擦</li> <li>圆珠笔</li> </ol> <!-- 有序列表，项目左侧是小写罗马数字排序 --> <ol type=i> <li>铅笔</li> <li>橡皮擦</li> <li>圆珠笔</li> </ol> </body> </html>
无序列表，由标签<ul></ul>定义，列表项由<li></li>定义。列表项无需按顺序排序，其项目左侧显示的标记，可以有多种。默认是实心小圆点。在实际开发中，这中比较常用。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>无序列表</title> </head> <body> <!-- 无序列表，项目左侧默认是实心小圆点--> <ul> <li>铅笔</li> <li>橡皮擦</li> <li>圆珠笔</li> </ul> <!-- 无序列表，项目左侧默认是空心小圆点--> <ul type=circle> <li>铅笔</li> <li>橡皮擦</li> <li>圆珠笔</li> </ul> <!-- 无序列表，项目左侧默认是实心小方块--> <ul type=square> <li>铅笔</li> <li>橡皮擦</li> <li>圆珠笔</li> </ul> </body> </html>
自定义列表由标签<dl></dl>定义，列表项由<dt></dt>定义，对列表项的解释说明由标签<dd></dd>。不像有序列表、无序列表那样单纯地罗列出一系列项目，而是可以对罗列的每个项目中进行一些自定义的解释说明。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>自定义列表</title> </head> <body> <dl> <dt>意式咖啡</dt> <dd>有巧克力摩卡，焦糖玛奇朵，拿铁咖啡</dd> <dt>醇香奶茶</dt> <dd>有黄金珍奶，芋园珍奶，椰果珍奶</dd> </dl> </body> </html>
HTML表格标签
HTML中的表格，由若干行、列组成的。表格是<table>标签来定义的。其中
<tr>定义表格的行
<td>定义表格的列，td是英文table data，即表格单元
<caption>定义表格的标题
<th>定义表格的表头，大多数浏览器会把表头显示为粗体居中的文本
<thead>定义表格的页眉
<thbody>定义表格的主体
如果希望显示表格边框需要在table标签上添加一个border属性，即<table border="1">
以下是一个由表格定义的购物车清单的例子。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>购物车清单</title> </head> <body> <!-- 定义一个表格，边框是1像素，宽500像素，表格单元间距0像素，表格单元内间距是5像素 --> <table border="1" width="500" cellspacing="0" cellpadding="5"> <!-- 定义表格标题 --> <caption> <big>购物车</big> </caption> <!-- 把第一行定义表格表头 --> <thead bgcolor="lightgray"> <th>序号</th> <th>商品类型</th> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>金额</th> </thead> <!-- 定义表格主体 --> <thbody> <tr> <td>1</td> <!-- 第2行和第3行都是***，因此使用属性rowspan跨2行合并为一个单元格 --> <td rowspan="2">***</td> <td>***运动T恤</td> <td>45</td> <td>2</td> <td>90</td> </tr> <tr> <td>2</td> <!-- <td>***</td> --> <td>***针织长裤</td> <td>120</td> <td>2</td> <td>240</td> </tr> <tr> <td>3</td> <td rowspan="2">***</td> <td>***针织衫</td> <td>160</td> <td>1</td> <td>160</td> </tr> <tr> <td>4</td> <!-- <td>***</td> --> <td>***轻便羽绒服</td> <td>900</td> <td>2</td> <td>1800</td> </tr> <tr> <!-- 跨5列合并为单元格，使用属性colspan，值为5 --> <td colspan="5" bgcolor="lightgray">合计金额:</td> <!-- <td></td> <td></td> <td></td> <td></td> --> <td>2290</td> </tr> </thbody> </table> </body> </html>
HTML的表单
HTML 表单用于收集不同类型的用户输入。由标签<form></form>定义。同时我们可以通过表单控件元素来展示需要用户输入的内容，比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。
<input>标签是在表单中定义了一个输入域，可以用来给用户输入的数据（比如文本，密码等）,可以通过type属性来定义输入域的类型。在开发中，input标签常用属性有type,id,name,value。
<label>标签把input元素相关联起来，就是点击<label>标签内的文本浏览器会自动把焦点转到相关联的input元素上，注意<label> 标签的 for 属性应当与相关元素的 id 属性相同。
以下是一个常见的表单例子
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>表单与表单中的控件元素</title> </head> <body> <h3>用户注册</h3> <!-- 定义一个表单，表单提交方式为POST，用户点击提交按钮会把填写的数据上传到login.php文件 --> <form action="login.php" method="POST"> <!-- 定义账号、密码输入框，通过value属性设置默认的账号名，通过type="password"实现密码输入框显示成****** --> <p> <label for="username">账号：</label> <input type="text" id="username" name="username" value="jacky"> <label for="password">密码：</label> <input type="password" id="password" name="password"> </p> <p> <label for="email">邮箱:</label> <input type="email" id="email" name="email" value="system@eamil.com"> </p> <!-- 定义年龄输入框,type属性设置number值，通过min,max属性设置最小值，最大值。该控件可以确保年龄这一栏输入的是整数值。 --> <p> <label for="age">年龄：</label> <input type="number" id="age" name="age" min="15" max="88"> </p> <!-- 通过标签<select>定义一个下拉框列表，<option>标签定义下拉框列表的项目， 如果项目具有共通的属性，可以通过<optgropu>标签实现分组效果。 备注：通过设置select标签的id属性和laber标签的for属性相绑定，没有实现聚焦效果。 --> <p> <laber for="lesson">课程</laber> <select id="lesson" name="lesson"> <optgroup label="前端"> <option>请选择</option> <option>html</option> <option>css</option> <option>jacascript</option> </optgroup> <optgroup label="后端"> <option>php</option> <option>mysql</option> <option>laravel</option> </optgroup> </select> </p> <!-- 设置type属性的值为checkbox，来启用复选框控件。同时可以通过添加checked属性，来设置默认选项。 注意：复选框的name属性值要相同，因为复选框上input元素是通过name属性来确定为一组的。 --> <p> <label for="">爱好：</label> <input type="checkbox" name="hobby[]" value="football" id="football"><label for="football">足球</label> <input type="checkbox" name="hobby[]" value="basketball" id="basketball"><label for="basketball">篮球</label> <input type="checkbox" name="hobby[]" value="coding" id="coding" checked><label for="coding">撸代码</label> </p> <!-- type值设为radio，启用单选框。在input元素中添加checked属性来设置默认选项。同时注意保持name属性值一致。 --> <p> <label for="">性别：</label> <input type="radio" name="gender" value="male" id="male"><label for="male">男</label> <input type="radio" name="gender" value="female" id="female"><label for="female">女</label> <input type="radio" name="gender" value="secrecy" id="secrecy" checked><label for="secrecy">保密</label> </p> <!-- type值设为submit，则定义了一个提交按钮，用户点击该按钮则表单会提交到form标签中action属性定义的URL地址文件。 type值设为reset，则定义了一个重置按钮，用户点击会清空刚填写的表单数据。 type值设为button，定义了一个可点击的按钮，用户点击后什么都不会发生。 type值设为image，定义了一个图像形式的提交按钮，该类型的按钮需要和src和alt属性结合使用。--> <p> <input type="submit" name="submit" value="开始提交"> <input type="reset" name="reset" value="重填"> <input type="button" name="button" value="按钮"> <input type="image" src="submit.gif" alt="提交"> </p> <!-- button标签，定义了一个按钮。如果在 HTML 表单中使用 button 元素，不同的浏览器会提交不同的值。 Internet Explorer 将提交 <button> 与 </button> 之间的文本，而其他浏览器将提交 value 属性的内容。 因此，还是用input标签来创建提交按钮以确保各个浏览器的兼容性。 --> <p> <button type="submit">提交</button> </p> </form> </body> </html>
在表单中，checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")。
表单控件中最重要的标签是<input>，该标签可以通过type属性设置不同的值来满足不同的应用场景。
比如输入密码用密码框，选择课程可以使用下拉框，选择爱好可以使用复选框，性别可以使用单选按钮，账号可以使用单行文本输入框，自我介绍可以使用多行文本输入框，等等......
以下是从网上整理的inpute type属性值各种用法
type="text"：创建单行文本输入框
type="password"：密码输入框
type="radio"：单选按钮
type="checkbox"：复选框
type="button"：普通按钮
type="submit"：提交按钮
type="reset"：重置按钮
type="image"：图像按钮
type="hidden"：隐藏域
type="file"：文件域
HTML5新增的inpute type属性值
input type="url"：输入URL字段
input type="tel" name="tel"：用来输入电话号码
type="search"：搜索字符串
type="email"：该控件用来输入"email"地址
type="color"：颜色选择器；语法为：﹤input type="color" id="color"﹥
type="number"：数字字段
type="range"：输入数值控件；
type="month"：年月控件
type="date"：日期控件
type="datetime"：日期加时间控件（基于UTC时区）
type="datetime-local"：日期加时间控件（不带时区）
