前言

本文主要在初学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>

这是只有两个元素的页面，运行后是这样的：（看中的内容，会发现跟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 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元素定义了 HTML 文档的主体，包含文档的所有内容。 以下列举的标签都写在<body></body>中

以上是一个HTML页面所包含的标准结构，这些标签在页面中是看不见的（除了title），接下来看看那些页面中可以看到的标签

在介绍前先了解下内联元素、块级元素。上面例子中有两个标签上面没有提到，就是

和。

就是个典型块级元素，而是个典型的内联元素。

内联元素、块级元素

回到上面的例子，细心的同学可能会奇怪，为什么代码写了三行文字，页面上却只有两行？而且后面的两行是连在一起的？这就要说到块级元素和内联元素了。

<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>。

<hr/>

除了上面提到的，还有一些常用的其他标签

标题 `<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>

效果：

注：所有连续的空行（换行）也被显示为一个空格。

超链接

有两个作用 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/>

图像

展示一张图片，可以是本地或网络图片。属性

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层级关系

表格

用于绘制表格，需要用到一下内部标签： <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>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

效果：

有序列表

例：

<ol start="D" type="A">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ol>

效果：

结语

标签的介绍到这里就结束了，本文主要介绍一下常用的标签，并展示其实际效果，对其有个大致的认识。学完标签，你可能会有新的疑问：内容是写上去了，想改变一个内容的**颜色、背景...**该怎么办？这里就要说到CSS了（参考CSS入门）

参考

相关阅读

有错误之处，感谢指出，接收批评