在前一篇文章中已经简单提到Html标签了，在本文中就不再赘述它的介绍了。想要再看看的可以戳Html+Css基础概要（01）——Html介绍。
这篇文章我希望小伙伴们可以在看了燕十八的教程或者看了慕课Html+Css基础教程前五章讲标签的部分过后再来看看，可以算是一个复习和总结。这两个教程在我之前的文章Web前端入门引导中有介绍。
下面是这篇文章想要探究的一些知识点：
- Html标签一览
- Html语义化标签
- Html标签属性介绍
- Html标签的分类
- Html标签之间的关系
01 Html标签一览
这个部分就介绍一些常用标签，可能会写的不太有逻辑，标签的分类和标签之间的关系会在文章后面的部分会讲。
这个部分可以作为一个对标签的复习和记忆。
- <!DOCTYPE>
严格来讲<!DOCTYPE>并不是Html标签，但是我们需要将它声明在html文档的第一行，以告诉浏览器我们是以哪个版本的HTML标准编写的代码。
HTML4有三种<!DOCTYPE>写法，而HTML5只有一种（我们现在只需要写这一种），即：
<code><!DOCTYPE html></code>
- <html>
<html>标签中包含了html文档的内容，除<!DOCTYPE>写在其之前外，其余Html标签都应该写在<html></html>之间。它最直接的是包含了<head>和<body>元素。
- <head>
<head>中包含了html文档的头部信息，这些信息基本上是用以告诉浏览器该如何处理我们的网页，并不会将内容呈现给用户。比如提供网页的信息、脚本和样式等。
- <body>
<body>标签是网页的主体，它包含网页中用户呈现给用户的实在的元素，如文字、图片、视频和超链接等。
- <title>
<title>标签写在网页的头部（即<head>标签中），它是必不可少的，它给出了网页的标题，浏览器会将其显示在页面标签上。
- <meta>
<meta>标签写在网页的头部，它给出了页面的元信息，举个例子：
<code><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></code>
这句代码给出了文件类型和编码信息，可以作为最基本的<meta>标签写在我们的html文档中，<meta>标签还可以提供更多的信息，大家可以自行去学习。
- <link>
<link>标签写在网页头部，用来引入外部样式表，即css文件。举个例子：
<code><link rel="stylesheet" type="text/css" href="startCss.css"></code>
- <script>
<script>标签不一定写在网页头部，但大多数写在网页头部，用来书写脚本代码或者引入外部脚本文件。
直接书写脚本代码：
<pre>
<script type="text/javascript">
alert("Hello HTML!");
</script>
</pre>
引入外部脚本：
<code><script src="start.js"></script></code>
- <div>
<div>是很常用的一个用以分区划块的标签，它常用于盒子模型，在网页中划分出一块块的功能区域。
- <h1>~<h6>
从<h1>到<h6>依次是从大到小的标题。
- <p>
<p>被用来包含一个文字段落。
- <span>
<span>标签区别于<p>标签的一点是，<span>标签是一个行内元素，故可以用它调整一段文字中部分文字的样式，而不会产生换行的问题。
- <em>和<strong>
它们可以说是具有特殊样式的<span>标签，均用来强调文字，<em>标签内的文字是斜体，<strong>标签内的文字是粗体。
- <pre>
<pre>标签可定义预格式化的文本，被包围在 pre 元素中的文本通常会保留空格和换行符。一般我们可以用它来包含大段代码，不过我倒是没怎么用过。
- <a>
<a>用以在网页中加入超链接。
- <img>
<img>用以在网页中插入图片。
- <video>
<video>是HTML5中的新标签，用以在网页中插入视频。较低版本的浏览器不支持这个标签，所以为了兼容低版本浏览器可能还是需要Flash。
- <table>
简单的HTML表格由table元素以及一个或多个tr、th或td元素组成。tr元素定义表格行，th元素定义表头，td元素定义表格单元。
- <ul>
<ul>定义了一个无序列表，其中包含的的li元素是无序列表的表项。
- <ol>
<ul>定义了一个有序列表，其中包含的的li元素是无序列表的表项。
那么Html标签一览就到这里...
Html常用的标签就这些了，这其中头部标签需要注意的点比较多，主体部分的标签的使用就得靠自己多用多摸索了。
其实还有挺多语义化的标签我没有讲，讲出来其实也不容易记住，不过我接下来就说一下关于语义化标签；也有一些可能很重要的但是我没有使用过的标签没有讲到。
Html语义化标签
首先说一下，我对语义化标签有个什么概念：语义化标签是指Html中的一些标签，具有与之包含内容对应的明确的语义，并且为所包含的内容提供一些特殊样式的标签。
那么有哪些常见的语义化标签呢？
前文提到的<em>、<strong>标签就是语义化标签，它们的基本属性其实与<span>一致，但是它们又在<span>的基础上增加了明确的强调语义和特别的样式。
除此之外，还有<h1>~<h6>、<q>、<address>等标签也是类似的语义化标签。
另外就是HTML5新增的一些语义化标签，如<header>、<footer>、<nav>和<article>等，它们其实是由一些大量出现在网页中并且被大量开发者冠以相同ID的div标签演化而来的。
它们和前面提到的语义化标签一样，也是被赋予了特定的语义和某方面的特殊样式。
那么使用语义化标签有什么作用呢？
其实我个人由于处在前端开发的初级阶段，平时很喜欢用一些非语义化的标签，比如p标签和div标签等等，觉得其实语义化的标签不过就是非语义化的标签再加上一些CSS样式而已，自己也可以实现。
我之所以想仔细讨论这个问题，也是由于自己在这方面的不了解和不常使用语义化标签。所以想借机了解一下，以后可以多尝试使用。
关于具体的作用，就是以下几点：
- 方便快速开发，比如使用header标签，就能获得一个通用的header栏属性样式，不用自己声明一个div然后配置；
- 增加代码可读性，利于团队开发，用语义化标签可以使别人更容易看懂你的代码；
- 利于SEO，也就是让搜索引擎更容易搜索到你的网站；
- 利于一些特殊设备（比如盲人阅读器）的渲染。
Html标签属性介绍
这一部分主要是想介绍一下标签属性的概念，以下是W3school的解释：
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
举两个例子，
<pre>
<a class="register" href="#">创建账户</a>
<link rel="stylesheet" type="text/css" href="startCss.css">
</pre>
这里面的a标签中的class和href是它的属性，link标签的rel、type、href是它的属性。
有些属性是全局属性，也就是所有标签都可以有的属性，比如id、class、title等；而不同的标签也有属于自身的独特的可选属性。
可以说，我们修改一个标签的属性值就是在配置这个标签，让它根据我们的要求完成它的功能。
需要注意的是...
因为Web前端中不光Html标签有属性，Css样式中的每一项样式也叫做属性，JavaScript中的对象也有属性，希望大家不要弄混淆了。
举个Css的例子：
<pre>
.p1
{
font-size: 40px;
margin-top: 40px;
text-align: center;
}
</pre>
这个例子中的font-size、margin-top、text-align都是Css属性，但是请分清，它们是Css属性，要和Html标签属性区分开。Css属性是不能直接作为Html属性写在标签中的。
有一个容易让人犯迷糊的例子：
<code><div style="color:red;font-size:16px;"></div></code>
刚才不是说了Css属性不能直接写在Html标签中吗，这里怎么又写进来？
这并不冲突：在这个例子中，style是div标签的属性，而<code>color:red;font-size:16px;</code>Css代码是作为style属性的值存在于这里的。
Html标签的分类
这里我们谈到两种分类方式：
第一种分类方式将标签分为行内（inline）元素、块状（block）元素和内联块状（inline-block）元素；
第二种分类方式将标签分为单双标签，也就是自闭合标签和闭合标签。
那么我们先说第一种分类方式的三种标签：
- 行内元素
行内元素也叫内联元素，它的特点是：
- 和其他元素处于同一行；
- 元素的高度、宽度、行高及顶部和底部边距不可设置；
- 元素的宽度就是它包含的文字或图片的宽度，不可改变。
常见的行内元素有<a>、<span>、<i>、<em>、<strong>、<q>等。
- 块状元素
块状元素的特点是：
- 每个元素从新的一行开始；
- 元素的高度、宽度、行高以及顶和底边距都可设置。
常见的行内元素有<div>、<p>、<table>、<ol>、<ul>、<li>等。
- 内联块状元素
内联块状元素可以说是前两者的结合体，它的特点是：
- 和其他元素处于同一行；
- 元素的高度、宽度、行高以及顶和底边距都可设置。
我们可以总结为对外行内，对内块状。
常见的行内元素有<img>、<input>。
其实行内元素和块状元素是可以相互转换的：
<pre>
display:block; /转换为块状/
display:inline; /转换为行内/
display:inline-block； /转换为内联-块状/
</pre>
不过我们常用的是将行内元素转换为块状元素，以便于控制它的位置和体积。
第二种分类方法将标签分为单双标签：
我在前一篇博文中说了标签的形式，标签通常是成对出现的，比如<div></div>。
这种成对出现的就叫做双标签或者闭合标签，另一种不成对出现的就叫做单标签或者自闭合标签。这两种标签只要记得形式，不要写错了就好。
因为自闭合标签比较少，这里就列举主要的自闭合标签，其他标签就都是闭合标签了：
<input> <area> <img> <link> <br> <hr>
Html标签之间的关系
有一些Html标签在文档中往往不会单独出现，它们总是和它们的小伙伴一同出现，就像一家人一样。
这里我就介绍几家子老是喜欢一同出现的标签：
- table和tr、td、th
- form和input
- ul \ ol和li
table和tr、td、th
举个W3school上的例子：
<pre>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
</pre>
table标签中必须要有tr和th\td才能有实际的表项，tr定义了行，th\td定义了列。
一般第一行的列定义用th标签作为标题。
form和input
在AJAX（一种前后端异步通信技术）出现之前，前后端只能同步通信，也就是说网页想要获取新的数据，必须要刷新网页。
而这个时期，input标签也是必须写在form标签之中，因为如果不这样做的话，用户输入的信息就无法传送给后端。
当AJAX技术出现之后，input不一定非得依赖form来进行数据的传送了，利用JS就可以获取到input中用户输入的信息并通过AJAX传送给后端。
所以如果使用AJAX，就没必要将input标签写在form标签中；如果使用老的方式，则需要将input标签写在form标签中。
ul \ ol和li
不论是使用无序列表ul标签还是使用有序列表ol标签，ul和ol标签只是声明了一个列表，标签内必须包含li标签才会有具体的列表项，li标签的个数就是列表项的个数。
最后
这篇文章只是把我认为有关Html标签中比较重要的部分或者刚开始学习的人容易弄混淆的知识点说了一下，也不算很系统。
这几天更新太慢是因为有一门期末考试，平时不努力，期末徒伤悲啊。
最近觉得，不管是做程序员还是做其他什么，过一个有意思的生活才是重要的呀。祝大家学习进步啦~
网友评论