前端知识总结之HTML+CSS

		                HTML4/HTML5+CSS2/CSS3

一、HTML
1.什么是HTML 语义化，有什么好处
是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化），简单来说就是，标签用语义化的英文单词或者单词缩写，比如段落使用

，侧边栏用 ，便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。
好处`： 1.1有助于构架良好的HTML结构
1.2有助于搜索引擎建立索引、抓取，有利于SEO
1.3有利于不同设备的解析
1.4有利于团队的开发维护
2.谈谈你对HTML5的认识
优点：
1）多设备，跨平台；
2）用户体验好；
3）新标签的可读性高，有助于开发人员定义重要内容；
4）提供了更多的多媒体元素（视频和音频）；
5）很好地替代了Flash和Silverlight；
6）涉及到网站的抓取和索引的时候，SEO更加友好；
7）可以被大量应用于移动应用程序和游戏。

缺点：
1）web storage和web socket这样的功能很容易被黑客利用，安全性差；
2）兼容性不好，很多浏览器的支持程度不一样；
3）有一定的技术门槛；
4）某些平台上的引擎问题导致HTML5性能低下
3.HTML4和HTML5有啥区别
1.DOCTYPE声明的简化 HTM5不基于SGML因此不需要引用DTD
2.指定字符编码
HTML5:
HTML4:
3.新增内联SVG和Canvas ，
Canvas和SVG的区别？
Canvas和SVG是html5支持的两种可视化技术。基于这两种技术，诞生了很多可视化工具。Echarts是基于Canvas技术的可视化工具，底层封装了原生的JavaScript的绘图 API。我们很容易联想到另一个同样很优秀的web前端可视化库D3，D3是也最流行的可视化库之一，它被很多其他的表格插件所使用。
D3底层基于SVG技术，与Canvas完全不一样，SVG的本质是一个XML 文档。这两种方式在功能上是等同的，任何一种都可以用另一种来模拟。它们都是有效的图形工具，可用来快速创建在网页中显示的轻型图形；它们都使用 JavaScript 和 HTML；它们都遵守万维网联合会 (W3C) 标准。Canvas和SVG都允许您在浏览器中创建图形，但是它们在根本上是不同的。它们很不相同，他们各有强项和弱点。

Canvas 通过JavaScript来绘制2D图形。Canvas 是逐像素进行渲染的。在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。
这两种技术之间的主要区别是：
Canvas 是基于像素的即时模式图形系统，最适合较小的表面或较大数量的对象，Canvas不支持鼠标键盘等事件。
SVG 是基于形状的保留模式图形系统，更加适合较大的表面或较小数量的对象。Canvas和SVG在修改方式上还存在着不同。绘制Canvas对象后，不能使用脚本和 CSS 对它进行修改。因为 SVG 对象是文档对象模型的一部分，所以可以随时使用脚本和 CSS 修改它们。
现在对两种技术做对比归纳如下：
Canvas
1)依赖分辨率
2)不支持事件处理器
3)弱的文本渲染能力
4)能够以 .png 或 .jpg 格式保存结果图像
5)最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG
1)不依赖分辨率
2)支持事件处理器
3)最适合带有大型渲染区域的应用程序（比如谷歌地图）
4)复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
5)不适合游戏应用

新增的标签

area元素同a和link元素一样有了新的hreflang、type、rel属性
base元素同a一样可以有target属性
meta元素有了charset属性
script元素有了async属性将影响脚本的加载与运行
html元素有manifest属性，可用于指定缓存行为
link元素有了新的属性sizes，可以指定不同的大小的favicon
ol元素有了新的属性reversed，它代表着列表的顺序是逆序的
iframe元素有了sandbox和srcdoc属性以支持沙盒安全保护
object元素有了typemustmatch元素以保证更安全的嵌入顺序
img元素有crossorigin属性以在canvas中支持CORS
contenteditable
data-*代表了开发定制的属性，这种格式可以避免与将来的新HTML属性冲突
hidden属性代表一个元素不再与文档相关
role及aria-*用于支持无障碍访问
spellcheck用于指定内容是否允许进行拼写检查
translate用于指定内容是否应当翻译
废弃的属性，废弃的属性也有很多，a废弃属性：shape, coords, rev, charset
area废弃属性：nohref
form废弃属性：accept
head废弃属性：profile
html废弃属性：version
iframe废弃属性：longdesc
img废弃属性：name
input废弃属性：usemap
link废弃属性：target, rev, charset
meta废弃属性：scheme
object废弃属性：archive, classid, codebase, codetype, declare, standby
param废弃属性：valuetype, type
table废弃属性：summary
td废弃属性：axis, abbr, scope
th废弃属性：axis
HTML不再包含纯用于表现的属性，它们应当被CSS替代：

caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup,tbody, td, - tfoot, th, thead和tr的align属性被废弃
body的alink, link, text, background属性被废弃
table, tr, td, th和body的bgcolor属性被废弃
object的border属性被废弃
table的cellpadding和cellspacing属性被废弃
col, colgroup, tbody, td, tfoot, th, thead和tr的char和charoff属性被废弃
br的clear属性被废弃
dl, ol和ul的compact属性被废弃
table的frame属性被废弃
iframe的frameborder属性被废弃
td和th的height属性被废弃
img和object的hspace和vspace属性被废弃
iframe的marginheight和marginwidth属性被废弃
hr的noshade属性被废弃
td和th的nowrap属性被废弃
table的rules属性被废弃
iframe的scrolling属性被废弃
hr的size属性被废弃
li,和ul的type属性被废弃
col, colgroup, tbody, td, tfoot, th, thead和tr的valign属性被废弃
hr, table, td, th, col, colgroup和pre的width属性被废弃
8.本地数据存储类型（localStorage、sessionStorage）
HTML5 提供了两种在客户端存储数据的新方法：
1）localStorage - 没有时间限制的数据存储
2）sessionStorage - 针对一个 session 的数据存储
之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。
对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。
HTML5 使用 JavaScript 来存储和访问数据。

5. HTML5支持音视频
   6.元素标记的省略、具有boolean值的属性、省略引号
   具有boolean值的属性(常见的checked、selected、disabled、readonly)
   4.HTML5应用程序缓存为应用带来什么优势。
   应用程序缓存为应用带来三个优势：
   1）离线浏览：用户可在应用离线时使用它们。
   2）速度：已缓存资源加载得更快。
   3）减少服务器负载：浏览器将只从服务器下载更新过或更改过的资源。
   5.为什么要在html文件开头加上一个
   告诉浏览器的/标准通用标记语言解析器使用哪个版本的HTML规范来解析文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。只有确定了一个正确的文档类型，超文本标记语言或可扩展超文本标记语言中的标签和层叠样式表才能生效，甚至对 javascript 脚本都会有所影响。
   6.如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
   通过document.createElement方法产生的标签， 可以利用这一特性让这些浏览器支持HTML5新标签， 浏览器支持新标签后，还需要添加标签默认的样式：
   7.HTML5的新增特性
   新增加了图像、位置、存储、多任务等功能。
   • 新增功能标签：可以用作画板的canvas，用于媒介回放的video和audio元素等
   • 本地离线存储：localStorage长期存储数据，浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除
   • 语意化更好的标签：figure、footer、nav(定义只包含导航链接的章节
   • )、header、aside、time 等标签
   • 位置API：Geolocation
   • 表单控件：calendar date time email url search
   • 新的技术：Web Worker(web worker是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行) Web Socket
   • 拖放API：drag、drop
   • 离线网路程序：能够让网页在客户端本地高效地离线运行。
   • History API：允许对浏览器历史记录进行操作。这对于那些交互地加载新信息的页面尤其有用。
   8.请说出XHTML和HTML的区别
   1、文档顶部doctype声明不同，xhtml的doctype顶部声明中明确规定了xhtml DTD的写法；
   2、html元素必须正确嵌套，不能乱；
   3、属性必须是小写的；
   4、属性值必须加引号；
   5、标签必须有结束，单标签也应该用 “/” 来结束掉；
   9、 行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
   行内元素：和有他元素都在一行上，高度、行高及外边距和内边距都不可改变，文字图片的宽度不可改变，只能容纳文本或者其他行内元素
   块级元素：总是在新行上开始，高度、行高及外边距和内边距都可控制，可以容纳内敛元素和其他元素；
   空元素：在HTML元素中，没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
   就是没有关闭标签的空元素。

行内元素：a span img input select label input button textarea select
块级元素：div ul ol li dl dt dd h1 p form
空元素：

---

10. SGML 、 HTML 、XML 和 XHTML 的区别？
• SGML 是标准通用标记语言，是一种定义电子文档结构和描述其内容的国际标准语言，是所有电子文档标记语言的起源。
• HTML 是超文本标记语言，主要是用于规定怎么显示网页。
• XML 是可扩展标记语言是未来网页语言的发展方向，XML 和 HTML 的最大区别就在于 XML 的标签是可以自己创建的，数量无限多， 而 HTML 的标签都是固定的而且数量有限。
• XHTML 也是现在基本上所有网页都在用的标记语言，他其实和 HTML 没什么本质的区别，标签都一样，用法也都一样，就是比 HTML 更严格，比如标签必须都用小写，标签都必须有闭合标签等。
回到顶部
11. DTD 介绍
• DTD（ Document Type Definition 文档类型定义）是一组机器可读的规则，它们定义 XML 或 HTML 的特定版本中所有允许元 素及它们的属性和层次关系的定义。在解析网页时，浏览器将使用这些规则检查页面的有效性并且采取相应的措施。
• DTD 是对 HTML 文档的声明，还会影响浏览器的渲染模式（工作模式）。
二、CSS3
1.怎么让一个不定宽高的 DIV，垂直水平居中？
在我们公司也经常有这种需求，以前都是用css定位的方式实现，后来在逛掘金时候看flex知识时候发现这个方式也能实现。
• 1）使用 CSS 方法：
• 父盒子设置：display：table-cell； text-align：center；vertical-align：middle；
• Div 设置： display：inline-block；vertical-align：middl；
• 2）使用 CSS3transform：
• 父盒子设置：display：relative
• Div 设置： transform： translate(-50%，-50%)；position： absolute；top： 50%；left： 50%；
• 3.使用弹性布局flex
.one {
• width: 500px;
• height: 500px;
• background-color: royalblue;
• display: flex; //弹性布局display：flex 属性，在 ie10 以下都是无效的
• justify-content: space-around; //水平居中
• align-items: center; //垂直居中
• }
2.position几个属性的作用？
• 答：position的常见四个属性值： relative，absolute，fixed，static。一般都要配合"left"、“top”、“right"以及 “bottom”
• 属性使用。
• 1）Static：默认位置，设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。一般不常用。
• 2）Relative：位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，意思就是如果设置了 relative 值，那么，它偏移的 top，right，bottom，left 的值都以它原来的位置为基准偏移，而不管其他元素会怎么样。注意 relative 移动后的元素在原来的位置仍占据空间。
• 3）Absolute：位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。意思就是如果它的
• 父容器设置了 position 属性，并且 position 的属性值为 absolute 或者 relative，那么就会依据父容器进行偏移。如
• 果其父容器没有设置 position 属性，那么偏移是以 body 为依据。注意设置 absolute 属性的元素在标准流中不占位
• 置。
• 4）Fixed：位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。不论窗口滚动与否，元素都会留在那个位置。它始终是以 body 为依据的。 注意设置 fixed 属性的元素在标准流中不占位置。
3、px，em，rem的区别？
• 答： 1）px 像素（Pixel）。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的， 是一个虚拟长度单位，是计算机系统的数字化图像长度单位，如果 px 要换算成物理长度，需要指定精度 DPI。
• 2）em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值。
• 3）rem是CSS3新增的一个相对单位（rootem，根 em），使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素。
• 4）区别：IE 无法调整那些使用 px 作为单位的字体大小，而 em 和 rem 可以缩放，rem 相对的只是 HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了 IE8 及更早版本外，所有浏览器均已支持 rem。
4、什么是BFC？
• 答： 1）定义：
• BFC(Block formatting context)直译为"块级格式化上下文”。它是一个独立的渲染区域，只有Block-level box 参与， 它规定了内部的Block-level Box 如何布局，并且与这个区域外部毫不相干。
• 布局规则：
• A. 内部的 Box 会在垂直方向，一个接一个地放置。
• B. Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box的margin 会发生重叠。
• C. 每个元素的 margin box 的左边， 与包含块 border box 的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
• D. BFC 的区域不会与 float box 重叠。
• E. BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
• F. 计算 BFC 的高度时，浮动元素也参与计算。
• 3）哪些元素会生成 BFC：
• A. 根元素
• B. float 属性不为 none
• C. position 为 absolute 或 fixed
• D. display 为 inline-block， table-cell，table-caption， flex， inline-flex F. overflow 不为visible
下列方式会创建块格式化上下文：
• 根元素()
• 浮动元素（元素的 float 不是 none）
• 绝对定位元素（元素的 position 为 absolute 或 fixed）
• 行内块元素（元素的 display 为 inline-block）
• 表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
• 表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
• 匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
• overflow 值不为 visible 的块元素
• display 值为 flow-root 的元素
• contain 值为 layout、content或 paint 的元素
• 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
• 网格元素（display为 grid 或 inline-grid 元素的直接子元素）
• 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
• column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。
•
5、表格自动换行怎么实现？
• 答：word-break：normal 使用浏览器默认的换行规则；
• break-all允许单词内换行；
• keep-all只能在半角空格或连字符处换行
• word-wrap：normal 是用浏览器默认的换行规则；break-word 在长单词或 URL 地址内部进行换行。
6、box-sizing、transition、translate分别是什么？
• 答：Box-sizing： 用来指定盒模型的大小的计算方式。主要分为boreder-box（从边框固定盒子大小）、content-box（从内容固定盒子大小）两种计算方式。
• transition： 当前元素只要有“属性”发生变化时，可以平滑的进行过渡。通过 transtion-propety 设置过渡属性；
• transtion-duration 设置过渡时间；
• trantion-timing-function 设置过渡速度；
• trantion-delay 设置过渡延时
• translate：通过移动改变元素的位置；有 x、y、z 三个属性
7、选择器优先级是怎样的？
• 答：！important>行内样式>id 选择器>类选择器>标签选择器>通配符>继承
• 权重算法：
• （0，0，0，0）==》第一个 0 对应的是 important 的个数，第二个 0 对应的是 id 选择器的个数，第三个 0 对
• 应的类选择器的个数，第四个 0 对应的是标签选择器的个数，就是当前选择器的权重。
• 比较：
• 先从第一个 0 开始比较，如果第一个 0 大，那么说明这个选择器的权重高，如果第一个相同，比较第二个，依次类推
8、Iframe的作用？
• 答：用法：
• Iframe是用来在网页中插入第三方页面，早期的页面使用 iframe 主要是用于导航栏这种很多页面都相同的部分，这样可以在切换页面的时候避免重复下载。
• 优点：便于修改，模块分离，像一些信息管理系统会用到。但现在基本上不推荐使用。除非特殊需要，一般不推荐使用。
• 缺点 :
• （1）iframe 的创建比一般的 DOM 元素慢了 1-2 个数量级
• （2）iframe 标签会阻塞页面的加载，如果页面的onload 事件不能及时触发，会让用户觉得网页加载很慢，用户体验不好.在 Safari 和 Chrome 中可以通过 js 动态设置 iframe 的 src 属性来避免阻塞.
• （3）iframe 对于 SEO 不友好，替代方案一般就是动态语言的 Incude 机制和 ajax 动态填充内容等。
9、标签上title 与 alt 属性的区别是什么?
• 答：Alt 当图片不显示时，用文字代表。Title为该属性提供信息。
10、改变元素的外边距用什么属性？改变元素的内填充用什么属性？
• 答：改变元素的外边距用 margin，改变元素的内填充用 padding。
11、在新窗口打开链接的方法是？
• 答：target：_blank。
12、合理的页面布局中常听过结构与表现分离，那么结构是什么？表现是什么？
• 答：结构是 html，表现是 css。
13、display：none；与 visibility： hidden 的区别是什么？
• 答：display：none； 使用该属性后，HTML 元素（对象）的宽度、高度等各种属性值都将“丢失”；
• visibility：hidden； 使用该属性后，HTML 元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。
14.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素?
• 行内元素：和有他元素都在一行上，高度、行高及外边距和内边距都不可改变，文字图片的宽度不可改变，只能容纳文本或者其他行内元素；其中img是行元素
块级元素：总是在新行上开始，高度、行高及外边距和内边距都可控制，可以容纳内敛元素和其他元素；
行元素转换为块级元素方式：display：block；
15.将多个元素设置为同一行?清除浮动有几种方式?
• 将多个元素设置为同一行：float，inline-block
清除浮动的方式：
• 方法一：添加新的元素 、应用 clear：both；
方法二：父级div定义 overflow: hidden；
方法三：利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。
.clear{zoom:1;}
.clear:after{content:””;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}
16.怪异盒模型box-sizing？弹性盒模型|盒布局?
• 在标准模式下的盒模型：盒子总宽度/高度=width/height+padding+border+margin
在怪异模式下的盒模型下，盒子的总宽度和高度是包含内边距padding和边框border宽度在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin;
box-sizing有两个值一个是content-box，另一个是border-box。
当设置为box-sizing:content-box时，将采用标准模式解析计算；
当设置为box-sizing:border-box时，将采用怪异模式解析计算。
• 标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin
• 图片元素垂直对齐方式
在strict mode中 ：vertical-align 属性默认取值为 baseline
在quirks mode中 ：vertical align 属性默认为 bottom，因此，在图片底部会有几像素的空间。
• < table >元素中的字体
Quirks Mode 下，对于 table 元素，字体的某些属性将不会从 body 或其他封闭元素继承到 table 中，特别是 font-size 属性。
• 内联元素的尺寸
在 Standards Mode 下，non-replaced inline 元素无法自定义大小，而在 Quirks Mode 下，定义这些元素的 width 和 height 属性，能够影响该元素显示的大小尺寸。
• 元素的百分比高度
当一个元素使用百分比高度时，在 Standards Mode 下，高度取决于内容的变化，而在 Quirks Mode 下，百分比高度则被正确应用。
• 元素溢出的处理
在 Standard Mode 下，overflow 取默认值 visible，即溢出可见，这种情况下，溢出内容不会被裁剪，呈现在元素框外。而在 Quirks Mode 下，该溢出被当做扩展 box 来对待，即元素的大小由其内容决定，溢出不会被裁剪，元素框自动调整，包含溢出内容
17.css hack？原理是啥？
CSS hack由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。 这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。
由于不同的浏览器对CSS的支持及解析结果不一样，还由于CSS中的优先级的关系。我们就可以根据这个来针对不同的浏览器来写不同的CSS。 　　
CSS Hack大致有3种表现形式，CSS类内部Hack、选择器Hack以及HTML头部引用(if IE)Hack，CSS Hack主要针对IE浏览器。

类内部Hack：比如 IE6能识别下划线"“和星号” * “，IE7能识别星号” * “，但不能识别下划线”"，而firefox两个都不能认识。

选择器Hack：比如 IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。
HTML头部引用(if IE)Hack：针对所有IE： ，针对IE6及以下版本： ，这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。 　　
书写顺序，一般是将识别能力强的浏览器的CSS写在前面。
18.简述几个css hack?
• (1) 图片间隙
在div中插入图片，图片会将div下方撑大3px。hack1：将

• 111

  222
• 1
• 2
• 3