前端开发知识点之 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...

什么是外边距重叠？重叠的结果是什么？

答案：
外边距重叠就是margin-collapse。
在CSS当中，相邻的两个盒子（多是兄弟关系也多是祖先关系）的外边距能够结合成一个单独的外边距。这种合并外边距的方式被称为折叠，而且于是所结合成的外边距称为折叠外边距。
折叠结果遵循下列计算规则：

两个相邻的外边距都是正数时，折叠结果是它们二者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是二者绝对值的较大值。
两个外边距一正一负时，折叠结果是二者的相加的和。