1.常用浏览器及对应内核
Safari浏览器（苹果浏览器）:Webkit内核
Google浏览器：Blink内核
Firefox：Gecko内核
Edge浏览器：Chromium内核
IE浏览器：Trident内核
2.10个块标签和10个行标签
块标签：独占一整行
h1-h6, p , hr ,div ,tbale ,tr, ul ,ol ,dt ,dd li
行标签：一行内可以插入多个标签
b, span ,i ,u ,small ,big ,ins, em , sup, sub,del
3.什么是html属性
html属性 ：给html元素提供的附加信息
html属性一般描述于开始标签，写在开始标签里
html属性通常是以 属性名="属性值" 成对出现
键值对：key="value"，单键对应单值
html属性属性名和属性值 ，推荐英文字母小写
html属性不分主次,不分先后
4.图片标签的属性 src width height alt title
src width height alt title
source：源头，
alt：替换 当图片破损无法正常显示时，替换当前文本
title：当鼠标悬浮在当前元素时，在鼠标右下角显示文本内容
5.alt title有什么作用
alt：替换 当图片破损无法正常显示时，替换当前文本
title：当鼠标悬浮在当前元素时，在鼠标右下角显示文本内容
6.锚链接如何实现
在需要跳转的位置插入
<h1 id="locate">跳转地点</h1>
在跳转按钮处插入
<a href="#locate">跳转按钮</a>
7.字体小图标的实现代码
<link rel="shorcut icon" type="image/x-icon" href="链接地址">
link引用标题logo，rel声明该属性与本文档之间的关系，type声明该属性的类型，href属性引用链接地址来实现调用
8.form表单的action 和method有什么作用
action=“链接地址” 链接方式
method=“get / post” 提交方式
9.input有哪些常用的属性
name：元素名称
type：定义元素的类型
value：输入框的预输入值
palceholder:提示信息
checkded：规定预选项
maxlength：规定用户输入的最大字符长度
autofocus：自动获取焦点
disabled：禁用
readonly：只读
10.input的type有哪些属性值
text:文本输入框类型
password:密码输入框类型 （字符不可见）
label可以使选框与文字捆绑
checkbox:多选框
radio:单选框 配合name使用
file：上传文件
number:数字输入框
submit:提交按钮(默认提交)
reset:重置数据
button：按钮
date:日期选择框
datetime-local:日期加时间
image:图片类型 (默认提交)
11.textarea如何禁止拉伸
设置resize=none
12.前端分为哪三层？
结构层HTML：负责搭建网页的基本结构
表现层CSS：负责设计网页的表现样式
行为层JS：负责实现网页的交互设计
13.css的选择器及优先级
通配符选择器：*
标签选择器：标签名
class选择器（类选择器）：.+class名
id选择器：#+id名
！important
组合选择器：
子代选择器：使用>隔开，选择直接子代元素
后代选择器：使用空格隔开，选择所有符合选择的后代元素
相邻兄弟选择器：使用+隔开，选择本元素后的同一父级下的单个元素
后续兄弟选择器：使用~隔开，选择本元素后的同一父级下同种的多个元素
多个元素选择器：使用，隔开，可以同时选择多个不同级别和标签的元素
！important（10000）>id选择器（100）>class选择器（10）>标签选择器（1）>通配符选择器
组合选择器计算为属性值权重的相加
14.文本样式有哪些属性
color：颜色
text-align：水平对齐方式
line-height：行高
vertical-align：垂直对齐方式
text-decoration：定义文本修饰线
text-index：首行缩进
text-shadow：文本阴影
letter-spacing：文本间隔
word-spacing：字体间距
text-transform：元素字母的大小写
unicode-bidi：返回文本是否重写
（unicode-bidi：bidi-override）
{
direction:rtl;
<--定义文本的重写方向，从右往左-->
}
white-spacing：设置元素中空白的处理方式（多用于设置空格等空白间隔的解析方式）
15.链接属性有哪些？顺序
：link
：hover
：active
：visited
16.字体属性有哪些？
font-size：字体大小
font-style：字体样式
font-weight：字体粗细
font-family：字体系列
17.背景属性有哪些？
bgcolor：背景色
bgimg:背景图
基于背景图片实现
bgsize：背景图显示大小
bgposition：背景图相对于原图所显示的位置
bgreport：背景是否重复
background-attachment：背景图是否随着页面滚动而进行滚动
18.什么是盒模型？box-sizing有哪些值？有什么区别
在html中规定网页元素如何显示，元素与元素之间的相互关系
box-sizing
content-box：标准盒模型（W3C标准)
盒子宽高为 内容+内边距+边框 的和
border-box：怪异盒模型（IE浏览器默认标准）
盒子的宽高直接为所设置的宽高，包含了内容宽高，内边距宽高，外边距宽高，更适合由外向里布局
直接定义固定宽高并对内容的宽高进行挤压，来限定内容的位置或写入一个固定的盒子
19.如何隐藏元素？有什么区别
（1）display:none：直接使文本脱离标准文档流，不占据具体位置，导致页面重新排序，需使用display：block来进行显示
子元素无法继承，但是会被隐藏，具有单独的display属性，无法脱离父元素单独显示
因元素本身不占据位置且隐藏，导致无法触发事件
无法触发transition的动画效果
（2）visibility：hidden：不会脱离文档流，元素隐藏时占据页面位置，需要使用visibility：visible来进行显示
子元素会继承该属性，跟随父元素进行隐藏，且可设置单独的visibility属性，可以脱离父元素进行单独显示
该元素也无法触发事件（暂认为该元素的隐藏方式为“徒留其形”，“可闻不可见”占据本身文档流但不具备被交
互的能力，但自身所占据的排序等不被影响，类似于插入一个无法进行的交互的iform窗口）
可以触发transition的动画效果，但是较为鸡肋
（3）opacity：0 ：不会脱离文档流，元素隐藏时占据页面位置，需要改变opacity的属性值
子元素会继承该属性并在其基础上叠加，不可脱离父元素单独显示，同样具有opacity属性
该元素可以触发事件，且可以触发transition动画
20.浮动的作用？弊端？如何清除浮动？
让元素显示在同一行内
会导致父元素高度塌陷，会脱离文档流导致网页格式错误
在最后一个浮动元素侯建加入一个空的块级元素并赋予样式 clear：both
给浮动元素的父元素设置 overflow: hidden; 或 overflow: auto; 属性，通过触发BFC（块级格式化上下文）来清除浮动。
给父元素设置高
给父元素设置伪元素 ：after/ :before
{
content：‘’”；
display:block;
clear:both;
overflow:hidden
}
21.定位有哪些值？有什么区别
position 指定了元素的定位类型
relative 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素
不脱离文档流，占据位置
absolute 生成绝对定位的元素，相对于第一个设有position的父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
脱离标准文档流 不占位置
fixed 生成固定定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
脱离标准文档流 不占位置
sticky:吸顶效果
top:定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right:定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bootom:定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left:定义了定位元素左外边距边界与其包含块左边界之间的偏移。
z-index:元素的在z轴的前后顺序
22.弹性布局有哪些属性
flex-direction：子级的排列方向
flex-wrap：定义换行
justify-content：主轴对齐方式
align-items：单轴对齐方式
align-content：多轴对齐方式
23.响应式布局如何实现
通过以下方式实现
@media 设备 and （区间） and （区间）
{
CSS样式
}
24.px % vh vw em rem分别代表什么
px：像素
%：相对于父级元素的百分比
vh：相对于屏幕的高
vw：相对于屏幕的宽
em：相对于父级元素的大小
rem：相对于根元素的字体大小
25.图片留白如何解决
图片独占一行时：设置 display：block / float:left 即可
一行多张图片时：display：flex
float：left
font-size：0
26.超出文本显示...
27.盒子绝对居中（自身宽高已知和自身宽高未知）
子元素宽高已知：
子元素宽高未知：设置position：absolute，四个位置设为0，margin为auto
宽高未知：设置position：absolute top：50%； left：50%；
使用平移transform：translate（-50%，-50%）平移自身-50%的距离
28.满屏的品
<!DOCTYPE html>
<html>
<head>
<title>满屏的品</title>
<style>
* {
margizn:0;
padding:0;
list-style:none;
text-decoration:none;
}
div
{
width:20vh;
height:20vh;
background-color:skyblue;
position:fixed;
}
.d1
{
top:0;
transform:translateX( calc(50vw - 50%));
}
.d2
{
bottom:0;
left:0;
}
.d3
{
bottom:0;
right:0;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
</html>
29.h5有哪些新特性
1.语义化标签：就是使用合理，正确标签来展示内容（用正确的标签做正确事）。
有利于搜索引擎优化（SEO）,搜索引擎爬虫会根据不同标签来赋予不同权重。
header 头部标签
nav 导航标签
main 主体内容
article 内容标签
section 块标签 类似于div
aside 侧边栏标签
footer 尾部标签
2. h5新增多媒体标签 视频 音频
audio:音频
src:需使用音频地址
controls 控制组件
autoplay 自动播放
loop 循环播放
video:视频
src:需使用视频地址
controls 控制组件
width 视频宽
height 视频高
autoplay 自动播放
loop 循环播放
preload 是否等待加载完播放
auto:一边加载一边播放
metadata：加载完后在播放
none：页面加载完后不加载视频
poster 页面加载时等待的画面图片
muted 静音
3. h5 新增 input 表单属性 :
required 属性 : 一旦设置了该属性 , 则表单的内容就是必填项 , 不能为空
placeholder 属性 : 用于设置表单的提示信息
multiple 属性 : 可以 选择多个文件提交
autofocus 属性 : 设置了该属性 , 可以自动进行聚焦
autocomplete 属性 : 属性值为 off / on , 浏览器会记录之前输入的值,默认值是 on , 自动补全默认是打开的 ;使用自动补全 , 需要满足以下两 个条件 :为表单添加 name 属性,自动补全的内容需要之前提交成功过
30.css3有哪些新特性
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
