html和 css一些面试题
1 src与href的区别
src用于引用资源，替换当前元素；href用于在当前文档和引用资源之间确立联系
href标识超文本引用，用在link和a元素上，href是引用和页面关联
src表示引用资源，替换当前元素
2 html5有哪些新特性，移除了那些元素
1拖拽释放()API
2 语义化更好的内容标签(header,nav,footer,aside,arti,cle,section)
3音频，视频(audio,video)
4 表单控制件 calender,date,time,email,url,search
移除元素
纯表现元素:badefont,big,center,font,s,strike,tt,u;
3 HTML全局性有哪些属性
accesskey 设置快捷键 提供快速访问元素 windows下的
class为元素设置标致，多个列名用空格分开css和Javascript 可通过class属性获取元素
dir设置类元素 文本方向
4 Canvas和SVG有什么区别
canvas 和SVG都允许你在浏览器中创建图形，但是它们在根本上是不同的
canvas:通过javascript来绘制2D图形,是逐渐像素进行的渲染的
SVG
一种使用XML描述的2D图形的语言SVG基于XML意味着，SVG DOM 中的每一个元素都是可用的，可以为某个元素附加javascript事件处理器
5 新的 HTML5 文档类型和字符集是？
HTML5文档类型：‹!doctype html›
HTML5使用的编码‹meta charset='UTF-8'›
6 什么是渐进式渲染
渐进式渲染（progressive rendering）
渐进式渲染是用于提高网页性能（尤其是提高用户感知的加载速度），以尽快呈现页面的技术。
在以前互联网带宽较小的时期，这种技术更为普遍。如今，移动终端的盛行，而移动网络往往不稳定，渐进式渲染在现代前端开发中仍然有用武之地。
7 DOM 和 BOM 有什么区别
DOM
Document Object Model，文档对象模型
DOM 是为了操作文档出现的 API，document 是其的一个对象
DOM 和文档有关，这里的文档指的是网页，也就是 html 文档。DOM 和浏览器无关，他关注的是网页本身的内容。
BOM
Browser Object Model，浏览器对象模型
BOM 是为了操作浏览器出现的 API，window 是其的一个对象
window 对象既为 javascript 访问浏览器提供 API，同时在 ECMAScript 中充当 Global 对象
9 img 上 title 与 alt
title 指图片的信息、alt 指图片不显示时显示的文字
10 HTML5 为什么只需要写 !DOCTYPEHTML
HTML 4.01 中的 doctype 需要对 DTD 进行引用，因为 HTML 4.01 基于 SGML。而 HTML 5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。其中，SGML 是标准通用标记语言,简单的说，就是比 HTML,XML 更老的标准，这两者都是由 SGML 发展而来的。BUT，HTML5 不是的。
‹!DOCTYPE›声明位于位于 HTML 文档中的第一行，处于 ‹html› 标签之前。作用：告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE 不存在或格式不正确会导致文档以怪异模式呈现。
11 对 WEB 标准以及 W3C 的理解与认识
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链 css 和 js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。
12 div+css 的布局较 table 布局有什么优点
分离 方便改版 快清晰简洁 seo
1.改版的时候更方便 只要改 css 文件。
2.页面加载速度更快、结构化清晰、页面显示简洁。
3.表现与结构相分离。
4.易于优化（seo）搜索引擎更友好，排名更容易靠前。
13 CSS 隐藏元素的几种方法
Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;
Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;
Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;
Position:不会影响布局，能让元素保持可以操作;
Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，浏览器支持度还要低;
14 CSS 选择符有哪些？哪些属性可以继承？优先级算
1.id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul id > class > tag
important 比 内联优先级高
16 CSS3新增伪类举例：
p:first-of-type 选择属于其父元素的首个 ‹p› 元素的每个 ‹p› 元素。
p:last-of-type 选择属于其父元素的最后 ‹p› 元素的每个 ‹p› 元素。
p:only-of-type 选择属于其父元素唯一的 ‹p› 元素的每个 ‹p› 元素。
p:only-child 选择属于其父元素的唯一子元素的每个 ‹p› 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个 ‹p› 元素。
:enabled、:disabled 控制表单控件的禁用状态。
:checked，单选框或复选框被选中。
rgba()和 opacity 的透明效果有什么不同？
rgba()和 opacity 都能实现透明效果，但最大的不同是 opacity 作用于元素，以及元素内的所有内容的透明度，
而 rgba()只作用于元素的颜色或其背景色。（设置 rgba 透明的元素的子元素不会继承透明效果！）
css 中可以让文字在垂直和水平方向上重叠的两个
垂直方向：line-height
水平方向：letter-spacing
px 和 em 的区别
px 和 em 都是长度单位，区别是，px 的值是固定的，指定是多少就是多少，计算比较容易。em 得值不是固定的，并且 em 会继承父级元素的字体大小。
display:none 与 visibility:hidden 的区别是什么？
display : 隐藏对应的元素但不挤占该元素原来的空间。
visibility: 隐藏对应的元素并且挤占该元素原来的空间。
即是，使用 CSS display:none 属性后，HTML 元素（对象）的宽度、高度等各种属性值都将“丢失”;而使用 visibility:hidden 属性后，HTML 元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。
哪些 css 属性可以继承？
可继承： font-size font-family color, ul li dl dd dt;
不可继承 ：border padding margin width height ;
style 标签写在 body 后与 body 前有什么区别？
从上向下加载，加载顺序不同
如何解决不同浏览器的样式兼容性问题？
- 在确定问题原因和有问题的浏览器后，使用单独的样式表，仅供出现问题的浏览器加载。这种方法需要使用服务器端渲染。
- 使用已经处理好此类问题的库，比如 Bootstrap。
- 使用 autoprefixer 自动生成 CSS 属性前缀。
- 使用 Reset CSS 或 Normalize.css。
position 的值， relative 和 absolute 分别是相对于谁进
absolute :生成绝对定位的元素， 相对于最近一级的 定位不是 static 的父元素来进行定位。
fixed （老 IE 不支持）生成绝对定位的元素，通常相对于浏览器窗口或 frame 进行定位。
relative 生成相对定位的元素，相对于其在普通流中的位置进行定位。
static 默认值。没有定位，元素出现在正常的流中
sticky 生成粘性定位的元素，容器的位置根据正常文档流计算得出
