整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
.css前綴為"-moz-"的瀏覽器：
火狐瀏覽器
2.css前綴為"-webkit-" 的瀏覽器：
谷歌瀏覽器,蘋果瀏覽器, Comodo Drangon(科摩多龍)，搜狗高速瀏覽器，快快瀏覽器，楓樹瀏覽器，云游瀏覽器，360極速瀏覽器，世界之窗極速版，SRWare Iron，獵豹瀏覽器，RockMelt，QQ瀏覽器
3.css前綴為"-o-"的瀏覽器：
Opera(歐朋),NDSBrowser
4.css前綴為"-ms-"的瀏覽器：
IE,獵豹安全瀏覽器，傲游瀏覽器，百度瀏覽器，世界之窗瀏覽器，2345瀏覽器，騰訊TT，淘寶瀏覽器，采編讀瀏覽器，阿云瀏覽器，瑞星安全瀏覽器，Slim Browser，GreenBrowser、愛帆瀏覽器，115瀏覽器，155瀏覽器，114瀏覽器，N氧化碳瀏覽器，糖果瀏覽器，彩虹瀏覽器，瑞影瀏覽器，勇者無疆瀏覽器，閃游瀏覽器，螞蟻瀏覽 器，飛騰瀏覽器，速達瀏覽器，佐羅瀏覽器，UC瀏覽器
除注明外的文章,均為來源:湯久生博客(QQ:1917843637),轉載請保留本文地址！
HTML作為前端三大基礎知識點之一，是每一個前端開發人員都要掌握的部分。今天這篇文章我們來看看一些平時不太會注意，卻在面試時可能會問到的題目，來看看你都會嗎？
HTML
我們都知道textarea是form表單中一個很常見的元素，用于多行文本輸入，可以設置行數和列數。
但是默認的textarea樣式在頁面上看起來是很丑的，很多頁面都是采用div模擬textarea實現。例如QQ空間主頁面的發表說說，在你看頁面源碼后就會發現這個輸入框其實是一個div元素，并不是一個textarea元素，現在我們就來看看這是如何實現的吧？
首先來看看實現的效果是什么樣的。
實現效果
關鍵屬性：contenteditable
正如這個屬性的字面意思，可以理解為可編輯的，如果在頁面標簽上設置contenteditable=true，該標簽就可以進行編輯了。
可以配合user-modify屬性，該屬性表示的是控制用戶能否對頁面元素進行編輯，通過設置不同的值可以選擇富文本或者純文本內容，但是由于該屬性是非標準屬性，很少有人知道。
首先我們來看看頁面的HTML部分代碼，就是一個很簡單的div標簽，然后設置contenteditable屬性為true。
HTML部分代碼
接下來我們就看看整個CSS代碼的完整實現吧。
CSS樣式
通過min-height和max-height屬性可以控制div的高度，在內容超出max-height后會出現滾動條。如果想要固定div的高度，則只需要設置height屬性就可以，而不用設置min-height和max-height屬性。
src和href從使用上來看都是對外部資源的一種引用，但是在具體理解上是有差異的。
href的值指定的是資源在網絡上的位置，定義的是當前頁面上的某個元素與需要的資源文件的一個鏈接。比如下面一個語句。
href引用
當瀏覽器解析到頁面的這條語句時，會知道在這里引用了一個外部樣式文件，但并不會阻止頁面解析。這與@import有很大不同，因此在引入外部樣式時，推薦使用link標簽。
src的值表示的是頁面上必不可少的內容，需要將指定內容加載到當前頁面中。比如下面一個語句。
src引用
當瀏覽器解析到頁面上的這條語句時，瀏覽器會對這個文件進行解析，編譯和執行，從而導致整個頁面加載會被暫停，這也是為什么一般會選擇將script標簽放在body結束標簽的前面。
有一種更好的理解方式，href表示的是一個資源的鏈接；src是對當前元素的替換，內容最終會嵌入到當前頁面中。
雖然目前大多數網頁都是采用的DIV+CSS布局的方式，但是也有少數的老式Web網頁采用的是Table布局，我們可以一起來看看兩種布局方式的優劣。
布局對比
div+css布局
div+css的布局方式屬于W3C標準，而且由于CSS的存在，HTML部分的代碼會顯得很純凈，滿足行為，樣式，結構分離的原則。
頁面加載速度更快，這是目前DIV+CSS使用更廣泛的一個非常重要的原因。
頁面編碼量相對于Table布局會少很多。
頁面內容更容易維護，由于樣式都存在CSS文件中，只需要修改CSS文件即可，對HTML文件不會有影響。
由于DIV+CSS布局更容易進行SEO優化，所以更方便被搜索引擎收錄。
Table布局
雖然DIV+CSS有各種各樣的優勢，但是Table布局也并不是完全無用的。這里也可以列舉出幾個采用Table布局的優勢。
新手學習方便（相信有很多后端RD在進行前端學習時剛開始都是從table布局開始的）。
兼容性更好，由于Table布局是從最古老的瀏覽器發展而來的，在兼容性上會滿足所有瀏覽器。而CSS3的出現卻要考慮瀏覽器的支持程度，一個樣式要考慮加上幾個不同瀏覽器前綴，類似于-webkit，-moz等
今天這篇文章主要講解了幾個關于HTML的知識點，大家都掌握了嗎？
嘍大家好，我是作者“未來”，本期分享的內容是Web前端系列課程，本系列總共29個階段，堅持學習3個月蛻變為Web前端高手哦！
志同道合的小伙伴跟我一起學習交流哦！
1 漸進增強和優雅降級
什么是漸進增強（ progressive enhancement）、優雅降級（ graceful degradation）呢？
漸進增強 progressive enhancement：
針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗
優雅降級 graceful degradation：
開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。
類似蹦極，由高處往低處下落
區別：漸進增強是向上兼容，優雅降級是向下兼容。
個人建議：現在互聯網發展很快，連微軟公司都拋棄了e瀏覽器，轉而支持edge這樣的高版本瀏覽器，我們很多情況下沒有必要再時刻想著低版本瀏覽器了，而是一開始就構建完整的效果，根據實際情況，修補低版本瀏覽器問題。
2 瀏覽器前綴
后面我們會有常用的解決H5和C3的兼容解決文件，我們這里暫且不涉及。
3 背影漸變上
在線性漸變過程中，顏色沿著一條直線過渡：從左側到右側、從右側到左側、從頂部到底部、從底部到頂部或者沿任何任意軸。如果你曾使用過制作圖件，比如說 Photoshop，你對線性漸變并不會陌生。
兼容性問題很嚴重，我們這里只講解線性漸變語法格式：
4 背景漸變下
5 CSSw3C統一的驗證工具
CssStats是一個在線的css代碼分析工具
如果你想要更全面的，這個神奇，你值得擁有
W3C統一驗證工具
因為它可以檢測本地文件哦??！
6 CSS壓縮工具
通過上面的檢測沒有錯誤，為了提高加載速度和節約空間（相對來說，css量很少的情況下，幾乎沒啥區別），可以通過css壓縮工具把css進行壓縮。
w3ccss壓縮網速比較慢還可以去站長之家進行快速壓縮。
7 認識 preserve-3d
這個效果我們需要用到透視過渡還有子元素 preserve-3d
transform-style
transform-style屬性是3D空間一個重要屬性，指定嵌套元素如何在3D空間中呈現。他主要有兩個屬性值：f1at和 preserve-3d。
其中f1at值為默認值，表示所有子元素在2D平面呈現。preserve-3d表示所有子元素在3D空間中呈現
8 旋轉輪播圖結構制作
9 旋轉輪播圖
看不懂的小伙伴不要氣餒，后續的分享中將持續解釋，只要你跟著我分享的課程從頭到尾去學習，每篇文章看三遍，一個月后，回過頭來看之前的文章就會感覺簡單極了。
本章已結束，下篇文章將分享《第三階段 Javascript 基礎》小伙伴們不要錯過喲！
?
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
