HTML5基础知识总结

1.html基本结构 









 
2.表示什么意思 
 
声明要写的类型是html类型




3.html语法


<标记 属性=“属性值” >常规标记
<标记 属性=“属性值” >空标记




4.三种样式表（标出）


内部


外部< link rel="stylesheet" href="路径" type="text/css">





内联 语法：<标签 style=属性:“属性值”>


5.css语法


选择符{属性:“属性值”}


6.外部样式表导入的两种方法(说出区别) 


< link rel="stylesheet" href="路径" type="text/css">





   区别：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：相对于根元素来设置大小，为相对值 


em： 相对于父元素来设置大小，为绝对值


vh： 相对于视口高度而定，长度为视口高度的1%，为百分比相对值

vw：相对于根元素宽度而定，长度为视口宽度的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.表格标题
   
表格标题


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圆柱

   

   

   

   

   

   

   

    

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