HTML5和CSS3四CSS3一

代碼下載地址

HTML5簡介

html5不是新的語言，而是html的第五次重大修改——版本

支持：所有主流瀏覽器都支持（Chrome、Firefox、Safari等），IE9（不是全部支持是有選擇的支持）及以上支持

改變了用戶與文檔的交互方式：多媒體（video、audio、canvas）

增加了新的特性：語義特性，本地存儲特性，網頁多媒體，二維/三維，特效（過度、動畫）

相對HTML4：

拋棄了一些不合理不常用的標記和屬性
新增了一些標記和屬性——表單
從代碼角度，HTML5網頁結構代碼更簡潔

可以通過如下方式構建文檔類型進行比較：

html:5 <tab> HTML5文檔類型
html:xt <tab> XHTML過度文檔類型
html:4s <tab> HTML4嚴格文檔類型，完全按照HTML4解析

HTML5參考手冊，這裏例舉了HTML衆多標籤並對HTML5拋棄和新增的進行了標註。

語義標籤

HTML5中有部分標籤語義性更強，更容易理解：

標籤	作用
nav	導航
header	頁眉
footer	頁腳
main	主體內容
article	文章
aside	邊欄（主體內容之外）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        /*重置內外邊距*/
        *{
            padding: 0;
            margin: 0;
        }
        header{
            background-color: red;
            width: 100%;
            height: 64px;
        }
        nav{
            background-color: green;
            width: 100%;
            height: 44px;
        }
        main{
            background-color: blue;
            width: 100%;
            height: 500px;
        }
        /*子元素*/
        main > article{
            background-color: cyan;
            width: 80%;
            height: 100%;
            float: left;
        }
        main > aside{
            background-color: purple;
            width: 20%;
            height: 100%;
            float: right;
        }
        footer{
            background-color: yellow;
            width: 100%;
            height: 49px;
        }
    </style>
</head>
<body>
<header>頭部</header>
<nav>導航</nav>
<main>
    <!--主體-->
    <article>文章</article>
    <aside>邊欄</aside>
</main>
<footer>尾部</footer>
</body>
</html>

如需兼容IE8等瀏覽器可以手動創建標籤，默認標籤的類型都是行級元素：

<script>
    // 手動創建標籤，默認標籤的類型都是行級元素
    document.createElement("header");
    document.createElement("nav");
    document.createElement("main");
    document.createElement("article");
    document.createElement("aside");
    document.createElement("footer");
</script>

引入第三方js：

<!--ie8一下不支持HTML5，引入以下文件就可以做到兼容-->
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/html5shiv/r29/html5.min.js"></script>

行級元素在設置寬高時是無效的，將行級元素轉化爲塊級元素：

        header{
            display: block;
            background-color: red;
            width: 100%;
            height: 64px;
        }

HTML5表單input標籤新增的type屬性

input屬性列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    用戶名：<input type="text" name="userName"> <br>
    密碼： <input type="password" name="userPassword"> <br>
    <!--提供了默認的電子郵箱驗證-->
    email：<input type="email" name="userEmail"> <br>
    <!--並不提供電話號碼的驗證，而是能夠在移動端調用輸入電話號碼的數字鍵盤-->
    電話：<input type="tel" name="userTelephone"> <br>
    <!--提供合法網址驗證-->
    網址：<input type="url" name="userUrl"> <br>
    <!--只能輸入數字（包括小數）-->
    數量：<input type="number" name="userNumber" value="60" max="100" min="0"> <br>
    <!--提供更人性化的輸入體驗：有刪除按鈕-->
    商品名稱：<input type="search">
    範圍：<input type="range" value="50" max="100" min="0"> <br>
    顏色：<input type="color"> <br>
    時間：<input type="time"> <br>
    日期：<input type="date"> <br>
    時間日期：<input type="datetime-local"> <br>
    月份：<input type="month"> <br>
    星期：<input type="week"> <br>

    <input type="submit">
</form>
</body>
</html>

表單新增的屬性

<form action="" id="myForm">
    <!--佔位符、獲取焦點、自動完成（必須提交之後才能記錄、必須設置name，on/off打開/關閉）-->
    用戶名：<input type="text" name="userName" placeholder="請輸入用戶名" autofocus autocomplete="on"> <br>
    <!--必須輸入、正則表達式-->
    手機號：<input type="tel" name="telephoneNumber" required pattern="^(\+86)?1(3|4|5|7|8)\d{9}$"> <br>
    <!--多個值-->
    文件：<input type="file" name="photo" multiple> <br>
    <!--輸入多個值需要用逗號分隔-->
    email：<input type="email" name="email" multiple> <br>
    <input type="submit">
</form>
<!--指定表單id，將表單元素 數據加入到指定表單提交-->
地址：<input type="text" name="address" form="myForm">

表單新增的元素

<form action="">
    專業：
    <select name="" id="">
        <option value="1">iOS</option>
        <option value="2">android</option>
        <option value="3">web前端</option>
    </select>
    <br>

    <!--不僅可以輸入，還可以選擇，通過datalist創建選擇列表-->
    <!--建立輸入框與datalist的關聯，list="datalist的id號"-->
    專業：<input type="text" list="subjects">
    <datalist id="subjects">
        <!--選項值，value：具體的值，label：提示信息，輔助值-->
        <!--option可以試單標籤也可以試雙標籤 -->
        <option value="iOS" label="精通"/>
        <option value="android" label="熟悉"></option>
        <option value="web前端" label="瞭解"></option>
    </datalist>
    <br>

    <!--如果input的type類型是url，那麼value值必須添加-->
    網址：<input type="url" list="urls">
    <datalist id="urls">
        <option value="https://www.baidu.com"></option>
        <option value="https://www.sohu.com"></option>
    </datalist>
</form>

表單新增事件

<body>

<form action="">
    用戶名：<input type="text" name="username" id="username"> <br/>
    電話：<input type="tel" name="telephone" id="telephone" pattern="^1\d{10}$"> <br/>
    <input type="submit">
</form>
<script>
    /*oninput：監聽指定元素內容的變化，只要改變就會觸發*/
    document.getElementById("username").oninput = function () {
        console.log("oninput" + this.value);
    }
    /*onkeyup：監聽鍵盤，鍵的彈起都會觸發一次*/
    document.getElementById("username").onkeyup = function () {
        console.log("onkeyup" + this.value);
    }
    /*oninvalid：驗證不通過時觸發*/
    document.getElementById("telephone").oninvalid = function () {
        /*設置提示信息*/
        this.setCustomValidity("請輸入11位手機號碼")
    }
</script>
</body>

進度條

<!--max:最大值；value:當前值-->
<progress max="100" value="18"></progress> <br>

<!--度量器:衡量當前進度值-->
<!--high:規定較高的值；low:規定的較低的值；max:最大值；min:最小值；value:當前值-->
<meter max="100" min="0" low="20" high="80" value="10"></meter> <br>
<meter max="100" min="0" low="20" high="80" value="50"></meter> <br>
<meter max="100" min="0" low="20" high="80" value="90"></meter> <br>

表單總結案例

<body>

<form action="">
    <fieldset>
        <legend>學生檔案</legend>
        <label for="userName">姓名：</label>
        <input type="text" name="userName" id="userName" placeholder="請輸入姓名">
        <label for="phoneNum">手機號碼：</label>
        <input type="tel" name="phoneNum" id="phoneNum" pattern="^1\d{10}$">
        <label for="email">電子郵箱：</label>
        <input type="text" name="email" id="email" required>
        <label for="school">所屬專業：</label>
        <input type="text" name="school" id="school" list="schoolList" placeholder="請選擇">
        <datalist id="schoolList">
            <option value="土木工程"></option>
            <option value="軟件工程"></option>
            <option value="國際貿易"></option>
        </datalist>
        <label for="score">入學成績：</label>
        <input type="number" name="score" id="score" min="0" max="100" value="0">
        <label for="level">基礎水平</label>
        <meter id="level" min="0" max="100" low="59" high="80" value="0"></meter>
        <label for="inTime">入學日期：</label>
        <input type="date" name="inTime" id="inTime">
        <label for="leaveTime">畢業日期：</label>
        <input type="date" name="leaveTime" id="leaveTime">
        <input type="submit">
    </fieldset>
</form>

<script>
    document.getElementById("score").oninput = function () {
        document.getElementById("level").value = this.value
    }
</script>

</body>

多媒體標籤

<body>
<!--audio標籤
src：音頻文件路徑
controls：播放控制面板
autoplay：自動播放
loop：循環
-->
<audio src="mp3/y857.wav" controls autoplay loop></audio> <br/>

<!--video標籤
src：視頻文件路徑
controls：播放控制面板
autoplay：自動播放
loop：循環
width：寬度（一般只設置寬度或者高度，如果同時設置視頻不會調整到非等比的寬高，）
height：高度
poster：視頻播放前的封面，默認爲當前視頻的第一幀畫面
-->
<video src="mp3/1653902590493958.mp4" controls width="108" height="108" poster="images/huliena.jpeg"></video> <br/>

<!--source標籤
不同瀏覽器支持的視頻格式不一樣，準備多個視頻格式文件供瀏覽器選擇。
-->
<video controls>
    <source src="mp3/1653902590493958.flv" type="video/flv">
    <source src="mp3/1653902590493958.mp4" type="video/mp4">
    當前瀏覽器不支持
</video>

</body>

獲取元素

<body>

<ul>
    <li class="red">紅</li>
    <li class="green">綠</li>
    <li class="blue" id="blue">藍</li>
</ul>

<script>
    /*獲取li標籤*/
    window.onload = function () {
        /*getElementsByTagName：獲取的是數組
            使用索引不直觀，一般數據都是後臺
        */
        var liValue = document.getElementsByTagName("li")[1];
        console.log(liValue);

        /*querySelector：查詢選擇器（傳入選擇器名稱）
            獲取單個元素，如果獲取的元素不止一個，返回滿足條件的第一個
            參數要求：類選擇器必須添加.；id選擇器必須添加#；否則會當成標籤處理
        */
        var quryLi = document.querySelector("li");
        console.log(quryLi)
        var greenLi = document.querySelector(".green");
        console.log(greenLi)
        var blueLi = document.querySelector("#blue");
        console.log(blueLi)

        /*querySelectorAll：獲取滿足條件的所有元素-數組*/
        var allLi = document.querySelectorAll("li")
        console.log(allLi)
    }
</script>

</body>

操作元素類樣式

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .red {
            color: red;
        }
        .green {
            color: green;
        }
        .blue {
            color: blue;
        }
        .underline {
            text-decoration: underline;
        }
    </style>
</head>
<body>

<ul>
    <li>第一個</li>
    <li class="blue">第二個</li>
    <li>第三個</li>
    <li class="red">第四個</li>
</ul>

<input type="button" value="獲取第二個元素li樣式" id="items">
<input type="button" value="設置第三個li元素樣式" id="classname"> <br/>
<hr>
<input type="button" value="爲第一個li元素添加樣式" id="add">
<input type="button" value="爲第二個li元素移除樣式" id="remove">
<input type="button" value="爲第三個li元素更換樣式" id="toggle">
<input type="button" value="判斷第四個li元素是否包含某個樣式" id="contains">

<script>
    window.onload = function () {
        document.querySelector("#items").onclick = function () {
            /*classList.item：獲取元素已經添加的樣式，通過參數來確定取添加的第幾個樣式*/
            var value = document.querySelectorAll("li")[1].classList.item(0);
            console.log(value);
        }
        document.querySelector("#classname").onclick = function () {
            /*className：設置元素樣式，可以設置多個但是會覆蓋掉原有樣式*/
            document.querySelectorAll("li")[2].className = "red underline";
        }

        /*add：爲元素添加指定名稱的樣式，一次只能添加一個樣式*/
        document.querySelector("#add").onclick = function () {
            /*classList：當前元素所有樣式列表-數組*/
            document.querySelector("li").classList.add("red");
            document.querySelector("li").classList.add("underline")
        }
        /*remove：爲元素移除指定名稱的樣式（而不是屬性），一次只能移除一個樣式*/
        document.querySelector("#remove").onclick = function () {
            document.querySelector(".blue").classList.remove("blue");
        }
        /*toggle：切換元素樣式，之前元素沒有指定名稱的樣式就添加，否則移除。*/
        document.querySelector("#toggle").onclick = function () {
            document.querySelectorAll("li")[2].classList.toggle("green")
        }
        /*contains：判斷元素是否包含指定名稱的的樣式，返回true/false*/
        document.querySelector("#contains").onclick = function () {
            var isContains = document.querySelectorAll("li")[3].classList.contains("red");
            console.log(isContains);
        }
    }
</script>

</body>
</html>

自定義屬性

<body>

<!--定義：
規範：
1、data-開頭
2、data-後必須有一個字符，多個單詞使用-連接
建議：
1、名稱應都使用小寫
2、名稱中不要包含任何特殊符號
3、名稱不要使用純數字
-->
<p data-text-property="這是標題">這是文本</p>

<!--取值-->
<script>
    window.onload = function () {
        /*獲取自定義屬性值：
            將data-後面的單詞使用駝峯命名法連接否則無法取到值
        */
        var value = document.querySelector("p").dataset["textProperty"];
        console.log(value);
    }
</script>

</body>

HTML5和CSS3四CSS3一

代碼下載地址

HTML5簡介

語義標籤

HTML5表單input標籤新增的type屬性

表單新增的屬性

表單新增的元素

表單新增事件

進度條

表單總結案例

多媒體標籤

獲取元素

操作元素類樣式

自定義屬性

關於遊戲付費的一點想法

我通過CKA和CKS啦！

Swift函數式編程十三（函子、適用函子、單子）

Swift函數式編程十二（表格應用）

Swift函數式編程十一（解析器組合算子）

HTML5和CSS3五CSS3二

HTML5和CSS3四CSS3一

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結