什么是属性
- HTML 元素可以设置属性
- 属性可以在元素中添加附加信息
- 属性一般描述于开始标签
- 属性总是以名称/值对的形式出现，比如：name=“value”。
1.class
- 规定元素的类的名称。如需为一个元素规定多个类，用空格分隔类名。 < span class=“left important” >。HTML元素允许使用多个类。
- 名称规则：
- 必须以字母 A-Z 或 a-z 开头
- 可以是以下字符： (A-Za-z), 数字 (0-9), 横杆 ("-"), 和 下划线 ("_")
- 在 HTML 中, 类名是区分大小写的
示例：
<html>
<head>
<style type="text/css">
h1.intro {color:blue;}
p.important {color:green;}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Note that this is an important paragraph.</p>
</body>
</html>
效果：
2.id
- id 属性规定 HTML 元素的唯一的 id。
- id 在 HTML 文档中必须是唯一的。
- id 属性可用作链接锚（link anchor），通过 JavaScript（HTML DOM）或通过 CSS 为带有指定 id的元素改变或添加样式。
- 命名规则：
- 必须以字母 A-Z 或 a-z 开头
- 其后的字符：字母(A-Za-z)、数字(0-9)、连字符("-")、下划线("_")、冒号(":" ) 以及点号(".")
- 值对大小写敏感
在CSS中使用id:
在style元素内给指定的id的元素设定样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>willow</title>
<style>
#myHeader {
color: red;
text-align: center;
}
</style>
</head>
<body>
<h1 id="myHeader">我喜欢小猪佩奇！</h1>
</body>
</html>
效果：
JavaScript中使用：
通过按钮触发Script中的函数，改变函数中指定id的元素样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>willow</title>
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
</head>
<body>
<h1 id="myHeader">Hello World!</h1>
<button οnclick="displayResult()">编辑文本</button>
</body>
</html>
效果：
3.style
- style 属性规定元素的行内样式（inline style）。
- style 属性将覆盖任何全局的样式设定，例如在 < style > 标签或在外部样式表中规定的样式。
- 值：一个或多个由分号分隔的 CSS 属性和值。 (例如： style=“color:blue;text-align:center”)
例如：
<body>
<h1 style="color:blue;text-align:center">这是一个标题</h1>
<p style="color:green">这是一个段落。</p>
</body>
4.title
- title 属性规定关于元素的额外信息。
- 这些信息通常会在鼠标移到元素上时显示一段工具提示文本（tooltip text）。
例：
<body>
<p><abbr title="世界卫生组织">WHO</abbr> 成立于 1948。</p>
<p title="牛客教程">牛客教程</p>
</body>
效果：
