HTML5基本特性和新功能


HTML5的基本特征

1、向前兼容性

核心理念——平滑過渡!

不支持html5的瀏覽器可以向前兼容,並不會影響web內容的顯示!

2、跨平台運行性

從pc瀏覽器到手機、平板電腦,甚至是智能電視。

只要用戶的設備支持HTML5,基於HTML5的web程序就可以無障礙的運行!

3、簡單易用性

相對HTML4.01,HTML5更加簡單實用。

沒有XHTML2.0那樣嚴格的語法規則。

(<HTML5的屬性精簡表示方法可以大大提高html文本的傳輸效率!> <HTML5 Web Form提供一套強大的表單驗證機制,無需冗長的JS代碼驗證!>)

4、用戶友好性

強化web頁面的變現性能:Audio、video、canvas 等標簽元素的引入;

提高用戶體驗度:地理位置服務、本地數據存儲、文件上傳、離線應用等新特性。

 

 HTML5的新功能

1、簡化的DOCTYPE聲明

HTML4.01標准版本的DOCTYPE的聲明

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://ww.w3.org/TR/html4/strict.dtd"> 

HTML4.01過度版本的DOCTYPE的聲明

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://ww.w3.org/TR/html4/loose.dtd"> 

HTML4.01基於框架的HTML文檔版本的DOCTYPE的聲明

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://ww.w3.org/TR/html4/frameset.dtd"> 

HTML5中的DOCTYPE聲明(對字母大小寫不敏感)

<!DOCTYPE HTML>

2、簡化的編碼字符集

對於HTML4.01標准編碼字符集聲明

<meta http = "Content-Type" content = "text/html;chatset = utf-8">

HTML5的編碼字符集聲明

<metachatset = "utf-8">

3、簡化的樣式表和腳本引入

HTML4.01標准的html文檔中引入的樣式表和腳本文本

<link href = "test.css" type = "text/css" rel = "stylesheet"> 
<script src = "test.js" type = "text/javascript"></script>

HTML5中標准的html文檔引入的樣式文本和腳本文本

<link href = "test.css" rel = "stylesheet">
<script src = "test.js"></scritpt>

4、新增的全局屬性

contenteditable屬性(true:表示設置HTML元素可編輯。 false:默認值,設置HTML元素不可編輯! )

<p contenteditable = "true">可編輯的內容</p>
<p contenteditable = "false">不可編輯的內容</p>

spellcheck屬性(true/false :是否對用戶輸入的內容進行語法拼寫檢查,若檢查不通過,下划線標注)

<label for = "input">內容</label>
<input type = "text" id = “input” spellcheck = "ture">

draggable屬性(true/false:制定html元素是否可進行拖動。用法同contentditable一樣)

dropzone屬性(屬性如下,用來規定當元素被拖動時發生的動作!)

dropzone屬性 說明
copy 創建拖動元素的一個副本
link 將拖動元素移動到一個新的位置
move 創建拖動元素的鏈接

 

 

 

hidden屬性(默認顯示)

<label>輸入框隱藏:<input type = “text”  hidden></label>
<label>輸入框顯示:<input type = “text”></label>

5、語義化標簽之文檔元素(不理解語義化的可以參考——“讓標簽語義化成為一種習慣”博文)

header標簽 :用來定義一個文檔結構的“頁眉”。通常情況下,會和h1-h6標簽和hgroup標簽組合,表示一個內容塊的標題,或者是包含一個搜索框、導航欄、logo等欄目;

1 /*未用CSS進行格式控制*/
2 <header>
3     <hgroup>
4         <h1>HTML5</h1>
5         <h4>語義化標簽之文檔元素</h4>
6     </hgroup>
7     <input type="search" results="9">
8 </header>

footer標簽 :用來定義一個文檔結構的“頁眉”。通常用來表示文檔的作者信息、相關鏈接,版權資料等;

1 <footer>
2     作者:<em>wanglehui</em> 
3     工作單位:<em>CSUST Ddream Stadion </em>
4 </footer>

hgroup標簽 :用來定義一個文檔中標題組。即一個內容塊包含主標題和多個副標題時,多個h1-h6標簽可以放在hgroup標簽里面;

1 <hgroup>
2    <h1>HTML5</h1>
3    <h4>語義化標簽之文檔元素</h4>
4 </hgroup>

nav標簽:用來定義一個文檔中的導航區域,通常只用於頁面的主要導航,側邊欄導航不適用;

1 <nav>
2    <ul>
3     <li>nav部分一</li>
4     <li>nav部分二</li>
5     <li>(nav部分)</li>
6    </ul>
7 </nav>

article標簽:用來定義一個文檔中自成一體的東西,比如,論壇的帖子、博客的文章或者用戶的評論。通常article標簽里面有header、footer等標簽。也可以自己嵌套使用;

 1 <article>
 2     <header>
 3         <h2>語義化標簽之文檔元素</h2>
 4     </header>    
 5     <p>文章內容....</p>
 6     <article>
 7         <h2>評論</h2>
 8         <article>
 9             <header>
10                 <h3>評論者:訪客甲</h3>
11             </header>
12             <p>甲的評論內容</p>
13         </article>
14         <article>
15             <header>
16                 <h3>評論者:訪客乙</h3>
17             </header>
18             <p>乙的評論內容</p>
19         </article>
20     </article>
21     <footer>
22         作者:<em>wanglehui</em> 
23         工作單位:<em>CSUST Ddream Stadion</em>
24     </footer>
25 </article>

section標簽:用來定義一個文檔結構中的“章節”內容,section和article的區別:article定義的是一個文檔的獨立版塊,是一個容器元素。而section定義的是一個文檔中的組成部分,和父標簽是從屬關系。article和section之間允許相互嵌套;

 1 <section>
 2     <h1>語義化</h1>
 3     <article>
 4         <h2>HTML5新功能介紹</h2>
 5         <p>介紹內容...</p>
 6         <section>
 7             <h3>其他內容</h3>
 8             <p>內容介紹....</p>
 9         </section>
10     </article>
11 </section>

aside標簽:通常包含在article標簽中作為主要內容的附屬信息部分。因此,aside和article常常組合使用,用來作為頁面或站點全局的附屬信息部分。

 1 <article>
 2     <h2>HTML5新功能介紹</h2>
 3     <p>介紹內容...</p>
 4     <aside>
 5         <h1>附屬信息</h1>
 6         <p>附屬信息內容。。。。</p>
 7     </aside>
 8     <footer>
 9     作者:<em>wanglehui</em> 
10     工作單位:<em>CSUST Ddream Stadion</em>
11     </footer>
12 </article>

6、語義化標簽之文本元素(不理解語義化的可以參考——“讓標簽語義化成為一種習慣”博文)

b 標簽:bold 定義加粗文本;

i 標簽:Italic 定義傾斜文本;

u 標簽:underline 定義下划線文本;

1 <b>HTML5新功能</b> <br/><br/>
2 <i>HTML5新功能</i> <br/><br/>
3 <u>HTML5新功能</u> <br/><br/>

code 標簽:定義計算機代碼文本,通常指單行的代碼。多行代碼用pre標簽;
pre 標簽:用來定義與格式化的文本。也就是說可以保留原有的空格和換行符,用途:顯示長代碼。

 1 <code>
 2     //This is a javascript code.<br/>
 3     function foo(){
 4         alert("警告");
 5     }
 6 </code>
7 <pre> 8 //This is a javascript code.<br/> 9 function foo(){ 10 alert("警告"); 11 } 12 </pre>

標簽:quote 用來定義引用文本,q標簽用來標記的是一行文本。

cite 標簽:用來定義引用文本,與q不同的是,cite標簽引用的通常是書籍雜志的標題。

blockquote 標簽:用來標記長文本引用,和q不同的是,q標簽用來標記的是一行文本。

1 <q>今朝有酒今朝醉,明日愁來明日愁</q><br/><br/>
2 <q>今朝有酒今朝醉,明日愁來明日愁<cite>——唐·羅隱《自遣》</cite></q>
3 <blockquote> 4 得即高歌失即休,多愁多恨亦悠悠。 5 今朝有酒今朝醉,明日愁來明日愁。 6 </blockquote>

time 標簽:定義一個時間顯示文本,有兩個屬性。datetime:定義元素的日期和時間,如果未定義該屬性,則必須在元素的內容中規定日期或時間。pubdate:定義特定文檔的發布時間。(在瀏覽器中沒有實際的效果)

1 <p>我們在每天早上 <time>9:00</time> 開始營業。</p>
2 
3 <p>我在 <time datetime="2008-02-14">情人節</time> 有個約會。</p>

注釋:<time> 標簽不會在任何瀏覽器中呈現任何特殊效果。且目前主流瀏覽器都不支持time標簽。

<time> 標簽定義公歷的時間(24 小時制)或日期,時間和時區偏移是可選的。

該元素能夠以機器可讀的方式對日期和時間進行編碼,這樣,舉例說,用戶代理能夠把生日提醒或排定的事件添加到用戶日程表中,搜索引擎也能夠生成更智能的搜索結果。

 總結:總結的不是很全面,目前用的也不是很熟練。都是寫基礎的知識,望大家能指出其中不足的地方,O(∩_∩)O謝謝!

參考書籍:【HTML5+CSS3技術應用】——郭小成


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM