那些你不知道的HTML知識，快來學習一下吧

前言

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佈局

1. div+css的佈局方式屬於W3C標準，並且因爲CSS的存在，HTML部分的代碼會顯得很純淨，知足行爲，樣式，結構分離的原則。
2. 頁面加載速度更快，這是目前DIV+CSS使用更普遍的一個很是重要的緣由。
3. 頁面編碼量相對於Table佈局會少不少。
4. 頁面內容更容易維護，因爲樣式都存在CSS文件中，只須要修改CSS文件便可，對HTML文件不會有影響。
5. 因爲DIV+CSS佈局更容易進行SEO優化，因此更方便被搜索引擎收錄。

• Table佈局

雖然DIV+CSS有各類各樣的優點，可是Table佈局也並非徹底無用的。這裏也能夠列舉出幾個採用Table佈局的優點。

1. 新手學習方便（相信有不少後端RD在進行前端學習時剛開始都是從table佈局開始的）。
2. 兼容性更好，因爲Table佈局是從最古老的瀏覽器發展而來的，在兼容性上會知足全部瀏覽器。而CSS3的出現卻要考慮瀏覽器的支持程度，一個樣式要考慮加上幾個不一樣瀏覽器前綴，相似於-webkit，-moz等

結束語

今天這篇文章主要講解了幾個關於HTML的知識點，你們都掌握了嗎？