1.HTML文档是由各种HTML元素组成的，实际上，HTML文档内容就是标签、元素和属性。
下面是一个最基本的HTML5文档：
<!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> </body> </html>
2.列表的种类及定义。
HTML中的列表元素有3种分别是： 有序列表、无序列表和自定义列表。
2.1 有序列表由<ol></ol>标记对实现，在<ol></ol>标记之间使用成对的<li></li>标记添加列表项。
2.2 无序列表由成对的<ul></ul>标记对实现，<ul></ul>标记之间使用成对的<li></li>标记可添加列表项。
2.3 自定义列表以<dl>标记开始，自定义列表项以<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> <h1>列表实现工作计划</h1> <ol> <li>先看一遍老师的直播视频</li> <li>视频过程手写记不住的英语单词</li> <li>看完视频后再动手敲一遍课程学到的知识</li> <li>敲代码过程有错误反复观看视频找出错误点认真去记</li> </ol> <br> <ul> <li>先看一遍老师的直播视频</li> <li>视频过程手写记不住的英语单词</li> <li>看完视频后再动手敲一遍课程学到的知识</li> <li>敲代码过程有错误反复观看视频找出错误点认真去记</li> </ul> <br> <dl> <dt>列表实现工作计划</dt> <dd>先看一遍老师的直播视频</dd> <dd>视频过程手写记不住的英语单词</dd> <dd>看完视频后再动手敲一遍课程学到的知识</dd> <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> <table border="1" cellspacing="0" winth="500" cellpadding="5"> <caption>购物车</caption> <!-- 表头 --> <thead> <tr bgcolor="red"> <th style="color:white">编号</th> <th style="color:white">型号</th> <th style="color:white">颜色</th> <th style="color:white">大小</th> <th style="color:white">数量</th> <th style="color:white">单价</th> <th style="color:white">金额</th> </tr> </thead> <!-- 主体 --> <tr> <td>1</td> <td>iphone x</td> <td rowspan="3">白色</td> <td rowspan="3">64G</td> <td>1</td> <td>5500</td> <td>5500</td> </tr> <tr> <td>2</td> <td>iphone xs</td> <!-- <td>白色</td> --> <!-- <td>64G</td> --> <td>1</td> <td>6500</td> <td>6500</td> </tr> <tr> <td>3</td> <td>iphone xs max</td> <!-- <td>白色</td> --> <!-- <td>64G</td> --> <td>2</td> <td>8500</td> <td>8500</td> </tr> <tr> <td colspan="4" align="center">合计:</td> <!-- <td></td> <td></td> --> <td>4</td> <td></td> <td>20500</td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
6.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 style="color: blue">登陆</h1> <form action="login" method="get"></form> <p> <label for="Phone">账号：</label> <input type="text" name="Phone" id="Phone" placeholder="不能超过11个字符"> </p> <p> <label for="email">邮箱：</label> <input type="email" id="email" name="email" placeholder="example@email.com"> </p> <p> <label for="password">密码：</label> <input type="password" id="passwor" name="password" placeholder="输入6-11位密码"> </p> <P> <label for="age">年龄</label> <input type="number" name="age" id="age" placeholder="请输入您的年龄" min="16" max="88"> </P> <br> <label for="">开发课程</label> <!-- 下拉列表 --> <select name="" id=""> <optgroup label="前端"> <option value="">请选择</option> <option value="">HTML5</option> <option value="">CSS3</option> <option value="">JavaScript</option> </optgroup> <optgroup label="后端"> <option value="">Php</option> <option value="">Mysql</option> <option value="">Laravel</option> </optgroup> </select> <br> <p> <label for="">爱好：</label> <input type="checkbox" name="hobby[]" value="grame" id="grame"><label for="grame">玩游戏</label> <input type="checkbox" name="hobby[]" value="programe" id="programe" checked><label for="programe">撸代码</label> <input type="checkbox" name="hobby[]" value="movies" id="movies"><label for="movies">看电影</label> </p> <p> <label for="">性别：</label> <input type="radio" name="gender" id="male"><label for="male">男生</label> <input type="radio" name="gender" id="female"><label for="femal">女生</label> <input type="radio" name="gender" id="secrecy" checked><label for="cecrecy">保密</label> </p> <p> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重填"> <input type="button" name="button" value="按钮"> <button type="button">注册</button> </p> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
7.课程总结
HTML文件由<html></html><head></head>和<body></body>三部分组成，只有<body></body>中内容在网页上显示。<title>：指定整个网页的标题，在浏览器最上方显示。<body>：主体标签，定义HTML文档所要显示的内容。
form表单使用
action：表单需要提交的服务器地址
method：表单提交数据使用的方法，get/post
下拉选择控件 select ，for是关联。