整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
谓语义化就是一看就知道是做什么的。以前布局只有div,span,ul,li等，div，span对于搜索引擎来说是不具有语义的。
新增的布局类标签，更加具有语义性：
<div class='header'></div>
<div class='nav'></div>
<div class='content'></div>
<div class='footer'></div>
w3c 手册中文官网 : http://w3school.com.cn/
<header>头部标签：定义文档的页眉</header>
<nav>导航标签：定义导航链接的部分</nav>
<article>内容标签：标签规定独立的自包含内容</article>
<section>块级标签：定义文档中的节、区段</section>
<aside>侧边栏标签：定义其所处内容之外的内容</aside>
<footer>底部标签：定义文档或节的页脚</footer>
<input type="text" value="输入水果名称" list="star"/> <!-- input里面用 list -->
<datalist id="star"> <!-- datalist 里面用 id 来实现和 input 链接 -->
<option>Apple</option>
<option>Banana</option>
<option>Orange</option>
<option>Grape</option>
<option>Pear</option>
</datalist>
<fieldset>
<legend>用户登录</legend>
用户名: <input type="text"><br /><br />
密 码: <input type="password">
</fieldset>
多复杂的网页都是由若干个区域构成的，在HTML5中，为了使网页的文档结构更加清晰明了，新增了页眉、内容、页脚等与文档结构相关的主体结构元素。在本次的教学中，我们就来学习HTML5元素中新增的主体结构的一些方法和演示案例。
1.nav元素
nav元素用于定义导航链接的内容，可以作为页面导航的链接组，其中的导航元素链接到其他页面或者当前页面的其他部分，使HTML代码的语义化方面更加精准，同时对于屏幕阅读器等设备的支持也更好。
在html5之前，通常情况下我们会使用＜div＞元素或者＜ul id="nav"＞这样的代码来表示页面的导航，而在HTML5中，我们可以直接将导航链接列表放在＜nav＞元素中，比如下面这个例子：
HTML5中的nav元素
nav元素在网页中有着非常重要的作用，比如网页顶部的导航条，其作用是在多个页面间进行跳转链接；网页侧边栏导航，其作用是从当前页面跳转到其他页面；网页内页导航，其作用是在一个网页中的多个主要部分进行跳转；翻页导航，其作用是在多个网页间实现实现前后页滚动。
2.time元素
time即时间，该元素用于定义日期和时间。由于时区的问题，网页上显示的时间如果处理不好，就会让人产生歧义，比如应该是上午9点15分，却显示成下午22点30分。为了在网页上能准确低显示时间，让所有人都不会产生歧义，因此HTML5新增了time元素。time元素可以表示带时区的时间，还可以定义多种格式的日期和时间，代码和效果如图所示：
HTML5中的time元素
3.article元素
article元素用于定义外部的内容，可以是一篇新的文章、一篇博文、一个帖子、一段评论等等，还可以是来自其他外部源的内容。一个article元素可以有它自己的标题、内容和脚注，还可以与其他的article元素嵌套使用。演例代码如下图所示：
HTML5中的article元素
在这段代码中，header元素中嵌入了文章的标题部分，p元素嵌入了文章的正文，嵌套的article元素又引用了另外一篇文章，最后在结尾处，footer元素嵌入了一下版权信息。
4.section元素
section元素定义文档中的节，比如章节、页眉、页脚或文档中的其他部分。一个section元素通常由内容及其标题组成。代码演示如下图：
HTML5中的section元素
在这段代码中，＜h1＞元素嵌入了这段文字的标题，＜p＞元素嵌入了这段文字的正文，标题和正文构成了文档内容一个独立的块，这个快使用section元素表示。
section元素用于表示文章的段，是一个独立的块，而article元素用于表示文章外部的内容，虽然它也是独立的，请不要把这两者相混淆。比如要在一篇文章中如果需要引用另一篇文章的某些段落时，其代码如下图所示：
HTML5中的section元素
在比如你要在一个段落中引用一篇文章时，其代码如下图：
HTML5中的section元素
5.aside元素
aside元素用来定义article元素以外的内容，其内容应该与article的内容相关。这样的情况在生活中很常见，像文章中的名词解释。名词解释作为文章中的一部分，其内容与文章相关，所以这种情况下就可以使用aside元素。其代码和效果如下图所示：
HTML5中的aside元素
HTML5中的aside元素
另外，aside元素的内容还可以用作文章的侧栏，其内容作为文章的附属信息。例如nav元素导航作为aside元素的内容，这样就实现了一个侧边栏导航条。代码及效果图如下：
HTML5中的aside元素
HTML5中的aside元素
这些元素就是HTML5元素中新增的主体结构了。我们在学习这些代码的时候一定要勤加练习，这样才能够记住它们。下一期我们介绍HTML5元素中新增的非主体结构。了解更多动态资讯请加我们的官方微信号：pyyuanxing。谢谢大家的观看，祝大家生活愉快、身体健康。
天发了一篇干货，似乎没人看，好吧，我们来说说技术吧。
HTML5专题是随性更新，不一定每天更新这个专题。
一个HTML5文档的最简单结构是：
结构
相比常规的html更为精简
<header><section><footer><nav><article><aside>
1、页眉header、整个页面的头部
2、正文article、博文或者新闻的展现
3、页脚footer、一般用于呈现页面底部的相关信息，可以放在body最下面，也可以放在article的最下面，只要记住它的作用是呈现其他信息，且不能相互嵌套
4、导航nav、可以出现在header，也可以出现在footer，也可以出现在section，只要保证语义化，即用作导航功能，如配合footer就可以表示为如下形式
5、侧边栏aside、用于页面上一些与主题联系不大而相对独立的区域，通常用于边栏，例如展示以下内容：快速链接、最多访问、登录注册等
6、文档中的节section、通常表示一段专题性的内容，一般会带有标题，应用的典型场景有文章的章节、标签对话框中的标签页、或者论文中有编号的部分，section可以说语义化强于div，但是弱于article，也可以这么说吧，article标签是特殊的section，section是特殊的div，语义递减。对于 section 和 article 的区分乍看比较难，其实重点就是看看这段内容脱离了整体是不是还能作为一个完整的、独立的内容而存在，这里面的重点又在完整身上。因为其实说起来 section 包含的内容也能算作独立的一块，但是它只能算是组成整体的一部分，article 才是一个完整的整体。
那么section所用到的结构可以如下几种形式：
①
②
通过上面可以看出，section可以应用的场景很多，但是需要注意的就是保证语义化。
通过第三点所列出的标签，可以对网站的大纲做一个总结，并不代表正确的大纲就是如此，但是可以起到借鉴作用。
当然了，页面结构的设计完全取决于开发人员，但是为了更好的体现HTML5的语义化原则，清楚的认识每个标签所代表的语义就很重要，这里所列出的文档结构只是一种代表，在<section>里面可以包含更多的新的标签，诸如<figure><video><hgroup>等，都需要根据需求来确定。
对于使用不支持HTML5的浏览器的用户，同样有解决的办法：
可以在<head></head>内部以注释的形式(这样的注释只对IE(包括那些国产的IE内核的浏览器)有效)引用这样一个js，它托管在Google开源服务器上，它可以让IE8及以下版本的ie也支持那些新的html5标签(包括IE6).
以上全部还必须使用CSS形成自己的样式，所谓语义，仅仅是开发人员在查看的页面的时候可以很清晰的知道页面结构，何处为头部何处为内容。
更多前端小知识，尽在https://blog.imcyk.com
*请认真填写需求信息，我们会在24小时内与您取得联系。
