目录
[1]文档结构 [2]文档声明 [3]文档头部 [4]文档主体
文档结构
一个完整的HTML文档必须包含3个部分：文档声明、文档头部和文档主体。
【最简单的文档结构】
【复杂的文档结构】
文档声明
告诉浏览器以哪个标准来解析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> 【2】base标签</p> <p> 为页面上所有链接规定默认地址和默认打开方式</p> <p class="sycode"> <div class="51ds_code" style="position: relative;"><pre class="precsshui"><base href="http://baidu.com" target="_blank"></script></pre></div> </p> <p> </p> <p> 【3】link标签</p><script type="text/javascript" src="https://jss.51dongshi.com/pcwz/wenzhong.js"></script> <p> 【a】引入图标</p> <p class="sycode"> <div class="51ds_code" style="position: relative;"><div class="51ds_code" style="position: relative;"><div class="51ds_code" style="position: relative;"><pre class="precsshui"></script></pre></div></div></div> </p> <p> 【b】引入外部CSS样式表 </p> <p class="sycode"> <div class="51ds_code" style="position: relative;"><div class="51ds_code" style="position: relative;"><div class="51ds_code" style="position: relative;"><pre class="precsshui"></script></pre></div></div></div> </p> <p> 【4】style标签和script标签</p> <p> 【a】引入内部CSS样式</p> <p class="sycode"> <div class="51ds_code" style="position: relative;"><pre class="precsshui"><style> body{background-color: red;}</style></script></pre></div> </p> <p> 【b】引入javascript </p> <p class="sycode"> <div class="51ds_code" style="position: relative;"><pre class="precsshui">document.onclick = function(){ alert('hello world;')}</script></pre></div> </p> <p> 【5】meta标签</p> <p> 【a】字符编码，文档的编码一定要与文件本身的编码保持一致，否则会出现乱码，推荐使用UTF-8编码</p> <p class="sycode"> <div class="51ds_code" style="position: relative;"><pre class="precsshui"><meta charset="utf-8"/></script></pre></div> </p> <p> 【b】SEO常用到的关键词keywords和描述description</p> <p class="sycode"> <div class="51ds_code" style="position: relative;"><pre class="precsshui"><meta name="description" content="Free Web tutorials on HTML, CSS, JavaScript" /><meta name="keywords" content="HTML, CSS, XML" /></script></pre></div> </p> <p> 【c】作者、版权</p> <p class="sycode"> <div class="51ds_code" style="position: relative;"><pre class="precsshui"><meta name="author" content="littlematch"><meta name="copyright" content=""></script></pre></div> </p> <p> 【d】定时跳转(让网页多少秒刷新，或跳转到其他网页)</p> <p class="sycode"> <div class="51ds_code" style="position: relative;"><pre class="precsshui"><meta http-equiv="refresh" content="5"><meta http-equiv="refresh" content="5;url=http://www.baidu.com"></script></pre></div> </p> <p> 【e】期限(指定网页在缓存中的过期时间)</p> <p class="sycode"> <div class="51ds_code" style="position: relative;"><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></div> </p> <p> 【f】缓存</p> <p class="sycode"> <div class="51ds_code" style="position: relative;"><pre class="precsshui"><meta http-equiv="Pragma" Content="No-cach">(禁止缓存，访问者无法脱机浏览)</script></pre></div> </p> <p> 【g】cookie</p> <p class="sycode"> <div class="51ds_code" style="position: relative;"><pre class="precsshui"><meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Sat Nov 28 2015 21:19:15 GMT+0800; path=/"></script></pre></div> </p> <p> 【h】viewport:视口，移动端常用</p> <p class="sycode"> <div class="51ds_code" style="position: relative;"><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></div> </p> <h2>文档主体<body></h2> <p> 真正可以在页面上看到的内容</p> <p> 【常用标签】</p> <p class="sycode"> <div class="51ds_code" style="position: relative;"><pre class="precsshui"><h2><h2><h3><h4><h5><h6><p><img><em><br><hr><ol><li><section><header><footer><nav><time><table><thead><tbody><caption><tr><th><td><form><input><textarea><button><select><option><label></script></pre></div> </p> <p> [注意]在HTML5标准下，哪些标签可以使用，哪些标签不可以使用，请移步HTML元素和有效的DTD
</p><p><script type="text/javascript" src="https://jss.51dongshi.com/pcwz/dysph.js"></script><p><strong>声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com</strong></p></div>
<div class="downbox clearfix">
<div class="ico"><img src="https://js.51dongshi.com/tpl/pc2/images/document.png" alt="文档"></div>
<div class="txt">
<h4>HTML骨架结构_html/css</h4>
<div class="co">HTML骨架结构_html/css_WEB-ITnose:目录 [1]文档结构 [2]文档声明 [3]文档头部 [4]文档主体 文档结构 一个完整的HTML文档必须包含3个部分：文档声明、文档头部和文档主体。 【最简单的文档结构】 Document 【复杂的文档结构】 Document 文档声明 告诉浏</div>
<div class="tj"><b>推荐度：</b><div class="tj_stars_list"><i class="tj_stars tj_05"></i></div></div>
</div>
<div class="btn">
<a href="javascript:;" class="html2word" data-model="article" data-id="arvdve" title="文档下载">
<b>点击下载本文</b>
<span>文档为doc格式</span>
</a>
</div>
</div>
<script>keji_detail_ga('article_content_bottom');</script>
<div class="tvideo_tag">
标签：
<a href="/tlist-246007/">html</a>
<a href="/tlist-365684/">结构</a>
<a href="/tlist-567364/">css</a>
</div>
<div class="tvideo_box tvideo_box_tab">
<div class="hd">
<ul><li class="on">热门焦点</li><script>keji_detail_ga('hot_jiaodian_tab_title');</script></ul>
</div>
<div class="bd">
<ul class="ult_jpic clearfix">
<script>get_hot_jiaodian_content('wz_hot_jiaodian',33,'hot',1);</script>
</ul>
</div>
</div>
</div>
<!--中间文章 end-->
<!--右侧专题 star-->
<div class="ult_zt">
<script>keji_detail_ga('article_right_top');</script>
<div class="ult_ztbox">
<h4>最新推荐</h4>
<ul class="tvideo_r_a clearfix">
<script>get_detail_right('wz_right_new',33,'')</script>
</ul>
</div>
<script>keji_detail_ga('article_right_middle');</script>
<div class="ult_ztbox">
<h4>猜你喜欢</h4>
<ul class="telist_rb clearfix">
<script>get_detail_right('wz_right_love',33,'')</script>
</ul>
</div>
<script>keji_detail_ga('article_right_new_bottom');</script>
<div class="ult_ztbox">
<h4>热门推荐</h4>
<ul class="tvideo_r_b clearfix">
<script>get_detail_right('wz_right_hot',33,'')</script>
</ul>
</div>
<script>keji_detail_ga('article_right_bottom');</script>
</div>
<!--右侧专题 end-->
<div style="display:none"><a href="https://www.51dongshi.com/wzztf/ar/arvdve/">专题</a>
</div>
</div>
</div>
<script src="https://js.51dongshi.com/plug/qrcode/qrcode.min.js"></script>
<script src="https://js.51dongshi.com/js/share.js" charset="UTF-8"></script>
<script type="text/javascript" src="https://js.51dongshi.com/tpl/pc2/js/waypoints.min.js"></script>
<script type="text/javascript" src="https://js.51dongshi.com/tpl/pc2/js/icon_step.js"></script>
<style>
#qrcode{padding: 15px;background: #fff;}
</style>
<div id="qrcode" style="display: none"></div>
<script>new QRCode(document.getElementById("qrcode"), "https://m.51dongshi.com/eedfarvdve.html");</script>
<iframe src="https://hits.51dongshi.com/?biao=ho_article&id=917270" border="0" frameborder="0" style="width: 0px; height: 0px"></iframe>
<script src="https://js.51dongshi.com/js/shHighlighter.js"></script>
<link rel="stylesheet" href="https://jss.51dongshi.com/js/fffz/css/box.css">
<script id="fffz" data-domain="//www.51dongshi.com/index" src="https://js.51dongshi.com/js/fffz/fffz.js"></script>
<script type="text/javascript" src="https://jss.51dongshi.com/pcwz/tj.js"></script>
<div style="display:none"><script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?4b1ebb0298b66c8a109db070c4878833";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</div>
<!--foot star-->
<div class="footer">
<div class="m_box">
<div class="footer_in">
<a href="#" target="_blank">产品服务</a>
<a href="#" target="_blank">发展历程</a>
<a href="#" target="_blank">企业资讯</a>
<a href="#" target="_blank">企业文化</a>
<a href="#" target="_blank">关于我们</a>
<a href="#" target="_blank">加入我们</a>
<a href="#" target="_blank">联系我们</a>
<a href="#" target="_blank">网站导航</a>
<a href="#" target="_blank">网站律师</a>
</div>
<ul class="ftrlist">
<li>
<a rel="nofollow" href="https://www.itrust.org.cn" target="_blank">
<img src="https://js.51dongshi.com/tpl/pc2/images/footer_logo01.gif" alt="中国互联网协会"></a>
</li>
<li>
<a rel="nofollow" href="https://www.12377.cn/" target="_blank">
<img src="https://js.51dongshi.com/tpl/pc2/images/12377logo.png" alt="中国互联网举报中心"></a>
</li>
<li>
<a rel="nofollow" href="http://www.cyberpolice.cn/" target="_blank">
<img src="https://js.51dongshi.com/tpl/pc2/images/footer_logo05.gif" alt="网络110报警服务"></a>
</li>
<li>
<a rel="nofollow" href="http://www.creditchina.gov.cn/" target="_blank">
<img src="https://js.51dongshi.com/tpl/pc2/images/creditchina.gif" alt="信用中国"></a>
</li>
<li class="last">
<a rel="nofollow" href="http://www.shdf.gov.cn/shdf/channels/740.html" target="_blank">
<img src="https://js.51dongshi.com/tpl/pc2/images/footer_logo11.png" alt="中国扫黄打非网"><p>中国扫黄打非网</p>
</a>
</li>
</ul>
<div class="footer_co">
<a href="/" class="footlogo"><img src="https://js.51dongshi.com/tpl/pc2/images/logo_bottom.png" alt="懂视"></a>
<p>Copyright © 2019-2023 <a href="/" target="_blank">51dongshi.com</a> 版权所有</p>
<p>
<a rel="nofollow" target="_blank" href="https://beian.miit.gov.cn/">赣ICP备2023002352号-2</a>
</p>
<p>违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务</p>
</div>
</div>
</div>
<!--foot end-->
<a href="#0" class="cd-top">Top</a>
<script type="text/javascript">
$(function(){
var _line=parseInt($(window).height()/3);
$(window).scroll(function(){
if ($(window).scrollTop()>100) {
$('.edu_top').css({'position':'fixed','top':'0','z-index':'99'})
}else{
$('.edu_top').css({'position':'relative','top':'0'})
}
})
})
</script>
<script type="text/javascript" src="https://jss.51dongshi.com/ga/all.js"></script>
<div style="display:none">
<script type="text/javascript" src="https://s9.cnzz.com/z_stat.php?id=1278135046&web_id=1278135046"></script><script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?70ec0a2c78df5a4a3d49e475e943ceb6";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script>
(function(){
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script><script>
(function(){
var src = (document.location.protocol == "http:") ? "https://js.passport.qihucdn.com/11.0.1.js?d1f620a645f12a1c5b0bbce7b998d51e":"https://jspassport.ssl.qhimg.com/11.0.1.js?d1f620a645f12a1c5b0bbce7b998d51e";
document.write('<script src="' + src + '" id="sozz"><\/script>');
})();
</script></div>
</body>
</html>
