HTML基本结构主要分为四个部分:

• 基本骨架

• DTD

• 命名空间

• 字符集

目录

一、基本骨架

           <html>标签

           <head>标签

           <title>标签

           <body>标签

二、DTD

三、命名空间

命名空间xmlns

元素内容的语言

四、字符集

常用字符集编码

国际通用字库

中文国标字库

如何选择字符集


在VS Code中,新建的html文件中,输入感叹号然后按tab键即可生成HTML5的一个基本结构:

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

一、基本骨架

HTML文件最基本的四个标签,组成了网页的基本骨架,包括:<html>  <head>  <title>  <body>四组标签。

<html>
    <head>
        <title>网页标题</title>
    </head>
    <body>
        网页主体内容
    </body>
</html>

四者的关系就是:<html>是祖先级,内部嵌套了<head>和<body>,<head>中又嵌套了<title>。

<html>标签

作用:定义HTML文件的根元素,是网页中最大的标签,表示整个的HTML文档,所有的标签要书写在标签内部。

<head>标签

作用:用于存放 <title>  <meta>  <base>  <style>  <script>  <link>。内部用于对网页的设置,除了内部的文字,其他标签都不显示在浏览器上。

注意:在<head>标签中必须要设置的标签是title。

<title>标签

作用1:让页面拥有一个属于自己的标题。如果不写title不写网页标题,会自动以编写代码的文件名作为网页标题,这是不合理的,所以title一般都要书写。

作用2:title中的关键字可以作为搜索引擎抓取时的关键字,提高SEO搜索引擎优化。

作用3:内部的内容会显示在搜索结果的标题部分

作用4:作为浏览器收藏夹默认的网页标题

建议网页必须添加title标签内部内容,内容尽量精简,提取网页的关键字。

<body>标签

作用:定义网页的主体部分,用于存放所有的HTML显示内容的标签,<p>  <h1>  <a>  <div> 等

body内部的元素内容会显示在浏览器的窗口中。

二、DTD

DTD,英文全称为DocType Definition, 简称DTD,完整的HTML文件的第一行内容叫做文档定义类型。也称作文档声明类型,DocType Declaration。

作用:告知浏览器该网页使用的是哪个版本的HTML规范,让浏览器按照对应版本的HTML语法进行解析页面。

在VS Code的html文件中输入感叹号然后tab键,自动生成的html基本结构的第一行就是DTD:

HTML5有哪些基本结构代码 请写出html5的基本结构_html

实际上HTML5的DTD已经做了简化,是<!DOCTYPE html>,但是在之前的版本,XHTML1.0版本的DTD:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

这里面是很长的一串代码,意为:W3C组织发布的XHTML 1.0 Transitional版本的DTD,EN为英文,下面是相关网址,这个DTD限制了在浏览器加载过程中需要按照XHTML1.0版本进行语法解析,解析的语法参考下面的双引号中的网站中的规范。

而HTML5对上述那种较长的DTD进行了改写简化:

<!DOCTYPE html>

三、命名空间

<html>元素表示整个网页文档,在开始标签上设置了命名空间xmlns属性

所有标签都是嵌套在<html>标签内部,在其标签上设置的命名空间可以管理内部所有代码。

XHTML1.0版本的命名空间:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
</html>

HTML5版本的命名空间:

<html lang="en">
</html>

其中各个属性的含义:

命名空间xmlns

xml 是与html类似的标记语言,叫作可扩展标记语言,这种语言不是用于编写的,而是使用在传输过程中的需要遵循的一种规范。它被设计用来传输和存储数据,是html的补充。

xmlns:全称叫做XML NameSpace,NameSpace叫做命名空间,所谓命名空间就是在标签内部书写的元素内容要遵循的一种命名规范,浏览器会将此命名空间用于该属性所在元素内的所有内容。

<html>元素的命名空间规定了在不同用户的浏览器中标签语义遵循的统一标准,避免出现同一标签在不同浏览器中标签名冲突,比如<p>标签在一个浏览器被解析为段落在另一个浏览器被解析为标题就是不允许的,不想出现这种冲突的话就要给一个统一的标准,这个标准使用的就是一个固定的网址http://www.w3.org/1999/xhtml中的规范。

元素内容的语言

xml:lang= "en"和 lang= "en" 都是限制元素内容的语言的,里面的属性值都是en表示所有的标签元素内容的语言都是英语,对搜 索引擎和浏览器是有帮助的,搜索引擎在搜索英文网站时,有了这个"en"就会优先搜索。

lang= " zh-cn" 表示中文(中国),对浏览器和搜索引擎的帮助就是如果想搜索中文相关的网站,那么zh-cn就会比en的排名靠前一些。

四、字符集

<head>标签内部的单标签<meta>标签通过http-equiv属性定义了当前的网页所使用的字符编码

char:character,字符。set:集合

XHTML1.0版本的字符集:

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

HTML5版本的字符集:

<meta charset="UTF-8">

常用字符集编码

国际通用字库

• UTF-8:以字节为单位对Unicode万国码进行编码,涵盖了所有人类的语言文字,也就是说这个字库比较全面,一个汉字为3个字节大小。

中文国标字库

• gb2312:共收入汉字6763个和包括拉丁字母、希腊字母、日文平假名及片假名字母、俄语西里尔字母在内的682个。

• gbk:是gb2312的扩展,增加了繁体字,共收入 21886 个汉字和图形符号,其中汉字(包 括部首和构件)21003 个,图形符号 883 个,一个汉字为2个字节大小

如何选择字符集

使用情况建议:

1、如果没有网页加载速度要求,或者制作的是外文网站,使用utf-8。

2、如果含有大量中文汉字的网站,而且要求网页加载速度快,使用gbk。

主要是因为utf-8一个汉字占3个字节,gbk一个汉字占2个字节,汉字越多占得空间差异越大,加载速度差异越大。

注意:meta标签声明的字库(浏览器加载使用的字库),必须和编辑器软件默认编译字库相同,否则会出现两个字库不匹配,浏览器加载时出现乱码。

在VS Code中如何查看使用的编译字库是什么,在页面右下角:

HTML5有哪些基本结构代码 请写出html5的基本结构_css_02

点击也可以编辑字库或者保存字库:

HTML5有哪些基本结构代码 请写出html5的基本结构_命名空间_03

 使用过程中一定要注意浏览器加载使用的编码和编译器编码使用的字库是相同的。