一、基本标签
<body>
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<!--p段落标签独占一行-->
<p>段落标签</p>
<h1>标题1格式</h1>
<h2>标题1格式</h2>
<h3>标题1格式</h3>
<h4>标题1格式</h4>
<h5>标题1格式</h5>
<h6>标题1格式</h6>
<!--换行br标签-->
<br>
<!--水平线hr标签，独占一行-->
<hr>
</body>
二、特殊字符
<body>
<!-- 空格 -->
<!-- > -->>
<!-- < --><
<!-- & -->&
<!-- ￥ -->¥
<!-- 版权商标 -->©
<!-- 注册商标 -->®
</body>
三、div和span标签
<div></div> 没有默认的样式，独占一行，属与块级标签，方便后续使用css调整样式
<span></span> 没有默认的样式，span不换行，属于行内标签（内联标签），默认在一行显示，方便后续使用css调整样式
块级元素与行内元素的区别：
所谓块元素，是以另起一行开始渲染的元素，行内元素则不需另起一行。如果单独在网页中插入这两个元素，不会对页面产生任何的影响。
这两个元素是专门为定义CSS样式而生的。
标签支持嵌套：
① 块级标签可以包含内联标签
② p标签不能包含p标签，浏览器会自动补全p标签
③ p标签不能包含div标签，浏览器会自动补全p标签
块级标签（独占一行）：p/div/h1~h6/hr/li/tr
行内标签（内联标签）：（默认都在一行显示,宽度由内容决定的）
四、img标签
<body>
<!--src=图片路径，alt=图片未加载成功时的提示，title=鼠标悬浮时提示信息，width=宽，height=高（宽和高只能用一个自动等比缩放）-->
<img src="./zhouyu.jpg" alt="周瑜加载失败" title="周瑜" width="225">
</body>
五、a标签
超链接标签
所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。
href属性指定目标网页地址。该地址可以有几种类型：
- 绝对URL - 指向另一个站点（比如 href="http://www.jd.com）
- 相对URL - 指当前站点中确切的路径（href="index.htm"）
- 锚URL - 指向页面中的锚（href="#top"）
target：
- _blank表示在新标签页中打开目标网页
- _self表示在当前标签页中打开目标网页
<body>
<!--绝对URL,点击后在新页面打开相应的网站-->
<a href="http://www.google.com.hk" target="_blank">谷歌</a>
<!--相对URL，点击后在当前页打开网站目录的路径-->
<a href="index.html">首页</a>
<!--锚URL，指向当前页面中的锚-->
<a href="#a1">锚点</a>
<h1 id = a1></h1>
</body>
六、列表
① 无序列表
<ul></ul> 标签
<!--无序列表要用ul标签，type=disc实心圆点，默认值，circle空心圆，square实心方块，none无样式-->
<ul type="circle">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ul>
type属性：
- disc（实心圆点，默认值）
- circle（空心圆圈）
- square（实心方块）
- none（无样式）
② 有序列表
<ol></ol>标签
type属性：
- 1 数字列表，默认值
- A 大写字母
- a 小写字母
- Ⅰ大写罗马
- ⅰ小写罗马
<!--有序列表用ol标签表示，type=1数字列表（默认值），A 大写字母，a 小写字母，I 大写罗马字母， i 小写罗马字母-->
<!--start 表示从第三个字母开始-->
<ol type="A" start="3">
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
③ 标题列表
<!--用dl表示标题列表-->
<dl>
<dt>标题</dt>
<dd>内容1</dd>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容1</dd>
</dl>
七、表格
<!--表格格式设置，border表格边框，cellpadding内边距，cellspacing外边距-->
<table border="1" cellpadding="1" cellspacing="1">
<!--表头-->
<thead>
<tr>
<th>序号</th>
<th>水果</th>
<th>产地</th>
</tr>
</thead>
<!--表格-->
<tbody>
<tr>
<td>1</td>
<td>苹果</td>
<td>广西</td>
</tr>
<tr>
<td>2</td>
<td>香蕉</td>
<td>海南</td>
</tr>
</tbody>
</table>
属性:
- border: 表格边框.
- cellpadding: 内边距
- cellspacing: 外边距.
- 像素 百分比.（最好通过css来设置长宽）
- rowspan: 单元格竖跨多少行
- colspan: 单元格横跨多少列（即合并单元格）
八、form
功能：
表单用于向服务器传输数据，从而实现用户与Web服务器的交互
表单能够包含input系列标签，比如文本字段、复选框、单选框、提交按钮等等。
表单还可以包含textarea、select、fieldset和 label标签。
① label标签（与input配合使用）
定义：<label> 标签为 input 元素定义标注（标记）。
说明：
label 元素不会向用户呈现任何特殊效果。
<label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
方式一：
<!--label for的属性值指向input对应id-->
<label for="user">用户名：
<input id="user" type="text" name="username">
</label>
方式二：
<!--label与input配合，不需使用id-->
<label>密码：
<input type="password" name="pwd">
</label>
② input标签
<!--form表单，向网站已post的形式提交数据，multipart/form-data是post的一种提交方式-->
<form action="http://127.0.0.1:8080" method="post" enctype="multipart/form-data">
<!--text 单行输入文本-->
<div>
<label >用户名
<input type="text" name="username">
</label>
</div>
<!--password 密码输入框-->
<div>
<p>
<label >密码
<input type="password" name="pwd">
</label>
</p>
</div>
<!--date 日期输入框-->
<div>
<p>
<label >生日
<input type="date" name="birthday">
</label>
</p>
</div>
<!--radio 单选框-->
<div>
<p>
<label >性别
<!--显示的与input无关联，定义值，checked设置默认值-->
<input type="checkbox" name="sex" value="male" checked="checked">男
<input type="checkbox" name="sex" value="female">女
</label>
</p>
</div>
<!--checkbox 复选框 checked
设置默认值
--> <div> <p> <label >爱好 <input type="checkbox" name="hobby" value="basketball">篮球 <input type="checkbox" name="hobby" value="football">足球 <input type="checkbox" name="hobby" value="volleyball">排球 </label> </p> </div> <div> <!--button普通按钮一般用于JS；submit提交按钮，可以提交当前表单；reset 重置按钮--> <p> <input type="button" value="按钮"> </p> <p> <input type="submit" value="提交"> </p> <p> <input type="reset" value="重置"> </p> </div> </form>
| type属性值 | 表现形式 | 对应代码 |
|---|---|---|
| text | 单行输入文本 | <input type=text" /> |
| password | 密码输入框 | <input type="password" /> |
| date | 日期输入框 | <input type="date" /> |
| checkbox | 复选框 | <input type="checkbox" checked="checked" /> |
| radio | 单选框 | <input type="radio" /> |
| submit | 提交按钮 | <input type="submit" value="提交" /> |
| reset | 重置按钮 | <input type="reset" value="重置" /> |
| button | 普通按钮 | <input type="button" value="普通按钮" /> |
| hidden | 隐藏输入框 | <input type="hidden" /> |
| file | 文本选择框 | <input type="file" /> |
③ select标签
属性说明：
- multiple：布尔属性，设置后为多选，否则默认单选
- disabled：禁用
- selected：默认选中该项
- value：定义提交时的选项值
<form action="" method="post">
<!--单选下拉框-->
<select name="city" id="city">
<option value="beijing">北京</option>
<!--selected设置为默认值-->
<option value="shenzhen" selected="selected">深圳</option>
<option value="shanghai">上海</option>
<option value="guagnzhou">广州</option>
</select>
<!--复选下拉框-->
<select name="city2" id="city2" multiple>
<option value="beijing">北京</option>
<!--selected设置为默认值-->
<option value="shenzhen" selected="selected">深圳</option>
<option value="shanghai">上海</option>
<option value="guagnzhou">广州</option>
</select>
</form>
④ textarea多行文本
属性说明：
- name：名称
- rows：行数
- cols：列数
- disabled：禁用
<!--textarea 多行文本框-->
<label>自我介绍
<textarea name="self_introduction" id="self_introduction" cols="30" rows="10">
</textarea>
</label>