HTML5基础知识总结

最新推荐文章于 2023-12-01 23:40:26 发布

weboya

最新推荐文章于 2023-12-01 23:40:26 发布

阅读量702

点赞数

本文链接：https://blog.csdn.net/Mr_Outis/article/details/77852164

版权

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);}*/

weboya

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5基础知识总结

1.html基本结构 2.表示什么意思声明要写的类型是html类型3.html语法常规标记空标记4.三种样式表（标出）内部外部@important url(路径)内联语法：5.css语法选择符{属性:“属性值”}
复制链接

扫一扫