关于HTML页面结构浅谈

淡淡的烟草味﹌ 2024-04-03 11:39 120阅读 0赞

正确的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设定。

**-END-**

转自：[https://www.weidianyuedu.com][https_www.weidianyuedu.com]

[https_www.weidianyuedu.com]: https://www.weidianyuedu.com

发表评论取消回复

表情：

评论列表（有 0 条评论，120人围观）

还没有评论，来说两句吧...

相关阅读

相关关于HTML页面结构浅谈

正确的HTML格式加上良好的编码规范才是一个成熟合格的项目。 HTML页面基本结构 <!DOC

淡淡的烟草味﹌/ 2024年04月03日 11:39/ 0 赞/ 121 阅读

相关关于html兼容性浅谈

![709c29d2a79533dc375c52c1de6f7808.jpeg][] 关于html兼容性为什么会出现兼容性问题? 由于市面上的浏览器种类太多了, 所

比眉伴天荒/ 2024年04月01日 15:42/ 0 赞/ 109 阅读

相关网页浅谈：关于HTML、CSS与JS

转自：[微点阅读][Link 1] [https://www.weidianyuedu.com][Link 1] 我们经常写 HTML 、 CSS 和 JavaScript

青旅半醒/ 2024年03月29日 15:54/ 0 赞/ 83 阅读

相关页面结构HTML、CSS和JS浅谈

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

冷不防/ 2024年03月26日 00:01/ 0 赞/ 102 阅读

相关浅谈：关于HTML、CSS和JS

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

刺骨的言语ヽ痛彻心扉/ 2024年03月25日 22:15/ 0 赞/ 72 阅读

相关浅谈HTML-DOM

《HTML-DOM》 \Node 继承Document，Element继承Node。 \所以对于文本节点，节点值是文本内容；对于属性节点，节点值是属性的值。 \且节

电玩女神/ 2022年07月19日 02:19/ 0 赞/ 160 阅读

相关数据结构浅谈

时间：2017年4月21日15:47:46 [《我的博客地图》][Link 1] [数据结构][Link 2]是计算机存储、组织数据的方式。数据结构是指相互之间存在

港控/mmm°/ 2022年06月17日 08:36/ 0 赞/ 250 阅读

相关浅谈HTML

浅谈HTML html：超文本标记语言基本结构： <!DOCTYPE html> <html> <head> <me

野性酷女/ 2022年06月05日 07:29/ 0 赞/ 246 阅读

相关 html+css浅谈

自从来到兄弟连还没上过战地日记呢，心里有点不甘，就把自己昨天写的日记拿来和大家分享一下，是关于html和css的方面的，写的不好，大家不好口水。这 2天完成了2个网站的首

灰太狼/ 2022年05月15日 09:17/ 0 赞/ 205 阅读

相关浅谈HTML

> HTML，作为构建网页曲三部曲的第一部，有着很重要的地位（地基）。如果说CSS是肉体，JS是灵魂，那么HTML就是骨骼！没有HTML，CSS和JS就无法实现它们远大理想！

约定不等于承诺〃/ 2022年04月17日 03:55/ 0 赞/ 226 阅读