HTML5新增的元素、廢除的元素_第1頁
HTML5新增的元素、廢除的元素_第2頁
HTML5新增的元素、廢除的元素_第3頁
HTML5新增的元素、廢除的元素_第4頁
HTML5新增的元素、廢除的元素_第5頁
已閱讀5頁,還剩14頁未讀 繼續免費閱讀

下載本文檔

版權說明:本文檔由用戶提供并上傳,收益歸屬內容提供方,若內容存在侵權,請進行舉報或認領

文檔簡介

添加背景音樂

本講大綱:1、新增的結構元素

2、新增的塊級(block)的語義元素

3、新增的行內(inline)的語義元素

4、新增的嵌入多媒體元素與交互性元素

5、新增的input元素的類型

5、廢除的元素

新增的結構元素

section元素section元素定義文檔或應用程序中的一個區段,比如章節、頁眉、頁腳或文檔中的其他部分。它可以與h1,h2,h3,h4,h5,h6元素結合起來使用,標示文檔結構。HTML5中代碼示例:<section>…</section>HTML4中代碼示例:<div>…</div>article元素article元素表示文檔中的一塊獨立的內容,譬如博客中的一篇文章或報紙中的一篇文章。HTML5中代碼示例:<article>…</article>HTML4中代碼示例:<divclass="article">…</div>新增的結構元素header元素header元素表示頁面中一個內容區塊或整個頁面的標題。HTML5中代碼示例:<header>…</header>HTML4中代碼示例:<div>…</div>nav元素nav元素表示導航鏈接的部分。HTML5中代碼示例:<nav>…</nav>HTML4中代碼示例:<ul>…</ul>新增的結構元素footer元素footer元素表示整個頁面或頁面中一個內容區塊的腳注。一般來說,它會包含創作者的姓名、文檔的創作日期以及創建者聯系信息。HTML5中代碼示例:<footer>…</footer>HTML4中代碼示例:<div>…</div>新增的塊級(block)的語義元素

aside元素

aside元素表示article元素的內容之外的與article元素的內容相關的有關內容。HTML5中代碼示例:<aside>…</aside>HTML4中代碼示例:<div>…</div>新增的塊級(block)的語義元素figure元素figure元素表示一段獨立的流內容,一般表示文檔主體流內容中的一個獨立單元。使用<figcaption>元素為figure元素組添加標題。HTML5中代碼示例:<figure><figcaption>PRC</figcaption><p>ThePeople'sRepublicofChinawasbornin1949...</p></figure>HTML4中代碼示例:<dl><h1>PRC</h1><p>ThePeople'sRepublicofChinawasbornin1949...</p></dl>新增的塊級(block)的語義元素dialog元素dialog標簽定義對話,比如交談。注意:對話中的每個句子都必須屬于<dt>標簽所定義的部分。HTML5中代碼示例:<dialog><dt>老師</dt><dd>2+2等于?</dd><dt>學生</dt><dd>4</dd><dt>老師</dt><dd>答對了!</dd></dialog>

新增的行內(inline)的語義元素

mark元素mark元素主要用來在視覺上向用戶呈現那些需要突出顯示或高亮顯示的文字。mark元素的一個比較典型的應用就是在搜索結果中向用戶高亮顯示搜索關鍵詞。HTML5中代碼示例:<mark>…</mark>HTML4中代碼示例:<span>…</span>新增的行內(inline)的語義元素time元素

time元素表示日期或時間,也可以同時表示兩者。HTML5中代碼示例:<time>…</time>HTML4中代碼示例:<span>…</span>新增的行內(inline)的語義元素meter元素

meter元素表示度量衡。僅用于已知最大和最小值的度量。必須定義度量的范圍,既可以在元素的文本中,也可以在min/max屬性中定義。HTML5中代碼示例:<metervalue="3"min="0"max="10">3/10</meter><br><metervalue="0.6">60%</meter>新增的行內(inline)的語義元素progress元素progress元素表示運行中的進程。可以使用progress元素來顯示JavaScript中耗費時間的函數的進程。HTML5中代碼示例:<progress>…</progress>下載進度:<progressvalue="22"max="100"></progress>新增的嵌入多媒體元素與交互性元素

details元素details元素表示用戶要求得到并且可以得到的細節信息。它可以與summary元素配合使用。summary元素提供標題或圖例。標題是可見的,用戶點擊標題時,會顯示出details。summary元素應該是details元素的第一個子元素。HTML5中代碼示例:<details><summary>HTML5</summary>ThisdocumentteachesyoueverythingyouhavetolearnaboutHTML5.</details>新增的嵌入多媒體元素與交互性元素datagrid元素datagrid元素表示可選數據的列表,與input元素配合使用,可以制作出輸入值的下拉列表。HTML5中代碼示例:<datagrid>…</datagrid>新增的嵌入多媒體元素與交互性元素menu元素menu元素表示菜單列表。當希望列出表單控件時使用該標簽。HTML5中代碼示例:<menu><li><inputtype="checkbox"/>Red</li><li><inputtype="checkbox"/>blue</li></menu>注意:HTML4中menu元素不被推薦使用。新增的嵌入多媒體元素與交互性元素command元素command元素表示命令按鈕,比如單選按鈕、復選框或按鈕。HTML5中代碼示例:<commandonclick=cut()"label="cut">新增的input元素的類型

HTML5中,新增了很多input元素的類型,現列舉如下:email

email類型用于應該包含e-mail地址的輸入域。url

url類型用于應該包含URL地址的輸入域。number

number類型用于應該包含數值的輸入域。range

range類型用于應該包含一定范圍內數字值的輸入域。DatePickers(數據檢出器)searchsearch類型用于搜索域,比如站點搜索或Google搜索。search域顯示為常規的文本域。新增的input元素的類型HTML5擁有多個可供選取日期和時間的新輸入類型date-選取日、月、年month-選取月、年week-選取周和年time-選取時間(小時和分鐘)datetime-選取時間、日、月、年(UTC時間)datetime-local-選取時間、日、月、年(本地時間)廢除的元素

由于各種原因,在HTML5中廢除了很多元素,下面簡單介紹一下被廢除的元素。1.能使用css代替的元素對于basefont、big、center、font、s、strike、tt、u這些元素,由于他們的功能都是純粹為畫面展示服務的,而在HTML5中提倡把畫面展示性功能放在css樣式表中統一編輯,所以將這些元素廢除,并使用編輯css樣式表的方式進行替代。2.不在使用frame框架對于frameset元素、frame元素與nofranes元素,由于frame框架對頁面可以性存在負面影響,在html5中已不再支持frame框架,只支持iframe框架,或者用服務器方創建的由多個頁面組成的復合頁面的

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網頁內容里面會有圖紙預覽,若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間,僅對用戶上傳內容的表現方式做保護處理,對用戶上傳分享的文檔內容本身不做任何修改或編輯,并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容,請與我們聯系,我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論