html5和c3属性,H5与C3不得不说的知识点

1 HTML 5

html5包含htm5 + css3 + javascript

1.1 新增语义标签

头部

导航栏

块级

内容

侧边栏

脚部

注意:可以多次使用;ie9中需要转换为块级元素;针对搜索引擎;针对于移动端;

1.2 新增多媒体标签

1.2.1 音频标签 audio

格式:ogg.mp3.

浏览器版本太低,不支持本音频,请升级浏览器!

属性:

controls:显示播放按钮

loop:loop 循环

autoplay:autoplay:自动播放 谷歌禁用了该功能

src:音频url

不同浏览器支持的格式不同,采取方案是为音频准备多个格式

1.2.2 视频模式 video

格式:ogg,mp4,webm

你的浏览器版本太低,请升级浏览器

属性:

src:视频的url

controls:显示播放控件

autoplay:自动播放

muted:静音播放 解决谷歌自动播放问题

loop:循环

poster:加载等待时显示的内容

1.3 新增的表单标签 表单属性

1.邮箱

2.网址

3.日期

4.time month week

5. 数字

6.手机号码

7.搜索框

8.颜色选择表单

属性:

1. required 内容不能为空

2. placeholder="请输入内容" 提示文字 占位符

3. autofocus 自动定位光标

4.multiple:多文件提交

5.autocomplete:on off 默认打开 默认提示输入过的内容 必须有name属性 成功提交过

2 CSS3

2.1 新增css3选择器

2.1.1 css3属性选择器

button[disabled]{

cursor:pointer;

}

/*标签[属性名]{

} 属性选择器 类选择器 伪类选择器权重 0010

标签[属性名="属性值"]{

}

标签[属性名^="val"]{

以val开头的

}

标签[属性名$="val"]{

以val结尾的

}

标签名[属性名*="val"]{

包含val的

}*/

2.1.2 css3结构伪类选择器

E:first-child 匹配第一个子元E

E:last-child 匹配最后一个子元素E

E:nth-child(n) 匹配父元素中的第n个子元素 不管子元素的类型

n可以是数字 公式 关键字 even 偶数 odd 奇数 如果公式,n从0开始计算

2n:偶数

2n+1:奇数

5n:5 10 15

n+5:从第5个开始

-n+5:前5个 包含第5个

注意:0和超过的不显示

E:first-of-type 指定类型的第一个

E:last-of-type 指定类型的最后一个

E:nth-of-type(n) 指定类型的第n个

2.1.2 伪元素选择器 权重为0001

div{

width:20px;

height:20px;

border:1px solid red;

}

div::before{

content:'我';/*内容的前面 是inline 改 inline-block*/

}

div::after{

content:"你"; /*内容的后面*/

}

2.2 转换

2.2.1 2D转换

转换transform:转换就是变形。

2.2.1.1 平移 translate

1.移动 translate

div{

width:100px;

height;100px;

transform:translate(100px,100px); /*水平移动100px 垂直移动100px*/

}

/*注意:不会影响其他盒子的位置

translate对于行内元素是无效的*/

/*实现垂直居中*/

div{

width:500px;

height:500px;

background:pink;

position:relative;

}

p{

width:200px;

height:200px;

background:blue;

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%); /* 跟%是相对于盒子自身来说的*/

}

2.2.1.2 旋转 rotate

div{

transform:rotate(40deg); /*负值就是逆时针旋转*/

transform-origin:left bottom;/* 默认50% 50% = center center 也可以是像素 */

}

2.2.1.3 缩放 scale

div{

transform:scale(2,1); x,y

/*等比例缩放:*/

transform:scale(2);

/*进行缩小 小于1*/

transform:scale(0.4);

}

优势:

不会影响其他盒子,而且可以设置缩放中心点

2.2.1.4 综合写法

div{

transform:translate() rotate() scale();

/*位移和其他属性一起写,位移必须放在最前面;*/

}

3.动画

animation:动画

使用:1.先定义动画 2.再使用动画

div{

width:200px;

height:200px;

background:yellow;

animation-name:move;

animation-duration:5s;

animation-timing-function:ease;/*ease-in; ease-out; 速度曲线*/

animation-delay:1s;/* 延长时间*/

animation-iteration-count:infinite; /*重复次数*/

animation-direction:normal; /*alternate; 是否反方向播放*/

animation-fill-mode:backwards;/* forwards; 结束时的状态*/

animation-play-sate:paused;/* running 控制动画停止或者播放*/

/*animation:名称 时间 曲线 开始时间 播放次数 是否反向 动画起始或者结束状态*/

}

@keyframs move{

0% from{

transform:translateX(0px);

}

100% to{

transform:translateX(1000px);

}

}

4. 3D转换

3d:近大远小

1、3d位移

body{

perspective: 500px; /*透视;让网页中产生透视效果; 透视写在被观察的父盒子上*/

}

div{

transform:translateX() translateY() translateZ();

transform:translate3d(); /*x,y,z 不能省略,没有直接写0 */

}

2、3d旋转 rotate3d();

div{

transform:rotateX();

transform:rotateY();

transform:rotateZ();

transform:rotate3d(x,y,z,deg);

transform:rotate3d(1,0,0,45deg); /* 沿x轴旋转 */

}

3.transform-style 控制子元素是否开启3d

div{

transform-style:preserve-3d; /* 给父盒子添加 */

}

5. 浏览器的私有前缀

div{

-moz-:火狐

-ms-:ie

-webkit-:safari,chrome

-o-:Opera

-o-border-radius:10px;

}

6 补充

1. 线性渐变

背景渐变必须添加浏览器私有前缀;

默认是从上往下显示

div{

background:-webkit-linear-gradient(left,red,blue);

background:-webkit-linear-gradient(left top,red,blue); /*从左上角到右下 角进行渐变 */

}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ae绘图未指定错误怎么办_早晨深化设计研究院47个快捷键50个CAD技巧助你神速绘图,玩转CAD...

终于知道为什么别人用CAD总比我快了,原来他们早就掌握了这些实用的CAD技巧,还没看完我就默默地转了,总有用得到的时候。一、47个快捷键1. 创建直线的快捷方式是L空格2. 创建圆的快捷方式是C空格3. 创建圆弧的快捷方式是A空格4. 创建矩形的快捷…

iOS项目架构 小谈

层级结构,自底向上 持久层(File,Realm,SQLite)<>网络层(相信每个公司都有自己的网络层吧)>业务层(ViewModel)>展示层(View,VC) 持久层 耦合到网络层 设计要点 持久模型的选择&#xff0c;我这里选择了文件&#xff0c;直接缓存了JSON.txt。并且维护一张表映射到文件…

计算机基础:存储系统知识笔记(二)

1、高速缓存 1.1 定义 用来存放当前最活跃的程序和数据。 特点&#xff1a;容量在几千字节到几兆之间&#xff0c;速度比主存快5~10倍左右。快速半导体组成。 1.2 高速缓存的组成 一般位于CPU和主存之间。主要包括管理模块、由相联存储器构成的存储表、小容量的高速存储器。 1.…

spu和sku区别

SPU(Standard Product Unit) 标准化产品单元 SPU是能够描述一个产品的单元&#xff0c;比如说&#xff0c;iPhone8就是一个SPU&#xff0c;与商家、颜色、款式、套餐无关。 SKU(Stock Keeping Unit) 库存量单元 SKU是用来定价和管理库存的&#xff0c;比如说&#xff0c;iPhon…

2020html5开发工具,2020web前端学习路线

原标题&#xff1a;2020web前端学习路线2020年最新web前端学习路线&#xff01;接下来&#xff0c;教大家如何从零基础小白学习web前端&#xff0c;没有基础的伙伴也不要着急&#xff0c;有给大家整理视频教程&#xff0c;文末&#xff0c;大家按需学习就好&#xff01;一、入门…

layuiajax提交表单控制层代码_漏洞预警|ThinkPHP 5.0 远程代码执行

漏洞预警|ThinkPHP 5.0 远程代码执行2019-01-11事件来源2019年1月11日&#xff0c;ThinkPHP Github仓库发布了新的版本v5.0.24&#xff0c;包含重要的安全更新&#xff0c;山石安服团队经过分析把该漏洞危险级别定为严重。漏洞描述ThinkPHP是一个快速、兼容而且简单的轻量级国产…

oracle sql日期比较

oracle sql日期比较: 在当前时间之前: select * from up_date where update < to_date(2007-09-07 00:00:00,yyyy-mm-dd hh24:mi:ss) select * from up_date where update < to_date(2007-09-07 00:00:00,yyyy-mm-dd hh24:mi:ss)在当前时间只后: select * from up_date w…

微信商户平台结算周期T+1是什么意思

我们在商户平台的管理后台&#xff0c;有的时候&#xff0c;用户支付了&#xff0c;可是却没有看到有资金信息&#xff0c;这个一般是因为您的账户类似的T1的原因。那结算周期T1是什么意思呢&#xff1f; 通俗的理解就是&#xff1a;交易日的次日。 T就是today &#xff08;今天…

计算机基础:存储系统知识笔记(三)

1、相联存储器 1、相联存储器介绍 属于按内容访问的存储器。 原理&#xff1a;把数据或数据某一独立单元作为关键字&#xff0c;用该关键字和存储器的每个存储单元比较&#xff0c;相同则表示找到对应的存储单元。 2、相联存储器的组成部件 1、输入检索寄存器&#xff1a;存放要…

事业单位考试题库计算机网络,2015年事业单位计算机基础知识试题及答案

2015年事业单位计算机基础知识试题及答案一、单选题1、根据报文交换的基本原理&#xff0c;可以将其交换系统的功能概括为A)存储系统 B)转发系统C)存储-转发系统 D) 传输-控制系统2、TCP/IP网络类型中&#xff0c;提供端到端的通信的是A)应用层 B) 传输层C)网络层 D)网络接口层…

list 排序_十个必知的排序算法|Python实例系列

十大排序:1.冒泡排序2.选择排序3.插入排序4.希尔排序5.归并排序6.快速排序7.堆排序8.计数排序9.桶排序10.基数排序完整代码和注释如下# -*- coding: UTF-8 -*-#Space: https://github.com/Tri-x/exercise#Space: https://space.bilibili.com/187492698#Author: Trix#Descriptio…

MySQL的安装及使用教程

MySQL的安装及使用教程 一、 MySQL的下载及安装 首先登陆MySQL的官网&#xff0c;选择Downloads→Windows→MySQL Installer→Windows(x86,32-bit),MSI Installer 在安装的时候&#xff0c;可能要下载 .net Framework&#xff0c;直接下载就行&#xff0c;接着一步一步安装就可…

小程序提供几种结算周期? T+1是什么意思?

小程序提供4种固定的阶梯周期选择:T1、T7、T14、T28;其中T代表“Today”&#xff0c;今天的收入会在1(第2天)后自 动结算至银行卡上。

提高国内访问GitHub速度的9种方案~

GitHub 镜像访问GitHub文件加速Github 加速下载加速你的 Github谷歌浏览器 GitHub 加速插件(推荐)GitHub raw 加速GitHub Jsdelivr通过 Gitee 中转 fork 仓库下载通过修改 HOSTS 文件进行加速为什么 github 下载速度这么慢&#xff1f;如何提高 github 的下载速度&#xff1f;…

计算机术语翻译在线,计算机术语翻译

小编为大家整理了计算机术语翻译&#xff0c;希望对你有帮助哦!计算机术语翻译&#xff1a;so-dimm(small outline dual in-line memory modules&#xff0c;小型双重内嵌式内存模块)spd(serial presence detect&#xff0c;串行存在检查)sram(static random access memory&…

python数据可视化源码_Python数据分析:基于Plotly的动态可视化绘图 随书源码[101MB]...

随着信息技术的发展和硬件设备成本的降低&#xff0c;当今的互联网存在海量的数据&#xff0c;要想快速从这些数据中获取更多有效的信息&#xff0c;数据可视化是重要的一环。对于Python语言来说&#xff0c;比较传统的数据可视化模块是Matplotlib&#xff0c;但它存在不够美观…

JS中原型链的理解

在谈原型链之前&#xff0c;我们首先要了解自定义函数与 Function 之间是什么关系&#xff0c;而构造函数、原型和实例之间又存在什么千丝万缕的关系呢&#xff1f;其实&#xff0c;所有的函数都是 Function 的实例。在构造函数上都有一个原型属性 prototype&#xff0c;该属性…

返利是什么意思

就是将钱返给你。 按消费金额的10%返利&#xff1a; 如果你消费1000元&#xff0c;返给你100010%100元&#xff1b;

计算机系统基础:总线结构知识笔记

1、总线定义 计算机和设备之间传输信息的公共数据通道&#xff0c;是连接计算机硬件内多种设备的通信线路。它实现了总线上所有设备共享。 2、总线的分类 2.1 数据总线&#xff08;DB&#xff09; 用来传递数据信息&#xff0c;双向的。数据总线的宽度决定了CPU和计算机奇特设备…

html引用c 变量,Y.A.K.E

记录一次C项目改造中定义全局变量的操作.我对C/c不太熟悉,在修改别人项目的时候,想弄个文件,专门存放全局变量.然后各种不对.xxx previously defined here错误 或者 error: redefinition of xxx或者initialized and declared extern反正各种问题.其实根本原因就是重复引用导致的…