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 完美实现圆角效果
Jul 13 HTML / CSS
纯css3实现图片翻牌特效
Mar 10 HTML / CSS
深入浅析css3 border-image边框图像详解
Nov 24 HTML / CSS
css3编写浏览器背景渐变背景色的方法
Mar 05 HTML / CSS
html5 canvas 简单画板实现代码
Jan 05 HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 HTML / CSS
HTML5中判断用户是否正在浏览页面的方法
May 03 HTML / CSS
使用canvas绘制贝塞尔曲线
Dec 17 HTML / CSS
逼真的HTML5树叶飘落动画
Mar 01 HTML / CSS
HTML5拖放效果的实现代码
Nov 17 HTML / CSS
HTML5中使用json对象的实例代码
Sep 10 HTML / CSS
Html5实现首页动态视频背景的示例代码
Sep 25 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
php array_search() 函数使用
2010/04/13 PHP
thinkPHP中分页用法实例分析
2015/12/26 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
PHP如何将图片文件上传到另外一台服务器上
2019/08/26 PHP
Javascript的IE和Firefox兼容性汇编
2006/07/01 Javascript
JavaScript 的方法重载效果
2009/08/07 Javascript
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
多种方法实现JS动态添加事件
2013/11/01 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
bootstrap table表格插件使用详解
2017/05/08 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
Angular实现下拉框模糊查询功能示例
2018/01/03 Javascript
vue使用iframe嵌入网页的示例代码
2020/06/09 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
详解vue数组遍历方法forEach和map的原理解析和实际应用
2018/11/15 Javascript
Python中统计函数运行耗时的方法
2015/05/05 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
python调用xlsxwriter创建xlsx的方法
2018/05/03 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
Python模块的加载讲解
2019/01/15 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
python里运用私有属性和方法总结
2019/07/08 Python
python连接PostgreSQL数据库的过程详解
2019/09/18 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
python基于selenium爬取斗鱼弹幕
2021/02/20 Python
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
质检部部长职责
2013/12/16 职场文书
大学生毕业鉴定
2014/01/31 职场文书
公证处委托书
2015/01/28 职场文书
幼儿园小班教育随笔
2015/08/14 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
Django中celery的使用项目实例
2022/07/07 Python