1,你是怎么理解HTML语义化的?
1,
第一种举例:段落用 p 标题用 h1、2 边栏用 aside 主要内容用 main标签
第二种(发展史):
最开始是php后端写html 他们不会html 于是他们使用table布局 但是table是写表格的 严重违反了html的语义化
后来有了专门写css的前端 他们会用div+css布局 主要使用float+绝对定位布局 稍微符合html语义化
再后,前端专业化,他们知道html各个标签表达的意思 于是用恰当的标签展示内容 不会傻傻的只用div 他们会试着使用meta header h1 ul p main
2, meta viewport 是做什么用的,怎么写?
meta的写法: meta:vp 再点tab
控制页面在移动端缩放显示
![](https://img.haomeiwen.com/i4145758/7a7cf5d5be313b22.png)
3,垂直居中
方法一:before after height: 100% vertical-align:middle
![](https://img.haomeiwen.com/i4145758/89e9630e3d7e87f5.png)
代码实例
方法二:table / div装成table
1,table原生垂直居中
![](https://img.haomeiwen.com/i4145758/fc6de8e53e2a6d5a.png)
代码实例
2,div装成table
![](https://img.haomeiwen.com/i4145758/20cfe9fc4382e546.png)
3,定位(parent:relative child:absolute ) 子元素 top: 50% margin-top:负子元素高度一半
![](https://img.haomeiwen.com/i4145758/285a0538cf539033.png)
代码实例
4,定位(parent:relative child:absolute ) 子元素 top: 50% transform:translate(0,-50%)
![](https://img.haomeiwen.com/i4145758/5ee9ead0b6308b74.png)
5,absolute margin auto top:0 left:0 bottom:0 right:0
![](https://img.haomeiwen.com/i4145758/51c07213b842fd58.png)
代码实例
4,一个选择器优先级的特例
![](https://img.haomeiwen.com/i4145758/7bb1c4bbc9a85cec.png)
![](https://img.haomeiwen.com/i4145758/5e529b21a2b4bbd0.png)
5,js的数据类型
string number boolean objec undefined null symbole
其中:object包括: 数组 函数 时间 正则
number包括:NAN
网友评论