目录导航

HTML属性用于提供有关HTML元素的更多信息。属性位于名称和值对中,例如name1="value1"表示属性的名称为:name1,而value1就是name1的值。

1. HTML属性示例

下面是HTML属性的示例:

<!DOCTYPE html>
<html>
<head>
    <title>HTML教程</title>
</head>
<body>

    <p align="left">使用HTML align属性(值为:left)</p>
    <p align="center">使用HTML align属性(值为:center)</p>
    <p align="right">使用HTML align属性(值为:right)</p>
    <p style="background-color:blue;color:white;">使用HTML属性 (蓝色背景,白色字体)</p>

</body>
</html>

在浏览器中打开输出网页显示如下:

2. HTML title属性

HTML title属性用于为HTML元素提供标题。下面是一个使用HTML title属性的示例:

<!DOCTYPE html>
<html>
<head>
    <title>HTML教程</title>    
</head>
<body>
    <h2>HTML属性示例</h2>
    <p>不使用HTML title属性</p>
    <p title="使用HTML title属性示例">使用HTML title属性示例</p>
    <img src="http://www.xntutor.com/uploads/logo/2019/12/13/125639_63569.png" title="这是HTML5 Logo图片">

</body>
</html>

在浏览器中打开输出网页显示如下:

HTML title属性示例

注:标记的title属性起辅助显示作用。从上面的输出中可以看到,如果将鼠标光标放在“使用HTML属性”段落文字上是,看到光标的工具提示出现:”使用HTML title属性示例”。

3. HTML id属性

HTML id属性基本上用于唯一标识HTML页面中的任何元素。下面是HTML中使用id属性的示例:

<p id="float-left">由ID属性 float-left 标识</p>
<p id="float-right">由ID属性 float-right 标识</p>

完整代码如下所示:

<!DOCTYPE html>
<html>
<head>
    <title>HTML教程</title>
    <style>
        p#useid-attr
        {
            border : 3px solid orange;
            padding : 5px;
            margin : 10px;
        }
    </style>
</head>
<body>
    <h2>HTML属性示例</h2>
    <p>不使用HTML属性</p>
    <p id="useid-attr">使用HTML属性示例</p>
    <p align="right">使用HTML align属性(值为:right)</p>
    <p style="background-color:blue;color:white;text-align:center;">使用HTML属性 (蓝色背景,白色字体,文本中间对齐)</p>

</body>
</html>

在浏览器中打开输出网页显示如下:

HTML id属性

要了解有关使用Style标记样式化HTML元素的更多信息,请参考HTML CSS教程。 要了解有关样式或CSS的相关知识,请参阅CSS教程

4. HTML style属性

HTML style属性用于设置HTML元素的样式。以下示例显示了如何使用style属性设置HTML元素的样式:

<!DOCTYPE html>
<html>
<head>
    <title>HTML教程</title>    
</head>
<body>
    <h2>HTML属性示例</h2>    
    <p style="font-family:Microsoft Yahei, 微软雅黑; color:red;font-size: 18px;">使用HTML style属性的P标签(font-family=arial和color=red)</p>
    <div style="font-family:arial; color:orange;">使用 HTML style属性(font-family=arial和color=red)</div>
</body>
</html>

在浏览器中打开输出网页显示如下:

HTML style属性

5. HTML class属性

HTML class属性(也叫类属性)用作为HTML元素提供类。可以为多个元素赋予相同的类名。在HTML中使用class属性的示例:

<div class="class1">使用HTML class属性(style-class1)</div>
<span class="class2">使用HTML class属性(style-class2)</span>
<p class="class3">使用HTML class属性(style-class2)</p>

下面的示例中显示了如何使用HTML中的class属性来设置HTML元素的样式。

<!DOCTYPE html>
<html>
<head>
    <title>HTML教程</title>    
    <style>
        .class1{
            background-color:blue;color:white;
        }
        .class2{
            border : 2px solid yellow;margin-top: 12px;width:100%;
        }
        p.class3
        {
            border : 2px solid orange;
            padding : 5px;
            margin : 10px;
        }
        img.imgstyle{
            width: 64px;
        }

    </style>
</head>
<body>
    <h2>HTML属性示例</h2>
    <div class="class1">使用HTML class属性(style-class1)</div>
    <p class="class2">使用HTML class属性(style-class2)</p>
    <p class="class3">使用HTML class属性(style-class3)</p>
    <img class="imgstyle" src="http://www.xntutor.com/uploads/logo/2019/12/13/125639_63569.png" title="这是HTML5 Logo图片">    
</body>
</html>

在浏览器中打开输出网页显示如下:

HTML class属性

6. HTML dir属性

HTML dir属性用于指示文本应流向浏览器的方向,dir属性可能的值有两个:ltrrtl。下面是一个在HTML中使用dir属性的示例:

<!DOCTYPE html>
<html>
<head>
    <title>HTML教程</title>    
</head>
<body>
    <h2>HTML dir属性示例</h2>    
    <p dir="rtl" style="color:red;">使用HTML style属性的P标签(font-family=arial和color=red)</p>
    <div dir="ltl" style="font-family:arial; color:orange;">使用 HTML style属性(font-family=arial和color=red)</div>
</body>
</html>

在浏览器中打开网页显示如下:

HTML dir属性

7. HTML height和height属性

HTML heightheight属性用于定义HTML文档中图像的大小。使用widthheight属性来定义大小,如以下示例所示:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>HTML教程</title>    
</head>
<body>
    <h2>HTML属性示例</h2>    
    <img src="http://www.xntutor.com//static/img/coding.png" width="126" height="126">
</body>
</html>

在浏览器中打开网页显示如下:
HTML height和height属性

8. HTML alt属性

HTML alt属性用于指定无法显示HTML元素时要显示的替代文本。下面是一个在HTML中使用alt属性的示例:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>HTML教程</title>    
</head>
<body>
    <h2>HTML属性示例</h2>    
    <img src="http://www.xntutor.com//static/img/code.png" alt="这是一个写代码的图片" width="126" height="126">
</body>
</html>

在浏览器中打开网页显示如下:
HTML alt属性

9. HTML lang属性

HTML lang属性用于指示文档中使用的主要语言。下面是在HTML中使用lang属性的示例:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>HTML教程</title>    
</head>
<body>
    <h2>HTML lang属性示例</h2>    

</body>
</html>