HTML5的属性

一.全局属性

1.class属性

class属性对元素指定CSS类选择器

<!doctype html>

<html>

<meta charset="utf-8">

<head>

<title>2.21</title>

<style>

     .spanFont{

               font-size:24px;

              }

     .spanColor{

               color:Red;

              }

</style>

</head>

          <body>

                 <span class=" spanFont spanColor">全局属性class</span>

          </body>

</html>

2.id属性

id属性规定了HTML元素的整个html文档

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <style type="text/css">

      #headerColor{

          color:red;

      }

      #contentColor{

          color:blue;

      }

     </style>

 </head>

 <body>

      <h1 id="headerColor">这是红色的标题</h1>

      <p>一个段落</p>

      <p id="contentColor">这里是蓝色的内容</p>

 </body>

 </html>

显示

3.title属性

title属性用于描述元素的信息，鼠标悬停到具有该属性的元素上时，会显示title的内容

 <!doctype html>

 <html>

 <meta charset="utf-8">

 <head>

     <title>2.2.3</title>

 </head>

 <body>

     世界贸易组织简称<acronym title="World Trade Organization">WTO</acronym>

 </body>

 </html>

4.style属性

style属性用于规定元素的行内样式，并覆盖任何全局样式设定

 <!doctype html>

 <html>

 <meta charset="utf-8">

 <head>

     <title>2.2.</title>

     <style>

         .redColor{ color:red;}

         </style>

 </head>

 <body>

    <span class="redColor" style="color:Blue">这段文字是什么颜色呢？</span>

 </body>

 </html>

显示：

5.accesskey属性

用于给HTML元素定义快捷键，以便获得焦点或激活元素。

例如在一个HTML文档中有两个按钮，其中一个设置了快捷键，另一个没有设置，当按下快捷键时，获得焦点的按钮有一个蓝色边框

 <!doctype html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>2.2.5</title>

 </head>

 <body>

 <button>没选中的按钮</button>

 <button accesskey="q">快捷键是Alt+q</button>

 </body>

 </html>

显示结果：

6.dir属性

dir属性规定元素内容的方向。该属性对应三个值，如果是从左向右排列，使用ltr；从右到左，使用rtl，

 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

    <bdo dir="rtl">1234567</bdo><br>

    <bdo dir="ltr">1234567</bdo><br>

    <bdo dir="auto">1234567</bdo><br>

 </body>

 </html>

显示

7.contextmenu属性

指定上下文菜单的数据源。当用户在指定位置单击鼠标右键时，弹出右键菜单，可以显示多级菜单。现在只是火狐浏览器支持其功能

 <!doctype html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>2.2.7</title>

 </head>

 <body>

 <section contextmenu="myContextMenu">

     <p>右键点击这里弹出菜单</p>

     <menu type="context" id="myContextMenu">

         <menuitem label="菜单1"></menuitem>

         <menuitem label="菜单2"></menuitem>

         <menu label="菜单3">

             <menuitem label="菜单4"></menuitem>

             <menuitem label="菜单5"></menuitem>

         </menu>

     </menu>

 </section>

 </body>

 </html>

显示

8.draggable属性

用于设置是否可以进行拖拽

 <!doctype html>

 <html>

 <head>

     <meta charset="utf-8">

     <title>2.2.8</title>

 </head>

 <body>

     <p draggable="true">可以用鼠标拖动这段文字。</p>

 </body>

 </html>

显示

9.dropzone属性

用于指定当被拖动的数据在拖动到元素上时，是否被复制、移动或者链接

巴特西

HTML5的属性

最新文章

热门文章