HTML 简答部分:
1.说说你对标签语义化的理解？
a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构
b. 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重
c. 方便其它设备解析，以意义的方式来渲染网页
d. 便于团队开发和维护，语义化更具可读性，减少差异化
2.块级元素与行级元素分别有什么特点？
块级元素：
- 总是在新行开始
- 高度，行高，内边距外边距都可控
- 宽度默认是容器的100%。除非重新设定
- 可以容纳内联元素（文本元素），与其他块级元素
行级元素： - 和其他元素在同一行
- 高，行高，内边距与外边距不可改变
- 内联元素只能容纳文本或其他内联元素
3.元素的alt和title有什么异同？
在alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字
4.说出三种在定宽高的块元素中水平竖直居中的方法
- postion :absolute;+margin:auto;+top,bottom,left,right=0;
四方都为0，margin:auto; - postion:absolute;+top:50%;left:50%;+translate(-50%,50%)
元素尺寸不固定 - postion:absolute;+top:50%;left:50%+margin:-元素宽度一半 0 0 -元素高度一半;
定位，50%，margin负距
5.CSS标签优先级排序以及优先级相同时应该如何选择？
元素选择器：1
类选择器：10
id选择器：100
元素标签：1000
!important声明的样式优先级最高，如果冲突再进行计算
如果优先级相同，则选择最后出现的样式
继承得到的样式的优先级最低
6.用纯CSS创建一个三角形的原理是什么？
答：基本原理：首先给一个块级元素的宽高设置为0，然后将不需要的边框设置为透明，再给需要的边框设置颜色等参数
代码如下：
<style>
div{
height: 0;
width: 0;
border: 50px solid transparent;
border-top: 50px solid blue;
}
</style>
7. 如何实现元素的显示隐藏，都有哪些方法，各自的优缺点
（1）display 使用none值会让元素从文档中直接删除，
优点：简单暴力，不需要多余代码。不占空间，对布局没有影响
缺点：元素从文档删除，不利于SEO
（2）text-indent:-999em;当给它一个足够大的负值，大到一般我们浏览器无法显示
优点：利于搜索引擎
缺点：他的作用其实就是把文字提到段落前面，不影响宽度，但会影响布局
（3）postion 假如一个元素的距离我们视窗足够大，大到浏览器也无法显示
缺点：用法太死，不能随意修改
（4）visibility :hidden;
优点：利于SEO优化
缺点：该属性会继承，想要让子元素能被看见，就要给子元素多写一个
visibility :visible;
(5)opacity:0 设置透明度0，视觉上隐藏
（6）overflow:hidden;
8.讲一下浮动会带来什么问题，如何清除浮动？
浮动问题：
- 多个浮动的元素无法撑开父元素的宽度，父元素的高度可能会变成0
- 若浮动元素的后面跟非浮动元素，非浮动元素会紧随其后浮动起来
- 若浮动元素前面还有统计元素没有浮动则会影响页面结构
如何清除浮动： - 在最后一个浮动标签后面添加一个标签给其设置clear:both;属性
缺点：添加了无意义的标签 - 给父级添加overflow:hidden;属性…
9.什么是BFC，怎样触发BFC？
BFC可以理解为一个区域（块级格式化上下文），在这个区域内的元素无论如何布局，都不影响区域外的元素
触发BFC的条件：
（1）浮动元素：float除none以外的值
（2）绝对定位元素：postion(absolute,fixed)
（3）display为inline-block,table-cells,flex
（4）overflow:除visible以外的值
10. 圣杯布局与双飞翼布局是什么，结局了什么问题，主要实现方式以及区别在哪里
圣杯与双飞翼布局都是为了实现一个两侧宽度固定
，中间宽度自适应的三栏布局
其主要实现方式都为三栏全部浮动，但左右两栏加上负margin让其跟中间栏div并排。不同在于解决“中间栏div内容不被遮挡”问题的思路不一样
圣杯布局为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后 ，将左右两个div用相对布局postion:relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div
双飞翼布局为了中间div内容不被遮挡，直接在中间div呢你不创建子div用于防止内容，在该div里用margin-left和margin-right为左右两栏留出位置
HTML代码题：
- 用html和css实现一个圆形在矩形容器中左右循环滑动的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.kuang{
border: 1px solid black;
}
.yuan{
width: 100px;
height: 100px;
background-color: blanchedalmond;
border-radius: 50%;
animation: dong 5s linear infinite alternate;
}
@keyframes dong {
from{
margin-left: 0px;
}
to{
margin-left: 93%;
}
}
</style>
</head>
<body>
<div class="kuang">
<div class="yuan">
</div>
</div>
</body>
</html>
- 请只使用html编写一个基础form表单，要求含有文本输入框、单选框（其中默认选定一个选项）、复选框、提交按钮，且行与行间有换行，最终达到下图效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
name: <input type="text" name="name">
<br>
sex:
<br>
<input type="radio" name="sex" value="male" checked>Male
<input type="radio" name="sex" value="female">Female
<br>
<input type="checkbox" name="interest" value="male">Male
<input type="checkbox" name="interest" value="female">Female
<br>
<input type="submit" value="submit">
</form>
</body>
</html>
