HTML5

1.新增布局標簽

header 整個頁面,或部分區(qū)域的頭部
footer 整個頁面,或部分區(qū)域的底部
nav 導航
artical 文章、帖子、雜志、新聞、博客、評論等
section 頁面中的某段文字,或文章中的某段文字(里面文字通常里面會包含標題)
aside 側邊欄

2.新增狀態(tài)標簽

image.png
    <span>手機電量:</span>
    <meter max="100" value="70" low="10" high="20" optimum="90"></meter>
    <span>當前進度:</span>
    <progress max="100" value="20"></progress>
image.png

3.新增列表標簽

image.png
    <form action="#">
        <input type="text" list="mydata">
        <button>搜索</button>
    </form>
    <datalist id="mydata">
        <option value="張一">張一</option>
        <option value="張二">張二</option>
        <option value="李三">李三</option>
        <option value="李四">李四</option>
    </datalist>
    <br>
    <details>
        <summary>問題</summary>
        <p>對于問題的解釋</p>
    </details>
image.png

image.png

4.新增文本標簽

4.1 文本注音
ruby 包裹需要注音的文字
rt 寫注音,rt標簽寫在ruby的里面

    <ruby>
        <span>尚硅谷</span>
        <rt>shàng guī gǔ</rt>
    </ruby>
image.png

4.2 文本標記
mark

5.表單相關的新增

5.1新增表單控件屬性

placeholder="" 提示文字
required 必填
autofocus 自動獲取焦點
autocomplete="" 值為on/off
pattern="正則表達式" 與required配合

5.2input新增的type屬性值
image.png
    <form action="" novalidate>
        <div>
            郵箱:
            <input type="email" name="email">
        </div>
        <div>
            url:
            <input type="url" name="url">
        </div>
        <div>
            數值:
            <input type="number" name="number" step="2">
        </div>
        <div>
            搜索:
            <input type="search" name="keyword">
        </div>
        <div>
            電話:
            <input type="tel" name="phone">
        </div>
        <div>
            范圍:
            <input type="range" name="range" max="80" min="0" value="22">
        </div>
        <div>
            顏色選擇器:
            <input type="color" name="color">
        </div>
        <div>
            日期:
            <input type="date" name="date">
            月份:
            <input type="month" name="month">
            周:
            <input type="week" name="week">
            時間:
            <input type="time" name="time">
            日期+時間:
            <input type="datetime-local" name="time2">
        </div>
        <button>提交</button>
    </form>
image.png

6.新增多媒體標簽

video
audio

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 1 HTML5 新增語義化標簽 1.1 新增頁面結構標簽 標簽名語義和功能屬性單標簽or雙標簽備注header定...
    采蘑菇的仔仔閱讀 585評論 0 1
  • 一、html5語法特點 1.DOCTYPE及字符編碼① 文檔聲明DOCTYPE:<!doctype html>② ...
    MGd閱讀 1,103評論 0 2
  • 本文主要介紹Html5和Html4的區(qū)別。 語法的改變 內容類型HTML5 的文件擴展符與內容類型保持不變。擴展符...
    layjoy閱讀 1,932評論 0 23
  • 狀態(tài)標簽 meter:用來顯示已知范圍的標量值或者分數值。 value:當前的數值。 min:值域的最小邊界值。如...
    Precipice閱讀 892評論 0 0
  • HTML5是超文本標記語言的第五次重大修改,2014年10月29日標準規(guī)范制定完成. *HTML5語法 DOCTY...
    塵中老閱讀 602評論 0 0

友情鏈接更多精彩內容