HTML的一些属性和全局属性

HTML属性

内容提纲

1. html属性
2. html全局属性

[html属性]

属性为 HTML 元素提供附加信息。

属性一般以名称/值对的形式出现，比如：<img src="abc.jpg" alt="替换文本">

属性也可以没有属性值，比如：<input type="text" value="无值属性用法" disabled>

html全局属性

所有html标签有效的属性，w3school w3

[slide]

html全局属性

属性	描述
id	规定元素的唯一id
class	规定元素的一个或多个类名,引用样式表中的类
title	规定有关元素的额外信息,鼠标悬停提示
accesskey	规定激活元素的快捷键,Alt+指定键
tabindex	规定元素的tab键次序
style	规定元素的行内 CSS 样式
lang	规定元素内容的语言

html全局属性示例

<a 
  id="lizhiyuan" 
  class="link" 
  title="访问我的地址" 
  accesskey="z"
  tabindex="2" 
  href="//github.com/aylizhiyuan" 
  target="_blank"
  style="text-shadow: 1px 1px 1px #000">Mr.zy</a> 

Mr.zy

html全局属性-html5新增

属性	描述
contenteditable	规定元素内容是否可编辑
data-*	用于存储页面或应用程序的私有定制数据
hidden	规定元素是否隐藏
spellcheck	规定是否对元素进行拼写和语法检查
translate	规定是否应该翻译元素内容

html5新增全局属性示例

<h2 contenteditable>可编辑标题</h2>
<h2 hidden>编辑标题之后显示</h2>

可编辑标题

编辑标题之后显示

data-*属性-自定义存放数据属性

<div class="spaceship" 
	data-ship-id="92432"
    data-weapons="laser 2" 
    data-shields="50%"
    data-x="30" 
    data-y="10" 
    data-z="90">
	<button class="fire"
		οnclick="alert("第"+this.parentNode.dataset.shipId+"号飞船开始发射！")">
		Fire
	</button>
</div>

Fire

translate属性-标签内容是否翻译

<p>The Bee Game is a text adventure game in English. </p>
<p>When the game launches, the first thing you should do 
is type <kbd translate="no">eat honey</kbd>.</p> 
<p>The game will respond with:<samp translate="no">Yum yum! That was some good honey!</samp></p>

The Bee Game is a text adventure game in English.

When the game launches, the first thing you should do is type eat honey.

The game will respond with:Yum yum! That was some good honey!