整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
HTML 标题（Heading）是通过<h1> - <h6>标签来定义的。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Web前端</title></head><body>
<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3></body></html>
HTML 段落是通过标签<p>来定义的。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Web前端</title></head><body>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p></body></html>
HTML 链接是通过标签<a>来定义的。
提示:在href属性中指定链接的地址。
<body>
<a href="https://www.ictliuxiao.com">这是一个链接</a></body></html>
HTML 图像是通过标签<img>来定义的。
注意： 图像的名称和尺寸是以属性的形式提供的。
<body>
<img src="images/one.png" /></body></html>
多复杂的网页都是由若干个区域构成的，在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，html的最新版本，定义了新的标签、css、JavaScript，html5新标签IE9以上版本浏览器才兼容，因此在实际开发中要问老板是否兼容低版本浏览器。
扩展内容：语义化标签、本地储存、兼容特性、2D 3D、动画 过渡、CSS3新特性、性能与集成
HTML5常用新标签：
HTML5标签多为语义化标签，主要是针对浏览器搜索引擎，IE9浏览器中主要将所有语义化标签都转化为块级元素，语义化标签在移动端支持比较好，后面会有更多语义化标签学习。
HTML5常用新标签：
datalist选项输入框:
此标签和input标签搭配可以实现input输入提示，注意：input标签中必须要有list属性，其值绑定的是datalist的id值，option标签中的value值不能为空，否则此功能失效。
<body>
<input type="text" value="输入科目" list="lis" >
<datalist id='lis'>
<option value="科目1"></option>
<option value="科目2"></option>
<option value="科目3"></option>
<option value="科目4"></option>
</datalist>
</body>fieldset表单元素分组:
此标签和legend标签搭配可以将表单内相关元素分组（外部用一个矩形的方框包裹）
<body>
<fieldset>
<legend>用户信息</legend> <!-- 矩形框边插入的文本信息,去掉此标签则为 封闭的矩形 -->
<input type="text" value="user"><br>
<input type="password" value="password">
</fieldset>
</body>html5中input标签的type属性新增属性值：
input中新增属性：
提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：810665436@qq.com联系笔者 删除。
笔者：苦海123
其它问题可通过以下方式联系本人咨询：
QQ：810665436
微信：ConstancyMan
*请认真填写需求信息，我们会在24小时内与您取得联系。
