前端html css中的考点,前端开发知识点之 html &css

夜魔残月

于 2021-06-25 10:37:14 发布

阅读量133

点赞数

文章标签：前端html css中的考点

HTML&CSS 大纲

对Web标准的理解、浏览器内核差别、兼容性、hack、CSS基本功：布局、盒子模型、选择器优先级、

HTML五、CSS三、Flexbox

doctype

声明必须处于HTML文档的头部，在标签以前，HTML5中不区分大小写

声明不是一个HTML标签，是一个用于告诉浏览器当前HTML版本的指令

现代浏览器的html布局引擎经过检查doctype决定使用兼容模式仍是标准模式对文档进行渲染，一些浏览器有一个接近标准模型。

在HTML4.01中声明指向一个DTD，因为HTML4.01基于SGML，因此DTD指定了标记规则以保证浏览器正确渲染内容

HTML5不基于SGML，因此不用指定DTD

常见dotype：css

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:

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标签，从语义上讲，它们应该适用于全部标题文字。所以，一些如

。

可是值得注意的是，这样又有可能犯以前h1里面提到的问题。由于有些文字的样式实际上是有现成的标签的，好比 strong 标签 sub标签等，咱们也应该适当的给它们一些机会。

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)常见的空元素：

不为人知的是：

区别一：

块级：块级元素会独占一行，默认状况下宽度自动填满其父元素宽度

行内：行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。

区别二：

块级：块级元素能够设置宽高

行内：行内元素不能够设置宽高