【移動(dòng)應(yīng)用開發(fā)技術(shù)】HTML5定稿一周年談?wù)勎遗cHTML5_第1頁
【移動(dòng)應(yīng)用開發(fā)技術(shù)】HTML5定稿一周年談?wù)勎遗cHTML5_第2頁
【移動(dòng)應(yīng)用開發(fā)技術(shù)】HTML5定稿一周年談?wù)勎遗cHTML5_第3頁
免費(fèi)預(yù)覽已結(jié)束，剩余1頁可下載查看

下載本文檔

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

文檔簡介

【移動(dòng)應(yīng)用開發(fā)技術(shù)】HTML5定稿一周年，談?wù)勎遗cHTML5

原來學(xué)習(xí)的HTML5&CSS3只是知道了一些Html5獨(dú)有的標(biāo)簽和CSS3新添加的特性，我以為這就是HTML5了。后來當(dāng)我和教研主任聊天中發(fā)現(xiàn)原來我所學(xué)習(xí)的方法——利用表格布局原來是幾年前的老套路了。后來在我不斷學(xué)習(xí)的時(shí)候發(fā)現(xiàn)，表格布局并不適用于移動(dòng)端，而且還有很多弊端，所以思考一下，我應(yīng)該重新認(rèn)識(shí)一下HTML5了。

術(shù)語HTML5，指一組共同構(gòu)成了未來開放式網(wǎng)絡(luò)平臺(tái)的技術(shù)，也指HTML5規(guī)范。

HTML5規(guī)范是一個(gè)獨(dú)特的單元，它涵蓋了有限的功能集合，其中包括諸如新的HTML標(biāo)簽(<video>、<audio>、<canvas>)，HTML是用于互聯(lián)網(wǎng)上創(chuàng)建頁面的標(biāo)準(zhǔn)語言，HTML5是最新的版本。

一個(gè)基本的HTML頁面分成幾個(gè)部分，通常有<head>、<body>，新的HTML5規(guī)范增加了一些新的部分，例如<nav>、<article>、<header>、<footer>……。給我留下深刻印象的是，HTML4滿篇幅的div標(biāo)記讓人難以捉摸，HTML5盡量不使用無語義的容器，讓每個(gè)標(biāo)記都有其獨(dú)特的含義和功能。<!DOCTYPE

html>

<html

>

<head>

<meta

charset="utf-8"

/>

<title>用于瀏覽器的標(biāo)簽頁的標(biāo)題</title>

</head>

<body>

</body>

</html>用于聲明頁面為HTML5文檔。<html>這是標(biāo)記，meta元素用于說明字符編碼。每個(gè)HTML頁面都需要頭部（<head>）和身體（<body>）這是最基礎(chǔ)的HTML5的頁面，一般在<head>標(biāo)簽中，通常提供給搜索引擎的信息和樣式表，也就是互相搭配的CSS3，還有可能加載JavaScript，不過一般這些都放在</body>標(biāo)簽結(jié)束之前了，因?yàn)槟阌袝r(shí)不能確保你的頁面一定會(huì)加載完成。

接著我們來仔細(xì)說一下各個(gè)標(biāo)簽。

<title>標(biāo)簽，一般放在<head>標(biāo)簽中meta元素后，每個(gè)HTML頁面都必須有一個(gè)標(biāo)題。標(biāo)題都要做到簡短、描述性、唯一。標(biāo)題不能有任何格式。標(biāo)題的使用對(duì)于搜索引擎的索引起到了很大的作用，我們應(yīng)該去足夠重視title元素。搜索引擎會(huì)根據(jù)60個(gè)字符為基準(zhǔn)進(jìn)行截取，標(biāo)題的話，建議把核心內(nèi)容放到前60個(gè)，為了用戶更好地體驗(yàn)。

HTML支持分級(jí)標(biāo)題h2-h7，數(shù)字越大，級(jí)別越低。最大的標(biāo)題h2，文字顯示最大，而且會(huì)自動(dòng)換一行，h3位子標(biāo)題，以此類推，為了方便不同文章的不同標(biāo)題。HTML5新的標(biāo)記有<hgroup></hgroup>用來標(biāo)記連續(xù)的幾層標(biāo)題，用來對(duì)瀏覽器說明文章結(jié)構(gòu)的排列。

表示一個(gè)段落使用標(biāo)記<p>、</p>。在標(biāo)記中放入你的段落，段落會(huì)獨(dú)立出來，也就是段落前后會(huì)換一行。

<br>就是來用作換行，有時(shí)候你會(huì)見到<br/>它沒有結(jié)束的標(biāo)記，所以表示它是自閉的，它本身就代表換行所以不存在用一個(gè)結(jié)束的標(biāo)記來表示這是一個(gè)換行，在HTML5中，你可以直接<br>這樣使用。

使用header元素來為頁面的一塊包含一組介紹性或?qū)蛐詢?nèi)容的區(qū)域創(chuàng)建頁眉。頁眉中可以使用鏈接，也可以使用多個(gè)header元素在頁面中。

HTML的早期版本沒有明確表示主導(dǎo)航鏈接的區(qū)域的元素，而HTML5則有這樣一個(gè)元素，即nav。nav的鏈接可以只想頁面中的其他內(nèi)容，也可以指向其他頁面和資源。用nav元素來包含頁面中的一些鏈接群。

main元素是HTML5新添加的一個(gè)元素，顧名思義，它代表一個(gè)頁面的主要部分，該元素在頁面中只能使用一次。

article元素，另一個(gè)HTML5添加的新元素，用來添加文章，在HTML5中定義的不局限于文章、帖子等，是一種容器。在<article></article>中你可以添加你需要的內(nèi)容項(xiàng)，這個(gè)標(biāo)簽可以支持嵌套操作。

section元素代表文檔或應(yīng)用的一個(gè)一般的區(qū)塊。section標(biāo)記頁面的“通用”的區(qū)塊，包含相似主題的一組內(nèi)容。Section與artic在本質(zhì)上有區(qū)別，做一下對(duì)比。section在組織性和結(jié)構(gòu)性更強(qiáng)，而article代表的是自包含的容器。

aside元素，頁面中與主體部分相關(guān)聯(lián)并不強(qiáng)的一部分，是附注欄，雖然經(jīng)常被看做成側(cè)欄，但是根據(jù)具體情況我們具體分析它的位置，還要依據(jù)上下文。

footer元素，與header元素一樣可以作用在你需要的地方，但是一般作為頁面的底部的頁腳，這里通常就放置版權(quán)聲明、指向隱私政策頁面的鏈接等等。footer元素可以嵌套在它的最近的article、aside、blockquote、body、details、fieldset、figure、nav、section、td元素，只有它相距最近的，才是整個(gè)頁面的頁腳。

small元素標(biāo)記頁面的版權(quán)信息，包含在標(biāo)記中的字體小一號(hào)。

strong元素表示內(nèi)容的重要性，字體會(huì)加粗。

em元素表示內(nèi)容的著重點(diǎn)，字體同樣會(huì)加粗。在HTML5中,em表示強(qiáng)調(diào)的唯一元素，而strong表示的是重要程度。

figure元素用來創(chuàng)建圖，figcaption是其標(biāo)題，通常用來表示頁面中需要表示的圖表。

cite元素指明引用或者參考，cite只用于參考源本身，而不是從中引述的內(nèi)容，默認(rèn)格式會(huì)使用斜體。根據(jù)它的語義，來源的話使用cite，其他情況比如言論之類的引用，則使用下面兩種元素。

blockquote元素表示單獨(dú)存在的引述。瀏覽器默認(rèn)對(duì)blockquote文本進(jìn)行縮進(jìn)。

q元素用于短的引述。比如說在一個(gè)句子中引述別人的言論。使用的話瀏覽器會(huì)自動(dòng)為你加上引號(hào)。

time元素標(biāo)記時(shí)間、日期或時(shí)間段。time元素會(huì)按照你在標(biāo)記中的文本來顯示時(shí)間，這是在使用datetime屬性的時(shí)候，反之忽略屬性，那么你就必須按照格式來表述你需要的時(shí)間。

abbr元素來解釋縮寫詞，使用title屬性來把你需要解釋的含義寫出來，當(dāng)用戶把鼠標(biāo)停留在使用abbr元素標(biāo)記過的詞語時(shí)，瀏覽器就會(huì)把title屬性顯示在一個(gè)提示框中。

dfn元素用來定義術(shù)語。后續(xù)再次使用術(shù)語的時(shí)候就不再出現(xiàn)，也就是說dfn元素的使用至多一次，用法和abbr元素相同，也可以使用title屬性。

sub/sup元素創(chuàng)建下標(biāo)/上標(biāo)。

addresss元素用于添加作者聯(lián)系信息。address元素不只可以表示地址，也可以表示電子郵箱、聯(lián)系信息等等。具體表示的信息，取決于它出現(xiàn)的位置。

del元素標(biāo)記不再準(zhǔn)確、不再相關(guān)的文本，瀏覽器上的樣式一般是文本加一條刪除線。

ins元素對(duì)頁面內(nèi)容的編輯標(biāo)出來，瀏覽器上的樣式一般是文本下面加入一條下劃線，。以上兩個(gè)元素既可以包括短語內(nèi)容，又可以包括塊級(jí)內(nèi)容元素。

code元素表示其中的是代碼或文件名，默認(rèn)的字體為等寬字體。

pre元素用來和code元素搭配，可以使用預(yù)格式化的文本，就是說把你在HTML文檔中的格式保留下來，非常適合展示計(jì)算機(jī)代碼的元素。

mark元素，HTML5新的元素，用來突出顯示文本，標(biāo)記我們想突出文本的關(guān)鍵詞，默認(rèn)的樣式想×××熒光筆劃過一樣，引起用戶的注意。

u元素，HTML5重新定義了該元素，富裕新的語義，一塊文字添加明顯的非文本注解，就是標(biāo)記專有名詞或者拼寫有誤的詞語，瀏覽器默認(rèn)會(huì)把文本下添加下劃線。

wbr元素，HTML5為br元素引入了一個(gè)相近的元素，代表一個(gè)可換行處，它同樣是自閉的，使用的時(shí)候英文居多，如果瀏覽器顯示文本到可換行的元素時(shí)，則換行。

meter元素表示分?jǐn)?shù)的值或已知范圍的結(jié)果，瀏覽器在顯示meter時(shí)，顯示一個(gè)表示測(cè)量值得顏色條。

progress元素表示某項(xiàng)任務(wù)的完成進(jìn)度。根據(jù)不同的屬性，使progress顯示不同的進(jìn)度條。

img元素在頁面中插入圖像，自閉的標(biāo)記，<imgsrc="p_w_picpath.url"/>其中引號(hào)中的是你需要的圖片的位置。使用alt屬性，為圖像添加一段描述性的文本，如果讓你的圖像因?yàn)槟承┰虿荒茱@示在頁面上的時(shí)候，這段文本變回代替圖像來呈現(xiàn)給用戶。在img標(biāo)簽中，src屬性的后面，輸入width=”x”height=”y”默認(rèn)的單位是像素，x代表寬度，y代表高度，制定圖像尺寸的屬性是不改變?cè)瓉韴D像，只改變的是圖像展示在頁面上的效果。

a元素用來創(chuàng)建鏈接，鏈接來把網(wǎng)頁聯(lián)系到一起，其實(shí)這也是當(dāng)時(shí)互聯(lián)網(wǎng)的想法。輸入<ahref=”page.html”>，page.html是目標(biāo)網(wǎng)頁的URL，點(diǎn)擊就會(huì)轉(zhuǎn)到另一個(gè)頁面，停留在a標(biāo)簽上瀏覽器就會(huì)在左下角標(biāo)出鏈接到的URL。a元素還可以應(yīng)用塊級(jí)鏈接，可以在a標(biāo)簽中嵌套其他大部分元素，讓這些塊級(jí)元素一同指向目標(biāo)。a標(biāo)記還有一個(gè)作用是——錨。顧名思義也能猜到它的用途，把與一對(duì)元素關(guān)聯(lián)起來，a元素使用“#”加目標(biāo)id的屬性值，另一個(gè)標(biāo)簽為錨id賦一個(gè)有意義的名稱。這樣就能實(shí)現(xiàn)跳轉(zhuǎn)。a元素可以創(chuàng)建指向其他類型的各種URL的鏈接，也可以是任何文件。

接觸了這么多的標(biāo)簽，相信你已經(jīng)對(duì)HTML5標(biāo)記有了印象，個(gè)別標(biāo)記雖然有些樣式，那是古老的遺留問題，并不推薦這樣。HTML5標(biāo)記表示結(jié)構(gòu)

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論