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 引入ElementUI 2.0.11:依赖未发现的问题

    转自:https://blog.csdn.net/cslucifer/article/details/79019649

  2. Ubuntu下安装JDK图文解析

    我们在64位的Ubuntu中安装JDK,选择的是jdk1.6.0_32版本号.安装文件名称为jdk-6u32-linux-x64.bin(这个是64位系统的),假设是32位系统的还须要去官网下载32位 ...

  3. 【Python】读取cvs文件报错：UnicodeDecodeError: 'utf-8' codec can't decode byte 0xb1 in position 6: invalid start byte

    现在有文件data.csv 文件编码格式为:ANSI data.csv 1|1|1|北京市 2|1|2|天津市 3|1|3|上海市 4|1|4|重庆市 5|1|5|石家庄市 6|2|5|唐山市 7|3 ...

  4. .net 定时执行 windows 服务

    1.新建项目 --> Windows 服务 2.Service1.cs代码 using System; using System.Collections.Generic; using Syste ...

  5. PCA的数学原理Matlab演示

    关于 PCA(Principal component analysis)主成分分析.是SVD(Singular value decomposition)神秘值分析的一种特殊情况.主要用于数据降维.特征 ...

  6. 如何禁止同IP站点查询和同IP站点查询的原理分析 Robots.txt屏蔽BINGBOT

    很多站长工具中都有“同IP站点查询”.“IP反查域名”这种服务不少人都不知道是什么原理,其实这些服务几乎都是用BING(以前的LIVE)来实现 的,BING有个特别功能 BING抓取页面时会把站点的I ...

  7. MySQL数据表导出某条记录

    请按照步骤导出,否则可能会报错: ERROR (HY000): The MySQL server is running with the --secure-file-priv option so it ...

  8. C与C++在形參的一点小差别

    先看一下以下的代码: int fun(a,b) int a; int b; { return 10; } void main(int argc, char ** argv) { fun(10); re ...

  9. Java中的线程池ExecutorService

    示例 import java.util.concurrent.ExecutorService; import java.util.concurrent.Executors; import java.u ...

  10. 用HttpClient模拟HTTP的GET和POST请求（转）

    本文转自:http://blog.csdn.net/xiazdong/article/details/7724349 一.HttpClient介绍   HttpClient是用来模拟HTTP请求的,其 ...