![[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元素构成的文本文件。
HTML文档是由各种HTML元素组成的，如html元素（HTML文档根元素）、head（HTML头部）元素、body（HTML主体）元素、title(HTML标题)元素和p（段落）元素等，这些元素都是通过尖括号“<>”组成的标签形式来表现的。实际上，HTML文档内容就是标签、元素和属性。例如下面的HTML文档。
一、html标签是什么？
标签就是<head>、<body>、<table>等被尖括号“<”和“>”包起来的对象，绝大部分的标签都是成对出现的，如<table></talbe>、<form></form>、<p></p>。当然还有少部分不是成对出现的，如<br>、<hr>等。
二、html元素
html元素就是用起始标签<p>与结束标签</p>组成的元素。
如：<div>欢迎来到php中文网大家一起来学习PHP</div>
三、html属性
是以"属性名=属性值"这种名值对的形式出现，而且属性总是在HTML元素的开始标签中进行定义。
如： <body bgcolor="yellow"> 定义关于背景颜色的附加信息。
四、html中的列表
html列表有三种分别是：无序列表、有序列表、自定义列表。
无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
有序列表
有序列表也是一列项目，列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
自定义列表
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</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> <!-- 无序列表 --> <h1>PHP学习计划——无序列表</h1> <ul> <li>当天上课认真听讲，做好笔记</li> <li>每天复习一遍之前学过的内容，做到不忘记</li> <li>每天敲一边之前所学的案例代码，做到熟悉代码原理</li> <li>总结敲代码时遇到敲错的地方，记录下来</li> </ul> <!-- 有序列表 --> <h1>PHP学习计划——有序列表</h1> <ol> <li>当天上课认真听讲，做好笔记</li> <li>每天复习一遍之前学过的内容，做到不忘记</li> <li>每天敲一边之前所学的案例代码，做到熟悉代码原理</li> <li>总结敲代码时遇到敲错的地方，记录下来</li> </ol> <!-- 自定义列表 --> <dl> <h1><dt>PHP学习计划——自定义列表</dt></h1> <dd>当天上课认真听讲，做好笔记</dd> <dd>每天复习一遍之前学过的内容，做到不忘记</dd> <dd>每天敲一边之前所学的案例代码，做到熟悉代码原理</dd> <dd>总结敲代码时遇到敲错的地方，记录下来</dd> </dl> </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>2018年某手机店每月手机销量</title> </head> <body> <table> <caption> <h1>2018年某手机店每月手机销量</h1> </caption> <!--表格头部--> <thead> <th>编号</th> <th>名称</th> <th>数量</th> <th>价格</th> </thead> <!--表格主体--> <tr> <td>1</td> <td>小米</td> <td>50</td> <td>10000</td> </tr> <tr> <td>2</td> <td>华为</td> <td>30</td> <td>20000</td> </tr> <tr> <td>3</td> <td>苹查</td> <td>15</td> <td>30000</td> </tr> <tr> <td colspan="2">统计</td> <td>60000</td> </tr> </table> </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>用户注册表单</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="password" placeholder="请输入密码" /> </p> <p> <label for="email">邮箱：</label> <input type="email" id="email" name="email" placeholder="example@qq.com" /> </p> <p> <label for="">性别：</label> <input type="radio" id="male" name="sex" /><label for="male">男</label> <input type="radio" id="female" name="sex" /><label for="female">女</label> <input type="radio" id="secrecy" name="sex" checked /><label for="secrecy">保密</label> </p> <p> <label for="">爱好：</label> <input type="checkbox" id="walk" name="fonds[]" /><label for="walk">散步</label> <input type="checkbox" id="work" name="fonds[]" /><label for="work">写代码</label> <input type="checkbox" id="ball" name="fonds[]" /><label for="ball">打球</label> </p> <p> <label for="">课程：</label> <select name="" id=""> <option value="">请选择</option> <optgroup label="后端"> <option value="">php</option> <option value="">mysql</option> <option value="">laravel</option> </optgroup> <optgroup label="前端"> <option value="">html</option> <option value="">css</option> <option value="">javascript</option> </optgroup> </select> </p> <p> <input type="submit" name="submit" value="提交" /> <input type="button" name="button" value="按钮" /> </p> </form> </body> </html>
点击 "运行实例" 按钮查看在线实例
总结标签应用场景：
文本
<h1>...</h1> 标题字大小（h1~h6）
<ul>…</ul> 无序列表
<ol>…</ol> 有序列表
<li>…</li> 列表项目
表格
<table>…</table> 定义表格
<th>…</th> 定义表格中的表头单元格
<tr>…</tr> 定义表格中的行
<td>…</td> 定义表格中的单元
链接
<a href="#" title="">链接文本/图片</a>
注:# 换成所要链接的文件相对地址。title:为链接提示信息。
图片链接：
<img src="" alt="" width="" hegiht="" >
src:图片链接相对地址，alt：图片信息， width：图片宽度，height:图片高度。
表单开始标签：<form name="表单名称" method="post/get" action="提交地址">
文本框：<input type="text" name="名称" value="值" />
密码框：<input type="password" name="名称" value="值"/>
单选按钮：<input type="radio" name="名称" checked />
复选框：<input type="checkbox" name="名称" checked />
列表：
<select>
<option value="值"></option>
</select>
提交按钮:<input type="submit" name="名称" value="值" />
重置按钮 <input type="reset" name="名称" value="值" />
表单结束标签:</form>