html文件结构分析
2018-07-23 本文已影响0人
牛奶大泡芙
vscode输入"html: 5"自动补全的内容是一下这段标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
小编来分析一下这段代码的构成
1、DOCTYPE声明
<!DOCTYPE> 声明不是一个 HTML 标签；它是用来告知 Web 浏览器页面使用了哪种 HTML 版本。
HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明，分别是：Strict、Transitional 和 Frameset。 HTML5 中仅规定了一种。
html5: 它所触发的模式与严格型HTML或严格型XHTML所触发的模式完全相同，但好处是节省代码且向前兼容
<!DOCTYPE html>
html4.01-strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN" "http://www.w3.org/TR/html4/strict.dtd">
html4.01- transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
html4.01-frameset 可以使用frameset, frame标签，在h5中可用iframe
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
DTD 声明字符串由三部分组成: doctype name 、systemid、publicid，通过这三个综合判断来决定模式
2、meta标签
META包括了2个重要的属性，http-equlv(把content属性关联到http头部)和name(把content属性关联到名称)。
合乎W3C规范的源代码必须包含这2个基本属性。其中页面标题信息往往是固定的，不同网页变化不大，只要符合W3C规范即可;seo重点在于name属性的正确参数配置。
<meta http-equiv="参数" content="参数变量值">
(1) 设置网页的过期时间
<meta http-equiv="expires" content="Fri,12Jan200118:18:18GMT">
(2) 禁止浏览器从本地缓存获取内容
<meta http-equiv="Pragma" content="no-cache">
(3) 刷新页面和重定向
<meta http-equiv="Refresh" content="2; URL=http://www.baidu.com">
(4) 网页过期，cookie会被删除
<meta http-equiv="Set-Cookie" content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/">
(5) 页面在当前窗口以独立页面显示
<meta http-equiv="Window-target"content="_top">
(6) 设定显示的字符集
<meta http-equiv="content-Type" content="text/html:charset="gb2312">
