CSS课件HTML5语义化结构标签

学习目标领会HTML5的新特性，说出其技术层面八大类别的更新；理解语义化标签的含义；掌握<article><section><nav><aside>、<header><footer>等HTML5语义化结构标签的意义与使用方法。一、HTML5新特性1、进化非颠覆HTML5一个核心理念就是保持一切新特性与原有功能保持平滑过渡，但把原来代码重复率很高的功能提取为HTML5新标签。从技术层面还带来了8大类别更新。一、HTML5新特性1、进化非颠覆1）语义特性HTML5增加了新的内容标签，这些标签带有一定的语义，使搜索引擎爬取网站信息更高效。一、HTML5新特性1、进化非颠覆2）本地存储特性（OFFLINE&STORAGE）HTML5提供了网页存储的API，方便Web应用的离线使用。一、HTML5新特性1、进化非颠覆3）设备访问特性(DEVICEACCESS)包含地理位置API，媒体访问API，访问联系人及事件，设备方向。一、HTML5新特性1、进化非颠覆4）连接特性（CONNECTIVITY）增强了聊天程序的实时性和网络游戏的顺畅性。一、HTML5新特性1、进化非颠覆5）网页多媒体特性(MULTIMEDIA)6）三维、图形及特效特性（3D,Graphics&Effects）7）性能与集成特性（Performance&Integration）8）呈现（CSS3）一、HTML5新特性2、化繁为简1）简化了DOCTYPE和字符集声明；2）强化了HTML5API；3）以浏览器的原生能力代替复杂的JavaScript代码；4）精确定义的错误恢复机制。一、HTML5新特性3、良好的用户体验1）在遇到冲突时，规范的优先级为：用户〉页面作者〉实现者（浏览器）〉规范开发者（W3C/WHATWG）〉纯理论。2）HTML5还引入了一种新的安全模型来保证HTML5足够安全。3）各个浏览器对HTML5的支持都在不断完善中，目前，Chrome对HTML5的支持最好。二、HTML5语义化结构标签1、为什么HTML5要引入新语义标签所谓语义化标签就是一种仅通过标签名就能判断出该标签内容的语义的标签。2、引入语义化标签的优点比<div>标签有更加丰富的含义搜索引擎能更方便的识别页面的每个部分方便其他设备解析二、HTML5语义化结构标签3、标签详解

1）header二、HTML5语义化结构标签通常被放置在页面或者页面中某个区块元素的顶部，包含整个页面或者区块的标题、简介、搜索表单、logo图片、<nav>等信息。<header><imgsrc="images/logo.png"alt="**科技"/><h1>**信息科技有限公司</h1></header>一个文档中可以包含一对或者一对以上的<header>标签。标签的位置是次要的，不一定非要显示在页面的上方，可以为任何需要的区块标签添加<header>元素3、标签详解

2）nav二、HTML5语义化结构标签表示页面的导航，可以通过导航连接到网站的其他页面，或者当前页面的其它部分。<header><nav>

<ul>

<li><ahref="#">首页</a></li><li><ahref="example.html">客户案例</a></li><li><ahref="service_one.html">技术服务</a></li><li><ahref="connection.html">联系我们</a></li></ul></nav></header>根据HTML5标准，<nav>标签只用于页面的主要导航部分。将主要的，基本的链接组放进<nav>即可,对于有辅助性的页脚链接则不推荐使用<nav>标签。3、标签详解

3）article二、HTML5语义化结构标签表示包含于一个文档、页面、应用程序或网站中的一段独立的内容，可以被独立的发布或者重新使用文章标记标签。<article><h1>HTML5学习之语义化标签</h1><p>....正文.....</p><footer>版权所有*伪版必究</footer></article>一个<article>元素包括标题、正文和脚注。<article>标签还可以嵌套使用，但是它们必须是部分与整体的关系。3、标签详解

4）aside二、HTML5语义化结构标签用来定义当前页面或者文章的附属信息部分。<article><h1>HTML5学习之语义化标签</h1><p>....正文.....</p><aside><h2>什么是语义化标签</h2><p>语义化标签就是......</p></aside></article>被包含在<article>元素内，则作为主要内容的附属信息。在<article>元素之外使用，作为页面或者站点全局的附属信息部分。通常是文章的侧边栏、广告、友情链接等区域。3、标签详解

5）section二、HTML5语义化结构标签是一个主题性的内容分组，通常用于对页面进行分块或者对文章等进行分段；<section>通常包含一个头部<header>、可能还会包含一个尾部<footer>。<article><h1>JavaScript框架</h1><p>Javascript框架是指以Javascript语言为基础搭建的编程框架。</p><section><h2>angular.Js<h2><p>angular.Js是一款优秀的前端JS框架</p></section><section><h2>Vue.js<h2><p>Vue.js是用于构建交互式的Web界面的库</p></section><section><h2>jQuery<h2><p>jQuery是一个快速、简洁的JavaScript框架。</p></section></article><section>标签所包裹的是有一组相似的主题的内容，可以用这个标签来实现文章的章节、标签式对话框中的各种标签页等类似的功能。3、标签详解

6）footer二、HTML5语义化结构标签一般被放置在页面或者页面中某个区块的底部，包含版权信息、联系方式等信