# **HTML常用标签**
### **1.HTML文档标签**
```
<!DOCTYPE>: 定义文档类型.
<html>: 定义HTML文档.
<head>: 定义文档的头部.(头部内包含)
<meta>: 定义元素可提供有关页面的元信息，比如针对搜索引擎和更新频度的描述和关键词.
<base>:定义页面上的所有链接规定默认地址或默认目标.
<title>: 定义文档的标题.
<link>: 定义文档与外部资源的关系.
<style>:定义 HTML 文档样式信息.
<body>: 定义文档的主体.(脚本在非必须情况时在主体内容最后)
<script>: 定义客户端脚本，比如 JavaScript.
```
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--<meta name="keywords" content="电商,物流">
<meta name="author" content="张三">
<meta name="description" content="网站描述..."> -->
<!-- <base href="images/"> -->
<title>hello world</title>
<link rel="stylesheet" href="css/base.css">
<!-- <style type="text/css">
.bg{
background-color: red;
width: 100px;
height: 100px;
}
</style> -->
</head>
<body>
<!-- <img src="666666.png" alt=""> -->
<div class="bg"></div>
</body>
</html>
```
### **2.常见的HTML5语义化标签**
```
<div>:定义块级元素.
<span>:定义行內元素.
<header>定义区段或页面的页眉.(头部)
<footer>:定义区段或页面的页脚.(足部)
<section>:定义文档中的区段.
<article>:定义文章.
<aside>:定义页面内容之外的内容.
<nav>:定义导航.
```
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>hello world</title>
<style type="text/css">
body{
background-color: #000000;
margin: 0px;
font-size: 38px;
font-weight: bold;
}
.header,.nav,.footer,.aside,.section1{
background-color: #666666;
text-align: center;
margin: 2%;
border-radius: 10px;
}
.header,.footer{
height: 100px;
line-height: 100px;
}
.nav,.section1,.aside{
float: left;
}
.nav,.aside{
width: 20%;
height: 280px;
line-height: 280px;
}
.section1{
width: 48%;
height: 280px;
}
.header1,.article1,.footer1{
height: 80px;
margin: 10px;
background-color: #cccccc;
line-height: 80px;
border-radius: 10px;
}
.clear{ clear:both}
</style>
</head>
<body>
<header class="header">header</header>
<section class="section">
<nav class="nav">nav</nav>
<section class="section1">
<header class="header1">header1</header>
<article class="article1">article1</article>
<footer class="footer1">footer1</footer>
</section>
<aside class="aside">aside</aside>
<div class="clear"></div>
</section>
<footer class="footer">footer</footer>
</body>
</html>
```
### **3.表格标签**
```
<table>:定义表格
<thead>:定义页眉
<tbody>:定义主体
<tfoot>:定义页脚
<caption>:定义标题
<th>:定义表头
<tr>:定义一行
<td>:定义单元格
table合并单元格 colspan（跨列）和rowspan（跨行）
```
## 可选的属性
| 属性 | 值 | 描述 |
| --- | --- | --- |
| [align](https://www.w3school.com.cn/tags/att_table_align.asp "HTML 标签的 align 属性") | * left* center* right| 不赞成使用。请使用样式代替。规定表格相对周围元素的对齐方式。|
| [bgcolor](https://www.w3school.com.cn/tags/att_table_bgcolor.asp "HTML 标签的 bgcolor 属性") | * *rgb(x,x,x)** *#xxxxxx** *colorname* | 不赞成使用。请使用样式代替。规定表格的背景颜色。|
| [border](https://www.w3school.com.cn/tags/att_table_border.asp "HTML 标签的 border 属性") | *pixels* | 规定表格边框的宽度。 |
| [cellpadding](https://www.w3school.com.cn/tags/att_table_cellpadding.asp "HTML 标签的 cellpadding 属性") | * *pixels** *%* | 规定单元边沿与其内容之间的空白。 |
| [cellspacing](https://www.w3school.com.cn/tags/att_table_cellspacing.asp "HTML 标签的 cellspacing 属性") | * *pixels** *%* | 规定单元格之间的空白。 |
| [frame](https://www.w3school.com.cn/tags/att_table_frame.asp "HTML 标签的 frame 属性") | * void* above* below* hsides* lhs* rhs* vsides* box* border | 规定外侧边框的哪个部分是可见的。 |
| [rules](https://www.w3school.com.cn/tags/att_table_rules.asp "HTML 标签的 rules 属性") | * none* groups* rows* cols* all | 规定内侧边框的哪个部分是可见的。 |
| [summary](https://www.w3school.com.cn/tags/att_table_summary.asp "HTML 标签的 summary 属性") | *text* | 规定表格的摘要。 |
| [width](https://www.w3school.com.cn/tags/att_table_width.asp "HTML 标签的 width 属性") | * *%** *pixels* | 规定表格的宽度。 |
### **4.表单标签**
```
<form>:定义表单.(表单包含在form标签中)
<input>:定义输入域
<textarea>:定义文本域.(多行)
<label>:定义一个控制的标签.(input 元素的标注)
<fieldset>:定义域
<legend>:定义域的标题
<select>:定义一个选择列表
<optgroup>:定义选择组
<option>:定义下拉 列表的选项
<button>:定义按钮.(定义围绕表单中元素的边框.)
<fieldset>:定义围绕表单中元素的边框.
<legend>:定义 fieldset 元素的标题.
<fieldset>:定义选项列表.与input 元素配合使用该元素，来定义 input 可能的值
<keygen>:定义表单的密钥对生成器字段
<output>:定义不同类型的输出，比如脚本的输出
```
### **5.列表标签**
```
<ul>:定义无序列表
<ol>:定义有序列表
<li>:定义列表项
<dl>:定义自定义列表
<dt>:定义自定义列表项
<dd>:定义自定义的描述
```
### **6.图像&链接标签**
```
<img>:定义图像.注意加上alt属性
<a>:定义超链接
<map>:定义图像映射
<area>:定义图像地图内部的区域
<figure>:定义媒介内容的分组
<figcaption>:定义 <figure> 元素的标题
```
### **7.音频/视频**
```
<audio>:定义声音内容
<source>:定义媒介源
<track>:定义用在媒体播放器中的文本轨道
<video>:定义视频
```
### **8.框架标签**
```
<iframe>:内联框架
```
### **9.格式标签**
#### **文章标签**
```
<h1>-<h6>:定义 HTML 标题
<p>:定义段落
<br>:定义换行
<hr>:定义水平线
<bdo>:定义文字方向
<pre>:定义预格式文本
<abbr>:定义缩写
<address>:定义文档作者或拥有者的联系信息
<ins>:定义被插入文本
<del>:定义被删除文本
<time>:定义日期/时间
```
#### **短语元素标签**
```
<em>:定义强调文本
<strong>:定义语气更为强烈的强调文本
<dfn>:定义定义项目
<code>:定义计算机代码文本
<samp>:定义计算机代码样本
<kbd>:定义键盘文本
<var>:定义文本的变量部分
<sup>:定义上标文本
<sub>:定义下标文本
<cite>:定义引用
<blockguote>:定义长的引用
<q>:定义短的引用
```
#### **字体样式标签**
```
<i>:显示斜体文本效果
<b>:呈现粗体文本效果
<big>:呈现大号字体效果
<small>:呈现小号字体效果
<mark>:定义有记号的文本
```
### **10.其它**
```
<canvas>:定义图形容器，必须使用脚本来绘制图形
<meter>:定义预定义范围内的度量
<progress>:定义任何类型的任务的进度
```
