當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

html笔记（三）html5+css3（html5、css3、文字相关）

發布時間：2023/12/2 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 html笔记（三）html5+css3（html5、css3、文字相关）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

W3school在線教程
html5+css3基本不兼容ie678。

大標題小節

一、html5	1. html4 和 html5 的區別 2. 標簽語義化 3. 智能表單的使用和規范
二、css3選擇器	1. 屬性選擇器 2. 結構性偽類選擇器（層級選擇器/符） 3. UI狀態性偽類選擇器 4. 相鄰兄弟選擇器 5. 其他選擇器
三、文字相關屬性	1. 兼容前綴 2. 漸進增強和優雅降級 3. 文字相關屬性（陰影、換行、單詞大小寫、顏色值、盒子陰影、邊框背景、圓角）

一、html5

1. html4 和 html5 的區別：

（1）寫法更簡單；
（2）標簽語義化；
（3）語法更寬松；

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

比如：生成的 meta 標簽中 "/"是沒有的，其實原本是有的，因為 html5 語法寬松，可以省略；除此之外，屬性值不加雙引號也是 html5 所允許的。但是作為一個嚴謹的程序員，最好不要省略。

（4）多設備跨平臺；
（5）自適應網頁設計；
（6）兼容性： html4+css2.0 兼容 ie6/7/8，html5不能兼容ie6/7。

2. 標簽語義化

語義化就是口頭化，信息直白，更好地理解：
（1）新增的語義化標簽：
① 常用的語義化標簽：

<header>，頭標簽；
<nav>，導航標簽；
<section>，表示文檔的結構/欄目；
<footer>，頁腳（通常包含文檔的作者、版權信息、使用條款鏈接、聯系信息等）；
<article>，文章標簽；
<aside>，側邊欄導航；
<mark>，凸顯文字，行元素；
<main>，主要部分（不支持ie6/7/8）；

② 其他：

<figure>，用來表示網頁上一塊獨立內容；
<figcaption>，用來表示 figure 的標題（作為第一個或最后一個元素），常與 figure 配合使用；
<output>，顯示表單元素結果；
<datalist>提供表單選項列表等。
改良的 <ol start="3">；

<ol start="3"><li>aaaa</li><li>aaaa</li><li>aaaa</li> </ol>

③ 配合 js：

定義視頻（這里的視頻格式只能是*.mp4、*.ogg 、*.webM）<viedo> 、
定義音頻<audio> 、
畫布（用來替換熱點<map>）<canvas；

④ 刪除的 Html 標簽（部分瀏覽器支持）：<marquee> <applet> bgsound> <blink>

⑤ 完全拋棄：<rb> <acronym> <dir> <isindex> <listing> <xmp> <nextid>

（2）語義化標簽的優點：

為了在沒有CSS的情況下，頁面也能呈現出很好地內容結構、代碼結構；
比 <div> 標簽有更加豐富的含義，方便開發與維護；
方便搜索引擎能識別頁面結構，有利于SEO；
方便其他設備解析（如移動設備、盲人閱讀器等）；
有利于合作，遵守W3C標準；

3. 智能表單的使用和規范

<input type="?" /> 有兼容問題.
（1）地址欄：<input type="url" />；輸入無效地址會自動提示；

（2）輸入數字：<input type="number" value="2" min="1" max="10" step="1"/>；step 跳躍數，min 最小值，max 最大值；

（3）輸入電子郵件：<input type="email" required="required" multiple="multiple"/>；required 判斷是否為空，multiple 可用逗號分隔郵件地址；

（4）拖動： <input type="range" step="1" max="20" min="1"/>；

（5）搜索： <input type="search" />；

（6）顏色： <input type="color" value="#ff0000"/>；value 的值必須為6位

（7）電話： <input type="tel" />；

（8）日期： <input type="date" />；

（9）月份： <input type="month" />；

（10）XX年第X周： <input type="week" />；

（11）時間： <input type="time" />；

（12）日期時間： <input type="datetime-local" />；

查看更多…

二、css3選擇器

只支持ie9及ie9+，部分兼容ie8。

CSS即層疊樣式表（Cascading StyleSheets），用于控制網頁的樣式和布局。

css 概念：

CSS3 是最新的 CSS 標準。
css3 是 css 技術的升級，css3 語言開發時朝著模塊化發展的；
模塊包括： 盒子模型，列表模塊，超鏈接方式，語言模塊，背景和邊框，文字特效，多欄布局 等
css3 完全向后兼容（ie8以上），瀏覽器通常支持 css2。

選擇器：選擇器是 css3 中的一個重要內容，使用它可以大幅度提高開發人員書寫或修改樣式表時的工作效率。

1. 屬性選擇器：

（1）[屬性A]：選擇當前頁面所有含屬性A 的元素，權重 = 10；

（2）[屬性B=屬性值b]：選擇所有屬性B=屬性值b 的元素；

① 屬性值為數字或特殊字符必須加雙引號，否則不生效。即 [屬性B="1"]，常用于表單元素中；當屬性值有多個時，此方法不適用，應該使用下面這種。
② 加雙引號其實是為了讓代碼規則符合 w3c 規范。

（3）[class="a b"]：選擇 class="a b"的元素；
值為多個時必須全部寫上，且要加雙引號；

（4）[class~="a"]：選擇包含 單詞為 a 的元素；

（5）[class|=a]：選擇要么為單詞 a ，要么 a- 開頭的完整單詞的元素；
注意：<div class="a b"></div> //錯誤，這也就意味著，class里面只有一個單詞，沒有空格分隔的兩個及兩個以上的單詞。

（6）[class^=a]：選擇所有 a 開頭的元素；
注意：<div class="b a"></div> //錯誤

（7）[class$=a]：選擇所有 a 結尾的元素；
注意：<div class="b a"></div> //正確

（8）[class*=a]：選擇所有帶 a 的元素；

2. 結構性偽類選擇器（層級選擇器/符）

① 不常用：

（1）:root{}，選擇根目錄；
:root{background:#ff0} ，相當于給 html 標簽設置樣式（偽類權重為 10，屬性選擇器權重為 01）；

（2）:not(元素A){}，給 除了元素A 以外的所有元素設置樣式；
例如：body :not(p){background:#000}，給 body標簽內除元素p 以外的其他所有元素設置樣式。

（3）元素B:empty{}，選擇 元素B內容為空 的元素設置樣式（換行和空格不算內容為空）；

（4）:target{}，給 當前錨點選中的元素 設置樣式（錨點切換時有坑，常用 js 去做，而不用偽類）；

② 常用：

（1）元素A:first-child{}，選擇第一個（子）元素；元素A作為父元素中的第一個子元素；

（2）元素B:last-child{}，選擇最后一個（子）元素；元素B作為父元素中的最后一個子元素；

（3）元素C:nth-child(n){}，n 為數字，選擇第n個（子）元素（n 從 1 開始）；元素C作為它父元素中的第n個子元素；這里是指元素C在父元素中的順序，選擇在父元素中序號為n，且元素為C；

（4）元素D:nth-last-child(n){}，n 為數字，選擇倒數第n 個（子）元素；

（5）元素E:nth-child(odd){}，選擇奇數個（子）元素（從第 1 個開始）；

（6）元素F:nth-child(even){}，選擇偶數個（子）元素（從第 2 個開始）；

（7）元素G:nth-of-type(n){}，有關這個元素的第n個（子）元素；元素G是父元素中的第n個子元素；這里是指元素G的個數，選擇在父元素中有關元素G的第n個元素G；

（8）元素H:nth-last-of-type(2){}，有關這個元素的倒數第二個（子）元素；

（9）元素I:only-child{}，父元素中只有元素I，元素I 是唯一一個子元素才有效；

<style> /*選中的是dl中的第1個dd。dl中的dd,并且這個dd作為dl中的第二個子元素*/dl.dl3 dd:nth-child(2){background:#00f;}/*選中的是dl中的第2個dd。dl中的dd,這個dd是父元素中的第二個dd*/dl.dl3 dd:nth-of-type(2){background:#9f9;} </style> <dl class="dl3"><dt>dt2</dt><dd>d1</dd><dd>d2</dd><dd>d3</dd><dd>d4</dd> </dl>

③ n 元算法（這里的 n 是從 0 開始計算無限大的數字）：

（1）元素A:nth-child(n+2){}，匹配從第二個元素開始（包括2）；

（2）元素B:nth-child(2n){}，匹配偶數；

（3）元素B:nth-child(2n+1){}，匹配奇數；

3. UI狀態性偽類選擇器：

（1）input:focus{}，元素獲取焦點時的狀態；

（2）input:enabled{}，元素可用時的狀態（沒有 disabled 屬性時就是可用狀態）；

（3）input:disabled{}，元素禁用時的狀態；

<input type="text" name="" disabled="disabled"/> <input type="text" name="" disabled/>

（4）input:read-only{}，元素只讀時的狀態；
只讀狀態：不能編輯但可以復制；禁用狀態：不能編輯也不能復制

<input type="text" name="" readonly="readonly"/>

（5）input:read-write{}，元素非只讀時的狀態；

（6）input:checked{}，元素被選中時的狀態；

（7）input:default{}，元素默認有 checked 時的狀態；

（8）input:indeterminate{}，元素都沒選中過的狀態；只支持Google；
即給元素初始狀態時添加樣式。若元素狀態發生改變，樣式則不生效了，刷新時才會恢復樣式。

（9）input::selection{}，元素被選取的狀態；（也可以設置選取文字時的樣式。這個選擇器只能使用 color 和 background 這兩個屬性）

4. 相鄰兄弟選擇器：

（1）li+li{}：選擇與 li （指“+”前的 li）相鄰的后面的 li（“+”后的 li）添加樣式；
例如：h3+p{}，給與 h3 相鄰的后面的 p標簽添加樣式，且 p標簽在 h3標簽的后面。若 h3標簽前面有 p標簽，這個 p標簽的樣式不生效。

需要注意的是：這兩個標簽必須是相鄰的。

（2）span~p{}：選擇 span標簽之后所有的同級 p 元素；

5. 其他：

ul>li{} 選擇 ul 的親兒子；

三、文字相關屬性

1. 兼容前綴

（1）-o- Presto
（2）-ms- Trident
（3）-moz- Gecko
（4）-webkit- Webkit

很久以前

瀏覽器前綴 css3 和正常 css3 都不支持；

不久之前

瀏覽器只支持前綴 css3 ，不支持正常 css3;

現在

有些瀏覽器既支持前綴 css3 ，又支持正常 css3;

未來

所有瀏覽器不支持前綴 css3 ，僅支持正常 css3;

主要的需要添加瀏覽器引擎前綴(vendor-prefix)的屬性包括：

@keyframes
移動和變換屬性(transition-property, transition-duration, transition-timing-function, transition-delay)
動畫屬性 (animation-name, animation-duration, animation-timing-function, animation-delay)
border-radius
box-shadow
backface-visibility
column 屬性
flex 屬性
perspective 屬性

2. 漸進增強和優雅降級

（1）漸進增強： 一開始就針對低版本瀏覽器進行構建頁面到高版本的變化；

漸進增強（progressive enhancement）： 針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。（從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能，向頁面添加無害于基礎瀏覽器的額外樣式和功能。當瀏覽器支持時，它們會自動地呈現出來并發揮作用。）

<style> .transition{-webkit-transition: all .5s;-moz-transition: all .5s;-o-transition: all .5s;transition: all .5s; } </style>

（2）優雅降級： 一開始就構建網站針對高版本向低版本進行兼容；

優雅降級（graceful degradation）： 一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。（Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工作。由于IE獨特的盒模型布局問題，針對不同版本的IE的hack實踐過優雅降級了，為那些無法支持功能的瀏覽器增加候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全失效。）

<style> .transition{ transition: all .5s;-o-transition: all .5s;　-moz-transition: all .5s;-webkit-transition: all .5s; } </style>

（3）漸進增強和優雅降級的區別

① 優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的、能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要。
② 漸進增強的適用場景：漸進增強觀點認為應該關注于內容本身。內容是我們建立網站的誘因，有的網站展示它，有的則收集它，有的尋求、有的操作，還有的網站甚至包含以上的種種，但相同點是他們全都涉及到內容，這使得“漸進增強”成為一種更為合理的設計范例。這也是它立即被Yahoo!所采納并用以構建其“分級式瀏覽器支持（Graded Browser Support)“策略的原因所在。
③ 優雅降級的適用場景：優雅降級觀點認為應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認為“過時”或有功能缺失的瀏覽器下的測試工作安排在開發周期的最后階段，并把測試對象限定為主流瀏覽器（如IE、Mozilla等）的前一個版本。
在這種設計范例下，舊版的瀏覽器被認為僅能提供“簡陋卻無妨（poor,but passable)”的瀏覽體驗。你可以做一些小的調整來適應某個特定的瀏覽器。但由于它們并非我們所關注的焦點，因此除了修復較大的錯誤之外，其它的差異將被直接忽略。

3. 文字相關屬性

（1）文本陰影屬性（可以繼承）： text-shadow: x坐標 y坐標陰影大小顏色;

（2）單詞換行：word-bread:

nomal，默認；
keep-all，只能在半角空格或連接字符處換行；
bread-all;，寬度不夠，分割單詞換行；

（3）單詞換行：word-wrap:

normal，默認；
break-word;，寬度不夠，整個單詞換行；

（4）text-transform:

uppercase，單詞都大寫；
lowercase，單詞都小寫；
capitalize，每個單詞首字母大寫；

（5）顯示服務端字體：@font-face{}

format：聲明文件類型（用來做兼容的）；
- opentype *.otf
- truetype *.ttf
  - *eot格式文件不需要聲明 format

（6）顏色值： rgba(十六進制,十六進制,十六進制,透明度（0-1）)；
只讓背景透明不讓子元素透明。

rgba中 r：red、g：green、 b：blue 、 a：alpha（透明度）

補充： hsla(色調（0-100）,飽和度（0-100%）,亮度（0-100%）,透明度（0-1）);

名稱opacityrgba

區別：

有 opacity 屬性的所有后代元素都會繼承 opacity 屬性

而RGBA后代元素不會繼承不透明屬性。

（7）盒子陰影： box-shadow:x軸 y軸模糊度顏色 inset;
inset：設置內陰影。

（8）與背景有關：
① background-clip: border-box / padding-box / content-box;，設置背景顯示區域；
② background-origin: border-box / padding-box / content-box;，指定繪制背景圖像時的起點；
③ background-size: 大小或百分比 / cover / contain;，指定背景中圖像的尺寸；

cover：按比例撐滿背景； contain ：剛好填滿一遍大小的尺寸；

④ background-break；

（9）與邊框相關：
① border-color，邊框顏色；
② border-image，圖片邊框。

url()，圖片路徑；
上右下左，4個方向截取背景圖片的寬/高度，注意這里是數值，不需要寫px；
/寬度px，border的寬度；
平鋪方式：stretch除了不相交部分，其他拉升；round除不相交部分，其他平鋪；

例如：border-image: url(../images/border.png) 25 25 25 25/15px round;
25 25 25 25是指在圖片 border.png 的上方截取 25px，右邊截取25px，下邊截取25px，左邊截取25px。具體案例

③ border-radius，圓角屬性。
類似 margin 的值，想象 將方塊向右旋轉45°。不支持 ie8。

兩個值：border-radius: 左上右下右上左下;
三個值：border-radius: 左上右上左下右下;
四個值：border-radius: 左上右上右下左下;
border-radius: 寬和高值較小的的一半px;，膠囊型；
border-radius: 10px/10px;，左邊設置水平半徑，右邊設置垂直半徑；

總結

以上是生活随笔為你收集整理的html笔记（三）html5+css3（html5、css3、文字相关）的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： html笔记（一）html4+css2.
下一篇： console.log打印没有效果