HTML5和CSS3提高

一、HTML5的新特性

增加了一些新的标签,新的表单,新的表单属性,IE9+以上版本的浏览器才支持

注意:

这些语义化标准主要针对搜索引擎的

新标签可以使用多次

在IE9中需要把这些元素转化为块级元素

新增的多媒体标签

主要包含两个

1、音频:<audio>

2、视频:<video>

1、视频<video>

语法:

<video src="文件地址" controls="controls"></video>

谷歌浏览器把autoplay属性给我们禁用了,IE可以用

2、音频<audio>
新增的input类型

我们验证的时候必须添加表单域form,点击提交按钮就可以验证

新增的表单属性

二、CSS的新特性

css新增选择器
1、属性选择器

根据元素特定属性来选择元素

2、结构伪类选择器

主要根据文档结构来选择元素,常用于父级选择器里面的子元素

nth-child(n)里面的n可以是数字(选择第n个子元素,从1开始)、关键字(even偶数,odd奇数)、公式(从0开始计算,但是第0个元素或者超出了元素的个数会被忽略)

nth-child会把所有的盒子都排列序号,执行的时候首先看 :nth-child(1) 之后回去看前面div

nth-of-type 会把指定的盒子排列序号,执行时候先看 div指定的元素 之后看 :nth-of-type(1)第几个盒子

3、伪元素选择器

帮助我们利用CSS创建新标签元素不需要HTML标签

显示隐藏遮罩案例

伪元素选择器案例
CSS盒子模型

CSS3可以通过box-sizing来指定盒模型,有两个值:即可指定为content-box、border-box,这样计算盒子大小的方式就发生改变

1、box-sizing: content-box 盒子大小为width +padding +border (以前默认的)

2、box-sizing: border-box 盒子大小为width

如果盒子模型我们改为了box-sizing: border-box,那padding和border就不会撑大盒子(前提padding和border不会超过width宽度)

CSS3的其他特性
1、图片变模糊

CSS3滤镜filter:

filter css 属性将模糊或颜色偏移等图形效果应用于元素

filter: 函数(); 例如: filter: blur(5px);模糊处理 数值越大越模糊

2、计算盒子宽度 width:calc函数

width: calc(100%-80px);括号里面可以使用加减乘除计算

CSS3过渡 transition

过渡是CSS3中具有颠覆性的特征之一,

过渡动画:从一个状态 渐渐地过渡到另一个状态

我们现在经常和 :hover 一起搭配使用

过渡使用口诀:谁做过渡给谁加

如果想要写多个属性利用逗号进行分割

三、广义的HTML5

广义的HTML5是HTML5+CSS3+JavaScript

相关推荐
百度一下吧3 小时前
H5 中 CDN 的加载时机与接入方式
html5
sm_926787053 小时前
RFID 标签打印的技术实现要点与二次开发实践
java·大数据·前端·c++·编辑器
IMPYLH3 小时前
HTML 的 <video> 元素
前端·html
溪语流沙4 小时前
【每天一个CSS | Day19】流光文字与一笔写成的手写签名
前端·javascript·css
逐光者9334 小时前
STM32——SPI 屏 · Flash · 高速
java·前端·stm32
To_OC4 小时前
同样是让 AI 写全栈,为什么别人一句话就够了
前端·前端框架·next.js
CDwenhuohuo4 小时前
electron pc项目打包成桌面端
前端·javascript·electron
前端大斗师4 小时前
「大于 1000」把 1000 元那单也算进去了:我在 Vue3 订单页对了 10 句话
前端·人工智能·typescript·大模型·原力计划
Jmyd01235 小时前
用 Web VR 引擎搭建 3D 虚拟展厅:从素材上云到多端实时渲染的完整数据链路
前端·3d·vr·三维数字化
刘天远6 小时前
Agent成本核算实现:事件表、状态分布与Python归集
前端·数据库·人工智能·python