锐客网

  1. 首页 > it技术 > >

Html5&Css3新特性

1、HTML5新标签
HTML新加了许多语义化标签，这些标签由于是新出的，适用于高版本浏览器，ie9以下不推荐使用，推荐手机浏览器使用，因为手机浏览器出来的晚一点，但是浏览器的起点特别高。
Header 头部标签
nav 导航标签
section 文档中的区段标签
article 文章标签
aside 侧边栏
footer 页脚，底部标签

Html5&Css3新特性
文章图片
801509-20160711082959467-525706727.png 2、拖拽
拖拽是一种特别常见特性，应用范围非常广，在HTML5中拖拽成了一部分，任何元素都可以拖拽。
h5中使用draggable属性改为true即可,false就可以阻止拖拽

231231

3、音频(audio)，视频标签(video)
H5还规定了浏览器中的视频，音频规范
音频
对不起您的浏览器不支持音频

音频常用属性
autoplay 自动播放
controls 播放控件
loop 循环播放
视频

视频常用属性
controls 播放控件
autoplay 自动播放
muted 静音播放
loop 循环播放
poster 播放预加载图片
preload 预加载auto（默认加载）none(不加载)
4、新增input类型
可以挑选颜色 日期input 邮箱input 只包括年，月日期 只可以输入数字类型 类似于进度条 搜索框 手机号input 只包括时间日期 可以放url路径 xxx年的xx周

5、表单元素
【Html5&Css3新特性】标签 datalist
元素规定输入域的选项列表。
属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项：
使用 元素的列表属性与 元素绑定.

6、localStorage和sessionStorage
这是h5新出的两种数存储存方式。
localStorage和sessionStorage区别 1、localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。
2、sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
3、不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。
localStorage语法
// 设置localStorage localStorage.setItem('存储对象名', 存储对象值)//将localStorage中存储信息，由于localStorage中的存储值必须是个字符串，我们可以使用JSON.stringify()这个方法把他变成字符串 // 读取localStorage localStorage.getItem('存储对象名')// 获取localStorage中的信息，在获取到信息是，我们可以只使用JSON.parse()转换成对象使用 //删除或清空localStorage的方法 // 1、删除指定的 localStorage.removeItem("变量") // 2、清空所有的 localStorage.clear() // 遍历本地存储的方法 for (var i in localStorage) { if (localStorage.getItem(i)) { console.log(localStorage.getItem(i)); } }

sessionStorage语法 由于sessionStorage是在浏览器关闭就自动清除，就不存在清除问题
// 设置sessionStorage sessionStorage.setItem('存储对象名', 存储对象值) // 读取sessionStorage sesessionStorage.getItem('存储对象名')

7、HTML5 canvas(绘画)
什么是 canvas? 1、HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
2、 标签只是图形容器，您必须使用脚本来绘制图形。
3、你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。
简单实列

Canvas 坐标 canvas 是一个二维网格。
canvas 的左上角坐标为 (0,0)
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
Canvas - 路径 在Canvas上画线，我们将使用以下两种方法：
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
8、HTML5 地理定位
h5还推出了地理定位功能，但是要获取到用户同意才能进行定位
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。
下面是h5地理定位简单使用，不含错误处理。

9、H5 Web Workers
当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。（相当于实现多线程并发）
10、HTML5 WebSocket


WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。以下 API 用于创建 WebSocket 对象。 Html5&Css3新特性
文章图片
ws (1).png css3 1、css3新增选择器
属性选择器
input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; }

Html5&Css3新特性
文章图片
20180816104833536.png 结构性伪类选择器—root
:root{background:orange} html {background:orange; }

结构性伪类选择器—not
input:not([type="submit"]){ border:1px solid red; }

结构性伪类选择器—empty
p:empty { display: none; }

结构性伪类选择器—target :target选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。
结构性伪类选择器—first-child :first-child选择器表示的是选择父元素的第一个子元素的元素E。简单点理解就是选择元素中的第一个子元素，记住是子元素，而不是后代元素。
结构性伪类选择器—last-child :last-child选择器与:first-child选择器作用类似，不同的是:last-child选择器选择的是元素的最后一个子元素。
结构性伪类选择器—nth-child(n) :nth-child(n)选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。也就是说，参数n的值为0时，选择器将选择不到任何匹配的元素。
经验与技巧:当“:nth-child(n)”选择器中的n为一个表达式时，其中n是从0开始计算，当表达式的值为0或小于0的时候，不选择任何匹配的元素。如下表所示：

Html5&Css3新特性
文章图片
这里写图片描述 :only-child选择器 :only-child选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。
:enabled和:disabled选择器 在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器:enabled对这些表单元素设置样式。
:disabled选择器刚好与:enabled选择器相反，用来选择不可用表单元素。要正常使用:disabled选择器，需要在表单元素的HTML中设置“disabled”属性。
:checked选择器 在表单元素中，单选按钮和复选按钮都具有选中和未选中状态。（大家都知道，要覆写这两个按钮默认样式比较困难）。在CSS3中，我们可以通过状态选择器:checked配合其他标签实现自定义样式。而:checked表示的是选中状态。
::selection选择器 ::selection伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的。
:read-only和read-write选择器 :read-only伪类选择器用来指定处于只读状态元素的样式。简单点理解就是，元素中设置了“readonly=’readonly’”
:read-write选择器刚好与:read-only选择器相反，主要用来指定当元素处于非只读状态时的样式。
::before和::after ::before和::after这两个主要用来给元素的前面或后面插入内容，这两个常和”content”配合使用，使用的场景最多的就是清除浮动
:nth-of-type
p:nth-of-type(n){ //还可以写odd(奇数)和even(偶数) 还可以写使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。}

2、边框圆角
border-radius: 数值+单位(em,rem,px,%);

3、透明度
background: rgba(red, green, blue, 0-1); opacity: 0-1;

rgba()和opacity:; 区别 rgba()和opacity都能实现透明效果
但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度
而rgba()只作用于元素的颜色或其背景色。
4、Word Wrap
word-break: break-word; //长单词换行

5、文字阴影
text-shadow:x方向偏移量 y方向偏移量 阴影长度 阴影颜色;

6、盒阴影
box-shadow:x方向偏移量 y方向偏移量 阴影长度 阴影颜色

7、渐变
背景渐变：background: linear-gradient(颜色1,颜色2), 默认是从上往下，改变方向，在颜色1前加上: to 方向 也可以使用rgba()颜色 径向渐变：background: radial-gradient(red,blue,yellow);

8、transform变形
rotate(ndeg) 旋转n角度 scale(倍数) 缩放 scale(w倍数,h倍数) skew(ndeg) 变形 translate(x,y) 位置移动

9、 transition过渡
transition: all linear 03s; // all(全部) linear(运动曲线) （时间）

Html5&Css3新特性
文章图片
steps.png 10、css动画
自定义动画： @keyframs 动画名{ from{} to{} } 使用动画： 选择器{ css样式; animation:animation: name duration timing-function delay iteration-count direction fill-mode; /* animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 起始与结束状态 */ } /* 动画名称 */ animation-name: move; /* 动画花费时长 */ animation-duration: 2s; /* 动画速度曲线 */ animation-timing-function: ease-in-out; //上图运动曲线这里也可以使用 /* 动画等待多长时间执行 */ animation-delay: 2s; /* 规定动画播放次数 infinite: 无限循环 */ animation-iteration-count: infinite; /* 是否逆行播放 */ animation-direction: alternate; /* 动画结束之后的状态 */ animation-fill-mode: forwards;

11、媒体查询
媒体查询语法
@media screen and (min-width:970px){ body{ background-color: red; } } @media screen and (min-width: 560px) and (max-width: 969px){ body{ background-color: green; } } @media screen and (min-width: 321px) and (max-width: 559px){ body{ background-color: blue; } } @media screen and (max-width: 320px){ body{ background-color: yellow; } }

mediatype 查询类型 Html5&Css3新特性
文章图片
1.jpg 关键字 关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。
  • and：可以将多个媒体特性连接到一起，相当于“且”的意思。
  • not：排除某个媒体类型，相当于“非”的意思，可以省略。
  • only：指定某个特定的媒体类型，可以省略。
媒体查询书写规则 注意：为了防止混乱，媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们最喜欢的还是从小到大来写，这样代码更简洁
12、弹性盒(flex)
c3出来我认为最强大，最好用的就是弹性盒，解决了浮动出现的任何问题
###父项常见属性 flex-direction：设置主轴的方向 justify-content：设置主轴上的子元素排列方式 flex-wrap：设置子元素是否换行 align-content：设置侧轴上的子元素的排列方式（多行） align-items：设置侧轴上的子元素排列方式（单行） flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap

  • 在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有 ： 行和列、x 轴和y 轴
  • 默认主轴方向就是 x 轴方向，水平向右
  • 默认侧轴方向就是 y 轴方向，水平向下

    Html5&Css3新特性
    文章图片
    1.JPG

    注意： 主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的 Html5&Css3新特性
    文章图片
    2.JPG
justify-content
justify-content：设置主轴上的子元素排列方式

Html5&Css3新特性
文章图片
3.JPG flex-wrap
flex-wrap: 设置是否换行

  • 默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的。
  • nowrap 不换行
  • wrap 换行
align-content
align-content：设置侧轴上的子元素排列方式（多行）

设置子项在侧轴上的排列方式 并且只能用于子项出现 换行 的情况（多行），在单行下是没有效果的。

Html5&Css3新特性
文章图片
4.JPG align-items
align-items：设置侧轴上的子元素排列方式（单行）

  • 该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项（单行）的时候使用
  • flex-start 从头部开始
  • flex-end 从尾部开始
  • center 居中显示
  • stretch 拉伸
align-items和align-content区别
  • align-items 适用于单行情况下， 只有上对齐、下对齐、居中和 拉伸
  • align-content适应于换行（多行）的情况下（单行情况下无效）， 可以设置 上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
  • 总结就是单行找align-items 多行找 align-content
子项常见属性
  • flex子项目占的份数
flex属性 flex 属性定义子项目分配剩余空间，用flex来表示占多少份数。
.item { flex: ; /* 默认值 0 */ }

13、font-face属性
@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体
基本语法
@font-face { font-family: ; src:[][, []]*; [font-weight: ]; [font-style: ]; }

    推荐阅读


    上一篇：读一本好书——《每一天梦想练习》

    下一篇：写在开学之前