HTML5+CSS3提升學習筆記

HTML5

廣義的HTML5是HTML5本身+CSS3+JavaScript；

HTML5具有相容性

新增了語義化标簽

<header> ：頭部标簽
<nav> ：導航标簽
<article> ：内容标簽
<section> ：塊級标簽
<aside> ：側邊欄标簽
<footer> ：尾部标簽

HTML5+CSS3提升學習筆記
這種語義化标準主要針對搜尋引擎的
在IE9中，需要把這些元素轉換為塊級元素，是以要在樣式裡面加上display：block；

新增了多媒體标簽

音頻标簽： <audio>

HTML5+CSS3提升學習筆記

谷歌浏覽器把autoplay屬性禁用了

因為不同浏覽器支援不同的格式,是以要為這個音頻準備多個格式:

<audio controls="controls">
    <source src="media/snow.mp3" type="audio/mpeg">
    <source src="media/snow.ogg" type="audio/ogg">
    目前浏覽器不支援該格式的音頻
</audio>

視訊标簽： <video>

HTML5+CSS3提升學習筆記
谷歌浏覽器把autoplay屬性禁用了,添加靜音屬性就可以

<video autoplay="autoplay" muted="muted" loop="loop" width="300px">
    <source src="media/snow.mp4" type="audio/mp4">
    <source src="media/snow.ogg" type="audio/ogg">
    目前浏覽器不支援該格式的視訊
</video>

新增了input表單,表單屬性

HTML5+CSS3提升學習筆記

新增了Canvas

新增了拖放

在 HTML5 中，拖放是标準的一部分，任何元素都能夠拖放。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:198px; height:66px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>請把 W3School 的圖檔拖放到矩形中：</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="drag1" src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" />

</body>
</html>

設定元素為可拖放：

<img draggable="true" />

拖動什麼

在上面的例子中，ondragstart 屬性調用了一個函數，drag(event)，它規定了被拖動的資料。

dataTransfer.setData() 方法設定被拖資料的資料類型和值：

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

在這個例子中，資料類型是 “Text”，值是可拖動元素的 id (“drag1”)。

放到何處 - ondragover

預設地，無法将資料/元素放置到其他元素中。如果需要設定允許放置，我們必須阻止對元素的預設處理方式。

這要通過調用 ondragover 事件的event.preventDefault() 方法：

function allowDrop(ev)
{
ev.preventDefault();
}

進行放置 - ondrop

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

preventDefault()阻止預設事件（drop的預設行為是以連結的形式打開）

dataTransfer.getData(“Text”)獲得被拖的資料，該方法将傳回在 setData() 方法中設定為相同類型的任何資料。

被拖資料是被拖元素的 id (“drag1”)

把被拖元素追加到放置元素（目标元素）中

新增了地理定位

HTML5 Geolocation API 用于獲得使用者的地理位置。

鑒于該特性可能侵犯使用者的隐私，除非使用者同意，否則使用者位置資訊是不可用的。

<script>
var x=document.getElementById("demo");
function getLocation()
{
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="該浏覽器不支援擷取地理位置。";}
}
function showPosition(position)
{
x.innerHTML="Latitude: "+ position.coords.latitude +
"<br>Longitude: "+ position.coords.longitude;
}
</script>

新增了web存儲

Web Storage DOM API 為Web應用提供了一個能夠替代cookie的Javascript解決方案

sessionStorage—用戶端資料存儲，隻能維持在目前會話範圍内。

sessionStorage 方法針對一個 session 進行資料存儲。當使用者關閉浏覽器視窗後，資料會被删除。

localStorage—用戶端資料存儲，能維持在多個會話範圍内。

localStorage 對象存儲的資料沒有時間限制。第二天、第二周或下一年之後，資料依然可用。

對于大量複雜資料結構，一般使用IndexDB

新增了WebSocket協定

WebSocket是HTML5開始提供的一種在單個 TCP 連接配接上進行全雙工通訊的協定。在WebSocket API中，浏覽器和伺服器隻需要做一個握手的動作，然後，浏覽器和伺服器之間就形成了一條快速通道。兩者之間就直接可以資料互相傳送。浏覽器通過 JavaScript 向伺服器發出建立 WebSocket 連接配接的請求，連接配接建立以後，用戶端和伺服器端就可以通過 TCP 連接配接直接交換資料。當你擷取 Web Socket 連接配接後，你可以通過 send() 方法來向伺服器發送資料，并通過 onmessage 事件來接收伺服器傳回的資料。

CSS3

css3是在css2的基礎上新增樣式

css3新增了邊框屬性

border-color 為邊框設定多種顔色

border-image 圖檔邊框（InternetExplorer不支援border-image屬性）

border-radius 圓角邊框

box-shadow 陰影效果

css3新增了背景屬性

background-clip 規定背景的繪制區域。background-clip:content-box;

background-origin 規定背景圖檔從哪裡開始顯示，背景圖檔可以放置于content-box、padding-box或border-box區域。background-origin:content-box;

background-size 指定背景圖檔從什麼位置開始裁剪

css3新增了過渡效果即transition

css3新增了兩種漸變（gradients）

HTML5+CSS3提升學習筆記

css3新增了文字效果

text-shadow：文本陰影

word-wrap：自動換行

css3新增屬性選擇器

HTML5+CSS3提升學習筆記

<button>按鈕</button>
<button>按鈕</button>
<button>按鈕</button>
<button disabled="disabled">按鈕</button>
<button disabled="disabled">按鈕</button>
<input type="text" name="" id="" value="文本框">
<input type="text" name="" id="" value="文本框">
<input type="search" name="" id="" value="搜尋框">
<input type="search" name="" id="" value="搜尋框">
<div class="icon1">圖示1</div>
<div class="icon2">圖示1</div>
<div class="icon3">圖示1</div>
<div class="abcicon">圖示1</div>

button {
    cursor: pointer;
}
/* 屬性選擇器的使用 */
/* 選擇的是既是button又有disabled的按鈕 */
/* 屬性選擇器的權重是10 比标簽選擇器權重大*/

button[disabled] {
    cursor: default;
}
/* 屬性等于值 */

input[type="search"] {
    color: pink;
}
/* 以某個值開頭的屬性值 */

div[class^="icon"] {
    color: red;
}
/* 以某個值結尾的屬性值 */

div[class$="icon"] {
    color: rosybrown;
}
<style>

HTML5+CSS3提升學習筆記

css3新增結構僞類選擇器

HTML5+CSS3提升學習筆記

關于nth-child()

<div>
   <ul>
       <li>1</li>
       <li>2</li>
       <li>3</li>
       <li>4</li>
       <li>5</li>
       <li>6</li>
       <li>7</li>
       <li>8</li>
       <li>9</li>
       <li>10</li>
   </ul>
</div>

/* 結構僞類選擇器的使用 */
/* 選擇第一個li */

ul li:first-child {
    color: salmon;
}
/* 選擇最後一個li */

ul li:last-child {
    color: seagreen;
}
/* 選擇第四個li */

ul li:nth-child(4) {
    color: slateblue;
}
/* 選擇偶數個li */
/* ul li:nth-child(even) {
    color:  slateblue;
} */
/* 括号内是公式 n從0開始*/

ul li:nth-child(5n) {
    color: teal;
}
/* ul li:nth-child(n+5) {
    color: yellow;
}

ul li:nth-child(-n+5) {
    color: mediumvioletred;
} */

HTML5+CSS3提升學習筆記

關于nth-of-type()

<div>
    <p>這是一個p标簽</p>
    <span>這是一個span标簽</span>
    <span>這是一個span标簽</span>
    <span>這是一個span标簽</span>
</div>

div :nth-child(1) {
    color: mediumvioletred;
}
/* nth-child（n）選擇父元素裡的第n個元素 不管他的類型 */
/* nth-of-type（n）選擇相應類型中的第n個元素 */
/* 注意這種寫法 是div span: */
div span:first-of-type {
    color: palevioletred;
}

div span:last-of-type {
    color: peru;
}

div span:nth-of-type(2) {
    color: royalblue;
}

css3新增僞元素選擇器

HTML5+CSS3提升學習筆記

css3 為了區分僞類和僞元素，已經明确規定了僞類用一個冒号來表示，而僞元素則用兩個冒号來表示。對于CSS2之前已有的僞元素，比如:before，單冒号和雙冒号的寫法::before作用是一樣的。

HTML5+CSS3提升學習筆記

div {
    width: 300px;
    height: 300px;
    border: royalblue 1px solid;
}

div::before {
    content: "我";
    height: 100px;
    width: 100px;
    background-color: salmon;
    display: inline-block;
}

div::after {
    content: "小小";
    height: 100px;
    width: 100px;
    background-color: salmon;
    display: inline-block;
}

HTML5+CSS3提升學習筆記

css3 新增2D 3D轉換

在二維坐标系中的轉換;

可以實作元素的位移,旋轉,縮放等效果

- 移動:translate

HTML5+CSS3提升學習筆記

<div></div>
<div></div>

div:first-child {
    height: 100px;
    width: 100px;
    background-color: salmon;
    transform: translate(50px, 50px);
    /* transform: translateX(20px);
    transform: translateY(20px); */
}

div:last-child {
    height: 100px;
    width: 100px;
    background-color: sandybrown;
}

HTML5+CSS3提升學習筆記

利用轉換實作盒子的水準垂直居中：

/* 之前實作盒子水準垂直居中的方法 */
/* p {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
    background-color: skyblue;
} */

p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background-color: skyblue;
}

可以将

margin-top: -50px; margin-left: -50px;

換成

transform: translate(-50%, -50%);

這個百分比是相對自身的尺寸的百分比。

注意這個要将預設的外邊距和内邊距設定為0px

HTML5+CSS3提升學習筆記

- 旋轉:rotate

HTML5+CSS3提升學習筆記

利用旋轉實作框中的小三角，滑鼠移上發生旋轉：

div {
	position: relative;
	width: 250px;
	height: 35px;
	border: 1px solid black;
}
	
div::after {
	content: "";
	position: absolute;
	top: 8px;
	right: 15px;
	height: 10px;
	width: 10px;
	border-right: 1px solid black;
	border-bottom: 1px solid black;
	transform: rotate(45deg);
}
/* 滑鼠經過div裡面的三角形發生旋轉 */
/* 注意這個寫法 */
div:hover::after {
	transform: rotate(225deg);
	transition: all 0.2s;
}

HTML5+CSS3提升學習筆記

設定轉換的中心點：

HTML5+CSS3提升學習筆記

小案例，實作以下的動态效果：

div {
    /* 注意下面将旋轉點設定在了左下角 */
    /* 是以這裡要将div放在中間 不然看不見 */
    width: 200px;
    height: 200px;
    border: 1px solid pink;
    margin: 30px auto;
    overflow: hidden;
}

div::before {
    content: "小小";
    /* 注意僞元素是以行内形式顯示的，是以要改為塊形式顯示 */
    display: block;
    width: 100%;
    height: 100%;
    background-color: pink;
    transform: rotate(180deg);
    transform-origin: left bottom;
    transition: all 0.3s;
}

div:hover::before {
    transform: rotate(0deg);
}

HTML5+CSS3提升學習筆記

- 縮放:scale

HTML5+CSS3提升學習筆記

實作圖檔的放大效果：

HTML5+CSS3提升學習筆記

<style>
	div {
	    overflow: hidden;
	    height: 100px;
	    width: 200px;
	    margin: 10px;
	    float: left;
	}
	
	div img {
	    height: 100px;
	    width: 200px;
	}
	
	div img:hover {
	    transform: scale(1.1);
	    transition: all 0.4s;
	}
</style>

<body>
    <div><img src="images/img-8abb811f1ef51ff04e869f85b9869349.jpg" alt=""></div>
    <div><img src="images/img-8abb811f1ef51ff04e869f85b9869349.jpg" alt=""></div>
    <div><img src="images/img-8abb811f1ef51ff04e869f85b9869349.jpg" alt=""></div>
</body>

小案例：分頁按鈕

HTML5+CSS3提升學習筆記

li {
    width: 30px;
    height: 30px;
    float: left;
    border: 1px solid pink;
    text-align: center;
    border-radius: 50%;
    line-height: 30px;
    margin: 10px;
    list-style: none;
    transition: all 0.4s;
    cursor: pointer;
}

li:hover {
    transform: scale(1.2);
}

2D轉換綜合寫法

HTML5+CSS3提升學習筆記

transition過渡屬性

HTML5+CSS3提升學習筆記

transition-property 規定設定過渡效果的 CSS 屬性的名稱。

transition-duration 規定完成過渡效果需要多少秒或毫秒。

transition-timing-function 規定速度效果的速度曲線。

transition-delay 定義過渡效果何時開始。

例如：

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
	width:100px;
	height:100px;
	background:blue;

}

div:hover
{
	width:300px;
	height:300px;
	/*隻為width屬性設定過渡的話，滑鼠移上高度會立刻增加沒有過渡
	為all屬性設定過渡的話，高度和寬度都會過渡增加*/
	transition:width 2s;
	-moz-transition:width 2s; /* Firefox 4 */
	-webkit-transition:width 2s; /* Safari and Chrome */
	-o-transition:width 2s; /* Opera */
}
</style>
</head>
<body>

<div></div>

<p>請把滑鼠指針移動到藍色的 div 元素上，就可以看到過渡效果。</p>

<p><b>注釋：</b>本例在 Internet Explorer 中無效。</p>

</body>
</html>

css3新增動畫

HTML5+CSS3提升學習筆記

基本使用：

/* 定義動畫 */
    
@keyframes move {
    /* 開始狀态 */
    0% {
        transform: translate(0px);
    }
    /* 結束狀态 */
    100% {
        transform: translate(1000px);
    }
}

div {
    width: 200px;
    height: 200px;
    background-color: pink;
    /* 調用動畫 */
    animation-name: move;
    /* 持續時間 */
    animation-duration: 2s;
}

HTML5+CSS3提升學習筆記

div {
    width: 200px;
    height: 200px;
    background-color: pink;
    /* 調用動畫 */
    animation-name: move;
    /* 持續時間 */
    animation-duration: 4s;
    /* 運動曲線 */
    animation-timing-function: ease;
    /* 何時開始 */
    animation-delay: 1s;
    /* 重複次數 */
    animation-iteration-count: infinite;
    /* 是否逆向播放 預設的是normal*/
    animation-direction: alternate;
    /* 動畫結束後的狀态  */
    animation-fill-mode: forwards;
}

div:hover {
    /* 規定動畫是否運作或暫停 */
    animation-play-state: paused;
}

HTML5+CSS3提升學習筆記

案例：熱點圖

HTML5+CSS3提升學習筆記

.city {
    position: relative;
    width: 400px;
    height: 400px;
    border: royalblue solid 1px;
}

.dotted {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background-color: pink;
    border-radius: 50%;
}
/* 這裡用到了屬性選擇器 */
/* 這裡注意權重的設定 下面對于palse2和palse3提高了權重，不然顯示不了 */
/* 類選擇器 屬性選擇器和結構僞類選擇器的權重都為10
标簽選擇器和為元素選擇器權重是1 */
.city div[class^="palse"] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    box-shadow: 0 0 12px salmon;
    animation: palse 1.2s linear infinite;
}

.city div.palse2 {
    animation-delay: 0.4s;
}

.city div.palse3 {
    animation-delay: 0.8s;
}

@keyframes palse {
    0% {}
    70% {
        width: 40px;
        height: 40px;
        opacity: 1;
    }
    100% {
        width: 70px;
        height: 70px;
        opacity: 0;
    }
}

<div class="city">
    <div class="dotted"></div>
    <div class="palse1"></div>
    <div class="palse2"></div>
    <div class="palse3"></div>
</div>

案例：打字機

這裡用到了動畫的step（）屬性，step（）可以用圖檔幀實作動畫

HTML5+CSS3提升學習筆記

div {
    overflow: hidden;
    /* 使文字在一行内顯示 在這裡可以不寫*/
    /* white-space: nowrap; */
    height: 30px;
    width: 0px;
    background-color: pink;
    animation: move 4s forwards steps(10);
    font-size: 20px;
}

@keyframes move {
    0% {
        width: 0px;
    }
    100% {
        width: 200px;
    }
}

添加多個動畫，中間用逗号分隔

css3 新增3D轉換

HTML5+CSS3提升學習筆記

css3 3D旋轉

HTML5+CSS3提升學習筆記

perspective是添加給要翻轉的盒子的父盒子

transform-style是添加給要翻轉的這個盒子

案例：兩面翻轉的盒子：

這裡是在一個父盒子裡面添加兩個子盒子，翻轉的是父盒子，同時要保留子盒子的3d效果。裡面兩個div是疊在一起的，最裡面的div要提前翻轉好，這樣再次翻轉後就是正确的，不然是反的

HTML5+CSS3提升學習筆記

.box {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0px auto;
    background-color: wheat;
    transition: all 0.4s;
    /* 讓子盒子保留立體效果 在父級上添加*/
    transform-style: preserve-3d;
    perspective: 500px;
}

.front,
.back {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    text-align: center;
    line-height: 300px;
}

.front {
    background-color: pink;
    z-index: 1;
}

.back {
    background-color: purple;
    /* 使方塊背靠背旋轉 */
    transform: rotateY(180deg);
}

.box:hover {
    transform: rotateY(180deg);
}

<div class="box">
    <div class="front">這是前面</div>
    <div class="back">這是後面</div>
</div>

案例：3d導航欄：

跟上面方法類似，用兩個子div實作，注意對2d轉換的綜合使用要注意将tranlate轉換寫在最前面，

HTML5+CSS3提升學習筆記

ul {
    margin: 100px;
}

li {
    width: 120px;
    height: 35px;
    list-style: none;
    perspective: 500px;
}

.box {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.front,
.bottom {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.front {
    background-color: pink;
    z-index: 1;
    /* 這裡不能寫百分比 因為這個div在z方向上是沒有值的 */
    transform: translateZ(17.5px);
}

.bottom {
    background-color: purple;
    /* 如果有多種樣式 必須先寫移動 */
    transform: translateY(50%) rotateX(-90deg);
}

.box {
    transition: all 0.4s;
}

.box:hover {
    transform: rotateX(90deg);
}

<ul>
    <li>
        <div class="box">
            <div class="front"></div>
            <div class="bottom"></div>
        </div>
    </li>
</ul>

案例：旋轉木馬：

和以上思路類似，在一個section裡面放置6個div，對這幾個div進行擺放，再旋轉section整體，用到了結構僞類選擇器

body {
    perspective: 1500px;
}

section {
    position: relative;
    width: 300px;
    height: 200px;
    margin: 150px auto;
    transform-style: preserve-3d;
    animation: rotate 10s linear infinite;
}

section:hover {
    animation-play-state: paused;
}

@keyframes rotate {
    0% {
        transform: rotateY(0deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

section div {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: url(images/3.jpg) no-repeat;
}
/* 結構僞類選擇器 */

section div:nth-child(1) {
    transform: translateZ(300px);
}

section div:nth-child(2) {
    transform: rotateY(60deg) translateZ(300px);
}

section div:nth-child(3) {
    transform: rotateY(120deg) translateZ(300px);
}

section div:nth-child(4) {
    transform: rotateY(180deg) translateZ(300px);
}

section div:nth-child(5) {
    transform: rotateY(240deg) translateZ(300px);
}

section div:nth-child(6) {
    transform: rotateY(300deg) translateZ(300px);
}

<body>
    <section>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </section>
</body>

浏覽器私有字首

浏覽器私有字首為了相容老版本的寫法，比較新版本的浏覽器無需添加

HTML5+CSS3提升學習筆記

HTML5+CSS3提升學習筆記

HTML5

新增了語義化标簽

新增了多媒體标簽

新增了input表單,表單屬性

新增了Canvas

新增了拖放

新增了地理定位

新增了web存儲

新增了WebSocket協定

CSS3

css3新增了邊框屬性

css3新增了背景屬性

css3新增了過渡效果 即transition

css3新增了兩種漸變（gradients）

css3新增了文字效果

css3新增屬性選擇器

css3新增結構僞類選擇器

css3新增僞元素選擇器

css3 新增2D 3D轉換

- 移動:translate

- 旋轉:rotate

- 縮放:scale

transition過渡屬性

css3新增動畫

css3 新增3D轉換

css3 3D旋轉

浏覽器私有字首

繼續閱讀

css3新增了過渡效果即transition