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. 使用聚合数据API查询快递数据-短信验证码-企业核名

    有位朋友让我给他新开的网站帮忙做几个小功能,如下: 输入快递公司.快递单号,查询出这个快件的所有动态(从哪里出发,到了哪里) 在注册.登录等场景下的手机验证码(要求有一定的防刷策略) 通过输入公司名的 ...

  2. 【Python】向函数传递列表

    向函数传递列表 在实际使用中你会发现,向函数传递列表是比较实用的,这种列表可能包含名字.数字.可能更复杂的对象(字典) 假设向一个函数传递一堆水果,我们说出我们喜欢所有的水果 def Obj(frui ...

  3. mysql：4种时间类型

    insert 12 ================= 养成良好的习惯,除了整形和浮点型不加'',其余都加,包括日期时间型

  4. Centos7 安装 Maven 3.5.*

    下载 Apache Maven 访问 Maven官方网站,打开后找到下载链接,如下: 解压 tar zxvf apache-maven-3.5.3-bin.tar.gz 添加环境变量 打开 /etc/ ...

  5. C#中回调函数的使用方法和区别

    归纳来说有两种方式,一种是委托型回调,另一种是接口型回调 委托型回调 委托型回调包括纯委托型和事件型,他们的实现方式是通过公开成员注入的方式,其中纯委托型还可以用构造函数注入.方法注入的方式 接口型回 ...

  6. jsp获取web.xml 里的配置项

    ServletContext servletContext = request.getSession().getServletContext();                String titl ...

  7. Spring利用propertyConfigurer类 读取.property数据库配置文件

    (1).基本的使用方法是: <bean id="propertyConfigurerForAnalysis" class="org.springframework. ...

  8. Python学习总结之四 -- 这就是Python的字典

    字典原来是这么回事儿 Python学习到现在,我们已经知道,如果想将值分组到结构中,并且通过编号对其进行引用,列表就可以派上用场.不过,今天,我们将学到一种通过名字引用值的数据结构,应该知道这种数据类 ...

  9. webpy使用mysql数据库操作(web.database)

    webpy_web.database模块 webpy框架中使用mysql管理数据库有两种方法,一种是使用python里面的MySQLdb模块: import MySQLdb 还有一种就是用webpy自 ...

  10. python 基础 8.1 r 正则对象

                                                                                                        ...