深入解讀HTML 5新語法 助力提高語義價值

2021-05-22 04:46:52 字數 2922 閱讀 8137

作為下一代web開發標準,html 5到底能給開發者帶來什麼?而作為html 5的設計者,他們又是如何根據目前網際網路的現狀對其進行改進,讓開發者使用起來更加的簡單明瞭。

html 5的新標記

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

◆標記 定義一篇文章

◆標記 定義頁面內容部分的側邊欄

◆標記 定義音訊內容

◆標記 定義

◆標記 定義乙個命令按鈕

◆標記 定義乙個下拉列表

◆標記 定義乙個元素的詳細內容

◆標記 定義乙個對話方塊(會話框)

◆標記 定義外部的可互動的內容或外掛程式

◆標記 定義一組**內容以及它們的標題

◆標記 定義乙個頁面或乙個區域的底部

◆標記 定義乙個頁面或乙個區域的頭部

◆標記 定義檔案中乙個區塊的相關資訊

◆標記 定義表單裡乙個生成的鍵值

◆標記 定義有標記的文字

◆標記 定義 measurement within a

predefined range

◆標記 定義導航鏈結

◆標記 定義一些輸出型別

◆標記 定義任務的過程

◆標記是用在ruby annotations 告訴那些不支援 ruby 元素的瀏覽器如何去顯示

◆標記 定義對ruby

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

html 5 的減負

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

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

◆標記 定義 an acronym.

◆tag specifies a default

font-color, font-size, or font-family for all the text in a document.

◆tag is used to format the text one

size bigger, and can be in relation to your or

size, if you』ve specified either one.

◆tag is used to center text.

◆tag is used to list directory titles.

◆tag specifies the font face, font

size, and font color of text.

◆標記 定義 one particular window

(frame) within a frameset.

標記 定義 a frameset. the

frameset element holds two or more frame elements. each frame element

holds a separate document.

◆and tags

define strikethrough text.

◆tag is used for 「typetype」 text, or

fixed-width typewriter-type font. other than the different type style,

it has normal font characteristics

◆tag is used to underline text.

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

關於標記的重要問題

使用新標記替換掉 標記是html 5在語義方面的主要成就。這 標記是html 4裡是乙個重要的的標記,在html裡被廣泛使用,但是它所表達的語義太弱,在宣告網頁組織結構裡不同的區塊的任務面前它毫無用武之地。新的html 5標記,例如 , , , , , – 會更有用和更方便,這些標記能夠讓你指明網頁不同區域的用途,清楚的顯示**的結構。這意味著即使你是個新手或中等的程式設計師,僅依據html**就能清楚的了解整個頁面的結構 – 更值得一提的是搜尋引擎將會因為能如此方便的解析頁面的結構而會高興的發狂的。

對我們有什麼好處?

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

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

HTML5新增語法

html5模式下的 doctype 文件寫法非常簡單,只需要通過一句簡單的 即可實現。比起 html4.01和xhtml2.0時的 doctype 文件寫法,html5模式下的 doctype 文件寫法更簡便。除了文件簡便,其編碼寫法也得到了簡化,只需要指定編碼方式即可。xhtml2.0對大小寫要求...

HTML5新語義化標籤 (一)

1 html4.0開始出現 div span img h1 h6等 2 html5開始出現 header footer main等 3 css2.1開始 widht height background等 4 css3新增 transform border radius等 header 頁首 foot...

HTML5新語義化標籤 (二)

一 分欄布局 column 分欄,將一段文字按照一定寬度分成多個欄目 類似於報紙介面 值 count 分欄的個數 width 分欄的寬度 gap 欄與欄的間距 rule 分欄的邊線 span num all 合併分欄 注 count width 不要一起去寫,容易衝突。二 偽類與偽元素 elem a...