本文总结了HTML5与CSS的基础知识，包括DOCTYPE的作用、语义化HTML的重要性、img标签的title与alt属性区别、字体大小的选择建议、HTML5的新特性、表单元素类型、盒子模型、自动完成设置、Web Workers的作用、HTML5存储类型区别、CSS link与@import的不同之处、CSS属性的继承规则及清除浮动的方法。
网上找的面试题，总结了一下。
1）Doctype? 严格模式与混杂模式，如何触发这两种模式？
Doctype可声明三种DTD类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式：标准模式和混杂模式
在标准模式中，浏览器以其支持的最高标准呈现页面，；
在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。
2）什么是Semantic HTML（语义HTML）?
语义化HTML，顾名思义，就是写的内容易读懂。比如header，footer，nav，有利于seo优化，并且适应于屏幕阅读器。3）<img>标签上title与alt属性的区别是什么？
title:鼠标经过的时候，显示的信息。
alt：图片加载不出来的时候，提示给用户的信息。
4）在网页中的应该使用奇数还是偶数的字体？
搜集了下答案，1，不分ui设计师的原因，因为ps工具中的字号是以偶数开始，没有奇数的，再就是计算的时候，好计算，还有就是 chrome最小支持字号是12px。但是像知乎的话是13px字号。以下答案摘自知乎：
偶数字号相对更容易和 web 设计的其他部分构成比例关系。比如：当我用了 14 px 的正文字号，我可能会在一些地方用 14 × 0.5 = 7 px 的 margin，在另一些地方用 14 × 1.5 = 21 px 的标题字号。
Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px 时用的是小一号的点阵（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。
这个我不确定，需要确认：听说有不少字体的 hinting 都只专门处理了常用的几个偶数字号。
除了上面说的这些，奇偶字号的字体渲染效果似乎其实差别不大（尤其在 OS X 和 Linux 以及手持设备上）。即使在 Windows 里，微软雅黑在 11 至 17 px 之间的奇偶字号效果似乎也都差不多。（呃，都差不多糟糕……）
目前 12、13、14、15、16 px 其实都是很不错的正文字号。知乎和豆瓣的正文字号都是 13 px，而中文维基百科的正文字号是 15 px，并没有什么不好。
另，@贺师俊 指出：
早期的 Windows 里，中易宋体点阵只有 12 和 14、15、16 px，唯独缺少 13 px。
5）什么是HTML5？
顾名思义，html标准的第五版。我们平时谈到的HTML5一般指以HTML5、CSS3、Javascript为代表的最新Web技术(标准)。其中，HTML5和CSS主要负责界面、内容呈现（貌），Javascript负责逻辑处理（才）。当然，光有技术标准远远不够，更重要的是有众多的浏览器类产品遵循和支持该标准。因为HTML5应用需要类似浏览器这样的特定应用执行环境。
6）如果我不放入<!DOCTYPE html> ，HTML5还会工作么？
不会，浏览器将不能识别他是HTML5文档，同时HTML5的标签将不能正常工作
7) HTML5中什么是不同的新的表单元素类型？
Color/Date/Datetime-local/Email/Time/Url/Range/Telephone/Number/Search8)css盒子模型是什么？
CSS中， Box Model叫盒子模型（或框模型），Box Model规定了元素框处理元素内容（element content）、内边距（padding）、边框（border） 和 外边距（margin） 的方式。在HTML文档中，每个元素（element）都有盒子模型，所以说在Web世界里（特别是页面布局），Box Model无处不在。
9）HTML5的form如何关闭自动完成功能？
注释：autocomplete 属性适用于 <form>，以及下面的<input>类型：text, search, url, telephone, email, password, datepickers, range 以及 color。<form>的autocomplete属性默认是on，也就是开启着。
10）什么是Web Workers？为什么我们需要Web Workers？
Web worker帮助我们用异步执行Javascript文件。
11）HTML5 存储类型有什么区别？
localStorage/sessionStoragesetItem('XX','XX'); getItem('XX');
removeItem(key) clear()
12) css link和@import的区别
本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。
1. 老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。 link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
2. 加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。
3. 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
4. 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
原声js引入外部的css代码如下：
<pre name="code" class="javascript">var head = document.getElementsByTagName('head')[0],
cssURL = '/style.css',
linkTag = document.createElement('link');
linkTag.id = 'dynamic-style';
linkTag.href = cssURL;
linkTag.setAttribute('rel','stylesheet');
linkTag.setAttribute('media','all');
linkTag.setAttribute('type','text/css');
13）CSS 哪些属性默认会继承, 哪些不会继承?
不可继承的：display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break-after、page-bread-before和unicode-bidi。所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
表格元素可继承：border-collapse。
14）清除浮动的几种方式，各自的优缺点
1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）
3.是用afert伪元素清除浮动(用于非IE浏览器)
.clearfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* 触发 hasLayout */
zoom: 1;
}
To be continue.....
扫一扫
707
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
