前端開發(fā)知識點之 html &css

Scliang 發(fā)布于2019-08-01 17:48 / 2664人閱讀

摘要：聲明允許表現(xiàn)性元素，廢氣元素以及。眾所周知強制屬性就是為禁用圖片時的兼容性作考慮。而正確的遵循標(biāo)簽的語義，則是保證禁用時的兼容性。這種合并外邊距的方式被稱為折疊，并且因而所結(jié)合成的外邊距稱為折疊外邊距。

HTML&CSS 大綱

對Web標(biāo)準(zhǔn)的理解、瀏覽器內(nèi)核差異、兼容性、hack、CSS基本功：布局、盒子模型、選擇器優(yōu)先級、
HTML5、CSS3、Flexbox

doctype

聲明必須處于HTML文檔的頭部，在標(biāo)簽之前，HTML5中不區(qū)分大小寫

聲明不是一個HTML標(biāo)簽，是一個用于告訴瀏覽器當(dāng)前HTML版本的指令

現(xiàn)代瀏覽器的html布局引擎通過檢查doctype決定使用兼容模式還是標(biāo)準(zhǔn)模式對文檔進(jìn)行渲染，一些瀏覽器有一個接近標(biāo)準(zhǔn)模型。

在HTML4.01中聲明指向一個DTD，由于HTML4.01基于SGML，所以DTD指定了標(biāo)記規(guī)則以保證瀏覽器正確渲染內(nèi)容

HTML5不基于SGML，所以不用指定DTD

常見dotype：

HTML4.01 strict：不允許使用表現(xiàn)性、廢棄元素（如font）以及frameset。聲明：

HTML4.01 Transitional:允許使用表現(xiàn)性、廢棄元素（如font），不允許使用frameset。聲明：

HTML4.01 Frameset:允許表現(xiàn)性元素，廢氣元素以及frameset。聲明：

XHTML1.0 Strict:不使用允許表現(xiàn)性、廢棄元素以及frameset。文檔必須是結(jié)構(gòu)良好的XML文檔。聲明：

XHTML1.0 Transitional:允許使用表現(xiàn)性、廢棄元素，不允許frameset，文檔必須是結(jié)構(gòu)良好的XMl文檔。聲明：

XHTML 1.0 Frameset:允許使用表現(xiàn)性、廢棄元素以及frameset，文檔必須是結(jié)構(gòu)良好的XML文檔。聲明：
HTML 5:

html 語義話

我下面詳細(xì)的列舉一下我對一些標(biāo)簽的語義的理解：

p br
先說個最簡單的。分段要用p標(biāo)簽而不是用br（甚至連續(xù)兩個
）。這個似乎不用多說。但是有時候我們不得不放棄這個原則。一個常見的例子是論壇發(fā)帖，如果我想分段，便打回車。而如此傳輸?shù)胶笈_并顯示出來的，顯然就是用
分段的。

table th
由于大力宣揚div+css的結(jié)果，似乎現(xiàn)在誰用table布局誰就是未開化的土著。但我認(rèn)為這種觀點是不正確的。table的含義是表格，因此凡是應(yīng)該以表格形式出現(xiàn)的數(shù)據(jù)，仍然應(yīng)該用table布局。簡單的例子是班級同學(xué)的花名冊，包括姓名學(xué)號性別等等，這明顯是一個表格形式的數(shù)據(jù)，因此應(yīng)該用table布局。另一個比較值得探討的例子是，blog里面的日歷導(dǎo)航。我曾經(jīng)有見過一個blog程序，它的日歷導(dǎo)航里的各個日期，從1號到30號全用div套好，再使用float:left樣式7個一排的排出當(dāng)月的日歷。當(dāng)我取消瀏覽器的CSS顯示之后，日歷的那部分則從1號到30號一豎排下來。我認(rèn)為這是不對的。因為日歷應(yīng)該是一個表格形式的數(shù)據(jù)，因此仍然應(yīng)該用table布局。當(dāng)取消css之后，應(yīng)該仍然按照一排7個的樣子歸成一個表格。

th則是另一個會被忽視的標(biāo)簽。由于CSS的萬能，所有的表格單元都可以用td加一個class屬性搞定。但是從語義上講，一些表格單元應(yīng)該用th標(biāo)簽。比如上文說到的日歷表格，里面的“MON TUE WED... SUN”這些標(biāo)識星期的單元，就應(yīng)該用th而不是td。

h1-h6
對于h1-h6標(biāo)簽，從語義上講，它們應(yīng)該適用于所有標(biāo)題文字。因此，一些如

。

但是值得注意的是，這樣又有可能犯之前h1里面提到的問題。因為有些文字的樣式其實是有現(xiàn)成的標(biāo)簽的，比如 strong 標(biāo)簽 sub標(biāo)簽等，我們也應(yīng)該適當(dāng)?shù)慕o它們一些機會。

a
a是控制超連接的標(biāo)簽。但有些特殊的情況，我們不一定喜歡用它。比如需要彈出一個小窗口。我沒怎么留心，但我想有些設(shè)計師會將onclick直接定義到“播放”小圖標(biāo)的標(biāo)簽里。我個人認(rèn)為還是應(yīng)該在img外面加一個a，然后將onclick定義到a里面，并記住在js函數(shù)最后寫上return false。如果可以，該a標(biāo)簽的href屬性也應(yīng)該寫上彈出窗口的URL,保證用戶在禁止JS的情況下仍能夠有效的打開頁面。
我暫時就列出這么多。

最后再總結(jié)一下遵循HTML標(biāo)簽語義的重要性。Web標(biāo)準(zhǔn)的其中一個要求是低配置的兼容性：當(dāng)用戶禁用圖片、禁用CSS或禁用JS的時候，我們?nèi)阅軌蜃屗行У臑g覽網(wǎng)頁內(nèi)容。眾所周知強制alt屬性就是為禁用圖片時的兼容性作考慮。而正確的遵循HTML標(biāo)簽的語義，則是保證禁用CSS時的兼容性。只有當(dāng)正確使用了HTML標(biāo)簽，我們的網(wǎng)頁在“CSS裸奔”的時候，才會仍然讓人看得出哪里是導(dǎo)航菜單，哪里是文章標(biāo)題，日歷表格也不會分崩離析。

行內(nèi)元素和塊級元素的具體區(qū)別是什么？行內(nèi)元素的padding和margin可設(shè)置嗎？

CSS規(guī)范規(guī)定: 每個元素都有display屬性，確定該元素的類型，每個元素都有默認(rèn)的display值，如div的display默認(rèn)值為“block”，則為“塊級”元素；span默認(rèn)display屬性值為“inline”，是“行內(nèi)”元素。

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

  
 
    
  鮮為人知的是：

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

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

那么問題來了，瀏覽器還有默認(rèn)的天生inline-block元素（擁有內(nèi)在尺寸，可設(shè)置高寬，但不會自動換行），有哪些？
答案：、、