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有哪些新特性