1 HTML5新特性

1.1 概述

HTML5 的新增特性主要是針對于以前的不足，增加了一些新的標簽、新的表單和新的表單屬性等。

這些新特性都有兼容性問題，基本是 IE9+ 以上版本的瀏覽器才支持，如果不考慮兼容性問題，可以大量使用這些新特性。

1.2 語義化標簽 （★★）

以前布局，我們基本用 div 來做。div 對于搜索引擎來說，是沒有語義的。

<div class=“header”> </div>

<div class=“nav”> </div>

<div class=“content”> </div>

<div class=“footer”> </div>

發展到了HTML5后，新增了一些語義化標簽，這樣的話更加有利于瀏覽器的搜索引擎搜索，也方便了網站的seo（Search Engine Optimization，搜索引擎優化），下面就是新增的一些語義化標簽

• <header> 頭部標簽
• <nav> 導航標簽
• <article> 內容標簽
• <section> 定義文檔某個區域
• <aside> 側邊欄標簽
• <footer> 尾部標簽

注意：

• 這種語義化標準主要是針對搜索引擎的
• 這些新標簽頁面中可以使用多次
• 在 IE9 中，需要把這些元素轉換為塊級元素
• 其實，我們移動端更喜歡使用這些標簽

1.3 多媒體標簽

多媒體標簽分為 音頻 audio 和視頻 video 兩個標簽 使用它們，我們可以很方便的在頁面中嵌入音頻和視頻，而不再去使用落后的flash和其他瀏覽器插件了。

因為多媒體標簽的 屬性、方法、事件比較多，因此我們需要什么功能的時候，就需要去查找相關的文檔進行學習使用。

1.3.1 視頻標簽- video（★★★）

1.3.1.1 基本使用

當前 <video> 元素支持三種視頻格式： 盡量使用 mp4格式

使用語法：

 <video src="media/mi.mp4"></video>

1.3.1.2 兼容寫法

由于各個瀏覽器的支持情況不同，所以我們會有一種兼容性的寫法，這種寫法了解一下即可

<video  controls="controls"  width="300">

    <source src="move.ogg" type="video/ogg" >

    <source src="move.mp4" type="video/mp4" >

    您的瀏覽器暫不支持 <video> 標簽播放視頻

</ video >

上面這種寫法，瀏覽器會匹配video標簽中的source，如果支持就播放，如果不支持往下匹配，直到沒有匹配的格式，就提示文本

1.3.1.3 video 常用屬性

屬性	值	描述
autoplay	autoplay	視頻就緒自動播放（谷歌瀏覽器需要添加muted來解決自動播放問題）
controls	controls	向用戶顯示播放控件
width	pixels(像素)	設置播放器寬度
height	pixels(像素)	設置播放器高度
loop	loop	播放完是否繼續播放該視頻，循環播放
preload	auto（預先加載視頻） none（不應加載視頻）	規定是否預加載視頻（如果有了autoplay 就忽略該屬性）
src	url	視頻url地址
poster	lmgurl	加載等待的畫面圖片
muted	muted	靜音播放

屬性很多，有一些屬性需要大家重點掌握：

• autoplay 自動播放
  • 注意： 在google瀏覽器上面，默認禁止了自動播放，如果想要自動播放的效果，需要設置 muted屬性
• width 寬度
• height 高度
• loop 循環播放
• src 播放源
• muted 靜音播放

示例代碼：

<video src="media/mi.mp4" autoplay="autoplay" muted="muted"  loop="loop" poster="media/mi9.jpg"></video>

1.3.2 音頻標簽- audio

1.3.2.1 基本使用

當前 元素支持三種視頻格式： 盡量使用 mp3格式

使用語法：

<audio src="media/music.mp3"></audio>

1.3.2.2 兼容寫法

由于各個瀏覽器的支持情況不同，所以我們會有一種兼容性的寫法，這種寫法了解一下即可

< audio controls="controls"  >

    <source src="happy.mp3" type="audio/mpeg" >

    <source src="happy.ogg" type="audio/ogg" >

    您的瀏覽器暫不支持 <audio> 標簽。

</ audio>

上面這種寫法，瀏覽器會匹配audio標簽中的source，如果支持就播放，如果不支持往下匹配，直到沒有匹配的格式，就提示文本

1.3.2.3 audio 常用屬性

屬性	值	描述
autoplay	autoplay	如果出現該屬性，則音頻在就緒后馬上播放。
controls	controls	如果出現該屬性 ，則向用戶顯示控件，比如播放按鈕。
loop	loop	如果出現該屬性，則每當音頻結束時重新開始播放。
src	url	要播放的音頻的 URL。

示例代碼：

<audio src="media/music.mp3" autoplay="autoplay" controls="controls"></audio>

1.4 小結

• 音頻標簽和視頻標簽使用方式基本一致
• 瀏覽器支持情況不同
• 谷歌瀏覽器把音頻和視頻自動播放禁止了
• 我們可以給視頻標簽添加 muted 屬性來靜音播放視頻，音頻不可以（可以通過JavaScript解決）
• 視頻標簽是重點，我們經常設置自動播放，不使用 controls 控件，循環和設置大小屬性

1.5 新增的表單元素 （★★）

在H5中，幫我們新增加了很多類型的表單，這樣方便了程序員的開發

課堂案例：在這個案例中，熟練了新增表單的用法

案例代碼：

<!-- 我們驗證的時候必須添加form表單域 -->

<form action="">

    <ul>

        <li>郵箱: <input type="email" /></li>

        <li>網址: <input type="url" /></li>

        <li>日期: <input type="date" /></li>

        <li>時間: <input type="time" /></li>

        <li>數量: <input type="number" /></li>

        <li>手機號碼: <input type="tel" /></li>

        <li>搜索: <input type="search" /></li>

        <li>顏色: <input type="color" /></li>

        <!-- 當我們點擊提交按鈕就可以驗證表單了 -->

        <li> <input type="submit" value="提交"></li>

    </ul>

</form>

常見輸入類型

text password radio checkbox button file hidden submit reset image

新的輸入類型

屬性值	說明
type="email"	限制用戶輸入必須為Email類型
type="url"	限制用戶輸入必須為URL類型
type="date"	限制用戶輸入必須為日期類型
type="time"	限制用戶輸入必須為時間類型
type="month"	限制用戶輸入必須為月類型
type="week"	限制用戶輸入必須為周類型
type="number"	限制用戶輸入必須為數字類型
type="tel"	手機號碼
type="search"	搜索框
type="color"	生成一個顏色選擇表單

類型很多，我們現階段重點記憶三個： number tel search

屬性	值	說明
required	required	表單擁有該屬性表示其內容不能為空，必填
placeholder	提示文本	表單的提示信息，存在默認值將不顯示
autofocus	autofocus	自動聚焦屬性，頁面加載完成自動聚焦到指定表單
autocomplete	off / on	當用戶在字段開始鍵入時，瀏覽器基于之前鍵入過的值，應該顯示出在字段中填寫的選項。 默認已經打開，如 autocomplete="on"，關閉 autocomplete="off" 需要放在表單內，同時加上 name 屬性，同時成功提交
multiple	multiple	可以多選文件提交

可以通過以下設置方式修改placeholder里面的字體顏色：

input::placeholder {

    color: pink;

}

2 CSS3新特性

2.1 CSS3 的現狀

• 新增的CSS3特性有兼容性問題，ie9+才支持
• 移動端支持優于 PC 端
• 不斷改進中
• 應用相對廣泛
• 現階段主要學習：新增選擇器和盒子模型以及其他特性

2.2 CSS3 新增選擇器

CSS3 給我們新增了選擇器，可以更加便捷，更加自由的選擇目標元素。

• 屬性選擇器
• 結構偽類選擇器
• 偽元素選擇器

2.2.1 屬性選擇器（★★）

屬性選擇器，按照字面意思，都是根據標簽中的屬性來選擇元素

選擇符	簡介
E[att]	選擇具有 att 屬性的 E 元素
E[att="val"]	選擇具有 att 屬性且值等于 val 的 E 元素
E[att^="val"]	匹配具有 att 屬性且值以開頭的 E 元素
E[att$="val"]	匹配具有 att 屬性且值以 val 結尾的 E 元素
E[att*="val"]	匹配具有 att 屬性且值中含有 val 的 E 元素

示例代碼：

 /* 只選擇 type =text 文本框的input 選取出來 */

input[type=text] {

    color: pink;

}

/* 選擇首先是div 然后 具有class屬性 并且屬性值 必須是 icon開頭的這些元素 */

div[class^=icon] {

    color: red;

}

/* 選擇首先是section 然后 具有class屬性 并且屬性值 必須是 data結尾的這些元素 */

section[class$=data] {

    color: blue;

}

• 屬性選擇器，按照字面意思，都是根據標簽中的屬性來選擇元素
• 屬性選擇器可以根據元素特定屬性的來選擇元素。 這樣就可以不用借助于類或者id選擇器
• 屬性選擇器也可以選擇出來自定義的屬性
• 注意：類選擇器、屬性選擇器、偽類選擇器，權重為 10。

2.2.2 結構偽類選擇器

結構偽類選擇器主要根據文檔結構來選擇器元素， 常用于根據父級選擇器里面的子元素

選擇符	簡介
E:first-child	匹配父元素中的第一個子元素 E
E:last-child	匹配父元素中最后一個 E 元素
E:nth-child(n)	匹配父元素中的第 n 個子元素 E
E:first-of-type	指定類型 E 的第一個
E:last-of-type	指定類型 E 的最后一個
E:nth-of-type(n)	指定類型 E 的第 n 個

2.2.2.1 E:first-child

匹配父元素的第一個子元素E

 <style>

    ul li:first-child{

      background-color: red;

    }

  </style>

  <ul>

    <li>列表項一</li>

    <li>列表項二</li>

    <li>列表項三</li>

    <li>列表項四</li>

  </ul>

E:last-child 則是選擇到了最后一個li標簽

2.2.2.2 E:nth-child(n)（★★★）

匹配到父元素的第n個元素

• 匹配到父元素的第2個子元素

  ul li:nth-child(2){}

• 匹配到父元素的序號為奇數的子元素

  ul li:nth-child(odd){} odd 是關鍵字 奇數的意思（3個字母 ）

• 匹配到父元素的序號為偶數的子元素

  ul li:nth-child(even){} even（4個字母 ）

• 匹配到父元素的前3個子元素

  ul li:nth-child(-n+3){}

  選擇器中的 n 是怎么變化的呢？

  因為 n是從 0 ，1，2，3.. 一直遞增

  所以 -n+3 就變成了

  • n=0 時 -0+3=3
  • n=1時 -1+3=2
  • n=2時 -2+3=1
  • n=3時 -3+3=0
  • ...

一些常用的公式： 公式不是死的，在這里列舉出來讓大家能夠找尋到這個模式，能夠理解代碼，這樣才能寫出滿足自己功能需求的代碼

公式	取值
2n	偶數
2n+1	奇數
5n	5 10 15...
n+5	從第5個開始（包含第五個）到最后
-n+5	前5個（包含第5個）...

常用的結構偽類選擇器是： nth-child(n) {...}

2.2.2.3 E:nth-child 與 E:nth-of-type 的區別

這里只講明 E:nth-child(n) 和 E:nth-of-type(n) 的區別 剩下的 E:first-of-type E:last-of-type E:nth-last-of-type(n) 同理做推導即可

<style>

    ul li:nth-child(2){

      /* 字體變成紅色 */

        color: red;

    }

    ul li:nth-of-type(2){

      /* 背景變成綠色 */

      background-color: green;

    }

  </style>

  <ul>

    <li>列表項一</li>

    <p>亂來的p標簽</p>

    <li>列表項二</li>

    <li>列表項三</li>

    <li>列表項四</li>

  </ul>

也就是說：

• E:nth-child(n) 匹配父元素的第n個子元素E，也就是說，nth-child 對父元素里面所有孩子排序選擇（序號是固定的） 先找到第n個孩子，然后看看是否和E匹配
• E:nth-of-type(n) 匹配同類型中的第n個同級兄弟元素E，也就是說，對父元素里面指定子元素進行排序選擇。 先去匹配E ，然后再根據E 找第n個孩子

2.2.2.4 小結

• 結構偽類選擇器一般用于選擇父級里面的第幾個孩子
• nth-child 對父元素里面所有孩子排序選擇（序號是固定的） 先找到第n個孩子，然后看看是否和E匹配
• nth-of-type 對父元素里面指定子元素進行排序選擇。 先去匹配E ，然后再根據E 找第n個孩子
• 關于 nth-child（n） 我們要知道 n 是從 0 開始計算的，要記住常用的公式
• 如果是無序列表，我們肯定用 nth-child 更多
• 類選擇器、屬性選擇器、偽類選擇器，權重為 10

2.2.3 偽元素選擇器（★★★）(重點)

偽元素選擇器可以幫助我們利用CSS創建新標簽元素，而不需要HTML標簽，從而簡化HTML結構

選擇符	簡介
::before	在元素內部的前面插入內容
::after	在元素內部的后面插入內容

示例demo

<style>

 div {

     width: 200px;

     height: 200px;

     background-color: pink;

 }

 /* div::before 權重是2 */

 div::before {

     /* 這個content是必須要寫的 */

     content: '我';

 }

 div::after {

     content: '小豬佩奇';

 }

</style>

<body>

 <div>

     是

 </div>

</body>

注意：

• before 和 after 創建一個元素，但是屬于行內元素
• 新創建的這個元素在文檔樹中是找不到的，所以我們稱為偽元素
• 語法： element::before {}
• before 和 after 必須有 content 屬性
• before 在父元素內容的前面創建元素，after 在父元素內容的后面插入元素
• 偽元素選擇器和標簽選擇器一樣，權重為 1

2.2.3.1 應用場景一： 字體圖標

在實際工作中，字體圖標基本上都是用偽元素來實現的，好處在于我們不需要在結構中額外去定義字體圖標的標簽，通過content屬性來設置字體圖標的 編碼

步驟：

• 結構中定義div盒子
• 在style中先申明字體 @font-face
• 在style中定義after偽元素 div::after
• 在after偽元素中 設置content屬性，屬性的值就是字體編碼
• 在after偽元素中 設置font-family的屬性
• 利用定位的方式，讓偽元素定位到相應的位置；記住定位口訣：子絕父相

<head>

 ...

 <style>

     @font-face {

         font-family: 'icomoon';

         src: url('fonts/icomoon.eot?1lv3na');

         src: url('fonts/icomoon.eot?1lv3na#iefix') format('embedded-opentype'),

             url('fonts/icomoon.ttf?1lv3na') format('truetype'),

             url('fonts/icomoon.woff?1lv3na') format('woff'),

             url('fonts/icomoon.svg?1lv3na#icomoon') format('svg');

         font-weight: normal;

         font-style: normal;

         font-display: block;

     }

     div {

         position: relative;

         width: 200px;

         height: 35px;

         border: 1px solid red;

     }

     div::after {

         position: absolute;

         top: 10px;

         right: 10px;

         font-family: 'icomoon';

         /* content: '?'; */

         content: '\e91e';

         color: red;

         font-size: 18px;

     }

 </style>

</head>

<body>

 <div></div>

</body>

2.2.3.2 應用場景二： 仿土豆效果

把之前的代碼進行了改善

步驟：

• 找到之前寫過的仿土豆的結構和樣式，拷貝到自己的頁面中
• 刪除之前的mask遮罩
• 在style中，給大的div盒子（類名叫tudou的），設置 before偽元素
• 這個偽元素充當的是遮罩的角色，所以我們不用設置內容，但是需要設置content屬性，屬性的值為空字符串
• 給這個遮罩設置寬高，背景顏色，默認是隱藏的
• 當鼠標移入到 div盒子時候，讓遮罩顯示，利用 hover 來實現

<head>

 ...

 <style>

     .tudou {

         position: relative;

         width: 444px;

         height: 320px;

         background-color: pink;

         margin: 30px auto;

     }

     .tudou img {

         width: 100%;

         height: 100%;

     }

     .tudou::before {

         content: '';

         /* 隱藏遮罩層 */

         display: none;

         position: absolute;

         top: 0;

         left: 0;

         width: 100%;

         height: 100%;

         background: rgba(0, 0, 0, .4) url(images/arr.png) no-repeat center;

     }

     /* 當我們鼠標經過了 土豆這個盒子，就讓里面before遮罩層顯示出來 */

     .tudou:hover::before {

         /* 而是顯示元素 */

         display: block;

     }

 </style>

</head>

<body>

 <div class="tudou">

     <img src="data:images/tudou.jpg" alt="">

 </div>

 <div class="tudou">

     <img src="data:images/tudou.jpg" alt="">

 </div>

 <div class="tudou">

     <img src="data:images/tudou.jpg" alt="">

 </div>

 <div class="tudou">

     <img src="data:images/tudou.jpg" alt="">

 </div>

</body>

2.2.3.3 應用場景三： 清除浮動

回憶一下清除浮動的方式：

• 額外標簽法也稱為隔墻法，是 W3C 推薦的做法。
• 父級添加 overflow 屬性
• 父級添加after偽元素
• 父級添加雙偽元素

額外標簽法也稱為隔墻法，是 W3C 推薦的做法

注意： 要求這個新的空標簽必須是塊級元素

后面兩種偽元素清除浮動算是第一種額外標簽法的一個升級和優化。

2.3 盒子模型（★★★）

CSS3 中可以通過 box-sizing 來指定盒模型，有2個值：即可指定為 content-box、border-box，這樣我們計算盒子大小的方式就發生了改變。

可以分成兩種情況：

• box-sizing: content-box 盒子大小為 width + padding + border （以前默認的）
• box-sizing: border-box 盒子大小為 width

如果盒子模型我們改為了box-sizing: border-box ， 那padding和border就不會撐大盒子了（前提padding和border不會超過width寬度）

2.4 其他特性（★）

2.4.1 圖標變模糊 -- CSS3濾鏡filter

filter CSS屬性將模糊或顏色偏移等圖形效果應用于元素。

語法：

filter:   函數(); -->  例如： filter: blur(5px);  -->  blur模糊處理  數值越大越模糊

2.4.2 計算盒子寬度 -- calc 函數

calc() 此CSS函數讓你在聲明CSS屬性值時執行一些計算。

語法：

width: calc(100% - 80px);

括號里面可以使用 + - * / 來進行計算

2.5 CSS3 過渡（★★★）

過渡（transition)是CSS3中具有顛覆性的特征之一，我們可以在不使用 Flash 動畫或 JavaScript 的情況下，當元素從一種樣式變換為另一種樣式時為元素添加效果。

過渡動畫： 是從一個狀態 漸漸的過渡到另外一個狀態

可以讓我們頁面更好看，更動感十足，雖然 低版本瀏覽器不支持（ie9以下版本） 但是不會影響頁面布局。

我們現在經常和 :hover 一起 搭配使用。

語法：

transition: 要過渡的屬性  花費時間  運動曲線  何時開始;

• 屬性 ： 想要變化的 css 屬性， 寬度高度 背景顏色 內外邊距都可以 。如果想要所有的屬性都變化過渡， 寫一個all 就可以。
• 花費時間： 單位是 秒（必須寫單位） 比如 0.5s
• 運動曲線： 默認是 ease （可以省略）
• 何時開始：單位是 秒（必須寫單位）可以設置延遲觸發時間 默認是 0s （可以省 略）
• 后面兩個屬性可以省略
• 記住過渡的使用口訣： 誰做過渡給誰加

2.5.1 過渡練習

步驟：

• 創建兩個div的盒子，屬于的嵌套關系，外層類名叫 bar，里層類名叫 bar_in
• 給外層的bar 這個盒子設置邊框，寬高，圓角邊框
• 給里層的bar_in 設置 初試的寬度，背景顏色，過渡效果
• 給外層的 bar 添加 hover事件，當觸發了hover事件 讓里層的bar_in 來進行寬度的變化

代碼：

<head>

 ...

 <style>

     .bar {

         width: 150px;

         height: 15px;

         border: 1px solid red;

         border-radius: 7px;

         padding: 1px;

     }

     .bar_in {

         width: 50%;

         height: 100%;

         background-color: red;

         /* 誰做過渡給誰加 */

         transition: all .7s;

     }

     .bar:hover .bar_in {

         width: 100%;

     }

 </style>

</head>

<body>

 <div class="bar">

     <div class="bar_in"></div>

 </div>

</body>

3 廣義H5說法 了解

3.1 狹隘H5

3.2 廣義H5

• 廣義的 HTML5 是 HTML5 本身 + CSS3 + JavaScript 。
• 這個集合有時稱為 HTML5 和朋友，通常縮寫為 HTML5 。
• 雖然 HTML5 的一些特性仍然不被某些瀏覽器支持，但是它是一種發展趨勢。
• HTML5 MDN 介紹：
  
  https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML

4 Web服務器

4.1 什么是Web服務器

服務器（我們也會稱之為主機）是提供計算服務的設備，它也是一臺計算機。在網絡情況下，根據服務器提供的服務類型不同，服務器又分為文件服務器、數據庫服務器、應用程序服務器、Web服務器等。

Web服務器一般指網站服務器，是指駐留于因特網上某種類型計算機的程序，可以向瀏覽器等Web客戶端提供文檔，也可以放置網站文件，讓全世界瀏覽；可以放置數據文件，讓全世界下載。

根據服務器在網絡中所在的位置不同，又可分為本地服務器和遠程服務器。

4.2 遠程服務器

遠程服務器是通常是別的公司為我們提供的一臺電腦（主機），我們只要把網站項目上傳到這臺電腦上，任何人都可以利用域名訪問我們的網站。

比如域名：www.mi.com 可以訪問小米網站

總結：

  1. 服務器就是一臺電腦。因為我們主要是做網站，所以我們主要使用wb服務器。

  2. 服務器可以分為本地服務器和遠程服務器。

  3. 遠程服務器是別的公司為我們提供了一臺計算機。

  4. 我們可以把網站上傳到遠程服務器里面，別人就可以通過域名訪問我們的網站了。

4.3 將自己的網站上傳到遠程服務器

一個免費的遠程服務器（免費空間） http://free.3v.do/

  1. 去免費空間網站注冊賬號。

  2. 記錄下主機名、用戶名、密碼、域名。

  3. 利用 cutftp 軟件 上傳網站到遠程服務器。

  4. 在瀏覽器中輸入域名，即可訪問我們的網站。

總結

以上是生活随笔為你收集整理的HTML5CSS3提高的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。