H5新元素

来源:http://www.cnblogs.com/wujieBlogs/archive/2016/09/23/5900033.html
-Advertisement-
Play Games

1.article元素(標簽) 用於定義一個獨立的內容區塊,比如一篇文章,一篇博客等。 article元素內可以嵌套其他元素,它可以有自己的頭、尾、主體等內容,是用時要特別註意內容的獨立性一般獨立完整的內容才使用article元素,如果只是一段內容的話應該是用section元素。 2.section ...


1.article元素(標簽)

  用於定義一個獨立的內容區塊,比如一篇文章,一篇博客等。

  article元素內可以嵌套其他元素,它可以有自己的頭、尾、主體等內容,是用時要特別註意內容的獨立性一般獨立完整的內容才使用article元素,如果只是一段內容的話應該是用section元素。

2.section元素

  用於定義文章中的章節(通常應該有標題和段落內容)

  用來定義文檔中特定的內容區塊,可視為一個區域分組元素,用來給頁面上的內容分塊。

  section元素可以定義 文檔的主體內容

  用一句話來概括它的作用就是給內容分段,給頁面分區

  註意它與div的區別,div強調在形式上的獨立性,section強調的是內容上的獨立性,註意它的語義。

3.article元素和section元素的區別

  語義不同

    article元素更強調內容的獨立性

    section元素更強調內容的關聯性

    article元素是獨立完整的內容,section元素頁面內容分塊

  相同點

    本質上都是帶有語義的div塊元素

    分別可以看做<div id="section">和<div id="article"> 

4.aside元素

   aside元素通常用來設置側邊欄

  用於定義article元素之外的內容,前提是這些內容與article元素內的內容相關

  同時也可嵌套在article元素內部使用,作為主要內容的附屬信息,比如與內容有關的參考資料,名詞解釋等

5.nav元素

  用來定義目錄、導航欄、超鏈接

  並非所有的超鏈接都放在nav元素中,通常只把一個文檔中的主導航欄放在nav中

  在文章頁面中,nav還可以用來給一個文字做一個目錄的超鏈接

6.time元素

  微格式的概念

    HTML5中的微格式,是一種利用HTML5中的新標簽對網頁添加附加信息的方法,附加信息例如新聞事件的發生的日期和時間,文章的發表日期等

    HTML5中的微格式是為了簡化瀏覽器對數據的提取,方便搜索引擎的搜索

  time元素

    time是HTML5新增的元素

    time元素代表24小時中的某個時刻或某個日期,表示時刻允許出現時差。它可以定義很多格式的日期和時間

    datetime屬性代表中日期和時間之間要用“T”文字分隔,“T”表示時間,請註意倒數第二行,時間加上Z文字表示給機器編碼時使用UTC標準時間,表示向機器編碼另一地區時間,如果是編碼本地時間,則不需要添加時差。

    pubdate屬性是個可選標簽,加上它搜索引擎/瀏覽器就可以很方便的識別出那個日期是文章、新聞的發表日期

7.time元素示例

  <time datetime="2015-10-22">2015年10月12日</time>

  <time datetime="2015-10-22T20:00">2015年10月12日晚上8點</time>

  <time datetime="2015-10-22T20:00Z">2015年10月12日晚上8點</time>

  <time datetime="2015-10-22T20:00+09:00">美國時間2015年10月12日8點</time>

8.hgroup元素

  通常用來給標題分組,通常放在header中,但是並非強制要求,也不是絕對的

9.address元素

  通常用來說明坐著的聯繫信息,例如名字、E-mail、電話、地址等

  address元素中的內容會以斜體顯示

10.新佈局的優點

  1.更註重於內容而不是形式

  2.對人的友好:更加的語義化,高度的描述性,更加的直觀,增加了代碼的可讀性。

  3.對電腦的友好:瀏覽器更容易解析,搜索引擎更容易抓取文檔的內容

  4.代碼更加的簡潔

11.figure元素

  figure/figcaptio都是HTML5中新增的元素

  figure元素是一個媒體組合元素,也就是對其他的媒體元素進行組合,比如:圖像、圖標等等

12.figcaptio元素

  用來給figure元素定義標題


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、html5新特性 常用語義標簽:nav footer header section mark 功能標簽 video audio iframe canvas(畫布和繪圖功能) input新type:url/number/range/Date(date, month, week, time等)/se ...
  • 這是要實現的效果圖: 一.HTML頁面佈局 <!-- HTML頁面佈局 --><ul class="tab_menu"> <li class="selected">房產</li> <li>家居</li> <li>二手房</li></ul><div class="tab_box"> <div> 275 ...
  • <!DOCTYPE>到底是個神馬? 前兩天和朋友談到<!DOCTYPE>,今天將網上學習到的資料在這裡整理一下 因為HTML5的風靡人們慢慢的弱化了對<!DOCTYPE>的理解,但是現在還是有很多的面試官在問這個問題,所以還是有必要對其瞭解一下,以便以後有些許談資。 1.<!DOCTYPE>有神馬作 ...
  • [1]原理介紹 [2]數字加減 [3]元素尺寸 [4]內容滾動 ...
  • 這兩天整個技術圈都炸鍋了,微信小程式(微信應用號)發佈內測,首批200家收到邀請,但是沒受邀請的同學,也不用擔心,下麵介紹一下解決方法。 首先需要下載ide,昨天只需要下載0.9版本的編輯器並替換文件就行了,但是可能微信那邊修複了,導致不可用。現在我們要準備兩個版本:0.7盒0.9的版本,我測試過了 ...
  • [1]原理簡介 [2]範圍圈定 [3]大小改變 [4]代碼優化 ...
  • 首先說明一下,即使不熟悉fis3,閱讀文本應該也會有所收穫。 本文以fis-parser-imweb-tplv2插件為模板插件,目的不在於使用哪個模板,而是組件可視化的實現思路,不必擔心。 先說說模板插件 首先說明一下,我們的項目使用的fis3自帶的mod.js做模塊化開發。 fis-parser- ...
  • 前段時間在研究canvas,感覺還挺好玩的,就寫了一個小demo,效果如下: 第一次嘗試用js面向對象的方式來寫,經驗不足,還請大家多多包涵。 下麵開始簡單介紹代碼: canvas畫布: 彩虹球的隨機顏色是通過下麵兩個方法來實現的,在 "《js常用方法和一些封裝(2) 隨機數生成》" 中曾經提到過。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...