![[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代码实现, 却不知原来只是html标签中的一个属性罢了
Collection
Collection
HTML的标签、元素及属性
HTML文档由各种html元素组成，如html元素，HTML文档的根元素；head元素，HTML文档的头部元素，body元素，HTML文档的主体元素，title元素是文档的标题元素。
HTML的标签是由一堆尖括号组成<>,分为其实标签和结束标签，如<P></p>,<div></div>，两者标签名相同，结束标签多了一个斜杠“/”，HTML标签大都是成对出现，也有一些特殊的标签没有结束标签，如<img />、<input />、<hr />等没有结束标签。HTML的标签对大小写不敏感，大小<P>和小写<p>一样能被浏览器所识别。
HTML元素是组成HTML文档的基本组成部件，它是由HTML的标签来体现，如下面的示例<p>内容</p>表明是一个段落元素，HTML元素可以相互嵌套，由最外层的html元素，嵌套里边的head，body等元素，HTML元素又分为“块元素”和“行内元素”，“块元素”会独占一行，在网页中的效果是该元素的内容对于其前后元素的内容都另起一行。比如前面有行内元素span，块元素p会另外起一行来显示，“行元素”在网页中的效果是该元素的内容对于其前后元素的内容都在一行显示，如span、img。
HTML元素属性是由元素属性和值来组成，HTML的元素属性显示了对HTML元素的描述，如img标签里的src、width、height属性，p标签里的style属性，浏览器就会按照设定的效果来显示内容。
<!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> <span>行内元素</span><span>行内元素</span><span>行内元素</span> <P>我是一个段落</p> <P>我是一个段落</p> <P style="color:red;">我是一个段落</p> <div><img src="https://img.php.cn/upload/course/000/000/001/5d1c6dfc9eb09885.jpg" width="200" height="100"/><div> </body> </html>
点击 "运行实例" 按钮查看在线实例
HTML列表
HTML列表有三种，它们都是块元素，分为有序列表，无序列表还有定义列表，用的最多的是无序列表，它们通常是组合标签出现，常用在网页布局导航的部分。
有序列表：最外层是ol，里面是li元素，默认会带上数字序列
<ol> <li><a href="#">导航1</a></li> <li><a href="#">导航2</a></li> <li><a href="#">导航3</a></li> <li><a href="#">导航4</a></li> <li><a href="#">导航5</a></li> </ol>
点击 "运行实例" 按钮查看在线实例
无序列表：最外层是ul，里面是li元素，不会带上数字序列，前面有默认样式小点，通常会用无序列表模拟有序列表，如新闻列表，导航里面用的多。
<ul> <li><a href="#">我是新闻列表</a></li> <li><a href="#">我是新闻列表</a></li> <li><a href="#">我是新闻列表</a></li> <li><a href="#">我是新闻列表</a></li> <li><a href="#">我是新闻列表</a></li> </ul>
点击 "运行实例" 按钮查看在线实例
定义列表：最外层是dl，里面有dt和dd，dt是代表了列表的标题，是html元素更具有语义化，可以有多个dt。
<dl> <dt>新闻标题</dt> <dt>新闻标题</dt> <dd><a href="#">我是一条新闻</a></dd> <dd><a href="#">我是一条新闻</a></dd> <dd><a href="#">我是一条新闻</a></dd> <dd><a href="#">我是一条新闻</a></dd> </dl>
点击 "运行实例" 按钮查看在线实例
列表与表格的区别
01、列表与表格很类似，都可以表示一组数据。
02、列表外部由ol、ul、dl表示，l代表了list，内部有li或者dd组成，而表格由最外层的table包裹，内部有thead、tbody、tfoot，内部有tr、td、th组成。
03、表格还有colspan和rowspan这两个属性用于创建特殊的表格。
04、colspan用来指定单元格横向跨越的列数：colspan就是合并列的，colspan=2的话就是合并两列。
05、rowspan用来指定单元格纵向跨越的行数:rowspan就是用来合并行的，比如rowspan=2就是合并两行。
06、如果数据比较简单，只有一列数据，就用列表来表示，如果有多列数据，就适合用表格来表示。
列表实现工作计划
<h3>工作计划</h3> <ol> <li>学习完前端HTML相关知识</li> <li>学习JS、Jquery动态脚本语言</li> <li>学习前端框架，做出后台静态页面</li> </ol> <ul> <li>学习PHP语法</li> <li>学习laravel框架</li> </ul> <dl> <dt>项目实战开发</dt> <dd>开发一套自己的CMS后台框架</dd> <dd>使用CMS搭建一个门户网站</dd> <dd>下一个工作，工资要涨5000</dd> </dl>
点击 "运行实例" 按钮查看在线实例
商品清单
<caption>商品清单</caption> <table border="1" width="600" cellspacing="0" cellpadding="10"> <tead> <tr> <th>订单号</th> <th>序列</th> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>金额</th> </tr> </tead> <tbody> <tr> <td rowspan="4">000520190831</td> <td>1</td> <td>华为P30</td> <td>5500</td> <td>1</td> <td>5500</td> </tr> <tr> <td>2</td> <td>华为Mate20</td> <td>3800</td> <td>2</td> <td>7600</td> </tr> <tr> <td>3</td> <td>荣耀10</td> <td>2000</td> <td>2</td> <td>4000</td> </tr> <tr> <td colspan="3">合计</td> <td>5</td> <td>17100</td> </tr> </tbody> </table>
点击 "运行实例" 按钮查看在线实例
HTML注册表单
<h4 align="center">用户注册</h4> <form action="register.php" method="POST" align="center"> <p> <label for="name">用户:</label> <input type="text" id="name" value="木槿昔年" name="name" placeholder="请输入用户名"> </p> <p> <label for="password">密码:</label> <input type="password" id="password" value="" name="password" maxlength="12" placeholder="密码6~12位"> </p> <p> <label for="email">邮箱:</label> <input type="email" id="email" value="" name="email" placeholder="example@.example.com"> </p> <p> <label for="age">年龄:</label> <input type="number" id="age" value="" name="age" min="16" max="60"> </p> <p> <label>课程</label> <select name="project" id="project"> <optgroup label="前端课程"> <option value="">请选择课程</option> <option value="">HTML</option> <option value="">JavaScript</option> <option value="">Jquery</option> </optgroup> <optgroup label="后端课程"> <option value="">PHP</option> <option value="">Mysql</option> <option value="">Laravel</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="program" id="program"><label for="program">撸代码</label> <input type="checkbox" name="hobby[]" value="movies" id="movies"><label for="movies">看电影</label> </p> <p><label for="">性别</label> <input type="radio" name="gender" value="male" id="game" checked><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"><label for="secrecy">保密</label> </p> <p><label for="">按钮</label> <input type="submit" value="提交" title="input提交"> <input type="reset" value="重置"> <input type="button" value="按钮" title="input按钮"> <button type="submit" title="button按钮">确定</button> </p> </form>
点击 "运行实例" 按钮查看在线实例
总结部分
小结：html元素比较多，常用的标签有div 、p、 ul（li）列表标签，重点理解行内元素和块元素的不同点。
表格里的colspan表示合并列，rowspan表示合并行，比较容易记混淆。
表单控件里的内容比较多，重点记住select和option是组合标签，复选框type类型用checkbox，name属性值相同后面带上[]，表示数组，单选框type类型用radio，name属性值相同。
input按钮里面type属性值为submit或者是button按钮的时候，会直接提交数据。
