摘要：声明允许表现性元素，废气元素以及。众所周知强制属性就是为禁用图片时的兼容性作考虑。而正确的遵循标签的语义，则是保证禁用时的兼容性。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
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当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个多带带的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
折叠结果遵循下列计算规则：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/51387.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布局；回顾起记忆略显模糊的几个项目。感慨着太多太多...
阅读 1484·2019-08-30 15:54
阅读 2254·2019-08-30 15:52
阅读 1770·2019-08-29 15:33
阅读 2941·2019-08-28 17:56
阅读 3092·2019-08-26 13:54
阅读 1576·2019-08-26 12:16
阅读 2351·2019-08-26 11:51
阅读 1503·2019-08-26 10:26
