1、HTML标签、元素与属性：
HTML代码是有很多的标签构成的。浏览器渲染网页的时候会把HTML解析成一个标签树，每个标签都是一个节点，每个节点就是一个网页元素，标签和元素是同义词。比如：<p>标签对应网页的p元素。
<h2>php中文网</h2> <img src="php.gif" alt="php中文网">
属性是标签的额外信息，使用空格与标签名和其他属性分割。
<img src="tupian.gif" alt="">
2、列表种类及定义：
列表有无序列表、有序列表、定义列表3种。
（1）、无序列表：
<ul> <li>张三</li> <li>李四</li> </ul>
（2）、有序列表：
<ol> <li>张三</li> <li>李四</li> </ol>
（3）、定义列表：
<dl> <dt>php介绍</dt> <dd>全球最流行的编程语言。</dd> </dl>
3、列表与表格:
列表由ol、ul、dl表示，内部有li或dt、dd组成，而表格由table包裹外部，内部有thead、tbody、tfoot，tr、th、td组成
如果数据比较简单或导航类列表，只有一列数据，就用列表来进行代码编写，如果有多列数据，就适合用表格来编写。
4、用列表编程制作工作计划：
<h2>九月份工作计划</h2> <ul> <li>第一周完成HTML的学习</li> <li>第二周完成CSS的学习</li> <li>第二周完成PHP的学习</li> </ul> <h2>九月份工作计划</h2> <ol> <li>第一周完成HTML的学习</li> <li>第二周完成CSS的学习</li> <li>第二周完成PHP的学习</li> </ol> <dl> <dt>九月份工作计划</dt> <dd>第一周完成HTML的学习</dd> <dd>第二周完成CSS的学习</dd> <dd>第二周完成PHP的学习</dd> </dl>
5、商品清单：
实例
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>商品清单</title> </head> <body> <table width="600" border="1" cellpadding="5" cellspacing="0" bordercolor="#999999"> <tr> <th bgcolor="#f0f0f0">编号</th> <th bgcolor="#f0f0f0">商品名称</th> <th bgcolor="#f0f0f0">单价</th> <th bgcolor="#f0f0f0">数量</th> <th bgcolor="#f0f0f0">金额</th> </tr> <tr> <td>1</td> <td>奔驰专用机油</td> <td>800</td> <td>1</td> <td>800</td> </tr> <tr> <td>2</td> <td>京东摄像头</td> <td>300</td> <td>2</td> <td>600</td> </tr> <tr> <td>3</td> <td>笔记本电脑</td> <td>7800</td> <td>1</td> <td>7800</td> </tr> <tr> <td colspan="3">总计：</td> <td>4</td> <td>9200</td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
6、注册表单：
实例
<!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> <h3>用户注册</h3> <form action="reg.php" method="POST"> <p> <label for="username">账号：</label> <input type="username" id="username" name="username" placeholder="请输入用户名"> </p> <p> <label for="password">密码：</label> <input type="password" id="password" name="password" placeholder="长度8-16个字符"> </p> <p> <label for="email">邮箱：</label> <input type="email" id="email" name="email" placeholder="example@email.com"> </p> <p> <label for="age">年龄：</label> <input type="number" id="age" name="age" min="16" max="60" value="16"> </p> <p> <label for="class">课程：</label> <select name="class" id="class"> <option value="">请选择</option> <optgroup label="前端"> <option value="">html</option> <option value="">css</option> <option value="">javascript</option> </optgroup> <optgroup label="后端"> <option value="">php</option> <option value="">mysql</option> <option value="">laraver</option> </optgroup> </select> </p> <p> <label for="">性别：</label> <input type="radio" name="gender" id="girl"><label for="girl">女生</label> <input type="radio" name="gender" id="male"><label for="male">男生</label> <input type="radio" name="gender" id="secrced" checked><label for="secrced">保密</label> </p> <p> <button>提交</button> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例