前言 HTML作為前端三大基礎知識點之一，是每一個前端開發人員都要掌握的部分。今天這篇文章我們來看看一些平時不太會註意，卻在面試時可能會問到的題目，來看看你都會嗎？ 如何使用div模擬實現textarea？ 我們都知道textarea是form表單中一個很常見的元素，用於多行文本輸入，可以設置行數和 ...
前言
HTML作為前端三大基礎知識點之一，是每一個前端開發人員都要掌握的部分。今天這篇文章我們來看看一些平時不太會註意，卻在面試時可能會問到的題目，來看看你都會嗎？
如何使用div模擬實現textarea？
我們都知道textarea是form表單中一個很常見的元素，用於多行文本輸入，可以設置行數和列數。
但是預設的textarea樣式在頁面上看起來是很醜的，很多頁面都是採用div模擬textarea實現。例如QQ空間主頁面的發表說說，在你看頁面源碼後就會發現這個輸入框其實是一個div元素，並不是一個textarea元素，現在我們就來看看這是如何實現的吧？
首先來看看實現的效果是什麼樣的
關鍵屬性：contenteditable
正如這個屬性的字面意思，可以理解為可編輯的，如果在頁面標簽上設置contenteditable=true，該標簽就可以進行編輯了。
可以配合user-modify屬性，該屬性表示的是控制用戶能否對頁面元素進行編輯，通過設置不同的值可以選擇富文本或者純文本內容，但是由於該屬性是非標準屬性，很少有人知道。
首先我們來看看頁面的HTML部分代碼，就是一個很簡單的div標簽，然後設置contenteditable屬性為true。
接下來我們就看看整個CSS代碼的完整實現吧。
通過min-height和max-height屬性可以控制div的高度，在內容超出max-height後會出現滾動條。如果想要固定div的高度，則只需要設置height屬性就可以，而不用設置min-height和max-height屬性。
src和href的區別
src和href從使用上來看都是對外部資源的一種引用，但是在具體理解上是有差異的。
href的值指定的是資源在網路上的位置，定義的是當前頁面上的某個元素與需要的資源文件的一個鏈接。比如下麵一個語句。
當瀏覽器解析到頁面的這條語句時，會知道在這裡引用了一個外部樣式文件，但並不會阻止頁面解析。這與@import有很大不同，因此在引入外部樣式時，推薦使用link標簽。
src的值表示的是頁面上必不可少的內容，需要將指定內容載入到當前頁面中。比如下麵一個語句。
當瀏覽器解析到頁面上的這條語句時，瀏覽器會對這個文件進行解析，編譯和執行，從而導致整個頁面載入會被暫停，這也是為什麼一般會選擇將script標簽放在body結束標簽的前面。
有一種更好的理解方式，href表示的是一個資源的鏈接；src是對當前元素的替換，內容最終會嵌入到當前頁面中。
DIV+CSS佈局和Table佈局對比
雖然目前大多數網頁都是採用的DIV+CSS佈局的方式，但是也有少數的老式Web網頁採用的是Table佈局，我們可以一起來看看兩種佈局方式的優劣。
前端技術的更新如此迅速，在這樣的大環境下，前端工程師保持自學能力就顯得尤其重要了。因此，“學什麼”“怎麼學”就是我們要迫切解決的問題。這是我的前端交流學習qun：前面是四八四，中間是七五七，後面是七六零。如果需要學習資料在裡面下載。我做這行十多年，有問題隨時來問我，學習方法，學習效率等等問題。
- 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的知識點，大家都掌握了嗎？
