HTML5提高

雲崖先生發表於2020-07-11
HTML

HTML5提高

前言

　　我個人覺得，當你學會了一些最基本的標籤其實是夠用的，但是在很多網頁中可以發現很多新的標籤。這個時候不知道它是幹嘛的實際上心裡是非常沒底的，所以在這裡我打算寫一篇HTML5提高的文章，儘量以大白話的方式來告訴你H5中的一些實用小技巧。

　　首先，要明白一點。我們使用標籤時如果想要非常規範的一看就很專業的那種效果，我們應該利用原本標籤的語義。

　　如，寫了一個<main>標籤，別人一看就知道，原來這是主體內容的區域。

　　當然，如果你全部使用<div>也沒什麼問題，只是不推薦這樣做。

　　其次，使用HTML標籤不要在意他原本的模樣，儘管他可能非常醜，因為我們可以隨時通過CSS來修改它的樣式。

 

結構化標籤

header 頁首

　　<header>標籤代表一塊內容區域的頁首，即頭部，它沒什麼具體語義，一個頁面中可以有多個<header>標籤，當然也可以只有一個。

 

image-20200711115656391

 

footer 頁尾

　　<footer>標籤代表一個頁首的頁尾，即尾部。頁尾通常包含文件的作者、版權資訊、使用條款連結、聯絡資訊等等。應該是與<header>相對應，不過沒有也沒關係。

 

image-20200711120739051

 

nav 導航

　　<nav>代表一塊區域中的導航。注意！是一塊區域的導航，這代表一個頁面中可以有多個<nav>標籤，當然也可以只有一個。

 

image-20200711120349079

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="#">導航一</a></li>
                <li><a href="#">導航二</a></li>
                <li><a href="#">導航三</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

 

main 主要區域

　　<main>標籤代表主要內容區域，一個頁面只應該出現一次。

 

image-20200711121234382

 

article 內容區域

　　<article>僅僅代表一塊區域中的內容，沒什麼具體語義。

 

image-20200711121555884

 

section 區塊定義

　　使用 <section> 定義一個區塊，一般是一組相似內容的排列組合。

 

image-20200711130556379

 

　　當然像這種更多的就是用列表標籤排序。不過外層我們可以套上<section>標籤。

 

aside 附加區域

　　使用<aside>可以設定與主要區域無關的一些內容，如輪播圖，廣告，公告等等。

 

image-20200711140046079

 

div 通用容器

　　<div>沒有什麼清楚的界限來規定它應該做什麼，所以變成了一個萬能的標籤。啥都能裝，這個就不用多介紹了，基本你一開啟頁面全是它。

 

基礎文字相關

p 段落標籤

　　<p>標籤用於定義一段文字的內容。這個在上一篇HTML中已經講過了，使用它應該注意一些問題，如包裹的內容等。

 

pre 原樣顯示標籤

　　<pre>標籤可以原封不動的將你所有的格式列印出來，在部落格園裡的程式碼塊基本外部都是包裹的<pre>標籤。這個標籤在上一篇HTML中也提到過了。

 

image-20200711140730087

 

br 換行標籤

　　<br>才是一個真正的換行標籤，注意與<p>的使用區別。上一篇HTML中也提到過。

 

span 文字容器

　　<span>代表的意思和<div>一樣，如果你的某些文字需要修改一下樣式。可以使用它來包裹，這在頁面中是非常常見的，但是它的語義卻不是很明確，也是屬於一個模糊的定位。可以看到在部落格園的插入程式碼中，幾乎全都是用的<span>標籤。

 

image-20200711141108199

 

描述性文字相關

time 時間文字

　　<time>標籤裡可以放一些時間的文字，這非常方便。儘管他看起來沒有任何樣式，這裡再強調一下，不要看他樣式，注意語義就行了。

 

image-20200711141658600

 

abbr 帶有描述的文字

　　<abbr>也是放的一個文字，它有個title屬性，這裡面可以放一些描述資訊。當滑鼠懸浮與其上方時，描述資訊就會出來。可以看到文字下方有小虛線，不用在意。CSS可以幫你幹掉他。

 

image-20200711141923321

 

sub sup 上下標

　　這個沒什麼好描述的，在上一篇文章中也寫的非常的明白了。如果你經常使用數學之內的公式，那麼你應該掌握它。

 

del 刪除文字

　　在上一篇文章中是將它歸類於文字類的，一個刪除線。但是<del>本身的意思就是刪除，我們再碰到如下的情景時可以使用它。

 

image-20200711142252414

 

ins 修正文字

　　和<del>可配套使用，一個代表已經廢棄了，一個代表修正後的。如下圖。

 

image-20200711142503973

 

s 不準確文字

　　它的語義為定義一些不是很準確的文字資訊，雖然與<del>的使用效果是一樣的，但是我們應該按照不同的語義劃分來使用標籤。

 

image-20200711142614909

 

code 程式碼文字

　　<code>標籤中應該放入的是程式碼，儘管它沒有任何格式化，需要一些格式化外掛來輔助完成程式碼的格式化。

 

image-20200711142909120

 

progress 進度條

　　可以用於顯示進度條的完成時間，屬性max為進度條的最大數量，屬性value為當前的進度。後期可以使用js來進行控制。

 

image-20200711143230775

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>Document</title>
</head>
<body>
  <progress value="58" max="100"></progress>
</body>
</html>

 

強調文字相關

strong 非常重要

　　在上一篇文章中我給他定義為加粗，這是在效果上來定的。但是實際上它的語義應該為強調性的文字。

 

image-20200711143648253

 

em 比較重要

　　同上，也是屬於強調性文字，但是強調的程度不同，這個應該輕一點。

 

image-20200711143715370

 

mark 值得記錄

　　這個就相當於一個馬克筆的效果，能夠突出顯示文字，因此我覺他的定義應該是值得記錄的一段文字。

 

image-20200711143833694

 

引用相關

cite 引用資訊

　　<cite> 標籤通常表示它所包含的文字對某個參考文獻的引用，或文章作者的名字。

 

image-20200711145540940

 

blockquote 塊引用

　　<blockquote> 引用來源標籤，一般為小段文字。

 

image-20200711145719489

 

q 行內引用

　　<q> 用於表示行內引用文字，在大部分瀏覽器中會加上引號。

 

image-20200711145816917

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>Document</title>
</head>
<body>
  <cite>狂人日記</cite>
  <blockquote>
    凡事總須研究，才會明白。古來時常吃人，我也還記得，可是不甚清楚。我翻開歷史一查，這歷史沒有年代，歪歪斜斜的每葉上都寫著“仁義道德”幾個字。我橫豎睡不著，仔細看了半夜，才從字縫裡看出字來，滿本都寫著兩個字是“吃人”！
  </blockquote>
  <cite>魯迅先生</cite><q>吃人</q>用的恰到好處！
</body>
</html>

 

聯絡資訊

address 地址

　　<address>用於設定地址資訊。一般放在<footer>頁尾中。

 

image-20200711150022365

 

超連結

　　上篇文章中記錄了<a>的一些使用小技巧。我在這裡再例舉幾個。

郵箱連結

　　除了頁面跳轉外可以指定其他連結。使用以下方式也有缺點，郵箱可能會被惡意使用者採集到。

　　<a href="mailto:c2323182108@gmail.com">傳送郵件</a>

 

撥打電話

　　這個就主要針對移動端的使用者了。

　　<a href="tel:10086">y移動客服</a>

 

下載檔案

　　預設情況下使用連結可以下載瀏覽器無法處理的檔案，如果下載圖片需要後臺語言告之瀏覽器mime型別。Ps：如果不懂mime的百度一下就知道了。

　　<a href="下載連結地址">下載檔案</a>

 

表單

hidden屬性 隱藏域

　　<input>的type有個hidden可以作為隱藏輸入框，這個裡面的值我們可以填好。用於隱藏的向後臺提交一些資料。

 

image-20200711151425296

 

pattern屬性 正則驗證

　　當使用者在<input>框輸入內容後，可以設定pattern屬性進行正則驗證，還可以繫結oninvalid事件，如果驗證錯誤則會觸發該事件。注意，我們不單單該在前端驗證，更應該在後端進行驗證，二次驗證才能確保資料的準確性，如果有使用者修改頁面中的程式碼，那麼第一次驗證就會出現問題，所以我們需要二次驗證。

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>Document</title>
</head>
<body>
    <form action="">
        <input type="text" name="username" pattern="[\w]{3,18}" 
        oninvalid="javascript:alert('請輸入正確的使用者名稱，字母下劃線組成長度3-18')">
        <button>提交</button>
    </form>
        
</body>
</html>

 

autocomplete屬性 鍵入歷史記錄

　　我們可以為<input>設定屬性autocomplete屬性，它有2個狀態為，一個on一個off，用來選擇是否記住使用者鍵入值的歷史記錄。這個屬性預設的值為on。

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>Document</title>
</head>
<body>
    <form action="">
        <input type="text" name="username" autocomplete="off">
        <button>提交</button>
    </form>
        
</body>
</html>

 

input type 日期與時間

　　<input>的type為date時候，可以來上傳一個年月日（標準時間）。當<input>的type為time時，可以上傳時分。type為week是年周，type為month是年月。type是datetime-local則為本地化時間。 min屬性可以設定開始時間， max屬性可以設定結束時間。step屬性可以設定步長即多少時間一間隔。

 

image-20200711154720599

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>Document</title>
</head>
<body>
    <form action="">
        <input type="date" name="date_time">
        <button type="submit">提交</button>
    </form>
        
</body>
</html>

 

image-20200711155349091

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>Document</title>
</head>
<body>
    <form action="">
        <input type="time" name="date_time">
        <button type="submit">提交</button>
    </form>
        
</body>
</html>
 

image-20200711155410033

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>Document</title>
</head>
<body>
    <form action="">
        <input type="week" name="date_time">
        <button type="submit">提交</button>
    </form>
        
</body>
</html>

 

image-20200711155447650

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>Document</title>
</head>
<body>
    <form action="">
        <input type="month" name="date_time">
        <button type="submit">提交</button>
    </form>
        
</body>
</html>

 

image-20200711161119959

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>Document</title>
</head>
<body>
    <form action="">
        <input type="datetime-local" name="date_time">
        <button type="submit">提交</button>
    </form>
        
</body>
</html>

 

button 按鈕

　　我們在提交表單時除了使用<submit>標籤外，也可以使用<button>按鈕來進行提交，只需要將其type屬性設定為submit即可。

 

image-20200711152052625

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title></title>
</head>
<body>
  <form action="#">
    <input type="hidden" name="hiddent_id" value="1">
    <input type="text" name="username">
    <input type="password" name="pwd">
    <button type="submit">提交</button>
  </form>
</body>
</html>

 

多檔案上傳與型別限制

　　<form>有個屬性叫做multiple，可以支援多檔案上傳。還有個屬性叫accept，用來指定上傳檔案的MIME型別。

 

<form action="" method="POST" enctype="multipart/form-data">
    <fieldset>
        <input type="file" name="icon" accept="image/png,image/gif" multiple>
    </fieldset>
    <button>儲存</button>
</form>

 

datalist 資料列表

　　這個資料列表有點像<select>但是又不一樣，它是通過<input>，<datalist>以及<option>進行組合的。

　　<input>有個屬性為list，指定為<datalist>的id即可。

 

image-20200711160752209

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title>Document</title>
</head>
<body>
    <form action="">
        <input type="text" list="data_list">
        <datalist id="data_list">
​
            <option value="北京"></option>
            <option value="上海"></option>
            <option value="廣州"></option>
​
        </datalist>
    </form>
        
</body>
</html>

 

多媒體

video 視訊

　　儘管H5中已經支援<video>標籤來插入視訊，但是它原生的並不太好。我們應該用一些第三方的外掛，如阿里雲播放器，video.js等等。

 

屬性描述
autoplay 如果出現該屬性，則視訊在就緒後馬上播放（需要指定型別如 type="video/mp4")。
preload 如果出現該屬性，則視訊在頁面載入時進行載入，並預備播放。如果使用 "autoplay"，則忽略該屬性。 如果視訊觀看度低可以設定為 preload="none" 不載入視訊資料減少頻寬。 如果設定為 preload=metadata值將載入視訊尺寸或關鍵針資料，目的也是減少頻寬佔用。 設定為preload="auto" 時表示將自動載入視訊資料
controls 如果出現該屬性，則向使用者顯示控制元件，比如播放按鈕。該屬性是必須的。
height 設定視訊播放器的高度。
width 設定視訊播放器的寬度。
loop 如果出現該屬性，則當媒介檔案完成播放後再次開始播放。
muted 規定視訊的音訊輸出應該被靜音。
poster 規定視訊下載時顯示的影像，或者在使用者點選播放按鈕前顯示的影像。
src 要播放的視訊的 URL。

 

audio 音訊

　　<audio>，與視訊使用方法基本一致。

 

屬性描述
autoplay 如果出現該屬性，則視訊在就緒後馬上播放。
preload 如果出現該屬性，則視訊在頁面載入時進行載入，並預備播放。如果使用 "autoplay"，則忽略該屬性。 如果視訊觀看度低可以設定為 preload="none" 不載入視訊資料減少頻寬。 如果設定為 preload=metadata值將載入視訊尺寸或關鍵針資料，目的也是減少頻寬佔用。 設定為preload="auto" 時表示將自動載入視訊資料
controls 如果出現該屬性，則向使用者顯示控制元件，比如播放按鈕。
loop 如果出現該屬性，則當媒介檔案完成播放後再次開始播放。
muted 規定視訊的音訊輸出應該被靜音。
src 要播放的視訊的 URL。

 

source 媒介元素

　　當有的瀏覽器不支援某種格式的多媒體，我們可以為他新增一些備用的。將<source>嵌入到<video>或者<audio>中即可。請注意設定<source>的src屬性以及type屬性。

 

<audio controls autoplay loop preload="auto">
    <source src="houdunren.ogg" type="audio/ogg">
    <source src="houdunren.mp3" type="audio/mp3">
</audio>

 

 

相關文章