HTML属性

HTML属性的特点：

• HTML元素可以添加属性。
• 属性可以在元素内添加附加信息。
• HTML属性一般放置在开始标签内。
• 属性总是以名称/值对的形式出现。

 

html属性：

使用于大部分标签元素的属性：

• class：为html元素定义一个或多个类名（classname）。class="element"
• id：定义元素唯一的id。id="only"
• style：规定元素的行内样式（inline style）。style="color: red;"
• title：标题，描述了元素的额外信息（作为工具条使用）。title="标题"

<div class="element" id="only" style="color: red;" title="标题">常用html属性</div>

 

accesskey：设置访问元素的键盘快捷键。

• 注意：不同游览器使用的快捷键方式不同。accesskey="k"

• • ie，chrome，opera 15+：ALT+accesskey值
  • mac系统chrome游览器：control+option+accesskey值
  • opera：SHIFT+ESC+accesskey值
  • firefox：SHIFT+ALT+accesskey值

<a href="http://www.baidu.com" accesskey="k">点击跳转</a>

 

contenteditable（html5 新增）：指定元素内容是否可以编辑。

• 属性值：contenteditable="true"

• • true：指定元素为可编辑状态。（默认值可以不添加属性值）
  • false：指定元素内容不可编辑状态。（同不添加contenteditable属性）
  • 注意：当元素没有设置contenteditable属性值时，子元素将会从父元素继承。

<div contenteditable="true">

    <p contenteditable="false">这是一个不可编辑当段落</p>

    <p>这是一个可以编辑的段落</p>

</div>

 

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

• 属性值：dir="rtl"

• • auto：游览器的判断文本方向，仅在文本方向未知时使用。
  • ltr：默认值，从左至右的文本方向。
  • rtl：从右至左的文本方向。（普通标签中只是位置逆序靠右，文字不逆序，只能用在块标签。）

<p dir="rtl">正常文本，从左至右</p>

 

bdo：定义文本的排序方向（html标签）。

• bdo dir="rtl"：文字逆序排序<bdo></bdo>

<bdo dir="rtl">正常文本，从左至右</bdo>

 

draggable（html5 新增）：规定元素是否能被拖动。

• 属性值：draggable="true"

• • true：定义元素为可拖动状态。
  • false：定义元素为不可拖动状态。
  • auto：使用游览器默认特性。

• 提示：图片和链接默认可以拖动。

<p draggable="true">这是一个可以拖动的段落</p>

 

hidden：隐藏一个元素。

<p hidden>这是一个隐藏段落</p>hidden

 

lang：规定元素内容的语言。

• 用处：lang="en" en英文

• • HTML的lang属性可以用于声明网页或部分网页的语言，对搜索引擎和游览器都是有帮助的。

<p lang="en">声明英文en</p>

 

tabindex：规定当前使用tab键进行导航时元素的顺序。

• 属性值：

• • number：元素的tab键控制顺序（1 第一）

• • • 默认tab顺序：百度>4399>7k7k
    • 以下代码增加tabindex属性后tab的顺序：7k7k>百度>4399

<a href="http://www.baidu.com" tabindex="2">百度</a><br>

<a href="http://www.4399.com" tabindex="3">4399</a><br>

<a href="http://www.7k7k.com" tabindex="1">7k7k</a>