属性是 HTML 元素提供的附加信息。
HTML 属性
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现，比如：name="value"。
- id name class style常用属性
- 属性和属性值，尽量小写
- class=" " 引号里面可以填入多个class属性
html属性
id 规定元素的唯一 id
class 规定元素的类名（classname）
data-* 用于存储页面的自定义数据
hidden 规定对元素进行隐藏。
style 规定元素的行内样式（inline style）
实例
id
<script>
function displayResult()
{
document.getElementById("myHeader").innerHTML="Have a nice day!";
}
</script>
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">编辑文本</button>
class
<style>
h1.intro {color:blue;}
p.important {color:green;}
</style>
<h1 class="intro">标题</h1>
<p>段落。</p>
<p class="important">注意：这是一个很重要的段落。 :)</p>
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>html-基础演示</title>
<style type="text/css">
.font-size-30{
font-size: 50px;
}
.color-blue{
color: blue;
}
</style>
</head>
<body>
<p class="font-size-30 color-blue">font-size-30 color-blue</p>
</body>
</html>
data-*
<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>
</ul>
hidden
<p hidden="hidden">这是一段隐藏的段落。</p>
<p>这是一段可见的段落。</p>
style
<h1 style="color:blue;text-align:center">这是一个标题</h1>
<p style="color:green">这是一个段落。</p>
href
<a href="http://www.baidu.com">这是一个链接</a>