3.6 HTML5 属性使用方法

HTML 属性

标签可以拥有属性为元素提供更多的信息

这是属性的一个应用，有的标签可以有自己的属性，但是有的标签也没有。比如闭合标签就是我们指的空元素是没有的。

属性以键值对的方式出现

如：href= "www.jikexueyuan.com", 这是 <a> 中的属性，指定了链接打开的地址。

在目录下新建一个 hrefht.html 文件，写入：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    news
</body>
</html>

然后在 index.html 中修改代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <a href="hrefht.html">打开本地</a>
</body>
</html>

然后我们执行以下 index.html：

图片说明

当我们点击打开本地：

图片说明

就会发现跳转到了新建的页面中。这是打开一个本地文件。

常用的标签属性

<h1>: align 选择对齐方式

<h1> <h2> 等等这些使用方法都是一样的，添加代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <a href="hrefht.html">打开本地</a>
    <h1 align="right">标题1</h1>
</body>
</html>

刷新浏览器：

图片说明

大家可以看到标题居右了。这个属性如果我们什么也不设置默认是居左的，当然我们设置 left、center 都可以。

<body>: bgcolor 可以选择背景颜色

我们来为设置属性：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body bgcolor="#0000cd">
    <a href="hrefht.html">打开本地</a>
    <h1 align="right">标题1</h1>
</body>
</html>

刷新浏览器：

图片说明

发现网页的颜色变了。当然这里可以更换其他的颜色，这就是背景颜色的更换。还有一个与之相似的属性 background，不同之处是这个属性是设置背景图片的。

<a>: target 决定了在何处打开链接

刚才的跳转测试中我们发现默认情况下实在同一个标签内打开，是会覆盖之前的标签的。下面我们为其设置一个属性：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body bgcolor="#0000cd">
    <a href="hrefht.html" target="_blank">打开本地</a>
    <h1 align="right">标题1</h1>
</body>
</html>

刷新浏览器：

图片说明

会发现之前的标签还存在，浏览器在新的页面上打开了。它包含三个属性：_self 默认的，在当前标签打开。还有两个在后面框架部分讲解，现在没有办法测试。

通用属性

class: 规定了元素的类名
id: 规定了元素唯一的 ID
style: 规定了元素的样式
title: 规定元素的额外信息

class 和 id 规定当前元素的类名和引用关系，style 一般会引入一些外部文件，像 css 样式等等。我们可以来尝试一下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body bgcolor="#0000cd">
    <a href="hrefht.html" target="_blank">打开本地</a>
    <h1 align="right">标题1</h1>
    <h2 class="h2">标题2</h2> 
    <h3 id="h3">标题3</h3> 
</body>
</html>

我们在样式中就可以通过 class 引用这一标签了。而 id 属性不同的地方就在于全局唯一性，不可以设置重复的 id ，但是你可以设置重复的 class 名，表示一类组件。

<style> 一般用来引入外部样式，放在头标签中：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css"></style>
</head>
<body bgcolor="#0000cd">
    <a href="hrefht.html" target="_blank">打开本地</a>
    <h1 align="right">标题1</h1>
    <h2 class="h2">标题2</h2> 
    <h3 id="h3">标题3</h3> 
</body>
</html>