htnl全局属性和其他属性

学习要点:
1.实体
2.元数据
3.全局属性

本章主要探讨HTML5中的HTML实体、以及HTML核心构成的元数据,最后了解一下HTML中的全局属性。

一.实体

HTML实体就是将有特殊意义的字符通过实体代码显示出来。使用方法,实体名称或者实体编号

       显示结果           实体名称             实体编号                  描述

                                                           空格

           <              &lt;              <                 小于号

           >              &gt;              >                  大于号

           &             &amp;             &                  和号

           "             &quot;             "                     引号

           '             &apos;                '                    撇号

           ¢             &cent;               ¢                  分

           £            &pound;              £                  镑

           ¥             &yen;                 ¥                   日圆

           €             &euro;               €                 欧元

           §             &sect;                §                   小节

           ©             &copy;              ©                   版权

           ®             &reg;                ®                   注册商标

           ™            &trade;              ™                  商标

           ×            &times;               ×                    乘号

           ÷            &divide;              ÷                    除号

二.元数据
<meta>元素可以定义文档中的各种元数据,而且一个HTML页面可以包含多个<meta>元素。

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <!--定义文档的编码类型-->
  5. <meta charset="utf-8">
  6.  
  7. <!--
  8. name, content 组合的示例如下(不全)
  9. -->
  10. <!--定义文档的作者-->
  11. <meta name="author" content="webabcd" />
  12. <!--定义文档的生成工具-->
  13. <meta name="generator" content="EditPlus" />
  14. <!--如果把此 html5 文档看成一个程序,则此处用于定义程序的名称-->
  15. <meta name="application-name" content="meta 标签的介绍" />
  16.  
  17. <!--
  18. http-equiv, content 组合的示例如下(不全)
  19. -->
  20. <!--定义文档内容的语言-->
  21. <meta http-equiv="content-language" content="zh-CN" />
  22. <!--定义文档内容的类型-->
  23. <meta http-equiv="content-type" content="text/html" />
  24. <!--定义文档所使用的样式表的 title,从而在有多个样式表的时候,只使用指定 title 的样式表。本例中会强制只使用 title 为 css1 的样式表-->
  25. <meta http-equiv="default-style" content="css1" />
  26. <!--
  27. 文档每多少秒刷新一次,或者跳转
  28. 如果要做成跳转,content属性值里引号加跳转网址,不加网址就跳转本页,相当于刷新
  29. 如:<meta http-equiv="refresh" content="1;www.baidu.com" />
  30. -->
  31. <meta http-equiv="refresh" content="1" />
  32. <!--设置 cookie-->
  33. <meta http-equiv="set-cookie" content="author=webabcd;" />
  34. <title>标题</title>
    <!--设置图标-->
       <link rel="icon" href="//www.jd.com/favicon.ico" mce_href="//www.jd.com/favicon.ico" type="image/x-icon">
  1. <!--定义关键字-->
  2. <meta name="keywords" content="html5, flash, silverlight" />
  3. <!--定义文档的描述信息-->
  4. <meta name="description" content="介绍 html5 中的 meta 标签" />
  1. </head>
  2. <body>
  3.  
  4. </body>
  5. </html>

三.全局属性
在此之前,我们涉及到的元素都讲解了它的局部数据,当然也知道一些全局属性,比如id。全局属性是所有元素共有的行为,HTML5还提供了一些其他的全局属性。

1.id属性,id属性给元素分配一个唯一标识符

  1. <p id="abc">段落</p>

解释:id属性给元素分配一个唯一标识符。这种标识符通常用来给CSS和JavaScript 调用选择元素。一个页面只能出现一次同一个id名称。

2.class属性,用来给元素归类

  1. <p class="abc">段落</p>
  2. <p class="abc">段落</p>
  3. <p class="abc">段落</p>

解释:class属性用来给元素归类。通过是文档中某一个或多个元素同时设置CSS样式。

3.accesskey属性 ,输入框属性,快捷键操作

  1. <input type="text" name="user" accesskey="n">

解释:快捷键操作,windows下alt+accesskey="n"指定键,光标定位到此输入框,前提是浏览器alt并不冲突。

4.contenteditable属性,让文本处于可编辑状态

  1. <p contenteditable="true">我可以修改吗</p>

解释:让文本处于可编辑状态,设置true则可以编辑,false则不可编辑。或者直接 设置属性。

5.dir属性,让文本左或者右

  1. <p dir="rtl">文字到右边 </p>

解释:让文本从左到右(ltr),还是从右到左(rtl)。

6.hidden属性,隐藏元素

  1. <p hidden>文字 </p>

解释:隐藏元素。

7.lang属性,可以局部设置语言

  1. <p lang="en">HTML5</p>

解释:可以局部设置语言。zh-cn为中文,en为英文

8.title属性,对元素的内容进行额外的提示

  1. <p title="HTML5教程">HTML5</p>

解释:对元素的内容进行额外的提示。,也就是鼠标放上去会出现提示内容

9.tabindex属性,表单中按下tab键,实现获取焦点的顺序

  1. <input type="text" name="user" tabindex="2">
  2. <input type="text" name="user" tabindex="1">

解释:表单中按下tab键,实现获取焦点的顺序。如果是-1,则不会被选中。

10.style属性 ,设置元素行内CSS样式

  1. <p style="color:red;">CSS样式</p>

解释:设置元素行内CSS样式。

第六十八节,htnl全局属性和其他属性的更多相关文章

  1. 第三百六十八节,Python分布式爬虫打造搜索引擎Scrapy精讲—elasticsearch(搜索引擎)用Django实现搜索的自动补全功能

    第三百六十八节,Python分布式爬虫打造搜索引擎Scrapy精讲—用Django实现搜索的自动补全功能 elasticsearch(搜索引擎)提供了自动补全接口 官方说明:https://www.e ...

  2. 第一百六十八节,jQuery,表单选择器

    jQuery,表单选择器 学习要点: 1.常规选择器 2.表单选择器 3.表单过滤器 表单作为 HTML 中一种特殊的元素,操作方法较为多样性和特殊性,开发者不但可以 使用之前的常规选择器或过滤器,也 ...

  3. 第二百六十八节,Tornado框架-路由映射之二级域名支持,html模板继承以及导入

    Tornado框架-路由映射之二级域名支持,html模板继承以及导入 二级域名路由映射add_handlers()设置二级域名路由映射 注意:二级域名需要结合服务器ip绑定域名 框架引擎 #!/usr ...

  4. 第三百四十八节,Python分布式爬虫打造搜索引擎Scrapy精讲—通过自定义中间件全局随机更换代理IP

    第三百四十八节,Python分布式爬虫打造搜索引擎Scrapy精讲—通过自定义中间件全局随机更换代理IP 设置代理ip只需要,自定义一个中间件,重写process_request方法, request ...

  5. 使用Typescript重构axios(二十六)——添加HTTP授权auth属性

    0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...

  6. 第六十四天 JS基础操作

    一.分支结构 1.if语句 if基础语句 if(条件表达式){ 代码块: } // 当条件表达式结果为true,会执行代码块:反之不执行 // 条件表达式可以为普通表达式 // 0.undefined ...

  7. SpringBoot进阶教程(六十四)注解大全

    在Spring1.x时代,还没出现注解,需要大量xml配置文件并在内部编写大量bean标签.Java5推出新特性annotation,为spring的更新奠定了基础.从Spring 2.X开始spri ...

  8. html5全局属性

    全局属性:对于任何一个标签都是可以使用的属性. 一.data-* 在html5之前需要在html标签上添加自定义属性来存储和操作数据,可能是会写<form role="xxx" ...

  9. 小强的HTML5移动开发之路(13)——HTML5中的全局属性

    来自:http://blog.csdn.net/dawanganban/article/details/18179483 一.accssskey  快捷键 <!DOCTYPE HTML> ...

随机推荐

  1. GDKOI 2015 Day1 T2 单词统计Pascal

    我虽然没有参加GDKOI2015,但是我找了2015年的题练了一下. 题意如下: 思路:最大流,因为有多组数据,每次读入一组数据都要清零. a. 将每个点拆分成两个点,例如样例G→G`,再将字母一一编 ...

  2. 【repost】js字符串函数

    JS自带函数concat将两个或多个字符的文本组合起来,返回一个新的字符串.var a = "hello";var b = ",world";var c = a ...

  3. 【C#】Switch datatype between object and byte[]

    This sample shows how to turn object to byte[], as well as turn byte[] to object. So,I can turn any ...

  4. Socket编程中的长连接、短链接以及心跳包机制详解

    参考:http://blog.csdn.net/zdwzzu2006/article/details/7723738 一.定义 1.TCP连接 当网络通信时采用TCP协议时,在真正的读写操作之前,se ...

  5. c#委托概念

    委托的官方概念是:安全封装方法的类型. 百度百科的概念是,委托是个类,定义了方法的类型,使得方法可以作为另外一个方法的参数进行传递.使得程序具有很好的扩展性. 揉碎了讲一下这个概念: 张三要做三件事: ...

  6. [SOJ]寻找第k大数字(numberk)

    Description 经过长时间的筹备工作,在Jourk,Ronny,Plipala,阿长,阿沈等人的努力下,DM实验室建立起自己的系列网站,其中包括三个大板块:DMOJ首页.DMOJ论坛.DMOJ ...

  7. 上锁 - leetcode

    158. Read N Characters Given Read4 II - Call multiple times 题目: The API: int read4(char *buf) reads ...

  8. 敏捷开发(八)- Scrum Sprint计划会议1

    本文主要是为了检测你对SCRUM Sprint 计划会议的了解和使用程度, 通过本文你可以检测一下     1.你们的SCRUM Sprint 计划会议的过程和步骤    2.会议的输出结果    S ...

  9. IOS 基于TCP的socket通信详解(原创)

    最近在整理通信层相关知识,这篇文章是边整理边写的,有些地方可能不够准确,还请各位路过的大牛专家指出来.这次整理的socket通信是基于TCP的,实现方式是GCD形式,以下记录的都是些理论知识,方便自己 ...

  10. python numpy基础 数组和矢量计算

    在python 中有时候我们用数组操作数据可以极大的提升数据的处理效率, 类似于R的向量化操作,是的数据的操作趋于简单化,在python 中是使用numpy模块可以进行数组和矢量计算. 下面来看下简单 ...