前端開(kāi)發(fā)知識(shí)點(diǎn)之 html &css

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

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

HTML&CSS 大綱

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

doctype

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

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

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

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

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

常見(jiàn)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 語(yǔ)義話

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

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

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

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

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

。

但是值得注意的是，這樣又有可能犯之前h1里面提到的問(wèn)題。因?yàn)橛行┪淖值臉邮狡鋵?shí)是有現(xiàn)成的標(biāo)簽的，比如 strong 標(biāo)簽 sub標(biāo)簽等，我們也應(yīng)該適當(dāng)?shù)慕o它們一些機(jī)會(huì)。

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

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

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

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

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

  
 
    
  鮮為人知的是：

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

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

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