您好，欢迎来到一二三四网。
科技 教育 生活 旅游 时尚 美容 美食 健康 体育 游戏 汽车 家电
搜索
您的当前位置：首页HTML骨架结构_html/css

HTML骨架结构_html/css

来源：一二三四网


目录

[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>　　　【2】base标签</p> <p> 　　　　　为页面上所有链接规定默认地址和默认打开方式</p> <p class="sycode"> <pre class="precsshui"><base href="http://baidu.com" target="_blank"></pre> </p> <p>　　</p> <p>　　【3】link标签</p> <p>　　　　【a】引入图标</p> <p class="sycode"> <pre class="precsshui"></pre> </p> <p>　　　　【b】引入外部CSS样式表 </p> <p class="sycode"> <pre class="precsshui"></pre> </p> <p>　　【4】style标签和script标签</p> <p>　　　　【a】引入内部CSS样式</p> <p class="sycode"> <pre class="precsshui"><style>　　body{background-color: red;}</style></pre> </p> <p>　　　　【b】引入javascript </p> <p class="sycode"> <pre class="precsshui">document.onclick = function(){　　alert('hello world;')}</pre> </p> <p>　　【5】meta标签</p> <p>　　　　【a】字符编码，文档的编码一定要与文件本身的编码保持一致，否则会出现乱码，推荐使用UTF-8编码</p> <p class="sycode"> <pre class="precsshui"><meta charset="utf-8"/></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" /></pre> </p> <p>　　　　【c】作者、版权</p> <p class="sycode"> <pre class="precsshui"><meta name="author" content="littlematch"><meta name="copyright" content=""></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"></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"> </pre> </p> <p>　　　　【f】缓存</p> <p class="sycode"> <pre class="precsshui"><meta http-equiv="Pragma" Content="No-cach">(禁止缓存，访问者无法脱机浏览)</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=/"></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" /></pre> </p> <h2>文档主体<body></h2> <p>　　真正可以在页面上看到的内容</p> <p> 　　【常用标签】</p> <p class="sycode"> <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></pre> </p> <p> 　　　[注意]在HTML5标准下，哪些标签可以使用，哪些标签不可以使用，请移步HTML元素和有效的DTD 




                <script type="text/javascript" src="https://jss.huatuo6.com/pc/wenzhang/detail_dy.js"></script>
            <script type="text/javascript" src="https://jss.howto1234.net/pc/wenzhang/detail_left.js"></script>
            </div>
            <div class="glfra_f">
                
                
            </div>
        </div>
        <script type="text/javascript" src="https://jss.howto1234.net/pc/wenzhang/wenzhang/detail_foot.js"></script>
        
                <script type="text/javascript" src="https://jss.howto1234.net/pc/share_right_gg1.js"></script>
        <script type="text/javascript" src="https://jss.huatuo6.com/pc/share_right_xgzx.js"></script>
        <script type="text/javascript" src="https://jss.howto1234.net/pc/share_right_gg2.js"></script>
        <script type="text/javascript" src="https://jss.huatuo6.com/pc/share_right_rmyd.js"></script>
    </div>
    <div class="n_right">
    <script type="text/javascript" src="https://jss.howto1234.net/pc/share_cebian_gg1.js"></script>
    <script type="text/javascript" src="https://jss.huatuo6.com/pc/share_cebian_rmht.js"></script>
    <script type="text/javascript" src="https://jss.howto1234.net/pc/share_cebian_gg2.js"></script>
    <script type="text/javascript" src="https://jss.huatuo6.com/pc/share_cebian_rmtw.js"></script>
    <script type="text/javascript" src="https://jss.howto1234.net/pc/share_cebian_gg3.js"></script>
    <script type="text/javascript" src="https://jss.huatuo6.com/pc/share_cebian_wntj.js"></script>
    </div>
</div>
<script type="text/javascript" src="https://jss.huatuo6.com/pc/tj_foot4.js"></script><div class="foot">
    <div class="smain">
        <div class="foot_ano clearfix">
            <!-- <div class="foot_logo">
                <img src="images/logo_w.png" alt="AI游中国" />
            </div> -->
            <div class="foot_mesg">
                <p>
                    Copyright © 2019-<span class="currentYear"></span> howto1234.net 版权所有                 </p>
                <p>
                    违法及侵权请联系：TEL:199 18 7713 E-MAIL:2724546146@qq.com
                </p>
                <p>
                    本站由北京市万商天勤律师事务所王兴未律师提供法律服务
                </p>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    const currentYear = new Date().getFullYear();
$('.currentYear').html(currentYear)
</script>