HTML 标签的学习虽不难，但是却需要多实践，自己亲手敲敲代码，看看出来的效果是什么样子的
这篇文章将会介绍一些常用的 HTML 标签
1、标题与段落
标签 <h1> ~ <h6> 分别用于定义一至六级标题，标签 <p> 用于定义段落
它们都是 块级元素，因此浏览器会自动地在标题和段落的前后添加空行
<!DOCTYPE html>
<html>
<body>
<h1>一级标题</h1>
<p>在一级标题下显示的段落</p>
<h2>二级标题</h2>
<p>在二级标题下显示的段落</p>
<h3>三级标题</h3>
<p>在三级标题下显示的段落</p>
<h4>四级标题</h4>
<p>在四级标题下显示的段落</p>
<h5>五级标题</h5>
<p>在五级标题下显示的段落</p>
<h6>六级标题</h6>
<p>在六级标题下显示的段落</p>
</body>
</html>
2、格式化文本
对于文本内容的展示，HTML 也有定义多种标签以达到不同的展示效果，具体请看下面的例子
<!DOCTYPE html>
<html>
<body>
<b>粗体</b>
<br />
<i>斜体</i>
<br />
<ins>下划线</ins>
<br />
<del>删除线</del>
<br />
<big>增大字号</big>
<br />
<small>减小字号</small>
<br />
这是<sup>上标</sup>
<br />
这是<sub>下标</sub>
<br />
</body>
</html>
3、链接
<a> 标签用于定义链接，链接的内容可以是文本，也可以是图像，其常用的属性如下：
-
href：定义链接地址，其值可以是任何有效文档的相对或绝对 URL
-
name：定义锚的名称，用于创建文档内的书签，跳转到文档内指定位置
-
target：规定在哪打开目标文档，使用 href 属性之后才能使用，可选值如下：
- _self：默认值，在相同窗口或相同框架中载入目标文档
- _parent：在父窗口或父框架中载入目标文档
- _blank：在新窗口中载入目标文档
- _top：在包含该链接的整个窗口中载入目标文档
<!DOCTYPE html>
<html>
<body>
<a href="https://www.google.com/" target="blank">谷歌</a>
<br />
<a href="https://www.yahoo.com/" target="blank">雅虎</a>
<br />
<a href="https://www.baidu.com/" target="blank">百度</a>
<br />
</body>
</html>
4、图像
<img> 标签用于定义图像，更准确的说法应该是链接图像，实际上其定义的是被引用图像的占位空间
常用的属性如下：
-
src：指定图像文件的存放位置，其值可以是任何有效的相对或绝对 URL
-
alt：当图片无法显示时，将显示 <alt> 中定义的替代文本，使用 alt 属性是一个良好的习惯
-
height：设置图像的高度
-
width：设置图像的宽度
<!DOCTYPE html>
<html>
<body>
<h3>第一张图片</h3>
<img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/road-1072823_960_720.jpg" alt="无法显示图片" />
<h3>第二张图片</h3>
<img src="https://www.example.com/" alt="无法显示图片" />
</body>
</html>
5、表格
<table> 标签定义表格，<th> 标签定义表头，<tr> 标签定义行，<td> 定义表格单元，表格单元可以包含各种元素
常用的属性如下：
-
border：定义表格边框宽度，单位为 pixels，如果没有显式定义，则默认不显示边框
-
cellpadding：规定单元格边沿与其内容之间的空白，单位为 pixels
-
cellspacing：规定单元格之间的空白，单位为 pixels
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</body>
</html>
假如需要处理 跨行或跨列的单元格 该怎么办呢？
我们可以使用 colspan 属性定义跨越的列数，使用 rowspan 属性定义跨越的行数
<!DOCTYPE html>
<html>
<body>
<table border="1" cellpadding="20">
<tr>
<td colspan=2>这是跨列单元格</td>
</tr>
<tr>
<td rowspan=2>这是跨行单元格</td>
<td>Hello</td>
</tr>
<tr>
<td>World</td>
</tr>
</table>
</body>
</html>
6、列表
在 HTML 中列表可以分为三种，分别是无序列表、有序列表和自定义列表
无序列表 使用 <ul> 标签标记，其中每一个列表项用 <li> 标签标记
在 <ul> 标签中有一个 type 属性，用于指定项目符符号，其可选值如下：
- disc：默认值，黑色实心圆
- circle：空心圆
- square：黑色实心方块
<!DOCTYPE html>
<html>
<body>
<h3>Fruit</h3>
<ul type="circle">
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
</body>
</html>
有序列表 使用 <ol> 标签标记，其中每一个列表项用 <li> 标签标记
在 <ol> 标签中有一个 type 属性，用于指定项目符符号，其可选值如下：
- 1：默认值，按数字排序（1、2、3、4 ...）
- a：按小写字母排序（a、b、c、d ...）
- A：按大写字母排序（A、B、C、D ...）
- i：按小写罗马数字排序（i、ii、iii、iv ...）
- I：按大写罗马数字排序（I、II、III、IV ...）
<!DOCTYPE html>
<html>
<body>
<h3>Drink</h3>
<ol type="a">
<li>Coffee</li>
<li>Milk</li>
<li>Tea</li>
</ol>
</body>
</html>
自定义列表 是项目及其注释的组合
以 <dl> 标签开始，每个自定义列表项以 <dt> 开始， 每个自定义列表项的定义以 <dd> 开始
7、表单
可以使用 <form> 标签定义表单，用于接受不同类型的用户输入，常用的属性如下：
- name：表单名称
- action：规定在提交表单时执行的动作
- method：规定在提交表单时使用的方法，默认为
GET - target：规定在提交表单时的地址目标，默认为
_self
在 <form> 标签下，存在几个表单元素，其中最重要的莫过于 <input> 标签，其常用的属性如下：
- name：<input> 元素的名称
- type：定义不同的输入类型，常用的值如下：
- text：单行文本输入字段
- password：密码输入字段
- radio：单选按钮
- checkbox：复选按钮
- submit：提交按钮
- button：按钮
- value：输入字段的值 / 默认值
- placeholder：输入字段的提示信息
- checked：输入字段默认选定，一般用于单选或复选按钮
- disabled：输入字段无法使用
- readonly：输入字段无法修改
- required：输入字段必需填写
- pattern：规定输入字段满足的正则表达式
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function sayHello(){
alert('hello')
}
</script>
</head>
<body>
<form>
First name:<br/>
<input name="firstname" type="text" required /><br/>
Last name:<br/>
<input name="lastname" type="text" required /><br/>
<br/><input type="submit" value="Submit" onclick="sayHello()"/>
</form>
</body>
</html>
8、音频
为了确保音频文件在所有浏览器中和所有硬件上都能够播放，我们可以使用以下这些标签：
- <object>
<object> 定义内嵌对象，是 HTML 4.01 多媒体标签
<object height="300" width="500" data="song.mp3"></object>
- <embed>
<embed> 定义嵌入内容，是 HTML 5 多媒体标签
<embed height="300" width="500" src="song.mp3" />
- <audio>
<audio> 定义声音，是 HTML 5 多媒体标签，其属性及值列举如下：
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 就绪后马上播放 |
| controls | controls | 显示播放控件 |
| loop | loop | 循环播放 |
| muted | muted | 静音播放 |
| preload | preload | 就绪后等待播放，若设置 autoplay，则忽略 preload |
| src | url | 指定播放音频的资源地址 |
<audio controls="controls">
<!-- mp3 格式在 Internet Explorer、Chrome、Safari 中有效 -->
<source src="song.mp3" type="audio/mp3" />
<!-- ogg 格式在 Firefox、Opera 中有效 -->
<source src="song.ogg" type="audio/ogg" />
<!-- 如果失败，显示错误信息 -->
Your browser does not support the audio tag.
</audio>
- 最佳解决方案
先尝试使用 <audio> 以 mp3 或 ogg 格式播放音频，如果失败，再尝试使用 <embed> 播放
<audio controls="controls">
<source src="song.mp3" type="audio/mp3" />
<source src="song.ogg" type="audio/ogg" />
<embed height="300" width="500" src="song.mp3" />
</audio>
9、视频
为了确保视频文件在所有浏览器中和所有硬件上都能够播放，我们可以使用以下这些标签：
- <object>
<object> 定义内嵌对象，是 HTML 4.01 多媒体标签
<object data="movie.swf" width="320" height="240"/>
- <embed>
<embed> 定义嵌入内容，是 HTML 5 多媒体标签
<embed src="movie.swf" width="320" height="240"/>
- <video>
<audio> 定义视频，是 HTML 5 多媒体标签，其属性及值列举如下：
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 就绪后马上播放 |
| controls | controls | 显示播放控件 |
| loop | loop | 循环播放 |
| muted | muted | 静音播放 |
| preload | preload | 就绪后等待播放，若设置 autoplay，则忽略 preload |
| src | url | 指定播放视频的资源地址 |
| poster | url | 指定点击播放按钮前或进行视频下载时显示的图像 |
| width | pixels | 设置视频播放器的宽度 |
| height | pixels | 设置视频播放器的高度 |
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
Your browser does not support the video tag.
</video>
- 最佳解决方案
先尝试使用 <video> 以 mp4、ogg 或 webm 格式播放视频，如果失败，再尝试使用 <object> 和 <embed> 播放
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240" />
</object>
</video>
10、头部
<head> 元素是所有头部元素的容器，它们不会在浏览器中显示，只是包含页面的一些元数据
以下的标签都可以添加到 <head> 中，并且不同的标签具有不同的作用
- <title>
<title> 标签用于定义文档标题
<head>
<title>Title of the document</title>
</head>
使用 <title> 定义的文档标题，将会显示在浏览器选项卡中，并且当我们添加书签时，将会作为建议的书签名
- <meta>
<meta> 标签提供关于 HTML 文档的元数据，元数据不会显示在页面上，但是对于机器来说却是可读的
可以使用 <meta> 标签指定字符编码（虽然一些浏览器会自动修正编码错误，但最好是在代码中手动设置）
<head>
<meta charset="utf-8">
</head>
也可以使用 <meta> 标签为文档添加作者和描述
一些 <meta> 标签包含 name 和 content 属性，name 属性指定标签的类型，content 属性指定实际的内容
<head>
<meta name="author" content="whfang">
<meta name="description" content="This is the description">
</head>
另外，某些公司还会自己编写元数据协议，以提供更丰富的内容
- <link>
<link> 标签定义文档与外部资源之间的关系，常常用于连接样式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
也可用于链接图片，为网站添加一个图标
<head>
<link rel="shortcut icon" type="image/x-icon" href="myicon.ico">
</head>
- <style>
<style> 标签定义文档样式
<head>
<style type="text/css">
<!-- 这里定义样式 -->
</style>
</head>
- <script>
<script> 标签定义脚本资源
<head>
<script type="text/javascript" src="myscript.js"></script>
</head>
- <base>
<base> 标签用于定义页面上所有链接的默认属性
<head>
<base href="......" />
<base target="_blank" />
</head>
【 阅读更多 HTML 系列文章，请看 HTML学习笔记 】