1、

一個(gè)網(wǎng)頁的開發(fā)流程

• 內(nèi)容結(jié)構(gòu)，比如js、css
• 頁面結(jié)構(gòu)。自上而下，從左往右。（內(nèi)容、顏色塊、間距、邊框）

2、

line-height的5種設(shè)置方式及區(qū)別 normal || 1.5 || 150% || 50px || 5em

初始化元素的時(shí)候，一般使用 line-height: 1.5 這種方式，它區(qū)別于其它四種方式的

根本原因在于元素繼承后的計(jì)算方式

比如body初始化為 body{font-size: 14px; line-height: 1.5}

則body里的元素都會(huì)這樣繼承

div{font-size:20px} ——>繼承后line-height是 20 x 1.5 = 30px

又比如body初始化為 body{font-size: 14px; line-height: 150% || 5em }

則body里的元素都會(huì)繼承計(jì)算后的行高默認(rèn)值

div{font-size:20px} ——>繼承后，line-height 只會(huì)被默認(rèn)為 14 x 150% = 21px

?

‘\5b8b\4f53’ 萬國碼，這串?dāng)?shù)字是轉(zhuǎn)碼后的表示，它對(duì)應(yīng)的中文是“宋體”

為什么不使用 font-family:"宋體"呢？因?yàn)樵谌澜?#xff0c;別的瀏覽器不一定會(huì)識(shí)別中文，但一定識(shí)別Unicode字符。

?

3、

css模塊化

@規(guī)則

• @charset 設(shè)置樣式表的編碼
• @import 導(dǎo)入其它樣式文件
• @media 媒體查詢
• @font-face 自定義字體/圖標(biāo)

?

4、

標(biāo)簽欄上的圖標(biāo)顯示

——圖標(biāo)格式的后綴是 favicon.ico 可通過一些線上工具去生成這種格式

——放在網(wǎng)站的根目錄，與首頁同級(jí)

——link 引入，比如<link rel="icon" href="favicon.ico">

——IE在file協(xié)議下顯示不出來

?

5、

base標(biāo)簽

——定義文檔當(dāng)中所有url的基礎(chǔ)目錄或鏈接

——定義文檔當(dāng)中所有target的默認(rèn)值

——文檔只能定義一個(gè)base標(biāo)簽

基礎(chǔ)鏈接

基礎(chǔ)目錄

6、

自定義字體、圖標(biāo)的使用方式

用@font-face引入，可以將圖標(biāo)像字體一樣定義

.eot格式只針對(duì)IE的，其它瀏覽器都不認(rèn)識(shí)

.ttf格式是系統(tǒng)文件的格式，特別大，IE9+支持，其它都不支持

.svg一種圖形的技術(shù)，可修改且不失真，瀏覽器都支持

format 為了性能的優(yōu)化，建議不要省略，瀏覽器會(huì)根據(jù)它識(shí)別是否需要從服務(wù)器下載，因?yàn)闉g覽器可能已經(jīng)有這個(gè)格式了

?

——最好用的是阿里的圖標(biāo)庫

?

7、

行級(jí)元素的回車會(huì)被自動(dòng)解析成一個(gè)空格，而空格的間距其實(shí)是由父級(jí)的font-size決定的，當(dāng)設(shè)置它所在的父級(jí)font-size：0時(shí)，就沒有默認(rèn)空格的間距了

?

8、

h標(biāo)簽的使用也跟SEO有關(guān)系，標(biāo)簽的重要性在seo是有優(yōu)先級(jí)的。

• title標(biāo)簽 > h1標(biāo)簽（主標(biāo)題）> h2標(biāo)簽（副標(biāo)題）> h3標(biāo)簽（板塊標(biāo)題）> h4標(biāo)簽（板塊內(nèi)一級(jí)標(biāo)題）> h5標(biāo)簽（板塊內(nèi)嵌套板塊的標(biāo)題）> h6標(biāo)簽（同h5），一般用到h4就夠了
• 一個(gè)頁面只要1個(gè)h1標(biāo)簽，且h1~h4系列標(biāo)簽都要用上
• 如果一個(gè)頁面沒有很醒目的標(biāo)題給h1標(biāo)簽，就把h1給logo，并且以圖換字，參考淘寶

?

9、

IE8如何兼容css3的線性漸變？

——濾鏡filter

‘#ffff9000’——前兩個(gè)ff代表透明度

GradientType=1 1代表水平方向，0代表垂直方向

?

10、calc函數(shù) IE9+

?

11、

rgba函數(shù) IE9+

flex彈性布局 IE10+

?

12、

兩個(gè)邊框重疊的1px問題

?

13、

webp格式的圖片 谷歌開發(fā) IE不支持 火狐65+

• 占用空間更小，甚至比其它同類型圖片小10倍以上
• 清晰度卻不變
• 需要JavaScript來解決兼容性問題

?

14、

關(guān)于偽元素使用一個(gè)冒號(hào)，可以兼容IE8，IE8對(duì)于偽元素只認(rèn)識(shí)一個(gè)冒號(hào)，偽類使用兩個(gè)冒號(hào)

?

?

?

總結(jié)

以上是生活随笔為你收集整理的淘宝首页的HTML以及CSS技术点的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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