HTML5属性变化

属性的增加

Input

email/url/number/range/Date picker/search/color/tel

表达属性

autocomplete/autofocus/multiple/placeholder/required

链接属性

link的sizes属性/<base>的target属性/超链接a

其他属性

script/html/ol/style

input新增类型

1、email类型的input元素是一种专门用来输入email地址的文本框。提交时如果该文本框中内容不是email地址格式的文字则不允许提交,但是并不检查email地址是否存在。提交时该文本框可以为空,除非加上required属性。email类型的文本框具有一个mutiple属性,它允许在该文本框中输入一串以逗号分隔的email地址。

2、 url类型的input元素是一种专门用来输入url地址的文本框。提交时如果该文本框中内容不是url地址格式的文字,则不允许提交。

3、tel类型的input元素被设计为用来输入电话号码的专用文本框。

4、 number类型的input元素是一种专门用来输入数字的文本框,并且在提交时进行检查,检查其中内容是否为数字,如果其中内容不为数字,则将文本框中的内容作为空白进行提交。同时number类型也具有min、max、与step属性。

<input type="email" name="email">( 针对手机端 )

<input type="url" name="url">( 针对手机端 只针对IPHONE)

<input type="tel" name="tel">( 针对手机端 )

<input type="number" name="number">( PC端只能输入数字与运算符号 手机端同 )

---- <input>日期类型 (Date Pickers Input类型)----

date----->>选取日,月,年

<input type="date" name="date">

-------------------------------------------------

month----->>选取月,年

<input type="month" name="month">

-------------------------------------------------

week----->>选取周和年

<input type="week" name="week">(IOS不兼容)

-------------------------------------------------

time----->>选取选取时间(小时和分钟)

<input type="time" name="time">

-------------------------------------------------

datetime----->>选取选取时间,日,月,年(UTC时间)

<input type="datetime" name="datetime">(Pc端和手机端皆不兼容,IOS版本越高越不兼容)

-------------------------------------------------

datetime-local----->>选取时间,日,月,年(本地时间)

<input type="datetime-local" name="datetime-local">(手机端不兼容)

①range:托动杆。

②search:类似于搜索框

③color: 全色彩选择,可用来在线调整编辑器,文本编辑

autocomplete自动完成:

<form action="audio.html" autocomplete="on"><!-- 默认为ON -->

<input type="text" name="te" />

<input type="email" autocomplete="off" />

<input type="submit" />

</form>

可以使刷新页面后,点输入框显示之前输入的历史并选择,若不想显示,input里也可以使用置为off

autofocus:

规定在页面加载时,域自动地获得焦点

autofocus属性适用于所有<input>标签的类型

<input autofocus=“autofocus”/>

multiple

<input type="file/email" multiple="multiple"/>

可以用于file上传属性上传多个值

也可用于email属性上传多个邮箱,邮箱之间用,逗号隔开:通过“,”逗号的分隔,分为两个字段

placeholder:

提供一种提示(hint),描述输入域所期待的值

<input type="search" placeholder="请输入查询内容">

*适用于<input>标签type属性值为:text,search,url,tel,email,password

required

属性用于表单提交验证,required 属性规定必需在提交之前填写输入字段。大大滴减少js代码!

eg:<input type="text" required="required"/>

使用了该属性,则此输入框是必填(或必选)的。

PS:适用于input标签type属性值为:text/search/url/tel/email/password/date pickers/number/checkbox/radio/file

----超链接新增属性----

1.sizes:

<link rel="icon" href="icon.gif" type="image/gif" sizes="16x16">

此图片位于浏览器网址输入框左侧,当网址加载时

2.target:设置连接的跳转窗口

3.超链接的新增属性:

(1)media: a:media="tv" (表示对设备进行优化,handheld对“手持”设备进行支持,tv对“电视”设备进行支持)

(2)hreflang: a:hreflang="zh" (设置语言,这里设置语言是中文,如接下来跳转的页面是中文,增加页面渲染性能)

(3)rel: a:rel="external" (设置超链接的引用,这里超链接为外部链接,即对超链接的语义化说明

script 新增属性

1、defer : 全部页面加载完后执行(只兼容IE),好处是速度快

<script defer src="URL" ></script>

2、async:脚本加载完后执行,双线程加载,加载脚本同时加载网页(主流都支持)

<script async src="URL"></script>

ol有序列表 

新增加的属性

start——起始值

reversed——倒序排列

<ol start="从几开始" reversed="reversed">

       <li></li>

       <li></li>

</ol>

其他属性

html manifest="index.manifast">就会自动把我们需要的文件index.html/index.css/index.js放到本地,当在断网的情况下,访问网址,依然可以正常的显示网页

style :内嵌css.在文档的任意部分都可以写css,<style scoped></style>

一般提倡html与css分开两个文件写,不赞成这么写,与结构表现分离是背道而驰的

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容