主体框架
<!doctype html>
<html>
<head>
<title>**网页描述**</title>
</head>
<body>
**网页主体部分**
<?body>
</html>
1.列表
（1）有序列表：ol
<!doctype html>
<html>
<head>
<title>有序列表</title>
</head>
<body>
<ol>
<li></li>
</ol>
<?body>
</html>
（2）无序列表：ul
<!doctype html>
<html>
<head>
<title>有序列表</title>
</head>
<body>
<ul>
<li></li>
</ul>
<?body>
</html>
（3）定义列表：dl
<!doctype html>
<html>
<head>
<title>有序列表</title>
</head>
<body>
<dl>
<dt> </dt>
<dd> </dd>
<dd> </dd>
<dd> </dd>
</dl>
<?body>
</html>
(4)多级列表
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多级列表</title> <!--证明li中可以由ul，ul中也可以有li-->
</head>
<body>
<h1>物品清单</h1>
<ul>
<li>
<h2>蔬菜</h2>
<ul style="circle">
<li>白菜</li>
<li>萝卜</li>
<li>黄瓜</li>
</ul>
</li>
<li>
<h2>水果</h2>
<ul>
<li>苹果</li>
<li>桃子</li>
<li>香蕉</li>
</ul>
</li>
</ul>
<!--快速编写列表ul>li*2>h2+ul>li*3(按下tab键)即可-->
</body>
</html>
2.列表+锚点：table
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签案例</title>
</head>
<body>
<table bgcolor="#000000" cellspacing="1px" width="800px" align="center" border="1px">
<caption><h2 align="center">今日小说排行榜</h2></caption> <!--只能写在table标签中-->
<tr align="center" bgcolor="white" >
<th>排名</th> <!--标题单元格th是标题单元格，会自动居中加粗（td是数据单元格）-->
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近7天</th>
<th>相关链接</th>
</tr>
<tr align="center" bgcolor="white">
<td>1</td>
<td>暴走大事件</td>
<td>*</td>
<td>623557</td>
<td>4088311</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr align="center" bgcolor="white">
<td>1</td>
<td>暴走大事件</td>
<td>*</td>
<td>623557</td>
<td>4088311</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr align="center" bgcolor="white">
<td>1</td>
<td>暴走大事件</td>
<td>*</td>
<td>623557</td>
<td>4088311</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr align="center" bgcolor="white">
<td>1</td>
<td >暴走大事件</td>
<td>*</td>
<td>623557</td>
<td>4088311</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr align="center" bgcolor="white">
<td>1</td>
<td>暴走大事件</td>
<td>*</td>
<td>623557</td>
<td>4088311</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr align="center" bgcolor="white">
<td>1</td>
<td>暴走大事件</td>
<td>*</td>
<td>623557</td>
<td>4088311</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
</table>
</body>
</html>
锚点： 超链接、或者页面内部点击跳转到当前页面其他位置（需要设置id）
<a href="网页链接" target=_blank(表示新开一个页面跳转到目标页面)>
链接名称</a>
<a href="# +id">(id是当前要调到的地方的id)链接名称</a>
eg:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>锚点（用a标签跳转到本页面相关位置）</title>
</head>
<body>
<a href="锚点测试界面.html#bottom" >锚点测试界面</a>
<h2 id="#">我是顶部</h2>
<a href="#center">跳转到中部</a> <!--必须告诉a标签一个独一无二的身份证号码让他去寻找，在HTML中每个标签都有一个ID属性，唯一标识它们自己-->
<!--a标签有个特点就是是直接跳转并非滚动跳转，要根据需要来选择标签-->
<!--a标签还可以调到指定页面的指定位置-->
<h2 id="center">我是中部</h2>
<a href="#low">跳转到底部</a>
<h2 id="low">我是底部</h2>
<a href="#">回到顶部</a>
</body>
</html>
运行结果图：
标准的table格式：
<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<table>
补充：为了简便，可以直接输入 table>caption+thead>tr>th3+tbody>tr3>td*3构造一个表格
3. 表单：form 重要！！！
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>总体练习</title>
</head>
<body>
<form action="https://baike.so.com/doc/5415216-24186322.html">
姓名： <input type="text" name="姓名" >
<br>
密码： <input type="password" name="密码" >
<br>
性别： <input type="radio" name="sex" checked="checked">男 <input type="radio" name="sex">女 <!--注意，单选框默认不会互斥，需要你加name ,并且name属性取值相同 ,还可以设置默认选中某个框子，设置checked=checked-->
<br>
爱好： <input type="checkbox">打篮球 <input type="checkbox">踢足球
<input type="checkbox">看小说 <input type="checkbox">看电影
<br>
文件： <input type="file">
<br>
<input type="submit" value="Submit"> <!--有提交的功能-->
<input type="button" value="按钮"> <!--没有提交的功能-->
<input type="reset">
<br>
<label>出生日期：</label><input type="date">
<br>
<label>输入时间：</label><input type="time">
<br>
<label>具体时间：</label><input type="datetime">
<!--填的所有内容均清空-->
<br>
<label>分数：</label><input type="range" max="100" min="0" >
<br>
<label>数目：</label><input type="number" max="100" min="0">
<br>
<label>手机号码：</label><input type="tel">
<br>
<br>
<input type="image" src="007fzS16ly1gje86iv2jsj33qj23lhdy.jpg" width="200px">
</form>
</body>
</html>
运行结果：
补充：
- img标签，插入图片
<img src="图片位置" >
- br标签，换行作用（shift+enter）
- hr标签，线条作用
4. input标签详细介绍：
需要知道form的作用是收集用户的信息，配合CSS、JS一起使用的，来响应用户的操作，操作后端之类的。
* type=text/password
姓名：<input type="text" >
<br>
密码：<input type="password">
运行结果：
* type=button/
<button>
* type=checkbox(多选框)
兴趣爱好：<input type ="checkbox" checked="checked"> 踢足球
<!--checked="checked"表示默认选中，对于多选框可以有多个input具有，对于单选框如果也有多个，则默认最后出现的那个是默认值！-->
<input type ="checkbox" > 打篮球
<input type ="checkbox" > 你（^ ^）
* type=radio（单选框）
注意：单选框有个注意点，它本身不具有互斥性，必须给它添加name，并且所有单选框名字一样才可以做到互斥，即单选
性别：<input type="radio" name="sex">男
<input type="radio" name="sex">女
<input type="radio" name="sex" checked="checked">保密
* type=time/date/number/datetime/file等等等
<input type="date">
<br>
<input type="file">
*图片按钮
<input type="image" src="图片位置">
*重置(清空表单中的数据，有默认名：重置，也可以自己改，添加value属性)
<input type="reset" >
*submit 提交表单数据,t将数据提交到远程服务器中
告诉表单中的那些数据需要提交，提交到哪，利用form中的action属性
<form action="远程服务器网址">
<input type="text" name="aa">
<!--在这里input中加了name表示这里填写的数据将来要提交到action中指定的远程服务器中-->
<input type="submit">
</form>
*hidden
<input type="hidden"> 用于悄咪咪的搜集数据
5. Label标签
如何让文字和输入框有关联，即点击文字，输入框聚焦，有更好的用户体验
<form action="">
<label for="account">账号：</label><input type="text" id="account">
<br>
<label for="psw">密码：</label><input type="passwo" id="psw">
<br>
</form>
第二种写法：直接用label标签将文字和输入框input包裹起来即可
<form action="">
<label>
账号<input type="text" id="account">
<\label>
</form>
6. HTML5补充部分
（1）给输入框绑定待选项：
<datalist id="cars">
<option>奔驰</option>
<option>宝马</option>
<option>奥迪</option>
<option>路虎</option>
<option>宾利</option>
</datalist>
<label for="type">请输入你的车型：</label> <input type="text" id="type" list="cars">
（2）type=email 邮箱/ url（网址）
自带检查功能！！！，邮箱和网址在点击提交的时候检验，而number类型的则是根本输不进去除了数字之外的东西
<form>
电子邮箱：<input type="email">
<input type="submit"><br>
网址：<input type="url">
<input type="submit"><br>
<input type="submit"><br>
电话号码：<input type="number">
</form>
(3) select 标签和 textarea标签
*select定义下拉列表：
不能输入，直接在列表中选择内容，而且用optgroup有分组的作用
<form>
<select>
<optgroup label="北京">
<option>朝阳区</option>
<option>昌平区</option>
<option>通州区</option>
</optgroup>
<optgroup label="广州">
<option>天河区</option>
<option>越秀区</option>
<option>黄浦区</option>
</optgroup>
</select>
</form>
*textarea：一般可以进行手动拉伸
<textarea rows="3" cols="10">
</textarea>
表单练习题
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单练习</title>
</head>
<body>
<form action="">
<p>
<label for="account"> 账号：</label> <input type="text" id="account">
</p>
<p>
<label for="psw"> 密码：</label> <input type="password" id="psw">
</p>
<p>
性别：<input type="radio" name="sex">男
<input type="radio" name="sex">女
<input type="radio" name="sex" checked>保密
</p>
<p>
爱好：<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox" checked>我<br>
</p>
<p>
个人简介：<textarea></textarea>
</p>
<p>生日：<input type="date"></p>
<p>邮箱：<input type="email"></p>
<p>手机：<input type="tel" max="11" min="11"></p>
<p>
<input type="button" value="注册"> <input type="reset" value="清空">
</p>
</form>
</body>
</html>