一.全局属性

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. linux

    托瓦兹跟BBS上面一堆工秳师一样, 他发现Minix虽然真癿很棒,但是谭宁邦教授就是丌愿意迚行功能癿加强,导致一堆工秳师在操作系统功能上面癿欲求丌满! 这个时候年轻癿托瓦兹就想:『既然如此,那我何丌自 ...

  2. linux中5条查找命令

    1 which which命令的作用是,在PATH变量指定的路径中,搜索某个系统命令的位置,并且返回第一个搜索结果. which [文件...] 参 数: -n<文件名长度> 指定文件名长 ...

  3. stm32 hid 键盘描述

    /* USB Standard Device Descriptor */ const uint8_t Joystick_DeviceDescriptor[JOYSTICK_SIZ_DEVICE_DES ...

  4. log4j 不同模块输出到不同的文件

    1.实现目标 不同业务的日志信息需要打印到不同的文件中,每天或者每个小时生成一个文件.如,注册的信息打印到register.log,每天凌晨生成一个register-年月日.log文件, 登录信息的日 ...

  5. Centos6.5下设置静态IP

    1.编辑网卡配置文件 vi /etc/sysconfig/network-scripts/ifcfg-eth0 设置网卡eth0的IPV4信息,需要注意的是,设置的IPADDR需要和局域网中其他机器处 ...

  6. MongoDB学习笔记（二：入门环境配置及与关系型数据库区别总结）

    一.下载及安装MongoDB MongoDB下载官网链接:http://www.mongodb.org/downloads 具体安装步骤教程:http://www.shouce.ren/api/vie ...

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

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

  8. PHP unset销毁变量并释放内存

    PHP的unset()函数用来清除.销毁变量,不用的变量,我们可以用unset()将它销毁.但是某些时候,用unset()却无法达到销毁变量占用的内存!我们先看一个例子: <?php $s=st ...

  9. Linux下部署docker记录（1）-Volume使用

    之前部署了Linux下部署docker记录(0)-基础环境安装,接下来看看Docker Volume的使用. Docker volume使用1)一个数据卷是一个特别指定的目录,该目录利用容器的UFS文 ...

  10. 基本排序（二）插入排序(直接插入、Shell、折半)

    插入排序是常见的内部排序之一.常见的插入排序包括直接插入排序.Shell排序.折半排序.本篇主要介绍这三个排序. 转载请注明出处——http://www.cnblogs.com/zrtqsk/p/38 ...