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. 关于rtsp转码rtmp播放的两种方式，客户端直接转，远程服务器转

    需求 一.场景 用户多家门店有监控探头,设备是海康的和大华的.用户总部和门店不在一个网络下,并且总部要能实时调用查看门店监控,和门店回放画面.我们知道监控摄像机获取的视频是 rtsp 流的格式. 只能 ...

  2. JSON 值转换

    var Txt = '{"a":"1","b":"5","c":"5",&quo ...

  3. vs调试，监控变量

  4. HDMI原理图信号PIN脚

    HDMI(19Pin)/DVI(16 pin)的功能是热插拔检测(HPD),这个信号将作为主机系统是否对HDMI/DVI是否发送TMDS信号的依据.HPD是从显示器输出送往计算机主机的一个检测信号.热 ...

  5. 迁移EXT4

    http://fanli7.net/a/JAVAbiancheng/ANT/20101003/43604.html 級別: 中級 Roderick W. Smith ,顧問和作家 2008 年6 月0 ...

  6. Redis单台的安装部署及集群部署

    Redis是一种高级key-value数据库.它跟memcached类似,不过数据可以持久化,而且支持的数据类型很丰富.有字符串,链表,集 合和有序集合.支持在服务器端计算集合的并,交和补集(diff ...

  7. JQuery中的text(),html()和val()区别

    定义和用法 text() 方法方法设置或返回被选元素的文本内容 代码如下 <!DOCTYPE html> <html lang="en"> <head ...

  8. C#之stream

    在C#中经常要用stream stream下面主要有 FileStream:使用文件作为后备设备. BufferedStream:使用缓冲区作为后备设备,用来增强性能的中间存储. MemoryStre ...

  9. Quart 2D 绘制图形简单总结(转)

    0  CGContextRef context = UIGraphicsGetCurrentContext(); 设置上下文 1 CGContextMoveToPoint 开始画线 2 CGConte ...

  10. Android 自定义View跑马灯效果（一）

    今天通过书籍重新复习了一遍自定义VIew,为了加强自己的学习,我把它写在博客里面,有兴趣的可以看一下,相互学习共同进步: 通过自定义一个跑马灯效果,来诠释一下简单的效果: 一.创建一个类继承View, ...