html5學習筆記

來源:互聯網
上載者:User

標籤:style   http   color   io   使用   ar   strong   for   檔案   

HTML5 的新標記(轉自http://www.vaikan.com/html5-new-old-semantics/)

設計者們需要完成的任務是要給HTML5開發一個更豐富的和更有含義的語義 – 當然可以想象這種新方案將會是很靈活和很高效的,同時與所有的現代互連網標準相適應。下面就是一些將要在HTML5裡新加入的標記.

  • <article> 標記 定義一篇文章
  • <aside> 標記 定義頁面內容部分的側邊欄
  • <audio> 標記 定義音頻內容
  • <canvas> 標記 定義圖片
  • <command> 標記 定義一個命令按鈕
  • <datalist> 標記 定義一個下拉式清單
  • <details> 標記 定義一個元素的詳細內容
  • <dialog> 標記 定義一個對話方塊(會話框)
  • <embed> 標記 定義外部的可互動的內容或外掛程式
  • <figure> 標記 定義一組媒體內容以及它們的標題
  • <footer> 標記 定義一個頁面或一個地區的底部
  • <header> 標記 定義一個頁面或一個地區的頭部
  • <hgroup> 標記 定義檔案中一個區塊的相關資訊
  • <keygen> 標記 定義表單裡一個產生的索引值
  • <mark> 標記 定義有標記的文本
  • <meter> 標記 定義 measurement within a
    predefined range
  • <nav> 標記 定義導航連結
  • <output> 標記 定義一些輸出類型
  • <progress> 標記 定義任務的過程
  • <rp> 標記是用在Ruby annotations 告訴那些不支援 Ruby 元素的瀏覽器如何去顯示
  • <rt> 標記 定義對ruby
    annotations的解釋
  • <ruby> 標記 定義 ruby annotations.
  • <section> 標記 定義一個地區
  • <source> 標記 定義媒體資源
  • <time> 標記 定義一個日期/時間
  • <video> 標記 定義一個視頻

希望所有的這些標記都能成為真正”有生命力“的和有用的標記,而不是只是今天看來是很酷的標記。

HTML5 的減負 – 舊的標記,永別了…

你是否很記得那個古老的年代,HTML3被當成一種只能在Netscape裡啟動並執行神奇的東西?是的,那就是互連網時代的黎明初現。我們當然不會忘記那段曆史,但向一些優秀的卻陳舊的東西說再見也是合乎情理的(特別是當它們目前不被認為那麼好用,或已沒有人再注意它們的時候時)。

因此,HTML5的設計者們廢除了一些老的標記,因為這些標準只有那些HTML怪才才會使用,也因為這些標記已經完全失去用處,新的HTML標記裡將不會再包括它們 – 我想我們應該就此感謝這些設計者們。 畢竟是這些標記實在是太老舊了,以至於可以想象,20年後我們的孩子們會認為只有莎士比亞在他的十四行詩裡才會用到。不管怎樣,還是讓我們到互連網博物館裡再看它們一眼吧(真有這樣的博物館嗎?)。

  • <acronym> 標記 定義 an acronym.
  • <applet> 標記 定義 an embedded applet.
  • <basefont> tag specifies a default
    font-color, font-size, or font-family for all the text in a document.
  • <big> tag is used to format the text one
    size bigger, and can be in relation to your <font> or
    <basefont> size, if you’ve specified either one.
  • <center> tag is used to center text.
  • <dir> tag is used to list directory titles.
  • <font> tag specifies the font face, font
    size, and font color of text.
  • <frame> 標記 定義 one particular window
    (frame) within a frameset.
  • <frameset> 標記 定義 a frameset. The
    frameset element holds two or more frame elements. Each frame element
    holds a separate document.
  • <s> and <strike> tags
    define strikethrough text.
  • <tt> tag is used for “typetype” text, or
    fixed-width typewriter-type font. Other than the different type style,
    it has normal font characteristics
  • <u> tag is used to underline text.

這些標記基本上都沒有什麼用處了(也許你會覺得有幾個標記和HTML5裡的新標記有些相似)。其中一些我們在早期的舊版的瀏覽器裡使用過,但如今已經失去其作用,而另一些標記的功能已經被CSS功能所取代了(例如設定字型和文本樣式的標記)。

關於 <DIV> 標記的重要問題

使用新標記替換掉 <div> 標記是HTML5在語義方面的主要成就。這 <div> 標記是HTML4裡是一個重要的(現在仍是)的標記,在HTML裡被廣泛使用,但是它所表達的語義太弱,在聲明網頁組織圖裡不同的區塊的任務面前它毫無用武之地。新的HTML5標記 – 例如 <article><aside><nav><figure>,<header><footer> – 會更有用和更方便,這些標記能夠讓你指明網頁不同地區的用途,清楚的顯示網站的結構。這意味著即使你是個新手或中等的程式員,僅依據HTML代碼就能清楚的瞭解整個頁面的結構 – 更值得一提的是搜尋引擎將會因為能如此方便的解析頁面的結構而會高興的發狂的。

對我們有什麼好處?

關於新標記和語義的價值的討論已經很多,有些人認為這些語義以及可視化表現方式沒有任何意義 – 因為它們帶來的是更複雜的代碼,創造了使用這些新HTML代碼犯新錯誤的機會,HTML5新語義的價值在於提升了網站使用者和這些技術之間的互動和協作的水平,這是使互連網前進的原因。

同樣的道理 – 我們應該明白,就像HTML5給我們的感覺是那樣酷一樣,人們在其上付出了很多的努力,對未來5年互連網的發展寄予厚望。 今天,這些新標記和語義看起來的確是很棒,我們都很喜歡,但別忘了,任何東西都是在不斷變化著來適應人們的需求,新的語言特徵必須依賴於人們的使用,互連網社區的大量使用 – 只有這樣才能使單純的新事物變成有用的新事物。

HTML4和HTML5之間的10個主要不同(轉自http://www.vaikan.com/10-essential-differences-between-html4-and-html5/)   HTML5是最新的HTML標準,或遲或早,所有的web程式員都會發現需要使用到這個最新的標準,而且,很多人都會感覺到,重新開發一個HTML5的網站,要比把一個網站從HTML4遷移到HTML5上容易的多,這是因為這兩個版本之間有很大不同之處。

  事實上,HTML5並沒有對HTML4做什麼重大的修改,它們很多東西都是相似的。

  可是,其中有一些很重要的區別你需要知道。下面列出的就是一些HTML4和HTML5之間主要的不同之處(並不是全部,全部列出來是不可能的):

1. HTML5標準還在制定中

  這頭一個不同之處顯而易見,但非常重要,我需要先從它開始。也許你已經注意到了關於HTML5很酷的言論到處都是,但是事實情況是,HTML5是一個還未完成的標準。HTML4已經有10歲了,但它仍是當前正式的標準的事實沒有改變。

  另一方面,HTML5仍處在早期階段,以後的修改會不斷的出現。你必須考慮到這些,因為你在網站上使用的這些新增加或修改的網頁元素會每年都出現一些變化,你需要不停的更新升級你的網站,這可不是你希望的。這就是目前為止,你最好在產品裡使用HTML4,只在實驗裡使用HTML5的原因。

2. 簡化的文法

  更簡單的doctype聲明是HTML5裡眾多新特徵之一。現在你只需要寫<!doctype html>,這就行了。HTML5的文法相容HTML4和XHTML1,但不相容SGML。

3. 一個替代Flash的新 <canvas> 標記

  對於Web使用者來說,Flash既是一個驚喜,也是一種痛苦。有很多的Web開發人員對HTML5對Flash產生的威脅很不滿。但對於那些忍受著要花幾年時間載入和啟動並執行臃腫的Flash視頻的人來說,用新的 <canvas> 標記產生視頻的技術已經到來。

  目前, <canvas> 標記並不能提供所有的Flash具有的功能,但假以時日,Flash必將從web上淘汰。我們拭目以待,因為很多人還並不認同這種觀點。

4. 新的 <header> 和 <footer> 標記

  HTML5的設計是要更好的描繪網站的解剖結構。這就是為什麼這些<header> 和
<footer> 等新標記的出現,它們是專門為標誌網站的這些部分設計的。

  在開發網站時,你不在需要用<div>標記來標註網頁的這些部分。

5. 新的 <section> 和 <article> 標記

  跟<header> 和 <footer>標記類似,HTML5中引入的新的<section> 和 <article> 標記可以讓開發人員更好的標註頁面上的這些地區。

  據推測,除了讓代碼更有組織外,它也能改善SEO效果,能讓搜尋引擎更容易的分析你的頁面。

6. 新的 <menu> 和 <figure> 標記

  新的<menu>標記可以被用作普通的菜單,也可以用在工具條和右鍵菜單上,雖然這些東西在頁面上並不常用。

  類似的,新的 <figure> 標記是一種更專業的管理頁面上文字和映像的方式。當然,你可以用樣式表來控制文字和映像,但使用HTML5內建的這個標記更適合。

7. 新的 <audio> 和 <video> 標記

  新的<audio> 和 <video> 標記可能是HTML5中增加的最有用處的兩個東西了。正如標記名稱,它們是用來嵌入音頻和視頻檔案的。

  除此之外還有一些新的多媒體的標記和屬性,例如<track>,它是用來提供跟蹤視頻的文字資訊的。有了這些標記,HTML5使Web2.0特徵變得越來越友好。問題在於,在HTML5還未被廣泛的接受之前,Web2.0還是老的Web2.0。

8. 全新的表單設計

  新的 <form> 和 <forminput> 標記對原有的表單元素進行的全新的修改,它們有很多的新屬性(以及一些修改)。如果你經常的開發表單,你應該花時間更詳細的研究一下。

9. 不再使用 <b> 和 <font> 標記

  對我個人來說,這是一個讓我不太理解的改動。我並不認為去除 <b> 和 <font>標記會帶來多大的好處。我知道,官方的指導說這些標記可以通過CCS來做更好的處理,但這樣一來,為了在文章一兩個地方出現的這種標記,你就需要在獨立的css和文本兩個地方來實現這一的功能,豈不笨拙。也許我們以後會習慣這種方法。

10. 不再使用 <frame>, <center>, <big> 標記

  事實上,我已經記不清曾經何時用過這些標記了,所以,我並不為去除這些標記感到悲哀。相同的原因,有更好的標記能實現它們的功能——這很好,任何作廢的標記從標準中剔除都是受歡迎的。

  這10個HTML5和HTML4之間的不同只是整個新的規範中的一小部分。除了這些主要的變動外,我還可以略提一下一些次要的改動,比如修改了<ol> 標記的屬性,讓它能夠倒排序,對<u>標記也做了修改。

  所有這些次要的改動數量眾多。而且新的修改也在不斷的增加,因此,如果你想即時跟蹤最新的動向,你需要經常的查看w3.org的HTML4 和 HTML5之間的不同這個頁面。如果你很心急,想在你的工作中使用這些新的標記和屬性,我勸告你最好只是做實驗,原因已經說的很清楚了,這些新標記和新屬性在將來也許會有很大的改變,所以,除非你不斷的更新你的代碼,它們很可能會到期失效。

  儘管如今大多數流行的瀏覽器的最新版都支援HTML5,但有些新的(或修改的)標記和屬性它們並不支援,所以你的網頁在使用者的螢幕上有可能前後顯示的不一致。耐心等待,等待HTML5真正可以實用時候。目前還不是時候。

html5學習筆記

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.