html5--1.19 通用属性

学习要点：

1.通用属性的概念及几个常用的通用属性
2.对属性值的若干点补充

通用属性

通用属性（全局属性）可以用于任何的HTML5元素；通用属性有十几种；这节课不会全讲，会讲几种最常用的，其他的大家有兴趣可以自己测试一下，我们会把他们放到后边的课程或者具体的实例中去讲解；因为一下讲这么多不容易记住，也会使课程很枯燥。

id属性

id属性用于指定元素的识别名称，相当于一个人的身份证，是唯一的，同一个文档中不能有重复的id；一般配合CSS和JavaScript来选择元素。

class属性

class属性用于指定元素的类别名称，可以使用class元素给同一个文档中的多个元素进行归类，CSS就可以通过class个同一类元素设置统一的样式。

style属性

stlyle属性用于给元素设定样式（内联样式或内部样式表）.

title属性

title属性用于显示省略的内容（或补充/提示说明的内容）：当光标移动到元素内容上时显示title里的内容.

dir属性

dir属性用于设定元素标签内容的文字方向.在讲文本样式的 bdo元素时候用过。

lang属性

lang属性用于指定语言，比如中文还是英文：zh-cn/en;除了在html标签中设置，它还可以在特定元素中使用，改变该元素使用的语言.

其他通用属性

其他通用元素还有：

  • accesskey:元素快捷键
  • tabindex：元素移动顺序
  • draggable：元素拖动
  • contenteditable:元素是否允许编辑
  • hidden:隐藏元素
  • spellchcheck：元素检查
  • contextmenu:元素快捷菜单
  • data-yourvalue：自定义属性

剩下的通用元素放到以后章节再讲解，有兴趣的也可以自己测试下他们各自的功能

        • 关于属性值的几点补充：

            1. name和id属性：属性值必须是大小写英文字母开头；
              其余部分可以包含字母、数字、下划线、点等符号；
              属性值是区分大小写的

            1. 属性值为数值时，必须输入正整数，不可谓0

          1. width,height是属性值：如果设置为正整数时，单位默认为px（像素），不需要要加上单位；但是在style中必须注明单位，否则会出错

常用通用属性用法

1、id用法1

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <style>

         #div1{width: 70%;height: 300px;border: 2px;background: #FFAAAA}

         #div2{background: #88FF88;width: 100%;height: 10%}

         #div3{background: #987654;width: 30%;height: 80%;float: left;}

         #div4{background: #456789;width: 70%;height: 80%;float: left;}

         #div5{background: #8888FF;width: 100%;height: 10%;clear: left;}

     </style>

     <title>1.19 通用元素</title>

 </head>

 <body>

 <div id="div1">

     <div id="div2">我是标题</div>

     <div id="div3">我是导航栏</div>

     <div id="div4">我是iframe内联框架</div>

     <div id="div5">我是尾部</div>

 </div>

 </body>

 </html>

注意点：用#来设置我们的自定义标签样式

2、class设置通用属性

5、dir属性

html5--1.19 通用属性的更多相关文章

  1. html5之一些通用属性

    dir属性:定义元素内容排序方式(rtl,ltr,auto)contentEditable属性:内容是否可编辑tabindex属性:按tab键激活元素 <!DOCTYPE html>< ...

  2. 疯狂html5讲义（二）：HTML5简的经常使用元素与属性（二）:html5新增的通用属性

    1.contentEditable属性 true时可直接编辑html元素里面的内容.且具有"可继承"的特点. 编辑后不要刷新页面.否则编辑的内容会丢失,能够通过该元素的innerH ...

  3. HTML5 新增通用属性

    一:HTML5保留的常用元素 7. 表格相关元素.表格在html里还算重要的了.   <table>  :用于表格定义.    cellpadding: 单元格内容和单元格边框距离    ...

  4. HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...

  5. html5的自定义data-＊属性和jquery的data()方法的使用示例

    人们总喜欢往HTML标签上添加自定义属性来存储和操作数据. 但这样做的问题是,你不知道将来会不会有其它脚本把你的自定义属性给重置掉,此外,你这样做也会导致html语法上不符合Html规范,以及一些其它 ...

  6. HTML5 Audio/Video 标签,属性,方法,事件汇总 （转）

    HTML5 Audio/Video 标签,属性,方法,事件   <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...

  7. [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...

  8. HTML5 中的新属性autocomplete="off"失效的解决方法（兼容firefox，IE，360）

    因为业务需求,在写一个注册页面的时候,发现浏览器会自动填充此域名下已经保存的账号密码,给用户带来不便.加了HTML5 中的新属性autocomplete="off" ,但是并没有产 ...

  9. HTML5系列一（属性概述）

    HTML5概述 HTML5於2004年被WHATWG(网页超文本技术工作小组)提出,於2007年被W3C接纳 在2008年1月22日,第一份正式草案已公布.WHATWG表示该规范是目前正在进行的工作, ...

随机推荐

  1. Vue 响应式数据说明

    值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的.也就是说如果你添加一个新的属性,比如: vm.b = 'hi' 那么对 b 的改动将不会触发任何视图的更新. 这里唯一的例外是使用  ...

  2. DataTable列 基础处理

    DataTable dt=new DataTable(); 新增列: dt.Columns.Add("ColumnsName"); 删除列: dt.Columns.Remove(& ...

  3. 彻底解决zend studio 下 assignment in condition警告

    最近在mac系统下安装zend studio作为php开发工具,把以前的代码导入,发现项目中有很多 “assignment in condition”的警告,造成原因是在条件判断的if.while中使 ...

  4. TPM：dTPM（硬件）和fTPM（固件模拟的软件模块）

    转:Bitlocker.TPM和系统安全 自从微软在Windows Vista首次引入Bitlocker以来,它已经越来越多的出现在我们的周围.尤其是企业用户,Bitlocker的保护已经变得不可缺少 ...

  5. 转：RC复位电路的原理及其复位时间的计算

    RC复位电路的原理及其复位时间的计算   低电平有效复位电路如下 此复位电路是针对低电平有效复位而言的,其中二极管是起着在断电的情况下能够很快的将电容两端的电压释放掉,为下次上电复位准备. 假设电容两 ...

  6. getOutString 输出弹出字符串

    输入字符串长度,字符串,计数m.从前往后计数,当数到m个元素时,第m个元素出列,同时将该元素赋值给m,然后从下一个数计数循环,直到所有数字都出列,给定的数全部为大于0的数字.输出出队队列. 例如:   ...

  7. Lua学习六----------Lua流程控制

    © 版权声明:本文为博主原创文章,转载请注明出处 Lua流程控制 - 通过程序设定一个或多个条件语句 - 在条件为true时执行指定程序代码,在条件为false时指定其他指定程序代码 - 控制结构语句 ...

  8. 一套ui满足ios与android界面

    1.android 画布宽高720*1280的标准来切图生成xhdpi标准图,后自动生成mdpi.hdpi.xhdpi.xxhdpi四套图. 2.ios画布宽高640 x 1136的标准来切图生成xh ...

  9. 09-redis事务及锁应用

    Redis 中的事务 Redis支持简单的事务 Redis与 mysql事务的对比 ------------------------------------------------------- My ...

  10. VS2012,VS2013启用SQLite的Data Provider界面显示

    VS2012,VS2013启用SQLite的Data Provider界面显示 VS 2012默认是不带的SQLite的Data Provider,所以无法直接在VS 2012里管理SQLite的数据 ...