HTML5中input新增类型+表单新增属性+其他标签属性
@ (猴头)
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
元素(文档是否解析完毕),或者被其他脚本文件依赖。
例:
- 评论框
- 代码语法高亮
polyfill.js
async
如果你的脚本并不关心页面中的DOM
元素(文档是否解析完毕),并且也不会产生其他脚本需要的数据。
例:
- 百度统计
如果不太能确定的话,用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新增类型+表单新增属性+其他标签属性的更多相关文章
- html5--3.17 新增的表单重写
html5--3.17 新增的表单重写 学习要点 对form元素的属性做一个小结,对个别属性进行一点补充 重点掌握新增的表单重写 form元素的属性小结 action/method/enctype/n ...
- html5中form表单新增属性以及改良的input标签元素的种类
在HTML5中,表单新增了一些属性,input标签也有了更多的type类型,有些实现了js才能实现的特效,但目前有些浏览器不能全部支持.下面是一些h5在表单和input标签上的一些改动. <!D ...
- HTML5之表单新增类型介绍
1.html5的input标签的type类型新增介绍: 2.表单新增属性介绍: 3.代码示例: <!doctype html> <html> <head></ ...
- [html5] 学习笔记-表单新增的元素与属性(续)
本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...
- HTML5表单新增元素与属性
form属性 在html4中,表单的从属元素必须写在表单内部,而在HTML5中,可以把他们书写在任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了. ...
- html5表单新增元素与属性2
1.标签的control属性 在html5中,可以在标签内部放置一个表单元素,并且通过该标签的control属性来访问该表单元素. <script> function setValue() ...
- HTML5新增的表单验证功能
一.HTML5表单的特点: HTML5 表单增加了许多内置的控件和控件属性 XHTML 中需要放在 form 之中的诸如 input/button/select/textarea 等标签元素,在 HT ...
- HTML5 表单新增属性
1. 表单内元素的form属性 在H5中可以把form放到页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了 <form id=&quo ...
- html5表单新增的元素与属性
1.表单内元素的form属性 在html4中,表单内的从属元素必须书写在表单内部, 而在html5中,可以把他们书写在页面上任何地方, 然后为该元素指定一个form属性,属性值为该表单的id,这样就可 ...
随机推荐
- 源码分析系列 | 从零开始写MVC框架
1. 前言 2. 为什么要自己手写框架 3. 简单MVC框架设计思路 4. 课程目标 5. 编码实战 5.1 配置阶段 web.xml配置 config.properties 自定义注解 5.2 初始 ...
- Harbor 1.9.x 版本从源码构建和运行
介绍 本指南为开发人员提供了从源代码构建和运行Harbor的说明. 步骤1:为Harbor的构建环境做准备 Harbor被部署为多个Docker容器,并且大多数代码都是用Go语言编写的.构建环境需要D ...
- bjut校园网自动登录
主要是懒得每次上网都需要打开网页=.= logon.bat @echo off mode con: cols=40 lines=15 color 0a title 登录ing... rem 获得IP ...
- python 函数(实参与形参、传递参数)
函数 什么是函数?函数是带名字的代码块,用于完成具体的工作.写出一个函数后,就可以一直调用. 定义函数,函数的基本组成: 1.1 向函数传递参数 向函数中传递任意参数,这样打印出的结果就可以根据自己的 ...
- python随机生成字符
Python2: Unicode是一种通用的编码方式,不论是英文字母.汉字.日语还是其他文字都能够对应一个唯一的Unicode编码(序号). chr(100) # 得到整数对应的ascii码(小于25 ...
- 小白学 Python 数据分析(4):Pandas (三)数据结构 DataFrame
在家为国家做贡献太无聊,不如跟我一起学点 Python 人生苦短,我用 Python 前文传送门: 小白学 Python 数据分析(1):数据分析基础 小白学 Python 数据分析(2):Panda ...
- Go语言实现:【剑指offer】表示数值的字符串
该题目来源于牛客网<剑指offer>专题. 请实现一个函数用来判断字符串是否表示数值(包括整数和小数).例如,字符串"+100","5e2",&qu ...
- CVE-2019-0232:Apache Tomcat RCE复现
CVE-2019-0232:Apache Tomcat RCE复现 0X00漏洞简介 该漏洞是由于Tomcat CGI将命令行参数传递给Windows程序的方式存在错误,使得CGIServlet被命令 ...
- 《C# GDI+ 破境之道》:第一境 GDI+基础 —— 第二节:画矩形
有了上一节画线的基础,画矩形的各种边线就特别好理解了,所以,本节在矩形边线上,就不做过多的讲解了,关注一下画“随机矩形”的具体实现就好.与画线相比较,画矩形稍微复杂的一点就是在于它多了很多填充的样式. ...
- Apache开启GZIP 压缩网页
首先我们先了解Apache Gzip的相关资料. 一.gzip介绍 Gzip是一种流行的文件压缩算法,现在的应用十分广泛,尤其是在Linux平台.当应用Gzip压缩到一个纯文本文件时,效果是非常明显的 ...