CSS課件HTML5語義化結(jié)構(gòu)標(biāo)簽

學(xué)習(xí)目標(biāo)領(lǐng)會HTML5的新特性，說出其技術(shù)層面八大類別的更新；理解語義化標(biāo)簽的含義；掌握<article><section><nav><aside>、<header><footer>等HTML5語義化結(jié)構(gòu)標(biāo)簽的意義與使用方法。一、HTML5新特性1、進(jìn)化非顛覆HTML5一個(gè)核心理念就是保持一切新特性與原有功能保持平滑過渡，但把原來代碼重復(fù)率很高的功能提取為HTML5新標(biāo)簽。從技術(shù)層面還帶來了8大類別更新。一、HTML5新特性1、進(jìn)化非顛覆1）語義特性HTML5增加了新的內(nèi)容標(biāo)簽，這些標(biāo)簽帶有一定的語義，使搜索引擎爬取網(wǎng)站信息更高效。一、HTML5新特性1、進(jìn)化非顛覆2）本地存儲特性（OFFLINE&STORAGE）HTML5提供了網(wǎng)頁存儲的API，方便Web應(yīng)用的離線使用。一、HTML5新特性1、進(jìn)化非顛覆3）設(shè)備訪問特性(DEVICEACCESS)包含地理位置API，媒體訪問API，訪問聯(lián)系人及事件，設(shè)備方向。一、HTML5新特性1、進(jìn)化非顛覆4）連接特性（CONNECTIVITY）增強(qiáng)了聊天程序的實(shí)時(shí)性和網(wǎng)絡(luò)游戲的順暢性。一、HTML5新特性1、進(jìn)化非顛覆5）網(wǎng)頁多媒體特性(MULTIMEDIA)6）三維、圖形及特效特性（3D,Graphics&Effects）7）性能與集成特性（Performance&Integration）8）呈現(xiàn)（CSS3）一、HTML5新特性2、化繁為簡1）簡化了DOCTYPE和字符集聲明；2）強(qiáng)化了HTML5API；3）以瀏覽器的原生能力代替復(fù)雜的JavaScript代碼；4）精確定義的錯(cuò)誤恢復(fù)機(jī)制。一、HTML5新特性3、良好的用戶體驗(yàn)1）在遇到?jīng)_突時(shí)，規(guī)范的優(yōu)先級為：用戶〉頁面作者〉實(shí)現(xiàn)者（瀏覽器）〉規(guī)范開發(fā)者（W3C/WHATWG）〉純理論。2）HTML5還引入了一種新的安全模型來保證HTML5足夠安全。3）各個(gè)瀏覽器對HTML5的支持都在不斷完善中，目前，Chrome對HTML5的支持最好。二、HTML5語義化結(jié)構(gòu)標(biāo)簽1、為什么HTML5要引入新語義標(biāo)簽所謂語義化標(biāo)簽就是一種僅通過標(biāo)簽名就能判斷出該標(biāo)簽內(nèi)容的語義的標(biāo)簽。2、引入語義化標(biāo)簽的優(yōu)點(diǎn)比<div>標(biāo)簽有更加豐富的含義搜索引擎能更方便的識別頁面的每個(gè)部分方便其他設(shè)備解析二、HTML5語義化結(jié)構(gòu)標(biāo)簽3、標(biāo)簽詳解

1）header二、HTML5語義化結(jié)構(gòu)標(biāo)簽通常被放置在頁面或者頁面中某個(gè)區(qū)塊元素的頂部，包含整個(gè)頁面或者區(qū)塊的標(biāo)題、簡介、搜索表單、logo圖片、<nav>等信息。<header><imgsrc="images/logo.png"alt="**科技"/><h1>**信息科技有限公司</h1></header>一個(gè)文檔中可以包含一對或者一對以上的<header>標(biāo)簽。標(biāo)簽的位置是次要的，不一定非要顯示在頁面的上方，可以為任何需要的區(qū)塊標(biāo)簽添加<header>元素3、標(biāo)簽詳解

2）nav二、HTML5語義化結(jié)構(gòu)標(biāo)簽表示頁面的導(dǎo)航，可以通過導(dǎo)航連接到網(wǎng)站的其他頁面，或者當(dāng)前頁面的其它部分。<header><nav>

<ul>

<li><ahref="#">首頁</a></li><li><ahref="example.html">客戶案例</a></li><li><ahref="service_one.html">技術(shù)服務(wù)</a></li><li><ahref="connection.html">聯(lián)系我們</a></li></ul></nav></header>根據(jù)HTML5標(biāo)準(zhǔn)，<nav>標(biāo)簽只用于頁面的主要導(dǎo)航部分。將主要的，基本的鏈接組放進(jìn)<nav>即可,對于有輔助性的頁腳鏈接則不推薦使用<nav>標(biāo)簽。3、標(biāo)簽詳解

3）article二、HTML5語義化結(jié)構(gòu)標(biāo)簽表示包含于一個(gè)文檔、頁面、應(yīng)用程序或網(wǎng)站中的一段獨(dú)立的內(nèi)容，可以被獨(dú)立的發(fā)布或者重新使用文章標(biāo)記標(biāo)簽。<article><h1>HTML5學(xué)習(xí)之語義化標(biāo)簽</h1><p>....正文.....</p><footer>版權(quán)所有*偽版必究</footer></article>一個(gè)<article>元素包括標(biāo)題、正文和腳注。<article>標(biāo)簽還可以嵌套使用，但是它們必須是部分與整體的關(guān)系。3、標(biāo)簽詳解

4）aside二、HTML5語義化結(jié)構(gòu)標(biāo)簽用來定義當(dāng)前頁面或者文章的附屬信息部分。<article><h1>HTML5學(xué)習(xí)之語義化標(biāo)簽</h1><p>....正文.....</p><aside><h2>什么是語義化標(biāo)簽</h2><p>語義化標(biāo)簽就是......</p></aside></article>被包含在<article>元素內(nèi)，則作為主要內(nèi)容的附屬信息。在<article>元素之外使用，作為頁面或者站點(diǎn)全局的附屬信息部分。通常是文章的側(cè)邊欄、廣告、友情鏈接等區(qū)域。3、標(biāo)簽詳解

5）section二、HTML5語義化結(jié)構(gòu)標(biāo)簽是一個(gè)主題性的內(nèi)容分組，通常用于對頁面進(jìn)行分塊或者對文章等進(jìn)行分段；<section>通常包含一個(gè)頭部<header>、可能還會包含一個(gè)尾部<footer>。<article><h1>JavaScript框架</h1><p>Javascript框架是指以Javascript語言為基礎(chǔ)搭建的編程框架。</p><section><h2>angular.Js<h2><p>angular.Js是一款優(yōu)秀的前端JS框架</p></section><section><h2>Vue.js<h2><p>Vue.js是用于構(gòu)建交互式的Web界面的庫</p></section><section><h2>jQuery<h2><p>jQuery是一個(gè)快速、簡潔的JavaScript框架。</p></section></article><section>標(biāo)簽所包裹的是有一組相似的主題的內(nèi)容，可以用這個(gè)標(biāo)簽來實(shí)現(xiàn)文章的章節(jié)、標(biāo)簽式對話框中的各種標(biāo)簽頁等類似的功能。3、標(biāo)簽詳解

6）footer二、HTML5語義化結(jié)構(gòu)標(biāo)簽一般被放置在頁面或者頁面中某個(gè)區(qū)塊的底部，包含版權(quán)信息、聯(lián)系方式等信