一、html标签、元素与属性
html标签一般是成对出现，有开头和结尾，比如 <h1></h1>、<p></p>等叫做双标签，还有比如<hr>、<br>等单标签。
html元素可以描述网页的构成，比如标识标题的<h1></h1>，标识图片的<img />， 标识段落的<p></p>。
hmtl元素还有自己的属性，比如<img />标签家加上src属性<img src="" />，用来表明图片的地址，比如给<a>标签加上
src属性<a href=""></a>可以表明要跳转的地址。
二、列表
列表有无序列表<ul>、有序列表<ol>、定义列表<dl>
有序列表定义方式
<ul> <li>无序列表</li> <li>无序列表</li> <li>无序列表</li> </ul>
无序列表定义方式
<ol> <li>有序列表</li> <li>有序列表</li> <li>有序列表</li> </ol>
定义列表
<dl> <dt>标题</dt> <dd>内容</dd> </dl>
三、列表与表格
列表是对信息的逐条展示，表格是对每条信息进行归类整理逐条展示。表格是在列表基础上进行逐条信息的提取归类整理划分。
当展示某类的信息的单一属性比如只展示所有文章的标题这一属性，就可以用列表，是对单一属性展示不需要区分。
而当要展示出某类信息的所有属性比如所有文章的标题、描述、写作时间等，这时用表格，因为需要在每条信息中对属性区分。
四、编程实现工作计划，分别用ul、ol、dl实现
ul实现
<ul> <li>第一天用编写ul列表</li> <li>第二天用编写table表格</li> <li>第三天用编写form表单</li> </ul>
ol实现
<ol> <li>第一天用编写ul列表</li> <li>第二天用编写table表格</li> <li>第三天用编写form表单</li> </ol>
dl实现
<dl> <dt>第一天</dt> <dd>编写ul列表</dd> <dt>第二天</dt> <dd>编写table表格</dd> <dt>第三天</dt> <dd>编写from表单</dd> </dl>
五、商品清单表格
实例
<table border="1" width="500" cellspacing="0" cellpadding="5"> <caption> <h3>购物清单</h3> </caption> <!-- 头部 --> <thead> <th>编号</th> <th>名称</th> <th>价格</th> <th>数量</th> <th>金额</th> <th>分类</th> </thead> <!-- 表体 --> <tr> <td>1</td> <td>Html5精通</td> <td>100</td> <td>1</td> <td>100</td> <td rowspan="4">大前端</td> </tr> <tr> <td>2</td> <td>Css3精通</td> <td>100</td> <td>1</td> <td>100</td> </tr> <tr> <td>3</td> <td>JavaScript精通</td> <td>100</td> <td>2</td> <td>200</td> </tr> <!-- 页脚 --> <tr> <td colspan="3" align="center">总计：</td> <td>4</td> <td>400</td> </tr> </table>
运行实例 »
点击 "运行实例" 按钮查看在线实例
六、 注册表单
实例
<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="run" name="fonds[]" /><label for="run">跑步</label> <input type="checkbox" id="work" name="fonds[]" /><label for="work">写代码</label> <input type="checkbox" id="music" name="fonds[]" /><label for="music">听音乐</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="reset" name="reset" value="重置" /> <input type="button" name="button" value="按钮" /> </p> <p> <button type="">按钮</button> </p> </form>
运行实例 »
点击 "运行实例" 按钮查看在线实例
七、总结
1、<a>标签常用来表示链接跳转，<h>标签用来表示文章标题，<img>标签用来表示图片。
2、列表中的<ul>无序列表比较常用，主要用来展示信息，比如新闻列表。
3、table表格经常会用到，比如购物清单、公司员工清单等。
4、form表单经常用到，在网站的登录、注册等。
5、form表单中很多的控件像<input type="text" />输入框、单选框<input type="radio" />、多选框<input type="checkbox" />、下拉框<select>、提交按钮<input type="submit" />、重置按钮<input type="reset" />、按钮<button>，都是经常用到的。