HTML5+CSS3網(wǎng)頁設計基礎教程第3章-創(chuàng)建HTML5課件_第1頁
HTML5+CSS3網(wǎng)頁設計基礎教程第3章-創(chuàng)建HTML5課件_第2頁
HTML5+CSS3網(wǎng)頁設計基礎教程第3章-創(chuàng)建HTML5課件_第3頁
HTML5+CSS3網(wǎng)頁設計基礎教程第3章-創(chuàng)建HTML5課件_第4頁
HTML5+CSS3網(wǎng)頁設計基礎教程第3章-創(chuàng)建HTML5課件_第5頁
已閱讀5頁，還剩41頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

第1頁第3章創(chuàng)建HTML5文檔本章概述本章的學習目標主要內(nèi)容第1頁第3章創(chuàng)建HTML5文檔本章概述第2頁本章概述為了增強Web的實用性，HTML5引入了許多新技術(shù)，對傳統(tǒng)HTML文檔進行了大幅度的修改，使得文檔結(jié)構(gòu)更加清晰明了、易讀，降低了學習難度，這樣既方便了瀏覽者的訪問，也提高了Web的開發(fā)速度。本章講詳細介紹HTML5中新增的主體元素、語義元素，并通過這兩大類元素設計一個綜合性強的網(wǎng)頁。第2頁本章概述為了增強Web的實用性，HTM第3頁本章的學習目標● HTML5文檔結(jié)構(gòu)● HTML5新增的主體標記● HTML5新增的語義標記第3頁本章的學習目標● HTML5文檔結(jié)構(gòu)第4頁主要內(nèi)容3.1認識HTML5文檔結(jié)構(gòu)3.2HTML5元素分類3.3構(gòu)建主體內(nèi)容3.4添加語義模塊3.5本章小結(jié)第4頁主要內(nèi)容3.1認識HTML5文檔結(jié)構(gòu)第5頁3.1認識HTML5文檔結(jié)構(gòu)<!DOCTYPEhtml><!--聲明文檔結(jié)構(gòu)類型--><htmllang="zh-cn"><!--聲明文檔語言區(qū)域--><head><!--文檔的頭部區(qū)域--> <metacharset="UTF-8"><!--文檔的頭部區(qū)域中元數(shù)據(jù)區(qū)的字符集定義，utf-8表示國際通用的字符集編碼格式--> <title>文檔標題</title><!--文檔的頭部的標題。title內(nèi)容對于SEO來說極為重要--> <metaname="description"content="文檔描述信息"><!--文檔的頭部區(qū)域元數(shù)據(jù)區(qū)關(guān)于文檔描述的定義--> <metaname="author"content="文檔作者"><!--文檔的頭部區(qū)域元數(shù)據(jù)區(qū)關(guān)于開發(fā)人員姓名的定義--> <metaname="copyright"content="版權(quán)信息"><!--文檔的頭部區(qū)域元數(shù)據(jù)區(qū)關(guān)于版權(quán)的定義--><linkrel="shortcuticon"href="favicon.ico"><!--文檔的頭部區(qū)域的兼容性寫法--><linkrel="apple-touch-icon"href="custom_ico.png"><!--文檔的頭部區(qū)域的apple設備的圖表的引用--><metaname="viewport"content="width=device-width,user-scalable=no"><!--文檔的頭部區(qū)域?qū)τ诓煌涌谠O備的特殊聲明。寬=設備寬，用不不能自行縮放--><linkrel="stylesheet"href="main.css"><!--文檔頭部區(qū)域的樣式引用--><scriptsrc="script.js"></script><!--文檔頭部區(qū)域的JavaScript腳本文件調(diào)用--></head><body> <header>HTML5文檔的頭部區(qū)域</header> <nav>HTML5文檔的導航區(qū)域</nav> <section>HTML5文檔的主要內(nèi)容區(qū)域

<aside>HTML5文檔的主要內(nèi)容區(qū)域的側(cè)邊導航或菜單區(qū)</aside> <article>HTML5文檔的主要內(nèi)容區(qū)域的內(nèi)容區(qū)

<section>以下是一個section和article嵌套

<aside></aside> <article> <header> HTML5文檔的嵌套區(qū)域，可以對某個article區(qū)域進行頭部和腳部的定義，這樣做，可以有非常清晰和嚴謹?shù)奈臋n目錄結(jié)構(gòu)關(guān)系

</header> <footer></footer> </article> </section> </article> </section> <footer>HTML5文檔的腳部區(qū)域</footer></body></html>第5頁3.1認識HTML5文檔結(jié)構(gòu)<!DOCTYPEh第6頁主要內(nèi)容3.1認識HTML5文檔結(jié)構(gòu)3.2HTML5元素分類3.3構(gòu)建主體內(nèi)容3.4添加語義模塊3.5本章小結(jié)第6頁主要內(nèi)容3.1認識HTML5文檔結(jié)構(gòu)第7頁3.2HTML5元素分類HTML5新增了27個元素，廢棄了16個元素，根據(jù)現(xiàn)有的標準規(guī)范，下面把HTML5的元素分為結(jié)構(gòu)性元素、級塊性元素、行內(nèi)語義性元素和交互性元素4大類。結(jié)構(gòu)性元素：section,header,footer,nav,article。級塊性元素：aside,figure,code,dialog。行內(nèi)語義性元素：meter,time,progress,video,audio。交互性元素：details,datagrid,menu,command。第7頁3.2HTML5元素分類HTML5新增了27個元第8頁主要內(nèi)容3.1認識HTML5文檔結(jié)構(gòu)3.2HTML5元素分類3.3構(gòu)建主體內(nèi)容3.4添加語義模塊3.5本章小結(jié)第8頁主要內(nèi)容3.1認識HTML5文檔結(jié)構(gòu)第9頁3.3構(gòu)建主體內(nèi)容3.3.1標識文章：article元素3.3.2給內(nèi)容分段：section元素3.3.3設計導航信息：nav元素3.3.4設計輔助信息：aside元素3.3.5設計微格式：time元素3.3.6添加發(fā)布日期：pubdate屬性第9頁3.3構(gòu)建主體內(nèi)容3.3.1標識文章：arti第10頁3.3.1標識文章：article元素<article>標簽是HTML5新增的元素。article元素代表文檔、頁面或應用程序中獨立的、完整的、可以獨自被外部引用的內(nèi)容。它可以是論壇帖子、報紙文章、博客條目、用戶評論或者一個獨立的插件，或者其他任何獨立的內(nèi)容。除了內(nèi)容部分，一個article元素通常有自己的標題（一般放在一個header元素里面），有時還有腳注。下面以一篇博客文章為例來看article元素的使用。第10頁3.3.1標識文章：article元素<arti第11頁3.3.2給內(nèi)容分段：section元素section元素主要用來對網(wǎng)站或應用程序中頁面上的內(nèi)容進行分塊。section元素通常由標題和內(nèi)容組成。但section元素并不是容器元素，所以不能用CSS來渲染。當一個容器需要直接定義樣式或通過腳本控制行為時，一般使用div元素。第11頁3.3.2給內(nèi)容分段：section元素secti第12頁3.3.3設計導航信息：nav元素nav元素是一個可以用來作為頁面導航的鏈接組，其中的導航元素鏈接到其他頁面或當前頁面的其他部分。一般情況下，只需要將主要的、基本的鏈接組放進nav元素即可。例如，在頁腳中通常會有一組鏈接，其中放著服務條款、首頁和版權(quán)聲明等，這時使用nav元素來組織并不適合，而使用footer最恰當。一個頁面中可以擁有多個nav元素，作為頁面整體或不同部分的導航。一般地說，nav元素適用于以下場景：傳統(tǒng)導航條、側(cè)邊欄導航條、頁內(nèi)導航、翻頁操作。第12頁3.3.3設計導航信息：nav元素nav元素是一個第13頁3.3.4設計輔助信息：aside元素aside元素表示跟這個頁面的其他內(nèi)容關(guān)聯(lián)性不強或者沒有關(guān)聯(lián)的內(nèi)容，一般是一些附屬信息。aside元素通常用來在側(cè)邊欄顯示一些定義，比如目錄、索引、術(shù)語表等；也可以用來顯示相關(guān)的廣告宣傳、作者的介紹、Web應用、相關(guān)鏈接、當前頁內(nèi)容簡介等。但不要使用<aside>元素標記括號中的文字，因為這種類型的文本被認為是主內(nèi)容的一部分。aside元素有以下兩種使用情景：aside元素作為內(nèi)容的附屬信息部分呈現(xiàn)，這種情況下，aside元素放在article元素中，內(nèi)容是和當前文章有關(guān)的參考資料和名詞解釋等。aside元素作為頁面或站點全局的附屬信息部分，在article元素之外使用。最典型的形式是側(cè)邊欄，其中的內(nèi)容可以是友情鏈接，博客中其他文章列表、廣告單元等。第13頁3.3.4設計輔助信息：aside元素aside元第14頁3.3.5設計微格式：time元素微格式是一種利用HTML的class屬性來對網(wǎng)頁添加附加信息的方法。附加信息如新聞事件的發(fā)生日期和時間、個人電話號碼、企業(yè)郵箱等。第14頁3.3.5設計微格式：time元素微格式是一種利用第15頁3.3.6添加發(fā)布日期：pubdate屬性pubdate屬性是可選的、布爾值的屬性。它可以用到time元素上，表示文章或整個網(wǎng)頁的發(fā)布日期。比如：<timedatetime="2017-05-11"pubdate>2017年05月11日</time>需要注意的是，time元素不能直接代表發(fā)布日期，只有增加了pubdate屬性才代表發(fā)布的日期。第15頁3.3.6添加發(fā)布日期：pubdate屬性pubd第16頁主要內(nèi)容3.1認識HTML5文檔結(jié)構(gòu)3.2HTML5元素分類3.3構(gòu)建主體內(nèi)容3.4添加語義模塊3.5本章小結(jié)第16頁主要內(nèi)容3.1認識HTML5文檔結(jié)構(gòu)第17頁3.4添加語義模塊3.4.1添加標題塊：header元素3.4.2給標題分組：hgroup元素3.4.3添加腳注塊：footer元素3.4.4添加聯(lián)系信息：address元素第17頁3.4添加語義模塊3.4.1添加標題塊：he第18頁3.4.1添加標題塊：header元素header元素是一種具有引導和導航作用的結(jié)構(gòu)元素，通常用來放置整個頁面或頁面內(nèi)的一個內(nèi)容區(qū)塊的標題，也可以包含其他內(nèi)容，如數(shù)據(jù)表格、搜索表單或相關(guān)的logo圖片，因此整個頁面的標題應該放在頁面的開頭。例如：<header><h1>頁面標題</h1></header>第18頁3.4.1添加標題塊：header元素heade第19頁3.4.2給標題分組：hgroup元素hgroup元素可以為標題或者子標題進行分組，通常與h1~h6元素組合使用，一個內(nèi)容塊中的標題及子標題可以通過hgroup元素組成一組。但是，如果文章只有一個主標題，則不需要hgroup元素。第19頁3.4.2給標題分組：hgroup元素hgrou第20頁3.4.3添加腳注塊：footer元素footer元素可以作為內(nèi)容塊的腳注，如在父級內(nèi)容塊中添加注釋，或者在網(wǎng)頁中添加版權(quán)信息等。腳注信息的形式有作者、相關(guān)閱讀鏈接及版權(quán)信息等。第20頁3.4.3添加腳注塊：footer元素foote第21頁3.4.4添加聯(lián)系信息：address元素address元素用來在文檔中呈現(xiàn)聯(lián)系信息，包括文檔作者或文檔維護者的名字、文檔作者或者文檔維護者的網(wǎng)站鏈接、電子郵箱、真實地址、電話號碼等。address應該不只是用來呈現(xiàn)電子郵箱或真實地址，還可以用來展示跟文檔相關(guān)的聯(lián)系人的所有聯(lián)系信息。譬如，以下實例展示了一些博客中某篇文章評論者的名字及在博客中的網(wǎng)址鏈接。第21頁3.4.4添加聯(lián)系信息：address元素add第22頁主要內(nèi)容3.1認識HTML5文檔結(jié)構(gòu)3.2HTML5元素分類3.3構(gòu)建主體內(nèi)容3.4添加語義模塊3.5本章小結(jié)第22頁主要內(nèi)容3.1認識HTML5文檔結(jié)構(gòu)第23頁3.5本章小結(jié)為了增強Web的實用性，HTML5引入了許多新技術(shù)，對傳統(tǒng)HTML文檔進行了大幅度的修改，使得文檔結(jié)構(gòu)更加清晰明了、易讀，降低了學習難度，這樣既方便了瀏覽者的訪問，也提高了Web的開發(fā)速度。本章詳細介紹了HTML5中元素的分類，以及新增的主體元素、語義元素，并通過這兩大類元素設計一個綜合性強的網(wǎng)頁。第23頁3.5本章小結(jié)為了增強Web的實用性，HTML第24頁第3章創(chuàng)建HTML5文檔本章概述本章的學習目標主要內(nèi)容第1頁第3章創(chuàng)建HTML5文檔本章概述第25頁本章概述為了增強Web的實用性，HTML5引入了許多新技術(shù)，對傳統(tǒng)HTML文檔進行了大幅度的修改，使得文檔結(jié)構(gòu)更加清晰明了、易讀，降低了學習難度，這樣既方便了瀏覽者的訪問，也提高了Web的開發(fā)速度。本章講詳細介紹HTML5中新增的主體元素、語義元素，并通過這兩大類元素設計一個綜合性強的網(wǎng)頁。第2頁本章概述為了增強Web的實用性，HTM第26頁本章的學習目標● HTML5文檔結(jié)構(gòu)● HTML5新增的主體標記● HTML5新增的語義標記第3頁本章的學習目標● HTML5文檔結(jié)構(gòu)第27頁主要內(nèi)容3.1認識HTML5文檔結(jié)構(gòu)3.2HTML5元素分類3.3構(gòu)建主體內(nèi)容3.4添加語義模塊3.5本章小結(jié)第4頁主要內(nèi)容3.1認識HTML5文檔結(jié)構(gòu)第28頁3.1認識HTML5文檔結(jié)構(gòu)<!DOCTYPEhtml><!--聲明文檔結(jié)構(gòu)類型--><htmllang="zh-cn"><!--聲明文檔語言區(qū)域--><head><!--文檔的頭部區(qū)域--> <metacharset="UTF-8"><!--文檔的頭部區(qū)域中元數(shù)據(jù)區(qū)的字符集定義，utf-8表示國際通用的字符集編碼格式--> <title>文檔標題</title><!--文檔的頭部的標題。title內(nèi)容對于SEO來說極為重要--> <metaname="description"content="文檔描述信息"><!--文檔的頭部區(qū)域元數(shù)據(jù)區(qū)關(guān)于文檔描述的定義--> <metaname="author"content="文檔作者"><!--文檔的頭部區(qū)域元數(shù)據(jù)區(qū)關(guān)于開發(fā)人員姓名的定義--> <metaname="copyright"content="版權(quán)信息"><!--文檔的頭部區(qū)域元數(shù)據(jù)區(qū)關(guān)于版權(quán)的定義--><linkrel="shortcuticon"href="favicon.ico"><!--文檔的頭部區(qū)域的兼容性寫法--><linkrel="apple-touch-icon"href="custom_ico.png"><!--文檔的頭部區(qū)域的apple設備的圖表的引用--><metaname="viewport"content="width=device-width,user-scalable=no"><!--文檔的頭部區(qū)域?qū)τ诓煌涌谠O備的特殊聲明。寬=設備寬，用不不能自行縮放--><linkrel="stylesheet"href="main.css"><!--文檔頭部區(qū)域的樣式引用--><scriptsrc="script.js"></script><!--文檔頭部區(qū)域的JavaScript腳本文件調(diào)用--></head><body> <header>HTML5文檔的頭部區(qū)域</header> <nav>HTML5文檔的導航區(qū)域</nav> <section>HTML5文檔的主要內(nèi)容區(qū)域

<aside>HTML5文檔的主要內(nèi)容區(qū)域的側(cè)邊導航或菜單區(qū)</aside> <article>HTML5文檔的主要內(nèi)容區(qū)域的內(nèi)容區(qū)

<section>以下是一個section和article嵌套

<aside></aside> <article> <header> HTML5文檔的嵌套區(qū)域，可以對某個article區(qū)域進行頭部和腳部的定義，這樣做，可以有非常清晰和嚴謹?shù)奈臋n目錄結(jié)構(gòu)關(guān)系

</header> <footer></footer> </article> </section> </article> </section> <footer>HTML5文檔的腳部區(qū)域</footer></body></html>第5頁3.1認識HTML5文檔結(jié)構(gòu)<!DOCTYPEh第29頁主要內(nèi)容3.1認識HTML5文檔結(jié)構(gòu)3.2HTML5元素分類3.3構(gòu)建主體內(nèi)容3.4添加語義模塊3.5本章小結(jié)第6頁主要內(nèi)容3.1認識HTML5文檔結(jié)構(gòu)第30頁3.2HTML5元素分類HTML5新增了27個元素，廢棄了16個元素，根據(jù)現(xiàn)有的標準規(guī)范，下面把HTML5的元素分為結(jié)構(gòu)性元素、級塊性元素、行內(nèi)語義性元素和交互性元素4大類。結(jié)構(gòu)性元素：section,header,footer,nav,article。級塊性元素：aside,figure,code,dialog。行內(nèi)語義性元素：meter,time,progress,video,audio。交互性元素：details,datagrid,menu,command。第7頁3.2HTML5元素分類HTML5新增了27個元第31頁主要內(nèi)容3.1認識HTML5文檔結(jié)構(gòu)3.2HTML5元素分類3.3構(gòu)建主體內(nèi)容3.4添加語義模塊3.5本章小結(jié)第8頁主要內(nèi)容3.1認識HTML5文檔結(jié)構(gòu)第32頁3.3構(gòu)建主體內(nèi)容3.3.1標識文章：article元素3.3.2給內(nèi)容分段：section元素3.3.3設計導航信息：nav元素3.3.4設計輔助信息：aside元素3.3.5設計微格式：time元素3.3.6添加發(fā)布日期：pubdate屬性第9頁3.3構(gòu)建主體內(nèi)容3.3.1標識文章：arti第33頁3.3.1標識文章：article元素<article>標簽是HTML5新增的元素。article元素代表文檔、頁面或應用程序中獨立的、完整的、可以獨自被外部引用的內(nèi)容。它可以是論壇帖子、報紙文章、博客條目、用戶評論或者一個獨立的插件，或者其他任何獨立的內(nèi)容。除了內(nèi)容部分，一個article元素通常有自己的標題（一般放在一個header元素里面），有時還有腳注。下面以一篇博客文章為例來看article元素的使用。第10頁3.3.1標識文章：article元素<arti第34頁3.3.2給內(nèi)容分段：section元素section元素主要用來對網(wǎng)站或應用程序中頁面上的內(nèi)容進行分塊。section元素通常由標題和內(nèi)容組成。但section元素并不是容器元素，所以不能用CSS來渲染。當一個容器需要直接定義樣式或通過腳本控制行為時，一般使用div元素。第11頁3.3.2給內(nèi)容分段：section元素secti第35頁3.3.3設計導航信息：nav元素nav元素是一個可以用來作為頁面導航的鏈接組，其中的導航元素鏈接到其他頁面或當前頁面的其他部分。一般情況下，只需要將主要的、基本的鏈接組放進nav元素即可。例如，在頁腳中通常會有一組鏈接，其中放著服務條款、首頁和版權(quán)聲明等，這時使用nav元素來組織并不適合，而使用footer最恰當。一個頁面中可以擁有多個nav元素，作為頁面整體或不同部分的導航。一般地說，nav元素適用于以下場景：傳統(tǒng)導航條、側(cè)邊欄導航條、頁內(nèi)導航、翻頁操作。第12頁3.3.3設計導航信息：nav元素nav元素是一個第36頁3.3.4設計輔助信息：aside元素aside元素表示跟這個頁面的其他內(nèi)容關(guān)聯(lián)性不強或者沒有關(guān)聯(lián)的內(nèi)容，一般是一些附屬信息。aside元素通常用來在側(cè)邊欄顯示一些定義，比如目錄、索引、術(shù)語表等；也可以用來顯示相關(guān)的廣告宣傳、作者的介紹、Web應用、相關(guān)鏈接、當前頁內(nèi)容簡介等。但不要使用<aside>元素標記括號中的文字，因為這種類型的文本被認為是主內(nèi)容的一部分。aside元素有以下兩種使用情景：aside元素作為內(nèi)容的附屬信息部分呈現(xiàn)，這種情況下，aside元素放在article元素中，內(nèi)容是和當前文章有關(guān)的參考資料和名詞解釋等。aside元素作為頁面或站點全局的附屬信息部分，在article元素之外使用。最典型的形式是側(cè)邊欄，其中的內(nèi)容可以是友情鏈接，博客中其他文章列表、廣告單元等。第13頁3.3.4設計輔助信息：aside元素aside元第37頁3.3.5設計微格式：time元素微格式是一種利用HTML的class屬性來對網(wǎng)頁添加附加信息的方法。附加信息如新聞事件的發(fā)生日期和時間、個人電話號碼、企業(yè)郵箱等。第14頁3.3.5設計微格式：time元素微格式是一種利用第38頁3.3.6添加發(fā)布日期：pubdate屬性pubdate屬性是可選的、布爾值的屬性。它可以用到time元素上，表示文章或整個網(wǎng)頁的發(fā)布日期。比如：<timedatetime="2017-05-11"pubdate>2017年05月11日</time>需要注意的是，time元素不能直接代表發(fā)布日期，只有增加了pubdate屬性才代表發(fā)布的日期。第15頁3.3.6添加發(fā)布日期：pubdate屬性pubd第39頁主要內(nèi)容3.1認識HTML5文檔結(jié)構(gòu)3.2HTML5元素分類3.3構(gòu)建主體內(nèi)容3.4添加語義模塊3.5本章小結(jié)第16頁主要內(nèi)容3.1認識HTML5文檔結(jié)構(gòu)第40頁3.4添加語義模塊3.4.1添加標題塊：header元素3.4.2給標題分組：hgroup元素3.4.3添加腳注塊：footer元素3.4.4添加聯(lián)系信息：address元素第

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論