前端開發知識點之 html &css

時間 2019-12-21

標籤前端開發知識 html css 欄目 HTML 简体版

原文原文鏈接

HTML&CSS 大綱

對Web標準的理解、瀏覽器內核差別、兼容性、hack、CSS基本功：佈局、盒子模型、選擇器優先級、
HTML五、CSS三、Flexbox

doctype

<!doctype>聲明必須處於HTML文檔的頭部，在<html>標籤以前，HTML5中不區分大小寫
<!doctype>聲明不是一個HTML標籤，是一個用於告訴瀏覽器當前HTML版本的指令
現代瀏覽器的html佈局引擎經過檢查doctype決定使用兼容模式仍是標準模式對文檔進行渲染，一些瀏覽器有一個接近標準模型。
在HTML4.01中<!doctype>聲明指向一個DTD，因爲HTML4.01基於SGML，因此DTD指定了標記規則以保證瀏覽器正確渲染內容
HTML5不基於SGML，因此不用指定DTD

常見dotype：css

HTML4.01 strict：不容許使用表現性、廢棄元素（如font）以及frameset。聲明：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML4.01 Transitional:容許使用表現性、廢棄元素（如font），不容許使用frameset。聲明：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML4.01 Frameset:容許表現性元素，廢氣元素以及frameset。聲明：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML1.0 Strict:不使用容許表現性、廢棄元素以及frameset。文檔必須是結構良好的XML文檔。聲明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML1.0 Transitional:容許使用表現性、廢棄元素，不容許frameset，文檔必須是結構良好的XMl文檔。聲明： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset:容許使用表現性、廢棄元素以及frameset，文檔必須是結構良好的XML文檔。聲明：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
HTML 5: <!doctype html>

html 語義話

我下面詳細的列舉一下我對一些標籤的語義的理解： html

p br
先說個最簡單的。分段要用p標籤而不是用br（甚至連續兩個
）。這個彷佛不用多說。可是有時候咱們不得不放棄這個原則。一個常見的例子是論壇發帖，若是我想分段，便打回車。而如此傳輸到後臺並顯示出來的，顯然就是用
分段的。瀏覽器

table th
因爲大力宣揚div+css的結果，彷佛如今誰用table佈局誰就是未開化的土著。但我認爲這種觀點是不正確的。table的含義是表格，所以凡是應該以表格形式出現的數據，仍然應該用table佈局。簡單的例子是班級同窗的花名冊，包括姓名學號性別等等，這明顯是一個表格形式的數據，所以應該用table佈局。另外一個比較值得探討的例子是，blog裏面的日曆導航。我曾經有見過一個blog程序，它的日曆導航裏的各個日期，從1號到30號全用div套好，再使用float:left樣式7個一排的排出當月的日曆。當我取消瀏覽器的CSS顯示以後，日曆的那部分則從1號到30號一豎排下來。我認爲這是不對的。由於日曆應該是一個表格形式的數據，所以仍然應該用table佈局。當取消css以後，應該仍然按照一排7個的樣子歸成一個表格。函數

th則是另外一個會被忽視的標籤。因爲CSS的萬能，全部的表格單元均可以用td加一個class屬性搞定。可是從語義上講，一些表格單元應該用th標籤。好比上文說到的日曆表格，裏面的「MON TUE WED... SUN」這些標識星期的單元，就應該用th而不是td。佈局

h1-h6
對於h1-h6標籤，從語義上講，它們應該適用於全部標題文字。所以，一些如<div class="diary-title>的寫法都是多餘的，直接寫成<h1>，而後直接對h1而不是.diary-title定義CSS，不是同樣的效果麼？固然，這個規矩我也不能定得太死，由於有時候標題部分的結構元素並不能簡單的用一個h1就能解決的。但我最多用相似<h1><span></span></h1>的方法將標題的結構嵌套得更復雜，以知足表現的須要。字體

但這裏會出現一個語義上的分歧。h1究竟該理解爲一級標題呢仍是理解爲1號字體大小的標題。我一般理解爲一級標題，一級標題下再有小標題就用h2。可是事實上回顧HTML設計之初，h1-h6後面的數字更多的被理解爲控制標題文字大小的。用h3或許只是爲了使用三號大小的字體，而並不是它就是三級標題。不然一級標題全用h1，個個都是斗大的字，又不得不用CSS來控制字號，感受很累贅。因此，這是一個待商榷的問題。網站

ul ol
凡是須要羅列條款的，都應該用ul或者ol，而不是用p。好比招聘廣告裏的職位需求，好比注意事項，好比操做步驟說明。此外一個流行的用法是網頁的導航菜單也用ul li來列舉，而後再用CSS控制其排列方式。 spa

應該要補充的是，別忘了li裏面還能夠再用ul或ol，造成第二級列表。設計

dl dt dd
這是一組幾乎被人忘記的標籤，但Jeffrey Zeldman在《網站重構》中大力推崇對它們的使用。dl應該是「defining list（或是definition list？有知道的朋友請告訴我）」的全稱，一個典型的用法是字典的詞條。單詞的名字放在dt裏面，單詞的解釋放在dd裏面。而alistapart.com網站更加高明的，將右側欄整個定義爲dl，每一個單元的標題用dt，而該單元的內容則用dd。 code

必定要記住每一個標籤標示什麼，就是英語原意是什麼？好比

dl 就是definition list，定義列表；
dt 就是definition title，定義標題；
dd就是definition description，定義描述

img
img標籤自己也沒啥好說的。只是想老生常談一個，即只有當確實這個元素是內容裏必須的圖片的時候才使用img，不然應該用CSS定義爲樣式。如插圖，頭像，表情圖標，這些是內容裏必須出現的圖片，用img。而其餘的好比標題的背景圖，列表項前面的小icon，這些都不該該用img標籤。

span
span現在大有和div並駕齊驅的風頭。可是事實上我認爲咱們仍是應該聽從它最初的使用。我我的的理解，span最初就是用來帶class或者style屬性的。它自己不具備明確的語義。所以在文本流中，咱們須要對某些文字作樣式上的改變，就用span括起來。好比有些字須要加紅，我就用<span class="red">。

可是值得注意的是，這樣又有可能犯以前h1裏面提到的問題。由於有些文字的樣式實際上是有現成的標籤的，好比 strong 標籤 sub標籤等，咱們也應該適當的給它們一些機會。

a
a是控制超鏈接的標籤。但有些特殊的狀況，咱們不必定喜歡用它。好比須要彈出一個小窗口。我沒怎麼留心，但我想有些設計師會將onclick直接定義到「播放」小圖標的<img>標籤裏。我我的認爲仍是應該在img外面加一個a，而後將onclick定義到a裏面，並記住在js函數最後寫上return false。若是能夠，該a標籤的href屬性也應該寫上彈出窗口的URL,保證用戶在禁止JS的狀況下仍可以有效的打開頁面。
我暫時就列出這麼多。

最後再總結一下遵循HTML標籤語義的重要性。Web標準的其中一個要求是低配置的兼容性：當用戶禁用圖片、禁用CSS或禁用JS的時候，咱們仍可以讓他有效的瀏覽網頁內容。衆所周知強制alt屬性就是爲禁用圖片時的兼容性做考慮。而正確的遵循HTML標籤的語義，則是保證禁用CSS時的兼容性。只有當正確使用了HTML標籤，咱們的網頁在「CSS裸奔」的時候，纔會仍然讓人看得出哪裏是導航菜單，哪裏是文章標題，日曆表格也不會分崩離析。

行內元素和塊級元素的具體區別是什麼？行內元素的padding和margin可設置嗎？

CSS規範規定: 每一個元素都有display屬性，肯定該元素的類型，每一個元素都有默認的display值，如div的display默認值爲「block」，則爲「塊級」元素；span默認display屬性值爲「inline」，是「行內」元素。

（1）行內元素有：a b span img input select strong（強調的語氣）
（2）塊級元素有：div ul ol li dl dt dd h1-h6 p
（3）常見的空元素：

<br> <hr> <img> <input> <link> <meta>
  不爲人知的是：
  <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

區別一：
塊級：塊級元素會獨佔一行，默認狀況下寬度自動填滿其父元素寬度
行內：行內元素不會獨佔一行，相鄰的行內元素會排在同一行。其寬度隨內容的變化而變化。
區別二：
塊級：塊級元素能夠設置寬高
行內：行內元素不能夠設置寬高
區別三：
塊級：塊級元素能夠設置margin，padding
行內：行內元素水平方向的margin-left; margin-right; padding-left; padding-right;能夠生效。可是豎直方向的margin-bottom; margin-top; padding-top; padding-bottom;卻不能生效。
區別四：
塊級：display:block;
行內：display:inline;
能夠經過修改display屬性來切換塊級元素和行內元素

https://jeffjade.com/2015/06/...

那麼問題來了，瀏覽器還有默認的天生inline-block元素（擁有內在尺寸，可設置高寬，但不會自動換行），有哪些？
答案：<input> 、<img> 、<button> 、<texterea> 、<label>。

不一樣瀏覽器（版本）、HTML4（5）、CSS2等實際略有差別
參考: http://stackoverflow.com/ques...