<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML 回顾</title>
</head>
<body>
<section>
<H1>一 全局属性:accesskey</H1>
<ol>
<li>accesskey:设定按键组合，执行时将焦点指到这个窗体对象。在IE、Chrome、Safari和Opera中使用时按Alt+accesskey键;此时设置数字键1为accesskey<br>那么当按住alt+1时候焦点会跑到重置按钮</li>
</ol>
<form action="test">
<p>账号<input type="text" name="usr" autofocus> </p>
<p>账号<input type="password" name="pwd"> </p>
<p>
<input type="submit" value="提交">
<input type="reset" value="重置" accesskey="1">
</p>
</form>
</section>
<hr>
<section>
<H1>二 全局属性:class</H1>
<ol>
<li>后续补充</li>
</ol>
<form action="test">
<p>账号<input type="text" name="usr" autofocus> </p>
<p>账号<input type="password" name="pwd"> </p>
<p>
<input type="submit" value="提交">
<input type="reset" value="重置" accesskey="1">
</p>
</form>
</section>
<hr>
<section>
<H1>三 全局属性:contentediable</H1>
<ol>
<li>定义用户可修改部分,取值可以为true or flase</li>
</ol>
<form action="test">
<p contenteditable="true">请在页面上修改我</p>
</form>
</section>
<hr>
<section>
<H1>四 全局属性:contextmenu</H1>
<ol>
<li>可设定使用鼠标右键单击元素时出现快捷键,目前只有Firefox支持,这里不演示</li>
</ol>
</section>
<hr>
<section>
<H1>五 全局属性:data-*</H1>
<ol>
<li>提供可以自定义资料的场合,常被用在JavaScript设计中,以创造更好的用户体验,* 所指代内容必须时小写字母,任意长度</li>
<li data-continent-loc="Europe">French</li>
<li data-continent-loc="Asia">China</li>
<li data-continent-loc="Africa">Egypt</li>
</ol>
</section>
<hr>
<section>
<H1>六 全局属性:dir</H1>
<ol>
<li>设定文字方向，它的值可以是“ltr”（左到右）或是“rtl”（右到左），默认是从左到右</li>
<p dir="auto">设定文字方向设置为auto:它的值可以是“ltr”（左到右）或是“rtl”（右到左），默认是从左到右</p>
<p dir="ltr">设定文字方向设置为ltr:它的值可以是“ltr”（左到右）或是“rtl”（右到左），默认是从左到右</p>
<p dir="rtl">设定文字方向设置为rtl:它的值可以是“ltr”（左到右）或是“rtl”（右到左），默认是从左到右</p>
</ol>
</section>
<hr>
<section>
<H1>七 全局属性:draggable</H1>
<ol>
<li>设定这个元素是否可以被拖拽或移动,值为 true/false/auto;这涉及到JavaScript知识,这里先跳过</li>
</ol>
</section>
<hr>
<section>
<H1>八 全局属性:hidden</H1>
<ol>
<li>有些元素内容可能需要移除或是暂时不需要显示，皆可以使用这个属性设定。它是一个Boolean属性（也就是以true或false方式呈现），若元素含这个属性，则这个元素会被隐藏。网页设计中，也可以使用JavaScript更改元素的hidden属性设定。</li>
</ol>
</section>
<hr>
</section>
<hr>
<section>
<H1>九 全局属性:id/lang/spellcheck</H1>
<ol>
<li>有些元素内容可能需要移除或是暂时不需要显示，皆可以使用这个属性设定。它是一个Boolean属性（也就是以true或false方式呈现），若元素含这个属性，则这个元素会被隐藏。网页设计中，也可以使用JavaScript更改元素的hidden属性设定。</li>
<li>lang: 设定元素的语系</li>
<li>spellcheck:可设定是否对元素内容进行拼字或语法检查,其值为true或false;使用时需要将lang设置为lang='en'</li>
</ol>
<form action="test" method="post">
<textarea name="输入" lang="en" spellcheck="true" cols="30" rows="10">可输入英文,这个文字框可以进行拼写检查
</textarea>
</form>
</section>
<hr>
<section>
<H1>十 全局属性:style</H1>
<ol>
<li>这个属性可套用到元素的CSS样式表单，这也是本书下一篇的主题</li>
</section>
<hr>
<section>
<H1>十一 全局属性:tabindex</H1>
<ol>
<li>这个属性可以设定按Tab键时，焦点的移动顺序</li>
</ol>
<form action="test" method="post">
<p>
默认情况tab键焦点移动顺序
<p><input type="text" value="顺序1" autofocus></p>
<p><input type="text" value="顺序2"></p>
<p><input type="text" value="顺序3"></p>
</p>
<p>
焦点顺序为132
<p><input type="text" value="顺序1" autofocus></p>
<p><input type="text" value="顺序2" tabindex="2"></p>
<p><input type="text" value="顺序3" tabindex="1"></p>
</p>
</form>
</section>
<hr>
<section>
<H1>十二 全局属性:title</H1>
<ol>
<li>这个属性用于定义元素的额外信息，如果将鼠标指针移至元素，将列出此元素的title信息。</li>
</ol>
<form action="test" method="post">
<textarea name="111" lang="en" spellcheck="true" id="123" cols="30" rows="10" title="这里可以输入英语,并进行语法检测">
</textarea>
</form>
</section>
<hr>
<section>
<H1>十二 全局属性:translate</H1>
<ol>
<li>这个属性可设定是否翻译此文，不过目前主流的浏览器皆未支持此属性</li>
</ol>
</section>
<hr>
<section>
<H1>十三 事件属性</H1>
<ol>
<li>当用户浏览网页时会触发的一系列动作，HTML提供了这些触发的事件名称，网页设计师可以针对此事件使用JavaScript设计一段脚本（Script）。HTML的元素script和noscript就是供设定事件属性使用。下列是事件属性的类别</li>
</ol>
<form action="test" method="post">
<select name="事件属性" id="win" >
<optgroup label="窗口事件">
<option label="onafterprint：文件打印后所触发的事件" value="01">onafterprint：文件打印后所触发的事件</option>
<option value="02">onbeforeprint：文件打印前所触发的事件</option>
<option value="03">onbeforeunload：文件卸载前所触发的事件。</option>
<option value="04">onerror：错误发生时所触发的事件</option>
<option value="05">onhaschange：文件改变时所触发的事件</option>
</optgroup>
</select>
</form>
</section>
<hr>
</body>
</html>
扫一扫
1277
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
