HTML页面基本结构学习

小鱼儿 2024-03-24 09:33 68阅读 0赞

转自：[微点阅读][Link 1] [https://www.weidianyuedu.com][Link 1]

![format_png][]

之前介绍了HTML的编码规范，良好编码规范可以让我们的代码更加的易于维护，而今天要说的基本结构，则是能够让我们的页面正确的进行页面显示和[SEO][]，正确的HTML格式加上良好的编码规范才是一个成熟合格的项目。

**HTML页面基本结构**

*  
 *  
 *  
 *  
 *  
 *  
 *  
 *

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title></title>  <head>  <body></body></html>

HTML的页面结构非常简单，整体分为两部分，第一部分为DOCTYPE模块，第二部分为html模块。

DOCTYPE模块

文档声明，位于页面的首行，告知浏览器使用哪种HTML版本规范方式解析网页，使网页能正常显示。

html模块

告诉页面这是一个html文档。[微点阅读][Link 1] [https://www.weidianyuedu.com][Link 1]

在<html>部分中，又分为两小部分，第一部分为head模块，第二部分为body模块。

head模块

如果用人体的结构来类比的话，这部分属于网页的头部，这部分中描述了HTML文件的各种属性和信息，如网页的标题，字符编码，是否启用缓存，引用的外部脚本和样式等等。在这head标签里写的内容不会在网页的正文内容中显示出来。

body模块

HTML的主体，网页的文本、超链接、图像、表格、视频等所有在网页上显示的内容都写在这里。

title标签

在head标签中title标签表示网页的标题。[meta标签][meta]\-提供有关页面的元信息，比如针对搜索引擎的关键字、缓存时间、启用浏览器内核等等，meta标签有两个主要属性name和http-equiv。

meta标签name属性

主要用于描述网页，比如定义网页的关键词，关键内容、标注作者、版权等。

**格式：**

常用name属性值**keywords**——用于告诉搜索引擎网页的关键字。**description**——用于告诉搜索引擎网站的主要内容。**robots**——用来告诉爬虫哪些页面需要索引，哪些页面不需要索引。**author**——用于标注网页的作者信息。**generator**——用于标注网页是用什么IDE做的。**copyright**——用于标注版权信息。**renderer**——用于指定双核浏览器默认以什么方式进行页面渲染content="webkit"为webkit内核，content="ie-comp"为IE兼容模式，content="ie-stand"为IE标准模式。

meta标签http-equiv属性主要用于设置网页的字符集，缓存机制等。**格式：**

常用http-equiv属性值**content-type**——设定网页字符集。**X-UA-Compatible**——用于告知浏览器以什么种版本来渲染页面。**cache-control**——设置浏览器如何缓存某个响应以及缓存多长时间。**Set-Cookie**——设置cookie设定。

[Link 1]: https://www.weidianyuedu.com/
[format_png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/0bc6c943d09349b8839965b94c252a49.png
[SEO]: https://so.csdn.net/so/search?q=SEO&spm=1001.2101.3001.7020
[meta]: https://so.csdn.net/so/search?q=meta%E6%A0%87%E7%AD%BE&spm=1001.2101.3001.7020