干货：详解HTML5中常见的五大全局属性

TML5中新增了“全部属性”的概念。所谓全局属性它是指可以对任何元素都可以使用的属性，今天为大家详细介绍三种常见的全局属性。

contentEditable属性

contentEditable是由微软开发。被其他浏览器反编译并投入应用的一个全局属性。它的主要功能是是否允许用户编辑元素的内容，被编辑元素必须是获得鼠标焦点的元素，而且在点击后要提供一个插入符号，提示用户该元素中内容允许编辑。contentEditable属性是一个布尔值属性，可以指定为ture或false。该属性还有一个隐藏属性的inherit状态，为true是允许用户编辑；为false时元素不能被用户编辑；没有指定时则由inherit状态决定，如果父元素是可编辑的，该元素也是可编辑的。支持contentEditable属性元素有A、DD、DIR、DIV、BUTTON、FORM、DL、DT、FONT、DFN、hn、CODE、ABBR等。

designMode属性

designMode属性主要功能是指定整个页面是否可编辑，页面可编辑时，页面中任何支持contentEditable属性的元素都变成了可编辑状态。designMode属性有两个值“on”和"off"。属性为“on”时，页面可编辑；属性为“off”时，页面不可编辑。不过各个浏览器支持情况也不一样，IE8不支持designMode属性，IE9支持designMode属性，fixfox和Opera浏览器支持designMode属性、Chrom和Safari浏览器在内嵌frame支持designMode属性。

hidden属性

在HTML5中所有的元素允许使用hidden属性。它类似input元素中的hidden属性，使元素处于不可见状态。hidden属性设置为ture，元素处于不可见状态；hidden属性设置为false时元素处于可见状态。

spellcheck属性

spellcheck属性主要是针对input元素和textarea这两个文本输入框提供的新属性，它的功能是对输入内容进行拼写和语法检查。它有个特殊的地方，就是必须声明属性值true或者false。如果元素是readonly属性或者disabled属性为true，不执行拼写检查。Firfox、IE、Chrome、Safari等浏览器都支持该属性。

tabindex属性

tabindex在程序开发概念，是指不断敲击Tab键让窗口或页面中控件获得焦点，对窗口的控件进行遍历，每个控件的tabindex表示第几个被访问的。之前这个属性在编辑网页很有用，现在是根据元素所在位置决定遍历顺序，所以就不需要了。不过tabindex拎一个作用，只有链接元素与表单元素可以通过按键获得焦点。如果对元素使用了tabindex属性后，也能让元素获得焦点，执行focus（）语句时，可以让元素获得焦点了。但是这样会出现一个问题，元素会通过tab获得焦点，而这时候我们不想让该元素获得焦点这不是我们想要的结果。

把元素的tabindex值设定为负数后就可以解决这个问题了。tabindex为负值时，可以通过编程的方式让元素获得焦点，但按下Tab键该元素就不能获得焦点了，这在复杂的页面是非常有用的。HTML5中巧妙运用该属性发挥了很大的作用。

如果大家喜欢这篇文章的话，希望大家能够收藏，转发谢谢！更多相关资讯可以关注西安华美校区，免费获得java零基础教程！额外附送excel教程！

例

简单的三框架页面：

</frameset>

浏览器支持

所有主流浏览器都支持 <frame> 标签。

标签定义及使用说明

HTML5 不支持 <frame> 标签。

<frame> 标签定义 <frameset> 中的子窗口（框架）。

<frameset> 中的每个 <frame> 都可以设置不同的属性，比如 border、scrolling, noresize 等等。

注释：如果您希望验证包含框架的页面，请确保 <!DOCTYPE> 被设置为 "HTML Frameset DTD" 或者 "XHTML Frameset DTD" 。

HTML 4.01 与 HTML5之间的差异

HTML5 不支持 <frame> 标签，HTML 4.01 支持 <frame> 标签。

HTML 与 XHTML 之间的差异

在 HTML 中，<frame> 标签没有结束标签。在 XHTML 中，<frame> 标签必须被正确地关闭。

可选的属性

属性	值	描述
frameborder	01	HTML5 不支持。规定是否显示框架周围的边框。
longdesc	URL	HTML5 不支持。规定一个包含有关框架内容的长描述的页面。
marginheight	pixels	HTML5 不支持。规定框架的上方和下方的边距。
marginwidth	pixels	HTML5 不支持。规定框架的左侧和右侧的边距。
name	name	HTML5 不支持。规定框架的名称。
noresize	noresize	HTML5 不支持。规定无法调整框架的大小。
scrolling	yesnoauto	HTML5 不支持。规定是否在框架中显示滚动条。
src	URL	HTML5 不支持。规定在框架中显示的文档的 URL。

标准属性

在 HTML 4.01 中，<frame> 标签支持如下标准属性：

属性	值	描述
class	classname	规定元素的类名
id	id	规定元素的唯一 id
style	style_definition	规定元素的行内样式
title	text	规定元素的额外信息

如需完整的描述，请访问标准属性。

事件属性

根据 W3C 的标准，在 HTML 4.01 中，<frame> 标签不支持任何的事件属性。

但是，所有的浏览器都支持 onload 事件。

如需完整的描述，请访问事件属性。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

么是html？

html是一种简单易记，功能强大的标记语言，它是学习前端知识的第一站，也是所有WEB开发者、乃至产品经理、运营人员必须学习的一项基础内容。

为什么学习html5？

1. html5是WEB开发者，必须掌握的基础知识；

2. html5应用广泛，它可以用来开发网站、WEB应用、WEB游戏等等，如微信小程序、移动端小游戏等都跟html5有关；

3. html5很容易掌握，花几个小时就可以掌握它；

课程特点

1. 讲师讲课风格幽默，整个学习过程轻松有趣，不枯燥、不乏味；

2. 以就业为导向，与实战相结合，满足大部分学员的学习需求；

学习建议

1. 学完每一节课程，动手将代码打一遍；

2. 举一反三，学完每节课程，思考一下它的应用场景；

3. 完成本门课程，试着自己写一个纯html5的网页；

适宜人群

1. 零基础学员；

2. 前端爱好者；

1、DOCTYPE 描述文档的类型，规定web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

网页可以使用的具体版本，网页中可以使用那些标记，每个版本的DTD版本均有不同

2、<html></html> 网页文档中的根标记

html 标签有三个特殊的属性　　

manifest 指定网页缓存文件，可以让用户离线的时候也可以访问文件。
xmlns 设置html名空间，比如把网页设置成xhml的时候可以使用这个值。
lang 设置网页的描述语言，比如中文是zh；英文是en。

3、<head></head>头部标签在网页中只能有一个，设置HTML文档的头部信息，里面内容不会在页面中显示出来·。

head里面的标记

<meta> 标记
<title>定义网页的标题
<link> 链接
<script> 标记JavaScript脚本的内容
<style> 标记css样式
meta 标记

4、<body></body>只能有一个，显示网页的主体内容。

（一）、<meta>标签

<meta>元素的属性：

name 描述信息的名称，来标记这是一个什么样的信息
http-equiv 描述行为
content 描述的内容
charset 指定网页的编码

1、name 属性

1 <meta name="author" content="nyw">
2     <!--作者， 定义网页的作者 -->
3 <meta name="description" content="meta标记学习">
4     <!-- 描述，描述网页的实际内容 -->
5 <meta name="keywords" content="HTML,meta">
6     <!-- 关键字，定义网页关键字 -->

2、http-equiv属性

1 <meta http-equiv="refresh" content="30">
2     <!-- 网页30s后自动刷新 -->
3 <meta http-equiv="refresh" content="5,url=dom.html">
4     <!-- 网页30秒后跳转到dom.html文档 -->

<meta http-equiv="refresh" content="5,url=dom.html">

http-equiv描述网页的行为，行为 refresh刷新，内容为5，表示5秒后跳转到 dom.html这个文档。

3、content 属性

特殊属性

content-type 指定http头部信息的文字编码（最为常用）
default-style 指定优先使用的样式单（stylesheet）
refresh 用于网页的自动刷新或是页面跳转
set-cookie 设置页面的cookie（现在已经不再推荐使用）

4、charset属性

指定网页的编码，推荐使用UTF-8来增加网页的兼容性。

代码实例：

为搜索引擎抓取机器人准备一些信息

这段代码可以禁止搜索引擎缓存和跟踪网页。

<meta name="robots" content="noindex,nofollow">
    <!-- name定义的是机器人，内容部分表示不要被搜索引擎缓存，也不要被搜索引擎跟踪 -->

代码实例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>网页标题(显示在浏览器上)</title>
 6     <meta name="author" content="nyw">
 7     <!--作者， 定义网页的作者 -->
 8     <meta name="description" content="meta标记学习">
 9     <!-- 描述，描述网页的实际内容 -->
10     <meta name="keywords" content="HTML,meta">
11     <!-- 关键字，定义网页关键字 -->
12     <meta http-equiv="refresh" content="30">
13     <!-- 网页30s后自动刷新 -->
14     <meta http-equiv="refresh" content="5,url=dom.html">
15     <!-- 网页30秒后跳转到dom.html文档 -->
16     <meta name="robots" content="noindex,nofollow">
17     <!-- name定义的是机器人，内容部分表示不要被搜索引擎缓存，也不要被搜索引擎跟踪 -->
18 </head>
19 <body>
20 </body>
21 </html>

（二）、title、base标记

title和base标记都是写在head标签中

title：设置网页的标题

写法：<title>内容</title>。

base：指定网页跳转基准URL，如果不指定的话默认为当前网站的当前路径。

写法：<base href="http://www.aaa.zzz/">

base属性值：

href 指定网页跳转到基准URL，如果不指定的话则默认为当前网站的当前路径。

<base href="http://baidu.com/"> 这是将页面跳转到百度的网站打开。

target 指定链接的跳转帧如果不指定的话，则是在当前页面中跳转。

<base target="_blank"> 网页中的链接都应该在新的窗口中打开。

terget属性值：

_blank 在新窗口中打开被链接的文档
_self 默认值，在相同框架中打开被链接的文档
_parent 在父框架集中
_top 在整个窗口中打开被链接文档·
framename 在指定框架中打开被链接文档

（三）、link标记

link标记：链接外部文件时使用的标记，可以把外部文件的内容引入到当前文件中来，使当前网页实现更多的功能。

link属性：

href：指定链接外部路径的路径和文件名，要设置全路径并且带文件名

rel：引用文件，引用资源的类型定义

我们在使用link标签引用外部文件的时候，外部文件的类型是多种多样的。

alternate 代替文档（种子，其他语言版本，其他格式等等）

author 网页的作者

help 帮助文件的链接

icon 网页的图标

next 如果是连续网页的时候，指定下一个网页

prefetch 把链接外部资源时提前缓存起来。

prev 如果是连续网页

media 链接文件或是资源属于哪一种资源。

hreflang 链接文件的语言种类

type 链接文件的mi/me类型（比如说，图片图标文本）

sizes 根据link链接文件的类型，来指定文件的大小

代码示例：

链接网页图标：

网站的图标指定，可以显示在浏览器的图标栏，也可以被手机读取作为网站的图标存入收藏夹

1 <!-- 网站的图标指定，可以显示在浏览器的图标栏，也可以被手机读取作为网站的图标存入收藏夹 -->
2     <link rel="icon">
3     <!-- 示例 -->
4     <link rel="icon" href="img/favicon.png" type="image/png">
5     <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
6     <link rel="apple-touch-icon" href="img/apple-touch-icon.png" type="image/png">

注意：后面的href和前面type标注的类型要一致，这样既可以显示在浏览器，又可以显示在手机上

链接外部样式单

1 <link rel="stylesheet">
2     <link rel="stylesheet" href="style1.css" media="screen">
3     <link rel="stylesheet" href="style2.css" title="主题样式文件">
4     <link rel=" alternate stylesheet" href="style3.css" title="可选样式单">

说明：

alternate 会在浏览器中会弹出一个对话框，供用户可以进行选择

media 表示媒体类型为屏幕，可以是手机，但不包括打印机和投影仪

title 对这个link进行简单的说明

网站RSS种子指定

<!-- 网站RSS种子指定 -->
    <link rel="alternate" type="application/rss+xml">

为搜索引擎的准备的网页的URL

<!-- 为搜索引擎的准备的网页的URL -->
    <link rel="canonical">
    <link rel="canonical" href="http://www.aaa.zzz/help.html">

告诉搜索引擎代替URL是哪里。

在线咨询

上一篇：岩石薄片地化分析技巧与应用
下一篇：thinkphp3.2之URL简化设置

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商