HTML基础(part3)--常用标签之HTML标签

鄙人的学习笔记。

常用标签

Web语义化，是指使用语义恰当的标签，使页面有良好的结构。页面的元素有含义，才能使人和搜索引擎都容易理解。所以，我们要尽量使用有语义的标签，如：<h1><h2><p><ul><ol><table>。尽量不要使用没有语义的标签，如：<div><span>。

`<!DOCTYPE>` 标签

快速生成HTML页面结构

在Sublime编辑器中，利用【html:5 + tab键】快速生成html5 的文档结构。

备注：文档声明标签一定要有，不能省略。后面学了css之后，文档声明标签会严重影响页面的展示效果。

HTML标签`<html>`

备注1：HTML标签代表整个文档结构。
备注2：HTML标签只嵌套 head标签和body标签。

HTML标签常用属性

lang属性

可以通过lang属性设置当前文档的主要语言，帮助搜索引擎解析文档。

例子：

<html lang="zh_CN"> </html>
<!-- 设置当前页面主要文字为中文 -->

头部标签`<head>`

被head标签封装的其他标签

meta标签

告诉浏览器当前文档的编码格式。

例子:

<meta charset="UTF-8">
<!-- 设置当前页面的编码格式为UTF-8 -->

补充知识点：编码格式

备注1：如果浏览器解析HTML页面的编码，和我们实际设置的HTML页面编码不同，则可能会出现乱码。所以，我们必须告诉浏览器，当前HTML页面的编码，这样浏览器才能正确解析页面。比如，当前HTNL页面编码为UTF-8，我们设置<meta charset="gb2312">则用浏览器打开页面时，会出现乱码。

备注2：如何更改当前页面的编码格式？可以在sublime界面，用【ctrl + shift + P】打开命令面板，输入【reload】，再选择下图所示的选项：

这时，我们再根据需要，选择文件的编码格式。

title标签

设置当前浏览器页面标签的标题内容

例子：

<title>小黄之家~</title>
<!-- 设置当前浏览器页面的标题内容为：小黄之家~ -->

标题标签( `<h1>~<h6>` )

h1标题标签是标注当前页面中的文档最重要的核心主题的文本。

h1~h6标签，相对于当前文档的重要性依次降低。注意h1标签在整个页面中最多一次（当然可以超过，但是不利于搜索SEO，如果h1过多，则搜索引擎会认为页面主题不明确，则搜索排名会靠后）。

h2以后的这些标签可以在一个页面中有多个，但是不要滥用，滥用会导致网页的SEO受影响，搜索引擎会认为我们在”作弊”,搜索排名同样会降低。

h1 ~h6 标签不是用于字体大小的样式设置，关键是文档内容的文字的重要性的体现，html是定义文档结构的，而样式由css来设定。

举个例子

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>小黄之家</title></head><body><h1>这是文档的最重要标题，一般情况一个页面只能有一个H1标题</h1><h2>这是文档的次最重要标题2，页面中可以有多个h2标签</h2><h3>这是文档的最重要标题3</h3><h4>这是文档的最重要标题4</h4><h5>这是文档的最重要标题5</h5><h6>这是文档的最重要标题6</h6></body>
</html>

页面：