【前端】HTML标签
前言
本文主要在初学HTML时，对常用标签做一些记录。主要是标签的使用，以及效果展示。目的在于有个大概的认识：有什么标签？能做什么？
当然，这方面有runoob、w3school等非常出色的网站，如果想看更加全面的信息，可以直接去这些网站。（我也是在那学习的）
介绍
HTML标签也叫HTML元素，是HTML语言中的基本单位，一个HTML页面（网页）由多个 HTML标签构成。
也就是说，我们可以用HTML来编写一个网页。
一个例子
在开始介绍标签之前，先看一个栗子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>这是我的第一个页面</p>
<span>Gavin是真的帅</span>
<span>Gavin是真的帅</span>
</body>
</html>这是只有两个元素的页面，运行后是这样的： （看<body>中的内容，会发现跟Android中的布局有点像。）
来看看上面内容，其中包涵了<!DOCTYPE html>、<html>、<head>、<body>等标签。下面看看他们都有什么作用
标签
以下是一些常见的标签
<!DOCTYPE>
用于声明
声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。如：
HTML 5 ：
<!DOCTYPE html>
HTML 4.01 Strict ：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
告知浏览器其自身是一个 HTML 文档。
是 HTML 文档中最外层的元素，是所有其他 HTML 元素（除了 <!DOCTYPE>）的容器。
<html> 与 </html> 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。
属性
-
manifest：规定文档的缓存 manifest 的位置
<head>
元素包含了所有的头部标签元素。
在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
<head>标签中可以包含<base>, <link>, <meta>, <script>, <style>, 以及<title>
<title>
定义文档的标题，它是 head 部分中唯一必需的元素。 就是在网页tab上面看到的标题，也是收藏夹中的标题、搜索引擎结果页面的标题。
<base>
为页面上的所有链接规定默认地址或默认目标。
浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL 来解析所有的相对 URL。这其中包括<a>、<img>、<link>、<form>标签中的 URL。(绝对路径的不受影响，本地路径却受到波及？)
<link>
标签定义了文档与外部资源之间的关系。 标签通常用于链接到样式表:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>属性
-
href：被链接文档的位置 -
hreflang：被链接文档中文本的语言 -
media：被链接文档将被显示在什么设备上 -
rel：当前文档与被链接文档之间的关系（alternate、author、help、icon、licence、next、pingback、prefetch、prev、search、sidebar、stylesheet、tag） -
type：规定被链接文档的 MIME 类型 H5 -
sizes：被链接资源的尺寸。仅适用于rel="icon"
<style>
标签定义了HTML文档的样式文件引用地址，也可以直接添加样式来渲染 HTML 文档。
例：当前的body中的<p>颜色改为#BBBBBB
<head>
<style type="text/css">
p {
color: #BBBBBB;
}
</style>
</head><meta>
提供有关页面的元信息，提供了元数据.元数据也不显示在页面上，但会被浏览器解析。
META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
<body>
元素定义了 HTML 文档的主体，包含文档的所有内容。
以下列举的标签都写在<body></body>中
以上是一个HTML页面所包含的标准结构，这些标签在页面中是看不见的（除了title），接下来看看那些页面中可以看到的标签
在介绍前先了解下内联元素、块级元素。上面例子中有两个标签上面没有提到，就是<p>和<span>。<p>就是个典型块级元素，而<span>是个典型的内联元素。
内联元素、块级元素
回到上面的例子，细心的同学可能会奇怪，为什么代码写了三行文字，页面上却只有两行？而且后面的两行是连在一起的？这就要说到块级元素和内联元素了。
<p>这是我的第一个页面</p>
<span>Gavin是真的帅</span>
<span>Gavin是真的帅</span>
块级元素
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度、高度、内边距和外边距都可控制。
<p>就是个块元素。常用的块级元素：<h1>、<p>、<ul>、<table>、<div>。
内联元素
和相邻的内联元素在同一行;
宽度、高度、内边距的top/bottom和外边距的top/bottom都不可改变。
上面用到的<span>就是个内联元素，所以，两个<span>中的内容出现在同一行上。常用的内联元素：<span>、<b>、<td>、<a>、<img>。
除了上面提到的，还有一些常用的其他标签
标题 <h1> - <h6>
h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。 例：
<h1>标题 1</h1>
<h2>标题 2</h2>
<h3>标题 3</h3>
<h4>标题 4</h4>
<h5>标题 5</h5>
<h6>标题 6</h6>效果：
1、搜索引擎使用标题为网页的结构和内容编制索引。 2、用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
段落 <p>
<p>表示一个段落，是个块级元素
例：
<p>段落1</p>
<p>段落2</p>效果：
tips：浏览器会自动地在段落的前后添加空行
水平线 < hr/>
在 HTML 页面中创建水平线。 效果：
换行 < br/>
一个简单的换行符，是空标签（意味着它没有结束标签，因此这是错误的：< br></br>）
例： 可以测穿插在标签中
<p>段落2-1< br/>段落2-2</p>效果：
注：所有连续的空行（换行）也被显示为一个空格。
超链接 <a>
有两个作用 1、超文本链接：跳转到指定目标 2、锚点：跳转到指定位置
属性
-
href：规定链接的目标 -
target：标签的 target 属性规定在何处打开链接文档，规定已下：-
_blank：浏览器总在一个新打开、未命名的窗口中载入目标文档 -
_self：当前相同的框架或者窗口打开（默认） -
_parent：使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效 -
_top：文档载入包含这个超链接的窗口
-
作为链接
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像
例：
<a href="https://www.jianshu.com/u/769d3d3a9d4b">链接</a>效果： 链接
作为锚点
跳转到指定位置
例：在<h1>中定义id（title1），<a>的href属性指向title1。点击<a>标签后将跳转到<h1>的位置（或到指定页面对应id的标签位置）。
<h1 id="title1">标题 1</h1>
<a href="#title1">跳转标题1</a><br/>图像 <img>
展示一张图片，可以是本地或网络图片。 属性
-
src：显示图像的 URL -
alt：图像的替代文本。
例：
<img src="image/image1.png">
<!--图片大小限制-->
<img src="image/image1.png" height="300" width="300">
<!--网络图片-->
<img src="http://g.hiphotos.baidu.com/image/pic/item/0dd7912397dda1443b5c9090bfb7d0a20cf486bf.jpg"
height="300"
width="500">
附：图片image1.png路径和index.html层级关系
表格<table>
用于绘制表格，需要用到一下内部标签：
<tr>：表格分割若干行数
<td>：每行被分割为若干单元格
<th>：表格头
属性
-
border：表格边框的宽度（pixels） -
cellpadding：单元边沿与其内容之间的空白（pixels、%） -
cellspacing：规定单元格之间的空白（pixels、%） -
frame：外侧边框的哪个部分是可见的（void、above、below、hsides、lhs、rhs、vsides、box、border） -
rules：内侧边框的哪个部分是可见的（none、groups、rows、cols、all） -
summary：规定表格的摘要
例：
<table border="1" cellpadding="5" cellspacing="10" frame="above" rules="all" summary="summary">
<tr>
<th>top1</th>
<th>top2</th>
<th>top3</th>
</tr>
<tr>
<td>行1列1</td>
<td>行1列2</td>
<td>行1列3</td>
</tr>
<tr>
<td>行2列1</td>
<td>行2列2</td>
<td>行2列3</td>
</tr>
</table>
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
列表
列表包含无序列表和有序列表
无序列表 <ul>
例：
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>效果：
有序列表<ol>
例：
<ol start="D" type="A">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>效果：
结语
标签的介绍到这里就结束了，本文主要介绍一下常用的标签，并展示其实际效果，对其有个大致的认识。 学完标签，你可能会有新的疑问：内容是写上去了，想改变一个内容的颜色、背景...该怎么办？这里就要说到CSS了