資訊專欄INFORMATION COLUMN
摘要：聲明允許表現性元素，廢氣元素以及。眾所周知強制屬性就是為禁用圖片時的兼容性作考慮。而正確的遵循標簽的語義，則是保證禁用時的兼容性。這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距。
HTML&CSS 大綱
對Web標準的理解、瀏覽器內核差異、兼容性、hack、CSS基本功：布局、盒子模型、選擇器優先級、 HTML5、CSS3、Flexboxdoctype
聲明必須處于HTML文檔的頭部，在標簽之前，HTML5中不區分大小寫
聲明不是一個HTML標簽，是一個用于告訴瀏覽器當前HTML版本的指令
現代瀏覽器的html布局引擎通過檢查doctype決定使用兼容模式還是標準模式對文檔進行渲染，一些瀏覽器有一個接近標準模型。
在HTML4.01中聲明指向一個DTD，由于HTML4.01基于SGML，所以DTD指定了標記規則以保證瀏覽器正確渲染內容
HTML5不基于SGML，所以不用指定DTD
常見dotype：
HTML4.01 strict：不允許使用表現性、廢棄元素（如font）以及frameset。聲明：
HTML4.01 Transitional:允許使用表現性、廢棄元素（如font），不允許使用frameset。聲明：
HTML4.01 Frameset:允許表現性元素，廢氣元素以及frameset。聲明：
XHTML1.0 Strict:不使用允許表現性、廢棄元素以及frameset。文檔必須是結構良好的XML文檔。聲明：
XHTML1.0 Transitional:允許使用表現性、廢棄元素，不允許frameset，文檔必須是結構良好的XMl文檔。聲明：
XHTML 1.0 Frameset:允許使用表現性、廢棄元素以及frameset，文檔必須是結構良好的XML文檔。聲明：
HTML 5:
我下面詳細的列舉一下我對一些標簽的語義的理解：
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標簽，從語義上講，它們應該適用于所有標題文字。因此，一些如
但是值得注意的是，這樣又有可能犯之前h1里面提到的問題。因為有些文字的樣式其實是有現成的標簽的，比如 strong 標簽 sub標簽 等，我們也應該適當的給它們一些機會。
a
a是控制超連接的標簽。但有些特殊的情況，我們不一定喜歡用它。比如需要彈出一個小窗口。我沒怎么留心，但我想有些設計師會將onclick直接定義到“播放”小圖標的標簽里。我個人認為還是應該在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）常見的空元素：
鮮為人知的是：
區別一：
塊級：塊級元素會獨占一行，默認情況下寬度自動填滿其父元素寬度
行內：行內元素不會獨占一行，相鄰的行內元素會排在同一行。其寬度隨內容的變化而變化。
區別二：
塊級：塊級元素可以設置寬高
行內：行內元素不可以設置寬高
區別三：
塊級：塊級元素可以設置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元素（擁有內在尺寸，可設置高寬，但不會自動換行），有哪些？
答案： 、 、
不同瀏覽器（版本）、HTML4（5）、CSS2等實際略有差異
參考: http://stackoverflow.com/ques...
答案：
外邊距重疊就是margin-collapse。
在CSS當中，相鄰的兩個盒子（可能是兄弟關系也可能是祖先關系）的外邊距可以結合成一個多帶帶的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距。
折疊結果遵循下列計算規則：
兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值。
兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值。
兩個外邊距一正一負時，折疊結果是兩者的相加的和。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115542.html
摘要：聲明允許表現性元素，廢氣元素以及。眾所周知強制屬性就是為禁用圖片時的兼容性作考慮。而正確的遵循標簽的語義，則是保證禁用時的兼容性。這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距。 HTML&CSS 大綱 對Web標準的理解、瀏覽器內核差異、兼容性、hack、CSS基本功：布局、盒子模型、選擇器優先級、 HTML5、CSS3、Flexbox doctype 聲...
摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...
摘要：并最終窗體自上而下分成一行行，并在每行中從左至右的順序排放元素。宋體清除浮動這是專業術語，其實就是需要我們解決浮動帶來的影響宋體父元素的高度塌陷宋體。相對定位的參考點是自身。 一、浮動 1.1 各個語言的主要知識點 HTML：標簽語義化(那么怎么樣布局才是合理的?沒有絕對的對和錯) CSS： 樣式： 布局： 標準流(標準文檔流、普通文檔流)：盒子模型(width/height...
摘要：前端每周清單第期現狀分析與優化策略單元測試爬蟲作者王下邀月熊編輯徐川前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。 showImg(https://segmentfault.com/img/remote/1460000011008022); 前端每周清單第 29 期：Web 現狀分析與優化策略...
摘要：寫在金三銀四之際。一個節點觸發了，瀏覽器會檢查中其他所有節點的顯示方式一個節點觸發了會導致它的祖先節點，后代節點以及在它之后的節點全部。對性能的影響大于。解決方式控制我們無力去改變，對性能損害的程度，我們能做的只有減少它們發生的次數。 寫在金三銀四之際。 因為種種原因想要謀求新的發展，不得已翻起了塵封已久的高程書；寫起了各種經典CSS布局；回顧起記憶略顯模糊的幾個項目。感慨著太多太多...
閱讀 870·2021-11-18 10:02
閱讀 1670·2019-08-30 15:56
閱讀 2570·2019-08-30 13:47
閱讀 2639·2019-08-29 12:43
閱讀 851·2019-08-29 11:19
閱讀 1783·2019-08-28 18:23
閱讀 2669·2019-08-26 12:23
閱讀 3007·2019-08-23 15:29
