目录
[1]文档结构 [2]文档声明 [3]文档头部 [4]文档主体
文档结构
一个完整的HTML文档必须包含3个部分：文档声明、文档头部和文档主体。
【最简单的文档结构】
Document
【复杂的文档结构】
Document
文档声明
告诉浏览器以哪个标准来解析HTML文档
[注意]必须首行、顶格，对大小写不敏感
【HTML版本】
版本 年份
| HTML | 1991 |
| HTML+ | 1993 |
| HTML 2.0 | 1995 |
| HTML 3.2 | 1996 |
| HTML 4.01 | 1999 |
| XHTML 1.0 | 2000 |
| HTML5 | 2014 |
【常用声明】
【1】HTML5
【2】在HTML5之前，文档声明一般有三种类型：严格型strict、过渡型transitional、框架frameset
【a】HTML4.01
【b】XHTML1.0
【c】XHTML1.1 等同于XHTML1.0 Strict
文档头部
描述了文档的一些基本的属性和信息（可以呈现的是title和icon）
【1】文档标题
</p> <p> 【作用】<br /> 【a】定义浏览器工具栏中的标题<br /> 【b】提供页面被添加到收藏夹时显示的标题<br /> 【c】显示在搜索引擎结果中的页面标题</p> <p> [注意]在所有HTML文档中，<title>都是必须的</p> <p> </p> <p> 【2】base标签</p> <p> 为页面上所有链接规定默认地址和默认打开方式</p> <p class="sycode"> <pre class="precsshui"><base href="http://baidu.com" target="_blank"></script></pre> </p> <p> </p> <p> 【3】link标签</p> <p> 【a】引入图标</p> <p class="sycode"> <pre class="precsshui"></script></pre> </p> <p> 【b】引入外部CSS样式表 </p> <p class="sycode"> <pre class="precsshui"></script></pre> </p> <p> </p> <p> 【4】style标签和script标签</p> <p> 【a】引入内部CSS样式</p> <p class="sycode"> <pre class="precsshui"><style> body{background-color: red;}</style></script></pre> </p> <p> 【b】引入javascript </p> <p class="sycode"> <pre class="precsshui">document.onclick = function(){ alert('hello world;')}</script></pre> </p> <p> </p> <p> 【5】meta标签</p> <p> 【a】字符编码，文档的编码一定要与文件本身的编码保持一致，否则会出现乱码，推荐使用UTF-8编码</p> <p class="sycode"> <pre class="precsshui"><meta charset="utf-8"/></script></pre> </p> <p> 【b】SEO常用到的关键词keywords和描述description</p> <p class="sycode"> <pre class="precsshui"><meta name="description" content="Free Web tutorials on HTML, CSS, JavaScript" /><meta name="keywords" content="HTML, CSS, XML" /></script></pre> </p> <p> 【c】作者、版权</p> <p class="sycode"> <pre class="precsshui"><meta name="author" content="littlematch"><meta name="copyright" content=""></script></pre> </p> <p> 【d】定时跳转(让网页多少秒刷新，或跳转到其他网页)</p> <p class="sycode"> <pre class="precsshui"><meta http-equiv="refresh" content="5"><meta http-equiv="refresh" content="5;url=http://www.baidu.com"></script></pre> </p> <p> 【e】期限(指定网页在缓存中的过期时间)</p> <p class="sycode"> <pre class="precsshui"><meta http-equiv="Expires" Content="0"><meta http-equiv="Expires" Content="Sat Nov 28 2015 21:19:15 GMT+0800"> </script></pre> </p> <p> 【f】缓存</p> <p class="sycode"> <pre class="precsshui"><meta http-equiv="Pragma" Content="No-cach">(禁止缓存，访问者无法脱机浏览)</script></pre> </p> <p> 【g】cookie</p> <p class="sycode"> <pre class="precsshui"><meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Sat Nov 28 2015 21:19:15 GMT+0800; path=/"></script></pre> </p> <p> 【h】viewport:视口，移动端常用</p> <p class="sycode"> <pre class="precsshui"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /></script></pre> </p> <p> </p> <h2>文档主体<body></h2> <p> 真正可以在页面上看到的内容</p> <p> 【常用标签】</p> <p class="sycode"> <pre class="precsshui"><h2><h2><h3><h4><h5><h6><p><img><strong><em><br><hr><ul><ol><li><dl><dt><dd><section><header><footer><nav><time><table><thead><tbody><caption><tr><th><td><form><input><textarea><button><select><option><label></script></pre> </p> <p> [注意]在HTML5标准下，哪些标签可以使用，哪些标签不可以使用，请移步HTML元素和有效的DTD </div>
</div>
<script type="text/javascript" src="/layui/layui.js"></script>
<script>
layui.use('code', function(){
layui.code({
elem: 'pre', //默认值为.layui-code
about:false,
title:'HTML骨架结构_html/css_WEB-ITnose代码块',
encode: true //是否转义html标签。默认不开启
});
});
</script>
<footer class="comm-footer">
<ul class="channels">
<li>
<a target="_top" href="/system/">操作系统</a>
</li><li>
<a target="_top" href="/down/">程序下载</a>
</li><li>
<a target="_top" href="/jquery/">jquery插件库</a>
</li><li>
<a target="_top" href="/jiaoben/">编程</a>
</li><li>
<a target="_top" href="/db/">数据库</a>
</li><li>
<a target="_top" href="/tools/">在线工具</a>
</li><li>
<a target="_top" href="/framebook/">框架书籍</a>
</li><li>
<a target="_top" href="/xitongjiaocheng/">系统教程</a>
</li><li>
<a target="_top" href="/ruanjianxiazai/">软件下载</a>
</li> </ul>
<ul class="versions">
<li>
<a href="https://m.gxlcms.com" class="active">触屏版</a>
</li>
<li>
<a href="https://www.gxlcms.com" target="_top">电脑版</a>
</li>
</ul>
<p><a href="https://beian.miit.gov.cn/" target="_blank" style="color:#ffffff"></a><script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?6c9b8cea1903c9f813f150c04aeebc3c";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script></p>
</footer>
</body>
</html> 