学习HTML的过程之中，接触到了很多的标签。有些虽然能即查即用，但是总是多出了去理解标签的时间。前期用到再学的方法，可以接触和学会很多标签，但是后期的学习和工作中，有些陌生而熟悉，知识点有些散乱，总感觉效率还是不够高，所以在此整理一下HTML中经常用到的标签。
HTML基础结构
<!DOCTYPE html> //文档类型声明，告知浏览器使用html文档类型
<html lang="zh-Hans"> //声明一个HTML文档，同时规定内容的语言为"简体汉字"
<head> //关于文档的信息
<meta charset="utf-8"> //申明文档的编码格式为“utf-8”
<title>文档的标题</title> //文档的标题为“文档的标题”
</head>
<body>文档的内容</body> //文档的主体内容
</html>
上面是HTML文档的很基础的一个结构。新建一个网页，基本都是从这样的一个基本结构中慢慢搭建起来。我们来看看，在这最最基础的机构中，有多少标签。
外层结构
仔细的分析一下这个基础结构，可以大概拆分为两个大块，<!DOCTYPE html>和<html>标签，这两个标签为文档的外层结构。
<!DOCTYPE html>
声明文档的类型，每一个基于HTML5的网页，第一行都是写着文档类型的声明，告知浏览器，要处理的是html的内容。
<html lang="zh-Hans"></html>
lang="zh-Hans"是<html>标签的属性声明，属性声明以 属性=“属性值” 的格式给便签添加额外的功能或说明，例如lang=“zh-Hans”，就是属性lang给<html>规定了内容语言为“简体中文”。属性可以多个使用，用空格隔开。
<html>标签中包含着接下来要写的所有内容，在这其中，又可以大概分为两大块，<head>和<body>标签。
<head>元数据
<head>标签的内容，可以用来向浏览器提供文档的一些信息。例如，
- <title>标签，填写文档的标题。打开浏览器头部导航标签的标题，就在<title>中定义。
- <meta>标签，那些不能由其它HTML元相关元素表示的任何元数据信息。例如，声明文档的编码类型元信息，就由---<meta>的charst="utf-8"声明。
- <link>标签，在搭建网站的过程中，需要提前声明一些外链css样式文档，这由<link href="css文档地址">标签完成。
- <script>标签，实现网页的特效，各种文档操作，需要引入javascript脚本文档，就由<script src="js文档地址”>标签完成。不过有的时候，为了让页面更加快速加载，也把脚本放在文档最低部。
-<style>标签，文档的样式标签，文档中的css样式可以直接写在<style>标签中。
<body>内容
<body>当中的内容，就是我们平时所看到的的网页内容了。<body>当中可以添加各种各样的标签进行添加内容，可以添加文字、图片、音频、视频等等。这就需要学习更多的标签来进行表达了。
下面介绍一些最常用到的标签。
常用标签
| 标签名 | 标签功能 | 标签名 | 标签功能 |
|---|---|---|---|
| <a> | 超链接 | <div> | 通用容器（块级元素） |
| <style> | 文档样式 | <span> | 通用容器（内联元素） |
| <header> | 头部区域 | <footer> | 底部区域 |
| <section> | 中间分块区域 | <aside> | 单独的文章内容块 |
| <aside> | 其他页面内容之外的另外部分 | <nav> | 导航 |
| <img> | 图片 | <video> | 视频 |
| <ul> | 无序列表 | <ol> | 有序列表 |
| <dl> | 定义列表 | <dt> | 定义列表标题 |
| <dd> | 定义列表内容 | <b> | 标签功能 |
| < !-- --> | 添加注释 | <h1>~<h6> | 标题，h1~h6由大到小。 |
| <p> | 段落 | < br > | 换行 |
| <b> | 加粗文字 | < hr > | 水平线 |
| <strong> | 文中强调（加粗字体） | <del> | 添加删除线 |
| <i> | 斜体 | <ins> | 添加下划线 |
| <em> | 文中强调（斜体） | <small> | 小号字体 |
表格标签
| 标签名 | 标签功能 | 标签名 | 标签功能 |
|---|---|---|---|
| < table > | 表格 | <tr> | 表格行 |
| < thead> | 表格标题行 | <td> | 表格单元格 |
| < tbody> | 表格主体内容 | <tfoot> | 表格表脚 |
表单标签
| 标签名 | 标签功能 | 标签名 | 标签功能 |
|---|---|---|---|
| < frorm> | 表单元素 | <input type="text"> | 输入框 |
| <label> | 关联input的标注 | <input type="password"> | 输入密码 |
| <input type="seach"> | 搜索框 | <input type="button"> | 普通按钮 |
| <input type="submit"> | 提交按钮 | <input type="reset"> | 复位 |
| <input type="radio"> | 单选按钮 | <input type="checkbox"> | 复选框 |
| <input type="range"> | 进度条 | <select> | 下拉列表 |
| <option> | 下拉列表项 | <textarea> | 多行文本框 |
HTML还在不断地发展的当当中，标签的写法不断地迭代，直到跟新到一个最合适的写法。这里只简单的罗列介绍一些经常见到的标签，能够先熟记标签的单词或者用法，没有深入的了解各个标签的属性和功能。更多HMTL标签的深入学习，将在后面的学习工作中，慢慢总结。
网友评论