這篇文章主要介紹了HTML5學習筆記之html5與傳統html區別的相關資料,需要的朋友可以參考下 一. HTML5語法的改變
該知識點所說變化指的是基於HTML4基礎上所定義的改變,主要有如下:
1.HTML5的檔案副檔(.html或.htm)與內容類型(text/html)保持不變。
2.HTML5中,刻意不使用版本聲明,一份文件將會適用於所有版本的HTML。
3.從HTML5開始,對於檔案的字元編碼推薦使用UTF-8。
4.HTML5確保了與先前HTML版本的最大程度的相容性。
為了確保相容性,需從元素說起,在HTML5.中,元素的標記可以省略。其體來說,元素的標記分為「不允許寫結束標記」、「可以省略結束標記」和『「開始標記和結束標記全部可以省略」三種類型。
• 不允許寫結束標記元素有:area、base、br、col.....
• 可以省略結束標記:li、dt、dd、p、rt......
• 開始標記和結束標記全部可以省略:html、head、body.....
#二.新增的結構元素
•section元素表示頁面中的一個內容區塊,例如章節、頁首、頁尾或頁面中的其他部分;
•article元素表示頁面中的一塊與上下文不相關的獨立內容,譬如博客中的一篇文章或報紙中的一篇文章;
•aside元素表示article元素的內容之外的、與article元素的內容相關的輔助信息;
•header元素表示頁面中一個內容區塊或整個頁面的標題;
•hgroup元素用於對整個頁面或頁面中一個內容區塊的標題進行組合;
•footer元素表示整個頁面或頁面中一個內容區塊的腳註。一般來說,它會包含創作者的姓名、創作日期以及創作者聯絡資訊;
•nav元素表示頁面中導航連結的部分;
•figure元素表示一段獨立的流內容,一般表示文檔主體流內容中的一個獨立單元,使用figcaption元素為figure元素組添加標題
2、新增的其他元素
•audio元素定義音訊,例如音樂或其他音訊串流;
•embed元素用來插入各種多媒體,格式可以是Midi、Wav、AU、MP3等;
•mark 元素上要用來在視覺上向使用者呈現那些需要突出顯示或高亮顯示的文字,典型應用就是在搜尋#結果中向使用者高亮顯示搜素關鍵字;
•progress 元素表示執行中的程序
•ruby元素表示ruby註解(中文註音或字元)
•rt元素表示字元(中文註音或字元)的解釋或發音
•rp元素在ruby註解中使用,以定義不支援ruby素的瀏覽器所顯示的內容。
•wbr元素表示軟體換行,而當寬度不夠時,主動在此處進行換行
•canvas元素表示圖形,例如圖表和其他圖像
•cammand元素表示指令按鈕,例如單選按鈕、複選框或按鈕
•details元素表示使用者要求得到且可以得到的細節資訊
• datagrid元素表示可選資料的列表,它以樹狀列表的形式來顯示
•keygen元素表示產生金鑰
•output元素表示不同類型的輸出,例如腳本的輸出
•source元素為媒介元素(例如
The code is as follows:
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>form属性</title> </head> <body> <form action="" id="testform"> <input type="text" name="" /> </form> <textarea form="testform" name="" cols="30" rows="10"></textarea> </body> </html>
The input element belongs to the form. It is written inside the form, and there is no need to set the form attribute for it. The textarea element is written outside the form, but it is subordinate to the form, so the id of the form is set to the form attribute of the textarea element.
The advantage of this is that when you need to add styles to the elements on the page, you can add them more conveniently, because they are no longer scattered among the forms.
【Related Recommendations】
2. The input box appears when making a virtual keyboard in H5 What to do if there is occlusion?
3. Detailed explanation of the method of implementing full-screen playback on WeChat in HTML5
4. Detailed explanation of browser compatibility issues with H5 new tags
5. Overall overview of how to use H5 to create web pages
以上是H5與傳統html的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章!