1.什么是HTML?
超文本标记语言,是一种用于创建网页的标准语言
2.HTML元素和标签有什么区别?
元素代表某种结构或语义,通常由开始标签,内容和结束标签组成
标签就是
HTML
文档的根,用来标记HTML
元素的,<heade>,<div>等被尖括号包起来的对象,绝大部分是成对出现的
3.块级元素和内联元素有什么区别?
块级元素:占据其父元素(容器)的整个空间,创建了一个“块”。每个块状元素都从新的一行开始,并且其后的元素也另起一行(独占一行);元素的高度、宽度、行高以及顶和底边距都可设置;元素宽度在不设置的情况下,占它本身父容器的100%(和父元素宽度一致)
内联元素:内联元素被绘制在它们被定义的地方,并且只占用绝对需要的空间,和其他元素在同一行上,不独占一行;元素的高度、宽度及顶部底部边距不可设置
4.对语义化的理解?
- 用正确的标签做正确的事情。
- html 语义化让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;即使在没有样式 CSS 情况下也以一种文档格式显示,并且是容易阅读的;
- 搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重,利于 SEO;
- 使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。
5.列出常用的列表标签
- 有序列表:有序列表以编号格式显示元素,由
<ol>
标签表示- 无序列表:无序列表以项目符号格式显示元素,它由
<ul>
标签表示。- 定义列表:定义列表以定义形式显示元素,就像在字典中一样,如
<dl>
、<dt>
和<dd>
标签用于定义描述列表。
6.解释HTML标签语义
<header>
:用于定义文档的标题。<nav>
:定义了导航链接<section>
: 用于定义文档中的一个单元<article>
:用于定义独立的、自包含的文章<aside>
:用于定义内容之外的内容<footer>
:用于定义文档的页脚
7.div和span的区别
span
和div
的区别在于span
元素是内联的,通常用于一行内的一小块,例如段落内。而div
是块级,相当于在其前后有一个换行符,用于对较大的代码块进行分组。
8.<!DOCTYPE html>
标签是否为 HTML
标签?
不是,
<!DOCTYPE>
声明叫做文件类型定义(DTD),声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。
9.HTML
、XML
和 XHTML
有什么区别?
HTML
:超文本标记语言(HyperText Markup Language)XML
:可扩展标记语言(Extensible Markup Language)XHTML
:可扩展超文本标记语言(Extensible Hypertext Markup Language)
HTML
和XHTML
之间的区别是:
HTML
是一种标准通用标记语言的应用,XML是一种可扩展标记语言的应用程序。HTML
标签不区分大小写XHTML所有标签都必须小写。XHTML
所有属性都必须使用双引号HTML
是关于显示信息,而XHTML
是关于描述信息。
10.iframe 框架的优缺点
优点:
iframe 能够原封不动的把嵌入的网页展现出来。
如果有多个网页引用 iframe,那么你只需要修改 iframe 的内容,就可以实现调用的每一个页面内容的更改,方便快捷。
网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用 iframe 来嵌套,可以增加代码的可重用。
如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由 iframe 来解决缺点:
框架结构中出现各种滚动条
iframe 会阻塞主页面的 Onload 事件
搜索引擎的检索程序无法解读这种页面,不利于 SEO
iframe 和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。
11.position有哪些值?
position
属性用于指定一个元素在文档中的定位方式
static
: 默认值,没有定位,指定元素使用正常的布局行为,即元素在文档常规流中当前的布局位置,此属性下top
、right
、bottom
、left
和z-index
属性无效。relative
相对定位:元素先放置在未添加定位时的位置,在不改变页面布局的前提下调整元素位置(此时会在此元素未添加定位时所在位置留下空白)。position:relative
对table-row
、table-column
、table-cell
、table-caption
元素无效。absolute
绝对定位:生成绝对定位的元素,元素会被移出正常文档流,并不为元素预留空间,通过指定元素相对于最近的非static
定位祖先元素的偏移,来确定元素位置。绝对定位的元素可以设置外边距(margins
),且不会与其他边距合并。fixed
固定定位:生成绝对定位的元素,元素会被移出正常文档流,并不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置,元素的位置在屏幕滚动时不会改变sticky
元素根据正常文档流进行定位,相对它的最近滚动祖先和最近块级祖先。
12.display:none
和visibility:hidden
的区别
都能把页面上的元素隐藏起来,两者的区别如下:
display:none
:被隐藏的对象不会占用任何物理空间,不会影响其他元素的布局visible:hidden
:使对象在网页上不可见,但是会在网页上占用物理空间,通俗来说就是看不见但摸得到。- 属性值改变后是否重新渲染:
visibility:hidden
不渲染;display:none
会重新渲染。
13.回流和重绘
回流,当渲染树中部分或全部元素的尺寸、结构、或某些属性发生改变时,浏览器重新渲染部分或全部文档的过程。
重绘,当页面中元素样式的改变并不影响它在文档流中的位置时(例如:
color
、background-color
、visibility
等),浏览器会将新样式赋值给元素并重新绘制它的过程
14.BFC
什么是 BFC
BFC(Block Formatting Context)格式化上下文,是 Web 页面中盒模型布局的 CSS 渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。
形成 BFC 的条件
浮动元素,float 除 none 以外的值
定位元素,position(absolute,fixed)
display 为以下其中之一的值 inline-block,table-cell,table-caption
overflow 除了 visible 以外的值(hidden,auto,scroll)
BFC 的特性
内部的 Box 会在垂直方向上一个接一个的放置。
垂直方向上的距离由 margin 决定
bfc 的区域不会与 float 的元素区域重叠。
计算 bfc 的高度时,浮动元素也参与计算
bfc 就是页面上的一个独立容器,容器里面的子元素不会影响外面元素。
15.居中问题
水平居中
inline元素:text-align:centerblock元素:margin:auto
absolute元素:left:50%+margin-left负值
垂直居中
inline元素:line-height的值等于height值
absolute元素:top:50%+margin-top负值
absolute元素:transform(-50%,-50%)
absolute元素:top,left,bottom,right=0+margin:auto
16.Label的作用是什么?是怎么用的?
label 标签来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。
两种用法:
一种是id绑定:
<label for="name">number</label> <input type="text" name="name" id="name">
一种是嵌套::
<label>date:<input type="text" name="b"></label>
17.严格模式与混杂模式
严格模式:以浏览器支持的最高标准运行
混杂模式:页面以宽松向下兼容的方式显示,模拟老式浏览器的行为
18.对于 WEB 标准以及 W3C 的理解与认识问题
web 标准简单来说可以分为结构、表现和行为。
其中结构主要是有 HTML 标签组成,表现即指 css 样式表,行为是js
1.对于结构要求:(标签规范可以提高搜索引擎对页面的抓取效率,对 SEO 很有帮助)
1)标签字母要小写
2)标签要闭合
3)标签不允许随意嵌套
2.对于 css 和 js 来说
1)尽量使用外链 css 样式表和 js 脚本。是结构、表现和行为分为三块,符合规范。同时提高页面渲染速度,提高用户的体验。
2)样式尽量少用行间样式表,使结构与表现分离,标签的 id 和 class 等属性命名要做到见文知义,标签越少,加载越快,用户体验提高,代码维护简单,便于改版
3)不需要变动页面内容,便可提供打印版本而不需要复制内容,提高网站易用性。
19.列举 IE 与其他浏览器不一样的特性?
1. IE 的排版引擎是 Trident (又称为 MSHTML)
2. Trident 内核曾经几乎与 W3C 标准脱节(2005 年)
3. Trident 内核的大量 Bug 等安全性问题没有得到及时解决
4. JS 方面,有很多独立的方法,例如绑定事件的 attachEvent、创建事件的 createEventObject 等
5. CSS 方面,也有自己独有的处理方式,例如设置透明,低版本 IE 中使用滤镜的方式
20..div+css 的布局较 table 布局有什么优点
分离 方便改版 快清晰简洁 seo
1.改版的时候更方便 只要改 css 文件。
2.页面加载速度更快、结构化清晰、页面显示简洁。
3.表现与结构相分离。
4.易于优化(seo)搜索引擎更友好,排名更容易靠前。
21.渐进增强和优雅降级之间的不同
渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。(一开始保证最基本的功能,再改进和追加功能)
优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
(一开始就构建完整的功能,再针对低版本浏览器进行兼容。)区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。
22.html 常见兼容性问题
1.双边距 BUG float 引起的,使用 display解决
2.3 像素问题 使用 float 引起的,使用 dislpay:inline -3px
3.超链接 hover 点击后失效,使用正确的书写顺序 link visited hover active
4.Ie z-index 问题,给父级添加 position:relative
5.Png 透明 ,解决办法: 使用 js 代码
6.Min-height 最小高度 , !Important 解决
7.select 在 ie6 下遮盖,使用 iframe 嵌套
8.为什么没有办法定义 1px 左右的宽度容器(IE6 默认的行高造成的,使用 over:hidden,zoom:0.08 line-height:1px)
9.IE5-8 不支持 opacity10.IE6 不支持 PNG 透明背景,使用 gif 图片或者filter滤镜
23.html5 有哪些新特性、移除了那些元素?
新特性:
- 拖拽释放(Drag and drop) API
- 语义化更好的内容标签(header,nav,footer,aside,article,section)
- 音频、视频 API(audio,video)
- 画布(Canvas) API
- 地理(Geolocation) API
- 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
- sessionStorage 的数据在浏览器关闭后自动删除
- 表单控件,calendar、date、time、email、url、search
- 新的技术 webworker, websocket, Geolocation
移除的元素:
纯表现的元素:basefont,big,center,font, s,strike,tt,u;
对可用性产生负面影响的元素:frame,frameset,noframes;
24.如何垂直居中一个元素?
1.绝对定位居中
.content { width: 200px; height: 200px; background-color: #6699ff; position: absolute; /*父元素需要相对定位*/ top: 50%; left: 50%; transform: translate(-50%, -50%); /*在水平和垂直方向上各偏移-50%*/ }
2.flex 布局居中
body { display: flex; /*设置外层盒子display为flex*/ align-items: center; /*设置内层盒子的垂直居中*/ justify-content: center; /*设置内层盒子的水平居中*/ .content { width: 200px; height: 200px; background-color: #6699ff; } }
3.垂直居中一个 img
.content { //img的容器设置如下 display: table-cell; text-align: center; vertical-align: middle; }
25.用纯 CSS 创建一个三角形的原理是什么?
span { width: 0; height: 0; border-top: 40px solid transparent; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 40px solid #ff0000; }
26.Sass、LESS 是什么?
他们是 CSS 预处理器。他是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。
例如 Less 是一种动态样式语言. 将 CSS 赋予了动态语言的特性,如变量,继承,运算, 函数. LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox),也可一在服务端运行 (借助 Node.js)
27.li 与 li 之间有看不见的空白间隔是什么原因引起
浏览器的默认行为是把 inline 元素间的空白字符(空格换行 tab)渲染成一个空格,也就是我们上面的代码换行后会产生换行字符,而它会变成一个空格,当然空格就占用一个字符的宽度
解决方案:将‹ul›内的字符尺寸直接设为 0
ul { font-size: 0px; }
28.css3 有哪些新特性
- 选择器
- 多背景图
- 文字阴影
- 圆角
- 盒阴影
- 盒子大小
- 媒体查询
- CSS3 动画
- animation
- 属性渐变效果
- CSS3 弹性盒子模型
- CSS3 过渡
- CSS3 变换
29.CSS 性能优化
内联首屏关键 CSS(Critical CSS)
内联 CSS 能够使浏览器开始页面渲染的时间提前,只将渲染首屏内容所需的关键 CSS 内联到 HTML 中
- 异步加载
- CSS 文件压缩
- 去除无用 CSS
30.文本超出部分显示省略号
单行:
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
多行:
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; // 最多显示几行 overflow: hidden;
31.过渡与动画的区别是什么
transition
可以在一定的时间内实现元素的状态过渡为最终状态,用于模拟以一种过渡动画效果,但是功能有限,只能用于制作简单的动画效果而动画属性
animation
可以制作类似 Flash 动画,通过关键帧控制动画的每一步,控制更为精确,从而可以制作更为复杂的动画。
32.基本数据类型
string number undefined boolean null
33.复杂数据类型
object array function
34.html5的自定义属性,定义和使用
通过data-* 来设置我们需要的自定义属性,进行数据存放
之后可以通过js脚本获取/设置自定义属性,也可以使用css属性选择器进行样式设置
35.介绍下css盒子模型
css盒子模型分为标准盒子模型,ie盒子模型
标准盒子模型:width和height指的是内容区域的宽度和高度,增加内边距,边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸
IE盒子模型:width和height指的是内容区域+border+padding的宽度和高度
36.定位的relative和absolute的区别
relative是相对定位,相对于自身的位置进行定位
absolute是绝对定位,选取其最近的父级进行定位,当腹肌的position为static时,相对于body的坐标原点定位
37.介绍下浮动定位,以及如何清除浮动
可以使元素脱离文档流
开启BFC使用overflow:hidden,使用clear清除浮动
38.flex布局的align-content,align-items的区别?
align-content是多跟轴线对齐方式
align-items 定义了项目在交叉轴上如何对齐
39.flex-grow和flex-shrink的默认值
flex-shrink:定义了项目的缩小比例,默认值为1,即如果空间不足,该项目将缩小
flex-grow:定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大
40.image标签上title属性与alt属性的区别是什么?
alt属性是图片不能加载或显示失败后的提示文本
title属性可以实现鼠标悬停提示效果
41.请写出至少5个HTML5新增的标签,并说明其语义和应用场景?
<header>:主要用于定义内容的介绍展示区域,描述了文档的头部区域,比如定义文章的头;
<nav>:定义导航链接的部分;
<section>:定义了文档中的节,比如章节、页眉、页脚或文档中的其他部分;
<article>:定义独立的内容;
<aside>:定义页面主区域之外的内容,比如侧边栏;
<figcaption>:定义<figure>元素的标题,一般被放置在<figure>元素内的第一个或最后一个位置处;
<figure>:定义独立的流内容,比如图形、图标、照片、代码等;
<footer>:定义文档的底部区域,描述文档的页脚,比如作者、著作权信息、联系方式等;
42.请说说你对标签语义化的理解?
- 一个语义元素能够清楚的描述意义给浏览器和开发者,即使在丢掉样式的时候,也能让页面呈现出清晰的解构
- 有利于SEO优化,让页面和搜索引擎简历良好的沟通
- 方便设备解析,并以具有意义的方式来渲染页面
- 便于团队开发和维护,语义化更具有可读性,减少差异化
43.渐进增强和优雅降级之间的不同
渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果,交互等改进和追加功能,达到更好的用户体验
优雅降级:一开始就构建完整的功能,然后在针对低版本浏览器进行兼容
区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的能够起作用的版本开始,并不断扩充
44.请阐述table有哪些缺点?
- 嵌套层级太深,会导致搜索引擎读取困难,大大增加代码量
- 灵活性差,可读性差,代码臃肿,不方便修改样式
- 不够语义化
45.简述一下src和href的区别?
src用于替换当前元素,href用于在当前文档和引用资源之间确立联系
src指向外部资源的位置,指向的内容会嵌入到文档中当前标签所在的位置
href指向网络资源所在的位置,建立和当前元素之间的链接
46.谈谈你对css布局的理解
常见的布局方式:固定布局,流式布局,弹性布局,浮动布局,定位布局,margin和padding
47.请举例几个清除浮动的方法
- 使用clear属性
- 通过设置父元素的样式,实现清除浮动,例如:overflow:hidden,display:table
- 使用:after伪类元素
48.请举例几种隐藏元素的方法
visibility:hidden 这个属性只是简单的隐藏某个元素,但是元素占用的空间仍然存在
opacity:0,是css3的属性,设置元素为完全透明
display:none,设置元素为不可见,不会占用文档的空间
hidden属性,该属性是HTML5中新增的属性,效果和display相同
49.如何让一段文本中的所有英文单词的首字母大写
text-transform:uppercase(全大写)
text-transform:lowercase(全小写)
text-transform:capitalize(首字母大写)
50.简述css样式表的继承
会被继承下去的属性有:font-family,font-size,font-style,font-variant,font-weight,font,letter-spacing,line-height,color
51.简述css的选择器
- 元素选择器
- id选择器
- class选择器
- 后代选择器
- 子元素选择器
- 相邻兄弟选择器
- 通用兄弟选择器
- 群组选择器
- 属性选择器
- 伪类选择器
52.简述CSS的权重规则
行内样式>ID>属性选择器/class类/伪类选择器>元素名/伪对象选择器
53.在css样式中使用px,em,各有什么优势,在表现上有什么区别?
px是相对长度单位,相对于显示器屏幕分辨率而言的
em是相对长度单位,相对于当前对象内文本的字体尺寸
px定义的字体,无法用浏览器字体放大功能,em的值并不是固定,会继承父级元素的字体大小
54.css中link和@import的区别是什么?
- link属于HTML标签,而@import是css提供的,只能加载css
- 页面加载时候,link会同时加载,@import引用的css会等到页面被加载完在加载
- link方式的样式权重高于@import的权重
- 使用javaScript控制dom改变样式,只能使用link方式,因为@impoer只有css能使用
55.position的absolute与fixed共同点与不同点?
相同:
- 改变行内元素的呈现方式,display被设置为block
- 让元素脱离普通流,不占据空间
- 默认会覆盖到非定位元素上
区别:
- absolute的根元素是可以设置的,而fixed的根元素固定为浏览器窗口
- 当你滚动网页,fixed元素与浏览器窗口之间的距离是不变的
56.position的值,relative 和 absolute 分别是相对于谁进行定位的?
absolute:生成绝对定位的元素,相对于static定位以外的第一个祖先元素进行定位
fixed:生成绝对定位的元素,相对于浏览器窗口进行定位
relative:生成相对定位的元素,相对于其在普通流中的位置进行定位
static:默认值,没有定位,元素出现在正常的流中
57.CSS3有哪些新特性?
新增特性有:圆角,阴影,对文字加特性,线性渐变,变形
增加更多的css选择器,媒体查询,多栏布局,多背景rgba
css3动画,弹性盒子
58.为什么要初始化css样式?
因为浏览器的兼容问题,不同的浏览器对有些标签的默认值是不同的,如果没有初始化CSS,往往会出现浏览器直接的页面显示差异
59.解释下css sprites原理,及优缺点?
优点:
- 减少网页的http请求
- 减少图片的字节
- 解决网页设计师在图片命名上的困扰,只需要对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名
- 更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变了
缺点:
- 在宽屏,高分辨率的屏幕下的自适应页面,如果背景图不够宽,很容易出现背景断裂
- CSS sprites 在开发的时候,需要通过Photoshop或其他工具测量计算每一个背景单元的精确位置
- 在维护的时候比较麻烦,如果页面背景有少许改动,一般就要修改这张合并的图片
60.解释一下浮动及其工作原理?
浮动元素脱离文档流,不占据空间
浮动元素碰到包含它的边框或者浮动元素的边框才停留
61.line-height 三种赋值方式有何区别?(带单位、纯数字、百分比)
带单位:px不用计算,em则会使其父元素font-size值作为参考来计算自己的高度
纯数字:把比例传递给后代,例如父元素行高1.5,子元素字体18px,则子元素行高为1.5*18
百分比:将计算的值传递给后代
62.经常遇到的浏览器兼容性有哪些?如何解决
- 浏览器默认的 margin 和 padding 不同
- IE6双边距bug
- 在IE6、IE7中元素高度超出自己设置高度,原因是IE8以前的浏览器中会给元素设置默认的行高的高度导致的
- min-height 在IE6下不起作用
- 透明性IE用filter.Alpha(opcity=60),而其他主浏览器用opacity:0.6
- input边框问题,去掉input边框一般用 border:none 就可以了,由于IE6在解析input样式时的bug(优先级问题),在IE6下无效
63.有哪些方式可以对一个DOM设置它的CSS样式?
- 外部样式表,使用
<link>
标签引入一个外部CSS样式- 内部样式表,将CSS代码放在
<style>
标签内部- 内联样式,将CSS样式直接定义在HTML元素内部
64.rgba() 和 opacity 的透明效果有什么不同?
- opacity 作用于元素,以及元素内的所有内容的透明度,rgba()只作用于元素的颜色或其背景色
- 设置rgba透明的元素的子元素不会继承透明效果
65.CSS属性content有什么作用?有什么应用?
css的content属性专门应用在 after/before 伪元素上,用于插入生成内容,可以配合自定义字体显示特殊符号。
66.前端需要注意哪些 SEO
- 重要内容不要用 js 输出:爬虫不会执行 js 获取内容
- 少用 iframe:搜索引擎不会抓取 iframe 中的内容
- 非装饰性图片必须加 alt
- 提高网站速度:网站速度是搜索引擎排序的一个重要指标
- 语义化的 HTML 代码,符合 W3C 规范:语义化代码让搜索引擎容易理解网页
- 重要内容 HTML 代码放在最前:搜索引擎抓取 HTML 顺序是从上到下
67.css性能优化
异步加载,去除无用css,css文件压缩
68.对于你使用过的 CSS 预处理,说说喜欢和不喜欢
喜欢:
- 提高 CSS 可维护性。
- 易于编写嵌套选择器。
- 引入变量,增添主题功能。可以在不同的项目中共享主题文件。
- 通过混合(Mixins)生成重复的 CSS。
- Less 用 JavaScript 实现,与 NodeJS 高度结合。
不喜欢:
- 我通过node-sass使用 Sass,它用 C ++ 编写的 LibSass 绑定。在 Node 版本切换时,我必须经常重新编译。
- Less 中,变量名称以@作为前缀,容易与 CSS 关键字混淆,如@media、@import和@font-face。
69.过度与动画的区别?
transition
可以在一定的时间内实现元素的状态过渡为最终状态,用于模拟以一种过渡动画效果,但是功能有限,只能用于制作简单的动画效果而动画属性
animation
可以制作类似 Flash 动画,通过关键帧控制动画的每一步,控制更为精确,从而可以制作更为复杂的动画。