非零基础自学前端最后一遍一 HTML+CSS 2 HTML常见的元素 2.1 文档声明和html元素

忘是亡心i 2024-03-26 19:33 32阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  2 HTML常见的元素
         *   *  2.1 文档声明和html元素
             *   *  2.1.1 完整的HTML结构
                 *  2.1.2 文档声明
                 *  2.1.3 html元素

![在这里插入图片描述][d1bc5864112b4fea9ea045009fb672b7.png_pic_center]

#### 一 HTML+CSS ####

#### 2 HTML常见的元素 ####

##### 2.1 文档声明和html元素 #####

###### 2.1.1 完整的HTML结构 ######

一个完整的HTML结构包括哪几部分呢？

*  文档声明
 *  html元素
    
     *  head元素
     *  body元素

![在这里插入图片描述][823f5ed14859419587512399ad64421d.png_pic_center]

###### 2.1.2 文档声明 ######

HTML最上方的一段文本我们称之为 文档类型声明，用于声明文档类型

![在这里插入图片描述][c7e532204eee4664a2814c9ee50b2608.png_pic_center]

*  HTML文档声明，告诉浏览器当前页面是HTML5页面；
 *  让浏览器用HTML5的标准去解析识别内容；
 *  必须放在HTML文档的最前面，不能省略，省略了会出现兼容性问题；

HTML5的文档声明比HTML 4.01、XHTML 1.0简洁非常多(了解即可)

![在这里插入图片描述][a471d0c45e774c1bb1d7d87835809305.png_pic_center]

###### 2.1.3 html元素 ######

*  <html>元素 表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。
    
     *  所有其他元素必须是此元素的后代。
    
    ![在这里插入图片描述][c30c706154c443eb9c90fb772d604454.png_pic_center]
 *  W3C标准建议为html元素增加一个lang属性，作用
    
     *  帮助语音合成工具确定要使用的发音;
     *  帮助翻译工具确定要使用的翻译规则;
 *  比如常用的规则：
    
     *  lang=“en”表示这个HTML文档的语言是英文；
     *  lang=“zh-CN”表示这个HTML文档的语言是中文；

[d1bc5864112b4fea9ea045009fb672b7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c8354f6a4a274d159d1c1d40bd3021cb.png
[823f5ed14859419587512399ad64421d.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1bd3b1441079434086d7bb9352254faf.png
[c7e532204eee4664a2814c9ee50b2608.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/d56cc3b9e9ca4af8ae3872702905c700.png
[a471d0c45e774c1bb1d7d87835809305.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/b873474024a540f588c96241db524dde.png
[c30c706154c443eb9c90fb772d604454.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/3a860f7570ef4018be8555c392891c59.png