HTML5 & CSS3 内容收集(1)

1. HTML发展历史介绍

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>

output

<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> 标签视频播放

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 属性：就是拖拽的效果。

posted @ 2020-05-11 21:25 热爱前端知识阅读(164) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部