一.全局属性

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的属性的更多相关文章

  1. HTML5 学习总结（二）——HTML5新增属性与表单元素

    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

  2. HTML5 学习笔记（二）——HTML5新增属性与表单元素

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  3. HTML5学习总结——HTML5新增属性与表单元素

    一HTML5新增属性 1.1contcxtmcnu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> < ...

  4. HTML5新增属性

    [sourcecode language="plain"] <!DOCTYPE html> <html manifest="cache.manifest ...

  5. HTML5 自动聚焦 属性

    原文 : HTML5 autofocus Attribut 原文发布时间: 2012年08月27日 翻译时间: 2013年8月6日 HTML5 推出了一大堆精彩的东西给我们. 过去我们要用JavaSc ...

  6. HTML5新增属性data-*和js/jquery之间的交互

    HTML5新增属性data- data-自定义属性,这种方式的自定义属性解决属性混乱无状态管理的现状 书写实例 <div data-role="page" data-last ...

  7. html5 data属性的使用

    html5 data属性定义和用法 <ul> <li data-animal-type="bird">Owl</li> <li data- ...

  8. role是一个HTML5的属性

    <form role="form"> role是一个HTML5的属性,role="form"告诉辅助设备(如屏幕阅读器)这个元素所扮演的角色是个表单 ...

  9. HTML5新增属性学习笔记

    1.form属性 表单内的从属元素,可以写在表单外部.可以通过指定元素的form属性来声明元素所属表单.form的属性值为表单的id. <form id="testForm" ...

  10. html5常用属性text-shadow、vertical-align、background如何使用

    html5常用属性text-shadow.vertical-align.background如何使用 一.总结 一句话总结: 1.text-shadow:[x轴(X Offset) y轴(Y Offs ...

随机推荐

  1. 如何使用 OpenStack CLI - 每天5分钟玩转 OpenStack（22）

    本节首先讨论 image 删除操作,然后介绍 OpenStack CLI 的使用方法,最后讨如何 Troubleshoot. Web UI 删除 image admin 登录后,Project -&g ...

  2. Linux下java进程CPU占用率高分析方法

    Linux下java进程CPU占用率高分析方法 在工作当中,肯定会遇到由代码所导致的高CPU耗用以及内存溢出的情况.这种情况发生时,我们怎么去找出原因并解决. 一般解决方法是通过top命令找出消耗资源 ...

  3. 原生js与jquery操作iframe

    1  原生js获取iframe的window对象 //方法1 document.getElementById('iframeId').contentWindow; //方法2 window.frame ...

  4. linux环境变量的设置

    linux中环境变量分为系统环境变量和用户环境变量(和window中一样),系统环境变量对所有系统用户都有效,用户环境变量只对当前用户有效,我们以ubuntu为例说明 用户环境变量 用户环境变量通常存 ...

  5. [bzoj1911][Apio2010特别行动队] (动态规划+斜率优化)

    Description Input Output Sample Input - - Sample Output HINT Solution 斜率优化动态规划 首先易得出这样的一个朴素状态转移方程 f[ ...

  6. bzoj[1087][SCOI2005]互不侵犯King

    Description 在N×N的棋盘里面放K个国王,使他们互不攻击,共有多少种摆放方案.国王能攻击到它上下左右,以及左上左下右上右下八个方向上附近的各一个格子,共8个格子. Input 只有一行,包 ...

  7. IIS HTTP 错误 404.17 - Not Found HTTP 错误 404.2 解决方法

    出现这种情况的原因通常是因为先安装了Framework,后安装的IIS: 解决方法 运行cmd,输入: C:\Windows\Microsoft.NET\Framework\V4.0.30319\as ...

  8. Microsoft.VisualStudio.TestTools.UnitTesting 命名空间

      类 说明 AfterAssemblyCleanupEventArgs 为 AfterAssemblyCleanup 事件提供数据. AfterAssemblyInitializeEventArgs ...

  9. js 判断各种数据类型

    了解js的都知道, 有个typeof  用来判断各种数据类型,有两种写法:typeof   xxx   ,typeof(xxx) 如下实例: typeof   2      输出   number   ...

  10. C 语言学习 第一次作业总结

    第一次的作业是冯老师布置的练习题,需要在pta平台上完成.我这边看不到结果,但是透过冯老师给出的截图,同学们都还是认真的去做的.同时,我这边也布置了一个持续 3 周的作业:熟悉 git 的使用.因为后 ...