时间：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 ，在当前页面下查找）。
网友评论