文章目录
- 1. html标签的类型（head， body，！Doctype） 他们的作用是什么
- 2. 在head标签里面的标签的作用分别是啥？
- 3. 在 HTML 中插入 css 样式表的方法
- 4. 比较插入 css 样式的链接方式和导入方式
- 5. html5 新特性
- 6.CSS3新特性
- 7. 浏览器本地存储中 cookie 和 localStorage 和 SessionStorage有什么区别？
- 8.伪类和伪元素
- 9.html 语义化
- 10. 常见的盒子水平垂直居中的方法有哪些请举例 3 种？
- 11. 文本元素如何居中
- 12.清除浮动的方法有哪些？
- 13. 常见的布局方法有哪些？他们的优缺点是什么？
- 14. 懒加载
- 15. BFC 是什么？
- 16. CSS权重优先级
- 17.CSS继承相关
- 18.行内元素和块级元素什么区别，然后怎么相互转换
- 19.盒模型
- 20. 盒子塌陷是什么？
- 21. min-width/max-width 和 min-height/max-height 属性间的覆盖规则？
- 22. 浏览器是怎样解析CSS选择器的？
- 23. CSS实现一个等腰三角形
- 24. 实现扇形、圆形
- 25. 旋转45度
- 26. 画 0.5px 的直线
- 27.布局: 三栏布局(平均分布)
- 28.画一条虚线
- 29.实现三列1：2：1的布局
- 30. 实现 左边固定 右边自适应 左边固定部分宽度在什么情况下会被压缩 如何避免 ？
- 31.Flex 弹性布局 (css3新出的)
- 32. 移动端适配方案
- 33. css字体大小设置（三种）.em rem px
- 33. position 定位
- 34. 父元素设置flex，子元素哪些属性会失效
- 35. CSS隐藏元素怎么实现？display:none 和 visiblity：hidden的区别？什么场景用display:none，什么场景用 visiblity：hidden？
- 36. 绝对定位、相对定位根据什么元素定位？
- 37.z-index的作用 如何设置才能是z-index有效
- 38.html 选择偶数元素,css通过父元素选择子元素，选择第一个，第二个，最后一个，奇数偶数
- 39.预处理语言less / 如何实现主题切换
- 40. 为什么link用href获取资源 script和img用src
1. html标签的类型（head， body，！Doctype） 他们的作用是什么
!DOCTYPE 标签：
- 它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令.
head：
- 是所有头部元素的容器, 绝大多数头部标签的内容不会显示给读者
- 该标签下所包含的部分可加入的标签有 < base > , < link > , < meta >, < script >, < style >和< title >
body:
- 用于定义文档的主体, 包含了文档的所有内容
- 该标签支持 html 的全局属性和事件属性.
2. 在head标签里面的标签的作用分别是啥？
base:
-
可以用来统一设置当前页面上的超链接的跳转方式
-
< base >标签为页面上的所有链接规定默认地址或默认目标
-
使用了 < base > 标签，则必须具备 href 属性或者 target 属性或者两个属性都具备
-
通常情况下，浏览器会从当前文档的URL中提取相应的元素来填写相对URL中的空白。
使用< base >标签可以改变这一点。浏览器随后将不再使用当前文档的URL，而使用指定的基本URL来解析所有的相对URL。这其中包括 < a >、< img >、< link >、< form >标签中的 URL。
<html>
<head>
<base href="http://www.w3school.com.cn/i/" />
<base target="_blank" />
</head>
<body>
<img src="eg_smile.gif" /><br />
<p>图像的地址为相对地址。由于我们已经在 head 部分规定了一个基准 URL，浏览器将在如下地址寻找图片：</p>
<p>"http://www.w3school.com.cn/i/eg_smile.gif"</p>
<br /><br />
<p><a href="http://www.w3school.com.cn">W3School</a></p>
<p>请注意，链接会在新窗口中打开，即使链接中没有 target="_blank" 属性。这是因为 base 元素的 target 属性已经被设置为 "_blank" 了。</p>
</body>
</html>
<base>必需的属性：href
href，值为URL，规定页面中所有相对链接的基准URL。
<base>可选的属性：target
target，值为_blank、_parent、_self、_top、framename等，表明在何处打开页面中所有的链接。比如”_blank”意为在新窗口中打开。
link:
- 定义了文档与外部资源之间的关系，通常用来引入外部样式（css文件）
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>
<link>的主要属性：href，rel，type，charset
charset，指明被链接文档的字符集，如UTF-8。但是几乎没有主流浏览器支持 link标签的charset 属性。
在下面的例子中，charset 属性指示被链接文档是用英文编写的：
<head>
<link href="shanghai.html" rel="parent" charset="en" />
</head>
href，规定被链接文档的位置（URL）。
这个不解释了。
rel 属性指示被链接的文档是一个样式表。它的属性值只有 “stylesheet” 得到了所有浏览器的支持。其他值只得到了部分地支持。
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>
type 属性规定被链接文档的 MIME 类型。该属性最常见的 MIME 类型是 “text/css”，该类型描述样式表。
<head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>
meta:
- 用来定义页面的特殊信息（页面关键字，页面描述） ，描述了一些基本的元数据
script:
- 用来定义页面的JavaScript 代码 ,也可用src来引入文件
style:
- 用来定义元素的css样式
title:
- 定义网页的标题(浏览器工具栏标题，搜素引擎结果页面标题，收藏夹标题)
- 是 head 中唯一必须的标签
3. 在 HTML 中插入 css 样式表的方法
内联样式：
- 内联方式指的是直接在 HTML 标签中的 style 属性中添加 CSS。
- 【不推荐，使网页难以维护】
<div style="background: red"></div>
嵌入方式：
-
嵌入方式指的是在 HTML 头部中的 < style > 标签下书写 CSS 代码。
-
【只对当前页面有效，若有多个页面要引入相同 css 样式，会导致代码冗余，不易维护】
<head>
<style>
.content {
background: red;
}
</style>
</head>
链接方式：
- 链接方式指的是使用 HTML 头部的 标签引入外部的 CSS 文件。
- 【最常见，最推荐，具有良好的可维护性】
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
导入方式：
- 导入方式指的是使用 CSS 规则引入外部 CSS 文件。
<style>
@import url(style.css);
</style>
4. 比较插入 css 样式的链接方式和导入方式
链接方式（下面用 link 代替）和导入方式（下面用 @import 代替）都是引入外部的 CSS 文件的方式，下面我们来比较这两种方式，并且说明为什么不推荐使用 @import。
- link 属于 HTML，通过 标签中的 href 属性来引入外部文件，而 @import 属于 CSS，所以导入语句应写在 CSS 中，要注意的是导入语句应写在样式表的开头，否则无法正确导入外部文件；
- @import 是 CSS2.1 才出现的概念，所以如果浏览器版本较低，无法正确导入外部样式文件{有兼容性问题}；
- 当 HTML 文件被加载时，link 引用的文件会同时被加载，而 @import 引用的文件则会等页面全部下载完毕再被加载
作用：样式的导入方式
link 的使用
<link href="index.css" rel="stylesheet">
@import 的使用
<style type="text/css">
@import url(index.css);
</style>
区别
1.从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。
2.加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。
3.兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4.DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。
5. html5 新特性
-
新增选择器 document.querySelector：匹配指定CSS选择器的第一个元素
-
document.querySelectorAll：返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象
-
拖拽释放(Drag and drop) API
-
媒体播放的 video 和 audio【多媒体】
audio常用属性
| 属性 | 属性值 | 注释 |
|---|---|---|
| src | url | 播放的音乐的url地址（火狐只支持ogg的音乐，而IE9只支持MP3格式的音乐。chrome貌似全支持） |
| preload | preload | 预加载（在页面被加载时进行加载或者说缓冲音频），如果使用了autoplay的话那么该属性失效。 |
| loop | loop | 循环播放 |
| controls | controls | 是否显示默认控制条（控制按钮） |
| autoplay | autoplay | 自动播放 |
-
本地存储 localStorage 和 sessionStorage
-
离线应用 manifest
-
桌面通知 Notifications
-
语义化标签 article、footer、header、nav、section【增加语义特性】
-
增强表单控件 calendar、date、time、email、url、search
详见 https://blog.csdn.net/yihui1314/article/details/79589451 -
地理位置 Geolocation
-
多任务 webworker
为了利用多核CPU的计算能力，HTML5提出Web Worker标准，允许JavaScript脚本创建多个线程，但是子 线程完全受主线程控制，且不得操作DOM。所以，这个新标准并没有改变JavaScript单线程的本质。
-
全双工通信协议 websocket
-
历史管理 history
-
跨域资源共享(CORS) Access-Control-Allow-Origin
-
页面可见性改变事件 visibilitychange
-
跨窗口通信 PostMessage
-
Form Data 对象
-
绘画 canvas【图像效果】
H5移除的元素：
-
纯表现的元素：basefont、big、center、font、s、strike、tt、u
-
对可用性产生负面影响的元素：frame、frameset、noframes
6.CSS3新特性
-
弹性盒模型 display: flex;
-
颜色透明度 color: rgba（255, 0, 0, 0.75）；
-
圆角 border-radius: 5px;
-
渐变 background:linear-gradient（red, green, blue）；
-
阴影 box-shadow:3px 3px 3px rgba（0, 64, 128, 0.3）；
-
转换 transform:
** Transform 方法汇总**
| 函数 | 描述 |
|---|---|
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
| translate(x,y) | 定义 2D 转换，沿着 X 和 Y 轴移动元素。 |
| translateX(n) | 定义 2D 转换，沿着 X 轴移动元素。 |
| translateY(n) | 定义 2D 转换，沿着 Y 轴移动元素。 |
| scale(x,y) | 定义 2D 缩放转换，改变元素的宽度和高度。 |
| scaleX(n) | 定义 2D 缩放转换，改变元素的宽度。 |
| scaleY(n) | 定义 2D 缩放转换，改变元素的高度。 |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| skew(x-angle,y-angle) | 定义 2D 倾斜转换，沿着 X 和 Y 轴。 |
| skewX(angle) | 定义 2D 倾斜转换，沿着 X 轴。 |
| skewY(angle) | 定义 2D 倾斜转换，沿着 Y 轴。 |
CSS3 允许使用 3D 转换来对元素进行格式化
rotateX() 方法
/* 设置元素围绕其 X 轴以给定的度数进行旋转 */
div{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari 和 Chrome */
-moz-transform: rotateX(120deg); /* Firefox */
}
rotateY() 旋转
/* 设置元素围绕其 Y 轴以给定的度数进行旋转 */
div{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 和 Chrome */
-moz-transform: rotateY(130deg); /* Firefox */
}
- transition
这个例子实现这样的效果：4s 过渡改变字体大小，2s 延迟——在元素上鼠标悬停时与开始动画效果之间：
#delay1 {
position: relative;
transition-property: font-size;
transition-duration: 4s;
transition-delay: 2s;
font-size: 14px;
}
#delay1:hover {
transition-property: font-size;
transition-duration: 4s;
transition-delay: 2s;
font-size: 36px;
}
| 属性 | 描述 |
|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 “ease”。 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 |
- 动画 animation
/* 通过@keyframes 创建动画 */
@keyframes myfirst{
from {
background: red;}
to {
background: yellow;}
}
/*
将创建的动画绑定到选择器，并至少指定以下两项 CSS3 动画属性
1.指定动画的名称；
2.指定动画的时长；
*/
div{
animation: myfirst 5s;
-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
}
除了from to 也可以使用百分比的方法来设置动画变化过程中的状态
/* 当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变 */
@keyframes myfirst{
0% {
background: red;