HTML5 & CSS3 内容收集(1)
1. HTML发展历史介绍
2. 浏览器支持
2.1 新增标签支持
在html5 中新增了很多的标签,其中包括8个新增语义结构标签。header, section, footer, aside, nav, main, article, figure
,但是在IE的一些版本中并不能够有效的支持。
/* 人为的进行一些处理,让代码在ie当中显示正常: */
header, section, footer, aside, nav, main, article, figure {
display: block;
}
因为新增的语义结构标签在代码中是一个块级元素,除了块级元素本身的特性以及语义之外没有其他的效果,所以可以简单的将其转换为块级元素,以保证在所有浏览器中正常的显示。
以上的写法并不能够在ie8以下实现样式,如果想要完整的兼容所有浏览器,可以采用Sjoerd Visscher 创建的"shiv"插件来解决问题。对于"shiv"这款插件,可以将文件下载下来直接使用,也可以采用静态库的方式加以使用,例如国内百度静态库:
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
在实际的应用当中,可以采用条件注释的方式加以引用,如下:
<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
2.2 HTML 条件注释
关于条件注释,应用普遍的是专门针对IE的条件注释,如下:
<!--[if lt IE 9]>
<![endif]-->
其中,lt 是修饰,同类型的修饰有以下几个:
lte:就是Less than or equal to的简写,也就是小于或等于的意思。
lt :就是Less than的简写,也就是小于的意思。
gte:就是Greater than or equal to的简写,也就是大于或等于的意思。
gt :就是Greater than的简写,也就是大于的意思。
! :就是不等于的意思,跟javascript里的不等于判断符相同
3. HTML5新增标签与属性
3.1 智能表单
3.1.1 新增表单元素
<datalist> 规定输入域的选项列表
这个属性规定form或则input域具有自动完成功能,当用户在自动完成域中开始输入时,浏览器显示设定好的提示。
<input type="text" list="car">
<datalist id="car">
<option value="car1"/>
<option value="car2"/>
<option value="car3"/>
<option value="car4"/>
</datalist>
<output> 用于不同类型的输出,比如脚本的计算等等。
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" name="b" value="50" /> +
<input type="number" name="a" value="10" /> =
<output name="result">60</output>
</form>
<keygen> 提供一种验证用户的可靠方法,目前被淘汰,虽然部分浏览器可以使用,但是不推荐。
<keygen>标签规定用于表单的密钥对生成器字段。
当提交表单时,会生成两个键,一个是私钥,一个公钥。
私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。
<form action="demo_keygen.asp" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>
3.1.2 新增input类型
color 选取颜色
date 从日期中选取日期
datetime 定义一个日期和时间控制器 (欧朋和safari支持,不推荐使用)
datetime-local 选择日期和时间
email 邮箱
month 选择月份
number 包含数值的输入域,也可以使用下面的属性对数值进行限定:
max 规定允许最大值
min 规定允许最小值
step 合法的数字间隔
value 默认值
range 包含一定范围的数值输入域,也可以使用下面的属性对数值进行限定:
max 规定允许最大值
min 规定允许最小值
step 合法的数字间隔
value 默认值
search 搜索域
tel 电话号码字段 (兼容性差,不推荐)
time 时间选取
url 域名
week 周和年
<form>
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="month">
<input type="number">
<input type="range">
<input type="search">
<input type="time">
<input type="url">
<input type="week">
</form>
3.1.3 新增表单属性
form /input 新属性
autocomplete 自动完成功能
Tip:这个属性可能失效的原因:①浏览器不支持 ② form开启但是input关闭或者form关闭但是Input开启。③没有设置name属性
这个属性应用于<form>标签以及以下类型的input标签 :text, search, url, telephone, email, password, datepickers, range 以及 color。
这个属性 是否开启可以通过 on 和 off来进行设置。
<form autocomplete="on">
<input type="text" autocomplete="on" name="user" >
</form>
form 属性
novalidate 规定在提交表单时不应该验证form 或者input域
input属性
autofocus 域自动地获得焦点
<input type="text" autofocus>
form 属性 规定输入域所属的一个或多个表单
<form id="form1"></form>
<input type="text" form="form1">
formaction 描述表单提交的URL地址 会覆盖掉form标签的action 属性
formmethod 属性
formmethod 属性定义了表单提交的方式。
formmethod 属性覆盖了 <form> 元素的的method 属性。
formnovalidate 属性
与form 中的novalidate属性相同,novalidate 属性是一个 boolean 属性,novalidate属性描述了 <input> 元素在表单提交时无需被验证。formnovalidate 属性会覆盖 <form> 元素的novalidate属性
formtarget 属性
设定页面的展示方式 ,值与target属性相同。这个属性通过情况下与type=submit搭配使用,设定数据提交后页面打开方式。
list 属性
list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
multiple 属性
multiple 属性规定<input> 元素中可选择多个值。
注意: multiple 属性适用于以下类型的<input> 标签:email 和 file
pattern 属性
pattern 属性描述了一个正则表达式用于验证<input> 元素的值。
注意:pattern 属性适用于以下类型的<input> 标签: text, search, url, tel, email, 和 password.
placeholder 表单提示
required 属性
设置了此属性的input为必填属性
3.2 新增结构标签
在html5中新增加了8个结构标签:
3.3 新增语义标签
meter 定义度量衡,仅用于已知最大和最小值的度量
比如:磁盘使用情况,查询结果等
不可以当作进度条来使用。
属性:
form 所属哪个表单
high 高的值
low 低的值
max 最大值
min 最小值
optimum 最优值
value 当前值
progress 进度条 IE9及之前不支持
不可以用来显示度量衡
属性:
max 规定需要完成的值
value 当前值
rp 定义不支持ruby元素的浏览器显示的内容
rt 定义字符(中文注音或者字符)的解释或发音
ruby 定义ruby注释(中文注音或字符)
三者通常组合使用 IE8及更早版本不支持
bdi 隔离
标签允许您设置一段文本,使其脱离其父元素的文本方向设置。
在发布用户评论或其他您无法完全控制的内容时,该标签很有用。
<ul>
<li>用户 <bdi>user1</bdi>: 60 分</li>
<li>用户 <bdi>user2</bdi>: 80 分</li>
<li>用户 <bdi>user3</bdi>: 90 分</li>
</ul>
4 HTML5新增技能
4.1 多媒体播放
在html5 中,给我们提供了音频与视频的播放以及对于flash动画的播放支持。
Tip:ie9以上浏览器以及其他的浏览器都支持该播放
音频播放:
<audio> 音频播放
<video> 标签 视频播放
<embed> 播放外部文件
4.2 拖放(Drag 和 Drop)
DataTransfer 对象:拖拽对象用来传递的媒介,使用一般为Event.dataTransfer。
draggable 属性:就是标签元素要设置draggable=true,否则不会有效果,例如:
<div title="拖拽我" draggable="true">列表1</div>
ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上
ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上
ondragover 事件:拖拽元素在目标元素上移动的时候触发的事件,此事件作用在目标元素上
ondrop 事件:被拖拽的元素在目标元素上同时鼠标放开触发的事件,此事件作用在目标元素上
ondragend 事件:当拖拽完成后触发的事件,此事件作用在被拖曳元素上
Event.preventDefault() 方法:阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault(),否则ondrop事件不会被触发。另外,如果是从其他应用软件或是文件中拖东西进来,尤其是图片的时候,默认的动作是显示这个图片或是相关信息,并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
Event.effectAllowed 属性:就是拖拽的效果。
HTML5 & CSS3 内容收集(1)的更多相关文章
- HTML5+CSS3 loading 效果收集--转载
用gif图片来做loading的时代已经过去了,它显得太low了,而用HTML5/CSS3以及SVG和canvas来做加载动画显得既炫酷又逼格十足.这已经成为一种趋势. 这里收集了几十个用html5和 ...
- HTML5+CSS3点击指定按钮显示某些内容效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 32+激发灵感的HTML5/CSS3网页设计教程
HTML5是寄托在HTML4基础上取得了的广泛成就.这不仅意味着你不必完全放弃现有的一些标记,而是可以借鉴,以加强 它. CSS3也以同样的方式在互联网内容的安排下,提供了它的柔韧性.CSS3是开 ...
- HTML5+CSS3整体回顾
http://blog.poetries.top/2016/10/19/HTML5+CSS3%E5%9F%BA%E7%A1%80%E5%9B%9E%E9%A1%BE%20/ 这篇文章主要总结H5的一些 ...
- 7款效果惊人的HTML5/CSS3应用
今天是周末,我为大家收集7个比较经典的HTML5/CSS3应用,每一个都提供源代码,效果非常惊人. 1.CSS3/jQuery创意盒子动画菜单 作为前端开发者,各种各样的jQuery菜单见过不少,这款 ...
- 精选10款超酷的HTML5/CSS3菜单
今天向大家精选了10款超酷的HTML5/CSS3菜单,给你的网页添加不一样的精彩,一起来围观一下吧. 1.CSS3手风琴菜单 下拉展开带弹性动画 利用CSS3技术可以实现各种各样的网页菜单,我们之前也 ...
- 《零基础学HTML5+CSS3(全彩版)》读书笔记
2019年1月31日星期四 1点 <零基础学HTML5+CSS3(全彩版)>开始全面学习 前提: 11月20日开始学Python,可能因为太累了,也可能遇到了瓶颈,进入了一个迷茫期,1月6 ...
- html5/css3常考面试题
一.HTML5 CSS3 CSS3有哪些新特性? 1. CSS3实现圆角(border-radius),阴影(box-shadow), 2. 对文字加特效(text-shadow.),线性渐变(gra ...
- HTML5 CSS3面试题
一.CSS3有哪些新特性? 1. CSS3实现圆角(border-radius),阴影(box-shadow), 2. 对文字加特效(text-shadow.),线性渐变(gradient),旋转(t ...
随机推荐
- Python:PIL(一)——简介
学习总结自:PIL官方文档 PIL(Python Image Library)是Python的一个图像处理库. 1.简介 PIL库中最重要的类是Image ①从文件中加载Image--open方法 f ...
- 2020.10.6 ThreadLocal
在多线程环境下,每个线程都有自己的数据.一个线程使用自己的局部变量比使用全局变量要好,因为局部变量不会被其他线程改变. 但是局部变量也存在问题--在函数调用的时候,传递起来很麻烦: def proce ...
- 面向对象编程(C++篇2)——构造
目录 1. 引述 2. 详述 2.1. 数据类型初始化 2.2. 类初始化 1. 引述 在C++中,学习类的第一课往往就是构造函数.根据构造函数的定义,构造函数式是用于初始化类对象的数据成员的.无论何 ...
- JZ-028-数组中出现次数超过一半的数字
数组中出现次数超过一半的数字 题目描述 数组中有一个数字出现的次数超过数组长度的一半,请找出这个数字.例如输入一个长度为9的数组{1,2,3,2,2,2,5,4,2}.由于数字2在数组中出现了5次,超 ...
- DFT/FFT/NTT
在Seal库和HElib库中都用到了NTT技术,用于加快多项式计算,而NTT又是FFT的优化,FFT又来自于DFT,现在具体学习一下这三个技术! 基础概念 名词区分 1.DFT:离散傅立叶变换 2.F ...
- tensorflow源码解析之framework-allocator
目录 什么是allocator 内存分配器的管理 内存分配追踪 其它结构 关系图 涉及的文件 迭代记录 1. 什么是allocator Allocator是所有内存分配器的基类,它定义了内存分配器需要 ...
- Netty异步Future源码解读
本文地址: https://juejin.im/post/5df771ee6fb9a0161d743069 说在前面 本文的 Netty源码使用的是 4.1.31.Final 版本,不同版本会有一些差 ...
- CF1392F题解
首先题意很明显就不说了吧www 先说一下做这道题的经历 昨天下午和 blw 一起去食堂吃饭,和他产生了一点儿冲突,于是我考了一下他 P1119 (就是那道 Floyd),他很快做出来了,于是考了我这道 ...
- 背包四讲 (AcWing算法基础课笔记整理)
背包四讲 背包问题(Knapsack problem)是一种组合优化的NP完全问题.问题可以描述为:给定一组物品,每种物品都有自己的重量和价格,在限定的总重量内,我们如何选择,才能使得物品的总价格最高 ...
- VS2022不能使用<bits/stdc++.h>的解决方案
•<bits/stdc++.h>介绍 #include<bits/stdc++.h> 包含了目前 C++ 所包含的所有头文件,又称万能头文件,简直是开挂一般的存在. 你编程 ...