header 头部标签
就是一个具有语义化的标签
可以像div一样设置宽与高等属性
当高度设置为百分比时,文字的垂直居中的解决方法
通过定位的方法来进行实现,可以设置绝对定位,也可以设置相对定位,绝对定位较为简单,但是是文档脱离标准流,会使后面的处理变得不方便,谨慎使用
可以通过给父元素添加一个display:table属性,对子元素添加display:table-cell;vertical-align:middle的方法也可以实现文字的居中显示
可以使用弹性盒子的方式让文字进行居中显示,display:flex;
justify-content:center;
align-items:center;给盒子设置以上属性可以完成文字的垂直居中
section 内容标签
aside 提示标签
article 文章标签
footer 尾部标签
video 视频标签
这是一个双标签
src 文件地址
autoplay 自动播放
这个属性在最新的Chrome浏览器已经被禁用,防止开发者对用户进行过渡的干扰
controls 控件
显示的是浏览器自带的控件样式,这个可以用js后期进行统一设置
loop 循环播放
poster 加载等待图片
在网络不好时,为了提升用户体验用于展示的海报图片
audio 音频标签
src 文件地址
autoplay 自动播放
loop 循环播放
preload
出现该属性,当页面在加载的时候加载音频,并预备播放
当有autoplay时,可以忽略
可以通过加muted属性来触发,但是静音的播放依旧不完美,可以通过插入一个空白的播放片段来触发,依靠iframe标签来实现
这些方法在某些场景下都有一定的问题存在,要根据具体的情况进行选择
文字阴影
‘用于给文字添加阴影,让其在页面中显示更加丰富
语法
text-shadow
必写属性h-shadow与v-shadow分别为水平位置与垂直位置,可以设置负值
blur为模糊距离 用于控制模糊的虚实
color用于控制模糊的颜色,如果不进行设置这个颜色与文本颜色相同
盒子阴影
box-shadow
必写属性与文字阴影相同
与文字不同的是spread是阴影的尺寸,用于控制阴影区域的大小
还有inset设置阴影的位置,默认为outsed,但不能设置为outsed,设置之后浏览器无法识别。