css3和h5的新特性

H5的新特性

1.   用于绘画 canvas 元素。

2.   用于媒介回放的 video 和 audio 元素。

3.   本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
  sessionStorage 的数据在浏览器关闭后自动删除。

4.   语意化更好的内容元素,比如 article、footer、header、nav、section

5.   表单控件,calendar、date、time、email、url、search。
6.地理(Geolocation) API

7.新的技术webworker, websocket, Geolocation

语义化元素:有利于搜索引擎优化和快速查找

表单控件:

新的输入型控件

•email:  电子邮箱文本框,跟普通的没什么区别

–当输入不是邮箱的时候,验证通不过

–移动端的键盘会有变化

•tel   :   电话号码

•url   :   网页的URL

•search:  搜索引擎

–chrome下输入文字后,会多出一个关闭的X

 

•range:  特定范围内的数值选择器

–min、max、step( 步数 )

–例子 :  用JS来显示当前数值

 

新的输入型控件_2

•number:  只能包含数字的输入框

•color:  颜色选择器

•datetime  :  显示完整日期

•datetime-local  :  显示完整日期,不含时区

•time:  显示时间,不含时区

•date:    显示日期

•week:  显示周

•month:  显示月

 

新的表单特性和函数

•placeholder  :  输入框提示信息

– 例子 :  微博的密码框提示

 

•autocomplete  :  是否保存用户输入值

– 默认为on,关闭提示选择off

 

•autofocus:  指定表单获取输入焦点

•list和datalist  :  为输入框构造一个选择列表

– list值为datalist标签的id

 

•required:  此项必填,不能为空

•Pattern : 正则验证  pattern="\d{1,5}“

•Formaction在submit里定义提交地址

 

新的选择器

•querySelector

•querySelectorAll

•getElementsByClassName

获取class列表属性

•classList

–length :  class的长度

–add()  :  添加class方法

–remove()  :  删除class方法

–toggle() :  切换class方法 

 

CSS3 模块

CSS3被拆分为"模块"。旧规范已拆分成小块,还增加了新的。

一些最重要CSS3模块如下:

  • 选择器
    • 盒模型
    • 背景和边框
    • 文字特效
    • 2D/3D转换
    • 动画
    • 多列布局
    • 用户界面

CSS3选择器有哪些?

答:属性选择器、伪类选择器、伪元素选择器。

CSS3新特性有哪些?
答:1.颜色:新增RGBA,HSLA模式
2. 文字阴影(text-shadow、)
3.边框: 圆角(border-radius)边框阴影: box-shadow
4. 盒子模型:box-sizing
5.背景:background-size 设置背景图片的尺寸background-origin 设置背景图片的原点
background-clip 设置背景图片的裁切区域,以”,”分隔可以设置多背景,用于自适应布局
6.渐变:linear-gradient、radial-gradient
7. 过渡:transition,可实现动画
8. 自定义动画
9. 在CSS3中唯一引入的伪元素是 ::selection.
10. 媒体查询,多栏布局
11. border-image
12.2D转换:transform:translate(x,y) rotate(x,y) skew(x,y) scale(x,y)

13. 3D转换

 

CSS3新增伪类有那些?
p:first-of-type 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。
    p:last-of-type  选择属于其父元素的最后 <p> 元素的每个 <p> 元素。
    p:only-of-type  选择属于其父元素唯一的 <p> 元素的每个 <p> 元素。
    p:only-child    选择属于其父元素的唯一子元素的每个 <p> 元素。
    p:nth-child(2)  选择属于其父元素的第二个子元素的每个 <p> 元素。
    :enabled、:disabled 控制表单控件的禁用状态。

:checked,单选框或复选框被选中。
 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/254861.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

六、H5新特性

文章目录 一、H5的兼容二、H5新增特性2.1 语义化标签2.2 增强表单2.3 音频、视频 一、H5的兼容 支持 HTML5的浏览器包括Firefox(火狐浏览器)&#xff0c;IE9及其更高版本&#xff0c;Chrome(谷歌浏览器)&#xff0c;Safari,Opera等&#xff0c;国内的遨游浏览器&#xff0c;以…

h5简介和新特性

h5简介和新特性 语义化标签表单新增的type属性表单元素的其他属性新增的表单元素&#xff0c;datalisth5新增表单事件meter标签fieldset标签和legend标签自定义属性规范全屏接口上传图片实时预览进度条参考手册 学习资源推荐 https://blog.csdn.net/qq_42813491/article/detai…

最详细H5新特性

1. 语义化标签 &#xff08;1&#xff09;比如&#xff1a;header、conent、footer、aside、nav、section、article等语义化标签。 &#xff08;2&#xff09;语义化标签的好处&#xff1a;结构清楚&#xff0c;易于阅读&#xff0c;可维护性更高&#xff0c;有利于SEO的优化…

H5新增了哪些新特性

目录 前言 1.语义化标签 2.form表单增强 3.视频和音频 4.Canvas绘图 5.SVG绘图 6.地理位置定位&#xff08;Geolocation API &#xff09; 7.拖放API 8.Web Worker 9.Web Storage 10.Web Socket 总结 前言 本期为大家总结面试时常被问到的一个问题&#xff0c;那就…

HTML 5 的十大新特性

HTML5 十大新特性总结 一、语义标签 二、增强型表单 三、视频和音频 四、Canvas绘图 五、SVG绘图 六、拖拉API 七、WebWorker 八、WebStorage 九、WebSocket 十、地理定位 一、语义化标签 1.1 什么是语义化标签? 语义化标签既是使标签有自己的含义 1.2 语义化标签…

【靶场实战】Vulnhub - JANGOW: 1.0.1 靶标实战

靶场地址&#xff1a;https://www.vulnhub.com/entry/jangow-101,754/ 靶场IP&#xff1a;192.168.160.215 信息收集 使用Nmap对目标进行扫描 Nmap -sV -O -p- 192.168.160.215 经过漫长的等待扫描完成&#xff0c;该靶标开启了21、80两个端口&#xff0c;21端口运行服务为f…

什么样的打码网站算正规的打码网站

自动打码平台是通过计算机语言对图片图片验证码的一种识别&#xff0c;将图片验证码通过系统自动的识别出来&#xff0c;并且通过一定的途径自动输入需要填写图片验证码的框。这样的平台就成为打码平台平台。实际上就是对于图片验证码的识别破解。答题吧打码平台平台就是利用的…

自动打码神器的准确率你担心么?

现在干什么都需要验证码&#xff0c;比如注册账号、登录账号等一些日常上网操作经常要输入验证码&#xff0c;而很多网站的验证码越来越难看懂。这样对于需要批量操作的人来说真的是折磨啊&#xff0c;但是有了这款验证码自动识别软件之后&#xff0c;大家就可以轻松识别复杂的…

JAVA 实现对图片打码,打马赛克

一. 图片区域类 package com.example.demo.xxx;/*** 图片区域类* author jlm**/ public class ImageArea {int x; //指定区域左上角横坐标int y; //指定区域左上角纵坐标int width; //指定区域宽度int height; //指定区域高度public ImageArea(int x, int y, int width, int h…

基于OpenCV_C++人脸检测打码技术

人脸检测并打码的关键&#xff0c;首先需要定位人脸区域&#xff0c;再修改人脸区域像素灰度值。 一 定义马赛克函数 定义生成马赛克函数 Generate_Mosaic&#xff0c;对图形 Mat& src 做操作&#xff0c;将需要操作的块&#xff08;faces&#xff09;存入数组 vector<…

Python可以解码吗,解码打码是如何实现的

前言 咳咳&#xff0c;进来的铁汁都是抱着学习的心态进来看的吧&#xff0c;咱今天不讲解解码&#xff0c;咱来说说python如何来实现打码功能~ 这一个个进来的 都是标题党吧哈哈哈 有兴趣的可以继续看看哦 最近重温了一档综艺节目 至于叫什么 这里就不细说了 老是看着看着就…

打码软件是真的吗

日前在各大社交网站上热传的“打码软件赚钱”帖子引发不少打码兼职人员的关注。“打码赚钱”到底出自何处&#xff1f;是否有充足的实例&#xff1f; 打码软件是什么&#xff1f; 打码软件是一些验证码识别平台推出来的一种通过任务的发放&#xff0c;让兼职者能够进行…

黑产揭秘:“打码平台”那点事儿

简介 互联网业务的飞速发展&#xff0c;日渐渗透人类的生活&#xff0c;对经济、文化、社会产生巨大的影响&#xff0c;同时互联网业务安全也日趋重要。如同网络通信的基础安全设施防火墙&#xff0c;互联网业务安全也有其基础安全设施&#xff0d;&#xff0d;图片验证码和短…

有没有自动打码的软件

验证码是一把双刃剑&#xff0c;对于有的人是好&#xff0c;但是对于有的人却是让人真心“香菇蓝瘦”。 场景一&#xff1a; A:两个小时就赚了几十块钱&#xff0c;买副眼镜都买不起&#xff0c;赚的钱都去了药店买眼药水了&#xff1b; B&#xff1a;是的啊&#xff0c;要是能…

chatgpt赋能python:Python中的逆序操作

Python 中的逆序操作 在 Python 中&#xff0c;逆序&#xff08;reverse&#xff09;操作指的是将一个序列的元素顺序反转&#xff0c;也即将序列中最后一个元素变成第一个&#xff0c;倒数第二个元素变成第二个&#xff0c;以此类推。逆序有很多实际用途&#xff0c;比如根据…

chatgpt赋能python:Python中的SEO

Python 中的 SEO 搜索引擎优化(SEO)是指通过改进网站的结构和内容&#xff0c;使其在搜索引擎中的排名更高&#xff0c;从而吸引更多的访问者。Python是一种流行的编程语言&#xff0c;其在SEO中也占有重要的地位。 Python 中的关键词密度 搜索引擎通常会关注网页中的关键词…

nginx修改监听端口号8080_解决Nginx启动失败

一、Nginx下载 http://nginx.org/en/download.html 二、Nginx启动失败原因 1、本人下载的是nginx-1.12.1(稳定版)&#xff0c;下载完解压后&#xff0c;进入路径中&#xff0c;start nginx&#xff0c;发现窗口闪过。但是查找不到nginx进程。 2、进入 nginx-1.12.1\logs 路径下…

nginx 启动前端包

项目是前后端分离&#xff1a;前端用vue开发&#xff0c;后端用的是springboot开发&#xff0c;用nginx启动代理&#xff0c;启动前端包 1、安装nginx&#xff08;此步骤就不细说了&#xff0c;如图&#xff09; 2、将前端包放入nginx文件夹下 注&#xff1a;我放在project文…

linux下nginx启动不了,Nginx启动失败的几种错误处理

nginx启动失败 启动nginx失败&#xff0c;报错信息如下: Starting nginx: nginx: [emerg] bind() to 0.0.0.0:**** failed (13: Permission denied) 这通常是因为开启了SELinux的原因&#xff0c;使用命令 getenforce 可以查看SELinux状态&#xff0c;如果输出为 enforcing …

NGINX启动报错,端口被占用

NGINX启动报错&#xff0c;端口被占用解决方案&#xff08;修改端口号&#xff09;   Nginx (engine x) 是一个高性能的HTTP和反向代理服务器&#xff0c;也是一个IMAP/POP3/SMTP服务器。Nginx是由伊戈尔赛索耶夫为俄罗斯访问量第二的Rambler.ru 站点&#xff08;俄文&#x…