一.全局属性

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. 使用maven将代码到私服

    在上一节中,我们讲述了maven私服搭建 ,那么本章,我们讲述如何使用maven将代码打包并上传到maven私服上. 一.maven pom.xml关键配置信息. <distributionMa ...

  2. request属性 request.getAttribute()

    一.request.getParameter() 和request.getAttribute() 区别 (1)request.getParameter()取得是通过容器的实现来取得通过类似post,g ...

  3. Linux吃掉我的内存

    在Windows下资源管理器查看内存使用的情况,如果使用率达到80%以上,再运行大程序就能感觉到系统不流畅了,因为在内存紧缺的情况下使用交换分区,频繁地从磁盘上换入换出页会极大地影响系统的性能.而当我 ...

  4. C++11 新特性： unordered_map 与 map 的对比

    unordered_map和map类似,都是存储的key-value的值,可以通过key快速索引到value.不同的是unordered_map不会根据key的大小进行排序, 存储时是根据key的ha ...

  5. POJ1275 Cashier Employment[差分约束系统 || 单纯形法]

    Cashier Employment Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 7997   Accepted: 305 ...

  6. 嵌入式Linux驱动学习之路(十三)按键驱动-异步通知

    之前的按键方式: 查询: 极度占用CPU资源 中断: 在读的时候产生休眠,在没有信号的时候永远不会返回. poll机制: 在中断的基础上加上超时时间. 异步通知就是通过信号来传送. 首先在应用程序中有 ...

  7. 大牛的博客 osharp以及EF的分析

    http://www.cnblogs.com/guomingfeng/ http://developer.51cto.com/art/201309/409950_all.htm

  8. Oracle 中的分析函数

    Oracle常用分析函数介绍(排名函数+窗口函数) 2014年11月30日 ⁄ 数据库 ⁄ 共 3903字 ⁄ 暂无评论 ⁄ 阅读 7,772 次 评级函数 常见评级函数如下: RANK():返回数据 ...

  9. React业务实践

    总结自:http://reactjs.cn/react/docs/thinking-in-react-zh-CN.html 当接到一个需求时,如何用react来实现? 以下几个步骤做参考. 第一步:把 ...

  10. Android SDK 墙内更新方法 速度杠杠的