HTML5

&CSS3

2020/09/5

啥?！HTML5是什么？

“HTML5”和“HTML”有什么區(qū)別？

新增的HTML5特性有多好用？

HTML5

??? HTML5是W3C與WHATWG合作的產(chǎn)物。W3C指World Wide Web Consortium，即萬(wàn)維網(wǎng)聯(lián)盟，專注于XHTML2.0。而WHATWG指的是Web Hypertext Application Technology Working Group，致力于web表單和應(yīng)用程序。在 2006 年，雙方進(jìn)行合作，決議創(chuàng)建一個(gè)新的HTMl版本，即HTML5。

??? HTML的上一個(gè)版本誕生于1999年，HTML5 將成為 HTML、XHTML 以及 HTML DOM 的新標(biāo)準(zhǔn)。

HTML5 建立的一些規(guī)則：

HTML5的新特性是基于 HTML、CSS、DOM 以及 JavaScript的新“規(guī)范”，它減少了對(duì)外部插件的需求，優(yōu)化了對(duì)錯(cuò)誤的處理機(jī)制，添加了更多可以取代腳本的標(biāo)記，HTML5 可以獨(dú)立于設(shè)備，開發(fā)進(jìn)程對(duì)公眾透明。

最新版本的 Safari、Chrome、Firefox 、Opera以及IE9 都分別支持某些 HTML5 特性。

HTMl5新特性

結(jié)構(gòu)類標(biāo)簽

https://www.w3school.com.cn/tags/index.asp

????結(jié)構(gòu)標(biāo)簽是構(gòu)建基本網(wǎng)頁(yè)結(jié)構(gòu)的主要元素，只具有語(yǔ)義層的意義，大多數(shù)沒有太多特殊的作用。HTML5新增的結(jié)構(gòu)類標(biāo)簽大大增強(qiáng)了代碼的可讀性。

HTML5 中的一些有趣的新特性有：

• 用于繪畫的 canvas 元素。

• 用于媒介回放的 video 和 audio 元素

• 對(duì)本地離線存儲(chǔ)的更好的支持。

• 新的特殊內(nèi)容元素，比如 article、footer、header、nav、section等。

• 新的表單控件，比如 calendar、date、time、email、url、search等

• 瀏覽器支持：

  最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 將支持某些 HTML5 特性。

全局類屬性

contendeditable：使內(nèi)容變成可編輯文本，繼承父級(jí)元素。

• true

• false

• classname繼承父級(jí)元素

hidden：規(guī)定對(duì)元素進(jìn)行隱藏，只要存在就是隱藏效果，如不想要隱藏，則需要將其刪除，而不是設(shè)置為false。設(shè)置該屬性會(huì)使元素脫離文檔流。

spellcheck：拼寫檢查，可對(duì)text、input、textarea等文本進(jìn)行檢查，

其它標(biāo)簽

mark：標(biāo)記文本標(biāo)簽-突出黃色。

ambed：引入其他多媒體標(biāo)簽。

article：標(biāo)記一個(gè)文章

音視頻標(biāo)簽

video：視頻標(biāo)簽，對(duì)視頻的文件格式以及頻率都有要求。

• controls，使用默認(rèn)的視頻控制面板

• autoplay，設(shè)置自動(dòng)播放

• width/height，設(shè)置視頻播放窗口的寬高

• 播放次數(shù)-默認(rèn)為1次

一般使用子標(biāo)簽source來(lái)引入音視頻的文件、可寫多個(gè)作為備選。支持的文件格式：Ogg、mp4、WebM，其屬性值與屬性名相同，即可以只寫屬性名。

audio：音頻標(biāo)簽，用法同視頻標(biāo)簽的使用。

CSS3

??? CSS3 是完全向后兼容的。

??? CSS3 被劃分為一些模塊，其中最重要的 就有：選擇器、框模型、背景和邊框、文本效果、2D/3D 轉(zhuǎn)換、動(dòng)畫、多列布局以及用戶界面幾類。W3C 仍然在對(duì) CSS3 規(guī)范進(jìn)行開發(fā)，而當(dāng)前主流的瀏覽器都已經(jīng)實(shí)現(xiàn)了相當(dāng)多的 CSS3 屬性。

CSS3新增屬性

border——邊框類

border-radius：設(shè)置圓角邊框，其屬性值可以為百分比，或者具體的像素。

由下例可看出，當(dāng)值大于50%時(shí)，效果是和50%的圓角效果一樣的。

而在網(wǎng)頁(yè)中最舒適的圓角，即一般按鈕的圓角效果，這時(shí)候的屬性值設(shè)為具體的像素值，且值為元素高度的一半，即此效果：

box-shadow：設(shè)置元素的陰影效果。屬性值有：

• h-shadow，必備屬性，設(shè)置水平陰影的位置，可以為負(fù)值。? ?

• v-shadow，必備屬性，設(shè)置垂直陰影的位置，可以為負(fù)值。?

• blur，用于設(shè)置模糊距離。?

• spread，設(shè)置陰影尺寸。

• color，設(shè)置陰影的顏色。? ??

• inset，可將外部陰影 (outset) 改為內(nèi)部陰影(第五個(gè)案例)。??

border-image：設(shè)置圖片邊框。

• border-image-source，用在邊框的圖片的路徑。? ?

• border-image-slice，圖片邊框向內(nèi)偏移。? ?

• border-image-width，圖片邊框的寬度。? ?

• border-image-outset，邊框圖像區(qū)域超出邊框的量。? ?

• border-image-repeat，圖像邊框是否應(yīng)平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。?

????在設(shè)置時(shí)有幾點(diǎn)需要注意，首先是在設(shè)置border-image時(shí)，需要先給要設(shè)置邊框的元素設(shè)置一個(gè)border，可設(shè)成transparent值為固體透明的樣式，再設(shè)置圖片邊框。對(duì)于圖片邊框的切片可以設(shè)成百分比或者一個(gè)數(shù)值，該數(shù)值和圖片邊框的寬度一樣，設(shè)置時(shí)不需要有單位，通過(guò)調(diào)節(jié)這兩個(gè)數(shù)值可以達(dá)到不同的視覺效果，另外針對(duì)圖片平鋪的設(shè)置，其實(shí)并沒有出現(xiàn)效果，這個(gè)之后需要在再進(jìn)行討論。

background——背景類

background-clip：規(guī)定背景的繪制區(qū)域。

• border-box，背景被裁剪到邊框盒。

• padding-box，背景被裁剪到內(nèi)邊距框。

• content-box，背景被裁剪到內(nèi)容框。? ??

background-origin：規(guī)定背景圖片的定位區(qū)域。

• border-box，背景被裁剪到邊框盒。

• padding-box，背景被裁剪到內(nèi)邊距框。

• content-box，背景被裁剪到內(nèi)容框。

由第三個(gè)box例子可以看出background-clip與background-origin的區(qū)別，后者只能夠移動(dòng)圖片，前者則是剪裁超出部分的顯示。

可移動(dòng)的內(nèi)容：

background-size：規(guī)定背景圖片的尺寸。

• 設(shè)置具體數(shù)值，即背景圖像的高度和寬度。第一個(gè)值為寬，第二個(gè)值為高。只設(shè)置一個(gè)值時(shí)，第二個(gè)值會(huì)被設(shè)置為 "auto"。

• 設(shè)置百分比，以父元素的百分比來(lái)設(shè)置背景圖像的寬度和高度。

• 如果只設(shè)置一個(gè)值，則第二個(gè)值會(huì)被設(shè)置為 "auto"。

• cover，把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無(wú)法顯示在背景定位區(qū)域中。

• contain，使圖像圖像的寬度和高度完全適應(yīng)內(nèi)容區(qū)域。?

font——文字類

????文字類中的許多屬性是當(dāng)前主流的瀏覽器不兼容的，所以不一一列舉。

text-align-last：設(shè)置如何對(duì)齊最后一行或緊挨著強(qiáng)制換行符之前的行。?

• ?left，設(shè)置最后一行文字左對(duì)齊

• right，設(shè)置最后一行文字右對(duì)齊

• center，設(shè)置最后一行文字居中對(duì)齊

text-overflow：規(guī)定當(dāng)文本溢出包含元素時(shí)發(fā)生的事情。

• clip，修剪文本。

• ellipsis，顯示省略符號(hào)來(lái)代表被修剪的文本。

• string，使用給定的字符串來(lái)代表被修剪的文本。

text-shadow：向文本添加陰影，與box-shadow的用法相同。

word-break：規(guī)定非中日韓文本的換行規(guī)則。

• normal，使用瀏覽器默認(rèn)的換行規(guī)則。? ?

• break-all，允許在單詞內(nèi)換行。? ?

• keep-all，只能在半角空格或連字符處換行。? ?

word-wrap：允許對(duì)長(zhǎng)的不可分割的單詞進(jìn)行分割并換行到下一行。

• normal，只在允許的斷字點(diǎn)換行(瀏覽器保持默認(rèn)處理)。? ?

• break-word，在長(zhǎng)單詞或 URL 地址內(nèi)部進(jìn)行換行。? ?

@font-face ——字體

font-family：name；規(guī)定字體的名稱。? src：URL；定義字體文件的路徑。

font-stretch：可選屬性，定義如何拉伸字體。默認(rèn)是 "normal"。??

• normal

• condensed

• ultra-condensed

• extra-condensed

• semi-condensed

• expanded

• semi-expanded

• extra-expanded

• ultra-expanded? ??

font-style：可選屬性。定義字體的樣式。默認(rèn)是 "normal"。? ????

• ormal

• italic

• oblique? ?

font-weight：可選屬性。定義字體的粗細(xì)。默認(rèn)是 "normal"。???

• normal-不加粗

• bold-加粗

• 100

• 200

• 300

• 400

• 500

• 600

• 700

• 800

• 900

unicode-range：unicode-range；可選屬性。定義字體支持的 UNICODE 字符范圍。默認(rèn)是 "U+0-10FFFF"。

? ? 設(shè)置字體的前提是先下載好字體文件，ttf、otf、otc或者woff等，擁有了字體文件之后，可以直接將這種字體安裝到自身的電腦中，若文件格式不兼容，或者需要改成該種字體的其它文件格式，可以到“字客網(wǎng)(http://www.fontke.com/)”進(jìn)行字體文件格式轉(zhuǎn)換。

Transform——2D轉(zhuǎn)換

translate()：通過(guò) translate() 方法，元素從其當(dāng)前位置移動(dòng)，根據(jù)給定的 left(x 坐標(biāo)) 和 top(y 坐標(biāo)) 位置參數(shù)：

rotate()：元素順時(shí)針旋轉(zhuǎn)給定的角度。允許負(fù)值，元素將逆時(shí)針旋轉(zhuǎn)。-90deg與270deg的旋轉(zhuǎn)效果是一致的，以此類推。

scale()：使元素的尺寸增加或者減少，第一個(gè)數(shù)值為寬，第二個(gè)數(shù)值為高，給一個(gè)值時(shí)為寬高放大或縮小相同的倍率。

skew()：元素翻轉(zhuǎn)給定的角度，兩個(gè)數(shù)值時(shí)為水平值垂直方向值。

matrix()：把所有 2D 轉(zhuǎn)換方法組合在一起，需要六個(gè)參數(shù)，包含數(shù)學(xué)函數(shù)，允許旋轉(zhuǎn)、縮放、移動(dòng)以及傾斜元素。

六個(gè)參數(shù)之間的關(guān)系詳見：

https://blog.csdn.net/weixin_42103959/article/details/81044389

transform-origin：允許改變被轉(zhuǎn)換元素的位置。

資料：

https://www.w3school.com.cn/example/css3/demo_css3_transform-origin.html

Transform——3D轉(zhuǎn)換

translate3d(x,y,z)，定義3D轉(zhuǎn)化。

• translateX(x)，僅用于X軸的值。?

• translateY(y)，僅用于Y軸的值。

• translateZ(z)，僅用于Z軸的值。

scale3d(x,y,z)，定義 3D 縮放轉(zhuǎn)換。? ?

• scaleX(x)，給定 X 軸縮放值。? ?

• scaleY(y)，給定 Y 軸縮放值。? ?

• scaleZ(z)，給定 Z 軸縮放值。? ?

rotate3d(x,y,z,angle)，定義3D旋轉(zhuǎn)。??

• rotateX(angle)，給X軸旋轉(zhuǎn)角度。?

• rotateY(angle)，給Y軸旋轉(zhuǎn)角度。

• rotateZ(angle)，給Z軸旋轉(zhuǎn)角度。

matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)，3D 轉(zhuǎn)換，使用 16 個(gè)值的 4x4 矩陣。

perspective(n)，定義 3D 轉(zhuǎn)換元素的透視視圖。? ?

transform：向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。??

transform-origin：允許你改變被轉(zhuǎn)換元素的位置。

transform-style：規(guī)定被嵌套元素如何在 3D 空間中顯示。

• flat，子元素將不保留其 3D 位置。

• preserve-3d，子元素將保留其 3D 位置。??

perspective：規(guī)定 3D 元素的透視效果。?

• number，元素距離視圖的距離，以像素計(jì)。? ?

• none，默認(rèn)值，不設(shè)置透視。

perspective-origin：規(guī)定 3D 元素的底部位置

水平方向，默認(rèn)值為50%。

????其他取值：

• • left

  • center

  • right

  • length

  • %-設(shè)置百分

垂直方向：默認(rèn)值為50%。

????可能的值：

• • top

  • center

  • bottom

  • length

  • %-設(shè)置百分比

backface-visibility：定義元素在不面對(duì)屏幕時(shí)是否可見。

• visible，背面是可見的。? ?

• hidden，背面是不可見的。? ??

transition——過(guò)渡

transition：簡(jiǎn)寫屬性，用于在一個(gè)屬性中設(shè)置四個(gè)過(guò)渡屬性。

• transition-property

• transition-duration

• transition-timing-function

• transition-delay

transition-property：規(guī)定應(yīng)用過(guò)渡的 CSS 屬性的名稱。

• none，沒有屬性會(huì)獲得過(guò)渡效果。

• all，所有屬性都將獲得過(guò)渡效果。

• property，定義應(yīng)用過(guò)渡效果的CSS 屬性名稱列表，列表以逗號(hào)分隔。? ?

transition-duration：定義過(guò)渡效果花費(fèi)的時(shí)間，單位以秒或毫秒計(jì)，默認(rèn)值是 0。

transition-timing-function：規(guī)定過(guò)渡效果的時(shí)間曲線。默認(rèn)是 "ease"。

• linear，規(guī)定以相同速度開始至結(jié)束的過(guò)渡效果，效果同：

  cubic-bezier(0,0,1,1)；??

• ease，規(guī)定慢速開始，然后變快，然后慢速結(jié)束的過(guò)渡效果，效果同：

  cubic-bezier(0.25,0.1,0.25,1)；? ??

• ease-in，規(guī)定以慢速開始的過(guò)渡效果，效果同：

  cubic-bezier(0.42,0,1,1)；? ??

• ease-out，規(guī)定以慢速結(jié)束的過(guò)渡過(guò)程，效果同：

  cubic-bezier(0,0,0.58,1)；?

• ease-in-out，規(guī)定以慢速開始和結(jié)束的過(guò)渡效果(等于 cubic-bezier(0.42,0,0.58,1))。? ?

• cubic-bezier(n,n,n,n)，在 cubic-bezier 函數(shù)中定義自己的值。取值范圍在0-1之間。

transition-delay：定在過(guò)渡效果開始之前需要等待的時(shí)間，以秒或毫秒計(jì)，默認(rèn)值為0。

animate——?jiǎng)赢?/p>

@keyframes：規(guī)定動(dòng)畫。創(chuàng)建動(dòng)畫的原理是，將一套 CSS 樣式逐漸變化為另一套樣式。在動(dòng)畫過(guò)程中，可以多次改變這套 CSS 樣式，并以百分比的形式來(lái)規(guī)定改變發(fā)生的時(shí)間，從0%到100%，或者也可以使用"from" - "to"來(lái)記錄這些關(guān)鍵節(jié)點(diǎn)。

0% 是動(dòng)畫的開始時(shí)間，100% 動(dòng)畫的結(jié)束時(shí)間，而為了獲得最佳的瀏覽器支持，應(yīng)該始終定義 0% 和 100% 選擇器。在使用動(dòng)畫屬性來(lái)控制動(dòng)畫的外觀時(shí)，應(yīng)同時(shí)將動(dòng)畫與選擇器綁定。

寫法：

@keyframes 動(dòng)畫名稱{

? ? 0% {css-styles;}

????100%{css-style;}

}

animation：所有動(dòng)畫屬性的簡(jiǎn)寫屬性，除了 animation-play-state 屬性。

如：

animation: myfirst 5s linear 2s infinite alternate;

即：

animation:動(dòng)畫名稱 動(dòng)畫周期時(shí)長(zhǎng) 出現(xiàn)形式 開始時(shí)間(被觸發(fā)后)(出現(xiàn)效果時(shí)長(zhǎng)) 動(dòng)畫播放次數(shù)；

animation-name：規(guī)定 @keyframes 動(dòng)畫的名稱。

• keyframename，規(guī)定需要綁定到選擇器的 keyframe 的名稱。? ?

• none，規(guī)定無(wú)動(dòng)畫效果(可用于覆蓋來(lái)自級(jí)聯(lián)的動(dòng)畫)。?

animation-duration： 規(guī)定動(dòng)畫完成一個(gè)周期所花費(fèi)的秒或毫秒。默認(rèn)是 0。

animation-timing-function：規(guī)定動(dòng)畫的速度曲線。默認(rèn)是 "ease"。

• linear，動(dòng)畫從頭到尾的速度是相同的。

• ease，默認(rèn)。動(dòng)畫以低速開始，然后加快，在結(jié)束前變慢。

• ease-in，動(dòng)畫以低速開始。??

• ease-out，動(dòng)畫以低速結(jié)束。? ?

• ease-in-out，以低速開始和結(jié)束。

• cubic-bezier(n,n,n,n)，在cubic-bezier 函數(shù)中自己的值。取值范圍是0-1之間。

animation-delay：規(guī)定動(dòng)畫何時(shí)開始。默認(rèn)是 0。

animation-iteration-count：規(guī)定動(dòng)畫被播放的次數(shù)。默認(rèn)是 1。

animation-direction：規(guī)定動(dòng)畫是否在下一周期逆向地播放。默認(rèn)是 "normal"。

• normal，默認(rèn)值。動(dòng)畫正常播放。

• alternate，動(dòng)畫輪流反向播放。? ??

animation-play-state：規(guī)定動(dòng)畫是否正在運(yùn)行或暫停。默認(rèn)是 "running"。

• paused，規(guī)定動(dòng)畫已暫停。? ?

• running，規(guī)定動(dòng)畫正在播放。

animation-fill-mode：規(guī)定對(duì)象動(dòng)畫時(shí)間之外的狀態(tài)。

• none，不改變默認(rèn)行為。? ?

• forwards，當(dāng)動(dòng)畫完成后，保持最后一個(gè)屬性值(在最后一個(gè)關(guān)鍵幀中定義)。? ?

• backwards，在 animation-delay 所指定的一段時(shí)間內(nèi)，在動(dòng)畫顯示之前，應(yīng)用開始屬性值(在第一個(gè)關(guān)鍵幀中定義)。? ?

• both，向前和向后填充模式都被應(yīng)用。? ??

columns——多列

column-count：規(guī)定元素被分隔的列數(shù)。

column-fill：規(guī)定如何填充列。?

column-gap：規(guī)定列之間的間隔。

column-rule：設(shè)置所有 column-rule-* 屬性的簡(jiǎn)寫屬性。

column-rule-color：規(guī)定列之間規(guī)則的顏色。

column-rule-style：規(guī)定列之間規(guī)則的樣式。

column-rule-width：規(guī)定列之間規(guī)則的寬度。

column-span：規(guī)定元素應(yīng)該橫跨的列數(shù)。

column-width：規(guī)定列的寬度。

columns：規(guī)定設(shè)置column-width 和 column-count 的簡(jiǎn)寫屬性。? ??

appearance——用戶界面

appearance：允許您將元素設(shè)置為標(biāo)準(zhǔn)用戶界面元素的外觀。

box-sizing：允許您以確切的方式定義適應(yīng)某個(gè)區(qū)域的具體內(nèi)容。

icon：為創(chuàng)作者提供使用圖標(biāo)化等價(jià)物來(lái)設(shè)置元素樣式的能力。

nav-down：規(guī)定在使用 arrow-down 導(dǎo)航鍵時(shí)向何處導(dǎo)航。

nav-index：設(shè)置元素的 tab 鍵控制次序。

nav-left：規(guī)定在使用 arrow-left 導(dǎo)航鍵時(shí)向何處導(dǎo)航。

nav-right：規(guī)定在使用 arrow-right 導(dǎo)航鍵時(shí)向何處導(dǎo)航。

nav-up：規(guī)定在使用 arrow-up 導(dǎo)航鍵時(shí)向何處導(dǎo)航。

outline-offset： 對(duì)輪廓進(jìn)行偏移，并在超出邊框邊緣的位置繪制輪廓。

resize：規(guī)定是否可由用戶對(duì)元素的尺寸進(jìn)行調(diào)整。? ??

學(xué)習(xí)心得

早在前兩周就過(guò)完了HTML5和CSS3知識(shí)，當(dāng)時(shí)的筆記并沒有做得那么詳盡，很多知識(shí)都沒有真正掌握理解，最明顯的就是在上周的項(xiàng)目中，我們小組的動(dòng)畫效果極少，用JS寫的模塊切換都比較生硬，所以想著趕緊把動(dòng)畫的內(nèi)容好好理順，并掌握下來(lái)。

這篇推文沒有動(dòng)畫效果的展示，我會(huì)在下一篇推文中挑一些動(dòng)畫來(lái)寫，并分享出來(lái)。

【END】

文字：Seongyeom自整筆記

圖片：網(wǎng)絡(luò)配圖

總結(jié)

以上是生活随笔為你收集整理的css3宽度变大动画_学所 前端 | HTML5+CSS3的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。