02_HTML 常用的标签

2018-09-30 本文已影响0人秋的懵懂

时间：2018-09-29 姓名：魏文应

一、标题标签

标题标签，除了 <title> 标题标签以外，还有 1 至 6 级标签：

<!doctype html>

<html>
    <head>
        <meta charset="utf-8" />
        <title>这是我的网页</title>
    </head>

    <body>
        <h1> 一级标题 </h1>
        <h2> 二级标题 </h2>
        <h3> 三级标题 </h3>
        <h4> 四级标题 </h4>
        <h5> 五级标题 </h5>
        <h6> 六级标题 </h6>
    </body>

</html>

标题标签，不太关心的样式，也就是不关心字体大小。标题标签关心的是语义。同时，标题标签对于 搜索引擎来说，也是比较重要的：

搜索引擎先检索 <title> 标签标题。
再检索 <h1> 一级标题。
其次检索 <h2> 和 <h3> 。
<h3> 以后的标题基本不用，搜索引擎一般搜索不到。

我们要注意：

一个 HTML 中， <h1> 标签只能有一个，太多了搜索引擎会认为这是一个垃圾网站，然后不予以收录。

二、段落标签

段落标签 <p> ，表示这是一段话，也就是语文中说的一段话：

<!doctype html>

<html>
    <head>
        <meta charset="utf-8" />
        <title>这是我的网页</title>
    </head>

    <body>
        <p> 这是第一自然段。 </p>
        <p> 这是第二自然段。 </p>
    </body>
</html>

注意：

这只是语义上的一段话，只是告诉浏览器，这是一段话。但用户不一定能看到分段效果，分段效果取决于 CSS 。

三、换行标签

换行标签 <br> 比较简单，是自结束标签：

<!doctype html>

<html>
    <head>
        <meta charset="utf-8" />
        <title>这是我的网页</title>
    </head>

    <body>
        <p>
            锄禾日当午，<br />
            汗滴禾下土。<br />
            谁知盘中餐，<br />
            粒粒皆辛苦。<br />
        </p>
    </body>
</html>

从语义上，说明这要换行了。同样的，换不换行，还要看 CSS 样式如何处理。

四、分隔线标签

分隔线标签 <hr /> ，是说明这里需要有一条分隔线：

<!doctype html>

<html>
    <head>
        <meta charset="utf-8" />
        <title>这是我的网页</title>
    </head>

    <body>
        <hr />
    </body>
</html>

五、图片标签

使用图片标签 <img /> ，引入外部图片：

<!doctype html>

<html>
    <head>
        <meta charset="utf-8" />
        <title>图片标签</title>
    </head>

    <body>
        <img src="1.gif" alt="这是一只松鼠" width="200px" />
    </body>
</html>

其中：

src="1.gif" 是 当前目录下 的一个名为 1.gif 的图片。
alt="这是一只松鼠" 在图片加载不出来时会显示，而且搜索引擎会根据这里的描述进行收录搜索。
width="200px" 是图片的宽度， px 是像素单位，只写 width 或者只写 height ，那么图片会保持原比例显示。

当然，src="1.gif" 也可以使用相对路径：

<!doctype html>

<html>
    <head>
        <meta charset="utf-8" />
        <title>图片标签</title>
    </head>

    <body>
        <img src="../test-dir/1.gif" alt="这是一只松鼠" width="200px" />
    </body>
</html>

图片格式的选择

常见的图片格式有：

JPEG(JPG) 格式： 支持的颜色多，图片可以压缩，但不支持透明。
GIF 格式： 支持的颜色少，只支持简单透明。支持动态图。
PNG 格式： 支持的颜色多，并且支持复杂透明。

使用原则是：

效果一致，使用小的。效果不一致，使用效果好的。

六、meta 标签

<meta /> 标签除了用来声明 HTML 的字符集以外，还有其它用途。比如，用来设置网页的 关键字：

<!doctype html>

<html>
    <head>
        <meta charset="utf-8" />
        <title>实体</title>
    </head>

    <body>
        <!--
            使用meta标签设置网页的关键字
        -->
        <meta name="keywords" content="HTML5,JavaScript,前端,Java" />
    </body>
</html>

还可以使用 <meta /> 标签进行 网页描述：

<!doctype html>

<html>
    <head>
        <meta charset="utf-8" />
        <title>实体</title>
    </head>

    <body>
        <!--
            使用meta标签对网页进行描述
        -->
        <meta name="description" content="发布H5、前端相关信息。" />
    </body>
</html>

需要注意：

关键字和网页描述，搜索引擎会检索，作为搜索参考，但不会影响网页在搜索引擎中的排名。

<meta /> 标签还可用用于网页重定向，比如，下面的 HTML 会在 5 秒钟以后自动跳转到百度：

<!doctype html>

<html>
    <head>
        <meta charset="utf-8" />
        <title>实体</title>
    </head>

    <body>
        <!--
            设置了网页5秒钟以后自动跳转到 https://www.baidu.com
        -->
        <meta http-equiv="refresh" content="5;url=https://www.baidu.com" />
    </body>
</html>

此外，<meta /> 标签还有更多的应用，可以通过 W3School手册 查看，依次点击 HTML/CSS -> HTML5 -> HTML5 标签 -> meta ，进入meta 的说明页面（标签太多不易查找时，按下快捷键 Ctrl +F ，在当前页面下查找）。