HTML-body标签
body标签
在使用浏览器查看html页面时候，看得到内容都是body标签中呈现出来。
分类：
- 块级，标签自己独占整行。
- 行内，标签内容有多少就占多少空间。
div和span
div是最简单的块级标签，span是最简单的行内标签，两者都没有什么样式，可以包裹在其他标签外面。
<div>标题党</div>
<div>杀无赦</div>
<span>标题党</span>
<span>去死吧</span>
br 换行
br标签用于内容进行换行处理。
<div>挖掘机哪家强？<br/>快来山东找蓝翔。</div>
p 段落
p标签用于表示段落，段落和段落之间有些间距，一般用于多内容多段落展示，例如：文章、作文、博客等。
<p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p>
<p>宫中府中，俱为一体，陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。</p>
<p>侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。</p>
h 标题系列
h标签用于展示标题数据（加大加粗的样式），h系列标签共有6种，从h1~h6依次变小。
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
a 超链接
a标签主要有两个作用：
分别是做超链接，点击之后可以跳转到指定地址；
<a href="http://www.luffycity.com" title="看了你就知道了">路飞学城</a>
做锚点，点击后跳转到页面指定位置，要跳转的位置要有一个标识。
<body>
<h1>章节</h1>
<a href="#i1" title="第一章">第一章 寂寞的春天</a>
<a href="#i2" title="第二章">第二章 寂寞的夏天</a>
<a href="#i3" title="第三章">第三章 寂寞的秋天</a>
<a href="#i4" title="第四章">第四章 寂寞的冬天</a>
<h1>内容</h1>
<div style="height: 1000px;" id="i1">
<h3>第一章 寂寞的春天</h3>
<p>春暖花开,万物复苏,又到了交配的季节。</p>
</div>
<div style="height: 1000px;" id="i2">
<h3>第二章 寂寞的夏天</h3>
<p>夏天夏天悄悄过去留下小咪咪</p>
</div>
<div style="height: 1000px;" id="i3">
<h3>第三章 寂寞的秋天</h3>
<p>今年的秋天真是寂寞呀！！！</p>
</div>
<div style="height: 1000px;" id="i4">
<h3>第四章 寂寞的冬天</h3>
<p>下雪</p>
</div>
</body>
ul 列表系列
在html中 ul、ol、dl用于展示列表数据。
<body>
<ul>
<li>周杰伦</li>
<li>林俊杰</li>
<li>王力宏</li>
</ul>
<ol>
<li>铁锤</li>
<li>钢弹</li>
<li>狗蛋</li>
</ol>
<dl>
<dt>河北省</dt>
<dd>邯郸</dd>
<dd>石家庄</dd>
<dt>山西省</dt>
<dd>太原</dd>
<dd>平遥</dd>
</dl>
</body>
table 表格
table标签用于在html页面展示表格，一般在网站中看到的表格都是基于table标签实现。
正常显示表格
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>武沛齐</td>
<td>18</td>
<td>看书</td>
</tr>
<tr>
<td>Alex</td>
<td>18</td>
<td>吃翔</td>
</tr>
</tbody>
</table>
合并单元格
表格除了基本的显示以外还支持合并单元格。
<table border="1">
<thead>
<tr>
<th colspan="3">人员信息</th>
<!--三列合并显示该内容-->
</tr>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>武沛齐</td>
<td>18</td>
<td>看书</td>
</tr>
<tr>
<td rowspan="3">Alex</td>
<!--三行合并显示该内容-->
<td>18</td>
<td>女神</td>
</tr>
<tr>
<td>25</td>
<td>男人</td>
</tr>
<tr>
<td>30</td>
<td>自己</td>
</tr>
<tr>
<td>村长</td>
<td>男</td>
<td>保健</td>
</tr>
</tbody>
</table>
img 图片
img标签用于显示图片。
<!--显示本地图片，找不到图片则显示alt中的文字-->
<img src="本地路径" alt="美女">
<!--显示网络图片，图片加载失败则显示alt中的内容-->
<img src="图片url" alt="大波妹子">
input系列
input系列中共有5个至关重要的标签，他为浏览器提供了数据交互的功能，
即：用户可以在浏览器上输入数据和选择选项，以后可以把输入和选择的内容提交给后端。
- text，文本框。
- password，密码框。
- radio，单选框（必须设置name属性相同，否则无法实现）。
- checkbox，复选框。
- file，文件上传。
<body>
<h3>文本框</h3>
<input type="text">
<h3>密码框</h3>
<input type="password">
<h3>单选框</h3>
<input type="radio" name="gender">男
<input type="radio" name="gender">女
<h3>复选框</h3>
<input type="checkbox">篮球
<input type="checkbox">足球
<input type="checkbox">橄榄球
<h3>上传文件</h3>
<input type="file">
</body>
select下拉框
select标签用于在浏览器上展示下拉框。
<body>
<h3>单选</h3>
<select>
<option>上海</option>
<option>北京</option>
<option>深圳</option>
</select>
<h3>多选</h3>
<select multiple>
<option>上海</option>
<option>北京</option>
<option>深圳</option>
</select>
</body>
textarea 多行文本框
textarea用于在浏览器上展示多行文本输入框。
<textarea>文本内容写在这里...</textarea>
form 表单
在网站开发的过程中，用户可以使用上述【用户交互】相关的标签让用户输入内容，但如果想要再浏览器上把输入的内容提交到后台，则需要表单和提交按钮。
<form action="http://www.x.cn" method="get">
<p>用户名：<input type="text" name="user"></p>
<p>密 码：<input type="password" name="pwd"></p>
<p>性别：
<input type="radio" name="gender" value="2">男
<input type="radio" name="gender" values="3">女
<p/>
<p>爱好：
<input type="checkbox" name="favor" value="2">篮球
<input type="checkbox" name="favor" value="8">足球
<input type="checkbox" name="favor" value="10">橄榄球
</p>
<p>城市：
<select name="city">
<option value="1">上海</option>
<option value="2">北京</option>
</select>
</p>
<p>备注：<textarea> name="memo"></textarea></p>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
在使用form表单进行提交数据时，需要注意以下几点：
提交时，只会提交form标签内部【用户交互】相关的标签。
<input type="submit" value="提交">用于提交当前所在的表单。
<input type="reset" value="重置">用于重置当前标签中的选项。
form标签内置属性
action="/xx/" ，表示表单要提交的地址。
method="get"，表示表单的提交方式（get 或 post，以后框架部分细讲）。
enctype="multipart/form-data"，如果form内部有文件上传，必须加上此设置。
<form action="http://www.luffycity.com" method="get" enctype="multipart/form-data">
<input type="file" name="xxxxx">
<input type="submit" value="提交">
</form>
