AitSchool

结构标签

DOCTYPE

DOCTYPE 标签在这里就是指定HTML页面使用的版本和标准，让浏览器知道根据这个版本的标准来渲染，用于文档声明。

DTD（Document Type Definition）是一套为了进行程序间的数据交换而建立的关于标记符的语法规则。HTML的产生到现在经历了多个版本和标准，当时浏览器对各个版本支持不一致，有不兼容的地方。DTD在HTML及XML源文件中，通过一下语法包装在一个**!DOCTYPE**声明中：<!DOCTYPE 根元素 [元素声明]>。例如： HTML4.01 版本的DTD如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

早期的HTML版本是基于SGML, 因此需要套用SGML的解析规则。DTD的作用在于定义SGML文档的文档类型以便于浏览器解析。HTML5不再基于SGML, 因此不再需要DTD来触发不同的浏览器渲染模式。 HTML5 版本的文档声明简化为：

<!DOCTYPE html>

html

文档定义，用于告知浏览器这是一个html文档。里面一般包含head标签和body标签，用于区分分档的头部和主题部分。 如果在html根元素制定lang属性，为文档定义语言。有利语音及翻译工具确定所应遵循的规则。

<html lang="zh-CN">
    <head></head>
    <body></body>
</html>

文档头部，用于描述文档的各种属性和信息、及应用资源。里面一般会包含meta、title、link及script标签。

<head>
    <meta charset="utf-8">
    <title>浏览器标题</title>
    <link rel="stylesheet" type="text/css" href="xxx.css">
    <script type="text/javascript" src="xxx.js" ></script>
</head>

title

文档标题，设置了将出现在浏览器分页上显示

<title>浏览器标题</title>

meta

元信息，多用于设置文字编码、针对搜素引擎的描述和关键词，还有一些手机端的显示设置。

<!-- 编码格式 -->
<meta charset="utf-8">
<!-- 描述、关键字 -->
<meta name="keywords" content="关键字1,关键字2,关键字3,关键字4" />
<meta name="description" content="网页描述" />
<!-- 让IE开启最新浏览器内核渲染 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
<!--设置在手机上按照1:1缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
<!-- 针对苹果手机的信息设置 -->
<meta name="apple-mobile-web-app-capable" content="yes">            <!-- ios隐藏地址栏 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--顶部标题栏目颜色-->
<meta name="format-detection" content="telephone=no">               <!--手机号码默认为链接-->

body

文档内容，浏览器窗口展示的标签内容就在这里书写啦。

<body>
    <p>hello,world</p>
</body>

header、footer

header 标签用于将 HTML 页面的一部分标记为页眉。footer 标签将所包含的元素内容标记为文档的页脚。

<!DOCTYPE html> 
<html> 
<head> 
    <title> A Simple HTML Page </title> 
</head> 
<body> 
    <header>Header</header>
    <div id='content'>Content</div> 
    <footer>Footer</footer>
</body> 
</html>

nav 标签中包含的内容主要用于导航。并不是一定必须把所有链接组都要放入nav，把基本的、主要的即可。

<!DOCTYPE html> 
<html> 
<head> 
    <title> A Simple HTML Page </title> 
</head> 
<body> 
    <header>Header 
        <nav> 
            <a href='#'>Some Nav Link</a> 
            <a href='#'>Some Other Nav Link</a> 
            <a href='#'>A Third Nav Link</a> 
        </nav>
    </header>
    <div id='content'>Content</div>
    <footer>Footer</footer> 
</body> 
</html>

section

section 标签用于标识页面上的重要内容部分。该标签有点类似于将一本书分成几个章节。一个 section 通常由内容及其标题组成。但 section 并非一个普通的容器。当一个容器需要直接定义样式或通过脚本定义行为时，推荐使用div而非 section。

<!DOCTYPE html> 
<html> 
<head> 
    <title> A Simple HTML Page </title> 
</head> 
<body> 
    <header>Header</header>
    <div id='content'>
        <section> 
            <h2>the section title</h2>
            <p>This is an important section of the page. </p> 
        </section>
        <section> 
            <h2>the section title2</h2>
            <p>This is an other important section of the page. </p> 
        </section>
    </div>
    <div id='footer'>Footer</div> 
</body> 
</html>

article

article 标签标识了 Web 页面中的主要内容，代表文档、页面或者程序可以单独被外部引用的内容。以博客为例，每篇帖子都构成一个重要内容。除了内容部分，一个 article 通常有它自己的标题，也有自己的脚注。

<article>
    <header>
        <h1>标题一</h1>
        <p>发表日期：<time pubdata="pubdate">2017/11/11</time></p>
    </header>
    <div>
        <p>文章...</p>
    </div>
    <footer>
        <p>著作归属权 xxxx </p>
    </footer>
</article>

aside

aside 标签表示标签中包含的内容与页面主要内容相关，但不是该页面的一部分。这有点类似于使用括弧对正文进行注释（就像这样）。括弧中的内容提供关于该元素的一些附加信息。aside主要有以下两种使用方法：

  • 包含在 article 元素中作为主要内容的附属信息，其内容可以是与当前文章有关的参考资料、名称解释。
  • 在 article 之外的元素使用，作为页面或者站点全局的附录信息部分。最典型的形式是侧边栏，其中内容可以是友情链接、博客中其他文章列表或单元广告。
<aside>
    <p>友情链接</p>
    <ul>
        <li>...</li>
        <li>...</li>
    </ul>
</aside>

div

div元素 (或 HTML 文档分区元素) 是一个通用型的内容容器，它在语义上不代表任何特定类型的内容，它可以被用来对其它元素进行分组，一般用于样式化相关的需求（使用 class 或 id 特性) 或者对具有相同特性的一组元素进行分组 (比如 lang)，它应该在没有任何其它语义元素可用是才使用 (比如 article 或 nav) 。同是也是最常用的标签。

<div>
    <p>这里可以是任何内容，一切由你作主。</p>
</div>

← 文本标签 →