HTML5 & CSS3 内容收集(1)

mgckid 发布于2019-08-05 11:45 / 927人阅读

摘要：标签规定用于表单的密钥对生成器字段。私钥存储于客户端，公钥则被发送到服务器。在发布用户评论或其他您无法完全控制的内容时，该标签很有用。在中一定要执行，否则事件不会被触发。

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"这款插件，可以将文件下载下来直接使用，也可以采用静态库的方式加以使用，例如国内百度静态库：

在实际的应用当中，可以采用条件注释的方式加以引用，如下：

2.2 HTML 条件注释

关于条件注释，应用普遍的是专门针对IE的条件注释，如下：

其中，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 新增表单元素

规定输入域的选项列表
这个属性规定form或则input域具有自动完成功能，当用户在自动完成域中开始输入时，浏览器显示设定好的提示。

用于不同类型的输出，比如脚本的计算等等。


     +
     =
    60

提供一种验证用户的可靠方法，目前被淘汰，虽然部分浏览器可以使用，但是不推荐。
标签规定用于表单的密钥对生成器字段。
当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。


    用户名: 
    加密:

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 周和年

3.1.3 新增表单属性

form /input 新属性

autocomplete 自动完成功能
Tip：这个属性可能失效的原因：①浏览器不支持 ② form开启但是input关闭或者form关闭但是Input开启。③没有设置name属性
这个属性应用于

标签以及以下类型的input标签 :text, search, url, telephone, email, password, datepickers, range 以及 color。

这个属性是否开启可以通过 on 和 off来进行设置。

form 属性

novalidate 规定在提交表单时不应该验证form 或者input域

input属性

autofocus 域自动地获得焦点

form 属性规定输入域所属的一个或多个表单

formaction 描述表单提交的URL地址会覆盖掉form标签的action 属性

formmethod 属性
formmethod 属性定义了表单提交的方式。
formmethod 属性覆盖了

元素的的method 属性。

formnovalidate 属性
与form 中的novalidate属性相同，novalidate 属性是一个 boolean 属性，novalidate属性描述了元素在表单提交时无需被验证。formnovalidate 属性会覆盖元素的novalidate属性

formtarget 属性
设定页面的展示方式，值与target属性相同。这个属性通过情况下与type=submit搭配使用，设定数据提交后页面打开方式。

list 属性
list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

multiple 属性
multiple 属性规定元素中可选择多个值。
注意: multiple 属性适用于以下类型的标签：email 和 file

pattern 属性
pattern 属性描述了一个正则表达式用于验证元素的值。
注意:pattern 属性适用于以下类型的标签: 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 隔离
标签允许您设置一段文本，使其脱离其父元素的文本方向设置。
在发布用户评论或其他您无法完全控制的内容时，该标签很有用。


 用户 user1: 60 分
 用户 user2: 80 分
 用户 user3: 90 分

4 HTML5新增技能 4.1 多媒体播放

在html5 中，给我们提供了音频与视频的播放以及对于flash动画的播放支持。
Tip：ie9以上浏览器以及其他的浏览器都支持该播放
音频播放：

播放外部文件

4.2 拖放(Drag 和 Drop)

DataTransfer 对象：拖拽对象用来传递的媒介，使用一般为Event.dataTransfer。
draggable 属性：就是标签元素要设置draggable=true，否则不会有效果，例如：

列表1

ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
ondragend 事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上
Event.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
Event.effectAllowed 属性：就是拖拽的效果。

服务器托管超融合服务器警告本网站成内容收集 html5前端css3 html5与css3 html5前端开发css3

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/56472.html

库&amp;插件&amp;框架&amp;工具

摘要：一些有用的一些有用的，包括转换小箭头三角形媒体查询等中文指南是当下最热门的前端资源模块化管理和打包工具。 nodejs 入门 nodejs 入门教程，大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享浅谈前端线上部署与运维说到前端部署，可能大多数前端工程师在工作中都是使用的公司现成的部署系统，与SRE对接、一起完...

Codeing_ls 2019-08-01 18:22 评论0 收藏0
库&amp;插件&amp;框架&amp;工具

摘要：一些有用的一些有用的，包括转换小箭头三角形媒体查询等中文指南是当下最热门的前端资源模块化管理和打包工具。 nodejs 入门 nodejs 入门教程，大家可以在 github 上提交错误 2016 年最好用的表单验证库 SMValidator.js 前端表单验证工具分享浅谈前端线上部署与运维说到前端部署，可能大多数前端工程师在工作中都是使用的公司现成的部署系统，与SRE对接、一起完...

xiaowugui666 2019-08-21 18:43 评论0 收藏0
前端资源系列（4）-前端学习资源分享&amp;前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0
前端-CSS3&amp;H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

Hydrogen 2019-08-05 12:48 评论0 收藏0
前端-CSS3&amp;H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

xiaolinbang 2019-08-29 14:14 评论0 收藏0