整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          HTML5 新增的標簽

          增的結構標簽

          section元素

          表示頁面中的一個內容區塊,比如章節、頁眉、頁腳或頁面的其他部分。可以和h1、 h2...等元素結合起來使用,表示文檔結構。

          例:HTML5中<section>...</section>;HTML4中<div>...</div>。


          article元素

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


          aside元素

          表示article元素內容之外的、與article元素內容相關的輔助信息。


          header元素

          表示頁面中一個內容區塊或真個頁面的標題。


          hgroup元素

          表示對真個頁面或頁面中的一個內容區塊的標題進行組合。


          footer元素

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


          nav元素

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


          figure元素

          表示一段獨立的流內容,一般表示文檔主體流內容中的一個獨立單元。使用figcaption元素為figure元素組添加標題。

          figure 定義媒介內容的分組, 以及它們的標題。

          figcaption 定義 figure 元素的標題。

          例如:

          <figure>
          <figcaption>PRC</figcaption>
          <p>The People's Republic of China was born in 1949</p>
          </figure>

          HTML4中常寫作

          <dl>
          <h1>prc</h1>
          <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>


          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 onclick="alert('Hello World')">
          Click Me!</command>
          </menu>


          details標簽

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

          可與 summary 標簽配合使用,summary可以為 details 定義標題。

          標題是可見的,用戶點擊標題時,會顯示出 details。summary應該是details的第一個子元素。

          <details>
          <summary>迪麗熱巴</summary>
          <p>迪麗熱巴(Dilraba),1992年6月3日出生于新疆烏魯木齊市,中國內地影視女演員。</p>
          </details>

          fieldset標簽

          組合表單中的相關元素

          fieldset 標簽用于從邏輯上將表單中的元素組合起來。

          legend 標簽為 fieldset 元素定義標題。

          <form>
          <fieldset>
          <legend>健康信息</legend>
          身高:<input type="text" />
          體重:<input type="text" />
          </fieldset>
          </form>

          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>

          datagrid標簽 如何用?

          定義可選數據的列表。datagrid 作為樹列表來顯示。

          如果把 multiple 屬性設置為 true,則可以在列表中選取一個以上的項目。

          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>
          <li><input type="checkbox" />Red</li>
          <li><input type="checkbox" />blue</li>
          </menu>

          abbr: 標記一個縮寫

          The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.

          顯示結果

          The PRC was founded in 1949.

          mark標簽

          定義有記號的文本。

          <mark>有記號的文本</mark>

          progress 定義任何類型的任務的進度。

          <progress min="0" max="100" value="60"></progress>

          TML5 元素有多種維度展示方式,常見以下:

          • 1.按照類別分類
          • 2.按照是否Block元素

          按照類別分:

          根元素

          • - html 代表 HTML 或 XHTML 文檔的根。其他所有元素必須是這個元素的子節點。
          • 文檔元數據
          • head 代表關于文檔元數據的一個集合,包括腳本或樣式表的鏈接或內容。
          • title 定義文檔的標題,將顯示在瀏覽器的標題欄或標簽頁上。該元素只能包含文本,包含的標簽不會被解釋。
          • base 定義頁面上相對 URL 的基準 URL。
          • link 用于鏈接外部的 CSS 到該文檔。
          • meta 定義其他 HTML 元素無法描述的元數據。
          • style 用于內聯 CSS。
          • -
          • 腳本
          • script 定義一個內聯腳本或鏈接到外部腳本。腳本語言是 JavaScript。
          • noscript 定義當瀏覽器不支持腳本時顯示的替代文字。
          • template 這個元素在 HTML5 中加入 通過 JavaScript 在運行時實例化內容的容器。
          • -
          • 章節
          • body 代表 HTML 文檔的內容。在文檔中只能有一個 元素。
          • section 這個元素在 HTML5 中加入 定義文檔中的一個章節。
          • nav 這個元素在 HTML5 中加入 定義只包含導航鏈接的章節。
          • article 這個元素在 HTML5 中加入 定義可以獨立于內容其余部分的完整獨立內容塊。
          • aside 這個元素在 HTML5 中加入 定義和頁面內容關聯度較低的內容——如果被刪除,剩下的內容仍然很合理。
          • h1~ h6 標題元素實現了六層文檔標題,h1 是最大的標題,h6 是最小的標題。標題元素簡要地描述章節的主題。
          • header 這個元素在 HTML5 中加入 定義頁面或章節的頭部。它經常包含 logo、頁面標題和導航性的目錄
          • footer 這個元素在 HTML5 中加入 定義頁面或章節的尾部。它經常包含版權信息、法律信息鏈接和反饋建議用的地址。
          • address 定義包含聯系信息的一個章節。
          • main 這個元素在 HTML5 中加入 定義文檔中主要或重要的內容。
          • -
          • 內容組織
          • p 定義一個段落。
          • hr 代表章節、文章或其他長內容中段落之間的分隔符。
          • pre 代表其內容已經預先排版過,格式應當保留 。
          • blockquote 代表引用自其他來源的內容。
          • ol 定義一個有序列表。
          • ul 定義一個無序列表。
          • li 定義列表中的一個列表項。
          • dl 定義一個定義列表(一系列術語和其定義)。
          • dt 代表一個由下一個
          • 定義的術語。
          • dd 代表出現在它之前術語的定義。
          • figure 這個元素在 HTML5 中加入 代表一個和文檔有關的圖例。
          • figcaption 這個元素在 HTML5 中加入 代表一個圖例的說明。
          • div 代表一個通用的容器,沒有特殊含義。
          • -
          • 文字展示
          • a 代表一個鏈接到其他資源的超鏈接 。
          • em 代表強調 文字。
          • strong 代表特別重要 文字。
          • small 代表注釋 ,如免責聲明、版權聲明等,對理解文檔不重要。
          • s 代表不準確或不相關 的內容。
          • cite 代表作品標題 。
          • q 代表內聯的引用 。
          • dfn 代表一個術語包含在其最近祖先內容中的定義 。
          • abbr 代表省略 或縮寫 ,其完整內容在 title 屬性中。
          • data 這個元素在 HTML5 中加入 關聯一個內容的機器可讀的等價形式 (該元素只在 WHATWG 版本的 HTML 標準中,不在 W3C 版本的 HTML5 標準中)。
          • time 這個元素在 HTML5 中加入 代表日期 和時間 值;機器可讀的等價形式通過 datetime 屬性指定。
          • code 代表計算機代碼 。
          • var 代表代碼中的變量 。
          • samp 代表程序或電腦的輸出 。
          • kbd 代表用戶輸入 ,一般從鍵盤輸出,但也可以代表其他輸入,如語音輸入。
          • sub,- sup 分別代表下標 和上標 。
          • i 代表一段不同性質 的文字,如技術術語、外文短語等。
          • b 代表一段需要被關注 的文字。
          • u 代表一段需要下劃線呈現的文本注釋,如標記出拼寫錯誤的文字等。
          • mark 這個元素在 HTML5 中加入 代表一段需要被高亮的引用 文字。
          • ruby 這個元素在 HTML5 中加入 代表被ruby 注釋 標記的文本,如中文漢字和它的拼音。
          • rt 這個元素在 HTML5 中加入 代表ruby 注釋 ,如中文拼音。
          • rp 這個元素在 HTML5 中加入 代表 ruby 注釋兩邊的額外插入文本 ,用于在不支持 ruby 注釋顯示的瀏覽器中提供友好的注釋顯示。
          • bdi 這個元素在 HTML5 中加入 代表需要脫離 父元素文本方向的一段文本。它允許嵌入一段不同或未知文本方向格式的文本。
          • bdo 指定子元素的文本方向 ,顯式地覆蓋默認的文本方向。
          • span 代表一段沒有特殊含義的文本,當其他語義元素都不適合文本時候可以使用該元素。
          • br 代表換行 。
          • wbr 這個元素在 HTML5 中加入 代表建議換行 (Word Break Opportunity) ,當文本太長需要換行時將會在此處添加換行符。
          • -
          • 文字編輯
          • ins 定義增加 到文檔的內容。
          • del 定義從文檔移除 的內容。
          • -
          • 圖片等資源展示
          • img 代表一張圖片 。
          • iframe 代表一個內聯的框架 。
          • embed 這個元素在 HTML5 中加入 代表一個嵌入 的外部資源,如應用程序或交互內容。
          • object 代表一個外部資源 ,如圖片、HTML 子文檔、插件等。
          • param 代表 - object 元素所指定的插件的參數 。
          • video 這個元素在 HTML5 中加入 代表一段視頻 及其視頻文件和字幕,并提供了播放視頻的用戶界面。
          • audio 這個元素在 HTML5 中加入 代表一段聲音 ,或音頻流 。
          • source 這個元素在 HTML5 中加入 為 - video 或 - audio 這類媒體元素指定媒體源 。
          • track 這個元素在 HTML5 中加入 為 - video 或 - audio 這類媒體元素指定文本軌道(字幕) 。
          • canvas 這個元素在 HTML5 中加入 代表位圖區域 ,可以通過腳本在它上面實時呈現圖形,如圖表、游戲繪圖等。
          • map 與 - area 元素共同定義圖像映射 區域。
          • area 與 - map 元素共同定義圖像映射 區域。
          • svg 這個元素在 HTML5 中加入 定義一個嵌入式矢量圖 。
          • math 這個元素在 HTML5 中加入 定義一段數學公式 。
          • -
          • 表格
          • table 定義多維數據 。
          • caption 代表表格的標題 。
          • colgroup 代表表格中一組單列或多列 。
          • col 代表表格中的列 。
          • tbody 代表表格中一塊具體數據 (表格主體)。
          • thead 代表表格中一塊列標簽 (表頭)。
          • tfoot 代表表格中一塊列摘要 (表尾)。
          • tr 代表表格中的行 。
          • td 代表表格中的單元格 。
          • th 代表表格中的頭部單元格 。
          • -
          • 表單
          • form 代表一個表單 ,由控件組成。
          • fieldset 代表控件組 。
          • legend 代表 - fieldset 控件組的標題 。
          • label 代表表單控件的標題 。
          • input 代表允許用戶編輯數據的數據區 (文本框、單選框、復選框等)。
          • button 代表按鈕 。
          • select 代表下拉框 。
          • datalist 這個元素在 HTML5 中加入 代表提供給其他控件的一組預定義選項 。
          • optgroup 代表一個選項分組 。
          • option 代表一個 - select 元素或 - datalist 元素中的一個選項
          • textarea 代表多行文本框 。
          • keygen 這個元素在 HTML5 中加入 代表一個密鑰對生成器 控件。
          • output 這個元素在 HTML5 中加入 代表計算值 。
          • progress 這個元素在 HTML5 中加入 代表進度條 。
          • meter 這個元素在 HTML5 中加入 代表滑動條 。
          • -
          • 導航等交互元素
          • details 這個元素在 HTML5 中加入 代表一個用戶可以(點擊)獲取額外信息或控件的小部件 。
          • summary 這個元素在 HTML5 中加入 代表 - details 元素的綜述 或標題 。
          • menuitem 這個元素在 HTML5 中加入 代表一個用戶可以點擊的菜單項。
          • menu 這個元素在 HTML5 中加入 代表菜單。

          按照是否Block元素分:

          • 1.Empty Elements
          • area 與 map 元素共同定義圖像映射 區域。
          • base 定義頁面上相對 URL 的基準 URL。
          • basefont 4.0種標簽,目前已廢棄
          • br 代表換行 。
          • col 代表表格中的列 。
          • frame 4.0種標簽,目前已廢棄
          • hr 代表章節、文章或其他長內容中段落之間的分隔符。
          • img 代表一張圖片 。
          • input 代表允許用戶編輯數據的數據區 (文本框、單選框、復選框等)。
          • isindex 4.0種標簽,目前已廢棄
          • link 用于鏈接外部的 CSS 到該文檔。
          • meta 定義其他 HTML 元素無法描述的元數據。
          • param 代表 object 元素所指定的插件的參數
          • embed 代表一個嵌入 的外部資源,如應用程序或交互內容
          • -
          • 2.Block Elements
          • address 定義包含聯系信息的一個章節
          • applet 4.0種標簽,目前已廢棄
          • blockquote 代表引用自其他來源的內容。
          • button 代表按鈕
          • center 4.0種標簽,目前已廢棄
          • dd 代表出現在它之前術語的定義
          • del 定義從文檔移除 的內容。
          • dir 4.0種標簽,目前已廢棄
          • div 代表一個通用的容器,沒有特殊含義
          • dl 定義一個定義列表(一系列術語和其定義)
          • dt 代表一個由下一個 dd 定義的術語
          • fieldset 代表控件組
          • form 代表一個表單 ,由控件組成
          • frameset 4.0種標簽,目前已廢棄
          • hr 代表章節、文章或其他長內容中段落之間的分隔符
          • iframe 代表一個內聯的框架
          • ins 定義增加 到文檔的內容
          • isindex 4.0種標簽,目前已廢棄
          • li 定義列表中的一個列表項
          • map 與 area 元素共同定義圖像映射 區域
          • menu 代表菜單
          • noframes
          • noscript 定義當瀏覽器不支持腳本時顯示的替代文字
          • object 代表一個外部資源 ,如圖片、HTML 子文檔、插件等
          • ol 定義一個有序列表
          • p 定義一個段落
          • pre 代表其內容已經預先排版過,格式應當保留
          • script 定義一個內聯腳本或鏈接到外部腳本。腳本語言是 JavaScript
          • table 定義多維數據
          • tbody 代表表格中一塊具體數據 (表格主體)
          • td 代表表格中的單元格
          • tfoot 代表表格中一塊列摘要 (表尾)
          • th 代表表格中的頭部單元格
          • thead 代表表格中一塊列標簽 (表頭)
          • tr 代表表格中的行
          • ul 定義一個無序列表
          • -
          • 3.Inline Elements
          • a 代表一個鏈接到其他資源的超鏈接
          • abbr 代表省略 或縮寫 ,其完整內容在 title 屬性中
          • acronym 4.0種標簽,目前已廢棄
          • applet 4.0種標簽,目前已廢棄
          • b 代表一段需要被關注 的文字
          • basefont 4.0種標簽,目前已廢棄
          • bdo 指定子元素的文本方向 ,顯式地覆蓋默認的文本方向
          • big 4.0種標簽,目前已廢棄
          • br 代表換行
          • button 代表按鈕
          • cite 代表作品標題
          • code 代表計算機代碼
          • del 定義從文檔移除 的內容
          • dfn 代表一個術語包含在其最近祖先內容中的定義
          • em 代表強調 文字
          • font 4.0種標簽,目前已廢棄
          • i 代表一段不同性質 的文字,如技術術語、外文短語等
          • iframe 代表一個內聯的框架
          • img 代表一張圖片
          • input 代表允許用戶編輯數據的數據區 (文本框、單選框、復選框等)
          • ins 定義增加 到文檔的內容
          • kbd 4.0種標簽,目前已廢棄
          • label 代表表單控件的標題
          • map 與 area 元素共同定義圖像映射 區域
          • object 代表一個外部資源 ,如圖片、HTML 子文檔、插件等
          • q 代表內聯的引用
          • s 代表不準確或不相關 的內容
          • samp 代表程序或電腦的輸出
          • script 定義一個內聯腳本或鏈接到外部腳本。默認腳本語言是 JavaScript
          • select 代表下拉框
          • small 代表注釋 ,如免責聲明、版權聲明等,對理解文檔不重要
          • span 代表一段沒有特殊含義的文本,當其他語義元素都不適合文本時候可以使用該元素
          • strike 4.0種標簽,目前已廢棄
          • strong 代表特別重要 文字
          • sub 代表下標
          • sup 代表上標
          • textarea 代表多行文本框
          • tt 4.0種標簽,目前已廢棄
          • u 4.0種標簽,目前已廢棄
          • var 代表代碼中的變量
          • -

          參考文獻:

          • https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list
          • 本文作者:前端首席體驗師(CheongHu)
          • 聯系郵箱:simple2012hcz@126.com
          • 版權聲明: 本文章除特別聲明外,均采用 CC BY-NC-SA 4.0 許可協議。轉載請注明出處!

          .<h1></h1>:標題

          2.<strong></strong>:加粗

          <em></em>:斜線

          <ins></ins>:下劃線

          <del></del>:刪除線

          3.<div></div>:一個占一行的格子

          <span></span>:一個占一格的格子

          4.<p></p>:一個段落

          </br>:單標簽 換行

          5.<img src=”圖像的路徑和文件名”/>:圖像標簽 注意:圖片要和vscode放在一個文件夾

          alt:替換文本 圖像顯示不出來的時候用文字替換 (顯示不出來就是地址填錯啥的)

          使用方法:<img src=”圖像的路徑和文件名” alt=“這是一個魔方的圖片” />

          Title:提示文本 鼠標放到圖像上提示的文字

          使用方法:<img src=”圖像的路徑和文件名” alt=“這是一個魔方的圖片” title=” 這是一個魔方的圖片“ />

          6.<width>:設定圖像寬度

          <height>:設定圖像高度

          <border>:給圖像設定邊框

          /:下一級

          ../:上一級

          7.<a></a>:鏈接標簽

          <a href=”外部鏈接or內部鏈接” target=”打開窗口的方式1._self 當前窗口打開頁面 2._blank 新窗口打開頁面”/> 默認是_self

          <a href=”#”></a>:空鏈接

          <a href=”壓縮包的名稱”></a>:下載鏈接

          <a herf=”外部鏈接”><img src=”圖片地址名稱”></a>:點擊圖片到外部鏈接

          錨點鏈接:點擊鏈接快速到達頁面的某個位置

          8.注釋<!—“”--> 快捷鍵:ctrl+/

          9.特殊字符:  :空格

          <:小于號<

          >: 大于號>

          8.<th></th>:表頭單元格 內部字會居中并且加粗

          <tr></tr>:行

          <td></td>:列

          Cellpadding=””:文字與單元格之間的間隙

          Rowspan:跨行合并單元格

          Colspan:跨列合并單元格

          Align=“center left right”:讓表格所在頁面的位置

          Border:邊框

          Cellspacing:單元格與邊框之間的距離

          <thead>:表格頭部區域標簽

          <tbody>:表格主題區域標簽

          Bgcolor:表格背景顏色

          <input type=”text”>:一個框

          <intput type=”checkbox”>:勾選正方形框

          <input type=”radio”>:勾選圓圈框

          若有不足,請大佬出手指點。


          主站蜘蛛池模板: 国产一区二区三区在线2021| 麻豆AV天堂一区二区香蕉| 一区二区亚洲精品精华液| 性色AV 一区二区三区| 亚洲国产老鸭窝一区二区三区| 福利在线一区二区| av一区二区三区人妻少妇| 中文字幕乱码一区二区免费| 一区二区网站在线观看| 人妻在线无码一区二区三区| 竹菊影视欧美日韩一区二区三区四区五区 | 日韩免费无码一区二区视频| 一区二区三区四区在线播放| 中文字幕一区二区三区精华液| 手机福利视频一区二区| 精品人无码一区二区三区| 亚洲AV午夜福利精品一区二区| 国产精品污WWW一区二区三区| 午夜视频久久久久一区| 国产成人综合亚洲一区| 国产一区二区在线观看麻豆| 国产精品亚洲一区二区无码| 日韩一区二区三区不卡视频| 国产伦精品一区二区三区四区| 性色AV一区二区三区天美传媒| 亚洲中文字幕乱码一区| 麻豆高清免费国产一区| 99热门精品一区二区三区无码| 精品无码一区二区三区电影 | 国产午夜精品一区二区三区极品 | 色欲AV蜜臀一区二区三区| 日本不卡一区二区视频a| 国产精品视频一区二区噜噜| 无码国产伦一区二区三区视频| 亚洲福利一区二区| 国精产品一区一区三区MBA下载 | 欧美av色香蕉一区二区蜜桃小说| 亚洲日韩AV一区二区三区中文 | 久久se精品一区二区| 亚洲一区二区中文| 亚洲色一区二区三区四区|