H5你真的了解嗎?前端大神看過來.

尋夢新聞LINE@每日推播熱門推薦文章,趣聞不漏接❤️

加入LINE好友

1.1什麼是HTML5

首先了解HTMLHTML即超文本標記語言(HyperText Markup language),這是一種語法簡單、結構清晰的語解釋型文檔,他不同於其他的編程語言。 HTML5就是HTML網頁標記語言的第五次重大更新產品,在這個版本中,新功能不斷推出,以幫助Web應用程序的作者,努力提高新元素互操作性。

1.2 HTML5的目標

HTML5他的產生,最簡單的目標就是,用更簡潔的HTML代碼創建更多功能的網頁程序!並且HTML5讓網頁結構變得更加的清楚明了,增加了更加語義化的結構標籤,這樣一個網頁的結構就非常清晰,那個部位顯示的什麼內容,讓人一目了然!

1.3 HTML5的好處

為開發人員節約時間,這句話怎麼理解,因為之前我們所使用的HTML/XHTML在各大瀏覽器之間存在的不兼容問題顯示的非常嚴重的問題,然而HTML5的出現就是為了解決這一個問題,HTML5的目標就是將HTML5網頁上的音視頻、圖像、動畫等等都帶入一個國際標準化!

1.4結構清晰的HTML5

結構清晰的HTML5,在HTML5中增加了主體元素,比如新增的NAV標籤,表示的就是導航的意思,而之間呢,就是用DIV並沒有實際的意義

1.5新增的語義化標籤

1.5.1新增的結構性元素

元素header元素表示頁面中的一個內容區塊或者整個頁面的標題/頭部區域!

元素nav元素表示頁面中的導航鏈接部分。

元素article元素表示頁面中的一塊上下文不相關的的獨立內容,比如一篇文章中的文章。

HTML5的使用方法:

元素

section表示頁面中的一塊內容區塊,比如章節的頁眉、頁腳等等。也可以和Hn(h1、h2..)等一起使用,標示出文檔的結構!

元素footer表示頁面或者是頁面中的一塊區域的頁腳,比如存放文件的創建時間、作者、聯繫方式等等。

1.5.2新增的行內語義性元素

主要完成web頁面具體內容的引用和描述,是豐富內容展示的基礎.

meter:表示特定範圍內的數值,可用於薪水、數量、百分比等。

time:表示時間值。

progress:用來表示進度條,可通過對其max、min、step等屬性進行控制,完成對進度的表示和監事。

video:視頻元素,用於支持和做到視頻文件的直接播放,支持緩沖預載和多種視頻媒體格式。

audio:音頻元素,用於支持和做到音頻文件的直接播放,支持緩沖預載和多種音頻媒體格式。

1.5.3新增的塊級性元素

級塊性元素主要完成web頁面區域的劃分,確保內容的有效分割

aside:用於表達註記、貼士、側欄、摘要、插入的引用等作為補充主體的內容。

figure:是對多個元素進行組合併展示的元素,通常與ficaption聯合使用。

code:表示一段代碼塊。

1.5.4新增的交互性元素

交互性元素主要用於功能性的內容表達,會有一定的內容和數據的關聯,是各種事件的基礎。

details:用來表示一段具體的內容,但是內容默認可能不顯示,通過某種手段(如單擊)與legend交互才會顯示出來。

menu:主要用於交互菜單(曾被廢棄又被重新啟用的元素)。

command:用來處理命令按鈕。

About 尋夢園
尋夢園是台灣最大的聊天室及交友社群網站。 致力於發展能夠讓會員們彼此互動、盡情分享自我的平台。 擁有數百間不同的聊天室 ,讓您隨時隨地都能找到志同道合的好友!