HTML面试题
1、HTML 面试题
以下是针对 HTML 相关的面试题，一般来说这地方不会出太多题，面试官也不愿意花太多时间在这上面。
1.1 如何理解 HTML 语义化？
- 让人更容易读懂（增加代码可读性）。 -让搜索引擎更容易读懂，有助于爬虫抓取更多的有效信息，
- 在没有 CSS 样式下，页面也能呈现出很好地内容结构、代码结构。
1.2 script 标签中 defer 和 async 的区别？
script：会阻碍 HTML 解析，只有下载好并执行完脚本才会继续解析 HTML。async script：解析 HTML 过程中进行脚本的异步下载，下载成功立马执行，有可能会阻断 HTML 的解析。defer script：完全不会阻碍 HTML 的解析，解析完成之后再按照顺序执行脚本。
1.3 从浏览器地址栏输入 url 到请求返回发生了什么
- 输入 URL 后解析出协议、主机、端口、路径等信息，并构造一个 HTTP 请求。
- 强缓存。
- 协商缓存。
-
DNS 域名解析。
-
TCP 连接。
总是要问：为什么需要三次握手，两次不行吗？其实这是由 TCP 的自身特点可靠传输决定的。客户端和服务端要进行可靠传输，那么就需要确认双方的接收和发送能力。第一次握手可以确认客服端的发送能力，第二次握手，确认了服务端的发送能力和接收能力，所以第三次握手才可以确认客户端的接收能力。不然容易出现丢包的现象。
-
http 请求。
-
服务器处理请求并返回 HTTP 报文。
-
浏览器渲染页面。
- 断开 TCP 连接。
1.4html5有哪些新特性、移除了那些元素 新特性？
- 拖拽释放(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；
1.5请描述一下cookies，sessionStorage 和localStorage的区别
cookie是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密） cookie数据始终在同源的http请求中携带（即使不需要），即会在浏览器和服务器间来回传递 sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存 存储大小： cookie数据大小不能超过4k sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大 有期时间： localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据 sessionStorage 数据在当前浏览器窗口关闭后自动删除 cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭
1.6简述一下src与href的区别
src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。 src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。
<script src =”js.js”></script>
- 浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片 和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头 部。 href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链 接）之间的链接，如果我们在文档中添加
<link href="common.css" rel="stylesheet"/>
- 那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么 建议使用link方式来加载css，而不是使用@import方式。
基础知识点
1.7字符编辑
<!-- 一字符=2个字节
w3c公布了标准的字符吗UTF-8，字符为存储的最小的单位
gbk:中文编码
gb2312简体中文
big5繁体中文
iso8895-1西欧字母 -->
1.8html 网站logo
<link rel="icon" type="image/png" href="">
<link rel="icon" type="image/x-icon" href="">
<link rel="icon" type="image/jpeg" href="">
<link rel="icon" type="image/gif" href="">
<ul>
<li>link：引用外部文件</li>
<li>rel:定义当前文档与被链接文档的关系</li>
<li>type:定义被链接文档的mine类型</li>
<li>定义链接文档的路径</li>
</ul>
<div>
标题栏图标的设置：16x16像素
<li>网站根目录下放一个favicon.ico文件。浏览器会自动显示在标题栏中</li>
<li>使用icon图标作为标题栏的图标</li>
<li>使用ico生成器生成图标</li>
</div>
1.9头部关键字与描述与页面自动跳转
<meta name="keywords" content="美团,京东,生活,服务">
<meta name="description" content="">
<meta http-equiv="refresh" content="5;url=https://www.jd.com/#ns">
<div>
关键字与描述：
关键字与描述不是给人看的，是供搜索引擎使用
关键字与描述是网站优化很重要的部分
关键字：
meta标签
name="keywords"
content="可以使用多个，建议不要超过5个，用英文逗号分隔"
描述：
meta标签
name="description"
content="建议不要超过100字"
</div>
<div>10秒后跳转至百度首页</div>
CSS 基础知识点-面试题
基础知识点
1.css三大特性
css就是层叠样式表
三大特性：
1继承性
只能继承：
color,text-开头的,font-开头的，line-开头的，
宽度会继承，高度不会继承
2选择器优先级
权重/权重值
由弱到强选择器的优先级
0 1 10 100 1000 99999
继承性-浏览器自带的样式-通用选择器-标签选择器/-class选择器-id选择器-行内样式-！import.
选择器越精确，优先级越高
同一级别选择器，越在后面优先级越高
3序列选择器
first-child{
color: red;
}
last-child{
color: blueviolet;
}
nth-child(-3+n){
background: #adc549;
}
4.伪元素
::after{
content: '111';
display: block;
/* border-bottom: 1px #cccccc solid; */
}
::before{
content: '111';
display: block;
}
5.动态伪类
a:hover{
color: #000000;
font-size: 18px;
text-decoration: none;
}
a:active{
color: green;
}
input:focus{
color: green;
}
6.选择器
>:第一子元素
+：向下找相邻子元素
~：向下找相邻兄弟元素
span[class='test'] =>匹配所有带有class类名test的span标签
span[class *='test'] =>匹配所有包含了test字符串的class类名的span标签
span[class] =>匹配所有带有class属性的span标签
[class='all'] =>匹配页面上所有带有class='all'的标签
[class *='as'] =>匹配页面上所有class类且类名带有as字符串的类的标签
7.字体
<!-- 多个字体样式用逗号隔开，解析时会从前往后识别字体样式，没有的会是浏览器自带字体样式 -->
<!-- 如果中间有空格或者是中文字体需要用引号包裹 -->
<div style="font-family: '宋体', '楷体';">胖墩墩1</div>
-------------
<div style="font-weight: 100;">冰墩墩</div>
<div style="font-weight: 400;">冰墩墩</div>
<div style="font-weight: bold;">冰墩墩11</div>
<div style="font-weight: bolder;">冰墩墩22</div>
<div style="font-weight: normal;">冰墩墩</div>
------------
@font-face {
font-family: "myfont";
src: url("../../../fonts/徐静蕾字体.ttf");
/* url("../../../fonts/徐静蕾字体.wotf"); */
}
*{
font-family: "myfont";
}
div{
font-style: initial;
font-style: italic;
font-style: oblique;
font-family: "myfont";
}
字体的引用技术：
为了保证网站字体的特殊显示，我们需要使用css把自己的字体引用到浏览器中
格式（ttf,wotf,otf)
<div>
我要学前端
</div>
--------
text-decoration: underline;
text-decoration: overline;
text-decoration: none;
---------
超过显示...
.pp{
text-overflow: ellipsis;
width: 80px;
white-space:nowrap;
}
8.背景简写
/* background:#ccc url("https://b.appsimg.com/upload/momin/2020/06/16/82/1592278113502.png") repeat 定位/200px 100px scroll; */
9.弹性盒子
.box{
width: 400px;
height: 400px;
background: bisque;
margin: 50px auto;
overflow: hidden;
padding-left: 0;
display: flex;
/* 水平正向，默认值。 */
flex-direction: row;
/* 水平反向排列 */
/* flex-direction: row-reverse; */
/* 表示垂直正向，交叉轴为水平正向 */
/* flex-direction: column; */
/* 表示垂直反向反向 */
/* flex-direction: column-reverse; */
/* 换行 */
/* 默认值，不换行 */
flex-wrap: nowrap;
/* 交叉轴正向换行 */
/* flex-wrap: wrap; */
/* 交叉轴反向换行 */
/* flex-wrap: wrap-reverse; */
/* 主轴方向的对齐方式 */
/* 默认值，开始方向对齐 */
/* justify-content: flex-start; */
/* 结束方向对齐 */
/* justify-content: flex-end; */
/* 居中对齐 */
/* justify-content: center; */
/* 两端对齐 */
/* justify-content: space-between; */
/* 左右等间距对齐 */
/* justify-content: space-around; */
/* 等间距对齐 */
justify-content: space-evenly;
/* 单行交叉轴对齐方式 */
/* 交叉轴开始方向对齐 */
/* align-items: flex-start; */
/* 结束方向对齐 */
/* align-items: flex-end; */
/* 居中方向对齐 */
/* align-items: center; */
/* 文字基线对齐，略微往上了 */
/* align-items: baseline; */
/* 如果项目元素没有设置高度，将占满整个容器高度，默认值 */
/* align-items: stretch; */
/* 多行内容在交叉轴对齐方式 */
/* 交叉轴开始方向对齐 */
/* align-content: flex-start; */
/* 结束方向对齐 */
/* align-content: flex-end; */
/* 居中方向对齐 */
/* align-content: center; */
/* 两端对齐 */
/* align-content: space-between; */
/* 左右等间距对齐 */
/* align-content: space-around; */
/* 默认值，每一项元素会占满容器 */
/* align-content: stretch; */
}
.q{
/* width: 120px; */
width: 240px;
height: 50px;
line-height: 50px;
background: red;
text-align: center;
/* margin-top: 10px; */
margin: 10px;
list-style: none;
}
/* 调整每一个元素在弹性盒子中的顺序，默认为0, */
/* 弹性盒子的扩展比例 */
/* 弹性盒子收缩的比例 */
10.盒子模型
块级元素相邻的上下设置外边距时，会选取最大的一个外边距
行级元素只有左右有外边距，上下没有外边距
行内块级元素跟块级元素一样
盒子背景会包括边框与里面内容
没有设置怪异盒子时，实际宽高等于设置的宽高加上内边距加上边框
内间距padding：三值时：上 左右 下
外边距margin：
盒子与盒子的间距兄弟关系
重叠性当两个盒子为兄弟结点时，margin在垂直方向
11.浮动
<!-- 浮动：让块级元素能够待在一行 文字没有浮动时，会围绕浮动周围-->
<!-- 浮动特点:
1浮动元素会脱离正常文档流，浮动元素会像浮云一样浮起来。
2浮动元素后面正常元素会自动补位。
3浮动元素会被父元素所约束，所以浮动没有完全脱离文档流。 -->
<!-- 动的特点：
当浮动元素上一行是正常元素，这个浮动元素只能待在当前行，不能跑到上一行。
左浮动：元素会向左跑，会从上一行最右边跑出来，直到遇到有浮动的元素，才会停止。
右浮动：元素会向右跑，会从上一行最左边跑出来，直到遇到有浮动的元素，才会停止。 -->
<!-- 清除浮动：
清除元素哪一侧不能右浮动。
文档加载顺序，从上往下加载，样式与元素内容一起加载. -->
<!-- 高度塌陷：由于元素中子元素设置了浮动，会造成父元素高度塌陷 -->
<!-- 防止高度塌陷： -->
<!-- 直接给父元素设置高度 -->
<!-- 用伪元素加上清除浮动 -->
12.定位
<!-- 定位：规定元素的位置 -->
<!-- 定位用于没有规律的元素而布局 -->
<!-- 定位的三种类型：相对定位，绝对定位，固定定位 -->
<!-- 相对定位： 脱离文档流 但没完全脱离文档流 原来的位置还会保留 相对于自己原来的位置定位-->
<!-- 绝定定位：会完全脱离文档流，以最近含相对定位的父级元素为参考，进行定位，原来的位置不会保留，如果父级元素没有含相对定位，会相对于浏览器进行定位 -->
固定定位：
<!-- 层级z-index：默认为0,最高为999. -->
13.进阶
1过渡
.box{
width: 200px;
height: 200px;
background: pink;
transition-property: all;
transition-duration: 3s;
transition-timing-function: linear;
transition-delay: 200ms;
transition: all 2s ease-in 500ms;
}
.box:hover{
width: 400px;
height: 400px;
transform: translate(50px,50px);
}
<div class="box"></div>
2位移
.container{
width: 100%;
height: 500px;
background: red;
}
.box{
width: 200px;
height: 200px;
background: tomato;
transition: all 3s;
}
.container:hover .box{
/* transform: translate(50px,50px); */
/* transform: rotate(90deg); */
/* transform: rotateX(45deg); */
transform: rotateY(60deg);
/* transform: scale(0.5); */
/* transform: scaleX(1.5); */
/* transform: skewX(45deg); */
}
3渐变
.box{
width: 300px;
height: 30px;
border: 1px solid red;
margin: 50px auto;
background: linear-gradient(135deg,#ddcc54,red,#aaff88);
background: linear-gradient(315deg,#ddcc54,#aaff88);
background: linear-gradient(270deg,#ddcc54 20%,#aaff88 45%,green 60%,blue);
}
.box2{
width: 600px;
height: 40px;
border: 1px solid red;
margin: 20px auto;
/* background: linear-gradient(90deg,rgba(241,132,22,1) 15%,rgba(233,199,144,0) 30%,rgba(152,168,177,0) 60%,rgba(22,33,11,1)); */
/* 重复渐变 */
background: repeating-linear-gradient(90deg,green,red 50%);
}
.box1{
width: 400px;
height: 400px;
border: 1px solid red;
margin: 50px auto;
border-radius: 50%;
/* 圆形渐变 */
background: radial-gradient(circle,#711ebe,#00fff2,red,blue);
/* 椭圆形渐变 */
/* background: radial-gradient(ellipse,#711ebe,#00fff2,red); */
}
<div class="box1">
</div>
<div class="box2">
</div>
4动画
<style>
.container{
/* animation: name（名称） duration（动画完成的时间） timing-function （完成的速率ease/linear/ease-in/ease-out） delay （启动时延迟的时间）
iteation-count（播放的次数n/infinite） direction（是否反向播放normal/reverse反向播放/alternate/正反交替播放） fill-mode （forwards结束后停的状态）play-state;
animation-play-state: paused|running;指定暂停的动画 */
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
width: 200px;
height: 200px;
background: tomato;
animation: move 3s alternate backwards;
}
@keyframes move{
form{
transform: translateX(0);
}
to{
transform: translateX(100px);
}
}
</style>
<!-- js动画
动画软件flash
标签自带动画marquee
绘画canvas配合js脚本
animation -->
<!-- 动画
帧一秒钟切换图片的数量，每张图片代表一帧
关键帧 在每一段动画过程中，都需要设置一个特别的帧来区分前后动画的关系 -->
<div class="container"></div>
<div class="x">xxxxxx</div>
