认识HTML5文档结构

最新推荐文章于 2023-08-10 08:28:03 发布

茫渡。

最新推荐文章于 2023-08-10 08:28:03 发布

阅读量286

点赞数

分类专栏：前端文章标签： html java python js javascript

本文链接：https://blog.csdn.net/density__/article/details/119831021

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在没有接触HTML5文档之前，相信很多人对XHETML文档结构比较熟悉，由于XHTML文档是HTML向XML规范过渡版本，其文档格式也基本按XML规范进行要求

必须为文档定义命名空间，其值为http://www.w3.org/1999/xhtml
MIME type不能是text/html,而是text/xml、application/xml或者application/xml+html
必须有根元素，根元素为,即的开始和结束标签不能省略
所有元素只要有了开始标签，就不能有结束标签，或者自闭合
所有元素都得严格遵守大小写，元素名称必须为小写

因此XHTML文档格式变得严格了许多，也因为XML,其可读性和规范性提高了不少。但最终，我们要在HTML的宽容性和xml的规范性之间找到最佳的平衡点，一味追求极端始终是一个错误
但是当问到一个HTML5文档必须有哪些内容时，恐怕很少有人能正确的做出回答，为了帮助读者更好地对HTML5页面有一个简单的理解和认识，也为了读者能够顺利读懂HTML5网页代码的准确意思，下面给出了一个详细的、符合标准的HTML5文档结构代码，并进行详细注释

<!DOCTYPE html>
<!--声明文档结构类型-->
<html lang=zh-cn>
<!--声明文档文字区域-->  
<head>
 <!--文档头部区域-->   
 <meta charset=utf-8>
 <!-- 文档的头部区域中元数据区的字符集定义，utf-8表示国际通用的字符集编码格式-->
 <!--[if IE]><![endif]-->
 <!--文档的头部区域兼容性写法-->
 <title>文档标题</title>
 <!--文档的头部区域的标题。title内容对于SEO来说及其重要-->
 <!--[if IE 9]><meta name=ie content=9><![endif]-->
 <!--文档的头部区域兼容性写法-->
 <!--[if IE 8]><meta name=ie content=8><![endif]-->
 <!--文档的头部区域兼容性写法-->
 <meta name=description content=文档描述信息>
 <!--文档的头部区域元素据区关于文档描述的定义-->
 <meta name=author content=文档作者>
 <!--文档头部区域元素据区关于开发人员姓名的定义-->
 <meta name=copyright content=版本信息>
 <!--文档头部区域元素据区关于版权的定义-->
 <link rel=shortcut icon herf=favicon.ico>
 <!--文档头部区域的兼容性写法-->
 <link rel=apple-touch-icon herf=custom_icon.png>
 <!--文档头部区域app设备的图标的引用-->
 <meta name=viewport content=width=device-width,user-scalable=no>
 <!--文档的头部区域对于不同接口设备的特殊声明。宽=设备款，用户不能自行缩放-->
 <link rel=stylesheet herf=main.css>
 <!--文档头部区域样式文件的引用-->
 <!--[if IE]><link rel=stylesheet herf=win-ie-all.css><![endif]-->
 <!--文档头部区域的兼容性样式文件引用写法-->
 <!--[if IE 7]><link rel=stylesheet type=text/css herf=win-ie7.css><![endif]-->
 <!--文档头部区域的IE7浏览器的兼容性写法-->
 <!--[if lt IE 8]><script src=http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js></script><![endif]-->
 <!--文档头部区域的关于让IE8也兼容HTML5的JavaScript脚本-->
 <script src=script.js></script>
 <!--文档的头部区域JavaScript脚本文件调用-->
</head>
<body>
    <header>HTML5文档的头部区域</header>
    <nav>HTML5文档的导航区域</nav>
    <section>HTML5文档的主要内容区域
        <aside>HTML5文档的主要内容区域的侧边导航或菜单区</aside>
        <article>HTML5文档的主要内容区域的内容区
             <section>以下是一个section和article的嵌套
                <aside></aside>
                <article>
                    <header>
                    HTML5文档的嵌套区域，可以对某个article区域进行头部和脚部的定义，这样做，可以有非常清晰和严谨的文档目录结构关系    
                    <footer>
                </article>
             </section>
        </article>
    </section>
    <footer>HTML5文档的脚部区域</footer>
</body>
</html>

当然，并不是每个HTML5文档都需要上面部分，一个最简单的HTML5文档需要的内容如下

<!DOCTYPE html>

该句声明了文档类型，除了大小写可以任意变化外，其他内容都是不能变动的，那么究竟时怎样的规则，导致一个最简单的源码文件必须有doctype声明呢？根据标准，一个HTML文档由如下内容组成（严格按照顺序）：

一个BOM标记，且这个BOM标记必须为U+FEFF
n个空格或注释
DOCTYPE声明
n个空格或注释
一个HTML元素
n个空格或注释

再回过来看一下文档组成，除了0-n个空格或注释这些没有多大意义的元素之外，组成的列表中还说明有一个HTML元素，但是最简单的源码却没有。这是因为在HTML的规范中，一直存在“隐式标签”这样的概念，关于隐式标签，大致可以这样解释：
一部分元素，当满足特定的前提条件时，其开始标签或结束标签可以在源码中省略，被省略的标签称为”隐式标签“

茫渡。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
认识HTML5文档结构

在没有接触HTML5文档之前，相信很多人对XHETML文档结构比较熟悉，由于XHTML文档是HTML向XML规范过渡版本，其文档格式也基本按XML规范进行要求必须为文档定义命名空间，其值为http://www.w3.org/1999/xhtmlMIME type不能是text/html,而是text/xml、application/xml或者application/xml+html必须有根元素，根元素为,即的开始和结束标签不能省略所有元素只要有了开始标签，就不能有结束标签，或者自闭合所有元素都得
复制链接

扫一扫