一.全局属性

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. Redis学习笔记3-Redis5个可执行程序命令的使用

    在redis安装文章中,说到安装好redis后,在/usr/local/bin下有5个关于redis的可执行程序.下面关于这5个可执行程序命令的详细说明. redis-server Redis服务器的 ...

  2. 【java开发】分支语句、循环语句学习

    一.Java分支语句类型 if-else 语句 switch 关于if-esle语句可以拆分为三种 if语句 if(条件){语句块;} if-else语句if(条件语句){语句块;} if-else ...

  3. MongoDB学习笔记（一：常见问题汇总）

    一.安装时出现The default storage engine 'wiredTiger' is not available问题解决 今晚在自己老式笔记本来试了一下MongoDB的安装,由于配置比较 ...

  4. Leetcode: sliding window maximum

    August 7, 2015 周日玩这个算法, 看到Javascript Array模拟Deque, 非常喜欢, 想用C#数组也模拟; 看有什么新的经历. 试了四五种方法, 花时间研究C# Sorte ...

  5. 【原】移动web动画设计的一点心得——css3实现跑步

    今年3月份,由于公司业务需要,我转岗到微信产品部,离开了TID团队,人都是有感情的动物,更何况在一个团队呆了快 3 年,心中十分舍不得,鬼哥说了“天下没有不散的宴席...”,在我的世界里又多了一次离别 ...

  6. java线程跟多线程

    java创建线程两种方式: 1.继承Thread创建线程 /** * Created by lsf on 16/4/18. */ class NewThread extends Thread { Ne ...

  7. 线程私有数据和pthread_once

    #include <stdio.h> #include <pthread.h> pthread_key_t key; pthread_once_t ponce = PTHREA ...

  8. C#.NET 大型通用信息化系统集成快速开发平台 4.1 版本 - 密码强化、网络安全强化

    公司的系统庞大后,用户数量也庞大,容易引起各种网络安全相关问题,需要把每个用户的网络安全意识都提高,由于历史原因有些用户的密码过于简单,很容易被猜到,引起很多没必要的麻烦. 系统登录成功后,检查密码复 ...

  9. JavaScript中的this陷阱的最全收集 没有之一

    当有人问起你JavaScript有什么特点的时候,你可能立马就想到了单线程.事件驱动.面向对象等一堆词语,但是如果真的让你解释一下这些概 念,可能真解释不清楚.有句话这么说:如果你不能向一个6岁小孩解 ...

  10. JS获取回车事件（兼容各浏览器）

    一.用到onkeydown获取事件动作, 二.用到键盘对应代码keyCode, 三. var event=arguments.callee.caller.arguments[0]||window.ev ...