Lang属性及Head元素嵌套元素

发布于：11-19

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>

新建网页文件后会看到上面代码，其中：

1、<!DOCTYPE html>

表示Html文档声明，告诉浏览器当前页面是HTML5页面，让浏览器用HTML5的标准去解析识别HTML文档；

必须是 HTML 文档的第一行，位于 <html> 标签之前，不能省略，省略了会出现兼容性问题。

2、lang属性

lang 属性规定元素内容的语言，如：

en——英语

zh或者zh-CN——中文

ko——韩语

作用：帮助语音合成工具确定要使用的发音；帮助翻译工具确定要使用的翻译规则。

下面页面中设置了<html lang="en">，所以出现翻译网页为中文的提示：

3、meta元素

<meta>元数据,可提供有关页面的元信息；

位于文档的头部，不包含任何内容，没有结束标签。

<meta charset="UTF-8">（charset——character set）字符编码（计算机中所有的东西都是01表示），让浏览器更精准地显示每一个字。

ASCII——英文

GB2312——英文、中文

其他国家——其他自己的编码规则

由于上面列出的字符集都有容量限制，而且不兼容多语言环境，Unicode 联盟开发了 Unicode 标准：

UTF-16/UTF-32/UTF-8——涵盖所有语言

4、title元素

<title> 元素可定义文档的标题。

设置：<title>第一个网页</title>，页面标题效果见上图

5、<link>

<link>标签定义文档与外部资源的关系，最常见的用途是链接样式表，没有结束标签。

<link rel="icon" href="https://img.alicdn.com/tfs/TB1XlF3RpXXXXc6XXXXXXXXXXXX-16-16.png">

上面表示设置网页标题前面显示的网页图标，案例中图片地址采用天猫图标地址，最终显示的页面效果如下图所示：

Lang属性 Head元素嵌套元素