首页 > 代码库 > HTML 属性

HTML 属性

2024-10-23 21:58:02   210人阅读

1、 accesskey 属性

语法：<element accesskey="character">   //character指激活快捷键

accesskey 属性规定激活（使元素获得焦点）元素的快捷键

但是，在大多浏览器中快捷键可以设置为另外一组组合。

提示： 各种浏览器下accesskey快捷键的使用方法：

IE浏览器

按住Alt键，点击accesskey定义的快捷键(焦点将移动到链接)，再按回车.

FireFox浏览器

按住Alt+Shift键，点击accesskey定义的快捷键.

Chrome浏览器

按住Alt键，点击accesskey定义的快捷键.

Opera浏览器

按住Shift键，点击esc，出现本页定义的accesskey快捷键列表可供选择.

Safari浏览器

按住Alt键，点击accesskey定义的快捷键.

//带有指定快捷键的超链接：
<a href=http://www.mamicode.com/"//www.runoob.com/html/html-tutorial.html" accesskey="h">HTML 教程</a><br>
<a href=http://www.mamicode.com/"//www.runoob.com/css/css-tutorial.html" accesskey="c">CSS 教程</a>

 

2、class属性

定义和用法

class 属性定义了元素的类名。

class 属性通常用于指向样式表的类。但是，它也可以用于 JavaScript 中（通过 HTML DOM）, 来修改 HTML 元素的类名。

语法：<element class="classname">

首先在style里声明类

 

<style>
    h1.c1
    {color : blue;} //仅对h1标签有用
    .c2
    {{color : red;}//都有用
</style>

 

然后body里

 

 

    <body>
        <p class="c1"> sasfds</p> //没效果
        <hr />
        <p class="c2"> sasfds</p>//有效果
    </body>

 

 

 

3、contenteditable 属性

语法：<element contenteditable="true|false"> true为可编辑

 

定义和用法

 

contenteditable 属性指定元素内容是否可编辑。

 

注意： 当元素中没有设置 contenteditable 属性时，元素将从父元素继承。

<p contenteditable="true">这是一个可编辑段落。</p>

 

 

4、contextmenu属性(上下文菜单)

 目前只在火狐浏览器可用 暂不了解

 

5、data-* 属性

语法：<element data-*="somevalue">  //somevalue 是 指定属性值(一个字符串)

定义和用法

data-* 属性用于存储私有页面后应用的自定义数据。

data-* 属性可以在所有的 HTML 元素中嵌入数据。

自定义的数据可以让页面拥有更好的交互体验（不需要使用 Ajax 或去服务端查询数据）。

data-* 属性由以下两部分组成：

  1. 属性名不要包含大写字母，在 data- 后必须至少有一个字符。
  2. 该属性可以是任何字符串

注意： 自定义属性前缀 "data-" 会被客户端忽略。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script>
function showDetails(animal)
{
    var animalType = animal.getAttribute("data-animal-type");
    alert("The " + animal.innerHTML + " is a " + animalType + ".");//innerHTML 属性设置或获取表格行的开始和结束标签之间的 HTML
}
</script>
</head>
<body>

<h1>物种</h1>
<p>点击一个物种，看看它是什么类型：</p>

<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
  <li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>  
  <li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>  
</ul>

</body>
</html>

 

6、dir 属性

定义和用法

dir 属性规定元素内容的文本方向。

语法：<element dir="ltr|rtl|auto">

ltr 默认。从左向右的文本方向。
rtl 从右向左的文本方向。
auto

让浏览器根据内容来判断文本方向。仅在文本方向未知时推荐使用。

 

7、draggable 属性

定义和用法

draggable 属性规定元素是否可拖动。

提示： 链接和图像默认是可拖动的。

提示： draggable 属性经常用于拖放操作。请阅读我们的 HTML5 拖放教程，以学习更多知识。

属性值

值描述
true 规定元素是可拖动的。
false 规定元素是不可拖动的。
auto 使用浏览器的默认特性。

 

8、dropzone 属性(与拖动有关)

主流浏览器暂不支持，先不做了解

9、hidden属性

定义和用法

hidden 属性规定对元素进行隐藏。

隐藏的元素不会被显示。

如果使用该属性，则会隐藏元素。

可以对 hidden 属性进行设置，使用户在满足某些条件时才能看到某个元素（比如选中复选框，等等）。然后，可使用 JavaScript 来删除 hidden 属性，使该元素变得可见。

<p hidden="hidden">这是一段隐藏的段落。</p>
<p>这是一段可见的段落。</p>

 

10、lang 属性

定义和用法

lang 属性规定元素内容的语言。

语法：<element lang="language_code">

<p lang="fr">这是一个段落。</p>//段落中包含一些法语

 

11\spellcheck 属性

定义和用法

spellcheck 属性规定是否对元素内容进行拼写检查。

可对以下文本进行拼写检查：

  • 类型为 text 的 input 元素中的值（非密码）
  • textarea 元素中的值
  • 可编辑元素中的值
<p contenteditable="true" spellcheck="true">这是可编辑的段落。请试着编辑文本。</p>

 

12、style属性

定义和用法

style 属性规定元素的行内样式（inline style）。

style 属性将覆盖任何全局的样式设定，例如在 <style> 标签或在外部样式表中规定的样式。

语法：<element style="style_definitions">

 

<h1 style="color:blue;text-align:center">这是一个标题</h1>
<p style="color:green">这是一个段落。</p>

 

 

 

13、title属性

 

定义和用法

 

title 属性规定关于元素的额外信息。

 

这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。

<p><abbr title="世界卫生组织">WHO</abbr> 成立于 1948。</p>
<p title="菜鸟教程">菜鸟教程</p>

 

 

14、tabindex 属性(在用户名的文本框中按tab键会跳到密码框)

定义和用法

tabindex 属性规定当使用 "tab" 键进行导航时元素的顺序。

<a href=http://www.mamicode.com/"http://www.w3cschool.cc/" tabindex="2">W3CSchool</a><br />
<a href=http://www.mamicode.com/"http://www.google.com/" tabindex="1">Google</a><br />
<a href=http://www.mamicode.com/"http://www.microsoft.com/" tabindex="3">Microsoft</a>

 

15、translate属性

暂无主流浏览器支持

HTML 属性


联系
我们