前端面試基礎-html篇之H5新特性

来源:https://www.cnblogs.com/Billypanda/archive/2018/04/15/8847720.html
-Advertisement-
Play Games

h5的新特性(目前個人所瞭解)如下 語義化標簽 表單新特性 視頻(video)和音頻(audio) canvas畫布 svg繪圖 地理定位 為滑鼠提供的拖放API webworker (重點)Storage (重點)Websocket HTML語義化是什麼? 語義化是指根據內容的結構化(內容語義化) ...


h5的新特性(目前個人所瞭解)如下

  • 語義化標簽
  • 表單新特性
  • 視頻(video)和音頻(audio)
  • canvas畫布
  • svg繪圖
  • 地理定位
  • 為滑鼠提供的拖放API
  • webworker
  • (重點)Storage
  • (重點)Websocket

 

HTML語義化是什麼?

語義化是指根據內容的結構化(內容語義化),選擇合適的標簽(代碼語義化),便於開發者閱讀和寫出更優雅的代碼的同時,讓瀏覽器的爬蟲和機器很好的解析。

為什麼要語義化?

  • 有利於SEO,有助於爬蟲抓取更多的有效信息,爬蟲是依賴於標簽來確定上下文和各個關鍵字的權重。

  • 語義化的HTML在沒有CSS的情況下也能呈現較好的內容結構與代碼結構

  • 方便其他設備的解析

  • 便於團隊開發和維護

 

  1、<section></section>

    定義文檔中的主體部分的節、段。

  2、<article></article>

    一個特殊的section標簽,比section有更明確的語義。定義來自外部的一個獨立的、完整的內容塊,例如什麼論壇的文章,博客的文本。。。

  3、<aside></aside>

    用來裝載頁面中非正文的內容,獨立於其他模塊。例如廣告、成組的鏈接、側邊欄。。。

  4、<header></header>

    定義文檔、頁面的頁眉。通常是一些引導和導航信息,不局限於整個頁面頭部,也可以用在內容里。

  5、<footer></footer>

    定義了文檔、頁面的頁腳,和header類似。

  6、<nav></nav>

    定義了一個鏈接組組成的導航部分,其中的鏈接可以鏈接到其他網頁或者當前頁面的其他部分。

  7、<hgroup></hgroup>

    用於對網頁或區段(section)的標題元素(h1~h6)進行組合。

  8、<figure></figure>

    用於對元素進行組合。

  9、<figcaption></figcaption>

    為figure元素加標題。一般放在figure第一個子元素或者最後一個。

  10、<details></details>

    定義元素的細節,用戶可以點擊查看或者隱藏。

  11、<summary></summary>

    和details連用,用來包含details的標題。

  12、<canvas></canvas>

    用來進行canvas繪圖。

  13、<video></video>

    定義視頻。

  14、<audio></audio>

    定義音頻。

  15、<embed></embed>

    定義嵌入網頁的內容。比如插件。

  16、<source></source>

    該標簽為媒介元素(比如video、audio)定義媒介元素。

  17、<datalist id='dl'></datalist>

    定義可選數據的列表,與input配合使用(<input list='dl'>)可製作輸入值的下拉列表。

  18、<mark></mark>

    在視覺上向用戶展現出那些想要突出的文字。比如搜索結果中向用戶高亮顯示搜索關鍵詞。

  19、<meter [min/max/low/high/optimum/value]></meter>

    度量衡,用紅黃綠表示出一個數值所在範圍。

  20、<output></output>

    定義不同類型的輸出,樣式與span無異。

  21、<progress></progress>

    進度條,運行中的進度。

  22、<time></time>

    定義日期或者時間。

  23、<keygen></keygen>

    定義加密內容。

  24、<command></command>

    定義命令行為。


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

-Advertisement-
Play Games
更多相關文章
  • 概述 在iOS 4.0之後,block橫空出世,它本身封裝了一段代碼並將這段代碼當做變數,通過block()的方式進行回調。這不免讓我們想到在C函數中,我們可以定義一個指向函數的指針並且調用。 。 Block基本使用 Block的類型 block也是一種數據類型,Block的類型是什麼呢。 就是Bl ...
  • 一、模態框 實現圖片點擊後出現彈窗,彈窗裡帶點擊的圖片大圖的效果。 分類: 1.模態對話框 模態對話框(Modal Dialogue Box,又叫做模式對話框),是指在用戶想要對對話框以外的應用程式進行操作時,必須首先對該對話框進行響應。如單擊【確定】或【取消】按鈕等將該對話框關閉。否則無法進行其他 ...
  • 一、如何實現滾動到一定位置將內容固定在頁面頂部 window.onscroll=function(){ //滾動的距離,距離頂部的距離 var topScroll =document.body.scrollTop||document.documentElement.scrollTop; //獲取到導 ...
  • n HTML 註釋 <--! 註釋內容 --> 註意:註釋內容不會顯示,註釋是為了將來維護方面。 n 圖片熱點(圖像地圖) 圖像熱點:給一張圖片加多個鏈接,預設情況下,一張圖片只能加一個鏈接。 1、標記結構: <img src=”images/01.jpg” usemap=”#Map” > <map ...
  • offsetWidth / offsetHeight offsetWidth HTMLElement.offsetWidth 是一個只讀屬性,返回一個元素的佈局寬度。一個典型的(各瀏覽器的offsetWidth可能有所不同)offsetWidth是測量包含元素的邊框(border)、水平線上的內邊距 ...
  • 1. Promise簡介 promise是非同步編程的一種解決方案,它出現的初衷是為瞭解決回調地獄的問題。 打個比方,我需要: --(延遲1s)--> 輸出1 --(延遲2s)--> 輸出2 --(延遲3s)--> 輸出3 通常寫法: setTimeout(()=> { console.log('1' ...
  • 前言 1 一列佈局 一列佈局: HTML部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>一列佈局</title> </head> <body> <div class="head">head</div> <div cla ...
  • 項目在微信環境開發,需要獲取access_token進行授權登錄和獲取用戶信息。 特意把這塊功能拿出來封裝一個自定義module 之前appid和secret是在本地配置文件寫死的,後來要求系統後臺可以配置公眾號。 就需要從後臺請求來獲取配置參數。這就遇到問題了。 我的服務會在開啟以及每小時來獲取新 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...