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. 怎样通过Html网页调用本地安卓app

    怎样使用html网页和本地app进行传递数据呢?经过研究.发现还是有方法的,总结了一下,大致有一下几种方式 一.通过html页面打开Android本地的app 1.首先在编写一个简单的html页面 & ...

  2. hibernate 数据缓存

    http://www.cnblogs.com/wean/archive/2012/05/16/2502724.html,

  3. swoole新手教程01-环境搭建及扩展安装

    写在前面的废话 <swoole源代码分析>已经写了13章,整个swoole的核心架构基本都分析的差点儿相同了.于是心里一直以来想整理swoole的文档并写一份教程的想法就再度浮了出来. 实 ...

  4. [译]RabbitMQ教程C#版 - “Hello World”

    [译]RabbitMQ教程C#版 - “Hello World”   先决条件本教程假定RabbitMQ已经安装,并运行在localhost标准端口(5672).如果你使用不同的主机.端口或证书,则需 ...

  5. Linux下Nginx安全证书ssl配置方法

    分享下我是如何一步步在Nginx上配置SSL的.首先,确保安装了OpenSSL库,并且安装Nginx时使用了–with-http_ssl_module参数. 初学者或者菜鸟建议使用LNMP进行一键安装 ...

  6. 聊聊高并发（三十九）解析java.util.concurrent各个组件（十五） 理解ExecutorService接口的设计

    上一篇讲了Executor接口的设计,目的是将任务的运行和任务的提交解耦.能够隐藏任务的运行策略.这篇说说ExecutorService接口.它扩展了Executor接口,对Executor的生命周期 ...

  7. Struts2学习六----------默认Action

    © 版权声明:本文为博主原创文章,转载请注明出处 默认Action - 当访问action不存在时,可通过指定默认action的方式避免出现错误代码页面 - 使用default-action-ref指 ...

  8. 深入理解Java 8 Lambda

    - 转载:blog1, blog2 以上两篇博客是对lambda表达式的深入理解,用于后续加深理解. 如下先从零开始理解lambda, 1. 接触lambda表达式是从python,javascrip ...

  9. php html_entity_decode使用总结

    在处理网页字符串的时候,尤其是做爬虫类的应用时,经常会涉及到要处理的字符串中包含html标签,现在对这类字符串的处理做一个小的总结: 有时候获取到的字符串中有html标签,在入库的时候出于安全的考虑通 ...

  10. linux lamp

    1. 用yum安装Apache,Mysql,PHP. 1.1安装Apache yum install httpd httpd-devel 安装完成后,用/etc/init.d/httpd start ...