1.html基本结构
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
</head>
<body>
</body>
</html>
2.<!doctype html>表示什么意思
声明要写的类型是html类型
3.html语法
<标记 属性=“属性值” ></标记>常规标记
<标记 属性=“属性值” >空标记
4.三种样式表(标出)
内部<style type="text/css"></style/>
外部< link rel="stylesheet" href="路径" type="text/css">
<style type="text/css">@important url(路径)</style>
内联 语法:<标签 style=属性:“属性值”></标签>
5.css语法
选择符{属性:“属性值”}
6.外部样式表导入的两种方法(说出区别)
< link rel="stylesheet" href="路径" type="text/css">
<style type="text/css">@important url(路径)</style>
区别:1.根源不同:link 属 xhtml 标签,除加载 css 外,还可做很多其它事;
而@import完全是 css 提供的一种方式。
2.加载顺序不同:link 的 css 会与页面同时加载;
而@import 加载 css 的页面时开始会没有样式。
3.兼容性不同:@import 只有 IE5 以上的浏览器能识别;
而 link 标签无此问题。
4.Dom控制样式时不同:使用 javascript 控制 dom 改变样式时,
link 可控,@import 不可控。
7.文本溢出显示省略号...必备的声明(4条)
div{width:value;white-sapce:no-wrap;overflow:hidden;text-overflow:ellipsis;}
8.最小高度兼容写法(2种)
1. div{height:value;_height:value;}
2. div{min-height:value;height:auto!important;height:value;}
9.高度塌陷的解决方式(3种)
1. div{overflow:hidden;}
2. div{clear:both;height:0;overflow:hidden;}
3. div:after{content:".";display:block;clear:both;height:0;overflow:hidden;visibility:hideen;}
注意:div为父元素。
10.title和alt的区别
title:当鼠标放在图片上时出现提示信息。
alt:当图片损坏或不能加载时,出现在原图片位置的替换文本信息。
11.五大浏览器内核和代表作品
Trident:IE ; Gecko:Mozilla Firefox ; Webkit:Safari,Chrome ; Presto:Oprea ; Blink:Oprea software,Google
12.background-repeat的属性值都有哪4个
background-repeat:repeat/repeat-x/repeat-y/no-repeat
13.定位属性的属性值(4个)
position:static/absolute/relative/fixed
14.如何设置一个元素高度为100%
html,body{height:100%}
div{height:100%}
15 .设置一个宽度100px;高度100px;的div,永远水平居中垂直中齐在浏览器中。
1.body{width:value;height:value;position:relative;}
div{width:100px;height:100px;position:fixed;left:0;right:0;
top:0;bottom:0;margin:0 auto;}
2.html,body{height:100%;width:100%;}
body{display:flex;justify-content:center;align-items:center;}
div{width:200px;height:200px;background:red;}
16.css图片整合的优势
减小图片体积,减少服务器加载次数,加快页面加载速度
17.写出20个h5新增元素
header,footer,nav,menu,section,article,aside,mark,time,date,month,
figure,figcaption,embad,video,th,thead,tbody,tfoot,fieldest,legend,label
18.必填
required
19.表单字段集及标题
表单字段集:fieldset 标题:legend
20.表单的组成
(表单域)(表单元素)(提示信息标签)
21.表格行分组
(thead)(tbody)(tfoot)
22.设置一个元素高度为3像素
div{width:value;height:3px;overflow:hidden;}
23.12pt等于多少px又等于多少em
16px=1em=12pt=100% 0.75em=12px
24.li的默认类型为
(list-item)
25.写出4个常见的内联元素
(a)(strong)(b)(i)(em) (span)
26.设置一个元素为flex容器
(display:flex)
27.让flex元素纵向排列(改变主轴方向)
div{display:flex;flex-direction:column;}纵向 上为起点
div{display:flex;flex-direction:column-reverse;}纵向 下为起点
div{display:flex;flex-direction:row;}横向 左为起点
div{display:flex;flex-direction:row-reverse;}横向 右为起点
28.flex元素会默认换行么,为什么,怎么解决
不会
原因: flex 元素中默认 flex:1 1 auto;其中 1 表示子元素会随父元素的缩小而缩小。
方法:flex-wrap:wrap;
29.简述align-content和align-itmes和align-self和justify-content的区别
align-content 用于多轴 justify-content 用于单轴
align-itmes 用于垂直 align-self 写于子元素自身
30.rem,em,px,vh,vw的区别
px:像素,浏览器常用字体大小的单位,为绝对值
rem:相对于根元素<html>来设置大小,为相对值
em: 相对于父元素<body>来设置大小,为绝对值
vh: 相对于视口<veiwport>高度而定,长度为视口高度的1%,为百分比相对值
vw:相对于根元素<veiwport>宽度而定,长度为视口宽度的1%,为百分比相对值
31.ie低版本盒模型和标准盒模型的区别
IE低版本盒模型即怪异盒模型 padding border content 在其内部;
标准盒模型 padding + border + content
32.flex:1;代表什么意思
flex:1;=flex:1 1 auto; 即子元素自动分配剩余空间
33.一个div向左扭曲45度
div{transform:skew(45deg);}
34.空单元格隐藏
{empty-cells:hide/SHOW}
35.表格标题
<caption>表格标题</caption>
36.简述get和post的区别
1.行为方式不同:get从服务器获取数据,post向服务器传送数据;
2.过程不同:get过程可见,post过程不可见;
3.安全 效率不同:get比post安全性低、效率高;
4.get的传送数据量小,不能大于2kb(不同的浏览器会有所不同),post一般比较大,不受限制。
37.简述bfc的概念
块级元素格式化上下文或(不同的文档流层次)
38.简述什么是置换元素
有内在的尺寸,可写宽高。(默认就有 css 格式化外表范围的元素)
39.video都支持哪些格式
ogg mp4 webm
40.写一个3d圆柱
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
aside{height:500px;width:500px;margin:50px auto;position:relative;border:1px solid #39F;perspective:800px;perspective-origin:50% 0%;}
section{position:absolute;height:100px;width:100px;top:0;bottom:0;left:0;right:0;margin:auto;transition:200s;transform-style:preserve-3d;border:1px solid #39F;}
div{position:absolute;height:100px;width:100px;left:0;top:0;background:#3FC;}
.a1{transform:rotatey(45deg) translatez(130px)}
.a2{transform:rotatey(90deg) translatez(130px)}
.a3{transform:rotatey(135deg) translatez(130px)}
.a4{transform:rotatey(180deg) translatez(130px)}
.a5{transform:rotatey(225deg) translatez(130px)}
.a6{transform:rotatey(270deg) translatez(130px)}
.a7{transform:rotatey(315deg) translatez(130px)}
.a8{transform:rotatey(360deg) translatez(130px)}
section:hover{transform:rotatey(36000deg)}
</style>
</head>
<body>
<aside>
<section>
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
<div class="a4"></div>
<div class="a5"></div>
<div class="a6"></div>
<div class="a7"></div>
<div class="a8"></div>
</section>
</aside>
</body>
</html>
立方体
/*aside{height:500px;width:500px;perspective:800px;perspective-origin:50% 50%;positive:relative;border:1px solid red;margin:100px auto;}
section{height:100px;width:100px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;border:1px solid #000;transform-style:preserve-3d;transition:2s;}
div{height:100px;width:100px;background:#3CC;position:absolute;top:0;left:0;}
.a1{transform:rotatey(90deg) translatez(-50px);}
.a2{transform:rotatey(90deg) translatez(50px);}
.a3{transform:rotatex(90deg) translatez(-50px);}
.a4{transform:rotatex(90deg) translatez(50px);}
.a5{transform:rotatez(90deg) translatez(-50px);}
.a6{transform:rotatez(90deg) translatez(50px);}
section:hover{transform:rotate3d(1,1,1,360deg);}*/
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title></title>
</head>
<body>
</body>
</html>
2.<!doctype html>表示什么意思
声明要写的类型是html类型
3.html语法
<标记 属性=“属性值” ></标记>常规标记
<标记 属性=“属性值” >空标记
4.三种样式表(标出)
内部<style type="text/css"></style/>
外部< link rel="stylesheet" href="路径" type="text/css">
<style type="text/css">@important url(路径)</style>
内联 语法:<标签 style=属性:“属性值”></标签>
5.css语法
选择符{属性:“属性值”}
6.外部样式表导入的两种方法(说出区别)
< link rel="stylesheet" href="路径" type="text/css">
<style type="text/css">@important url(路径)</style>
区别:1.根源不同:link 属 xhtml 标签,除加载 css 外,还可做很多其它事;
而@import完全是 css 提供的一种方式。
2.加载顺序不同:link 的 css 会与页面同时加载;
而@import 加载 css 的页面时开始会没有样式。
3.兼容性不同:@import 只有 IE5 以上的浏览器能识别;
而 link 标签无此问题。
4.Dom控制样式时不同:使用 javascript 控制 dom 改变样式时,
link 可控,@import 不可控。
7.文本溢出显示省略号...必备的声明(4条)
div{width:value;white-sapce:no-wrap;overflow:hidden;text-overflow:ellipsis;}
8.最小高度兼容写法(2种)
1. div{height:value;_height:value;}
2. div{min-height:value;height:auto!important;height:value;}
9.高度塌陷的解决方式(3种)
1. div{overflow:hidden;}
2. div{clear:both;height:0;overflow:hidden;}
3. div:after{content:".";display:block;clear:both;height:0;overflow:hidden;visibility:hideen;}
注意:div为父元素。
10.title和alt的区别
title:当鼠标放在图片上时出现提示信息。
alt:当图片损坏或不能加载时,出现在原图片位置的替换文本信息。
11.五大浏览器内核和代表作品
Trident:IE ; Gecko:Mozilla Firefox ; Webkit:Safari,Chrome ; Presto:Oprea ; Blink:Oprea software,Google
12.background-repeat的属性值都有哪4个
background-repeat:repeat/repeat-x/repeat-y/no-repeat
13.定位属性的属性值(4个)
position:static/absolute/relative/fixed
14.如何设置一个元素高度为100%
html,body{height:100%}
div{height:100%}
15 .设置一个宽度100px;高度100px;的div,永远水平居中垂直中齐在浏览器中。
1.body{width:value;height:value;position:relative;}
div{width:100px;height:100px;position:fixed;left:0;right:0;
top:0;bottom:0;margin:0 auto;}
2.html,body{height:100%;width:100%;}
body{display:flex;justify-content:center;align-items:center;}
div{width:200px;height:200px;background:red;}
16.css图片整合的优势
减小图片体积,减少服务器加载次数,加快页面加载速度
17.写出20个h5新增元素
header,footer,nav,menu,section,article,aside,mark,time,date,month,
figure,figcaption,embad,video,th,thead,tbody,tfoot,fieldest,legend,label
18.必填
required
19.表单字段集及标题
表单字段集:fieldset 标题:legend
20.表单的组成
(表单域)(表单元素)(提示信息标签)
21.表格行分组
(thead)(tbody)(tfoot)
22.设置一个元素高度为3像素
div{width:value;height:3px;overflow:hidden;}
23.12pt等于多少px又等于多少em
16px=1em=12pt=100% 0.75em=12px
24.li的默认类型为
(list-item)
25.写出4个常见的内联元素
(a)(strong)(b)(i)(em) (span)
26.设置一个元素为flex容器
(display:flex)
27.让flex元素纵向排列(改变主轴方向)
div{display:flex;flex-direction:column;}纵向 上为起点
div{display:flex;flex-direction:column-reverse;}纵向 下为起点
div{display:flex;flex-direction:row;}横向 左为起点
div{display:flex;flex-direction:row-reverse;}横向 右为起点
28.flex元素会默认换行么,为什么,怎么解决
不会
原因: flex 元素中默认 flex:1 1 auto;其中 1 表示子元素会随父元素的缩小而缩小。
方法:flex-wrap:wrap;
29.简述align-content和align-itmes和align-self和justify-content的区别
align-content 用于多轴 justify-content 用于单轴
align-itmes 用于垂直 align-self 写于子元素自身
30.rem,em,px,vh,vw的区别
px:像素,浏览器常用字体大小的单位,为绝对值
rem:相对于根元素<html>来设置大小,为相对值
em: 相对于父元素<body>来设置大小,为绝对值
vh: 相对于视口<veiwport>高度而定,长度为视口高度的1%,为百分比相对值
vw:相对于根元素<veiwport>宽度而定,长度为视口宽度的1%,为百分比相对值
31.ie低版本盒模型和标准盒模型的区别
IE低版本盒模型即怪异盒模型 padding border content 在其内部;
标准盒模型 padding + border + content
32.flex:1;代表什么意思
flex:1;=flex:1 1 auto; 即子元素自动分配剩余空间
33.一个div向左扭曲45度
div{transform:skew(45deg);}
34.空单元格隐藏
{empty-cells:hide/SHOW}
35.表格标题
<caption>表格标题</caption>
36.简述get和post的区别
1.行为方式不同:get从服务器获取数据,post向服务器传送数据;
2.过程不同:get过程可见,post过程不可见;
3.安全 效率不同:get比post安全性低、效率高;
4.get的传送数据量小,不能大于2kb(不同的浏览器会有所不同),post一般比较大,不受限制。
37.简述bfc的概念
块级元素格式化上下文或(不同的文档流层次)
38.简述什么是置换元素
有内在的尺寸,可写宽高。(默认就有 css 格式化外表范围的元素)
39.video都支持哪些格式
ogg mp4 webm
40.写一个3d圆柱
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
aside{height:500px;width:500px;margin:50px auto;position:relative;border:1px solid #39F;perspective:800px;perspective-origin:50% 0%;}
section{position:absolute;height:100px;width:100px;top:0;bottom:0;left:0;right:0;margin:auto;transition:200s;transform-style:preserve-3d;border:1px solid #39F;}
div{position:absolute;height:100px;width:100px;left:0;top:0;background:#3FC;}
.a1{transform:rotatey(45deg) translatez(130px)}
.a2{transform:rotatey(90deg) translatez(130px)}
.a3{transform:rotatey(135deg) translatez(130px)}
.a4{transform:rotatey(180deg) translatez(130px)}
.a5{transform:rotatey(225deg) translatez(130px)}
.a6{transform:rotatey(270deg) translatez(130px)}
.a7{transform:rotatey(315deg) translatez(130px)}
.a8{transform:rotatey(360deg) translatez(130px)}
section:hover{transform:rotatey(36000deg)}
</style>
</head>
<body>
<aside>
<section>
<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>
<div class="a4"></div>
<div class="a5"></div>
<div class="a6"></div>
<div class="a7"></div>
<div class="a8"></div>
</section>
</aside>
</body>
</html>
立方体
/*aside{height:500px;width:500px;perspective:800px;perspective-origin:50% 50%;positive:relative;border:1px solid red;margin:100px auto;}
section{height:100px;width:100px;position:absolute;top:0;bottom:0;left:0;right:0;margin:auto;border:1px solid #000;transform-style:preserve-3d;transition:2s;}
div{height:100px;width:100px;background:#3CC;position:absolute;top:0;left:0;}
.a1{transform:rotatey(90deg) translatez(-50px);}
.a2{transform:rotatey(90deg) translatez(50px);}
.a3{transform:rotatex(90deg) translatez(-50px);}
.a4{transform:rotatex(90deg) translatez(50px);}
.a5{transform:rotatez(90deg) translatez(-50px);}
.a6{transform:rotatez(90deg) translatez(50px);}
section:hover{transform:rotate3d(1,1,1,360deg);}*/