HTML问题
src 和 href 的区别
src :通常用于 img、video、audio、script 元素，通过 src 属性，可以指定外部资源的来源地址。
href :通常用于 a、link 元素，通过 href 属性，可以标识文档中引用的其他超文本。
说说对 html 语义化的理解
- 单看元素名字都知道它代表的含义，具有可读性，这个在国外很重视。
- 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息。
- 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页。
label 的作用是什么？是怎么用的？
官方解释：label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
通俗解释：点击文字可以选中，单选或多选按钮
用：包裹你想要控制的控件
每个 HTML 文件头里都有个很重要的东西，Doctype，知道这是干什么的么？
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前，主要作用是告诉浏览器按照何种规范解析网页。
html 常见兼容性问题？
1、PNG24 位的图片在 IE6 浏览器上出现背景
解决方案：做成 PNG8，也可以引用一段脚本处理。
2、浏览器默认的 margin 和 padding 不同
解决方案：使用 CSS 重置文件。
3、上下 margin 重合问题
解决方法：养成良好的代码编写习惯，同时采用 margin-top 或者同时采用 margin-bottom。
HTML与XHTML二者的区别
1、XHTML中所有的标记都必须有一个相应的结束标签
2、XHTML所有标签的元素和属性的名字都必须使用小写
3、所有的属性都必须用引号括起来
HTML5 有哪些新特性、移除了那些元素？
1、绘画 canvas，比如echart
2、媒体查询，⽤于媒介回放的 video 和 audio 元素
3、本地离线存储 localStorage ⻓期存储数据，浏览器关闭后数据不丢失，sessionStorage 的数据在浏览器关闭后⾃动删除
4、语言化元素：footer、 header、nav、section
移除的元素：
纯表现的元素： basefont、big、center、font、s、strike、tt、u
对可⽤性产⽣负⾯影响的元素： frame、frameset、noframes
iframe 的作用
iframe 也称作嵌入式框架，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入在现有的网页中。
优点
重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)
方便制作导航栏
缺点
会产生很多页面，不容易管理
浏览器的后退按钮无效
无法被一些搜索引擎索引到
由于上面诸多缺点，因此不符合标准网页设计的理念，已经被标准网页设计抛弃
目前框架的所有优点完全可以使用 Ajax 实现，因此已经没有必要使用 iframe 框架了。
常见的浏览器内核：
Trident(MSHTML)：IE MaxThon TT The World 360搜狗浏览器
Geckos：Netscape6及以上版本FireFox Mozilla Suite/SeaMonkey
Presto：Opera及以上（Opera内核原为 Presto，现为Blink）
Webkit：Safari Chrome
CSS问题
如何实现一个盒子水平垂直居中?
方法一：利用定位（常用方法,推荐）
子绝父相，子元素：top和left设置50%，margin-top、margin-left设置-50px（或者用transform:translate(-50%, -50%)）
方法二：利用 margin:auto;
子绝父相，子元素margin:auto，top、left、right、bottom设置为0
方法三：利用 display：flex;设置垂直水平都居中
display: flex;
justify-content: center;
align-items: center;
介绍下 BFC 及其应用
BFC：块级格式上下文，指的是一个独立的布局环境，BFC 内部的元素布局与外部互不影响，一个元素只能存在于一个 BFC 中
触发 BFC 的方式有很多，常见的有：
设置浮动；overflow 设置为 auto、scroll、hidden；positon 设置为 absolute、fixed
常见的 BFC 应用有：
解决浮动元素令父元素高度坍塌的问题
解决非浮动元素被浮动元素覆盖问题
解决外边距垂直方向重合的问题
分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景。
display:none: 会让元素完全从渲染树中消失，渲染的时候不占据任何空间, 不能点击，
visibility: hidden:不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，不能点击
opacity: 0: 不会让元素从渲染树消失，渲染元素继续占据空间，只是内容不可见，可以点击。
display:none : 修改元素会造成文档回流，性能消耗较大
visibility:hidden: 修改元素只会造成本元素的重绘,性能消耗较少
opacity: 0 ： 修改元素会造成重绘，性能消耗较少
总结
display: none (不占空间，不能点击)（场景，显示出原来这里不存在的结构）
visibility: hidden（占据空间，不能点击）（场景：显示不会导致页面结构发生变动，不会撑开）
opacity: 0（占据空间，可以点击）（场景：可以跟transition搭配）
png8、png24、png32的区别
PNG 8：PNG 8中的8，其实指的是8bits，相当于用2的8次方大小来存储一张图片的颜色种类，PNG 8能存储256种颜色，一张图片如果颜色种类很少，将它设置成PNG 8得图片类型是非常适合的。
PNG 24：PNG 24中的24，相当于3乘以8 等于 24，就是用三个8bits分别去表示 R（红）、G（绿）、B（蓝），这样PNG 24就能比PNG 8表示色彩更丰富的图片。但是所占用的空间相对就更大了。
PNG 32：PNG 32中的32，相当于PNG 24 加上 8bits的透明颜色通道，就相当于R、G、B、A。也就是说PNG 32能表示跟PNG 24一样多的色彩，并且还支持256种透明的颜色，能表示更加丰富的图片颜色类型。
CSS 实现一个三角形
可以利用 border 属性
先设置border,再设置border-方向-color：transparent（透明）
实现一个自适应的正方形
方法1：利用 CSS3 的 vw 单位
方法2：利用 margin 或者 padding 的百分比计算是参照父元素的 width 属性
如何实现三栏布局
第一种：flex
左右设置固定宽度，中间flex:1;
第二种：position + margin
左右设置absolute,中间margin
第三种：float + margin
左边左浮动，右边有浮动，中间margin
清除浮动的方法
1、clear 清除浮动（添加空div法）在浮动元素下方添加空div，并给该元素写css样式： {clear:both;height:0;overflow:hidden;}
2、给浮动元素父级设置高度
3、父级同时浮动（需要给父级同级元素添加浮动）
4、父级设置成inline-block，其margin: 0 auto居中方式失效
5、给父级添加overflow:hidden 清除浮动方法
6、万能清除法 after 伪类清浮动（现在主流方法，推荐使用）
如何优化图片
1、对于很多装饰类图片，尽量不用图片，因为这类修饰图片完全可以用 CSS 去代替。
2、小图使用 base64 格式
3、将多个图标文件整合到一张图片中（雪碧图）
4、小图使用 PNG、照片使用 JPEG
CSS3 新增了那些东西
2D/3D转换、过渡与动画、多列布局、媒体查询、盒子模型属性
bootstrap 响应式的原理是什么
bootstrap 使用的是栅格布局。栅格布局的实现原理，是通过定义容器大小，平分 12 份，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。
CSS 单位中 px、em 和 rem 的区别？
px：绝对单位，是一个虚拟长度单位，是计算机系统的数字化图像长度单位。
em：相对长度单位，浏览器默认渲染文字大小是 16px
rem：是 CSS3 新增的一个相对单位
div 之间的间隙是怎么产生的，应该怎么消除？
原因：浏览器解析的时候，会把回车换行符解析成一定的间隙，间隙的大小跟默认的字体大小设置有关。
解决：其父元素加上 font-size:0 的属性，但是字体需要额外处理。
处理页面兼容性问题
统一标准模式
利用 CSS 重置技术初始化默认样式
针对不同浏览器采用不同的解决方案
使用 CSS Hack 技术
谈谈你对响应式的理解
响应式布局:即页面的设计与开发应当根据用户行为，以及设备环境进行相应的响应与调整。能让一个网站兼容多个终端，展示出不同的结构样式，而不是为每个终端做一个特定的版本。
具体的实践方式可由多方面组成，包括使用 flex 布局、使用 CSS3 媒介查询 media query 实现。其特点在于灵活性较强，但缺点在于兼容性较差、工作量巨大、代码冗余、网页加载时间过长。
CSS 优化、提高性能的方法有哪些？
最好使用表示语义的名字。一个好的类名应该是描述他是什么而不是像什么
避免 !important，可以选择其他选择器
使用紧凑的语法
避免不必要的命名空间
尽可能的精简规则，你可以合并不同类里的重复规则
扫一扫
4140
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
