前端html,css高频面试题-持续更新中

目录

HTML

1.如何理解HTML？

2.对WEB标准的理解？

2.1 结构层标准

2.2 表现层标准

2.3 行为层标准 

3.对W3C的认识？ 

3.1 对于结构的要求

3.2 对于css和js的要求 

4.什么是前端语义化？ 

4.1 标签是有语义的 

4.2 HTML5的语义标签 

5.HTML5新增的内容有哪些？ 

6..HTML的元素分类？

7.HTML嵌套关系？ 

 8.HTML的默认样式？

css

1.介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

 2.box-sizing属性？

3.CSS选择器有哪些？哪些属性可以继承？ 

 4.CSS3新增伪类有那些?

 5. 垂直居中div的方法？

 6.雪碧图（精灵图）统称CSS Sprites的作用？

 7.伪类和伪元素的区别？

8.圣杯布局

9. 双飞翼布局

10.清除li之间的缝隙

11.BFC是什么？如何触发BFC？

12.清除浮动的方式 

 13.em和rem的区别？

14.CSS预处理器是什么？ 常见的CSS预处理器有哪些？有什么区别？CSS预处理器的优缺点？

15.display有哪些值？说明他们的作用? 

16.position的值？ 

17. CSS3有哪些新特性？ 

 18.用纯CSS创建一个三角形的原理是什么？

 19.css3实现0.5px的细线

20.怎么让Chrome支持小于12px 的文字？

21.开发中为什么要初始化css样式 

22.style标签写在body后与body前有什么区别？ 

 23.CSS属性overflow属性定义溢出元素内容区的内容会如何处理?

24.css设置字符间距

25.持续更新中 

---

HTML

1.如何理解HTML？

1. HTML类似于一份word“文档”
2. 描述文档的“结构”
3. 有区块和大纲

2.对WEB标准的理解？

Web标准是由一系列标准组合而成。一个网页主要由三部分组成：结构层、表现层和行为层。

对应的标准也分三方面：

• 结构化标准语言主要包括XHTML和HTML以及XML，
• 表现层标准语言主要包括CSS，
• 行为标准主要包括对象模型，DOM、ECMAScript等

2.1 结构层标准

结构化标准语言，就是W3C规定的主要包括HTML和XHTML以及XML，在页面body里面我们写入的标签都是为了页面的结构。

1. 标签的书写，需要开始和结束。单便签除外；
2. 块级元素不能放在p标签里面。li内可以包含div标签。
3. 块元素里面可以放在块和内联，特殊的 p和 h1—h6里面不要放块元素，li和div可以放很多。因为这两个标签，本身就有容器的属性
4. 内联里面要放内联，不要放块。（嵌套关系）
5. 结构与表现分离
6. 命名一定要规范

2.2 表现层标准

表现标准语言主要包括CSS，通过CSS样式表，通过CSS样式可以是页面的结构标签更具美感

1. 尽可能使用外部引入的方式，达到分离的目的
2. CSS选择器，优先级
3. 代码简洁

2.3 行为层标准 

页面和用户具有一定的交互，同时页面结构或者表现发生变化，标准主要包括对象模型（如W3C DOM）、ECMAScript并要求这三部分分离。

• DOM是Document Object Model文档对象模型的缩写。

• ECMAScript是ECMA(EuropeanComputer Manufacturers Association)制定的标准脚本语言（JAVAScript）

3.对W3C的认识？ 

W3C(万维网)对web标准提出了规范化的要求，也就是在实际编程中的一些代码规范。

主要包含如下几点： 

3.1 对于结构的要求

• 1）标签字母要小写
• 2）标签要闭合
• 3）标签不允许随意嵌套

3.2 对于css和js的要求 

• 1）尽量使用外链css样式表和js脚本。使结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
• 2）样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版。
• 3）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。

4.什么是前端语义化？ 

语义化就是是让机器可以读懂内容，web页面的解析是由搜索引擎来进行搜索，机器来解析。

4.1 标签是有语义的 

h1~h6、thead、ul、ol等标签，初期的语义化标签：程序员利用HTML标签的id和class属性，进一步对HTML标签进行描述，如对页脚HTML标签添加如id="footer"或者class="footer"的属性（值）（使用有语义的对于需要声明的变量和class，id）

4.2 HTML5的语义标签 

header/footer; section（章节、页眉、页脚）/article（内容区域）; nav导航；aside 不重要的内容；em(emphasize)/strong增强; i(icon)制作图标

5.HTML5新增的内容有哪些？ 

1. 新的区块标签：section,article,nav,aside
2. 表单增强：日期、时间、搜索（修改type的类型实现）；表单验证；placeholder
3. 语义增强：header/footer; section/article; nav导航；aside 不重要的内容；em(emphasize)/strong增强; i(icon)制作图标

6..HTML的元素分类？

1. 块级元素block（方块形状，占据一整行）：div ul ol li dl dt dd h1 h2 h3 h4…p
2. 行内元素inline(一行中的某个位置)：a b span img input select strong（强调的语气）
3. inline-block(行内，有宽高属性)：selection

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea

块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素:br、meta、hr、link、input、img

7.HTML嵌套关系？ 

1. 块级元素可以包含行内元素
2. 块级元素不一定能包含块级元素(p标签不能包含div标签)
3. 行内元素“一般”不能包含块级元素（a包含div是可以的）

 8.HTML的默认样式？

1. 默认样式的意义
2. 默认样式代理的问题
3. CSS Reset 的作用

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

css

1.介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

标准盒子模型：宽度=内容的宽度（content）+ border + padding + margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

 2.box-sizing属性？

用来控制元素的盒子模型的解析模式，默认为content-box
context-box：W3C的标准盒子模型，设置元素的 height/width 属性指的是content部分的高/宽
border-box：IE传统盒子模型。设置元素的height/width属性指的是border + padding + content部分的高/宽

3.CSS选择器有哪些？哪些属性可以继承？ 

CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel=”external”]）、伪类选择器（a:hover, li:nth-child）
可继承的属性：font-size, font-family, color
不可继承的样式：border, padding, margin, width, height
优先级（就近原则）：!important > [ id > class > tag ]
!important 比内联优先级高

 4.CSS3新增伪类有那些?

p:first-of-type 选择属于其父元素的首个元素
p:last-of-type 选择属于其父元素的最后元素
p:only-of-type 选择属于其父元素唯一的元素
p:only-child 选择属于其父元素的唯一子元素
p:nth-child(2) 选择属于其父元素的第二个子元素
:enabled :disabled 表单控件的禁用状态。
:checked 单选框或复选框被选中。

 5. 垂直居中div的方法？

第一种

        div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】，

        兼容性：,IE7及之前版本不支持

div{
      width: 200px;
      height: 200px;
      background: green;
      position:absolute;
      left:0;
      top: 0;
      bottom: 0;
      right: 0;
      margin: auto;
    }

第二种

        div绝对定位水平垂直居中【margin 负间距】     

        这或许是当前最流行的使用方法。

div{
        width:200px;
        height: 200px;
        background:green;
        position: absolute;
        left:50%;
        top:50%;
        margin-left:-100px;
        margin-top:-100px;
    }

第三种

        div绝对定位水平垂直居中【Transforms 变形】

        兼容性：IE8不支持；

div{
        width: 200px;
        height: 200px;
        background: green;
        position:absolute;
        left:50%;    /* 定位父级的50% */
        top:50%;
        transform: translate(-50%,-50%); /*自己的50% */
    }

第四种

        css不定宽高水平垂直居中

  
  
  
  


  

    
zzt
  

第五种

        将父盒子设置为table-cell元素，可以使用text-align:center和vertical-align:middle实现水平、垂直居中。比较完美的解决方案是利用三层结构模拟父子结构

  
  
  
  



  

    
zzt
  

第六种

        对子盒子实现绝对定位，利用calc计算位置

        父元素设置：position: relative;

        子元素设置：position: absolute;
                              left:calc((500px - 200px)/2);
                              top:calc((120px - 50px)/2);

  
  
  
  


  

    
zzt
  

 6.雪碧图（精灵图）统称CSS Sprites的作用？

1.将一个页面涉及到的所有图片都包含到一张大图中去。
2.利用CSS的 background-image，background- repeat，background-position 的组合进行背景定位。
3.减少网页的http请求，提高页面的性能；
4.CSS Sprites能减少图片的字节。

 7.伪类和伪元素的区别？

• 伪元素是真的有元素
• 前者是单冒号，后者是双冒号

  

    
111
    
222
    
333
    
444
    
555
  
  

    
h1文本
    
p文本1
    
p文本2
    
p文本3
    
p文本4
  

  

    
 css1 
    
 css2 
    
 css3 
    
伪元素
  

8.圣杯布局

  
  
  



  

    
main
    
left
    
right
  

9. 双飞翼布局

  
    
    
    
    
    
  
  
    
中心区
    
left
    
right
  

10.清除li之间的缝隙

代码如下

    
111
    
222
    
333
    
444
    
555

解决办法：

1. 直接删除换行符（IE1像素残留）
2. 设置父元素的font-size为0，在子元素重新设置字体大小（低版本safari 兼容性）
3. 父元素 设置font-size：0 ；letter-spacing：-3px ，子元素重新设置font-size（推荐方案）

11.BFC是什么？如何触发BFC？

BFC是什么：

BFC（块级格式上下文）。它是指一个独立的块级渲染区域，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关

如何触发BFC：

• float的值不为none
• overflow的值不为visible
• display的值为inline-block、table-cell、table-caption
• position的值为absolute或fixed

12.清除浮动的方式 

清除浮动的方式https://blog.csdn.net/m0_63873004/article/details/123169197?spm=1001.2014.3001.5501

 13.em和rem的区别？

1. rem 单位翻译为像素值是由 html 元素的字体大小决定的。 此字体大小会被浏览器中字体大小的设置影响，除非显式重写一个具体单位。
2. em 单位转为像素值，取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小，除非显式重写与一个具体单位

14.CSS预处理器是什么？ 常见的CSS预处理器有哪些？有什么区别？CSS预处理器的优缺点？

1.CSS预处理器是什么？

        用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处

2.常见的CSS预处理器有哪些？

• Sass
• Less

3.scss和less的区别?

1. 编译环境不一样
2. 变量符不一样，Less是@，而Scss是$，而且变量的作用域也不一样。
3. 输出设置，Less没有输出设置，Sass提供4种输出选项：
4. Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。
5. 引用外部CSS文件
6. 工具库不同

4.CSS预处理器的优缺点？

• 优点： 提高代码的复用率和可维护性
• 缺点： 引入了编译的过程，有一定的学习成本

15.display有哪些值？说明他们的作用? 

inline (默认)——内联

none——隐藏

block——块显示

table——表格显示

list——item项目列表

inline-block——行内块

16.position的值？ 

static（默认）：按照正常文档流进行排列；
relative（相对定位）：不脱离文档流，参考自身静态位置通过 top, bottom, left, right 定位；
absolute(绝对定位)：参考距其最近一个不为static的父级元素通过top, bottom, left, right 定位；
fixed(固定定位)：所固定的参照对像是可视窗口。

17. CSS3有哪些新特性？ 

1、颜色：新增RGBA、HSLA模式
2、文字阴影：（text-shadow）
3、边框：圆角（border-radius）边框阴影：box-shadow
4、盒子模型：box-sizing
5、背景：background-size,background-origin background-clip(削弱)
6、渐变：linear-gradient(线性渐变):
eg: background-image: linear-gradient(100deg, #237b9f, #f2febd);
radial-gradient (径向渐变)
7、过渡：transition可实现动画
8、自定义动画： animate@keyfrom
9、媒体查询：多栏布局@media screen and (width:800px)
10、border-image
11、2D转换:transform:translate(x,y) rotate(x,y)旋转 skew(x,y)倾斜 scale(x,y)缩放
12、3D转换
13、字体图标：Font-Face
14、弹性布局：flex

 18.用纯CSS创建一个三角形的原理是什么？

四个三角形拼合成的矩形呈现在我们眼前,那如如果我们只想要一个三角形, 我们是不是可以设想将其他三个设为不可见;

.box{
  width:0px;
  height:0px;
  border: 50px solid;
  border-color:transparent transparent transparent #ef4848;
}

 19.css3实现0.5px的细线

20.怎么让Chrome支持小于12px 的文字？

p{font-size:10px;-webkit-transform:scale(0.8);} //0.8是缩放比例

21.开发中为什么要初始化css样式 

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

22.style标签写在body后与body前有什么区别？ 

页面加载自上而下 当然是先加载样式。
写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）

 23.CSS属性overflow属性定义溢出元素内容区的内容会如何处理?

参数是scroll时候，必会出现滚动条。
参数是auto时候，子元素内容大于父元素时出现滚动条。
参数是visible时候，溢出的内容出现在父元素之外。
参数是hidden时候，溢出隐藏。

24.css设置字符间距

在 CSS 中，可以使用 letter-spacing 属性来设置字符间距。该属性控制每个字符之间的距离，可以设置负值来让字符更接近，也可以设置正值来让字符之间的距离更远。

letter-spacing: 0.1em;

25.持续更新中