學習筆記~1.4 HTML5新特性

一初學者發表於2020-09-28
筆記HTML

1.4 HTML5新特性

筆者為正在學習web前端開發基礎的菜鳥，計劃先學習祖傳三大件：HTML CSS及JS。寫部落格主要是為了加深記憶，以及把自己所學分享。本部落格的內容主要為學習筆記，由於自學，其中我會借鑑網課老師課堂筆記再加入一些自己的見解，同時會分享一些學習過程中遇到的問題和解決方法。

正文

1.HTML5新特性（面試）
1）增加了audio和video音訊播放，拋棄了Flash
2）新增了canvas畫布（繪畫，製作動畫（如小遊戲開發等））
3）地理定位
4）增加了離線快取
5）硬體加速
6）Web Socket（全雙工通訊）
7）增加了本地儲存
8）新增了一些語義化標籤
2.網頁佈局標籤
header:頁首
nav:導航欄
aside:側邊欄
main:主體
section:區塊
article:文章
footer:頁尾
PS：這裡在佈局的時候一定要使用合適的佈局標籤，不要誤導別人或是自己。

在這裡插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>網頁佈局標籤</title>
    <style>
        .container{
            width: 80%;
            border: 1px solid black;
            margin: 10px auto;
            font-size: 18px;
            text-align: center;
        }
        .header, .footer{
            width: 100%;
            background-color: pink;
            color: white;
            line-height: 30px;
        }
        .main{
            overflow: hidden;
            padding: 0 200px;
        }
        .cosume{
            float: left;
            position: relative;
            height: 600px;
        }
        .nav, .aside{
            width: 200px;
            background-color: #999999;
        }
        .nav{
            margin-left: -100%;
            left: -200px;
        }
        .aside{
            margin-left: -200px;
            right: -200px;
        }
        .aritcle{
            width: 100%;
            background-color: #00fff7;
        }


    </style>
</head>
<body>
<div class="container">
    <div class="header">header</div>
    <div class="main">
        <div class="aritcle cosume">article</div>
        <div class="nav cosume">nav</div>
        <div class="aside cosume">aside</div>
    </div>
    <div class="footer">footer</div>
</div>
</body>
</html>
3.HTML5多媒體
1)audio
    播放音樂或音訊。IE9以下的版本不支援。

    a)支援的格式
        .mp3/.ogg/.wav
    b)屬性
        src:檔案路徑
        autoplay:自動播放
        loop:迴圈
        controls:控制條
        muted:靜音
        preload:預載入（當使用autoplay時，preload自動失效）
2)video
    載入視訊。IE9以下的版本不支援。

    a)支援的格式
        .mp4/.ogg/.webm
    b)屬性
        src:檔案路徑
        autoplay:自動播放
        loop:迴圈
        controls:控制條
        muted:靜音
        preload:預載入（當使用autoplay時，preload自動失效）
        width:寬度
        height:高度
        poster:海報
3)embed
    嵌入內容或載入外掛。

    屬性:
        src:檔案路徑
        width:寬度
        height:高度
        type:型別
4)canvas
    畫布。是一個容器元素。
    注意：
        a.單獨使用canvas沒有什麼意義，它必須結合Javascript使用。它的具體功能體現是通過
    Javascript體現現來的。
        b.canvas的寬高最好不要通過css實現，而是直接使用標籤屬性width和height實現。
4.HTML5常用屬性
1）contentEditable
    將標籤轉換為可編輯狀態。可用於所有標籤。它的值有true/false。
2）hidden
    對元素進行隱藏。一般用來傳值或當某個條件成立，執行內容顯示。預設值為hidden。
3）data-*
    用於儲存頁面或應用程式的私有自定義資料。一般用於傳值。
4）multiple
    規定輸入域中可選擇多個內容。用於表單元件中，如file/select。
5）required
    約束表單元互在提交前必須輸入值。用於表單元件中，需要結合提交按鈕使用。
6）pattern
    用於驗證輸入欄位的模式。用於表單元件中，需要結合提交按鈕使用。
5.表單元件
1）color：顏色
2）email：郵箱
3）tel：電話號碼
4）url：網址
5）number：數字
6）range：範圍
7）search：搜尋
8）date：日期
9）datetime：日期時間
10）datetime-local：本一日期時間
11）year：年份
12）month：月份
13）time：時間
6.表單屬性
1）formaction:修改action資料提交的地方
2）formenctype:修改表單請求的型別
3）formmethod:修改資料提交的方法
4）form:設定表單元素屬於哪個表單
5）novalidate:不驗證
7.input屬性
1）autocomplete:自動完成
    用來幫助使用者輸入，每一次輸入的內容，瀏覽器是否儲存輸入的值，以備將來使用。值有：
on/off，預設為on。
    為了保護敏感資料（如使用者帳號、密碼等），避免本地瀏覽器對它們不安全儲存，一般需要關閉。
2）autofocus:自動獲焦
3）step:步長
4）multiple:多選
5）pattern:正則匹配
6）placeholder:輸入提示
7）required:必須輸入

總結

HTML5增加的這些新特性，筆者覺得重點要掌握視訊音訊，如果要插入視訊或者音訊，最好在標籤上直接新增寬高，防止閃爍，圖片同理。還有一些很碎的知識點，大家不必記得很清晰，常用的熟練掌握，不常用的現學現用即可。

相關文章