1、HTML的基本结构
HTML是Hyper Text Markup Language的缩写，意思是超文本标记语言。HTML不是一种编程语言，相对编程来说简单一些。这个标记语言是为了让浏览器能理解，然后呈现出人们能直观浏览的样子。
HTML文档的结构如下：
<!DOCTYPE html> <!--文档类型--> <html lang="en"> <!--文档根元素--> <head> <!--文档头部开始--> <meta charset="UTF-8"> <!--meta标签用来设置页面的一些参数--> <title>HTML的结构</title><!--网页的标题--> </head> <!--文档头部结束--> <body> <!--文档主体开始，用户打开网页看到的部分--> <h1>从零开始学开发</h1> </body> <!--文档主体结束--> </html> <!--文档结束-->
HTML的元素包含了标签和属性。标签告诉浏览器这是个什么东西，比如<title>xxx</title>告诉浏览器这是个标题。属性则表示这个东西是什么样子，比如<h1 class="red">xxx</h1>,class="red"就告诉浏览器xxx要显示成红色。而元素则是整个包含了标签，内容及其属性的一个整体。
常见标签大全参考：https://www.w3school.com.cn/tags/tag_html.asp
2、三种列表形式
列表分为无序列表、有序列表和定义列表。其中无序列表最为常见，有序列表会自带序号，比较少见。定义列表可以用于footer等特定的场景。形式如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>有序、无序、定义列表</title> </head> <body> <!-- 有序列表 --> <h5>拆除旧锁</h5> <ol> <li>拆掉旧面板</li> <li>拆掉旧锁xin</li> <li>拆掉旧锁体</li> </ol> <!-- 无序列表 --> <h5>换上新锁</h5> <ul> <li>上新锁体</li> <li>装新锁xin</li> <li>装方钢</li> <li>装前后面板</li> </ul> <!-- 定义列表 --> <h3>测试新锁</h3> <dl> <dt>新建管理员</dt> <dd>录入指纹</dd> <dt>新建用户</dt> <dd>录入密码</dd> <dd>录入IC卡</dd> <dt>调整时间</dt> <dd>调整为北京时间</dd> </dl> </body> </html>
3、列表与表格的关系
表格由多行和多列组成，一行一列的表格就是一个单元格，列表可以看成是一个单列或单行的表格。在做导航栏或者页面底部的内容的时候通常用列表，再比如新闻列表也可以用列表来做。需要多行多列展示信息的时候，就会用到表格，比如购物车，要显示多个产品，每个产品有序号、名称、价格、数量等信息。
4、订货单的实现
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>订货单</title> </head> <body> <table border="1" width="500" cellspacing="0" cellpadding="2" > <caption>订货单</caption> <!-- 表头部分 --> <thead> <tr bgcolor="darkgrey"> <th>序号</th> <th>产品名称</th> <th>规格</th> <th>单价</th> <th>数量</th> <th>小计</th> <th>物流信息</th> </tr> </thead> <!-- 主体部分 --> <tr> <td>1</td> <td>816</td> <td>标配</td> <td>1000</td> <td>5</td> <td>5000</td> <td rowspan="3">壹米滴答</td> </tr> <tr> <td>2</td> <td>819</td> <td>快开</td> <td>1200</td> <td>3</td> <td>3600</td> </tr> <tr> <td>3</td> <td>822</td> <td>全自动</td> <td>1400</td> <td>1</td> <td>1400</td> </tr> <tr> <td>已付</td> <td>3000</td> <td>待付</td> <td>7000</td> <td colspan="2">合计</td> <td><font color="red">10000</font></td> </tr> </table> </body> </html>
以上是一个订货单，物流信息一列用到了行合并，最下面一行合计用到了列合并。
5、表单
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <h3>经销商注册</h3> <form action="reg.php" method="post"> <p> <label for="user">姓名:</label> <input type="text" id="name" name="user" value="" placeholder="请输入真实姓名"> </p> <p> <label for="cellphone">手机:</label> <input type="number" id="cellphone" name="cellphone" placeholder="请输入正确手机号码"> </p> <p> <label for="email">邮箱:</label> <input type="email" id="email" name="email" value="" placeholder="example@email.com"> </p> <p> <label for="employee">员工人数:</label> <input type="number" id="employee" name="employee" min="1" max="9999"> </p> <p> <label for="">代理区域</label> <select class="" name=""> <optgroup label="华中"> <option value="">湖北</option> <option value="">湖南</option> <option value="">江西</option> </optgroup> <optgroup label="西南"> <option value="">重庆</option> <option value="">四川</option> <option value="">云南</option> <option value="">贵州</option> </optgroup> </select> </p> <P> <label for="">代理产品:</label> <input type="checkbox" name="products[]" value="lock" id="lock" checked><label for="lock">智能锁</label> <input type="checkbox" name="products[]" value="airer" id="airer"><label for="airer">智能晾衣架</label> <input type="checkbox" name="products[]" value="toilet" id="toilet"><label for="toilet">智能马桶</label> </P> <p> <label for="rank">代理级别:</label> <input type="radio" name="gender" id="salers" checked><label for="salers">特约零售商</label> <input type="radio" name="gender" id="partner"><label for="partners">合作经销商</label> <input type="radio" name="gender" id="agents"><label for="agents">区域代理商</label> </p> <p> <label for="password">密码</label> <input type="password" id="password" name="password" placeholder="6位-16位密码"> </p> <p> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重填"> <input type="button" name="reset" value="按钮"> <button type="button">注册</button> </p> </form> < </body> </html>
以上是一个经销商注册的表单。
6、总结
本节课讲了HTML的基本结构和常用标签，以及列表、表格和表单。其中表单的知识点比较多。包括很多type，label for的应用，以及name id value checked等要素，还是要多复习才行。
