HTML5新增的標簽和屬性歸納

来源:https://www.cnblogs.com/manshufeier/archive/2018/07/20/9340520.html
-Advertisement-
Play Games

收集總結的HTML5的新特性,基本除了IE9以下都可以使用。 HTML5語法 大部分延續了html的語法 不同之處:開頭的 <!DOCTYPE html> <html lang="zh-CN"> <meta charset="utf-8"> 字元編碼變得簡潔, 不區分大小寫, 添加了布爾值,類似ch ...


收集總結的HTML5的新特性,基本除了IE9以下都可以使用。

 

HTML5語法

大部分延續了html的語法

不同之處:開頭的 <!DOCTYPE html>

<html lang="zh-CN">

<meta charset="utf-8">

字元編碼變得簡潔,

不區分大小寫,

添加了布爾值,類似checked,selected

引號可以省略,但是編碼規範來說,不建議,

有可以省略結束符的標簽,和完全省略的標簽應用。

 

增加標簽:

1、結構標簽

(1)section:獨立內容區塊,可以用h1~h6組成大綱,表示文檔結構,也可以有章節、頁眉、頁腳或頁眉的其他部分;

(2)article:特殊獨立區塊,表示這篇頁眉中的核心內容;

(3)aside:標簽內容之外與標簽內容相關的輔助信息;

(4)header:某個區塊的頭部信息/標題;

(5)hgroup:頭部信息/標題的補充內容;

(6)footer:底部信息;

(7)nav:導航條部分信息;

(8)figure:獨立的單元,例如某個有圖片與內容的新聞塊。

 

2、表單標簽

(1)email:必須輸入郵件;

(2)url:必須輸入url地址;

(3)number:必須輸入數值;

(4)range:必須輸入一定範圍內的數值;

(5)Date Pickers:日期選擇器;

    a.date:選取日、月、年

    b.month:選取月、年

    c.week:選取周和年

    d.time:選取時間(小時和分鐘)

    e.datetime:選取時間、日、月、年(UTC時間)

    f.datetime-local:選取時間、日、月、年(本地時間)

(6)search:搜索常規的文本域;

(7)color:顏色。

 

3、媒體標簽

(1)video:視頻;

(2)audio:音頻;

(3)embed:嵌入內容(包括各種媒體),Midi、Wav、AU、MP3、Flash、AIFF等。

 

4、其他功能標簽

(1)mark:標註,高亮顯示(像熒光筆做筆記);

(2)progress:進度條;<progress max="最大進度條的值" value="當前進度條的值">;

(3)time:數據標簽,給搜索引擎使用;發佈日期<time datetime="2014-12-25T09:00">9:00</time>更新日期<time datetime="2015- 01-23T04:00" pubdate>4:00</time>;

(4)ruby和rt:對某一個字進行註釋;<ruby><rt>註釋內容</rt><rp>瀏覽器不支持時如何顯示</rp></ruby>;

(5)wbr:軟換行,頁面寬度到需要換行時換行;

(6)canvas:使用JS代碼做內容進行圖像繪製;

(7)command:按鈕;

(8)deteils :展開菜單;

(9)dateilst:文本域下拉提示;

(10)keygen:加密。

 

新增的屬性:

對於js進行添加的屬性。

<script defer src=".....js" onload="alert('a')"></script>

<script async src=".....js" onload="alert('b')"></script>

如果沒有以上兩個屬性的話,執行順序為先載入(下載)第一個src,然後在執行其onload,然後在向下依次同步執行defer屬性在h5之前就已經有了,輸入延遲載入(推遲執行),它會先載入(下載)src中文件內容,然後等頁面全部載入完成後,再載入onload中js.async屬性屬於非同步載入,它會在載入src後,立即執行onload,同時還會繼續載入頁面以上執行順序,alert顯示會先顯示b然後再顯示a。

 

網頁中標簽中加入小圖標的樣式代碼

<link rel="icon" href="url..." type="圖片名稱" sizes="16*16">

有序列表ol:新增start(列表起始值),reversed(是否倒置)menu菜單type屬性(3個菜單類型)內嵌css樣式:在標簽內部來定義一個樣式區塊(scoped),只對樣式標簽內部才有效內嵌框架:iframe元素,新增了seamless無邊距無邊框,srcdoc定義了內嵌框架的內容。

 

<iframe>新增屬性:

<!--seamless定義框架無邊框 無邊距-->

<!--srcdoc的顯示級別比sandbox高-->

<!--sandbox用來規定一個內嵌框架的安全級別-->

<!--sandbox="allow-forms:允許提交表單"-->

<!--sandbox="allow-origin:允許是相同的源"-->

<!--sandbox="allow-scripts:允許執行腳本"-->

<!--sandbox="allow-top-navigation:允許使外面的頁面進行跳轉"-->

 

manifest屬性:

定義頁面需要用到的離線應用文件,一般放在<html>標簽里

charset屬性:

meta屬性之一,定義頁面的字元集

sizes屬性:

<link>新增屬性,當link的rel="icon"時,用以設置圖標大小

base屬性:

<base href="http://localhost/" target="_blank">表示當在新視窗打開一個頁面時,會將href中的內容作為首碼添加到地址前

defer屬性:

script標簽屬性,表示腳本載入完畢後,只有當頁面也載入完畢才執行(推遲執行)

async屬性:

script標簽屬性,腳本載入完畢後馬上執行(運行過程中瀏覽器會解析下麵的內容),即使頁面還沒有載入完畢(非同步執行)

media屬性:

<a>元素屬性:表示對何種設備進行優化

hreflang屬性:

<a>的屬性,表示超鏈接指向的網址使用的語言

ref屬性:

<a>的屬性,定義超鏈接是否是外部鏈接

reversed屬性:

<ol>的屬性,定義序號是否倒敘

start屬性:

<ol>的屬性,定義序號的起始值

scoped屬性:

內嵌CSS樣式的屬性,定義該樣式只局限於擁有該內嵌樣式的元素,適用於單頁開發

 

 

HTML5全局屬性:對任意標簽都可以使用的,以下6個

data-yourvalue 、hidden、Spenllecheck、tabindex、contenteditable、desginMode;

全局屬性:

1.可直接在標簽里插入的:data-自定義屬性名字。

hidden(直接放上去就是隱藏);

spellcheck="true"(語法糾錯);

tabindex="1"(Tab跳轉順序);

contenteditable="true"(可編輯狀態,單擊內容,可修改);

2.在JavaScript里插入的window.document.designMode = 'on'(JavaScript的全局屬性,整個頁面的文本都可以編輯了)。

 


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

-Advertisement-
Play Games
更多相關文章
  • 最近在調用百度地圖的過程中,發生了在地圖上滾輪縮放,結果產生了位置偏移的情況,同樣在移動端,雙指縮放也有同樣的問題。 這個問題產生的原因主要是因為百度地圖載入的位置因為定位等原因,與整個html 頁面產生了不同步滾動的問題。 百度地圖的縮放是基於body層的,如果body層有滾動條,並且不在最頂端, ...
  • 禁用用戶自動縮放功能: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> 判斷橫豎屏狀態有兩種方法:css判斷、js判斷 (一)、css ...
  • 通過Ajax請求下載Execl 的問題,掉進一個坑裡半個多小時,特此來記錄一下 。 起初 我誤以為是後臺的問題,然而調試了一下並不是這樣的,也不會報錯,且進入了success 函數。 以下的事件及請求參數看上去貌似也沒問題。 <a href="#" class="easyui-linkbutton" ...
  • 今天,老闆急匆匆的跟我說 客戶對頁面效果不滿意 需要重新設計幾套方案!!! 設計師請假了 MOMO這個時候真的是要哭 MOMO使出了連環奪命Call,得到了設計師壓箱底的乾貨! 經過MOMO對538套HTML5模板的研究 霸氣的拿出十幾套方案給客戶 才保住這條小命 話不多說,先看看有哪些乾貨分享!! ...
  • 最近工作不是很忙,所以再深入學學JavaScript,順便提升一下自己,嘿嘿!主要記錄一下學習到的一下編寫代碼的規範小記吧! 1.聲明變數時一定帶上var,避免一些錯誤發生,如變數提升時遇見的問題發生;var創建的全局變數不能被delete刪除,而隱式創建的會被刪除; 提倡一個var聲明一群變數,如 ...
  • 利用css的label的偽類(::before)代替checkbox和radio效果: 1. 優點:需要圖片來調整選中前和選中後的樣式,純css搞定 2. 缺點:相容性,IE8以下不支持 線上例子: css改變預設的radio和checkbox的樣式 input[type="radio"], inp ...
  • 我們都知道,移動Web端(M站環境下),很多時候,前端是無法判斷用戶的登錄狀態的,因為出於安全性考慮,與賬號相關的cookie欄位一般都是 http only的。 如果前端想判斷用戶的登錄狀態,需要主動去調後臺介面,根據後臺介面返回的狀態碼來判斷。 那麼,我如果想實現下麵這樣一個場景,該怎麼做呢? ...
  • 一、文件的基本概念( 識記 ) 對數據結構來說, 文件是性質相同的記錄的集合 (這不同於我們說的操作系統中的文件概念) 。 與文件有關的概念還有: 記錄是文件中存取的基本單位,數據項是文件可使用的 最小單位 ,數據項有時稱欄位或者屬性 。主關鍵字項 (唯一標識一個記錄的欄位)、 次關鍵字項 、 主關 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...