@ (猴头)

Input 新增属性

email  邮箱(只在手机端有效)

url  网址(只在iphone手机有效)

tel  手机号(只在手机端有效)

number  数字(右侧有上下按钮,只能输入数字,+号,-号,. 和e)

 input 日期时间(手机端效果比较好)

date 年月日

time 小时和分

datetime 年月日+小时和分 (iphone和安卓都不再兼容,电脑端也不兼容)

datetime-local 本地年月日+小时和分

month 年月

week 年和周 (iphone不兼容)

    <input type="date"><br>
<input type="time"><br>
<input type="datetime"><br>
<input type="datetime-local"><br>
<input type="month"><br>
<input type="week"><br>

seach 与 text 区别:

search右边有个叉叉

    <input type="range" min="10" max="100"><br>
<input type="search"><br>
<input type="color"><br>

form 和 input的自动完成功能 autocomplete="on"

    <form action="index.html" autocomplete="on">
<input type="text" name="text"><br>
<input type="email" name="email" autocomplete="off">
<input type="submit">
</form>

autofocus 自动获取焦点

    <form action="index.html" autocomplete="on">
<input type="text" name="text"><br>
<input type="email" name="email" autocomplete="off" autofocus="autofocus">
<input type="submit">
</form>

multiple 适用于file 和 email

file 可以上传多个文件

email 添加multiple,则上传到后台为数组;不添加上传到后台为字符串

    <form action="index.html" autocomplete="on">
<input type="file" name="file" multiple="multiple"><br>
<input type="email" name="email" autocomplete="off" autofocus="autofocus" multiple="multiple"><br>
<input type="email" name="email2" autofocus="autofocus">
<input type="submit">
</form>

placeholder 属性适用于 text  password  email  tel  url  search

    <form action="index.html">
<input type="text" name="text" required><br>
<input type="email" name="email" required><br>
<input type="submit">
</form>

网页在浏览器显示的图标

<link rel="icon" href="cat-little.jpg" type="image/jpeg" sizes="16*16">

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<base href="http://www.baidu.com" target="_blank">
</head>
<body>
<a href="">测试链接</a> </body>
</html>

给所有链接设置新窗口打开

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<base target="_blank">
</head>
<body>
<a href="http://www.baidu.com">测试链接</a> </body>

最后一个知识点,其实我还没弄懂,别人那里搬运来的:

普通script

文档解析的过程中,如果遇到script脚本,就会停止页面的解析进行下载(但是Chrome会做一个优化,如果遇到script脚本,会快速的查看后边有没有需要下载其他资源的,如果有的话,会先下载那些资源,然后再进行下载script所对应的资源,这样能够节省一部分下载的时间 @Update: 2018-08-17)。
资源的下载是在解析过程中进行的,虽说script1脚本会很快的加载完毕,但是他前边的script2并没有加载&执行,所以他只能处于一个挂起的状态,等待script2执行完毕后再执行。
当这两个脚本都执行完毕后,才会继续解析页面。

defer

文档解析时,遇到设置了defer的脚本,就会在后台进行下载,但是并不会阻止文档的渲染,当页面解析&渲染完毕后。
会等到所有的defer脚本加载完毕并按照顺序执行,执行完毕后会触发DOMContentLoaded事件。

async

async脚本会在加载完毕后执行。
async脚本的加载不计入DOMContentLoaded事件统计,也就是说下图两种情况都是有可能发生的

推荐的应用场景

defer

如果你的脚本代码依赖于页面中的DOM元素(文档是否解析完毕),或者被其他脚本文件依赖。
例:

  1. 评论框
  2. 代码语法高亮
  3. polyfill.js

async

如果你的脚本并不关心页面中的DOM元素(文档是否解析完毕),并且也不会产生其他脚本需要的数据。
例:

  1. 百度统计

如果不太能确定的话,用defer总是会比async稳定。。。


ol 新增属性

start 表示起始,reversed 表示倒序

    <ol start="2" reversed="reversed">
<li>html</li>
<li>html5</li>
<li>css</li>
<li>css3</li>
</ol>

manifest 定义离线缓存文件

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title> </head>
<body> </body>
</html>

scoped 可以使样式嵌入在网页的任何一个位置,有这种写法,但不建议使用

<!DOCTYPE html>
<html lang="en" manifest="index.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title> </head>
<body>
<style scoped>
</style>
</body>
</html>

HTML5中input新增类型+表单新增属性+其他标签属性的更多相关文章

  1. html5--3.17 新增的表单重写

    html5--3.17 新增的表单重写 学习要点 对form元素的属性做一个小结,对个别属性进行一点补充 重点掌握新增的表单重写 form元素的属性小结 action/method/enctype/n ...

  2. html5中form表单新增属性以及改良的input标签元素的种类

    在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!D ...

  3. HTML5之表单新增类型介绍

    1.html5的input标签的type类型新增介绍: 2.表单新增属性介绍: 3.代码示例: <!doctype html> <html> <head></ ...

  4. [html5] 学习笔记-表单新增的元素与属性(续)

    本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...

  5. HTML5表单新增元素与属性

    form属性 在html4中,表单的从属元素必须写在表单内部,而在HTML5中,可以把他们书写在任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了. ...

  6. html5表单新增元素与属性2

    1.标签的control属性 在html5中,可以在标签内部放置一个表单元素,并且通过该标签的control属性来访问该表单元素. <script> function setValue() ...

  7. HTML5新增的表单验证功能

    一.HTML5表单的特点: HTML5 表单增加了许多内置的控件和控件属性 XHTML 中需要放在 form 之中的诸如 input/button/select/textarea 等标签元素,在 HT ...

  8. HTML5 表单新增属性

    1. 表单内元素的form属性 在H5中可以把form放到页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了 <form id=&quo ...

  9. html5表单新增的元素与属性

    1.表单内元素的form属性 在html4中,表单内的从属元素必须书写在表单内部, 而在html5中,可以把他们书写在页面上任何地方, 然后为该元素指定一个form属性,属性值为该表单的id,这样就可 ...

随机推荐

  1. 实验18:HDLC和PPP

    实验15-1:HDLC 和PPP 封装 Ø     实验目的通过本实验,读者可以掌握如下技能:(1) 串行链路上的封装概念(2) HDLC 封装(3) PPP 封装 Ø     实验拓扑 实验步骤n  ...

  2. http请求中的 OPTIONS 多余请求消除,减少的案例

    问题: 项目中遇到移动端发送同样的请求2次,仔细看了一下,有个是options报文. HTTP请求翻一倍,对服务器的性能有较大影响,造成nginx的无畏消耗,需要消除它. 解决思路: 1.上网查看了一 ...

  3. JavaScript运动_封装模板(支持链式运动、完美运动)

    最近自学到了JS运动部分,自己整理了一些js模板,望采纳. 1.支持链式运动的模板: 先解释一下函数中的几个参数含义: 1)obj: 要操作的对象 2)target: 属性要到达的目标值 3)attr ...

  4. 构造UTF8的std::string

    在VC++的世界里,MS比较鼓励使用_UNICODE,std::wstring.而在Web, XML则提倡用UTF8.当在C++的程序里要保存/读取XML数据,就存在wstring与string之间的 ...

  5. Sqli-Labs 闯关 less 42-49

    Less 42 这一关一进去看着像前面的二次注入.发现也注入不了.. 我们观察代码发现这一关用的是堆叠注入. 登陆的这里可以看到login_password登陆的时候并没有使用mysqli_real_ ...

  6. C语言实现银行家算法

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <stdbool.h& ...

  7. excel 2010 如何设置日期选择器

    excel 中想输入很多的日期.如果每个日期都直接手动输入太过于繁琐,而且容易出错.想制作一个日期选择器,直接鼠标点选就可以了. 效果如下: 具体实现参考 http://wenku.baidu.com ...

  8. Druid 0.17 入门(2)—— 安装与部署

    在Druid快速入门其实已经简单的介绍过最简化配置的单节点部署,本文我们将详细描述Druid的多种部署方式,对于测试开发环境可以选用轻量的单机部署方式,而生产环境我们最好选用集群部署的方式,确保系统的 ...

  9. CodeIgniter框架使用总结

    CodeIgniter框架 1.回忆MVC 1.1.M:模型,提供数据,保存数据 1.2.V:视图,只负责显示,表单form 1.3.C:控制器,协调模型和视图 1.4.action:动作,是控制器中 ...

  10. c++ 中数组的引用

    在C++里,数组也是可以引用的. 代码如下: char str1[] = "abcde"; ] = str1; 解读第二句代码,括号的优先级最高,'str2'首先与'&'相 ...