HTML基本结构-CSDN博客

本文链接：https://blog.csdn.net/xinyuerr/article/details/134826777

之前介绍了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文档。

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

head模块

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

body模块

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

title标签

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

meta标签name属性

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

格式：

<meta name="属性值" content="描述内容"/>

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

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

<meta http-equiv="属性值" content="参数"/>

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