| 失效链接处理 |
|
2021年前端面试题汇总 PDF 下载
本站整理下载：
相关截图：
主要内容：
一，html与css
1，页面导入样式，使用link与@import有什么区别？
(1)从属关系：link是html标签，@import是css提供的
(2)加载差异：页面加载时，link会同时加载，而@import引入的css会在页面加载完成后加载
(3)兼容性，@import不兼容ie5以下浏览器
(4)Link可以通过js操作dom插入link标签改变样式，@import不能
2，描述块级元素与行内元素的区别？行内元素与块级元素有哪些？Img是什么元素？如何制定元素以块级元素展示
(1)区别：
①行内元素会在一条直线上排列，水平方向排列；块级元素各占据一行，垂直方向排列；
②块级元素可以包含行内元素和块级元素，行内元素不能包含块级元素，只能包含文字或其它行内元素
③行内元素设置width，height无效，margin上下无效，padding上下无效
(2)列举
①行内元素：span,a,em,strong,i,input,select
②块级元素：div，ul，ol，li，h1-6，p
(3)img和input属于行内替换元素，height/width/padding/margin均可用。效果等同于块级元素
(4)Display:block
3，H5有哪些新特性？
(1)语义化标签：header,footer,section,nav,aside,article
(2)增强型表单：imput新增了多个type
(3)新增表单元素：datalist，keygen，output
(4)新增表单属性：placehoder，require，min,max
(5)音频，视频：video，audio
(6)Canvas，地理定位，拖拽
(7)本地存储，localStorage-没有时间限制的数据存储，sessionStorage---针对一个session的数据存储，当用户关闭浏览器窗口后，数据会被删除
(8)新事件：onresize，onscroll,onerror,onplay,onpause,ondrag,onmousewheel
(9)webSocket:单个tcp链接上的全双工协议
4，css选择器有哪些？优先级
(1)通配符选择器（*）：
(2)元素选择器
(3)Id选择器
(4)Class选择器
(5)后代选择器
(6)子元素选择器
(7)相邻选择器
①优先级：！Import>内联>ID选择器>class选择器>标签选择器
5，什么叫css盒模型？有几种盒模型？Margin与padding的区别
(1)Css盒模型是css技术的一种思维模式。每个盒模型有内容（content），填充（padding），边框（border），外边距（margin）组成
(2)Css盒模型又两种，IE盒模型和w3c标准盒模型，其中IE模型width=content+padding+border，而标准盒模型width=content
(3)Margin是自身容器边框到另一个容器边框的距离，就是容器的外边距
(4)Padding是自身容器边框到自身内容之间的距离，是为内边距
6，说说你对语义化的理解
(1)根据内容的结构化使用合适的语义化标签，让浏览器的爬虫和机器更好的解析，同时增加代码的可读性及可维护性
7，Html与xhtml的区别
(1)Xhtml必须被正确地嵌套
(2)Xhtml标签必须小写
(3)Xhtml空标签必须关闭
(4)Xhtml文档必须有根元素<html></html>
8，div+css布局的好处
(1)代码精简，且结构与样式分离，易于维护
(2)代码量减少了，页面加载速度更快，用户体验提升
(3)对seo搜索引擎更加友好，且h5又新增了许多语义化标签更是如此
(4)允许更多炫酷的页面效果，丰富了页面
(5)符合w3c标准，保证网站不会因为网络应用的升级而淘汰
9，盒模型及如何转换
(1)Box-sizing:content-box(w3c盒模型，标准盒模型)
(2)Box-sizing：border-box（IE盒模型，又名怪异盒模型）
|
| Java1234官方群25： | 
|
| Java1234官方群25： | 838462530 |
苏公网安备 32061202001004号
