html5指南-1.html5全局属性(html5 global attributes)深入理解


Posted in HTML / CSS onJanuary 07, 2013

今天开始一个全新的关于html5系列课程,是我读《The Definitive Guide to HTML5 》的学习笔记。我会把自己觉得里面不错的章节,或者有意义的内容进行整理,以供大家学习。
一个元素可以定义自己的属性,比如a标签定义href属性,这种叫局部属性(local attribute)。相对应的我们可以通过全局属性(global attribute)为所有元素设置共有的行为,当然你也可以为单独元素设置全局属性,只是这样做没有太大的意义。下面我将逐一介绍这些全局属性。

下面的例子在chrome浏览器中运行正常,有些例子firefox不能运行,其他浏览器我没有测试,所以建议大家使用chrome浏览器作为自己首选的html5浏览器。我没有把注意力放在浏览器的兼容问题上,而是把关注点放在学习和实现上。html5还在不断完善中,随着他的普及,我相信主流浏览器对他的支持会越来越好,到时候浏览器兼容问题会好很多。
1.accesskey
accesskey属性允许你设置一个或者多个键盘快捷键,这样你就可以选择页面上的元素了。我们看下面的例子:

复制代码
代码如下:

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<form>
Name: <input type="text" name="name" accesskey="n"/>
<p/>
Password: <input type="password" name="password" accesskey="p"/>
<p/>
<input type="submit" value="Log In" accesskey="s"/>
</form>
</body>
</html>

在这个例子中,你就可以使用组合键选择页面中的元素了,比如在windows操作系统下,可以使用alt+XXX来选择某个元素。
运行效果:

html5指南-1.html5全局属性(html5 global attributes)深入理解

2.class
这个属性我就不想多说什么了,就是一个对元素实现分组的功能,更多的时候是结合css使用,为不同组的元素设置不同的显示效果。
3.contenteditable
这是html5新增的属性,为html元素添加contenteditable属性,将其设置为true,允许用户编辑元素内容;设置为false,不允许用户编辑。
复制代码
代码如下:

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<p contenteditable="true">It is raining right now</p>
</body>
</html>

html5指南-1.html5全局属性(html5 global attributes)深入理解

4.contextmenu
contextmenu允许用户设置html元素的右键菜单,当用户触发的时候菜单会弹出。到目前为止还没有浏览器支持此属性。
5.dir
dir属性定义html元素文字的对齐方式,支持两个值,ltr(从左到右)和rtl(从右到左)。
复制代码
代码如下:

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<p dir="rtl">This is right-to-left</p>
<p dir="ltr">This is left-to-right</p>
</body>
</html>

html5指南-1.html5全局属性(html5 global attributes)深入理解


6.draggable
draggable是html5中实现html元素拖拽功能的属性,我们会在后面的课程中详细介绍。
7.dropzone
dropzone也是html5中实现html元素拖拽功能的属性,我们会在后面的课程详细介绍。
8.hidden
这个属性大家应该都比较熟悉,就是隐藏一个html元素。
9.id
这个属性应该大家都知道,他为html元素设置一个唯一标识,一个html页面中不允许存在相当id的元素。
10.lang
lang指定html元素内容所使用的语言。lang的值必须是一个有效的iso语言代码,你可以访问下面的地址了解更多详情,http://tools.ietf.org/html/bcp47。需要注意的是处理语言是一个相当复杂和有技术含量的事情。
复制代码
代码如下:

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<p lang="en">Hello - how are you?</p>
<p lang="fr">Bonjour - comment êtes-vous?</>
<p lang="es">Hola - ¿cómo estás?</p>
</body>
</html>

11.spellcheck
当使用spellcheck属性的时候,浏览器会帮你检查html元素文本内容的拼写是否正确,只有当html元素可编辑的情况下,spellcheck属性才有意义。
复制代码
代码如下:

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<textarea spellcheck="true">This is some mispelled text</textarea>
</body>
</html>

效果:(我用chrome没有运行出想要的效果,不知道为什么)

html5指南-1.html5全局属性(html5 global attributes)深入理解


12.style
这个属性也不用过多介绍,为html元素设置css样式。
13.tabindex
tabindex允许你定义html元素使用tab键时的访问顺序。当tabindex设置为-1的时候,用户使用tab键该html元素将不会被选中。
复制代码
代码如下:

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<form>
<label>Name: <input type="text" name="name" tabindex="1"/></label>
<p/>
<label>City: <input type="text" name="city" tabindex="-1"/></label>
</p>
<label>Country: <input type="text" name="country" tabindex="2"/></label>
</p>
<input type="submit" tabindex="3"/>
</form>
</body>
</html>

效果:

html5指南-1.html5全局属性(html5 global attributes)深入理解

14.title
title可以为html元素提供附加信息,他经常用于显示提示信息。
复制代码
代码如下:

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<a title="Apress Publishing" href="http://apress.com">Visit the Apress site</a>
</body>
</html>

效果:

html5指南-1.html5全局属性(html5 global attributes)深入理解


今天的课程就到此为止了,希望这些内容对大家有帮助。
demo下载地址:Html5Guide.rar
HTML / CSS 相关文章推荐
CSS3 毛玻璃效果
Aug 14 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
Jul 10 HTML / CSS
HTML5中新标签和常用标签详解
Mar 07 HTML / CSS
5 个强大的HTML5 API 函数推荐
Nov 19 HTML / CSS
HTML5 Canvas中使用用路径描画圆弧
Jan 01 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
Jan 01 HTML / CSS
Web时代变迁及html5与html4的区别
Jan 06 HTML / CSS
用html5绘制折线图的实例代码
Mar 25 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
Jan 29 HTML / CSS
html css3不拉伸图片显示效果
Jun 07 HTML / CSS
html5指南-2.如何操作document metadata
Jan 07 #HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 #HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 #HTML / CSS
html5指南-5.使用web storage存储键值对的数据
Jan 07 #HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 #HTML / CSS
html5指南-7.geolocation结合google maps开发一个小的应用
Jan 07 #HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 #HTML / CSS
You might like
CodeIgniter连贯操作的底层原理分析
2016/05/17 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
用ADODB.Stream转换
2007/01/22 Javascript
网页上的Javascript编辑器和代码格式化
2010/04/25 Javascript
Jquery中获取iframe的代码
2011/01/11 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
2014/01/06 Javascript
jquery获取选中的文本和值的方法
2014/07/08 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
Bootstrap按钮组实例详解
2017/07/03 Javascript
JavaScript生成图形验证码
2020/08/24 Javascript
mui框架移动开发初体验详解
2017/10/11 Javascript
JS面向对象之单选框实现
2020/01/17 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
Python压缩和解压缩zip文件
2015/02/14 Python
python图像处理之镜像实现方法
2015/05/30 Python
Python中使用bidict模块双向字典结构的奇技淫巧
2016/07/12 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
初探利用Python进行图文识别(OCR)
2019/02/26 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
Html5获取高德地图定位天气的方法
2019/12/26 HTML / CSS
Html5原生拖拽相关事件简介以及基础实现
2020/11/19 HTML / CSS
美国小蜜蜂Burt’s Bees德国官网:天然唇部、皮肤和身体护理产品
2020/06/14 全球购物
网络教育毕业生自我鉴定
2013/10/10 职场文书
个人租房协议书范本
2014/09/30 职场文书
2015年七一建党节活动总结
2015/03/20 职场文书
民事二审代理词
2015/05/25 职场文书
MySQL连接控制插件介绍
2021/09/25 MySQL
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers
Pandas实现DataFrame的简单运算、统计与排序
2022/03/31 Python
python使用shell脚本创建kafka连接器
2022/04/29 Python
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python