天天看點
傳回

【基礎html5 基礎知識點】(全)一、新特性二、新增标簽和廢除的标簽 三、新增和廢除的屬性四、全局屬性  任何标簽都可以使用

一、新特性

1.  Doctype更簡單<!DOCTYPE html>

2.  簡單的編碼類型 <meta charset=”utf-8″ />

3.  大小寫都可  <input tYPe="text" name="" id="">

4.  布爾值     <input type="radio" checked> 

5.  可以省略引号   <input type=radio> 

6.  可以進行省略的标簽 

  1） 不允許寫的結束符的标簽：area、basebr、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr

  2）可以省略結束符的标簽：li、dt、dd、p、rt、optgroup、option、colgroup、thread、tbody、tr、td、th

  3）可以完全省略的标簽：html、head、body、colgroup、tbody

二、新增标簽和廢除的标簽

新增的結構标簽

  • section标簽 

    表示頁面中的一個内容區塊,比如章節、頁眉、頁腳或頁面的其他部分。可以和h1、 h2……等标簽結合起來使用，表示文檔結構。例：HTML5中 

    <section>……</section>

     HTML4中

    <div> ……</div>

     。

  • article标簽 

    表示頁面中一塊與上下文不相關的獨立内容。比如一篇文章。

  • aside标簽 

    表示article标簽内容之外的、與article标簽内容相關的輔助資訊。

  • header标簽 

    表示頁面中一個内容區塊或整個頁面的标題。

  • hgroup标簽 

    表示對整個頁面或頁面中的一個内容區塊的标題進行組合。

  • footer标簽 

    表示整個頁面或頁面中一個内容區塊的腳注。一般來說，他會包含創作者的姓名、創作日期以及創作者的聯系資訊。

  • nav标簽 

    表示頁面中導航連結的部分。

  • figure标簽 

    表示一段獨立的流内容，一般表示文檔主體流内容中的一個獨立單元。使用figcaption标簽為figure标簽組添加标題。例如：

    <figure> 
<figcaption>PRC</figcaption> 
 <p>The People's Republic of China was born in 1949</p> 
</figure>
    HTML4中常寫作 
    <dl> 
<h2>prc</h2> 
<p>The People's Republic of China was born in 1949</p> 
</dl>

新增的媒體标簽

  • video标簽 

    定義視訊。像電影片段或其他視訊流。例：

    <video src="movie.ogg" controls="controls">video标簽</video>

     HTML4中寫法： 
    <object type="video/ogg" data="move.ogv">
<param name ="src" value="movie.ogv">
</object>

  • audio标簽 

    定義音頻。如音樂或其他音頻流。例：

    <audio src ="someaudio.wav">audio标簽</audio>

     html4中寫法： 
    <object tyle="application/ogg" data="someaudio.wav"> 
  <param name ="src" value="someaudio.wav"> 
</object>

  • embed标簽 

    用來嵌入内容(包括各種媒體)。格式可以是Midi、Wav、AIFF、AU、MP3,flash等。例：

    <embed src="flash.swf" />

    ; 

    HTML4中代碼示例

    <object data="flash.swf" type="application/x-shockwave-flash"><object>

新增表單控件标簽

  • email 

    必須輸入email

  • url 

    必須輸入url位址

  • number 

    必須輸入數值

  • range 

    必須輸入一定範圍内數值

  • Date Pickers（日期選擇器） 

    擁有多個可供選取日期和時間的新輸入類型： 

    date - 選取日、月、年 

    month - 選取月、年 

    week - 選取周和年 

    time - 選取時間（小時和分鐘） 

    datetime - 選取時間、日、月、年（UTC 時間） 

    datetime-local - 選取時間、日、月、年（本地時間）

  • search 

    用于搜尋域，域顯示為正常的文本域。

  • color

截圖示明表單新增控件：

【基礎html5 基礎知識點】(全)一、新特性二、新增标簽和廢除的标簽 三、新增和廢除的屬性四、全局屬性  任何标簽都可以使用
【基礎html5 基礎知識點】(全)一、新特性二、新增标簽和廢除的标簽 三、新增和廢除的屬性四、全局屬性  任何标簽都可以使用

新增的其他标簽

  • mark标簽 

    主要用來在視覺上向使用者呈現哪些需要突出顯示或高亮顯示的文字。典型應用搜尋結果中高亮顯示搜素關鍵字。 

    HTML5<mark></mark>;HTML4 <span></span>。

  • progress标簽 

    表示運作中的程序，可以使用progress标簽顯示JavaScript中耗時時間函數的程序。等待中……、請稍後等。<progress></progress>。

  • time标簽 

    表示日期或時間，也可以兩者同時。

  • ruby标簽 

    定義 ruby 注釋（中文注音或字元）。 

    與 <ruby> 以及 <rt> 标簽一同使用。ruby 标簽由一個或多個字元（需要一個解釋/發音）和一個提供該資訊的 rt 标簽組成，還包括可選的 rp 标簽，定義當浏覽器不支援 "ruby" 标簽時顯示的内容。 

    <ruby> 

      漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt> 

    </ruby>

  • rt标簽 

    定義字元（中文注音或字元）的解釋或發音。

  • rp标簽 

    在 ruby 注釋中使用，以定義不支援 ruby 标簽的浏覽器所顯示的内容。

  • wbr标簽 

    表示軟換行。與br标簽的差別：br标簽表示此處必須換行；wbr表示浏覽器視窗或父級标簽足弓寬時（沒必要換行時），不換行，而寬度不夠時主動在此處換行。

  • canvas标簽 

    定義圖形，比如圖表和其他圖像。<canvas> 标簽隻是圖形容器（畫布），必須使用腳本來繪制圖形。 

    <canvas id="myCanvas"></canvas>

    <script type="text/javascript"> 

    var canvas=document.getElementById('myCanvas'); 

    var ctx=canvas.getContext('2d'); 

    ctx.fillStyle='#FF0000'; 

    ctx.fillRect(0,0,80,100); 

    </script>

  • command标簽——貌似沒什麼效果。是不是支援有問題 

    表示指令按鈕，比如單選按鈕、複選框或按鈕。

    隻有當 command 标簽位于 menu 标簽内時，該标簽才是可見的。否則不會顯示這個标簽，但是可以用它規定鍵盤快捷鍵。。 

    <menu> 

    <command οnclick="alert('Hello World')"> 

    Click Me!</command> 

    </menu>

  • details标簽 目前隻有 Chrome 支援 details 标簽 

    用于描述文檔或文檔某個部分的細節 。 

    可與 summary 标簽配合使用，summary可以為 details 定義标題。标題是可見的，使用者點選标題時，會顯示出 details。summary應該是details的第一個子标簽。

  • datalist标簽 （類似于百度關鍵詞提示）

    定義選項清單。請與 input 标簽配合使用該标簽，來定義 input 可能的值。datalist 及其選項不會被顯示出來，它僅僅是合法的輸入值清單。使用 input 标簽的 list 屬性來綁定 datalist。 

    <input id="myCar" list="cars" /> 

    <datalist id="cars">

      <option value="BMW"> 

      <option value="Ford"> 

      <option value="Volvo"> 

    </datalist>

  • keygen标簽

    标簽規定用于表單的密鑰對生成器字段。

    當送出表單時，私鑰存儲在本地，公鑰發送到伺服器。

    <form action="demo_keygen.asp" method="get"> 

    Username: <input type="text" name="usr_name" /> 

    Encryption: 

    <keygen name="security" />

    <input type="submit" /> 

    </form>

  • output标簽 

    定義不同類型的輸出，比如腳本的輸出。 

    <form action="form_action.asp" method="get" name="sumform"> 

    <output name="sum"></output> 

    </form>

  • source标簽 

    标簽為媒介标簽（比如 <video> 和 <audio>）定義媒介資源。

  • menu标簽 

    定義菜單清單。當希望列出表單控件時使用該标簽。注意與nav的差別，menu專門用于表單控件。 

    <menu type=""> 有三種類型 

    <li><input type="checkbox" />Red</li> 

    <li><input type="checkbox" />blue</li> 

    </menu>

廢除的标簽

  • 能用css代替的标簽

    basefont、big、center、font、s、strike、tt、u。這些标簽純粹是為畫面展示服務的，HTML5中提倡把畫面展示性功能放在css中統一編輯。

  • 不再使用frame架構。

    frameset、frame、noframes。HTML5中不支援frame架構，隻支援iframe架構，或者用伺服器方建立的由多個頁面組成的符合頁面的形式，删除以上這三個标簽。

  • 隻有部分浏覽器支援的标簽

    applet、bgsound、blink、marquee等标簽。

  • 其他被廢除的标簽

    廢除rb，使用ruby替代。

    廢除acronym使用abbr替代。

    廢除dir使用ul替代。

    廢除isindex使用form與input相結合的方式替代

    廢除listing使用pre替代

    廢除xmp使用code替代

    廢除nextid使用guids

    廢除plaintex使用“text/plian”（無格式正文）MIME類型替代。

三、新增和廢除的屬性

新增的屬性

表單相關的屬性

  • 對input（type=text）、select、textarea與button指定autofocus屬性。它以指定屬性的方式讓标簽在畫面打開時自動獲得焦點。
  • 對input（type=text）、textarea指定placeholder屬性，它會對使用者的輸入進行提示，提示使用者可以輸入的内容。
  • 對input、output、select、textarea、button與fieldset指定form屬性。它聲明屬于哪個表單，然後将其放置在頁面的任何位置，而不失表單之内。
  • 對input（type=text）、textarea指定required屬性。該屬性表示使用者送出時進行檢查，檢查該标簽内必定要有輸入内容。
  • 為input标簽增加幾個新的屬性：autocomplete、min、max、multiple、pattern與step。還有list屬性與datalist标簽配合使用；datalist标簽與autocomplete屬性配合使用。multiple屬性允許上傳時一次上傳多個檔案； pattern屬性用于驗證輸入字段的模式，其實就是正規表達式。step 屬性規定輸入字段的合法數字間隔（假如 step="3"，則合法數字應該是 -3、0、3、6，以此類推），step 屬性可以與 max 以及 min 屬性配合使用，以建立合法值的範圍。
  • 為input、button标簽增加formaction、formenctype、formmethod、formnovalidate與formtarget屬性。使用者重載form标簽的action、enctype、method、novalidate與target屬性。為fieldset标簽增加disabled屬性，可以把它的子标簽設為disabled狀态。
  • 為input、button、form增加novalidate屬性，可以取消送出時進行的有關檢查，表單可以被無條件地送出。
【基礎html5 基礎知識點】(全)一、新特性二、新增标簽和廢除的标簽 三、新增和廢除的屬性四、全局屬性  任何标簽都可以使用
【基礎html5 基礎知識點】(全)一、新特性二、新增标簽和廢除的标簽 三、新增和廢除的屬性四、全局屬性  任何标簽都可以使用

連結相關屬性

  • 為a、area增加media屬性。規定目标 URL 是為什麼類型的媒介/裝置進行優化的。該屬性用于規定目标 URL 是為特殊裝置（比如 iPhone）、語音或列印媒介設計的。該屬性可接受多個值。隻能在 href 屬性存在時使用。
  • 為area增加herflang和rel屬性。hreflang 屬性規定在被連結文檔中的文本的語言。隻有當設定了 href 屬性時，才能使用該屬性。注釋：該屬性是純咨詢性的。rel 屬性規定目前文檔與被連結文檔/資源之間的關系。隻有當使用 href 屬性時，才能使用 rel 屬性。
  • 為link增加size屬性。sizes 屬性規定被連結資源的尺寸。隻有當被連結資源是圖示時 (rel="icon")，才能使用該屬性。該屬性可接受多個值。值由空格分隔。
  • 為base标簽增加target屬性，主要是保持與a标簽的一緻性。

其他屬性

  • 為ol增加reversed屬性，它指定清單倒序顯示。
  • 為meta增加charset屬性
  • 為menu增加type和label屬性。label為菜單定義一個标注，type屬性定義可以menu以上下文菜單、工具條與清單三種形式出現。
  • 為style增加scoped屬性。它允許我們為文檔的指定部分定義樣式，而不是整個文檔。如果使用 "scoped" 屬性，那麼所規定的樣式隻能應用到 style 标簽的父标簽及其子标簽。
  • 為script增減屬性，它定義腳本是否異步執行。async 屬性僅适用于外部腳本（隻有在使用 src 屬性時）有多種執行外部腳本的方法：
    • 如果 async="async"：腳本相對于頁面的其餘部分異步地執行（當頁面繼續進行解析時，腳本将被執行）
    • 如果不使用 async 且 defer="defer"：腳本将在頁面完成解析時執行
    • 如果既不使用 async 也不使用 defer：在浏覽器繼續解析頁面之前，立即讀取并執行腳本
  • 為html标簽增加manifest，開發離線web應用程式時他與API結合使用，定義一個URL，在這個URL上描述文檔的緩存資訊。
  • 為iframe增加撒個屬性，sandbox、seamless、srcdoc。用來提高頁面安全性，防止不信任的web頁面執行某些操作。

新增的屬性在下面的html中可看出作用

<!doctype html>
<html  manifest"cache.manifest"> <!-- 離線檔案應用 -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="pragma" content="no-cache"> <!-- 禁止頁面緩存 -->
    <title>html5新增屬性</title>
    <link rel="icon" href="icon.gif" target="_blank" rel="external nofollow"  type="image/gif" sizes="16x16"> <!-- icon可自定義大小-->
    <base href="http://localhost/" target="_blank" rel="external nofollow"  target="_blank"> <!--相對localhost位址裡的a連結都在新頁面打開-->
    <script defer src="base.js"></script> <!-- 延遲加載 加載完在執行該js-->
    <script async src="base2.js"></script> <!-- 異步加載 加載頁面時即可執行-->
</head>
<body>
    <a media="handheld" href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >手持裝置</a> <!-- 将會對手持裝置進行優化 -->
    <a media="tv" href="" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >電視</a> <!-- 将會對電視裝置進行優化 -->
    <a href="http://www.baidu.com" target="_blank" rel="external nofollow"  href  ref="external ">百度</a><!-- 中文的連結 external:外部連結 -->

    <ol start="5" reversed> <!-- 序列号從5開始的倒序排列 -->
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ol>

    <div>
        <style type="text/css" scoped>
            h1{color:red;}
        </style>
        <h1>上面的scoped隻對本h1有效果</h1>
    </div>

    <iframe seamless srcdoc="HTML_code" src="http://www.baidu.com" ></iframe>
    <!-- 
    seamless:無邊距無邊框
    srcdoc：顯示在架構中的 HTML 内容
    sandbox：（可有三種指派）嚴格安全模式 ，會禁止送出表單，會禁止js腳本，會決定iframe和本頁面是不同的源是跨域的 
    -->
</body>
</html>

廢除的屬性

HTML4中一些屬性在HTML5中不再被使用，而是采用其他屬性或其他方式進行替代。

在HTML 4中使用的屬性 使用該屬性的标簽 在HTML 5中的替代方案
rev link、a rel
charset link、a 在被連結的資源的中使用HTTP Content-type頭标簽
shape、coords a 使用area标簽代替a标簽
longdesc img、iframe 使用a标簽連結到校長描述
target link 多餘屬性，被省略
nohref area 多餘屬性，被省略
profile head 多餘屬性，被省略
version html 多餘屬性，被省略
name img id
scheme meta 隻為某個表單域使用scheme
archive、chlassid、codebose、codetype、declare、standby object 使用data與typc屬性類調用插件。需要使用這些屬性來設定參數時，使用param屬性
valuetype、type param 使用name與value屬性，不聲明之的MIME類型
axis、abbr td、th 使用以明确簡潔的文字開頭、後跟詳述文字的形式。可以對更詳細内容使用title屬性，來使單元格的内容變得簡短
scope td 在被連結的資源的中使用HTTP Content-type頭标簽
align caption、input、legend、div、h1、h2、h3、h4、h5、h6、p 使用CSS樣式表替代
alink、link、text、vlink、background、bgcolor body 使用CSS樣式表替代
align、bgcolor、border、cellpadding、cellspacing、frame、rules、width table 使用CSS樣式表替代
align、char、charoff、height、nowrap、valign tbody、thead、tfoot 使用CSS樣式表替代
align、bgcolor、char、charoff、height、nowrap、valign、width td、th 使用CSS樣式表替代
align、bgcolor、char、charoff、valign tr 使用CSS樣式表替代
align、char、charoff、valign、width col、colgroup 使用CSS樣式表替代
align、border、hspace、vspace object 使用CSS樣式表替代
clear br 使用CSS樣式表替代
compace、type ol、ul、li 使用CSS樣式表替代
compace dl 使用CSS樣式表替代
compace menu 使用CSS樣式表替代
width pre 使用CSS樣式表替代
align、hspace、vspace img 使用CSS樣式表替代
align、noshade、size、width hr 使用CSS樣式表替代
align、frameborder、scrolling、marginheight、marginwidth iframe 使用CSS樣式表替代
autosubmit menu

四、全局屬性  任何标簽都可以使用

HTML 全局屬性清單

= HTML5 中添加的屬性。

屬性 描述
accesskey 規定激活元素的快捷鍵。
class 規定元素的一個或多個類名（引用樣式表中的類）。
contenteditable 規定元素内容是否可編輯。
contextmenu 規定元素的上下文菜單。上下文菜單在使用者點選元素時顯示。
data-* 用于存儲頁面或應用程式的私有定制資料。
dir 規定元素中内容的文本方向。
draggable 規定元素是否可拖動。
dropzone 規定在拖動被拖動資料時是否進行複制、移動或連結。
hidden 規定元素仍未或不再相關。
id 規定元素的唯一 id。
lang 規定元素内容的語言。
spellcheck 規定是否對元素進行拼寫和文法檢查。
style 規定元素的行内 CSS 樣式。
tabindex 規定元素的 tab 鍵次序。
title 規定有關元素的額外資訊。
translate 規定是否應該翻譯元素内容。

全局屬性案例： 

1、data-*  自定義屬性
<input type="text" data-curtime="20140818" name="time" id="time">
<script>
     //js擷取方式
     var  oTime=document.getElementById('time');
     alert(oTime.dataset.curtime)
     //jq擷取方式 
     //$('#time').data('curtime');
</script>

2、hidden
<span hidden>你看不見我</span>

3、spellcheck <!--spellcheck會對這裡輸入的内容進行文法糾錯-->
<textarea spellcheck="true" name="" id="" cols="30" rows="10">
    likke spellcheck會對這裡輸入的内容進行文法糾錯
</textarea>


4、contenteditable <!-- 這裡的内容是可以編輯的 -->
<p contenteditable="true">這裡的内容是可以編輯的</p>

5、desginmode   <!-- 這個是針對js使用的，設定on元素就可編輯 off為不可編輯 -->
<script>
    window.document.designMode="on"; //整個html都可以編輯
</script>
html5 知識點詳解 HTML5新特性 html5新标簽 html5新屬性 html5基礎知識
上一篇: HTML知識點速記
下一篇: MFC将檔案傳輸至FTP伺服器,mfc實作檔案上傳ftp伺服器

繼續閱讀