小强的HTML5移动开发之路(13)——HTML5中的全局属性
2015-09-23 14:07
666 查看
来自:http://blog.csdn.net/dawanganban/article/details/18179483
一、accssskey 快捷键
<!DOCTYPE HTML>
<html>
<body>
<a href="http://blog.csdn.net/column/details/dawanganban-html5.html" accesskey="w">小强的HTML5移动开发之路</a><br />
<a href="http://blog.csdn.net/column/details/android-growup.html" accesskey="g">Android菜鸟的成长笔记</a>
<p><b>注释:</b>请使用 Alt + <i>accessKey</i> 来访问带有快捷键的元素。</p>
</body>
</html>
有兴趣的朋友可以按住Alt + g 和 Alt + w试一下
小强的HTML5移动开发之路
Android菜鸟的成长笔记注释:请使用 Alt + accessKey 来访问带有快捷键的元素。
该标签在HTML4和HTML5之间没有差异。
二、class 属性,规定元素类名
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1.intro {color:blue;}
p.important {color:green;}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">请注意这个重要的段落。:)</p>
</body>
</html>
三、contenteditable 属性规定是否可编辑元素的内容
<!DOCTYPE HTML>
<html>
<body>
<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>
</body>
</html>
这是一段可编辑的段落。请试着编辑该文本。
contenteditable 属性是 HTML5 中的新属性
四、contextmenu 属性为元素规定上下文菜单。这个菜单会在用户右键点击元素时出现
<p dir="rtl">Write this text right-to-left!</p>
六、draggable 属性规定元素是否可拖动。
目前只有 Firefox、Chrome 以及 Safari 支持 draggable 属性。
七、dropzone 属性规定当被拖动的数据在拖放到元素上时,是否被复制、移动或链接。
<html>
<head>
<script type="text/javascript">
function change_header()
{
document.getElementById("myHeader").innerHTML="Nice day!";
}
</script>
</head>
<body>
<h1 id="myHeader">Hello World!</h1>
<button onclick="change_header()">改变文本</button>
</body>
</html>
十、lang 属性规定元素内容的语言。
ISO 639-1 为各种语言定义了缩略词。您可以在 HTML 和 XHTML 中的 lang 和 xml:lang 属性中使用它们。
十一、spellcheck 属性规定是否对元素内容进行拼写检查。
可对以下文本进行拼写检查:
类型为 text 的 input 元素中的值(非密码)
textarea 元素中的值
可编辑元素中的值
十三、tabindex 属性规定当使用 "tab" 键进行导航时元素的顺序。
<!DOCTYPE HTML>
<html>
<body>
<a href="http://www.w3school.com.cn/" tabindex="2">W3School</a><br />
<a href="http://www.google.com/" tabindex="1">Google</a><br />
<a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>
</body>
</html>
十四、title 属性规定关于元素的额外信息
<!DOCTYPE HTML>
<html>
<body>
<p><abbr title="世界卫生组织">WHO</abbr> 成立于 1948。</p>
<p title="免费的 Web 教程">W3School.com.cn</pl>
</body>
</html>
一、accssskey 快捷键
<!DOCTYPE HTML>
<html>
<body>
<a href="http://blog.csdn.net/column/details/dawanganban-html5.html" accesskey="w">小强的HTML5移动开发之路</a><br />
<a href="http://blog.csdn.net/column/details/android-growup.html" accesskey="g">Android菜鸟的成长笔记</a>
<p><b>注释:</b>请使用 Alt + <i>accessKey</i> 来访问带有快捷键的元素。</p>
</body>
</html>
有兴趣的朋友可以按住Alt + g 和 Alt + w试一下
小强的HTML5移动开发之路
Android菜鸟的成长笔记注释:请使用 Alt + accessKey 来访问带有快捷键的元素。
该标签在HTML4和HTML5之间没有差异。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
h1.intro {color:blue;}
p.important {color:green;}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">请注意这个重要的段落。:)</p>
</body>
</html>
<!DOCTYPE HTML>
<html>
<body>
<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>
</body>
</html>
这是一段可编辑的段落。请试着编辑该文本。
contenteditable 属性是 HTML5 中的新属性
目前没有任何主流浏览器支持 contextmenu 属性。
<!DOCTYPE html>
<html>
<body>
<p contextmenu="supermenu">本段落拥有一个名为 "supermenu" 的上下文菜单。这个菜单会在用户右键单击该段落时出现。</p>
<menu id="supermenu">
<command label="Step 1: Write Tutorial" onclick="doSomething()">
<command label="Step 2: Edit Tutorial" onclick="doSomethingElse()">
</menu>
<p><b>注释:</b>目前的主流浏览器都不支持 contextmenu 属性。</p>
</body>
</html
五、dir 属性规定元素内容的文本方向。<!DOCTYPE html>
<html>
<body>
<p contextmenu="supermenu">本段落拥有一个名为 "supermenu" 的上下文菜单。这个菜单会在用户右键单击该段落时出现。</p>
<menu id="supermenu">
<command label="Step 1: Write Tutorial" onclick="doSomething()">
<command label="Step 2: Edit Tutorial" onclick="doSomethingElse()">
</menu>
<p><b>注释:</b>目前的主流浏览器都不支持 contextmenu 属性。</p>
</body>
</html
<p dir="rtl">Write this text right-to-left!</p>
值 | 描述 |
---|---|
ltr | 从左向右的文本方向。 |
rtl | 从右向左的文本方向。 |
auto | 让浏览器根据内容来判断文本方向。仅在文本方向未知时推荐使用。 |
值 | 描述 |
---|---|
true | 规定元素是可拖动的。 |
false | 规定元素是不可拖动的。 |
auto | 使用浏览器的默认特性。 |
目前没有任何主流浏览器支持 dropzone 属性。
八、hidden 属性规定对元素进行隐藏。hidden 属性是 HTML5 中的新属性。
九、id 属性规定 HTML 元素的唯一的 id<html>
<head>
<script type="text/javascript">
function change_header()
{
document.getElementById("myHeader").innerHTML="Nice day!";
}
</script>
</head>
<body>
<h1 id="myHeader">Hello World!</h1>
<button onclick="change_header()">改变文本</button>
</body>
</html>
ISO 639-1 为各种语言定义了缩略词。您可以在 HTML 和 XHTML 中的 lang 和 xml:lang 属性中使用它们。
Language | ISO Code |
---|---|
Abkhazian | ab |
Afar | aa |
Afrikaans | af |
Albanian | sq |
Amharic | am |
Arabic | ar |
Armenian | hy |
Assamese | as |
Aymara | ay |
Azerbaijani | az |
Bashkir | ba |
Basque | eu |
Bengali (Bangla) | bn |
Bhutani | dz |
Bihari | bh |
Bislama | bi |
Breton | br |
Bulgarian | bg |
Burmese | my |
Byelorussian (Belarusian) | be |
Cambodian | km |
Catalan | ca |
Cherokee | |
Chewa | |
Chinese (Simplified) | zh |
Chinese (Traditional) | zh |
Corsican | co |
Croatian | hr |
Czech | cs |
Danish | da |
Divehi | |
Dutch | nl |
Edo | |
English | en |
Esperanto | eo |
Estonian | et |
Faeroese | fo |
Farsi | fa |
Fiji | fj |
Finnish | fi |
Flemish | |
French | fr |
Frisian | fy |
Fulfulde | |
Galician | gl |
Gaelic (Scottish) | gd |
Gaelic (Manx) | gv |
Georgian | ka |
German | de |
Greek | el |
Greenlandic | kl |
Guarani | gn |
Gujarati | gu |
Hausa | ha |
Hawaiian | |
Hebrew | he, iw |
Hindi | hi |
Hungarian | hu |
Ibibio | |
Icelandic | is |
Igbo | |
Indonesian | id, in |
Interlingua | ia |
Interlingue | ie |
Inuktitut | iu |
Inupiak | ik |
Irish | ga |
Italian | it |
Japanese | ja |
Javanese | jv |
Kannada | kn |
Kanuri | |
Kashmiri | ks |
Kazakh | kk |
Kinyarwanda (Ruanda) | rw |
Kirghiz | ky |
Kirundi (Rundi) | rn |
Konkani | |
Korean | ko |
Kurdish | ku |
Laothian | lo |
Latin | la |
Latvian (Lettish) | lv |
Limburgish ( Limburger) | li |
Lingala | ln |
Lithuanian | lt |
Macedonian | mk |
Malagasy | mg |
Malay | ms |
Malayalam | ml |
Maltese | mt |
Maori | mi |
Marathi | mr |
Moldavian | mo |
Mongolian | mn |
Nauru | na |
Nepali | ne |
Norwegian | no |
Occitan | oc |
Oriya | or |
Oromo (Afan, Galla) | om |
Papiamentu | |
Pashto (Pushto) | ps |
Polish | pl |
Portuguese | pt |
Punjabi | pa |
Quechua | qu |
Rhaeto-Romance | rm |
Romanian | ro |
Russian | ru |
Sami (Lappish) | |
Samoan | sm |
Sangro | sg |
Sanskrit | sa |
Serbian | sr |
Serbo-Croatian | sh |
Sesotho | st |
Setswana | tn |
Shona | sn |
Sindhi | sd |
Sinhalese | si |
Siswati | ss |
Slovak | sk |
Slovenian | sl |
Somali | so |
Spanish | es |
Sundanese | su |
Swahili (Kiswahili) | sw |
Swedish | sv |
Syriac | |
Tagalog | tl |
Tajik | tg |
Tamazight | |
Tamil | ta |
Tatar | tt |
Telugu | te |
Thai | th |
Tibetan | bo |
Tigrinya | ti |
Tonga | to |
Tsonga | ts |
Turkish | tr |
Turkmen | tk |
Twi | tw |
Uighur | ug |
Ukrainian | uk |
Urdu | ur |
Uzbek | uz |
Venda | |
Vietnamese | vi |
Volapuk | vo |
Welsh | cy |
Wolof | wo |
Xhosa | xh |
Yi | |
Yiddish | yi, ji |
Yoruba | yo |
Zulu | zu |
可对以下文本进行拼写检查:
类型为 text 的 input 元素中的值(非密码)
textarea 元素中的值
可编辑元素中的值
spellcheck 属性是 HTML5 中的新属性。
十二、style 属性规定元素的行内样式(inline style)HTML4和HTML5无差异十三、tabindex 属性规定当使用 "tab" 键进行导航时元素的顺序。
<!DOCTYPE HTML>
<html>
<body>
<a href="http://www.w3school.com.cn/" tabindex="2">W3School</a><br />
<a href="http://www.google.com/" tabindex="1">Google</a><br />
<a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>
</body>
</html>
<!DOCTYPE HTML>
<html>
<body>
<p><abbr title="世界卫生组织">WHO</abbr> 成立于 1948。</p>
<p title="免费的 Web 教程">W3School.com.cn</pl>
</body>
</html>
相关文章推荐
- 小强的HTML5移动开发之路(13)——HTML5中的全局属性
- HTML5 拖放实例
- 小强的HTML5移动开发之路(12)——从一个多媒体标签说起
- 小强的HTML5移动开发之路(12)——从一个多媒体标签说起
- 小强的HTML5移动开发之路(12)——从一个多媒体标签说起
- 低版本IE支持HTML5
- HTML5实现下雪实例
- Html5学习之旅-html5的留言记事本开发(17)
- Html5学习之旅-html5的留言记事本开发(17)
- Html5学习之旅-html5的留言记事本开发(17)
- Html5学习之旅-html5的留言记事本开发(17)
- html5
- html5语法改变
- HTML5学习笔记之video标签
- HTML5学习笔记之audio标签
- Html5的学习之旅-Html5的web Storage概述(16)
- Html5的学习之旅-Html5的web Storage概述(16)
- Html5的学习之旅-Html5的web Storage概述(16)
- Html5的学习之旅-Html5的web Storage概述(16)
- HTML5的3D效果