HTML5   发布时间:2022-04-25  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了HTML5学习笔记简明版(6):新增属性(1)大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。

a和area下的media属性

为了和link元素保存一致性,a元素和area元素也都增加了media属性,只有在href存在时菜有效。media属性的意思是目标 URL 是为何种媒介/设备优化的,认值是all,详细语法规范请访问:http://dev.w3.org/csswg/css3-mediaqueries/#media0

代码例:

<a href="att_a_media.asp?output=print" media="print and (resolution:300dpi)">
HTML5 a media attribute.
</a>

 

area下的hreflang,type,rel属性

为了保存和a元素以及link元素的一致性,area元素增加了hreflang,rel等属性

属性

描述

hreflang

language_code

规定目标 URL 的语言

@H_9_44@media

@H_9_44@media query

规定目标 URL 是为何种媒介/设备优化的

rel

alternate,author,bookmark,external,Help,license,next,nofollow,noreferrer,prefetch,prev,search,sidebar,tag

规定当前文档与目标 URL 之间的关系

type

@H_9_44@mime_type

规定目标 URL 的 MIME 类型

base下的target属性

base下的target属性和a的target属性是一样的,目的很多老版本浏览器早就一起支持了。

注1:target必须在所有连接元素之前声明。

注2:如果声明多个,以第一个为准。

<!DOCTYPE html> html> head> title>This is an example for the &lt;base&gt; elementbase ="http://www.example.com/news/index.html"bodyp>Visit the ="archives.html">archives>.

点击上面的连接,将跳转http://www.example.com/news/archives.html。

Meta下的charset属性

charset是用来定义文档的encoding方式的,如果在XML里定义了该属性,则charset的值必须是不区分大小写的ASCII以便match UTF-8,因为XML文档强制使用UTF-8作为encoding方式的。

注:Meta属性上的charset属性在XML文档里是不起作用的,仅仅是为了方便与XHTML直接互相迁移。

不能声明多个带有charset属性Meta元素。

在HTML4里,我们不得不这样定义:

http-equiv="content-type" content="text/html; charset=ISO-8859-1"  

在HTML5里,我们这样定义就行了:

charset
="ISO-8859-1" autofocus属性

HTML5为input,SELEct,textarea和button元素增加一个autofocus属性(hidden的input不能使用),它提供了一种声明式的方式来定义当页面load以后,焦点自动作用于当前元素上。使用autofocus可以提高用户体验,比如我们在登录页面设置,页面load以后自动将焦点设置到用户名的textBox上。

input
@H_719_16@maxlength="256" name="loginName" value="" autofocustype="submit"="Login" 注1:一个页面声明一次autofocus属性

注2:一个页面里不是必须要设置autofocus的。

placeholder属性

input和textarea元素新增加了placeholder属性,该属性是提升用户输入@L_874_51@。当用户点击的时候,该@L_874_51@文本自动消失,离开焦点并且值为空的话,再次@L_450_55@。以前我们都是使用JavaScript代码来实现,其实蛮复杂的,有了placeholder属性就爽了,直接写成下面下这样的代码

="username"
placeholder="请输入你的用户名" form属性

form属性(不是<form>元素),是一个划时代的属性,它允许你将<form>表单里的表单控件声明在表单外门,只需要在相应的控件上设置form属性为指定的<form>表单的id就行了,不需要非得把元素声明在<form>元素里了,解放啦。

代码如下:

label
>Email: ="email" form="foo"="email"form id="foo"></form 支持属性的元素有:input,output,textarea,button,label,object和fieldset。

required属性

required属性一个验证属性,表明该控件是必填项,在submit表单之前必须填写。可用的元素是:input,SELEct和textarea(例外: type类型为hidden,image或类似submit的input元素)。

如果在SELEct上使用required属性,那就得设置一个带有空值的占位符option。代码如下:

>
Color: SELEct name=color required> option value="">Choose one option>Red >Green >Blue SELEct fieldset下的disabled属性

当fieldset的设置disabled属性时,其所有的子控件都被禁用掉了,但不包括legend里的元素。name属性是用来脚本访问的。

代码1:

fieldset
="clubfields" disabledlegend> > =checkBox =club onchange="form.clubfields.disabled = !checked"> Use Club Card ><>Name on card: =clubname >Card number: =clubnum required pattern="[-0-9]+">Expiry date: =clubexp =monthfieldset 当点击legend里的checkBox的时候,会自动切换fieldset子元素的disabled状态。

代码2:

="clubfields"
> ="checkBox"="club" onchange> Use Club Card > Name on card: ="clubname" required="numfields"> ="radio" checked name="clubtype"="form.numfields.disabled = !checked"> My card has numbers on it > Card number: ="clubnum" required pattern="letfields"="form.letfields.disabled = !checked"> My card has letters on it > Card code: ="clublet"="[A-Za-z]+" 在这个例子,当你外面的 "Use Club Card" checkBox没有选中的时候,里面的子控件都是被禁用的,如果选中了,两个radiobutton都可用了,然后可以选择哪一个子fieldset你想让它可用。

input下的新属性(autocomplete,min,max,multiple,pattern,step)

input下增加了几个用于约束输入@L_874_51@的属性(autocomplete,pattern和step),目前只有部分浏览器支持required和autocomplete属性,其它属性尚未支持

autocomplete 属性规定输入字段是否应该启用自动完成功能,自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该@L_450_55@出在字段中填写的选项。

action
="demo_form.asp" method="get" autocomplete="on"> First name:="text"="fname" /><br /> last name: ="lname" /> E-mail: ="off" /> ="submit" /> 注释:autocomplete 属性适用于 <form>,以及下面的 <input> 类型:text,url,telephone,email,password,datepickers,range 以及 color。

另外也可以声明一个list属性,用来和存放数据的datalist元素关联

>
Homepage: =hp =url list=hpurlsdatalist ="http://www.google.com/" label="Google"="http://www.reddit.com/"="Reddit"datalist 当input为空的时候,双击它,就会弹出提示选项(选项@L_874_51@就是定义的label(Google/Reddit))。选择一个label就会将对应的value地址更新到input里(目前FF支持)。

datalist的声明形式可以有多种:

="breeds"
> ="Abyssinian"="Alpaca"<!-- ... --> > 或者 > or SELEct one from the list: ="breed"> (none SELEcted) >Abyssinian >Alpaca --> 另外,当input的type为image的时候,input还支持width和height属性用来指定图片的大小。

本图文内容来源于网友网络收集整理提供,作为学习参使用,版权属于原作者。

猜你在找的HTML5相关文章

网上看到一片好文,转载保留 高性能 CSS3 动画 尽可能的让动画元素不在文档流中,以减少重排 position:&#160;fixed; position:&#160;absolute; 尽可能多的
//anchorpoints:贝塞尔基点 //pointsamount:生成的点数 //return 路径点的Array function CreateBezierPoints(anchorpoint
h5的28个新特性的详细介绍
分享一个用h5制作的网页版扫雷游戏实例代码
H5 的复制操作实例代码
分享一个vue全局配置的实例代码
分享几个html5冷门小知识
html5web存储实例代码
@H_450_670@
@H_180_675@微信公众号

HTML5学习笔记简明版(6):新增属性(1)

微信公众号搜 "程序精选"关注

大佬总结

以上是大佬教程为你收集整理的HTML5学习笔记简明版(6):新增属性(1)全部内容,希望文章能够帮你解决HTML5学习笔记简明版(6):新增属性(1)所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。