HTML5的新變化

来源:https://www.cnblogs.com/chenpiaoxiaowu/archive/2019/08/05/11291508.html
-Advertisement-
Play Games

1、新的html5文件類型,僅需申明在html的第一行,即 <!DOCTYPE html> 2、圖形元素 figure ,將<figure>與<figcaption>相結合,使圖片標題與圖片相搭配 3、不需要為鏈接和腳本標簽添加類型的屬性 4、h5中不需要用引號將屬性包裹起來 5、使得內容可編輯。" ...


 1、新的html5文件類型,僅需申明在html的第一行,即 <!DOCTYPE html>

 2、圖形元素 figure ,將<figure>與<figcaption>相結合,使圖片標題與圖片相搭配

1 <figure>
2    <img src="img/2.jpg">
3     <figcaption>
4         <p>嘗試一下</p>
5     </figcaption>
6 </figure>

 3、不需要為鏈接和腳本標簽添加類型的屬性

<script src=”script.js”></script>

4、h5中不需要用引號將屬性包裹起來

<p class=one></p>

5、使得內容可編輯。"contenteditable",它將允許用戶編輯元素(包括他的子元素)內包含的任何文本內容。

6、增加電子郵件的輸入類型

<input id=”email” name=”email” type=”email” />

 註意:opera只有在指定了name屬性的前提下,才可以使用

7、占位符 paceholder=' '

<input name=”email” type=”email” placeholder=”[email protected]/>

8、本地儲存 local storage

9、語義性header和footer

      在書寫代碼時可以使用<header>和<footer>標簽

註意:使用IE瀏覽器時,為了確保新的HTML5元素能夠以塊級元素正確顯示,有必要將它們用下麵的代碼定義風格:

      header, footer, article, section, nav, menu, hgroup {

    display: block;

  }

就算如此,IE還是不知道這些元素究竟是什麼,因而會無視這些格式,還需要用到下麵的代碼來解決這個問題:

document.createElement(“article”);

document.createElement(“footer”);

document.createElement(“header”);

document.createElement(“hgroup”);

document.createElement(“nav”);

document.createElement(“menu”);

11、群組標題(hgroup)

 將標題之間的關係更好的表達出來,不影響文章整體綱要

    <hgroup>
        <h1>標題</h1>
         <h2>副標題</h2>
    </hgroup>  

12、必要(require)屬性

兩種不同方式來聲明這個屬性:
<input type=”text” name=”someInput” required>
或者,更嚴謹:
<input type=”text” name=”someInput” required=”required”>

13、自動對焦(autofocus)屬性

<input type=”text” name=”someInput” placeholder=”Douglas Quaid” required autofocus>

14、音頻支持 <audio>

<audio autoplay=”autoplay” controls=”controls”>
<source src=”file.ogg” />
<source src=”file.mp3″ />
<a href=”file.mp3″>Download this file.</a>
</audio>

註意:Mozilla和Webkit都還沒有完全支持。Firefox支持 .ogg文件,Webkit瀏覽器只支持最常見的.mp3擴展名。這意味著說,至少目前為止,你應該創建兩個版本的音頻。當Safari載入頁面時,它認不出.ogg格式的文件,將會跳過並移到mp3版本上。請註意,IE並不支持它,Opera 10 或更低的版本只支持 .wav文件。

15、視頻支持<video>

Safari和IE9可以支持H.264 格式的視頻,Firefox 和Opera卻仍然堅持Theora 和Vorbis格式。因此,顯示HTML5視頻的時候,你必須提供兩種格式。

16、視頻預載入

設置 preload=”preload”來預先載入視頻,或者之間添加preload

17、正則表達式規定新模式的屬性 pattern=”[A-Za-z]{4,10}”

18、檢測瀏覽器的屬性支持

 兩種方法:a、使用Modernizr(這是一個Javascript庫)檢測;

                    b、創建並剖析這些元素來看看瀏覽器都有什麼能力。

                      例如,在前面的例子里,如果我們要確定瀏覽器是否能夠執行pattern屬性,就可以在頁面上添加JavaScript:

                        alert( ’pattern’ in document.createElement(‘input’) ) // boolean;

19、Mark元素

<mark> 元素的主要功能就是在頁面中高亮顯示那些需要在視覺上向用戶突出其重要性的文字。包裹在此標簽里的字元串必須與用戶當前的行為相關。例如,如果我在一些博客中搜索"Open your Mind" ,我可以使用在<mark>標簽里使用JavaScript 來包裹每一次動作。

 

 

 

  


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

-Advertisement-
Play Games
更多相關文章
  • 0805自我總結 一.絕對定位 生成絕對定位的元素,相對於瀏覽器視窗進行定位。 二.相對定位 父級(最近的一個父級)相對定位的目的 1)不影響自身佈局 2)輔助自己絕對定位佈局 三預設定位 預設值。沒有定位,元素出現在正常的流中(忽略 top, bottom, left, right 或者 z in ...
  • 08.05自我總結 一.盒子佈局 1.盒子佈局的組成 margin border padding content 2.margin margin是外邊距,控制盒子的顯示位置相對於他的上一級 left、top控制自身,right、bottom影響兄弟 3.border 寬度:border width ...
  • 因為項目中用的是 element-ui 框架,而這個框架並沒有抽屜組件,所以自己實現一個,具體代碼如下: drawer.vue 組件具體使用如下: ...
  • 通過四個方法來實現元素的淡入淡出,這四個方法分別是:fadeIn()、fadeOut()、fadeToggle() 以及 fadeTo() ...
  • 項目開發中,不管是建立在哪個框架基礎上,對數據的處理都是必須的,而處理數據離不開各種遍歷迴圈。javascript中迴圈遍歷有很多種方式,記錄下幾種常見的js迴圈遍歷。 一、for迴圈 for迴圈應該是最普遍的,使用最多的一種迴圈遍歷方法了,所以也導致其可讀性和易維護性比較差,但是它可以及時brea ...
  • 項目開發中 ajax 是不可缺少的,一個好的封裝可以減少我們很多的重覆代碼,維護也更方便。在 vue 開發中我們用的比較多的就是 axios。下麵代碼是項目中用到的 axios 的封裝。 http.js 註: 1. 上面代碼依賴了 elementui 框架的 Message 組建,用於提示錯誤消息 ...
  • 1. javascript的typeof返回哪些數據類型. 答案:string,boolean,number,undefined,function,object 2. 例舉3種強制類型轉換和2種隱式類型轉換? 答案:強制(parseInt,parseFloat,number) 隱式(== ) 3. ...
  • 深度優先遍歷(Depth-First-Search),是搜索演算法的一種,它沿著樹的深度遍歷樹的節點,儘可能深地搜索樹的分支。當節點v的所有邊都已被探尋過,將回溯到發現節點v的那條邊的起始節點。這一過程一直進行到已探尋源節點到其他所有節點為止,如果還有未被髮現的節點,則選擇其中一個未被髮現的節點為源節... ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...