01 初识HTML5

柔光的暖阳◎ 2024-03-31 15:16 29阅读 0赞

## HTML5结构组成 ##

HTML5主要是由标签组成的，如下代码就是HTML5的主要组成部分：

<!DOCTYPE html>             
    <html lang="zh-CN">         
    <head>
        <meta charset="UTF-8">   
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>网页标题</title>
    </head>
    <body>
    
    </body>
    </html>

其中:

###### <! DOCTYPE html> ######

表示html5标准网页声明。如果你的页面添加了< !DOCTYPE html>那么，那么就等同于开启了标准模式，那么浏览器就得老老实实的按照W3C的标准解析渲染页面，这样一来，你的页面在所有的浏览器里显示的就都是一个样子了。

###### < html lang=“zh-CN”> ######

表示本代码使用的什么语言，lang="en"表示英文，lang="zh-CN"表示中文，lang="ja-jp"表示日文，拿IBM网站为例：  
中文网站网址为：https://www.ibm.com/cn-zh  
英文网站网址为：https://www.ibm.com/usa-en  
日文网站网址为：https://www.ibm.com/usa-en  
等等。。。。。。。。  
中文网站界面：

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

查看源代码可以看到，lang=zh-CN  
![在这里插入图片描述][3f198071835d4cec91d014b2252f9920.png_pic_center]  
英文网站页面：  
![在这里插入图片描述][a2fd9db3da1d47f88becd72fdd418d4b.png_pic_center]  
查看源代码可以看到，lang=en-US  
![在这里插入图片描述][a00a973fc7d7495183c87fb3b60f8fff.png_pic_center]  
日文网站页面：  
![在这里插入图片描述][9d117657cba84e40a28582ae1dba94e6.png_pic_center]  
查看源代码可以看到，lang=ja-jp  
![在这里插入图片描述][7208cdf335f948a68df06b82b701e1e4.png_pic_center]  
head元素开始文档的头部

meta元素声明文档的字符编码（通常为UTF-8）

title元素是网页的标题

body元素开始页面的主体

[540c21e8a31b42c8888dc608169d4a93.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/c136ae4a5f4a40aaa78d27275f78fcc1.png
[3f198071835d4cec91d014b2252f9920.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/2506cb32525d4c88b0b822654f292357.png
[a2fd9db3da1d47f88becd72fdd418d4b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/d20d64a5b62f4e95911b3fb886d653a4.png
[a00a973fc7d7495183c87fb3b60f8fff.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/0ea390418e4e4d3b80bf212e32522057.png
[9d117657cba84e40a28582ae1dba94e6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/955f24079bad470184ff9667e95187fa.png
[7208cdf335f948a68df06b82b701e1e4.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/31/074ee227054b45a4a44eaa5cccde37b8.png