首页 前端知识 HTML5与CSS3总结

HTML5与CSS3总结

2024-02-02 09:02:36 前端知识 前端哥 324 824 我要收藏

HTML5总结

1.HTML5由W3C和WHAT组织机构共同研发出来的,于2014年正式发布。

2.HTML5成为了新一代网页开发标准。

3.HTML5新特性(面试)
1)增加了audio和video音频播放,抛弃了Flash
2)新增了canvas画布(绘画,制作动画(如小游戏开发等))
3)地理定位
4)增加了离线缓存
5)硬件加速
6)Web Socket(全双工通信)
7)增加了本地存储
8)新增了一些语义化标签

网页布局标签

header:页首
nav:导航栏
aside:侧边栏
main:主体
section:区块
article:文章
footer:页尾

5.语义化标签
1)mark:高亮显示(行级)
2)details(描述)与summary(摘要):一般用于名词解释或用于封装一个区块等
3)meter:定义度量衡
属性:value/min/max
4)progress:进度条
属性:value/min/max
5)dialog:对话框或窗口
6)figure:用于对元素进行组合(一般用来组合一张图的标题、图片和图片描述等)

6.HTML5多媒体
1)audio
播放音乐或音频。IE9以下的版本不支持。

​ a)支持的格式
​ .mp3/.ogg/.wav

​ b)属性
​ src:文件路径
​ autoplay:自动播放
​ loop:循环
​ controls:控制条
​ muted:静音
​ preload:预加载(当使用autoplay时,preload自动失效)

2)video
加载视频。IE9以下的版本不支持。

​ a)支持的格式
​ .mp4/.ogg/.webm

​ b)属性
​ src:文件路径
​ autoplay:自动播放
​ loop:循环
​ controls:控制条
​ muted:静音
​ preload:预加载(当使用autoplay时,preload自动失效)
​ width:宽度
​ height:高度

​ poster:海报

3)embed
嵌入内容或加载插件。

​ 属性:
​ src:文件路径
​ width:宽度
​ height:高度
​ type:类型

4)canvas
画布。是一个容器元素。

注意:
a.单独使用canvas没有什么意义,它必须结合Javascript使用。它的具体功能体现是通过
Javascript体现现来的。

​ b.canvas的宽高最好不要通过css实现,而是直接使用标签属性width和height实现。

7.HTML5常用属性
1)contentEditable
将标签转换为可编辑状态。可用于所有标签。它的值有true/false。

​ 2)hidden
​ 对元素进行隐藏。一般用来传值或当某个条件成立,执行内容显示。默认值为hidden。

​ 3)data-*
​ 用于存储页面或应用程序的私有自定义数据。一般用于传值。

​ 4)multiple
​ 规定输入域中可选择多个内容。用于表单组件中,如file/select。

​ 5)required
​ 约束表单元素在提交前必须输入值。用于表单组件中,需要结合提交按钮使用。

​ 6)pattern
​ 用于验证输入字段的模式。用于表单组件中,需要结合提交按钮使用。

8.表单组件
1)color:颜色
2)email:邮箱
3)tel:电话号码
4)url:网址
5)number:数字
6)range:范围
7)search:搜索
8)date:日期
9)datetime:日期时间
10)datetime-local:本地日期时间
11)year:年份
12)month:月份
13)time:时间

9.表单属性
1)formaction:修改action数据提交的地方

​ 2)formenctype:修改表单请求的类型

​ 3)formmethod:修改数据提交的方法

​ 4)form:设置表单元素属于哪个表单

​ 5)novalidate:不验证

10.input属性
1)autocomplete:自动完成
用来帮助用户输入,每一次输入的内容,浏览器是否保存输入的值,以备将来使用。值有:
on/off,默认为on。
为了保护敏感数据(如用户帐号、密码等),避免本地浏览器对它们不安全存储,一般需要关闭。

​ 2)autofocus:自动获焦

​ 3)step:步长

​ 4)multiple:多选

​ 5)pattern:正则匹配

​ 6)placeholder:输入提示

​ 7)required:必须输入


CSS3总结

1.CSS3是CSS2.1的一个升级版,它是对CSS的一个扩展。

2.CSS3的主要新特性:
1)选择器
2)阴影
3)形状转换(2D <-> 3D)
4)变形
5)动画(过渡动画、帧动画)
6)边框
7)多重背景
8)反射
9)文字
10)颜色函数(rgba/hsl/hsla)
11)滤镜(filter)
12)弹性布局
13)多列布局
14)栅格布局
15)盒模型
16)Web字体
17)媒体查询

3.CSS3不是属于浏览器或同一浏览器的不同版本都支持,所以需要兼容处理,通常的做法就是加厂商前缀。

1)主流浏览器内核(面试点)
​ a)Trident: IE内核
​ b)Webkit:Chrome和Safari内核
​ c)Gecko:FireFox内核
​ d)Blink(是Webkit的一个分支): Chrome和Opera内核

Tips(技巧):
目前国内的浏览器大多都是双核的(IE内核 Chrome内核)

厂商前缀

IE: -ms-
​ Chrome&Safari: -webkit-
​ FireFox: -moz-
​ Opera: -o-

CSS3选择器

丰富选择的目的:在标签中减少class和id属性的使用。

1)属性选择器
​ [属性名]:p[class] 查找p标签下的所有class属性

[属性名=属性值]: p[class=content] 查找p标签下的所有class属性名=content的属性值

[属性名 ^ =属性值]:p[class^=content] 查找class属性值以content开头

[属性名 $=属性值]:p[class $=content] 查找class属性值以content结尾

[属性名 * =属性值]:p[class * =p] 查找class属性值中包含有p的

 **结构性伪类**

:root 匹配html标签,与body选择器效果一样。

子元素选择:匹配父元素中连续的子元素

:first-child 第1个子元素 p:first-child
​ :last-child 最后1个子元素 p:last-child
​ :nth-child(n) 第几个子元素 p:nth-child(2) p:nth-child(2n){ 2n表示2的倍数,2、4、6、8……

p:nth-child(3n 1){ 3n表示3的倍数加1,4、7、11……

:nth-last-child(n) 倒数第n个子元素 p:nth-last-child(4)

nth-of-type类:用于匹配父元素中兄弟子元素,可以用于子元素非连续的情况

:nth-of-type(n) p:nth-of-type(3){ 找的是p标签中的第三个兄弟p标签,如果第3个不是p标签,将跳过,继续向下查找,直到找到为止。

p:nth-child(3){ 找第3个子元素,如果是p标签,就找到了,如果不是,就没找到,且不再继续查找

:nth-last-of-type(n) p:nth-last-of-type(4){ 找的是p标签中倒数第4个兄弟p标签,如果第4个不是p标签,将跳过,继续向前查找,直到找到为止。

:only-child 父元素中仅有一个子元素 p:only-child{查找父元素中只有的一个标签为p标签,不允许其它标签存在,但在p标签中可以有子标签。
​ :only-of-type 父元素中仅有一个兄弟元素 p:only-of-type{ 选择父元素中p标签是唯一

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1076.html
标签
评论
发布的文章

Ajax用法总结

2024-02-14 09:02:07

JQuery之jsTree树形插件

2024-02-14 09:02:01

Why React Doesn‘t Need jQuery?

2024-02-14 09:02:00

jQuery模板字符串

2024-02-14 09:02:58

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!