HTML5中新的结构元素
1、 HTML5初始文件
1.1、doctype
在之前，doctype的声明是这样的：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//en" "http://www.w3. org/TR/html4/strict.dtd">
doctype称作文档类型声明（Document Type Definition），它总是作为HTML文件的第一行。doctype是WEB标准要求的一部分，用来告诉浏览器如何处理文档，这也是将其放在HTML文件第一行的原因所在。
如果不写doctype，浏览器就进入怪异模式（quirks mode），那么你编写的代码在某些浏览器下无法正常运行。
现在，HTML5提供了一个更简洁的标准文档声明：
<!DOCTYPE html>
1.2、字符编码
在head标记中的第一行需要包含的是charset（字符集）声明，它告诉浏览器应该如何解析这个文件。
在HTML4中，声明字符集需要这样做：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
现在，在HTML中，只需声明charset即可：
<meta charset="utf-8">
和doctype声明一样简洁！
1.3、JavaScript 与 css 链接
HTML5有助于降低页面中的大量标记（markup），还可以简化JavaScript与css的调用。
在HTML4中，script与link元素需要使用type属性：
<script type="text/javascript" src="xx.js"></script>
<link rel="stylesheet" type="text/css" href="xx.css" />
在HTML5中，简化如下：
<script src="xx.js"></script>
<link rel="stylesheet" href="xx.css" />
在HTML5中，浏览器已经假设script是JavaScript文件，link是css文件了，所以，不写type属性也没问题。
1.4、语法编写风格
在HTML5中，可以使用多种编码风格：
可以全部大写：
<SCRIPT SRC="XX.JS"></SCRIPT>
可以全部小写：
<script src="xx.js"></script>
可以不用引号
<script src=xx.js></script>
也可以混合使用
<SCRIPT src=xx.js></script>
虽然这些都可以使用，但是强烈建议使用前后一致的编码规范。这样不仅对你有帮助，而且对打算使用你代码的人来说，也大有益处。我们都曾用过XHTML，应该做到闭合所有标记、使用小写字母、对于属性要用引号括起来。
一个完成的HTML5初始页面结构为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--新HTML元素区域-->
</body>
</html>
将页面保存为.html（或.htm）文件。
1.5、HTML5验证
验证是一个很有用的工具，它可以检查事情可能出错的原因，在开发过程中是很重要的一个步骤。可以参考如下网站来验证你的页面与HTML5的一致性：
2、HTML5新元素
header、hgroup、nav、footer、article、section、aside，这些新的结构元素是为了告诉浏览器，页面具有什么样的结构，以及内容具有什么样的语义，这些名字从何而来呢？
2005年，Google分析了10亿多个Web页面，并找到了开发人员和web作者常用的类名。这也使Ian Hickson ——HTML5主规范的编辑——开始考虑这些新的元素。
以下是当时最流行的20个类名：
footer menu title small text content header nav copyright button main search msonormal date smalltext body style1 top white link
有些类名供显示使用（比如white、style1、msonormal），而其他类名则构成了HTML5规范中的元素（footer、nav、header）。
为什么要使用这些新的元素呢？HTML5让你可以为自己的内容提供语义。
2.1 header
header元素经常出现在Web页面的最上端。经常包含logo、网站名称、网站导航等信息，它可以在一个页面中多次使用。
<header>
<img alt="my site logo" src="logo.png" />
<h1><a href="#">Index</a></h1>
</header>
HTML5规范提到，header元素可以包含导航。每个网页没有限制只能使用一个header元素，也没有要求header必须在页面最顶部。
<article>
<header>
<h1>Chapter 1</h1>
<p>11.1</p>
</header>
<p>some words</p>
</article>
<article>
<header>
<h1>Chapter 1</h1>
<p>11.1</p>
</header>
<p>some words</p>
</article>
如果header中只有一个标题（h1-6），就没有必要使用header了，直接使用h1-6就足够了。
2.2 hgroup
该标签在HTML5.1中已经废弃。
2.3 nav
顾名思义，nav元素的作用就是提供导航。它用于链接到网站内的其他页面，或者是链接到一个页面的其他部分。
很多情况下，开发者都使用无序列表编写导航：
<ul id="nav">
<li><a href="#">Index</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
</ul>
在HTML5中，创建nav元素时，没有太大改变：
<nav>
<ul id="nav">
<li><a href="#">Index</a></li>
<li><a href="#">About</a></li>
<li><a href="#">News</a></li>
</ul>
</nav>
也可以把nav元素放到header中，原因是header元素允许出现介绍性内容和导航内容。
<header>
<h1>Title</h1>
<nav>
<li>Index</li>
</nav>
</header>
使用nav元素可以有效提升可访问性。屏幕阅读器之类的辅助技术能够搜索并立即使用这些导航组，而不需要等待页面全部加载完毕。
2.4 article
article元素是一个独立的内容块，它可以独立存在，也可以被重用。RSS订阅的内容就非常具有代表性。
HTML5规范给出了一些如何使用article元素的示例：论坛的帖子，杂志或新闻的文章、一篇博文或用户提交的评论。
<article>
<header>
<h1>新年大事记</h1>
<p>12.01.01</p>
</header>
<p>一个段落</p>
<p>一个段落</p>
</article>
HTML5规范讲到，article代表“内容独立的某个部分”，甚至博客评论内容也可以用它来表示。
2.5 section 对内容分组
section元素是一个总是需要标题的内容区域或页面区域。可以用它将多个部分的内容组合在一起，也可以根据需要，将内容的某一个部分进一步划分。
它不可用作通用封装器来实现样式上的需求
section元素可以包含article，并且article元素也可以继续将内容分割成几个section。
<h1>News</h1>
<section>
<h1>运动新闻</h1>
<p>小标题</p>
<section>
<section>
<h1>财经新闻</h1>
<p>小标题</p>
<section>
<section>
<h1>娱乐新闻</h1>
<p>小标题</p>
<section>
</h1>
article与section的选择
目前来看，section与div的使用方式很像，但是与div不一样的是，section具有语义，它是一组相关内容的组合。
section中可以包含article，就像新闻页面，有一个新闻版块，在该版块中又有不同类别的新闻。
如果你认为这部分内容具有独立的意义，那么就应当使用article标记。
HTML5规范中讲到：强烈建议开发人员将div元素视为最后求助的元素，也就是说在没有其他元素合适的情况下才求助于它。
div元素并不承载任何特殊的语义。如果使用了section，它会添加到文档大纲中，表明是重要的，相反，div不能添加到大纲中，如果section只用来设置样式，则最好使用div。
2.6 aside
aside标记表示跟周围内容紧密关联的一组内容，比如热门文章列表、博文分类、最近评论。这种内容与主页内容相关，但由于它相独立存在。
要想正确使用aside，取决于它的位置。
- 放到article中，aside的内容必须与article内容紧密关联，比如词汇表
放到article或section外，则它的内容应该与整个页面相关的，比如相关链接、广告等
<aside>
<h2>相关链接</h2>
<nav>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</nav>
</aside>
2.7 footer
顾名思义，footer元素常位于页面的底部。但也并非如此，footer元素旨在包含作者、网站所有者、版权数据、网站规章制度等信息。如果它位于section或article中，则包含文章发布的日期、标记、分类和其他元数据。
<footer>
<small>© Copyright 2016-2017</small>
<footer>
HTML5规范中讲到，footer元素可以包含指向相关文档的链接，也可以包含其他链接，比如“上一篇文章”、“下一篇文章”链接等。
2.8 使用HTML5大纲工具验证结构
工具：https://gsnedders.html5.org/outliner/
HTML5中新的结构元素的更多相关文章
-
HTML5的新的结构元素介绍
HTML5的新的结构元素介绍 一.HTML5与HTML4的区别 1. 取消了一些过时的HTML4的标签 其中包括纯粹显示效果的标记,如<font>和<center>,它们已经被 ...
-
读书笔记：《HTML5开发手册》--HTML5新的结构元素
读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...
-
html5中的网页结构
一.html5中的大纲 在html5中,使用各种结构元素所描述出来的整个网页的层次结构,就是该网页的大纲.因此在组织这份大纲的时候,不能使用div元素,因为div元素只能当做容器,用在需要对网页中某个 ...
-
HTML5中新添加事件
HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...
-
html5新增的主题结构元素
article元素 article元素代表文档.页面或应用程序中独立的.完整的.可以独自被外部引用的内容. 它可以是一篇博客或者报刊中的文章,一篇论坛帖子.一段用户评论或独立的插件. 或其他任何独立的 ...
-
html5中不再支持的元素
html5中不再支持的元素:1.acronym(建议abbr) : 定义首字母缩写2.applet(建议object): 定义 applet3.basefont(使用css控制)4.big(使用css ...
-
html5中的fieldset/legend元素和keygen元素
html5中的fieldset/legend元素和keygen元素 一.总结 一句话总结: fieldset/legend元素和figure和figcaption很像,只不过是作用于表单,前者表示内容 ...
-
HTML5中新增加的结构元素、网页元素和全局属性
HTML5新增的结构元素(新增的都是块元素,独占一行) 1) header 定义了文档的头部区域 <header> <h1>网站标题<h1> </header ...
-
HTML5中已经不支持元素汇总，持续更新
HTML5中已经不支持以下的元素,不建议在进行开发时再使用以下的元素. 1.acronym(建议abbr) : 定义首字母缩写 2.applet(建议object): 定义 applet 3.bas ...
随机推荐
-
时光煮雨 Unity3d 序列目标点的移动①
系列目录 [Unity3D基础]让物体动起来①--基于UGUI的鼠标点击移动 [Unity3D基础]让物体动起来②--UGUI鼠标点击逐帧移动 时光煮雨 Unity3D让物体动起来③—UGUI DoT ...
-
面试题-->;写一个函数，返回一个数组中所有元素被第一个元素除的结果
package com.rui.test; import java.util.Random; /** * @author poseidon * @version 1.0 * @date:2015年10 ...
-
Yii里表单的操作方法（展示渲染待续......）
<?php$form=\yii\widgets\ActiveForm::begin(['action'=>\yii\helpers\Url::to('name/create')]);ech ...
-
DP:Corn Fields（POJ 3254）
北大教你如何高效养牛(误)(点我查看) 2015-08-21: 问题的大意就是有一片稻田,里面有很多坑,你要在上面种稻谷,然后呢田里面还会养牛,牛不喜欢扎堆吃饭,所以呢你种的稻谷要间隔种在坑里面,所 ...
-
玩转Android Camera开发(一):Surfaceview预览Camera,基础拍照功能完整demo
杂家前文是在2012年的除夕之夜仓促完成,后来很多人指出了一些问题,琐事缠身一直没有进行升级.后来随着我自己的使用,越来越发现不出个升级版的demo是不行了.有时候就连我自己用这个demo测一些性能. ...
-
elFinder的使用并整合ckeditor
具体实现访问: 白乔大神资源:https://github.com/bluejoe2008/elfinder-2.x-servlet 本人oschina的库:https://git.oschina.n ...
-
iOS开发：视图生命周期
iOS应用的视图状态分为以下几种 在viewcontroller的父类UIViewController中可以看到如下代码,通过重写不同的方法对操作视图渲染. @available(iOS 2.0, * ...
-
Sleep的问题
先上全部源码: using System; using System.Threading; namespace MoveServices { public static class MoveWorke ...
-
关于jsp页面转换成excel格式下载遇到问题及解决
jsp页面转成excel格式的实现思路: 1.使用poi包:poi-bin-3.9-20121203 下载连接地址:http://www.apache.org/dyn/closer.cgi/poi/r ...
-
mysql 合并left join 数据条目
查询两张关联表信息,原sql: SELECT * FROM car_life_info c left JOIN shop_label sl ON c.shop_id = sl.shop_id 出现 ...