Web前端開發(fā)第4章：HTML5結(jié)構(gòu)與屬性1本章主要內(nèi)容結(jié)構(gòu)之美：從HTML4到HTML5HTML5基礎(chǔ)HTML5結(jié)構(gòu)元素超鏈接21.結(jié)構(gòu)之美：從HTML4到HTML5傳統(tǒng)表格布局方式實際上是利用HTML中的表格元素<table>具有的無邊框特性，當(dāng)表格元素在顯示時，使單元格的邊框和間距設(shè)置為0，然后將網(wǎng)頁中的各個元素按版式劃分放入表格的各單元格中，從而實現(xiàn)復(fù)雜的排版組合。31.1使用表格布局1.結(jié)構(gòu)之美：從HTML4到HTML5使用表格布局41.1使用表格布局1.結(jié)構(gòu)之美：從HTML4到HTML5在XHTML1.0之后，W3C開始大力推行Web標(biāo)準(zhǔn)，開發(fā)工程師基本上都是用了DIV+CSS的布局方式，叫做區(qū)塊布局。但是，搜索引擎去抓取頁面的內(nèi)容時，它只能猜測某個DIV內(nèi)的內(nèi)容是文章內(nèi)容容器，或是導(dǎo)航模塊的容器，或是作者介紹的容器等等，整個HTML文檔結(jié)構(gòu)定義不清晰，僅僅是在展示和頁面解析性能上得到了提升。51.2使用區(qū)塊布局1.結(jié)構(gòu)之美：從HTML4到HTML5使用區(qū)塊布局61.2使用區(qū)塊布局1.結(jié)構(gòu)之美：從HTML4到HTML5HTML5新增了許多的結(jié)構(gòu)元素，通過HTML5的結(jié)構(gòu)元素，可以直接定義元素容器的內(nèi)容，頁面結(jié)構(gòu)可以調(diào)整的非常清晰。使用HTML5布局結(jié)構(gòu)71.3HTML5結(jié)構(gòu)元素布局1.結(jié)構(gòu)之美：從HTML4到HTML5<div>元素是Web前端開發(fā)中最常用的元素，利用<div>元素，可以把整個HTML文檔分隔為頁眉、側(cè)邊面板、導(dǎo)航條等等。這種<div>加樣式的技術(shù)既簡明又強(qiáng)大，還非常靈活，但是卻不夠透明。也就是說，在查看別人的源代碼時，必須費(fèi)點(diǎn)功夫才能知道哪個<div>表示什么。HTML5為此引用了一組構(gòu)造頁面的新元素，實現(xiàn)對頁面區(qū)塊內(nèi)容的定義。這些元素可以為它們標(biāo)注的內(nèi)容賦予額外的含義。81.4語義Web1.結(jié)構(gòu)之美：從HTML4到HTML5使用語義元素的原因：容易修改和維護(hù)無障礙性搜索引擎優(yōu)化91.4語義Web2.HTML5基礎(chǔ)內(nèi)容類型HTML5的文件擴(kuò)展名與內(nèi)容類型保持不變。擴(kuò)展名仍然是.html或.htm，內(nèi)容類型仍然為text/html。版本兼容性HTML5語法是為了保證與之前的HTML語法達(dá)到最大程度兼容而設(shè)計的。簡單說明如下：可以省略標(biāo)記元素具有布爾值的屬性省略引號102.1HTML5語法2.HTML5基礎(chǔ)可以省略標(biāo)記元素在HTML5中，元素的標(biāo)記可以省略。具體來說，元素的標(biāo)記分為3種類型：不允許寫結(jié)束標(biāo)記、可以省略結(jié)束標(biāo)記、開始標(biāo)記和結(jié)束標(biāo)記全部可以省略。下面簡單介紹這3種類型各包括哪些HTML5新元素：不允許寫結(jié)束標(biāo)記元素的有：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track和wbr?？梢允÷越Y(jié)束標(biāo)記的元素有：li、dt、dd、p、rt、rp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td和th?？梢允÷匀繕?biāo)記的元素有：html、head、body、colgroup和tbody。112.1HTML5語法2.HTML5基礎(chǔ)具有布爾值的屬性對于具有boolean值的屬性，如disabled與readonly等，當(dāng)只寫屬性而不指定屬性值時，表示屬性值為true；如果想要將屬性值設(shè)為false，可以不使用該屬性。另外，要想將屬性值設(shè)定為true，也可以將屬性名設(shè)為屬性值，或?qū)⒖兆址O(shè)定為屬性值，例如：122.1HTML5語法2.HTML5基礎(chǔ)省略引號屬性值兩邊既可以用雙引號，也可以用單引號。HTML5在此基礎(chǔ)上做了一些改進(jìn)，當(dāng)屬性值不包括空字符串、<、>、=、單引號、雙引號等字符時，屬性值兩邊的引號可以省略。例如，下面的寫法都是合法的。132.1HTML5語法2.HTML5基礎(chǔ)HTML5引入了很多新的標(biāo)記元素，根據(jù)內(nèi)容類型的不同，這些元素分成了6大類：142.2HTML5元素2.HTML5基礎(chǔ)HTML5中不僅新增加了很多元素，還兼容了以前的各種元素。按功能劃分可分為：基礎(chǔ)、格式、表單、框架、圖像、音頻/視頻、連接、列表、表格、樣式/節(jié)、元信息、編程。152.2HTML5元素2.HTML5基礎(chǔ)基礎(chǔ)元素HTML5基礎(chǔ)元素162.2HTML5元素2.HTML5基礎(chǔ)格式元素HTML5格式元素172.2HTML5元素182.HTML5基礎(chǔ)表單元素HTML5表單元素192.2HTML5元素2.HTML5基礎(chǔ)框架元素HTML5框架元素202.2HTML5元素2.HTML5基礎(chǔ)圖像元素HTML5圖像元素212.2HTML5元素2.HTML5基礎(chǔ)音頻/視頻元素HTML5音頻/視頻元素222.2HTML5元素2.HTML5基礎(chǔ)鏈接元素HTML5鏈接元素232.2HTML5元素2.HTML5基礎(chǔ)列表元素HTML5列表元素242.2HTML5元素2.HTML5基礎(chǔ)表格元素HTML5表格元素252.2HTML5元素2.HTML5基礎(chǔ)樣式/節(jié)元素HTML5樣式/節(jié)元素262.2HTML5元素2.HTML5基礎(chǔ)元信息元素HTML5元信息元素272.2HTML5元素2.HTML5基礎(chǔ)編程元素HTML5編程元素282.2HTML5元素2.HTML5基礎(chǔ)HTML5元素包含的屬性眾多，既有新增加的屬性，又有繼承原來的屬性。公共屬性大致可分為：基本屬性、語言屬性、鍵盤屬性、內(nèi)容屬性和延伸屬性等類型。292.3HTML5屬性2.HTML5基礎(chǔ)基本屬性基本屬性主要包括3個：不擁有基本屬性的元素：302.3HTML5屬性2.HTML5基礎(chǔ)語言屬性語言屬性主要用來定義元素的語言類型，包括兩個屬性：不擁有語言屬性的元素：312.3HTML5屬性2.HTML5基礎(chǔ)鍵盤屬性鍵盤屬性定義元素的鍵盤訪問方法，包括兩個屬性：accesskey屬性可以使用快捷鍵（Alt+字母）訪問指定的URL，但是瀏覽器不能很好地支持，在IE中僅激活超鏈接，需要配合Enter鍵確定。322.3HTML5屬性2.HTML5基礎(chǔ)鍵盤屬性tabindex屬性用來定義元素的Tab鍵訪問順序，可以使用Tab鍵遍歷網(wǎng)頁中的所有鏈接和表單元素。遍歷時會按照tabindex的大小決定順序，當(dāng)遍歷到某個鏈接時，按Enter鍵即打開鏈接頁面。332.3HTML5屬性2.HTML5基礎(chǔ)內(nèi)容屬性內(nèi)容屬性定義元素包含內(nèi)容的附加信息，這些信息對于元素來說具有重要補(bǔ)充作用，避免元素本身包含信息不全而被誤解，內(nèi)容屬性包括5個：342.3HTML5屬性2.HTML5基礎(chǔ)alt和title是兩個常用的屬性，分別定義元素的替換文本和提示文本，但是很多設(shè)計師習(xí)慣混用這兩個屬性，沒有刻意去區(qū)分它們的語義性。替換文本并不是用來做提示的，或者更加明確地說，它并不是圖像提供額外說明信息的。相反，title屬性才是為元素提供額外說明信息。當(dāng)圖像無法顯示時，必須準(zhǔn)備替換的文本來替換無法顯示的圖像，這對于圖像來說是必須的，因此alt屬性只能用在img、area和input元素中。對于input元素，alt屬性用來替換提交按鈕的圖片。352.3HTML5屬性2.HTML5基礎(chǔ)title屬性為元素在鼠標(biāo)指向時出現(xiàn)的提示性信息，這些信息是一些額外的說明，該屬性也不是一個必須設(shè)置的屬性。放鼠標(biāo)指針移到元素上面時，即可看到這些提示信息，但是title屬性不能用在下面這些元素上。362.3HTML5屬性2.HTML5基礎(chǔ)所謂全局屬性是指可以對任何元素都使用的屬性，在HTML5新增加的全局屬性再上一章中已經(jīng)介紹。下面列舉一下HTML5中所有的全局屬性：372.4HTML5全局屬性3839現(xiàn)場演示：個人簡歷網(wǎng)頁的實現(xiàn)通過五個方面，進(jìn)行對頁面編寫：姓名個人技能工作經(jīng)驗教育背景獲得榮譽(yù)3.HTML5結(jié)構(gòu)元素articlearticle元素代表文檔、頁面或應(yīng)用程序中獨(dú)立的、完整的、可以獨(dú)自被外部引用的內(nèi)容。article元素是可以嵌套使用的，內(nèi)層的內(nèi)容在原則上需要與外層的內(nèi)容相關(guān)聯(lián)。另外article元素也可以用來表示插件，它的作用是使插件看起來好像內(nèi)嵌在頁面中一樣。403.1HTML5主體結(jié)構(gòu)元素41現(xiàn)場演示：使用article元素創(chuàng)建一個簡單頁面。42現(xiàn)場演示：使用article元素插件創(chuàng)建一個簡單頁面。3.HTML5結(jié)構(gòu)元素sectionsection元素用于對網(wǎng)站或應(yīng)用程序中頁面上的內(nèi)容進(jìn)行分塊。一個section元素通常由內(nèi)容及其標(biāo)題組成。但section元素并非一個普通的容器元素。當(dāng)一個容器需要被直接定義樣式或通過腳本定義行為時，推薦使用div而非section元素。section在沒有標(biāo)題的情況下建議不要使用，也就是說建議在使用section時應(yīng)該包含標(biāo)題內(nèi)容，例如<h1>、<h2>等。433.1HTML5主體結(jié)構(gòu)元素44現(xiàn)場演示：使用section元素插件創(chuàng)建一個簡單頁面。3.HTML5結(jié)構(gòu)元素navnav元素是一個可以用作頁面導(dǎo)航的鏈接組，其中導(dǎo)航元素鏈接到其他頁面或當(dāng)前頁面的其他部分。并不是所有的鏈接組都要放進(jìn)nav元素，只需要將主要的、基本的鏈接組放進(jìn)nav元素即可。一個頁面中可以擁有多個nav元素，作為頁面整體或不同部分的導(dǎo)航。但是不要用menu元素代替nav元素，menu元素是用在一系列發(fā)出命令的菜單上的，是一種交互性的元素，或者更確切地說是使用在Web應(yīng)用程序中的元素。453.1HTML5主體結(jié)構(gòu)元素46現(xiàn)場演示：使用nav元素插件創(chuàng)建一個簡單頁面。3.HTML5結(jié)構(gòu)元素asideaside元素用來表示當(dāng)前頁面或文章的附屬信息部分，它可以包含與當(dāng)前頁面或主要內(nèi)容相關(guān)的引用、側(cè)邊欄、廣告、導(dǎo)航條，以及其他類似的有別于主要內(nèi)容的部分。aside元素主要有以下兩種使用方法：被包含在article元素中作為主要內(nèi)容的附屬信息部分，其中的內(nèi)容可以是與當(dāng)前文章有關(guān)的參考資料、名詞解釋等。在article元素之外使用，作為頁面或站點(diǎn)全局的附屬信息部分。最典型的形式是側(cè)邊欄，其中的內(nèi)容可以是友情鏈接，博客中其他文章列表、廣告單元等。473.1HTML5主體結(jié)構(gòu)元素48現(xiàn)場演示：使用aside元素插件創(chuàng)建一個簡單頁面。3.HTML5結(jié)構(gòu)元素timetime元素代表24小時中的每個時刻或者某個日期，它表示時間時允許帶時差。time元素是一個微格式。微格式是利用HTML的class屬性來對網(wǎng)頁添加附加信息的方法編碼時機(jī)器讀到的部分在datetime屬性里，而元素的開始標(biāo)記與結(jié)束標(biāo)記中間的部分是顯示在網(wǎng)頁上的。datetime屬性中日期與時間之間要用“T”分隔。時間加上Z文字表示給機(jī)器編碼時使用UTC標(biāo)準(zhǔn)時間，如果加上了時差，表示向機(jī)器編碼另一地區(qū)時間，如果是編碼本地時間，則不需要添加時差。493.1HTML5主體結(jié)構(gòu)元素50現(xiàn)場演示：使用time元素插件創(chuàng)建一個簡單頁面。3.HTML5結(jié)構(gòu)元素timepubdate屬性是一個可選的、bool值的屬性，可以用到article元素中的time元素上，意思是time元素代表了文章（article元素的內(nèi)容）或整個網(wǎng)頁的發(fā)布日期。513.1HTML5主體結(jié)構(gòu)元素52現(xiàn)場演示：使用pubdate屬性插件創(chuàng)建一個簡單頁面。3.HTML5結(jié)構(gòu)元素headerheader元素是一種具有引導(dǎo)和導(dǎo)航作用的結(jié)構(gòu)元素，通常用來放置整個頁面或頁面內(nèi)的一個內(nèi)容區(qū)塊的標(biāo)題，但也可以包含其他內(nèi)容，例如數(shù)據(jù)表格、搜索表單或相關(guān)的logo圖片。一個網(wǎng)頁內(nèi)并未限制header元素的個數(shù)，可以擁有多個，可以為每個內(nèi)容區(qū)塊加一個header元素。533.2HTML5非主體結(jié)構(gòu)元素54現(xiàn)場演示：使用header元素插件創(chuàng)建一個簡單頁面。3.HTML5結(jié)構(gòu)元素hgrouphgroup元素是將標(biāo)題及其子標(biāo)題進(jìn)行分組的元素。hgroup元素通常會將h1-h6元素進(jìn)行分組，譬如一個內(nèi)容區(qū)塊的標(biāo)題及其子標(biāo)題算一組。通常，如果文章只有一個主標(biāo)題，是不需要hgroup元素的，但是文章有主標(biāo)題，主標(biāo)題下面有子標(biāo)題，就需要使用hgroup。553.2HTML5非主體結(jié)構(gòu)元素56現(xiàn)場演示：使用hgroup元素插件創(chuàng)建一個簡單頁面。3.HTML5結(jié)構(gòu)元素footerfooter元素可以作為其父級內(nèi)容區(qū)塊或是一個根區(qū)塊的腳注。footer通常包括其相關(guān)區(qū)塊的腳注信息，如作者、相關(guān)閱讀鏈接及版權(quán)信息等。573.2HTML5非主體結(jié)構(gòu)元素58現(xiàn)場演示：使用footer元素插件創(chuàng)建一個簡單頁面。3.HTML5結(jié)構(gòu)元素addressaddress元素用來在文檔中呈現(xiàn)聯(lián)系信息，包括文檔作者或文檔維護(hù)者的名字、網(wǎng)站鏈接、電子郵箱、真實地址、電話號碼等。address應(yīng)該不只是用來呈現(xiàn)電子郵箱或真實地址，還應(yīng)用來展示跟文檔相關(guān)聯(lián)系人的所有聯(lián)系信息。593.2HTML5非主體結(jié)構(gòu)元素60現(xiàn)場演示：使用address元素插件創(chuàng)建一個簡單頁面。61現(xiàn)場演示：使用結(jié)構(gòu)元素進(jìn)行網(wǎng)頁布局（新聞列表+新聞列表內(nèi)容呈現(xiàn)）使用結(jié)構(gòu)元素進(jìn)行頁面布局，分別從七個模塊進(jìn)行編寫:首頁欄目娛樂新聞軍事新聞數(shù)碼新聞手機(jī)新聞關(guān)于我們4.超鏈接鏈接在網(wǎng)頁制作中是一個必不可少的部分，在瀏覽網(wǎng)頁時，單擊一張圖片或者一段文字就可以彈出一個新的網(wǎng)頁，這些功能都是通過超鏈接實現(xiàn)的。在學(xué)習(xí)超鏈接之前，需要先了解一下“URL”，所謂URL（UniformResourceLocator）指統(tǒng)一資源定位符，通常包括三個部分：協(xié)議代碼、主機(jī)地址、具體的文件名。624.超鏈接絕對路徑絕對路徑是指文件的完整路徑，包括文件傳輸?shù)膮f(xié)議http、ftp等，一般用于網(wǎng)站的外部鏈接，例如：/相對路徑相對路徑是指相對于當(dāng)前文件的路徑，它包含了從當(dāng)前文件指向目的文件的路徑。同時只要是處于站點(diǎn)文件夾之外，即使不屬于同一個文