前言：
眼前小伙伴们对“html5article”大约比较看重，咱们都想要剖析一些“html5article”的相关内容。那么小编在网摘上收集了一些有关“html5article””的相关文章，希望姐妹们能喜欢，小伙伴们一起来学习一下吧！一 html5介绍
在编写html文档时,<!doctype>声明必须位于html5文档中的第一行:
<!doctype html>
字符编码(字符集)声明也被简化:
<meta charset="UTF-8">
html5中的默认字符编码是UTF-8
对于中文网页需要使用<meta charset="UTF-8">声明编码,否则会出现乱码.
html5中的一些新特性:
●用于绘画的canvas元素
●用于媒介回放的video和audio元素
●对本地离线存储的更好的支持
●新的特殊的内容元素.比如article,footer, header,nav,section
●新的表单控件.比如calendar,date,time,email,url,search
二 html 内容模型
html5中引入了很多的标记元素,根据内容类型的不同,这些元素被分成7大类:
●内联(Embedded)
●流(Flow>)
●标题(Heading)
●交互(Interactive)
●元数据(Metadata)
●短语(Phrasing)
●区段(Sectioning)
html内容类型旨在使标记结构对浏览器和网站设计者更有意义
元数据(Metadata):通常出现在页面的head中,设置页面其他部分的表现和行为.
元素:<base>,<link>,<meta>,<noscript>,<script>,<style>,<title>
内联(Embedded):在文档中添加其他类型的内容.
元素:<audio>,<video>,<canvas>,<iframe>,<img>,<math>,<object>,<svg>
交互(Interactive):与用户交互的内容.
元素:<a>,<audio>,<video>,<button>,<details>,<embed>,<iframe>,<img>,<input>,<label>,<object>,<select>,<textarea>
标题(Heading):定义段落标题
元素:<h1>,<h2,<h3>,<h4>,<h5>,<h6>,<hgroup>
短语(Phrasing):文本和文本标记元素
元素:<img>,<span>,<strong>,<label>,<br/>,<small>,<sub>等
相同的元素可以属于多个内容模型
流(Flow)内容:包含在文档正常流中的大多数html5元素
区段(Sectioning)内容:定义标题,内容,导航和页脚的范围
元素:<article>,<aside>,<nav>,<section>
流(Flow)包含了几乎所有的其他内容.
三 html页面结构
通用的html5页面结构如下图所示:
在编写html5文档时,你可能不需要其中的某些元素,具体取决于你的页面结构
四 header, nav&footer
在html4中,我们将定义一个这样的头:
<div id="header">
在html5中,我们使用简单的<header>标签
<header>标签定义了文档的头部区域
<header>元素适合在<body>标签内部使用
实例:
<!doctype html>
<html>
<head></head>
<body>
<header>
<h1>标题1</h1>
<h2>标题2</h2>
</header>
</body>
</html>
注意:<header>与<head>标签不同
在html5中,<footer>标签定义文档或者文档的一部分区域的页脚
文档的页脚:
<footer>
<p>Posted by:A ping</p>
</footer>
在典型情况下,<footer>元素会包含文档创作者的姓名,文档的版权信息,使用条款的链接,联系信息等等
在html5中,<nav>标签定义导航链接的部分
并不是所有的html文档都要使用到<nav>元素.<nav>元素只是作为标注一个导航链接的区域
一个导航链接的实例:
<nav>
<a href="/html/">HTML</a>
<a href="/css/">CSS</a>
<a href="/js/">JS</a>
<a href="/jquery">JQuery</a>
</nav>
运行效果如下:
一个通用的html5页面结构:
<body>
<header>
<nav>
<footer>
五 article,section&aside
在html5中,<article>标签定义独立的内容
<article>标签定义的内容本身必须是有意义的且必须是独立于文档的其余部分
<article>的潜在来源:
●论坛帖子
●博客文章
●新闻故事
●评论
实例：
<article>
<h1>文章标题</h1>
<p>文章元素的内容</p>
</article>
在html5中,<section>标签定义了文档的某个区域.比如章节,头部,底部或者文档的其他区域
实例:
文档的某个区域,解释了什么是W3C:
<section>
<h1>W3C</h1>
<p>World Wide Web Consortium(W3C)是万维网联盟...</p>
</section>
在html5中,<aside>标签定义<article>标签外的内容
aside的内容应该与附近的内容相关
实例:
<aside>
<h4>Epcot Center</h4>
<p>The Epcot Center is a theme park in Disney World,Florida</p>
</aside>
提示:<aside>的内容可用作文章的侧栏
标签： #html5article
