目录

• 标题标签< h1>~< h6>
• 段落标签< p>< /p>
• 换行标签< br>
• 文本格式化标签
• div span标签
• 图像标签< img/>
• 链接标签< a>< /a>
• 特殊字符(带分号，分号前无空格）
• 表格标签
• • • • 表头单元格标签< th>< /th>
      • 表格属性
      • < thead>< /thead>和< tbody>< /tbody>
      • 合并单元格
• 列表标签
• • • • 有序列表< ol>< /ol>
      • 无序列表< ul>< /ul>
      • 自定义列表< dl>< /dl>
• 表单
• • • • 表单域< form>< /form>
      • 表单元素 < input/>标签
      • label标签
      • 下拉列表 select标签
      • textarea标签

标题标签< h1>~< h6>

一个标题独占一行
作为标题使用，重要性逐级递减

<h1>一级标题</h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

段落标签< p>< /p>

定义段落，段落与段落间有间隙，根据浏览器窗口大小自动换行

<p>段落一</p>
<p>段落二</p>

换行标签< br>

强制换行，只是简单的换行，与上一行间隙没有段落间的大，是单标签

<div>简单换行<br>间隙不大</div>

文本格式化标签

推荐使用前者

div span标签

div一个占一行，用来布局
span一行可放多个，用来布局

<div></div>
<span></span>

图像标签< img/>

<img src="img.jpg" />
<img src="img.jpg" alt="这是替换的文本" />
<img src="img.jpg" title="这是提示文字" />
<img src="img.jpg" width="50px" />//高度自适应
<img src="img.jpg" height="50px" />//宽度自适应
<img src="img.jpg" width="50px" height="50px" />

链接标签< a>< /a>

<a href="跳转目标页面" target="目标窗口打开方式">文本或图像</a>

<a href="https://www.baidu.com">百度</a>//外部链接
<a href="index.html">主页</a>//内部链接，网站内部页面之间的跳转
<a href="#">首页</a>//空链接
<a href="img.zip">下载</a>//下载链接，链接地址为文件或压缩包形式
<a href="https://www.baidu.com"><img src="img.jpg" /></a>//网页元素链接，网页的各种元素都可以添加超链接，比如图像、文本、表格、音频、视频等
<a href="#某标签的ID名字">跳转</a>//锚点链接，跳转到当前页面的某个位置
<a href="#two"></a>
<div id="two"></div>

特殊字符(带分号，分号前无空格）

表格标签

表格用来显示数据

<table>
	<tr><td>第一列1</td><td>第二列1</td><td>第三列1</td></tr>//第一行
	<tr><td>第一列2</td><td>第二列2</td><td>第三列2</td></tr>//第二行
</table>

表头单元格标签< th>< /th>

位于表格第一行或第一列，文本加粗居中显示

<table>
	<tr><th>第一列1</th><th>第二列1</th><th>第三列1</th></tr>//第一行
	<tr><td>第一列2</td><td>第二列2</td><td>第三列2</td></tr>//第二行
</table>

表格属性

< thead>< /thead>和< tbody>< /tbody>

<table>
	<thead>
		<tr><th>第一列1</th><th>第二列1</th><th>第三列1</th></tr>//第一行表头
	</thead>
	<tbody>
		<tr><td>第一列2</td><td>第二列2</td><td>第三列2</td></tr>//第二行开始表格体
		<tr><td>第一列3</td><td>第二列3</td><td>第三列3</td></tr>
		<tr><td>第一列4</td><td>第二列4</td><td>第三列4</td></tr>
	</tbody>
</table>

合并单元格

跨行合并：rowspan=“合并单元格个数”，最上的单元格作为目标单元格
跨列合并：colspan=“合并单元格个数”，最左的单元格作为目标单元格
合并后多余的单元格要删掉

<table>
	<thead>
		<tr><th>第一列1</th><th>第二列1</th><th>第三列1</th></tr>//第一行表头
	</thead>
	<tbody>
		<tr><td>第一列2</td><td colspan="2">第二列2</td></tr>//第二行开始表格体
		<tr><td rowspan="2">第一列3</td><td>第二列3</td><td>第三列3</td></tr>
		<tr><td>第二列4</td><td>第三列4</td></tr>
	</tbody>
</table>

列表标签

列表用来布局，只能嵌套< li>< /li>，不能直接输入其他标签或文字

有序列表< ol>< /ol>

列表排序以数字显示

<ol>
	<li></li>
	<li></li>
	<li></li>
</ol>

无序列表< ul>< /ul>

以项目符号呈现列表项< li>，各个列表项< li>没有顺序级别，是并列的

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

自定义列表< dl>< /dl>

只能嵌套< dt>和< dd>，不能直接输入其他标签或文字
通常一个< dt>对应多个< dd>

<dl>
	<dt>项目名</dt>
	<dd>子项目1</dd>
	<dd>子项目2</dd>
	<dd>子项目3</dd>
</dl>

表单

由表单域、表单控件、提示信息组成

表单域< form>< /form>

<form action="url地址" method="提交方式" name="表单域名称">
</form>

表单元素 < input/>标签

<input type="属性值"/>//单标签，type用来指定不同控件类型

name和value是每个表单元素都有的属性值，主要给后台人员使用
实现单选和多选的前提是 单选按钮和复选框的name是相同的

label标签

<label for="sex">男</label>//for绑定一个表单元素，鼠标移动到标签上时也能选中单选按钮
<input type="radio" name="sex" id="sex"/>

下拉列表 select标签

至少有一对< option>< /option>

<select>
	<option selected="selected">选项1</option>
	<option>选项2</option>
	<option>选项3</option>
</select>

textarea标签

多行文本输入框

<textarea rows="3" cols="20">文本内容</textarea>