H5與傳統html的區別

這篇文章主要介紹了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元素為媒介元素(例如39000f942b2545a5315c57fa3276f220和b97864c2e0ef2353a16c4d64c7734e92)定義媒介資源
•menu元素表示選單清單
3、新增的input元素
•email 類型表示必須輸入E-main位址的文字輸入方塊
•url 類型表示必須輸入URL位址的文字輸入方塊
•number類型表示必須輸人數值的文字輸入方塊
•range 類型表示必須輸入一定範圍內數字值的文字輸人方塊
HTML5擁有多個可供選取日期和時間的新輸入文字方塊:
•date ——選取日、月、年
•month ——選取月、年
#•week －選取週及年
•time －選取時間(小時與分鐘)
•datetime －一選取時間、日、月、年(UTC 時間)
•datetime.local －選取時間、日、月、年(本地時間)
#三.廢除元素
1、能使用CSS替代的元素
•對乾basefont、big、center、font、s、strike、tt、u這些元素，由於它們的功能都是純粹去畫面展示服務的，而HTML5中提倡把畫面展示性功能放在CSS樣式表中統一編輯，所以這些元素廢除了
2、不再使用frame框架
•對於frame#set元素、frame元素與noframes元素，由於frame框架對網頁可用性有負面影響，在HTML5中已不支援frame框架，只支援iframe框架，或者用伺服器方創建的由多個頁面組成的複合頁面的形式，同時將以上這三個元素廢除。
3、只有部分瀏覽器支援的元素
• 對於applet、bgsound、blink、marquee等元素，由於只有部分瀏覽器支援這些元素，特別是bgsound元素以及marquee元素，只被Internet Explorer所支持，所以在HTML 5中被廢除。其中applet元素可由ernedd元素或object元素取代，bgsound元素可由audio元素取代，marquee可以由JavaScript程式的方式取代
4、其他被廢除的元素：
•廢除rb元素，使用ruby元素替代
•廢除acronym元素，使用abbr元素替代
•廢除dir元素，使用ul元素替代
•廢除isindex元素，使用form元素與input元素結合的方式替代
•廢除listing元素，使用pre元素替代
•廢除xmp元素，使用code元素替代
•廢除nextid元素，使用GUIDS替代
•廢除plaintext元素，使用「text/plian」 MIME類型替代
#四.新增屬性、廢除屬性
一、新增屬性
1、與表單相關屬性
•新增autofocus屬性，它以指定屬性的方式讓元素在畫面開啟時自動獲得焦點；
•新增placeholder屬性，它會對使用者的輸入進行提示，提示使用者可以輸入的內容；
•新增form屬性，聲明它屬於哪個表單，然後將其放置在頁面上任何位置，而不是表單之內；
•新增required屬性，該屬性表示在使用者提交的時候進行檢查，檢查該元素內一定要有輸入內容；
2、與連結相關屬性
•增加media屬性，該屬性規定目標URL是為什麼類型的媒介/設備進行最佳化的，只能在href屬性存在時使用；
•增加hreflang屬性與rel屬性，以保持與a元素、link元素的一致；
3、其他屬性
•屬性reverend，它指定清單倒序顯示；
•為script元素增加async屬性，它定義腳本是否非同步執行；
二、廢除屬性
•能被CSS樣式表取代的屬性全部廢除掉;
•多餘屬性，例如：target、 profile、version等被廢除；
#五.全域屬性
在HTML5中，新增了一個''全域屬性“的概念。所謂全域屬性，是指可以對任何元素都使用的屬性。
1、contentEditable 屬性
• 此屬性允許使用者編輯元素中的內容，可以取得滑鼠焦點，屬性為布林值，可被指定為true或false。另外，該屬性還有個隱藏inherit狀態，為true時，允許編輯，為false時，不允許編輯，未指定時，由inherit決定。
2、designMode 屬性
•此屬性用來決定整個頁面是否可編輯。有兩個屬性“on”與"off"。屬性為"on"時，可編輯，為「off」時，不可編輯。
3、hidden屬性
•All elements are allowed to use a hidden attribute, which is similar to the hidden element in the input element. Its function is to notify the browser not to render the element and make the element invisible. The attribute value is a Boolean value. When it is true, it is invisible; when it is false, it is visible.
4. Spellcheck attribute
•This attribute is a new attribute provided by HTML 5 for the two text input boxes of input element (type=text) and textarea. It mainly checks the user input content. Spelling and grammar check. The attribute value is a Boolean value. When writing, you must clearly state that the attribute value is true or false. The writing method is as follows:
a81519aefe67ddc1abeec156ca0ccd9a 552ac683c0f554e98a10af6771e392eb 6c928bdf2ad5e19a27ffcb03b46ec6f6 2a88788075306ecf55e9ceb271350ffd d489b9a5e4af6b2126b2d690798c190e
Detailed explanation of form attribute
In HTML4 In HTML5, the subordinate elements within the form must be written inside the form, but in HTML5, they can be written anywhere on the page, and then give the element a form attribute. The attribute value is the id of the form unit, so that you can declare the The element belongs to the specified form.

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】

1. HTML5 Free Video Tutorial

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中文網其他相關文章！