HTML5 简介 今天开始，我们讲一个新专题 HTML5 。这是一个老的技术，又是一个新的技术，说它老是因为 HTML 发展到今天已经有 20 多年的历史了，说它新是因为 HTML5 标准相对于上一代增加了很多的改进和优化，那么具体有哪些呢，听我一一道来。
1. 什么是 HTML 关于 HTML 百度百科是这么定义的：
HTML 是由 Web 的发明者 Tim Berners-Lee 和同事 Daniel W. Connolly 于 1990 年创立的一种标记语言，它是标准通用化标记语言 SGML 的应用。用 HTML 编写的超文本文档称为 HTML 文档，它能独立于各种操作系统平台(如 UNIX， Windows 等)。使用 HTML 语言，将所需要表达的信息按某种规则写成 HTML文件，通过专用的浏览器来识别，并将这些 HTML 文件“翻译”成可以识别的信息，即现在所见到的网页。
这里提到 web 网页，通俗的来说 HTML 就是一种为了表现网页的展示形式而制定的一种标记语言。通过标记的形式在网页中将图形、文本、多媒体等展示出来。它不是传统意义上的编程语言，而是由各种标签组成的标记型语言。
2. HTML 标准 HTML5 就是指万维网联盟 W3C 制定的 HTML 的第五代标准，那么为什么要制定 HTML 标准呢？因为 HTML 这种脚本语言是通过浏览器来解释执行的，浏览器有不同的厂商，如果不定制统一的标准每个浏览器执行之后的呈现结果可能有千差万别，这样的话 HTML 程序员为了兼容不同的浏览器需要对不同的浏览器定制不同的代码，工作量巨大，成本倍增。所以就有了 W3C 组织制定的统一标准。
2.1 早期版本 3. 新增特性 相对于上个版本，新增了十个特性，涵盖：
新的标签
增强表单
视频音频
Canvas
SVG
地理位置
拖放 API
多线程
离线存储
Websocket
主要增加了多媒体处理、地理位置获取和多线程的支持。
4. 扩展 大家在浏览网页的时候有时候可能会遇到跟 HTML 长得很像但是又不是 HTML 的后缀，例如 xhtml、shtml 等。看似差不多，其实是完全不同的技术类型。
IDE 前端开发工具 本章节我们介绍一下 IDE ，它的全称是 Integrated development environment（集成开发环境）。同样是编辑代码的工具，为什么动辄几百 M 甚至几 G 大小的 IDE 为什么备受开发者青睐呢？
1. 为什么使用 IDE 那是因为相对记事本这种轻量级编辑器来说，IDE 软件自带语法高亮、缩进、编码变换等对于开发者比较便捷的小工具，使他真正意义上成为了代码编辑器，甚至有不少 IDE 提供一些版本控制（ Git/SVN ）、可视化编程、本地运行环境等功能，真正做到所见即所得的自动化编程。 上图是一个典型的 IDE 开发截图，其中包含了语法错误的代码高亮、函数提示、左边的代码结构等 通俗的来说，假如你用系统自带的记事本来编程的话，可能你需要记住所有的语法以及所有的函数名称才行，在高级语言中函数库动辄成千上万，如果需要把函数全都背熟才能开发的话，编程的门槛就相当的高了，而且不利于程序员把精力集中于业务分析和算法实现等真正需要脑力劳动的环节，有了 IDE 之后相当于程序员解放了重复劳动的环节。总的来说，IDE 是一种提高编程效率的代码编辑软件。
2. 主流 IDE 介绍 2.1 榜单 2019 全球 IDE 市场占有份额
2.2 主流 IDE 介绍 本章主要介绍市面上比较流行的各种主流语言对应的IDE
2.2.1 webstorm webstorm 是 jetbrains 公司旗下的产品，主要用于 web 开发，比誉为“ web 前端神器”，主要应用于 HTML css JavaScript 编程。它的官网地址是 webstorm。
2.2.2 VS code vs code 全称 visual studio code，是微软公司开发的的文本编辑器，具有良好的跨平台性，同时支持 Windows、 Linux、 OS X 操作系统。但是 vs code 并非像传统的 IDE 一样开箱即用，而是需要配置额外的插件，例如 Git、代码高亮、语法提示等等，才能用的比较舒心。它的官网地址是 VS code。
2.2.3 PHPstorm PHPstorm 也是 jetbrains 的产品，相当于包含 webstorm 的所有功能+ PHP 运行环境+PHP语法+sql支持，主要用于PHP的编程。它的官网地址是 PHPStorm。
2.2.4 Cloud 9 cloud 9 是亚马逊公司推出的在线 IDE ，只要打开浏览器就能使用，但是目前在国内市场占有率较低。目前支持PHP、JavaScript、Python 等主流编程语言，使用较为方便。它的官网地址是 Cloud 9。
2.2.5 IntelliJ IDEA 使用 Java 开发的一个 IDE，对于 Java 开发者比较友好，其中 alt + enter 代码修复功能比较出名。它的官网地址是 IntelliJ IDEA。
2.2.6 EMACS 比较出名的集成开发环境和代码编辑器，由 Richard Stallman 和 Guy Steele 在 1975 年共同开发。早期在 lisp 语言开发环境较为流行，学习曲线相对比较陡峭。它的官网地址是 EMACS。
3. 小结 总体来说如果只做 HTML 开发，webstorm 应该是比较好的选择，体积轻量，功能健全。但是 IDE 就像编程语言一样，没有最好的，只有最适合的，只有选择了最符合你的操作习惯的才是最好的。
语法简介 本章概括介绍 HTML 的标签语法，以及 HTML 语言和传统语言的差异。
1. HTML来历 1969年，IBM 的技术人员 Charles Goldfarh 和 Edward Mosher 等人一起发明了通用标记语言 GML（Generalized Marked Language）。1985年在英国成立了国际 SGML 用户组织，在1986年，SGML 成为国际标准ISO8879：信息处理标准通用标记语言（Information processing Text and office system Standard generalized markup language）。HTML 和 XML 派生于 SGML，XML 可以被认为是它的一个子集，而 HTML 是它的一个应用。为了告诉浏览器我们需要展示什么内容，HTML 定义了一整套符号标记规范，这些规范包括
设置文字的格式；
创建列表；
显示图片；
显示多媒体；
显示超链接；
等等。
2.标准 HTML3.2 以前的标准是由 IETF 制定。IETF 互联网工程任务组（The Internet Engineering Task Force），成立于1985年底，是全球互联网最具权威的技术标准化组织，主要任务是负责互联网相关技术规范的研发和制定，当前绝大多数国际互联网技术标准出自IETF。IETF 的工作成果主要以RFC文档的途径发布。 HTML 3.2 开始，由 W3C 制定标准。W3C 万维网联盟（ The World Wide Web Consortium ）创建于1994年，是Web技术领域最具权威和影响力的国际中立性技术标准机构。到目前为止，W3C 已发布了200多项影响深远的Web技术标准及实施指南，如广为业界采用的超文本标记语言（ HTML ）、可扩展标记语言（ XML ）以及帮助残障人士有效获得Web内容的信息无障碍指南（ WCAG ）等，有效促进了Web技术的互相兼容，对互联网技术的发展和应用起到了基础性和根本性的支撑作用。
3.HTML和编译型语言的区别 计算机语言分成 解释型语言 和 编译型语言 两种。
我们下面来展开讲一下 解释型语言 和 编译型语言 两者的区别：
在说两区别之前我们先来讲一下计算机怎么把代码翻译成计算机能看得懂的语言（翻译成机器码）。
众所周知，计算机 CPU 的集成电路中，除了电容、电阻、电感就是晶体管了，每个晶体管相当于一个开关，理论上 CPU 只能存储识别两个标识符，那就是 0 和 1，所以说 CPU 识别的指令集只能由 0 和 1 组合。那么所有的计算机语言想要 CPU 能看得懂，必须翻译成 0/1 代码才行，这个由 0/1 组成的代码叫做机器码。但是机器码相对于人来说过于繁琐，所以就有人发明了 高级语言 、 低级语言 等等，这些语言的分级是根据它的语法是贴近人还是贴近机器来区分的，越贴近人它就越高级，越贴近机器它就越低级，但是最终想要 CPU 可以识别都需要翻译成机器码。
典型的 低级语言 包括刚刚提到的机器码、汇编语言、c 等， 高级语言 包括 PHP、c#、JavaScript、Java、Python 等等。
什么是编译型语言和解释性语言呢？
刚刚我们提到翻译成机器码，这个翻译的过程就叫做编译或解释。编译型语言是指通过编译器翻译成完整的机器码，然后通过 CPU 去执行。
而解释型语言是指通过一个虚拟机的方式一行行的翻译，翻译一行执行一行；还有一种方式是混合型，介于两者之间。常见的编译型语言包括 c++、c、rust等，解释型语言包括 JavaScript、PHP、HTML 等等，混合型包括 Python、Java等。
4. 标签语法和属性 4.1 HTML文档扩展名 HTML 以文档的形式存储，文档的后缀可以是 .html .htm .xhtml，有时也会看到 php/asp/jsp 等类型的网页后缀，这种是通过服务器的 CGI 动态解析过的网页，网页内容也是 HTML 格式，只不过网页后缀是根据服务器的 CGI 网关的不同来定义的。不同的后缀形式可能在浏览器的解释结果不相同，在此不做深入讨论。
4.2 HTML标签 标签有两种定义方式：
实例演示
< div > 这是一个闭合标签</ div > <!-- 闭合标签 --> < DIV > 跟上边等价</ DIV > <!-- 标签不区分大小写 --> < input type ='text' name ='test' /> <!-- 自闭合标签 --> 123 可查看在线运行效果
自闭合标签通常是一些不需要包含具体 HTML 内容的的标签，例如表单、图片、换行符、css 样式等等。
实例演示
< input type ='radio' /> <!-- 表单 --> < img src ='https://www.baidu.com/img/bd_logo1.png' /> <!-- 图片 --> < br > < link rel ="stylesheet" type ="text/css" href ="theme.css" /> <!-- 引入css样式 --> 1234 可查看在线运行效果
从上述例子看得出来，通常自闭和标签是不包含实际的文本内容，通常是用来引入文件、图片、样式等作用，而闭合标签是包含内容，既然包含内容所以后边的闭合标签相当于起到一个结束符的作用。实际开发中，如果忘记将标签闭合，通常来说日常的浏览器（例如在 chrome v81） 中不会报语法错误，而是自动闭合，但是不建议这么做，因为浏览器并非完全的智能，有可能会引起排版错误，例如：
实例演示
< p style ='color:red' > 我是红色的段落</ p > <!-- 正确的写法 --> < span > 我是默认的文本</ span > 12 可查看在线运行效果
这段代码中，定义了一个段落，并设置了字体为红色，当忘记使用闭合标签时
实例演示
< p style ='color:red' > 我是红色的段落<!-- 忘记闭合 --> < span > 我是默认的文本</ span > 12 可查看在线运行效果
在浏览器的展示效果如下： 可以看到，样式出现了错乱。
TIPS: 所以在日常项目开发中，尽量选择带有语法检测的 IDE，可以避免大部分的语法错误。
4.3 属性 属性是控制元素的第二个维度，通过属性的设置，可以让元素展现出不同的表现风格。属性包含属性名称和属性值，通常在元素标签中用 name = value 的方式设置，多个属性之间使用空格隔开。例如表单中的是否只读，可以用
实例演示
< input readonly =true type ='text' > 1 可查看在线运行效果
属性值通常需要使用引号隔开，并非强制性，但是一旦属性值中包含空格的话不使用引号隔开则会解析异常，例如：
实例演示
< input name ="one style" type ='text' > <!-- 定义表单的name为 one style --> < input name =one style type ="text" > <!-- 未使用引号 --> 12 可查看在线运行效果
上述表单定义 name 为 one style，第二种写法的解析结果则是定义表单的 name 为 one，然后定义一个空的 style 属性，显然与预期不符，但是浏览器并不会报错。所以使用规范的写法（引号隔开）则会避免这种异常情况出现。 一个标签内可以包含多个属性，属性名称不能重复，属性名称不区分大小写，例如：
实例演示
< input type ='text' type ='file' > <!-- 这种写法是错误的 --> 1 可查看在线运行效果
这样的话浏览器会解析错误，不同的浏览器会呈现不同的效果，但是一般不会报错。 除了可以在标签内定义元素的属性之外，还可以使用 JavaScript 动态控制属性，这种方式在项目开发中经常使用，例如：
实例演示
< input type ='text' id = 'num1' > + < input type ='text' id ='num2' > = < input type ='text' id ='res' > < button onclick ='count()' > 计算结果</ button > <!-- 点击按钮实现计算 --> < script > function count (){ if (isNaN (document .getElementById ('num1' ).value ) || isNaN (document .getElementById ('num2' ).value )) return alert ("请输入正确的数字" );//判断输入数字是否合法 document .getElementById ('res' ).value = parseFloat (document .getElementById ("num1" ).value ) + parseFloat (document .getElementById ("num2" ).value );//将结果输出 } </ script > 12345678 可查看在线运行效果
上述代码，通过使用 JavaScript 设置表单元素的 value 属性，实现了一个简单的加法计算器。
4.4 注释 注释内容在浏览器中不做解释，只用于开发者记录代码用途等信息，格式如下：
实例演示
< !-- 这是在HTML的注释内容，支持多行注释 -- > 1 可查看在线运行效果
实例演示
// 这是JavaScript的单行注释 /* 这是JavaScript的多行注释 */ 123456 可查看在线运行效果
实例演示
/* 这是css的注释，支持单行注释和多行注释 */ 1 可查看在线运行效果
以上可以看出，css 和 HTML 都只有一种注释方式，这种设计方式可以因为 HTML 和 css 只是标记语言，没有函数和类等传统编程语言的概念，因此无需过多的注释风格。
TIPS: 除以上注释，实际项目开发中可能还会针对文件、类、项目模块做注释，这种注释的设置方式跟使用的 IDE 设置有关，有些 IDE 可以设置当声明一个类或文件时自动加上定义好的注释内容，良好的注释可以提升项目整体的扩展性、维护性、可用性。在程序编译或者解释的过程中会被浏览器忽略，在开发大型项目中上线之前通过会做程序压缩合并等处理，处理的过程中通常会删掉注释代码
4.5 HTML代码结构 符合HTML标准的网页代码结构大致格式如下
实例演示
<!DOCTYPE > <!-- 控制w3c格式 --> < html > < head > < meta charset ="utf-8" > <!-- 告诉浏览器使用的是utf-8字符集 --> < title > 我的网站</ title > <!-- 这里用来编写网站的标题 --> </ head > < body > <!-- 只有body标签的内容，才能真正显示在浏览器的窗口 --> </ body > </ html > 12345678 可查看在线运行效果
上述内容是一个大致符合 w3c 标准的 HTML 代码框架，其中包含文档描述头标签、HTML标签、头标签和 body 标签，但是实际开发者可能不会包含这么完整的标签框架，例如可以只声明 body 内的标签：
实例演示
< a href ="http://www.baidu.com" > 百度搜索</ a > 1 可查看在线运行效果
这样的话，浏览器的展示效果并未有什么变化，但是当打开浏览器调试工具可以发现： 浏览器帮我们补齐的缺失的标签。
4.6 在浏览器中查看源码 开发过程中需要调试、查看代码，在浏览器中可以通过开发者工具方便的查看源码，这里以 Chrome 举例，在网页中点击右键->查看网页源代码/检查，即可查看源码。
总结 本章主要从标签语法、属性用途、文件格式、框架结构等几个方面大致介绍了HTML的规范和标准，只是预热一下，没有作深入讨论。之后的章节里，我们会根据以上内容延伸讲解。
HTML 属性 本章介绍 HTML 的标签内属性控制方式以及几种通用的属性的简单介绍。属性是 HTML 标签内提供的附加信息，一般用于描述标签或者控制标签的展现形式。
属性大部分情况下以键值对方式出现，比如 key='value'。
1. 全局属性 全局属性是大部分标签都可以使用的属性，常用到的有以下 8 个：
accesskey
class
id
lang
style
tabindex
dir
title
下面我们具体来看一下他们的用法。
1.1 accesskey accessKey 属性定义了使元素获得焦点的快捷键。 例如，定义了一组表单元素 ：
实例演示
< input type ="text" accesskey ='h' value ="按下alt+h" />< br /> < a href ='http://www.baidu.com' accesskey ="a" > 按下alt+a</ a >< br /> < button accesskey ="b" > 按下alt+b</ button >< br /> < label accesskey ="c" > 按下alt+c</ label >< br /> < legend accesskey ="d" > 按下alt+d</ legend >< br /> < textarea accesskey ="g" > 按下alt+g</ textarea > 123456 可查看在线运行效果
在浏览器中，当你同时按下 ALT+h 键，焦点会自动切换到上边的表单标签。 目前有 <a> <area> <button> <input> <label> <legend> <textarea>元素支持 accessKey 属性。
1.2 class class 属性规定了元素的类名，类名命名必须以字母为开头，内容中可以包含大小写字母和下划线("_")或者横杠("-")，类名是区分大小写的，类名可以定义多个，以 “ ” 空格隔开，例如定义了段落元素。
< p class ="class1 class2 class3" ></ p > 代码块1 相当于给 p 元素定义了 class1 class2 class3 3个类。 给元素定义类相当于给元素打了个标签，在 JavaScript 中操作 DOM 提供了便捷，例如可以通过：
实例演示
< p class ="class1 class2 class3" > 我是一个段落</ p > < button onclick ='hideTest()' > 点击隐藏</ button > < button onclick ='showTest()' > 点击显示</ button > < script > function hideTest (){ var a = document .getElementsByClassName ("class1" ); //这样可以获取所有 class 包含test的标签 a [0 ].style .display = 'none' ; } function showTest (){ var a = document .getElementsByClassName ("class1" ); //这样可以获取所有 class 包含test的标签 a [0 ].style .display = 'block' ; } </ script > 可查看在线运行效果
以上 demo 通过点击按钮，基于操控对应 DOM 的 class 来控制按钮的显示与隐藏。
1.3 id id 属性类似于 class，不同的是 id 是唯一标签，不能重复；
< div id ='test' ></ div > 代码块1 类似于class，id 也是用于操作 dom 的标记，例如：
实例演示
< p id ='test' class ="class1 class2 class3" > 我是一个段落</ p > < button onclick ='hideTest()' > 点击隐藏</ button > < button onclick ='showTest()' > 点击显示</ button > < script > function hideTest (){ var a = document .getElementById ("test" ); //这样可以获取所有 class 包含test的标签 a .style .display = 'none' ; } function showTest (){ var a = document .getElementById ("test" ); //这样可以获取所有 class 包含test的标签 a .style .display = 'block' ; } </ script > 可查看在线运行效果
以上 demo 通过点击按钮，基于操控对应 dom 的 class 来控制按钮的显示与隐藏。
1.4 lang lang 属性定义了网页或者元素的语言，是否定义 lang 属性对网页或者标签的展现影响不大，但是可以帮助搜索引擎或者浏览器区分出网页的语言。ISO 639-1 为各种语言定义了缩略词。
实例演示
< p lang ="fr" > Ceci est un paragraphe.</ p > <!-- 表示语言是法语 --> 1 可查看在线运行效果
Language ISO Code Abkhazian ab Afar aa Afrikaans af Albanian sq Amharic am Arabic ar Armenian hy Assamese as Aymara ay Azerbaijani az Bashkir ba Basque eu Bengali (Bangla) bn Bhutani dz Bihari bh Bislama bi Breton br Bulgarian bg Burmese my Byelorussian (Belarusian) be Cambodian km Catalan ca Chinese (Simplified) zh Chinese (Traditional) zh Corsican co Croatian hr Czech cs Danish da Dutch nl English en Esperanto eo Estonian et Faeroese fo Farsi fa Fiji fj Finnish fi French fr Frisian fy Galician gl Gaelic (Scottish) gd Gaelic (Manx) gv Georgian ka German de Greek el Greenlandic kl Guarani gn Gujarati gu Hausa ha Hebrew he, iw Hindi hi Hungarian hu Icelandic is Indonesian id, in Interlingua ia Interlingue ie Inuktitut iu Inupiak ik Irish ga Italian it Japanese ja Javanese jv Kannada kn Kashmiri ks Kazakh kk Kinyarwanda (Ruanda) rw Kirghiz ky Kirundi (Rundi) rn Korean ko Kurdish ku Laothian lo Latin la Latvian (Lettish) lv Limburgish ( Limburger) li Lingala ln Lithuanian lt Macedonian mk Malagasy mg Malay ms Malayalam ml Maltese mt Maori mi Marathi mr Moldavian mo Mongolian mn Nauru na Nepali ne Norwegian no Occitan oc Oriya or Oromo (Afan, Galla) om Pashto (Pushto) ps Polish pl Portuguese pt Punjabi pa Quechua qu Rhaeto-Romance rm Romanian ro Russian ru Samoan sm Sangro sg Sanskrit sa Serbian sr Serbo-Croatian sh Sesotho st Setswana tn Shona sn Sindhi sd Sinhalese si Siswati ss Slovak sk Slovenian sl Somali so Spanish es Sundanese su Swahili (Kiswahili) sw Swedish sv Tagalog tl Tajik tg Tamil ta Tatar tt Telugu te Thai th Tibetan bo Tigrinya ti Tonga to Tsonga ts Turkish tr Turkmen tk Twi tw Uighur ug Ukrainian uk Urdu ur Uzbek uz Vietnamese vi Volapuk vo Welsh cy Wolof wo Xhosa xh Yiddish yi, ji Yoruba yo Zulu zu
1.5 style style 属性定义了元素的行内样式（也叫内联样式），行内样式优先于任何其他形式定义的样式。
实例演示
< p style ='color:#ccc' > 这是一个行内样式示例</ p > <!-- 行内样式 --> 1 可查看在线运行效果
其他两种定义元素样式的方式是：
< style > .test {} </ style > <!-- 使用标签的方式 --> < link href ="/css/test.css" /> <!-- 使用引用的方式 --> 代码块123456 其中 css 样式的优先级是： 行内样式 > 标签方式 > 引用文件 方式。 关于样式的内容本章节不做具体讨论。
1.6 tabindex tabindex 属性用于定义元素的 tab 键的控制顺序，即焦点的顺序。
tabindex 的值可以在 1 到 32767 之间的任意数字。当用户使用 tab 键在网页中移动控件时，将首先移动到具有最小 tabindex 属性的控件上，然后依次按从小到大移动。
如果两个元素的 tabindex 的属性值相等，浏览器会按照代码出现的顺序移动。当一个元素的 tabindex 设置为 -1，那么这个元素会排除在 tab 的移动顺序之外。
实例演示
< a href ="http://www./" tabindex ="1" > 焦点1</ a > < a href ="http://www./" tabindex ="2" > 焦点2</ a > < a href ="http://www./" tabindex ="3" > 焦点3</ a > < a href ="http://www./" tabindex ="4" > 焦点4</ a > < a href ="http://www./" tabindex ="5" > 焦点5</ a > 12345 可查看在线运行效果
在上述示例中，通过点击键盘的 tab 键可以看到焦点依次按顺序通过链接标签。
1.7 dir dir 属性定义元素内文本的方向。参数值有 2 种：
ltr 默认值。文字按从左到右的方向；
rtl 文字按照从右到左的方向。
实例演示
< p dir ="rtl" > 这是一个文字从右到左展示的方式</ p > 1 可查看在线运行效果
1.8 title title 属性用于指定元素的备注信息。这些信息通常是指，鼠标移动到元素上并且停留一段时间时，浏览器的提示框内的文本。
实例演示
< p title ="test123456789" style ="word-wrap:break-all;width:30px;white-space: nowrap; text-overflow: ellipsis;overflow: hidden;" > test123456789</ p > <!-- 定义一个段落 --> 1 可查看在线运行效果
上面的代码实现的功能是：当段落文字超出段落宽度时，显示省略号，并且鼠标移上去可显示全部内容：
2. HTML5 新增全局属性 2.1 contentEditable 这个属性是用来将一个标签变成可编辑的类型，可能了解的人并不太多，在加入 HTML5 标准以前，浏览器也有部分支持。比较通用的创建一个可编辑标签的方式是，使用表单 input 或者 textarea 的方式，不过都有一定的局限性。
使用 div + css + contentEditable 可以解决以上的问题，例如：
实例演示
< p contenteditable ="true" > 这是一个可编辑的段落。</ p > 1 可查看在线运行效果
以上定义了一个段落，如果没有加 contentEditable 属性的话，段落只是展示作用，当加了 contentEditable 属性之后，鼠标点击此段落之后可以编辑段落文字。
2.2 contextmenu contextmenu 属性用于制定 div 元素的右键单击菜单，需要配合 menu 标签使用，例如：
实例演示
< div contextmenu ='test' > < menu type ="context" id ="test" > < menuitem label ="刷新" ></ menuitem > <!-- 菜单1 --> < menuitem label ="回退" ></ menuitem > <!-- 菜单2 --> </ menu > </ div > 123456 可查看在线运行效果
这个功能类似于桌面应用的右键菜单功能，但是目前只有 Firefox 浏览器支持 contextmenu 属性，不支持的浏览器可以使用 div + css 模拟实现。
2.3 data-* 这个属性是 HTML5 中用于存储自定义属性值，自定义属性值用于方便开发者存储一些简单的数据内容，而不需从服务器端获取。
在 HTML4 中自定义属性的方式很有可能会跟系统关键字冲突，而 data-* 会被客户端忽略。
data- 后边必须至少有一个字符，不要包含大写字符；
JavaScript 可以用 getAttribute 函数获取自定义属性；
HTML5 原生函数支持使用 dataset / setAttribute 来 获取/操作自定义属性。
下面是 JavaScrip t使用 getAttribute 函数获取自定义属性的例子：
实例演示
< script > function show (animal ) { var type = animal .getAttribute ("data-type" ); alert (animal .innerHTML + "是一种" + type + "。" ); } </ script > < ul > < li onclick ="show(this)" id ="owl" data-type ="标记语言" > html</ li > < li onclick ="show(this)" id ="salmon" data-type ="脚本语言" > JavaScript</ li > < li onclick ="show(this)" id ="tarantula" data-type ="层叠样式表" > css</ li > </ ul > 1234567891011 可查看在线运行效果
以上示例通过 data-type 保存了无序列表中每个条目的类型值，通过点击列表条目可以弹出类型值。
2.4 draggable 这个属性用来标识元素是否支持被拖动，如果没有被设置则按照浏览器默认的方式来执行，属性可选值有 true/false/auto 。默认情况下，只有图片、链接是可以拖动的。需要配合定义 ondragstart 事件来实现拖动之后的响应机制。
实例演示
< p id ="drag1" draggable ="true" > 这是一段可移动的段落。</ p > 1 可查看在线运行效果
上述标签，当鼠标点击段落且移动时，呈现出可拖动样式： 如果未定义 draggable 属性，鼠标点击段落且拖动会选中文本：
2.5 dropzone dropzone 属性是指在元素上拖动数据时，是否拷贝、移动或链接被拖动数据。目前所有主流浏览器暂不支持该属性。
2.6 hidden hidden 用来设置元素是否应该被隐藏，当该属性设置为 hidden 或者 true 时，浏览器将不再渲染该元素。在早期的 HTML4 中，通过设置 css 样式 display:none 可以实现相同的效果。
实例演示
< input type =hidden id ='test' /> 1 可查看在线运行效果
上述表单在浏览器不显示任何效果，只有当提交表单时数据才会提交到服务器端。
2.7 spellcheck spellcheck 属性定义是否对元素进行拼写检查，目前该属性支持非密码的 input 标签、textarea 中的文本，可编辑元素中的文本。spellcheck 的值有 true 和 false。
实例演示
< p spellcheck ="true" > 这是一个段落。</ p > 1 可查看在线运行效果
2.8 translate translate 属性定义渲染元素时是否需要对内容进行翻译，目前所有主流浏览器都不支持该属性。
3. 总结 回顾本章，介绍了 HTML 通用的 8 个属性，以及 HTML5 新增的 8 个通用属性。通用的属性一般对大部分元素标签都支持，但是 HTML5 目前是新标准，所有有些属性不能百分之百兼容所有的浏览器。因为浏览器更新迭代速度较快，所以在此没有对浏览器兼容性做深入讲解，大家在实际使用的时候可以在 w3c 官网或者其他网站手册中查询对照。
文本段落列表 本章介绍文本段落等控制文字章节显示的标签。这些标签通常只起到展示排版作用（当然还有 SEO 的作用），其他的用途不多。
1. 标题 用于标题的 HTML 标签包括 <h1> - <h6> 来定义。标题类似于 Word 中的标题，其作用是为了对文章进行排版，而不是只为了放大字号。良好的标题排版对搜索引擎比较友好。
< h1 > 一级标题</ h1 > < h2 > 二级标题</ h2 > < h3 > 三级标题</ h3 > < h4 > 四级标题</ h4 > < h5 > 五级标题</ h5 > < h6 > 六级标题</ h6 > 代码块123456 展示效果如下： 标题标签元素在 HTML5 使用较少，一般使用 css 样式控制文字大小。
2. 文档标题 title 用于定义文档的标题，通常嵌入到 header 头里边，其作用是：
定义在浏览器中显示的文档标题
当网页被添加到收藏夹时，显示在收藏夹的标题
显示在搜索引擎中的标题
实例演示
< title > HTML 页面的标题</ title > 1 可查看在线运行效果
title 标题显示在浏览器左上角
3. 段落 p 标签用于定义段落，它是一个块级元素，浏览器会自动在其前后换行
实例演示
< p > 麻叶层层苘叶光，谁家煮茧一村香。</ p > < p > 隔篱娇语络丝娘。</ p > < p > 垂白杖藜抬醉眼，捋青捣麨软饥肠。</ p > < p > 问言豆叶几时黄。</ p > 1234 可查看在线运行效果
上述代码段使用 p 段落标签分隔了一首宋词浣溪沙，使用 div+css 可以实现相同效果
4. 列表 4.1 有序列表 有序列表类似于 Word 中的有序列表，使用 ol 标签定义， li 标签定义列表项
实例演示
< h2 > HTML手册</ h2 > < ol > <!-- 定义一个有序列表 --> < li > 第一章.语法介绍</ li > <!-- 列表项1 --> < li > 第二章.标签</ li > <!-- 列表项2 --> < li > 第三章.属性</ li > </ ol > 123456 可查看在线运行效果
在浏览器中展示如下
其中有序列表中可以定义 start 属性，用于设置列表序号的起始值
4.2 无序列表 ul 无序列表不同于有序列表的是-列表中的编号使用粗体原点表示，而不是数字其可以通过定义 compact 和 type 来设置编号的样式，type 的可选值有 disc、square、circle。但是一般建议通过 css 统一控制样式。
实例演示
< h2 > 世界有几大洲：</ h2 > < ul > < li > 亚洲</ li > < li > 欧洲</ li > < li > 北美洲</ li > < li > 南美洲</ li > < li > 非洲</ li > < li > 大洋洲</ li > < li > 南极洲</ li > </ ul > 12345678910 可查看在线运行效果
上述代码展现的列表：
4.3 自定义列表 自定义列表通过 dl 标签定义，使用 dt 定义标题， dd 定义内容。自定义列表可以实现类似 table 的效果。
实例演示
< h3 > 自定义列表</ h3 > < dl > < dt > 一级</ dt > < dd > 二级</ dd > < dd > 二级</ dd > < dt > 一级</ dt > < dd > 二级</ dd > < dd > 二级</ dd > </ dl > 123456789 可查看在线运行效果
5. 总结 本章主要介绍了几种文本段落列表的控制标签以及属性，这些标签大部分用于文本排版。其实在在 HTML5 中，通过 css3+div 可以实现绝大多数效果，只不过需要对css非常熟悉才行，所以在不是非常熟悉 css 的情况下可以使用一些快捷的标签来实现相同的效果
HTML 链接 本章节介绍 HTML 页面与页面，文档与文档之间的媒介-链接，链接为客户和服务器提供了主要的交互的手段。这是一个比较常见的标签类型，几乎在所有的网站中都能看到它的身影。
1. 样式 使用标签 <a>设置超文本链接，链接可以是图形或者文字，当鼠标移动到链接上时，会出现一个小手的形状。
未访问的链接显示蓝色，带有下划线；
访问过的链接显示紫色，带有下划线；
点击时，链接显示红色，带有下划线。
以上是浏览器的链接的默认的样式，在实际的项目开发中，通常网页的风格需要重新设计，那么链接的默认样式也会随网页的风格而改变，要改变链接的样式需要用到 css 伪类，伪类是 css 的一种定义方式，可以和 css 的类搭配使用，以下是几种伪类的使用实例：
实例演示
< style > .divcss :link { color :#F00 }/* 链接默认是红色 */ .divcss :hover { color :#000 }/* 鼠标悬停变黑色 */ .divcss :active { color :#03F }/* 鼠标点击时蓝色 */ .divcss :visited { color :#F0F }/* 访问过为粉红 */ </ style > < a class ="divcss" href ="http://www.baidu.com" > 百度</ a > 1234567 可查看在线运行效果
从上面代码可以看到，伪类包括链接默认（:link）、鼠标悬停（:hover）、鼠标点击时（:active）、链接访问后（:visited）这几种样式定义方式，这些都是专门针对于链接。
2. 语法 a 标签的语法如下：
实例演示
可查看在线运行效果
链接 a 是一种闭合标签，一个最基础的链接定义包括链接标签 a 标签、标签内容、链接地址 href 属性，其中 href 是链接中最重要的一个属性，如果未定义 href 浏览器也不会报错，但是这就失去了标签的意义，变得跟普通文本标签没有区别了。
2.1 target 属性 由于链接是 HTML 中重要的交互介质，当用户点击一个链接跳转的目标界面并非是当前的界面，这时候就需要一个重要的属性 target 来定义所要跳转的目标界面。
target 属性的可选值有以下几个：
_blank： 在新窗口打开链接；
_self ： 默认方式，在当前窗口载入链接内容；
_top： 在包含当前文档的最顶层的窗口载入链接内容。（一般用在有 frame 框架标签的页面中。）
_parent： 在当前文档的父窗口载入链接内容。（一般用在有 frame 框架标签的页面中。）
其中 _top 和 _parent 不太好理解，看下面一个例子：
实例演示
< iframe name ="baidu" ></ iframe > <!-- 定义一个iframe --> < a href ="http://www.baidu.com" target ="baidu" > 搜一搜</ a > <!-- 定义一个链接 --> 12 可查看在线运行效果
以上代码实现：点击链接（搜一搜）后，在当前页面的 iframe 中嵌入搜索框页面。
Tips： 该功能在 IE10 版本以下不兼容。
其中顶层窗口和父窗口针对在网页中嵌套 iframe 或者 frameset 有效，当嵌套框架时被嵌套框架是嵌套框架的 _parent，最外层的 HTML 称为 _top。
新的 HTML 标准中关于 target 属性的存在有一定的争议，主要是因为可以使用 JavaScript 的方式替代 target，例如：
实例演示
< a href ="javascript:window.open('https://www.baidu.com')" target ="_blank" > 点击在新窗口打开</ a > < a href ="javascript:location.href='https://www.baidu.com'" > 点击在当前窗口打开</ a > < a href ="javascript:top.location.href='https://www.baidu.com'" > 点击在顶层窗口打开</ a > < a href ="javascript:parent.location.href='https://www.baidu.com'" > 点击在父窗口打开</ a > 1234 可查看在线运行效果
以上代码使用 JavaScript 函数的方式实现各种打开链接的方式。
2.1 id 属性 id 属性是 html 的通用属性，主要是用于给元素设置事件或者设置样式时用到，以下代码实现点击链接跳转之前弹框提示：
实例演示
< a href ='https://www.baidu.com' id ='test' > 百度</ a > <!-- 定义一个链接 --> < script > document .getElementById ("test" ).onclick = function (){ //点击链接跳转前弹框提示 alert ("即将跳转到百度" ); } </ script > 123456 可查看在线运行效果
2.2 charset 属性 设置编码，在 HTML5 不支持：
实例演示
< a charset ="gb2312" href ="http://www.baidu.com" > 百度</ a > 1 可查看在线运行效果
此属性在主流浏览器中几乎不支持，所以定义了没有什么作用。
2.3 coords 属性 定义链接的坐标，HTML5 不支持。
2.4 download 属性 有时用户点击一个链接的时候，这个链接的内容有可能包含 word、pdf、png、jpg 或者 MP4，zip 等内容，用户需要的仅仅是下载而不是跳转链接，那么这时候我们只需要定义一个 download 属性，这个属性包含下载时的文件名称。
实例演示
< a href ="https://img01./app/a/07/57d9e1c69332c8da692c3ec5c0e1466b" download ="图片" > 点击下载图片</ a > 1 可查看在线运行效果
以上代码定义了一个下载图片链接，download 属性不支持 IE 浏览器
2.5 href 属性 定义超链接的跳转目标，可以是：
实例演示
< a href ="https://www.baidu.com" id ="test" > 百度</ a > < a href ="/index.html" > 主页</ a > < a href ="javascript:void(0)" > 普通按钮</ a > <!-- 请注意：向下滚动页面，可看到下面这个向上跳转的链接。单击它，会让页面跳到网页的顶部--> < a href ="#test" style ="margin-top:2000px;display:block" > 跳转到首部</ a > 12345 可查看在线运行效果
以上代码定义了几种链接的方式，其中锚点主要应用于当页面滚动条比较长时，用户可以点击跳转到首部。
2.6 hreflang 属性 定义被链接的文档的语言：
实例演示
< a href ="http://www.baidu.com" hreflang ="zh" > 百度</ a > 1 可查看在线运行效果
主流的浏览器暂不支持该属性。
2.7 name 属性 通用属性，HTML5 不支持。
2.8 rel 属性 定义当前文档，主要用于搜索引擎搜集网页内链接的集合以及链接与链接之间的关系，没有实际功能用途。
rel 是英文单词 relationship 的缩写，意味着虽然这个属性本身对网页视觉效果而言没有什么本质性的用途，但是它是串联网页与搜索引擎的桥梁，搜索引擎通过这个属性可以获取到链接的一些简介，从而了解到该网页的用途，进而对网页进行归类，方便用户搜索。
2.9 rev 属性 定义链接文档与当前文档的关系，HTML5 不支持。
2.10 shape 属性 定义链接的形状，HTML5 不支持。
2.11 type 属性 定义链接文档的 mime 类型， mime 是指描述内容类型的因特网标准，以下罗列最新的标准项：
扩展名 类型/子类型 application/octet-stream 323 text/h323 acx application/internet-property-stream ai application/postscript aif audio/x-aiff aifc audio/x-aiff aiff audio/x-aiff asf video/x-ms-asf asr video/x-ms-asf asx video/x-ms-asf au audio/basic avi video/x-msvideo axs application/olescript bas text/plain bcpio application/x-bcpio bin application/octet-stream bmp image/bmp c text/plain cat application/vnd.ms-pkiseccat cdf application/x-cdf cer application/x-x509-ca-cert class application/octet-stream clp application/x-msclip cmx image/x-cmx cod image/cis-cod cpio application/x-cpio crd application/x-mscardfile crl application/pkix-crl crt application/x-x509-ca-cert csh application/x-csh css text/css dcr application/x-director der application/x-x509-ca-cert dir application/x-director dll application/x-msdownload dms application/octet-stream doc application/msword dot application/msword dvi application/x-dvi dxr application/x-director eps application/postscript etx text/x-setext evy application/envoy exe application/octet-stream fif application/fractals flr x-world/x-vrml gif image/gif gtar application/x-gtar gz application/x-gzip h text/plain hdf application/x-hdf hlp application/winhlp hqx application/mac-binhex40 hta application/hta htc text/x-component htm text/html html text/html htt text/webviewhtml ico image/x-icon ief image/ief iii application/x-iphone ins application/x-internet-signup isp application/x-internet-signup jfif image/pipeg jpe image/jpeg jpeg image/jpeg jpg image/jpeg js application/x-javascript latex application/x-latex lha application/octet-stream lsf video/x-la-asf lsx video/x-la-asf lzh application/octet-stream m13 application/x-msmediaview m14 application/x-msmediaview m3u audio/x-mpegurl man application/x-troff-man mdb application/x-msaccess me application/x-troff-me mht message/rfc822 mhtml message/rfc822 mid audio/mid mny application/x-msmoney mov video/quicktime movie video/x-sgi-movie mp2 video/mpeg mp3 audio/mpeg mpa video/mpeg mpe video/mpeg mpeg video/mpeg mpg video/mpeg mpp application/vnd.ms-project mpv2 video/mpeg ms application/x-troff-ms mvb application/x-msmediaview nws message/rfc822 oda application/oda p10 application/pkcs10 p12 application/x-pkcs12 p7b application/x-pkcs7-certificates p7c application/x-pkcs7-mime p7m application/x-pkcs7-mime p7r application/x-pkcs7-certreqresp p7s application/x-pkcs7-signature pbm image/x-portable-bitmap pdf application/pdf pfx application/x-pkcs12 pgm image/x-portable-graymap pko application/ynd.ms-pkipko pma application/x-perfmon pmc application/x-perfmon pml application/x-perfmon pmr application/x-perfmon pmw application/x-perfmon pnm image/x-portable-anymap pot, application/vnd.ms-powerpoint ppm image/x-portable-pixmap pps application/vnd.ms-powerpoint ppt application/vnd.ms-powerpoint prf application/pics-rules ps application/postscript pub application/x-mspublisher qt video/quicktime ra audio/x-pn-realaudio ram audio/x-pn-realaudio ras image/x-cmu-raster rgb image/x-rgb rmi audio/mid roff application/x-troff rtf application/rtf rtx text/richtext scd application/x-msschedule sct text/scriptlet setpay application/set-payment-initiation setreg application/set-registration-initiation sh application/x-sh shar application/x-shar sit application/x-stuffit snd audio/basic spc application/x-pkcs7-certificates spl application/futuresplash src application/x-wais-source sst application/vnd.ms-pkicertstore stl application/vnd.ms-pkistl stm text/html svg image/svg+xml sv4cpio application/x-sv4cpio sv4crc application/x-sv4crc swf application/x-shockwave-flash t application/x-troff tar application/x-tar tcl application/x-tcl tex application/x-tex texi application/x-texinfo texinfo application/x-texinfo tgz application/x-compressed tif image/tiff tiff image/tiff tr application/x-troff trm application/x-msterminal tsv text/tab-separated-values txt text/plain uls text/iuls ustar application/x-ustar vcf text/x-vcard vrml x-world/x-vrml wav audio/x-wav wcm application/vnd.ms-works wdb application/vnd.ms-works wks application/vnd.ms-works wmf application/x-msmetafile wps application/vnd.ms-works wri application/x-mswrite wrl x-world/x-vrml wrz x-world/x-vrml xaf x-world/x-vrml xbm image/x-xbitmap xla application/vnd.ms-excel xlc application/vnd.ms-excel xlm application/vnd.ms-excel xls application/vnd.ms-excel xlt application/vnd.ms-excel xlw application/vnd.ms-excel xof x-world/x-vrml xpm image/x-xpixmap xwd image/x-xwindowdump z application/x-compress zip application/zip
3. 其他链接因特网标准 除了通过 <a>链接标签的方式，还可以通过下面三种方式：
JavaScript
iframe 标签
script 标签
等方式与服务器交互。
3. 小结 本章节介绍了 <a> 标签的用途，以及各个属性的功能，其中有些已经在 HTML5 废弃了，例如，控制样式的属性。 <a> 标签是 HTML 中用途非常广泛的标签，需要掌握。
head 头部 本章节讲解 HTML 中的 head 标签，以及 head 内包含关于 HTTP 协议的标签-meta。
<head> 定义文档的头部，它是所有头部元素的容器。 <head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
1. head head 标签是 HTML 标准框架中的头部分，前边章节我们讲到 HTML 的标准框架中提到 一个标准的 HTML 中包含 HTML标签、head标签、 body 标签以及 w3c 文档标准头。所以说 head 标签是必须的标签，它本身没有视觉展示效果，仅仅是作为容器标签，其中可以包含的标签包含：
base
link
meta
script
style
title
例如：
< html > < head > < title > 标题</ title > </ head > < body > 内容... ... </ body > </ html > 代码块12345678 所有主流的浏览器都支持 head 标签。
2. meta 2.1 meta标签的作用 优化搜索引擎
定义页面使用语言
控制页面缓存
网页定义评价
控制页面显示窗口
……
例如
< meta name ="keywords" content ="HTML,PHP,SQL" > <!-- 定义文档关键词，用于爬虫搜索引擎 --> < meta http-equiv ="charset" content ="iso-8859-1" > <!-- 定义文档的字符集 --> < meta http-equiv ="expires" content ="31 Dec 2020" > <!-- 定义文档的缓存过期时间 --> 代码块123 2.2 meta 的属性 name 描述网页
content 方便搜索引擎查找和分类
http-equiv http文件头设置
3. header header 标签定义文档的页眉，与 head 类似，它也是仅仅起到容器作用，不同的是 header 非网页必须标签，而且是 HTML5 的新增标准，放到 header 标签的内容大都是一些文档的介绍信息，例如：
< header > < h1 > 本章介绍HTML头</ h1 > </ header > 代码块123 3. 其他 head 内还可以包括 link、script 等标签，用于引用 css JavaScript 文件等作用，例如：
实例演示
< head > < link href ='/css/1.css' type ="text/css" /> <!-- 定义层叠样式表 --> < script src ="/script/1.js" type ='text/javascript' ></ script > <!-- 定义JavaScript脚本 --> </ head > 1234 可查看在线运行效果
在实际项目开发中，为了更好的扩展性和可维护性，一般会把 head 标签以及其中的内容放到一个全局 include 文件，因为这个文件一般改动不太频繁且每个文件都必须引用，所以由框架在加载的时候自动引用，这样的设计方式符合 MVC 以及面向对象开发的思想。
4. 小结 回顾本节，主要介绍了 HTML 中 head 标签的语法和作用，以及其中包含的其他标签元素的用法。
head 头部 本章节讲解 HTML 中的 head 标签，以及 head 内包含关于 HTTP 协议的标签-meta。
<head> 定义文档的头部，它是所有头部元素的容器。 <head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。
1. head head 标签是 HTML 标准框架中的头部分，前边章节我们讲到 HTML 的标准框架中提到 一个标准的 HTML 中包含 HTML标签、head标签、 body 标签以及 w3c 文档标准头。所以说 head 标签是必须的标签，它本身没有视觉展示效果，仅仅是作为容器标签，其中可以包含的标签包含：
base
link
meta
script
style
title
例如：
< html > < head > < title > 标题</ title > </ head > < body > 内容... ... </ body > </ html > 代码块12345678 所有主流的浏览器都支持 head 标签。
2. meta 2.1 meta标签的作用 优化搜索引擎
定义页面使用语言
控制页面缓存
网页定义评价
控制页面显示窗口
……
例如
< meta name ="keywords" content ="HTML,PHP,SQL" > <!-- 定义文档关键词，用于爬虫搜索引擎 --> < meta http-equiv ="charset" content ="iso-8859-1" > <!-- 定义文档的字符集 --> < meta http-equiv ="expires" content ="31 Dec 2020" > <!-- 定义文档的缓存过期时间 --> 代码块123 2.2 meta 的属性 name 描述网页
content 方便搜索引擎查找和分类
http-equiv http文件头设置
3. header header 标签定义文档的页眉，与 head 类似，它也是仅仅起到容器作用，不同的是 header 非网页必须标签，而且是 HTML5 的新增标准，放到 header 标签的内容大都是一些文档的介绍信息，例如：
< header > < h1 > 本章介绍HTML头</ h1 > </ header > 代码块123 3. 其他 head 内还可以包括 link、script 等标签，用于引用 css JavaScript 文件等作用，例如：
实例演示
< head > < link href ='/css/1.css' type ="text/css" /> <!-- 定义层叠样式表 --> < script src ="/script/1.js" type ='text/javascript' ></ script > <!-- 定义JavaScript脚本 --> </ head > 1234 可查看在线运行效果
在实际项目开发中，为了更好的扩展性和可维护性，一般会把 head 标签以及其中的内容放到一个全局 include 文件，因为这个文件一般改动不太频繁且每个文件都必须引用，所以由框架在加载的时候自动引用，这样的设计方式符合 MVC 以及面向对象开发的思想。
4. 小结 回顾本节，主要介绍了 HTML 中 head 标签的语法和作用，以及其中包含的其他标签元素的用法。
HTML 图像 在网页中经常能看到丰富多彩的图片，大家肯定很好奇这些图片是如何放到网页中的呢，其实很简单，学习了本章介绍的图片标签之后就了解了。
1. img 图像 img 是 英文单词 image 的缩写，意思是图像，它是 HTML 中最通用的定义图片的方式，是一个闭合标签，定义方式如下 ：
< img src = "url" alt = "" /> <!-- 定义一个图片 --> 代码块1 其中 src 属性是必须属性，用来指定图片所对应的 URL 地址。
1.1 src 属性 src 的全称是 source，表示图片的 URL 地址源。源就是表示图片的地址路径，这个路径可以是相对路径，也可以是绝对路径。绝对路径指的是一个包含网络协议头的完整路径，常用的网络协议是 HTTP 协议，例如 https://www.baidu.com/img/bd_logo1.png；相对路径是指这个图片文件跟当前的网页在同一个服务域，例如： /img/bd_logo1.png。
实例演示
< img src = "../_nuxt/img/be6bf0d.png" /> <!-- 这是一个相对路径 --> < img src = "https://www.baidu.com/img/bd_logo1.png" /> <!-- 这是一个绝对路径 --> 12 可查看在线运行效果
有时当图片过大时或者过多时，网页加载可能会比较慢，这时需要针对图片使用 懒加载 的方式（图片懒加载），懒加载的原理就是将图片的 src 先设置为空，网页其他内容加载完之后，再通过 JavaScript 将 src 属性赋值，例如：
< div class ="container" > < img src ="img/loading.png" alt ="1" data-src ="photo-1.jpeg" > < img src ="img/loading.png" alt ="2" data-src ="photo-2.jpeg" > < img src ="img/loading.png" alt ="3" data-src ="photo-3.jpeg" > </ div > < script > window .onload = function (){//页面加载完之后再加载图片 var a = document .getElementsByTagName ("img" );//获取图片DOM for (var i in a ){ a [i ].src = a [i ].getAttribute ("data-src" ) } } </ script > 代码块12345678910111213 可以试试真实的运行效果：
实例演示
< div class ="container" > < img src ="https://wiki-code.oss-cn-beijing./html5/img/loading.png" alt ="1" data-src ="https://wiki-code.oss-cn-beijing./html5/img/photo-3.png" > < img src ="https://wiki-code.oss-cn-beijing./html5/img/loading.png" alt ="2" data-src ="https://wiki-code.oss-cn-beijing./html5/img/photo-3.png" > < img src ="https://wiki-code.oss-cn-beijing./html5/img/loading.png" alt ="3" data-src ="https://wiki-code.oss-cn-beijing./html5/img/photo-3.png" > </ div > < script > window .onload = function (){//页面加载完之后再加载图片 var a = document .getElementsByTagName ("img" );//获取图片DOM for (var i in a ){ a [i ].src = a [i ].getAttribute ("data-src" ) } } </ script > 12345678910111213 可查看在线运行效果
以上代码通过定义 onload 事件，将图片延后加载。
1.1.1 Base64 方式加载图片 我们都知道 exe、jpg、pdf 这些格式的文件是使用二进制方式保存的，其中包含很多无法显示和打印的字符，如果要让文本处理软件能处理二进制数据，需要将其编码成一种明文显示的安全格式，Base64 是一种最常见的二进制编码方法。有时为了方便处理，图片并非使用二进制流方式保存，而是使用 Base64 方式编码之后保存在数据库，img 标签的 src 属性可以识别 Base64 格式的编码图片格式，例如：
实例演示
< img src ='data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAhwAAAECCAMAAACCFP44AAAACXBIWXMAAAsTAAALEwEAmpwYAAAK TWlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVN3WJP3Fj7f92UPVkLY8LGXbIEAIiOsCMgQ WaIQkgBhhBASQMWFiApWFBURnEhVxILVCkidiOKgKLhnQYqIWotVXDjuH9yntX167+3t+9f7vOec 5/zOec8PgBESJpHmomoAOVKFPDrYH49PSMTJvYACFUjgBCAQ5svCZwXFAADwA3l4fnSwP/wBr28A AgBw1S4kEsfh/4O6UCZXACCRAOAiEucLAZBSAMguVMgUAMgYALBTs2QKAJQAAGx5fEIiAKoNAOz0 ST4FANipk9wXANiiHKkIAI0BAJkoRyQCQLsAYFWBUiwCwMIAoKxAIi4EwK4BgFm2MkcCgL0FAHaO WJAPQGAAgJlCLMwAIDgCAEMeE80DIEwDoDDSv+CpX3CFuEgBAMDLlc2XS9IzFLiV0Bp38vDg4iHi wmyxQmEXKRBmCeQinJebIxNI5wNMzgwAABr50cH+OD+Q5+bk4eZm52zv9MWi/mvwbyI+IfHf/ryM AgQAEE7P79pf5eXWA3DHAbB1v2upWwDaVgBo3/ldM9sJoFoK0Hr5i3k4/EAenqFQyDwdHAoLC+0l YqG9MOOLPv8z4W/gi372/EAe/tt68ABxmkCZrcCjg/1xYW52rlKO58sEQjFu9+cj/seFf/2OKdHi NLFcLBWK8ViJuFAiTcd5uVKRRCHJleIS6X8y8R+W/QmTdw0ArIZPwE62B7XLbMB+7gECiw5Y0nYA QH7zLYwaC5EAEGc0Mnn3AACTv/mPQCsBAM2XpOMAALzoGFyolBdMxggAAESggSqwQQcMwRSswA6c wR28wBcCYQZEQAwkwDwQQgbkgBwKoRiWQRlUwDrYBLWwAxqgEZrhELTBMTgN5+ASXIHrcBcGYBie whi8hgkEQcgIE2EhOogRYo7YIs4IF5mOBCJhSDSSgKQg6YgUUSLFyHKkAqlCapFdSCPyLXIUOY1c QPqQ28ggMor8irxHMZSBslED1AJ1QLmoHxqKxqBz0XQ0D12AlqJr0Rq0Hj2AtqKn0UvodXQAfYqO Y4DRMQ5mjNlhXIyHRWCJWBomxxZj5Vg1Vo81Yx1YN3YVG8CeYe8IJAKLgBPsCF6EEMJsgpCQR1hM WEOoJewjtBK6CFcJg4Qxwicik6hPtCV6EvnEeGI6sZBYRqwm7iEeIZ4lXicOE1+TSCQOyZLkTgoh JZAySQtJa0jbSC2kU6Q+0hBpnEwm65Btyd7kCLKArCCXkbeQD5BPkvvJw+S3FDrFiOJMCaIkUqSU Eko1ZT/lBKWfMkKZoKpRzame1AiqiDqfWkltoHZQL1OHqRM0dZolzZsWQ8ukLaPV0JppZ2n3aC/p dLoJ3YMeRZfQl9Jr6Afp5+mD9HcMDYYNg8dIYigZaxl7GacYtxkvmUymBdOXmchUMNcyG5lnmA+Y b1VYKvYqfBWRyhKVOpVWlX6V56pUVXNVP9V5qgtUq1UPq15WfaZGVbNQ46kJ1Bar1akdVbupNq7O UndSj1DPUV+jvl/9gvpjDbKGhUaghkijVGO3xhmNIRbGMmXxWELWclYD6yxrmE1iW7L57Ex2Bfsb di97TFNDc6pmrGaRZp3mcc0BDsax4PA52ZxKziHODc57LQMtPy2x1mqtZq1+rTfaetq+2mLtcu0W 7eva73VwnUCdLJ31Om0693UJuja6UbqFutt1z+o+02PreekJ9cr1Dund0Uf1bfSj9Rfq79bv0R83 MDQINpAZbDE4Y/DMkGPoa5hpuNHwhOGoEctoupHEaKPRSaMnuCbuh2fjNXgXPmasbxxirDTeZdxr PGFiaTLbpMSkxeS+Kc2Ua5pmutG003TMzMgs3KzYrMnsjjnVnGueYb7ZvNv8jYWlRZzFSos2i8eW 2pZ8ywWWTZb3rJhWPlZ5VvVW16xJ1lzrLOtt1ldsUBtXmwybOpvLtqitm63Edptt3xTiFI8p0in1 U27aMez87ArsmuwG7Tn2YfYl9m32zx3MHBId1jt0O3xydHXMdmxwvOuk4TTDqcSpw+lXZxtnoXOd 8zUXpkuQyxKXdpcXU22niqdun3rLleUa7rrStdP1o5u7m9yt2W3U3cw9xX2r+00umxvJXcM970H0 8PdY4nHM452nm6fC85DnL152Xlle+70eT7OcJp7WMG3I28Rb4L3Le2A6Pj1l+s7pAz7GPgKfep+H vqa+It89viN+1n6Zfgf8nvs7+sv9j/i/4XnyFvFOBWABwQHlAb2BGoGzA2sDHwSZBKUHNQWNBbsG Lww+FUIMCQ1ZH3KTb8AX8hv5YzPcZyya0RXKCJ0VWhv6MMwmTB7WEY6GzwjfEH5vpvlM6cy2CIjg R2yIuB9pGZkX+X0UKSoyqi7qUbRTdHF09yzWrORZ+2e9jvGPqYy5O9tqtnJ2Z6xqbFJsY+ybuIC4 qriBeIf4RfGXEnQTJAntieTE2MQ9ieNzAudsmjOc5JpUlnRjruXcorkX5unOy553PFk1WZB8OIWY EpeyP+WDIEJQLxhP5aduTR0T8oSbhU9FvqKNolGxt7hKPJLmnVaV9jjdO31D+miGT0Z1xjMJT1Ir eZEZkrkj801WRNberM/ZcdktOZSclJyjUg1plrQr1zC3KLdPZisrkw3keeZtyhuTh8r35CP5c/Pb FWyFTNGjtFKuUA4WTC+oK3hbGFt4uEi9SFrUM99m/ur5IwuCFny9kLBQuLCz2Lh4WfHgIr9FuxYj i1MXdy4xXVK6ZHhp8NJ9y2jLspb9UOJYUlXyannc8o5Sg9KlpUMrglc0lamUycturvRauWMVYZVk Ve9ql9VbVn8qF5VfrHCsqK74sEa45uJXTl/VfPV5bdra3kq3yu3rSOuk626s91m/r0q9akHV0Ibw Da0b8Y3lG19tSt50oXpq9Y7NtM3KzQM1YTXtW8y2rNvyoTaj9nqdf13LVv2tq7e+2Sba1r/dd3vz DoMdFTve75TsvLUreFdrvUV99W7S7oLdjxpiG7q/5n7duEd3T8Wej3ulewf2Re/ranRvbNyvv7+y CW1SNo0eSDpw5ZuAb9qb7Zp3tXBaKg7CQeXBJ9+mfHvjUOihzsPcw83fmX+39QjrSHkr0jq/dawt o22gPaG97+iMo50dXh1Hvrf/fu8x42N1xzWPV56gnSg98fnkgpPjp2Snnp1OPz3Umdx590z8mWtd UV29Z0PPnj8XdO5Mt1/3yfPe549d8Lxw9CL3Ytslt0utPa49R35w/eFIr1tv62X3y+1XPK509E3r O9Hv03/6asDVc9f41y5dn3m978bsG7duJt0cuCW69fh29u0XdwruTNxdeo94r/y+2v3qB/oP6n+0 /rFlwG3g+GDAYM/DWQ/vDgmHnv6U/9OH4dJHzEfVI0YjjY+dHx8bDRq98mTOk+GnsqcTz8p+Vv95 63Or59/94vtLz1j82PAL+YvPv655qfNy76uprzrHI8cfvM55PfGm/K3O233vuO+638e9H5ko/ED+ UPPR+mPHp9BP9z7nfP78L/eE8/sl0p8zAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAA ADqYAAAXb5JfxUYAAAMAUExURQAAAP///+EGASMZ3Pz7/vX0/fb1/fLx/fPy/fTz/TIo3kY94UxD 4l9X5XJr6Hdw6Xhx6YR+64uF7JqV75uW75yX752Y76Sf8K+r8rGt87ay88fE9snG9s/M99DN99bU +NjW+drY+dza+eLg+uvq/Ozr/O3s/O7t/O/u/CQa3CYc3Cce3Sge3Ssh3Swi3Swj3i0k3i4l3i8m 3jAn3jMq3zQr3zUs3zYt3zcu3zgv3zkw4Dkw3zox4Dsy4Dwz4D004D414D834UA44UI54UM64UQ7 4UU84UY+4khA4kpC4k1F409H41JK41JL5FNM5FZO5FlR5VtU5VxV5V9Y5mFa5mNc5mRd5mVe52Zf 52dg52hh52li52pj52tl6G5n6G9o6HNt6XRu6Xlz6nt16n136n546n9664F764J864R/7IaB7IiD 7IuG7Y2I7Y+K7ZGM7pCL7ZKN7pGM7ZOO7pSP7paR7piU75+b8KCc8KSg8aej8aik8auo8rKv87Sx 87e09Lm29Lu49Ly59L+89cG+9cPB9sXD9svJ983L99DO+NPR+NTS+N7d+uDf+uPi++Tj++Xk++bl ++fm++no/Ojn++rp/Ono+/Dw/fb2/vn5/vr6/vz8//7+//zo5/3r6uMTDuMUD+MVEOMWEeMXEuMY E+MaFfCFgvGHhPGJhvGOi/KRjvKUkfKWk/Shn/SmpPWpp/WsqvWurPa0sve5t/e6uPe9u/e/vffB v/rT0vrU0/rW1frY1/va2fvc2/vd3Pvg3/zj4vvi4fzl5Pzn5uEHAuEIA+EJBOEKBeILBuIMB+IN COIPCuIQC+QbF+QdGeQfG+QgHOUjH+UlIeUpJeUqJuYtKeYvK+YzL+c2Muc5Nec8OOg+OuhAPOlE QelGQ+lIRelKR+lMSepPTOtWU+tZVuteW+xiX+1mY+1qZ+1tau5wbu92dO99e/B/ffCAfvCCgPOZ l/OenPjBwPjEw/jGxfnJyPnMy/nPzv3u7v3w8P719f729v75+f/7+//9/f///4DJalUAAAEAdFJO U/////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////// /////////////////////////////////////wBT9wclAAAP2klEQVR42uzdaXwURRoGcKsrJEAI i0G5A4RATEICaBQWMYiEXcGA4Y6yHIICcikKAlkuJYRICCLHLklmhMUgghwiiAguiC6IcsgRORRR dzlFFLwRE377wWRm+qjq7pnumeme5/mYeaeH6frT3dNVXXUTQRBGbsIuQIADAQ4EOBDgQIADAQ4E OBDgQIADAQ4EAQ4EOBDgQIADAQ4EOBDgQIADAQ4EOBAEOBDgQIADAQ4EOBDgQIADAQ4EOBDgQBDg QIADAQ4EOBDgQIADAQ4EOBDgQIADAQ4EAQ4EOBDgQIADAQ4EOBDgQIADAQ4EOBAEOBDgQIADAQ4E OBDgQIADAQ4EOBDgQBDgQIADAQ4EOBDgQIADAQ4EOBDgQIADAQ4EAQ4EOBDgQIADAQ4EOBDgQIAD AQ4EOBAEOBDgQIADAQ4EOBDgQIADAQ4EOBDgQBDgQIADAQ4EOHzP0uyH7klO6TSofiEIAIcohU+0 oRVpN8UBBMDhTuz91COZ/4QC4KhMo1QqSscCHqTJjw0Zk1MEHKGRxq2oJGmLWLUNe/5R0XZ8VeAI gcSnUVkylI8MCYPdJe1mAof98xBVyGilyvx7RDVjncBh88xUskGT5skrZ7eWFA0uBg5bJ6yLIg4a JavMSZYVPeQADjunHmUkRvWylVI6CjjsnO4sHDXFdYs7KFY9Bxz2TSzLBk2p5lnn6Klc1S4BOGyb p5k4aH3PultYVcOBw7Z5kI3jEY+yuBRWVVIccNg0VZLYODp61A1gl40ADpsmj3IS7yqL4VTdEQ4c 9kw2D0dDV9lAXlkD4LBnonmtPs31MzaJV/Yn4LBnhvJafUJl1TO8KpoOHPZMFq/VoyurunJxJBYB hy3Tl9fqlb9DFlN+CoDDlunPa/SbK4pmq+CYBxy2zEAtp5VsFRxNgcOWGcZr9Fsrip5UwbEIOGwZ brtPrygazbdxuwM4bJl6vFZvXFE0nI8jCj9l7ZmmvJ+oVSqKRvBxjAcOeyasNbvRa1QWRfNxzAGO 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 AAAASUVORK5CYII=' /> 可查看在线运行效果
1.2 alt 属性 当出现网络或者图片路径存在问题时，图片展示可能会出问题，这时网页中图片占位的地方会出现一张裂图，如果不做任何说明时，可能会影响用户体验。这时，如果在裂图上有一段文字说明的话，会适当的增加友好度，alt 属性就是图片加载失败时的替代文本，意思是当图片加载失败时使用 alt 定义的文本显示在图片当前的位置上，例如：
实例演示
< img src ="" alt ="这是一张测试图片" /> 1 1.3 align 定义图片的排列对齐方式，在 HTML5 中推荐使用 css 替代。
实例演示
< h2 > 设置对齐</ h2 > < p > 图像 < img src ="https://www.baidu.com/img/bd_logo1.png" align ="middle" border =1 > 在文本中</ p > < h2 > 未设置对齐</ h2 > < p > 图像 < img src ="https://www.baidu.com/img/bd_logo1.png" border =1 > 在文本中</ p > 1234 可查看在线运行效果
以上定义居中的方式可以使用 css 的方式实现相同的效果，例如：
实例演示
< p > 图像< img src ="https://www.baidu.com/img/bd_logo1.png" style ="vertical-align: middle;border:1px solid" > 在文本中</ p > 1 可查看在线运行效果
1.4 border 定义图片的边框，在 HTML5 中推荐使用 css 的 border 样式替代
实例演示
< img src ="https://www.baidu.com/img/bd_logo1.png" border ="2" /> 1 可查看在线运行效果
上述定义了一个 border 是 2 的图片，同样可以使用 css 的方式替代：
实例演示
< img src ="https://www.baidu.com/img/bd_logo1.png" style ="border:2px solid" /> 可查看在线运行效果 1.5 height 定义图片的高度，在 HTML5 中推荐使用 css 的 height 样式替代：
实例演示
< img src ="https://www.baidu.com/img/bd_logo1.png" width ="50" height ="50" > < br /> < img src ="https://www.baidu.com/img/bd_logo1.png" width ="100" height ="100" > 123 可查看在线运行效果
上述定义了一个 height 分别是 50 像素和 100 像素的图片，如果使用 CSS 定义的话，是这样的：
实例演示
< img src ="https://www.baidu.com/img/bd_logo1.png" style ="width:50px;height:50px;" > < br /> < img src ="https://www.baidu.com/img/bd_logo1.png" style ="width:100px;height:100px;" > 123 可查看在线运行效果
1.6 width 定义图片的宽度，在 HTML5 中推荐使用 CSS 替代。
1.7 ismap 属性定义图像为服务器端图片映射，就是定义图片中可以点击的区域，并且将对标发送到服务器，需要配合 a 标签使用。
实例演示
< a href ="http://www.baidu.com" > < img src ="https://www.baidu.com/img/bd_logo1.png" ismap /> </ a > 123 可查看在线运行效果
上述代码，当用户点击图片时，浏览器会将点击的坐标点以 x，y 作为参数，以 GET 的方式请求服务器，例如当用户点击图片的坐标点（8,8）时，服务器会受到一条 HTTP 请求 http://www.baidu.com?8,8，此坐标点是相对定位坐标点。
1.8 hspace 定义图片左右侧的空白，在 HTML5 中推荐使用 CSS 替代。
实例演示
< h3 > 带有 hspace 和 vspace 的图像：</ h3 > < p > < img border ="1" src ="https://www.baidu.com/img/bd_logo1.png" height =100 width =100 align ="middle" hspace ="30" vspace ="30" /> 这是并排的文字信息 </ p > 12345 可查看在线运行效果
1.9 vspace 定义图片上下区域的空白，在 HTML5 中推荐使用 CSS 替代。
1.10 longdesc 定义图片描述文档的 URL ，这个属性和 alt 类似，只不过可以描述更多的文字-超过 1024 字符，但是目前还没有浏览器支持这个属性。
1.11 usemap 定义图片在客户端的可点击区域，需要配合 map 和 area 标签使用。
实例演示
< img src ="https://wiki-code.oss-cn-beijing./html5/img/area.jpg" usemap ="#planetmap" /> < map name ="planetmap" > < area href ="https://pro.jd.com/mall/active/3ZYfZKGRAhbHzJySpRriJoGWo8v6/index.html?innerAnchor=46246884002&focus=3" shape ="rectangle" coords ="25,290,175,337" > </ map > 1234 可查看在线运行效果
2. css 定义背景图 可以结合 div 和 css 的 background-image 属性来定义背景图的方式显示一张图片，例如：
实例演示
< div style ="background-image: url('https://www.baidu.com/img/bd_logo1.png');width:500px;height:300px" ></ div > 1 可查看在线运行效果
上述代码的也可以实现一张图像效果。
3. 注意事项 由于 HTML 中的元素中，图片相对于别的文本类型的元素所占用的网络空间较大，所以图片加载可能会比较慢，而且 HTML 中的元素网络请求是同步进行的，所以当定义了一些较大的图片或者图片元素较多时，网页本身会出现卡顿的情况，所以针对图片的加载需要做出一些优化：
4. 小结 本章介绍了几种 HTML 定义图片的方式，以及图片的各种属性，最后介绍了几种加载优化方式。图片是HTML 中使用最频繁的多媒体标签，因此需要熟悉它的使用方式
HTML 表格 除了图像、多媒体这种丰富的交互效果之外，网页中还经常会用到通讯录、统计报表这种格式化的交互效果，这时候就用到了表格元素。
1. 创建一个简单的表格 网页中定义表格使用 table 标签，它是一个闭合标签，所有内容都放在 table 的起始标签和结束标签内。在表格中定义一行数据使用 tr 标签，表格的单元格内容放在 tr 标签内，单元格又分为表头 th 和表格单元格 td。基本表格结构如下。
实例演示
< table > < thead > < tr >< th > 助手函数</ th >< th > 描述</ th ></ tr > </ thead > < tbody > < tr >< td > abort</ td >< td > 中断执行并发送HTTP状态码</ td ></ tr > < tr >< td > action</ td >< td > 调用控制器类的操作</ td ></ tr > < tr >< td > app</ td >< td > 快速获取容器中的实例 支持依赖注入</ td ></ tr > </ tbody > </ table > 12345678910 可查看在线运行效果
代码解释：以上是 thinkPHP 手册中的关于助手函数的表格示例，其中包含了表头 thead 、内容 tbody、行元素 tr、表头单元格 th、表格单元格 td。
2. 相关的标签和属性介绍 2.1 table 标签 table 用于声明一个表格，它本身不显示任何内容，例如：
< table border ="1" ></ table > 代码块1 实例演示
< table border ="1" ></ table > <!--只显示一个像素点。--> 12 可查看在线运行效果
代码解释：上述定义了一个只有边框而没有内容的表格，由于没有任何内容，它在网页中只显示一个像素点。
2.1.1 bgcolor 属性 这个属性可以应用于表格的任意元素，用来定义元素的背景颜色，其内容可以用 rgb 值表示。实际项目中通常用于在表头设置背景，为了方便和单元格区分开来，例如：
实例演示
< table > < thead bgcolor ="#ccc" > < tr >< th > 助手函数</ th >< th > 描述</ th ></ tr > </ thead > < tbody > < tr >< td > abort</ td >< td > 中断执行并发送HTTP状态码</ td ></ tr > < tr >< td > action</ td >< td > 调用控制器类的操作</ td ></ tr > < tr >< td > app</ td >< td > 快速获取容器中的实例 支持依赖注入</ td ></ tr > </ tbody > </ table > 12345678910 可查看在线运行效果
代码解释：上述代码将表头单元格设置为灰色背景。HTML 中颜色值可以使用 3 种表示方式：
RGB；
16 进制；
英文代码（部分颜色可用） 例如：
< table bgcolor ="#FF0000" ></ table > <!--16进制表示法表示“纯红色”--> < table bgcolor ="rgb(255,0,0)" ></ table > <!--RGB表示法表示“纯红色”--> < table bgcolor ="Red" ></ table > <!--英文法表示“纯红色”--> 代码块123 实例演示
< table bgcolor ="#FF0000" > < thead > < tr >< th > 助手函数</ th >< th > 描述</ th ></ tr > </ thead > < tbody > < tr >< td > abort</ td >< td > 中断执行并发送HTTP状态码</ td ></ tr > < tr >< td > action</ td >< td > 调用控制器类的操作</ td ></ tr > < tr >< td > app</ td >< td > 快速获取容器中的实例 支持依赖注入</ td ></ tr > </ tbody > </ table > < table bgcolor ="rgb(255,0,0)" > < thead > < tr >< th > 助手函数</ th >< th > 描述</ th ></ tr > </ thead > < tbody > < tr >< td > abort</ td >< td > 中断执行并发送HTTP状态码</ td ></ tr > < tr >< td > action</ td >< td > 调用控制器类的操作</ td ></ tr > < tr >< td > app</ td >< td > 快速获取容器中的实例 支持依赖注入</ td ></ tr > </ tbody > </ table > < table bgcolor ="Red" > < thead > < tr >< th > 助手函数</ th >< th > 描述</ th ></ tr > </ thead > < tbody > < tr >< td > abort</ td >< td > 中断执行并发送HTTP状态码</ td ></ tr > < tr >< td > action</ td >< td > 调用控制器类的操作</ td ></ tr > < tr >< td > app</ td >< td > 快速获取容器中的实例 支持依赖注入</ td ></ tr > </ tbody > </ table > 1234567891011121314151617181920212223242526272829303132 可查看在线运行效果
注意，在实际项目中，这个属性建议使用 css 的方式替代。
2.1.2 align 属性 定义表格元素的对齐方式， 一般建议使用 css 替代 ，可选项有 left、center、right，例如：
实例演示
< table > < thead bgcolor ="#ccc" > < tr >< th > 助手函数</ th >< th > 描述</ th ></ tr > </ thead > < tbody > < tr >< td align ='center' > abort</ td >< td > 中断执行并发送HTTP状态码</ td ></ tr > < tr >< td align ='center' > action</ td >< td > 调用控制器类的操作</ td ></ tr > < tr >< td align ='center' > app</ td >< td > 快速获取容器中的实例 支持依赖注入</ td ></ tr > </ tbody > </ table > 12345678910 可查看在线运行效果
代码解释：上述代码中，将左边列设置为居中对齐。表格中的表头 th 元素默认是居中对齐，而单元格元素默认是靠左对齐（跟浏览器相关），所以实际项目中一般会将类别列设置为居中对齐，实际项目建议使用 css 的方式替代。
2.1.3 border 属性 表格默认是没有边框的，通过这个属性可以给表格设置边框，但是一般情况下使用 css 设置边框样式比较常见。
实例演示
< table border =3 > <!--设置3个像素的边框--> < thead bgcolor ="#ccc" > < tr >< th > 助手函数</ th >< th > 描述</ th ></ tr > </ thead > < tbody > < tr >< td align ='center' > abort</ td >< td > 中断执行并发送HTTP状态码</ td ></ tr > < tr >< td align ='center' > action</ td >< td > 调用控制器类的操作</ td ></ tr > < tr >< td align ='center' > app</ td >< td > 快速获取容器中的实例 支持依赖注入</ td ></ tr > </ tbody > </ table > 12345678910 可查看在线运行效果
代码解释：如果给 table 元素设置 border 属性，表格内部的单元格都会继承这个属性，但是如果 border 设置值超过 1 的话，单元格的边框还是只有 1，但是表格外部边框会显示 border 值对应的宽度；如果 border 设置 0 的话表示隐藏边框。
2.1.4 cellpadding 属性 通过这个属性可以设置单元格内容到边沿之间的空隙，这个值设置的越大则单元格越大，不设置的话默认是 2 个像素。如下，我们设置一个较大空隙的单元格：
实例演示
< table border =1 cellpadding =10 > <!--10个像素的内间隙--> < thead bgcolor ="#ccc" > < tr >< th > 助手函数</ th >< th > 描述</ th ></ tr > </ thead > < tbody > < tr >< td align ='center' > abort</ td >< td > 中断执行并发送HTTP状态码</ td ></ tr > < tr >< td align ='center' > action</ td >< td > 调用控制器类的操作</ td ></ tr > < tr >< td align ='center' > app</ td >< td > 快速获取容器中的实例 支持依赖注入</ td ></ tr > </ tbody > </ table > 12345678910 可查看在线运行效果
注意： 请勿将该属性与下面的 cellspacing 相混淆。
2.1.5 cellspacing 属性 与上个属性不同的是，cellspacing 指的是单元格与表格外边框之间的空隙 ，如果不设置的话默认是 2 个像素，设置为 0 表示没有空隙，例如：
实例演示
< table border =1 cellspacing =0 > <!--没有外间隙--> < thead bgcolor ="#ccc" > < tr >< th > 助手函数</ th >< th > 描述</ th ></ tr > </ thead > < tbody > < tr >< td align ='center' > abort</ td >< td > 中断执行并发送HTTP状态码</ td ></ tr > < tr >< td align ='center' > action</ td >< td > 调用控制器类的操作</ td ></ tr > < tr >< td align ='center' > app</ td >< td > 快速获取容器中的实例 支持依赖注入</ td ></ tr > </ tbody > </ table > < br /> < table border =1 cellspacing =10 > <!--间隙为10--> < thead bgcolor ="#ccc" > < tr >< th > 助手函数</ th >< th > 描述</ th ></ tr > </ thead > < tbody > < tr >< td align ='center' > abort</ td >< td > 中断执行并发送HTTP状态码</ td ></ tr > < tr >< td align ='center' > action</ td >< td > 调用控制器类的操作</ td ></ tr > < tr >< td align ='center' > app</ td >< td > 快速获取容器中的实例 支持依赖注入</ td ></ tr > </ tbody > </ table > 123456789101112131415161718192021 可查看在线运行效果
2.1.6 frame 属性 定义外侧哪个边框是可见的，实际项目中很少用到。
2.1.7 rules 属性 定义内侧边框哪个是可见的，实际项目中很少用到。
2.1.8 summary 属性 定义表格摘要。这个属性对表格的外观没有任何作用，相当于对表格做了一个备注，可能对搜索引擎有帮助，例如：
实例演示
< table summary ="这个表格用于演示" > < tr > < th > month</ th > < th > Savings</ th > </ tr > < tr > < td > January</ td > < td > $100</ td > </ tr > </ table > 可查看在线运行效果
2.2 th 标签 th 用于定义表头类型单元格，他和内容单元格的区别主要在于样式上，表头默认显示粗体居中的文本，例如：
实例演示
< table border =1 > < thead > < tr >< th > 助手函数</ th >< th > 描述</ th ></ tr > </ thead > < tbody > < tr >< td > abort</ td >< td > 中断执行并发送HTTP状态码</ td ></ tr > < tr >< td > action</ td >< td > 调用控制器类的操作</ td ></ tr > < tr >< td > app</ td >< td > 快速获取容器中的实例 支持依赖注入</ td ></ tr > </ tbody > </ table > 可查看在线运行效果
2.2.1 colspan 属性 colspan 设置单元格横跨的列数，这个属性相当于 Word 表格的合并单元格，例如：
实例演示
< table border =1 > < thead > < tr >< th colspan =2 > thinkPHP</ th ></ tr > <!--定义一个横跨2列的单元格表头--> < tr >< th > 助手函数</ th >< th > 描述</ th ></ tr > </ thead > < tbody > < tr >< td > abort</ td >< td > 中断执行并发送HTTP状态码</ td ></ tr > < tr >< td > action</ td >< td > 调用控制器类的操作</ td ></ tr > < tr >< td > app</ td >< td > 快速获取容器中的实例 支持依赖注入</ td ></ tr > </ tbody > </ table > 可查看在线运行效果
注意： 如果 colspan 的值超过当前单元格列数的话，默认只能横跨最大列数。
2.2.2 rowspan 属性 与上述属性类似，这个是用于横跨单元行，例如：
实例演示
< table border =1 > < thead > < tr >< th ></ th >< th > 助手函数</ th >< th > 描述</ th ></ tr > </ thead > < tbody > < tr >< td rowspan =3 > 函数类别</ td >< td > abort</ td >< td > 中断执行并发送HTTP状态码</ td ></ tr > < tr >< td > action</ td >< td > 调用控制器类的操作</ td ></ tr > < tr >< td > app</ td >< td > 快速获取容器中的实例 支持依赖注入</ td ></ tr > </ tbody > </ table > 可查看在线运行效果
2.2.3 valign 属性 这个属性用于设置单元格内的内容在垂直方向的对齐方式，目前支持上对齐、下对齐、居中对齐、文字基线对齐。
2.3 tr 标签 tr 用于定义表格中的行，行内可以包含表头单元格 th 或者数据单元格 td, tr 标签表示一行，当中的内容可以是 th 或者 td，tr 标签支持所有的浏览器。
2.4 td 标签 表格中有两种类型的单元格，一种是上边介绍的表头单元格 th，一种是内容单元格 td。和 th 不同的是 td 的内容默认显示正常字体，使用左对齐方式。td 支持的属性基本上和 th 一致。td 必须包含在 tr 标签中才能生效。
2.5 非必须标签 除了表格、行、单元格之外，表格还有一些其他的标签可使用。这些标签是非必须的，但是可以增强表格的内容丰富度和视觉效果。
2.5.1 thead tbody tfoot 标签 thead 用于定义表格的表头，同样命名为表头，它和 th 表头单元格有本质的区别。
thead 实质上是用于对表格的内容进行分组，用于告诉开发者或者搜索引擎表格的哪部分是头，哪部分是内容，哪部分是尾部。所以说 thead 需要和 tbody 、tfoot 结合使用才有效果，正常情况下定义 thead 不会影响到表格的样式和布局，除非你强制定义 thead 的 css 样式。
目前主流的浏览器大都支持 thead、tbody、tfoot 标签，例如：
实例演示
< table border =1 > < thead > < tr > < th > Title</ th > < th > ID</ th > < th > Country</ th > < th > Price</ th > < th > Download</ th > </ tr > </ thead > < tbody > < tr > < th > Tom</ th > < td > 1213456</ td > < td > Germany</ td > < td > $3.12</ td > < td > Download</ td > </ tr > </ tbody > < tfoot > < tr > < th > Total</ th > < td colspan ="4" > 4 books</ td > </ tr > </ tfoot > </ table > 1234567891011121314151617181920212223242526 可查看在线运行效果
2.5.2 col 和 colgroup 标签 col 标签用来为表格中的列统一设置属性值，使用它主要用来节省代码量。它是一个单标签，无需结束标签，colgroup 标签是 col 的升级版，不同于 col 的是 colgroup 主要以组合的方式对列设置属性样式，而且 col 可以嵌入到 colgroup 内部进行细化的设置。
实例演示
< table width ="100%" > < col align ="center" /> < tr > < th > title</ th > < th > title</ th > < th > title</ th > </ tr > < tr > < td > css</ td > < td > HTML</ td > < td > JavaScript</ td > </ tr > </ table > 12345678910111213 可查看在线运行效果
例如以上代码使用 col 对列进行居中设置，由于 colgroup 和 col 这两个标签存在严重的浏览器兼容问题，如上图所示，在 Chrome、FireFox、Safari和 ie8+ 等浏览器中不再支持 COL 及 COLGROUP 元素的部分属性，所以建议最好不要使用。
2.5.3 caption 标签 caption 用于定义表格的标题。每个表格只能声明一个标题，默认显示在表格的正上方，仅仅起到一个展示的作用，实际上跟 table 关联不大，完全可以用一个文本类型的标签元素替代:
实例演示
< table border =1 > < caption > 系统为一些常用的操作方法封装了助手函数，便于使用，包含如下：</ caption > < thead > < tr >< th > 助手函数</ th >< th > 描述</ th ></ tr > </ thead > < tbody > < tr >< td > abort</ td >< td > 中断执行并发送HTTP状态码</ td ></ tr > < tr >< td > action</ td >< td > 调用控制器类的操作</ td ></ tr > < tr >< td > app</ td >< td > 快速获取容器中的实例 支持依赖注入</ td ></ tr > </ tbody > </ table > 1234567891011 可查看在线运行效果
上述代码展示效果
3. 表格插件 实际项目开发中并非仅仅是单纯的展示一个表格，有可能需要动态的插入单元格数据、动态的删除行或者列、数据分页、异步加载、或者是动态的修改表格的内容等等的操作，以上这些操作需要通过 JavaScript 去操作进行。项目开发中崇尚对高度相同操作的函数进行封装打包，这也是面向对象的精髓（虽然 JavaScript 不是面向对象语言）。我们可以手动封装一个对 table 表格进行操作的类，也可以使用现成的表格插件，现在介绍一个 表格插件 layui-table ：
实例演示
< html > < head > < link rel ="stylesheet" href ="https://www./layui-v2.5.4/css/layui.css" media ="all" > <!--引用css文件--> < script src ="https://www./layui-v2.5.4/layui.js" ></ script > <!--引用JavaScript文件--> </ head > < body > < table id ="demo" lay-filter ="test" ></ table > <!--定义表格容器--> < script > layui .use ('table' , function (){//初始化表格控件 var table = layui .table ; table .render ({//渲染表格 elem : '#demo' //表格容器的ID ,height : 312 //生成的表格的高度 ,url : '/demo/table/user/' //数据接口 ,page : true //开启分页 ,cols : [[ //表头设置 {field : 'id' , title : 'ID' , width :80 , sort : true , fixed : 'left' } ,{field : 'username' , title : '用户名' , width :80 } ,{field : 'sex' , title : '性别' , width :80 , sort : true } ,{field : 'city' , title : '城市' , width :80 } ,{field : 'sign' , title : '签名' , width : 177 } ,{field : 'experience' , title : '积分' , width : 80 , sort : true } ,{field : 'score' , title : '评分' , width : 80 , sort : true } ,{field : 'classify' , title : '职业' , width : 80 } ,{field : 'wealth' , title : '财富' , width : 135 , sort : true } ]] }); }); </ script > </ body > </ html > 可查看在线运行效果
4. 小结 本章介绍了 HTML 中用途较多的表格元素，表格的大部分属性跟 Word 中的表格类似，除了 table 、td 、th、tr 这几个标签之外，其他的标签大都是用于分组或者设置属性，不参与视觉样式的表现，而且在HTML5 中 css 的功能已经非常强大和完善了，所以几乎无需使用 HTML 中的样式设置方式，总的来说基本上只需要掌握上述的几种标签即可。
HTML 多媒体 本章介绍 HTML 中的多媒体。多媒体是计算机中用于人机进行实时交互的媒介和互动方式，其中包括图片、文字、音频、视频、动画等。之前的章节已经介绍了图片和文本元素，本章主要介绍音频和视频相关的元素
1. object object 元素用于定义一个网页插件，使用该元素可以在网页中嵌入多媒体，支持的插件类型有图形、音频、视频、java applets、ActiveX、PDF、flash。不过在 HTML5 标准之前，主流浏览器中只有 IE3.0 之后的版本支持
实例演示
< object classid ="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id ="Slider1" width ="100" height ="50" > < param name ="BorderStyle" value ="1" /> < param name ="MousePointer" value ="0" /> < param name ="Enabled" value ="1" /> < param name ="Min" value ="0" /> < param name ="Max" value ="10" /> </ object > 可查看在线运行效果
虽然 object 标签的出现是用于取代 HTML 中的多媒体相关的标签，但是由于目前只有 IE 浏览器兼容性较好，所以未能实现初衷。虽然在手册或者文献中未能找到其他浏览器不兼容的原因，但是作者猜想是因为一方面 object 的属性太多导致入门门槛较高，一方面互联网朝向细分化方向发展而技术也在细分化，所以这种大一统的技术解决方案不太受主流大厂的接受，进而导致各大浏览器厂商认可度不高（具体原因以官方手册为准）。虽然兼容性不好，但是在 IE 低版本中 object 使用频率不低，主要用于 flash
1.1 archive 属性 定义对象相关的档案文件的 URL 列表
1.2 classid 属性 定义嵌入网页的插件的自身的 id 值，这个值可以是 flash 的对象id或者 Java 的类的classid
实例演示
< object classid ="clock.class" ></ object > 1 可查看在线运行效果
浏览器根据这个 classid 可以找到插件的源代码
1.3 codebase 属性 这是一个可选的属性，定义一个 URL 指向 classid 属性所引用的对象的代码
实例演示
< object classid ="clock.class" codebase ="http://www.baidu.com/classes/" > </ object > 12 可查看在线运行效果
codebase 相当于 源代码的域名，根据 codebase+classID 浏览器可以准确定位插件的源代码。
1.4 codetype 属性 类似于 type 属性，用来标识 object/applet 插件的 mime 类型。
实例演示
< object codebase ="clock.class" codetype ="application/java" > </ object > 12 可查看在线运行效果
上述代码定义了一个 Java 类型的插件。
1.5 data 属性 用于指定用于对象处理的 URL，该属性和 classID 类似，只不过是当 object 用于定义一个 多媒体（例如图片）格式的时候，data 用于表示图片的源路径，等价于 img 标签的 src 属性，不同的是 img 标签的 src 属性只能用于图像类型，data 则可用于几乎任意的多媒体文件类型。
实例演示
< object codebase ="clock.class" codetype ="application/jpeg" data ='' > </ object > 12 可查看在线运行效果
1.6 declare 属性 通常用于当 object 插件是 flash 或者 applet 时，定义插件编程语言的前置声明，不参与展示效果。
1.7 form 属性 定义 object 元素对应的表单的id，目前没有主流浏览器支持 form 属性。
1.8 standby 属性 定义当 object 在加载的过程中，浏览器的 object 位置上显示的文本，此属性类似于 img 标签中的 alt 属性。
1.9 height width 属性 定义插件的高度和宽度。
1.10 hspace vspace 属性 定义插件的周围的空白。
2. embed 这个标签的作用基本上和 object 相似，都是用来嵌入插件，不同的是 object 只有 IE 内核的浏览器支持比较完善，而非IE内核的浏览器则对 embed 支持度较高。embed 可以嵌入到 object 标签内，当浏览器不支持 object 时会自动加载 object 内的元素来渲染。
实例演示
< embed src ="helloworld.swf" /> <!-- 定义一个flash --> 1 可查看在线运行效果
3. param 该标签用于为 object 插件定义运行时参数，控制插件的运行方式。
实例演示
< object classid ="clsid:F08DF954-8592-11D1-B16A-00C0F0283628" id ="test" > < param name ="BorderStyle" value ="1" /> < param name ="MousePointer" value ="0" /> < param name ="Enabled" value ="1" /> < param name ="Min" value ="0" /> < param name ="Max" value ="10" /> </ object > 可查看在线运行效果
上述定义的每个 param 相当于一个插件的控制参数，name 对应参数的名称，value 对应参数的值，根据具体的插件的不同而不同。
4. audio audio 是 HTML5 中的新标签，用于播放音频流，格式如下：
实例演示
< audio src ="test.wav" > 您的浏览器不支持 audio 标签。<!-- 定义浏览器不支持该标签时所展示的内容--> </ audio > 123 可查看在线运行效果
上述代码相当于在浏览器中定义了一个播放器，展示效果如下
4.1 autoplay属性 当定义了该属性时，音频会立即播放。
4.2 controls属性 该属性用于定义是否向用户展示播放按钮，如果未定义这个属性，则浏览器默认不显示任何播放器的控件（播放、音量、进度等）。控件可以通过 audio 提供的事件，通过 div+css+JavaScript 自定义实现。
4.3 loop属性 该属性定义时，表示音频是否会重复循环播放。
4.4 muted属性 当该属性被定义是，音频默认播放时是以静音方式播放。
4.5 preload属性 该属性定义音频加载的方式，有3个可选值（auto 自动加载 meta 只加载元数据 none 手动加载）。当设置了 autoplay 时，该属性不生效。
4.6 src属性 定义音频的 URL。
5. source 该标签用于定义音频/视频播放器的源文件，为了兼容不同的浏览器对不同的音频类型的支持，例如：
实例演示
< audio > < source src ="test.ogg" type ="audio/ogg" > <!-- 定义Ogg类型的音频 --> < source src ="test.mp3" type ="audio/mpeg" > <!-- 定义MP3类型的音频--> </ audio > 1234 可查看在线运行效果
上述音频播放器，放到不支持 Ogg 文件的浏览器时，会自动加载 MP3 文件。
6. video 这个标签用于定义视频播放器，大部分属性和 audio 类似，是 HTML5 中新增的标签。
实例演示
< video src ="/i/movie.ogg" controls ="controls" > your browser does not support the video tag </ video > 123 可查看在线运行效果
视觉效果如下
7. 兼容性 HTML中定义多媒体元素不是很复杂，但是难点在于各种浏览器的兼容性问题，例如：
8. 小结 本章介绍了多媒体技术在 HTML4 和 HTML5 中的使用方式，以及在不同的浏览器中的兼容性问题
HTML 结构化元素标签 网页是由一个一个的区域组成，就像房子中的房间一样，每个区域内可以放置 HTML 元素，然后可以对区域设置样式从而将其与别的区域区分开来。这个区域在 HTML 中由结构元素实现，又可以将其称之为容器元素。通过搭配 ID 属性使用，结构元素将会帮助我们构建结构化条理分明的网站逻辑。本章我们介绍一下 结构元素的使用方式和场景。
1. div 1.1 适用场景 div 元素在 HTML 中用于定义一个区块，用于对区块内的元素统一布局或者隔离，它本身并不呈现视觉样式，也没有明确的语义，可适用于没有明确语义化的场景，例如：
实例演示
< div class ="AppHeader-inner" > < ul role ="navigation" class ="Tabs AppHeader-Tabs" > < li role ="tab" class ="Tabs-item AppHeader-Tab Tabs-item--noMeta" > < a class ="Tabs-link AppHeader-TabsLink is-active" href ="//www.zhihu.com/" data-za-not-track-link ="true" > 首页</ a > </ li > < li role ="tab" class ="Tabs-item AppHeader-Tab Tabs-item--noMeta" > < a class ="Tabs-link AppHeader-TabsLink" href ="//www.zhihu.com/explore" data-za-not-track-link ="true" > 发现</ a > </ li > < li role ="tab" class ="Tabs-item AppHeader-Tab Tabs-item--noMeta" > < a class ="Tabs-link AppHeader-TabsLink" href ="//www.zhihu.com/question/waiting" data-za-not-track-link ="true" > 等你来答</ a > </ li > </ ul > </ div > 可查看在线运行效果
代码解释：上述代码将网页头部使用 div 区块定义，这样定义的好处在于，一旦网页需要隐藏头部，或者给头部设置一个特殊的样式（例如颜色、字体）只需要通过 JavaScript 或者 css 操控 div 即可。 这样对 div 设置文字颜色，div 中包含的元素统一生效。div 内部可以包含任意元素，理论上可以配合 css 模拟成任何样式的元素， 所以在 HTML5 之后原本跟样式相关的元素属性基本上不建议使用了，都可以用 css 替代。
1.2 避免滥用 div div 作为一个没有特殊意义的标签，相比其它有明确用途的标签，它没有特殊属性，也没有特殊效果，实在想不出还没有什么可以掌握的。但这并不妨碍 div 被滥用。一个标签什么时候应该使用，是由这个标签本身的语义，以及使用者想要表现的内容决定的。
div 没有具体的语义 div 的语义是 division，一个很广泛的语义，在使用 div 之前应该先想想，还有没有更具语义的标签，尽量使用语义明确的标签。比如用 div 来标记文段（p）和列表（li）显然是不合适的。
事实上，为了更好地使用 div，你需要全面了解 HTML 标准提供了哪些标签，它们的语义是什么。如果你不知道 p、span、h1、h2、h3 的存在，只会用 div，必定写出糟糕的 HTML 代码。
实例演示
< div class ="container" id ="header" > < div class ="header header-main" ></ div > < div class ="site-navigation" > < a href ="/" > Home</ a > < a href ="/about" > About</ a > < a href ="/archive" > Archive</ a > </ div > </ div > < div class ="container" id ="main" > < div class ="article-header-level-1" > </ div > < div class ="article-content" > < div class ="article-section" > < div class ="article-header-level-2" > </ div > </ div > < div class ="article-section" > < div class ="article-header-level-2" > </ div > </ div > </ div > </ div > < div class ="container" id ="footer" > < div class ="contact-info" > < p class ="email" > < a href ="mailto:us@example.com" ></ a > </ p > < div class ="street-address" > </ div > </ div > </ div > 123456789101112131415161718192021222324252627 可查看在线运行效果
代码解释：例如上述代码，完全使用 div 来定义网页区域，这样做虽然可以实现对应的效果，但是对于搜索引擎、爬虫，甚至网站维护人员来说是一个糟糕的代码，因为搜索引擎识别不出哪部分是头部哪部分是尾部。
实例演示
< header > < h1 > Super duper best blog ever</ h1 > < nav > < a href ="/" > Home</ a > < a href ="/about" > About</ a > < a href ="/archive" > Archive</ a > </ nav > </ header > < main > < article > < header > < h1 > Why you should buy more cheeses than you currently do</ h1 > </ header > < section > < header > < h2 > Part 1: Variety is spicy</ h2 > </ header > <!-- cheesy content --> </ section > < section > < header > < h2 > Part 2: Cows are great</ h2 > </ header > <!-- more cheesy content --> </ section > </ article > </ main > < footer > < section class ="contact" vocab ="http:///" typeof ="LocalBusiness" > < h2 > Contact us!</ h2 > < address property ="email" > < a href ="mailto:us@example.com" ></ a > </ address > < address property ="address" typeof ="PostalAddress" > < p property ="streetAddress" ></ p > < p property ="addressCountry" ></ p > </ address > </ section > </ footer > 123456789101112131415161718192021222324252627282930313233343536373839 可查看在线运行效果
代码解释：这段代码使用 header 、nav、footer、section 等标签，详细且准确的根据语义化来定义网页的布局。
2. 其他语义化相关机构元素 2.1 span 和 div 的作用类似，span 是通常用来作为文本容器，它没有明确定义的语义，在没有其他合适的元素标签时，可以用 span 来包含文本，它是一个行内元素。例如：
实例演示
< p >< span > 一些文字</ span ></ p > <!-- 定义一个段落 --> 1 可查看在线运行效果
2.2 header header 元素通常用于包含头部介绍性相关的元素，是 HTML5 中新增元素。它可以使用全局属性。一个网页中可以使用多个 header 元素，也可以在每个独立的内容机构中使用 header 元素，例如：
实例演示
< header > < h1 > 网站标题</ h1 > < img src ="logo-sm.png" alt ="logo" > </ header > 1234 可查看在线运行效果
注意： header 是 HTML5 新增的元素，可能不兼容低版本的 IE 浏览器
2.3 nav nav 是 Navigation 的简称，通常用于网页中的导航栏，使用 nav 将网页中导航栏相关的标签归拢在一个区域，这样结构更清晰明了，例如：
实例演示
< nav > <!-- 定义一个导航栏 --> < ul > < li >< a href ="#" > 首页</ a ></ li > < li >< a href ="#" > 新闻资讯</ a ></ li > < li >< a href ="#" > 常见问题</ a ></ li > < li >< a href ="#" > 更新日志</ a ></ li > < li >< a href ="#" > 论坛</ a ></ li > </ ul > </ nav > 123456789 可查看在线运行效果
注意： nav 是 HTML5 新增的元素，可能不兼容低版本的 IE 浏览器
2.4 article article 用于定义网页中文档、章节、段落相关的文本结构，一个网页中可以定义多个 article 标签。与 span 不同的是，article 具有明确定义的语义。每个 article 中通常包含 header、H1-H6、address 等和文章标题、作者等相关信息的标签。
实例演示
< article > <!-- 定义一篇文章 --> < header > < h1 > article元素使用方法</ h1 > < p > 发表日期：< time pubdate ="pubdate" > 2017/2/9</ time ></ p > </ header > < p > 此标签里显示的是article整个文章的主要内容</ p > </ article > 1234567 可查看在线运行效果
注意： article 是 HTML5 新增的元素，可能不兼容低版本的 IE 浏览器。
2.5 aside aside 元素用来定义当前页面或者文章的复数信息部分，它主要包含相关的引用、侧边栏、广告、导航条等其他类似的有别于主要内容的部分，通常结合 article 标签使用。
2.6 section section 元素用于对网页中的内容分块，与 div 不同的是它具有明确的分块语义，但是 HTML 没有对它定义更加细化的语义，所以说如果适用场景有比较明确的语义场景的话应该使用更加符合条件的标签，例如 nav、article、header 等。如果需要对块使用自定义的样式，请尽量使用 div 标签。使用 section 通常用于将一块内容细分成多个小块区域，例如：
实例演示
< article > < h1 > 编程语言</ h1 > < p > 编程语言常用的有 asp,asp.net,php,jsp </ p > < section > < h2 > asp</ h2 > < p > asp全称Active Server Page</ p > </ section > < section > < h2 > asp.net</ h2 > < p > asp升级版</ p > </ section > < section > < h2 > php</ h2 > < p > 简单、入门门槛低</ p > </ section > </ article > 12345678910111213141516 可查看在线运行效果
注意： section 是 HTML5 新增的元素，可能不兼容低版本的 IE 浏览器。
2.7 footer footer 元素用于定义网页的页尾，与 header 元素类似，除了可以定义网页的页尾，还可以用于 article 元素的尾部，例如：
实例演示
< article > < header > 文章目录</ header > < p > 文章内容</ p > < footer > 文章信息 </ footer > </ article > < footer > 页面底部 </ footer > 123456 可查看在线运行效果
注意： footer 是 HTML5 新增的元素，可能不兼容低版本的 IE 浏览器。
3. 小结 本章介绍 HTML 中特殊的标签-结构化标签，由于结构化标签在默认状态下不能呈现相关的视觉样式，所以通常不太起眼，但是想要写出一个结构分明、易扩展、易维护的网页代码，它是必不可少的。
HTML 表单 大部分情况下，网页中展示的数据或者图片或者多媒体效果都是静态的数据，但是有时用户需要通过网页跟服务器进行动态的数据交互，例如登录、注册等操作，这时需要用到表单。表单其实是由一些输入框、单选、复选框等元素组成，用户点击提交按钮，浏览器会将这些数据发送给表单设置的 URL ，URL 对应的服务器接收到数据并处理之后，再将数据返回给浏览器。
1. form form 是一个表单容器，其中包含需要提交的数据，和相应的提交按钮，例如：
实例演示
< form action ="/user/login" method ="post" > < h3 > 登录</ h3 > < div > < label for ="user_name" > 用户名</ label > < input id ="user_name" name ="user_name" > <!-- 用户名表单 --> </ div > < div > < label for ="password" > 密码</ label > < input id ="password" name ="password" type ="password" > <!--密码表单--> </ div > < div > < button type ='submit' > 登录</ button > </ div > </ form > 1234567891011121314 可查看在线运行效果
代码解释：当用户点击登录按钮时，使用 post 方式把用户输入的用户名和密码这两项数据提交到，网站服务器的 /user/login 页面下，这时 /user/login 页面的程序会对用户提交过来的用户名和密码与服务器的数据库中用户注册时填写的用户名和密码进行比对，如果相同就登陆成功。
form 标签有很多的属性，下面分别来介绍。
1.1 accept-charset 属性 accept-charset 属性用于设定使用哪种字符集处理表单数据，常用值 utf-8、ISO-8859-1、GB2312 等。其中 utf-8、ISO-8859-1、GB2312 分别表示 Unicode 编码、拉丁字母字符编码、简体中文字符编码，如果需要使用多个字符编码，则需要使用逗号隔开。如果没有设置 accept-charset 属性，则默认使用与 HTML 文档一致的编码。
实例演示
< form accept-charset ='utf-8' > <!--使用Unicode编码--> </ form > < form accept-charset ='ISO-8859-1' > <!--使用拉丁编码--> </ form > < form accept-charset ="utf-8,ISO-8859-1" > <!--同时支持两种编码--> </ form > 123456 可查看在线运行效果
1.2 action 属性 用于设定表单提交的服务器的 URL，可以是相对路径和绝对路径。例如设置：
实例演示
< form action ="https://www.baidu.com" method ="post" > < h3 > 登录</ h3 > < div > < label for ="user_name" > 用户名</ label > < input id ="user_name" name ="user_name" > <!-- 用户名表单 --> </ div > < div > < label for ="password" > 密码</ label > < input id ="password" name ="password" type ="password" > <!--密码表单--> </ div > < div > < button type ='submit' > 登录</ button > </ div > </ form > 1234567891011121314 可查看在线运行效果
代码解释：上述代码使用 post 方式向百度首页提交数据。
1.3 autocomplete 属性 用于设定是否启用自动完成功能，这个功能类似于历史记录的功能，之前提交过的表单下次在此输入时，浏览器会记录下来历史记录，可用值 on/off。
实例演示
< form autocomplete ='on' > <!--默认开启自动完成--> < h2 > 开启自动完成</ h2 > 用户名:< input type ="text" name ="fname" >< br > 邮箱: < input type ="email" name ="email" >< br > </ form > < form autocomplete ='off' > <!--关闭自动完成--> < h2 > 关闭自动完成</ h2 > 用户名:< input type ="text" name ="fname" >< br > 邮箱: < input type ="email" name ="email" >< br > </ form > 1234567891011 可查看在线运行效果
注意：除了 Opera 其他主流浏览器都支持 autocomplete。
1.4 enctype 属性 enctype 用于定义表单数据提交到服务器的过程中如何对数据进行编码，可选值有：
第一种：application/x-www-form-urlencoded
默认方式是第一种 application/x-www-form-urlencoded，当使用 form 表单提交数据时，需要对数据进行编码，因为 URL 的数据是通过 ?key=value&key=value& 的方式传输给服务器，这其中有一些作为功能性质的特殊字符例如 & ? =，如果数据中带有这些字符而且未进行编码的话，可能会导致传输数据发生错误，例如原本是 ?key=value ，如果 value 是 123&456 的话，那么 结果服务器中接收到的 value 值变成 123，且多出一个 key=456，这种编码方式叫做 URI 百分号编码，其标准收录在 RFC3986 中。 当设置成 multipart/form-data 时，浏览器不对字符进行编码，这种编码方式通常适用于上传文件。
默认方式是第一种 application/x-www-form-urlencoded，对数据进行编码。
为什么要对提交的数据进行编呢？
当使用 form 表单提交数据时，需要对数据进行编码，因为 URL 的数据是通过 ?key=value&key=value& 的方式传输给服务器，这其中有一些作为功能性质的特殊字符例如 & ? =，如果数据中带有这些字符而且未进行编码的话，可能会导致传输数据发生错误，例如原本是 ?key=value ，如果 value 是 123&456 的话，那么 结果服务器中接收到的 value 值变成123，且多出一个 key=456，这种编码方式叫做 URL 百分号编码，其标准收录在 RFC3986 中。
第二种：multipart/form-data
当设置成 multipart/form-data 时，浏览器不对字符进行编码，这种编码方式通常适用于上传文件；
第三种：text/plain
使用第三种方式 text/plain 时，浏览器将请求参数放入 body 作为字符串处理，这种方式用于传输原生的 HTTP 报文，不适用任何格式化处理。
1.5 method 属性 使用表单提交数据时，实际上只发送一个 HTTP 协议的数据请求，HTTP 协议有很多种数据请求方式，这个 method 属性用于设定 HTTP 请求的方式。常用的方式有 post、get，当未设置时默认使用 get 方式。除了常用方式之外，根据服务器 HTTP 网关的设置，还可以支持：
1.6 novalidate 属性 当设置时，表单不会验证输入，否则的话当点击提交按钮时，浏览器会根据表单输入框的类型来验证输入内容是否合法，例如：
实例演示
< form action ="" method ="post" novalidate > <!--提交时不验证--> < h2 > 提交时不验证</ h2 > < h3 > 登录</ h3 > < div > < label for ="user_name" > 用户名</ label > < input id ="user_name" name ="user_name" autofocus ="" required ="" > <!-- 用户名表单 --> </ div > < div > < label for ="password" > 密码</ label > < input id ="password" name ="password" type ="password" autocomplete ="off" value ="" required ="" > <!--密码表单--> </ div > < div > < button type ='submit' > 登录</ button > </ div > </ form > < form action ="" method ="post" > <!--提交时验证--> < h2 > 提交时验证</ h2 > < h3 > 登录</ h3 > < div > < label for ="user_name" > 用户名</ label > < input id ="user_name" name ="user_name" autofocus ="" required ="" > <!-- 用户名表单 --> </ div > < div > < label for ="password" > 密码</ label > < input id ="password" name ="password" type ="password" autocomplete ="off" value ="" required ="" > <!--密码表单--> </ div > < div > < button type ='submit' > 登录</ button > </ div > </ form > 12345678910111213141516171819202122232425262728293031 可查看在线运行效果
上述代码，当点击登陆按钮时，浏览器会验证用户名是否输入，密码是否输入，未输入的话浏览器会提示，并且提交不成功。novalidate 属性适用于：form，以及以下类型的 标签：text, search, url, telephone, email, password, date pickers, range 以及 color，复杂的规则需要结合 required 属性验证。
1.7 target 属性 这个属性用户设置表单提交之后浏览器的跳转地址，默认是在当前页面打开新地址，可选值有：
_blank 新窗口；
_self 默认，当前窗口；
_parent 父窗口；
_top 最顶层窗口；
_framename 指定的框架
例如：
实例演示
< form action ="https://www.baidu.com" method ="post" target ="_blank" > < h2 > 表单提交后跳转到新窗口</ h2 > < h3 > 登录 </ h3 > < div > < label for ="user_name" > 用户名</ label > < input id ="user_name" name ="user_name" autofocus ="" required ="" > <!-- 用户名表单 --> </ div > < div > < label for ="password" > 密码</ label > < input id ="password" name ="password" type ="password" autocomplete ="off" value ="" required ="" > <!--密码表单--> </ div > < div > < button type ='submit' > 登录</ button > </ div > </ form > 123456789101112131415 可查看在线运行效果
上述代码会在提交完数据之后，在一个新的浏览器界面中打开百度的首页。
2. input 表单内的标签，用于记录用户输入信息，可以是文本框、复选框、单选框、日期、数字、日期、按钮、文件、密码、隐藏域等等。
2.1 文本框 文本框是表单中最常见的表单控件，没有设置样式的话，默认是一个长方形的输入框，获取焦点时外边框变蓝色，当设置 type=text 就定义了一个文本框，例如：
实例演示
< form action ="https://www.baidu.com" method ="post" target ="_blank" > < h3 > 登录 </ h3 > < div > < label for ="user_name" > 用户名</ label > < input id ="user_name" type ='text' name ="user_name" autofocus ="" required ="" > <!-- 用户名表单 --> </ div > < div > < button type ='submit' > 登录</ button > </ div > </ form > 12345678910 可查看在线运行效果
2.2 复选框 复选框用于对多个选项进行复合选择，网站开发中让用户选择兴趣爱好、技能标签等可以使用复选框，使用 type=checkbox 定义复选框：
实例演示
< div class ="div_title_question_all" > < div id ="divTitle5" class ="div_title_question" > 从未使用网约车的原因是：< span class ="qtypetip" > 【多选题】</ span ></ div > </ div > < div class ="div_table_radio_question" id ="divquestion5" > < ul class ="ulradiocheck" style ='list-style-type:none' > < li style ="width:99%;" >< input id ="q5_1" type ="checkbox" name ="q5" value ="不熟悉叫车程序" >< label > 不熟悉叫车程序</ label ></ li > < li style ="width:99%;" >< input id ="q5_2" type ="checkbox" name ="q5" value ="习惯小汽车出行" >< label > 习惯小汽车出行</ label ></ li > < li style ="width: 99%;" >< input id ="q5_3" type ="checkbox" name ="q5" value ="周边公共交通服务便利" >< label > 周边公共交通服务便利</ label ></ li > < li style ="width: 99%;" >< input id ="q5_4" type ="checkbox" name ="q5" value ="出租车服务便利" >< label > 出租车服务便利</ label ></ li > < li style ="width: 99%;" >< input id ="q5_5" type ="checkbox" name ="q5" value ="担忧网约车安全性" >< label > 担忧网约车安全性</ label ></ li > < li style ="width: 99%;" >< input id ="q5_5" type ="checkbox" name ="q5" value ="担忧网约车安全性" >< label > 担忧网约车安全性</ label ></ li > < li style ="width: 99%;" >< button onclick ='formSubmit()' > 结果</ button ></ li > </ ul > </ div > < script > function formSubmit () {//点击按钮获取复选框结果 var obj = document .getElementsByName ("q5" ); var check_arr = []; for (var i = 0 ; i < obj .length ; i ++ ) { if (obj [i ].checked ) check_arr .push (obj [i ].value ); } alert ("您的选项是：" + check_arr ); } </ script > 可查看在线运行效果
上述代码示例中当用户点击结果按钮时，使用 JavaScript 获取已选中的复选框的 value 值，并打印结果。
2.3 单选框 和复选框比较类似，单选框也是用来作为选项的，不同的是单选框只能选择一个，但是是在一个单选框组内才行，同一个组的 name 值必须相同，定义单选框的方式是设置 type=radio：
实例演示
< div class ="div_title_question_all" > < div id ="divTitle2" class ="div_title_question" > 您的年龄段：< span class ="req" > *</ span ></ div > </ div > < div class ="div_table_radio_question" id ="divquestion2" > < ul class ="ulradiocheck" style =" list-style-type:none" > < li style ="width: 19%;" >< input type ="radio" name ="q2" id ="q2_1" value ="1" >< label for ="q2_1" > 18岁以下</ label ></ li > < li style ="width:19%;" >< input type ="radio" name ="q2" id ="q2_2" value ="2" >< label for ="q2_2" > 18~25</ label ></ li > < li style ="width:19%;" >< input type ="radio" name ="q2" id ="q2_3" value ="3" >< label for ="q2_3" > 26~30</ label ></ li > < li style ="width:19%;" >< input type ="radio" name ="q2" id ="q2_4" value ="4" >< label for ="q2_4" > 31~35</ label ></ li > < li style ="width:19%;" >< input type ="radio" name ="q2" id ="q2_5" value ="5" >< label for ="q2_5" > 36~40</ label ></ li > < li style ="width: 19%;" >< input type ="radio" name ="q2" id ="q2_6" value ="6" >< label for ="q2_6" > 41~45</ label ></ li > < li style ="width:19%;" >< input type ="radio" name ="q2" id ="q2_7" value ="7" >< label for ="q2_7" > 46~50</ label ></ li > < li style ="width:19%;" >< input type ="radio" name ="q2" id ="q2_8" value ="8" >< label for ="q2_8" > 51~55</ label ></ li > < li style ="width:19%;" >< input type ="radio" name ="q2" id ="q2_9" value ="9" >< label for ="q2_9" > 56~60</ label ></ li > < li style ="width:19%;" >< input type ="radio" name ="q2" id ="q2_10" value ="10" >< label for ="q2_10" > 60岁以上</ label ></ li > </ ul > </ div > 可查看在线运行效果
2.4 密码 密码是一种特殊的文本控件，主要用于登录注册时输入的用户密码，默认显示……，设置 type=password 可以定义一个密码控件，例如：
实例演示
< div class ="ui attached segment" > < div class ="required inline field " > < label for ="user_name" > 用户名或邮箱</ label > < input id ="user_name" name ="user_name" value ="" autofocus ="" required ="" > </ div > < div class ="required inline field " > < label for ="password" > 密码</ label > < input id ="password" name ="password" type ="password" autocomplete ="off" value ="" required ="" > <!-- 密码表单 --> </ div > < div class ="inline field" > < label ></ label > < button class ="ui green button" > 登录</ button > </ div > </ div > 1234567891011121314 可查看在线运行效果
2.5 隐藏输入框 JavaScript 没有全局变量的功能，有时需要定义全局变量，可以用 cookie 来实现，但是浏览器可以关闭 cookie ，而且 cookie 在发送 HTTP 时会被带上，浪费数据传输，这时使用隐藏域的方式实现比较简单。例如：
实例演示
< form action ="https://www.baidu.com" method ="post" onclick ='beforeSubmit()' > < input type ="hidden" id ='_viewstate' name ="_viewstate" /> <!--隐藏域--> < input type ="submit" value ="click" /> </ form > < script > function beforeSubmit (){//提交表单前执行赋值函数 document .getElementById ("_viewstate" ).value = document .referrer ; } </ script > 123456789 可查看在线运行效果
上述代码通过定义隐藏域，当点击提交按钮时将该页面的上个页面的 URL 传输给表单的目标 URL，做到传输值的作用。
2.6 文件表单 有时需要做一个上传文件的功能，这时需要用到文件表单，通过设置 type=file 可以定义文件表单控件，还需要设置 enctype=multipart/form-data 编码方式，才能正确传输文件，例如：
实例演示
< form action ="/user/settings/avatar" method ="post" enctype ="multipart/form-data" > < div > < label for ="avatar" > 选择新的头像</ label > < input name ="avatar" type ="file" > </ div > </ form > 123456 可查看在线运行效果
2.7 重置按钮 重置按钮用于将表单内的控件的值重置为初始化状态， 并非清空数据 ，表单中的初始化数据定义在 value 值中，而且重置按钮必须 包裹在 form 表单标签中 ，例如：
实例演示
< form action ="/user/settings" method ="post" > < div > < label for ="username" > 用户名</ label > < input id ="username" name ="name" value ="" autofocus ="" required ="" > *<!--初始化表单是空--> </ div > < div > < label for ="full_name" > 自定义名称</ label > < input id ="full_name" name ="full_name" value ="" > <!--初始化表单是空--> </ div > < div > < label for ="email" > 邮箱</ label > < input id ="email" name ="email" value ="" required ="" > *<!--初始化表单是空--> </ div > < div > < label for ="website" > 个人网站</ label > < input id ="website" name ="website" type ="url" value ="" > <!--初始化表单是空--> </ div > < div > < label for ="location" > 所在地区</ label > < input id ="location" name ="location" value ="" > <!--初始化表单是空--> </ div > < div > < input type ="reset" value ="重置" >< button class ="ui green button" > 更新信息</ button > </ div > </ form > 12345678910111213141516171819202122232425 可查看在线运行效果
2.8 提交按钮 提交按钮相当于表单 form 的开关，点击这个开关相当于将表单中的数据提交给服务器。通过设置 type=submit 可以定义一个提交表单按钮，这个按钮必须包裹在 form 标签中才能生效，例如：
实例演示
< form class ="ui form" action ="/user/settings" method ="post" > < div class ="required field " > < label for ="username" > 用户名< span class ="text red hide" id ="name-change-prompt" > 该操作将会影响到所有与您帐户有关的链接</ span ></ label > < input id ="username" name ="name" value ="" data-name ="jdhg" autofocus ="" required ="" > <!--初始化表单是空--> </ div > < div class ="field" > < input type ="submit" value ="提交" > </ div > </ form > 123456789 可查看在线运行效果
3. 小结 本章介绍了网页中客户与服务器交互数据的方式-表单，通过表单用户可以将数据发送到服务器，围绕这个功能浏览器定义了一系列的提交方式、认证方式、数据类型等功能，通过复杂的交互方式网页可以实现真正的互联网属性而不是单纯的视觉展现
HTML 框架 框架可以理解为在网页中插入了一个独立的网页窗口元素，比较常用的框架元素是 iframe，iframe 有自己独立的窗口 window 以及上下文，iframe 元素自己内部的逻辑操作可以独立，当然在同域条件下，iframe 元素的窗口可以访问父级窗口，父级窗口也可以访问 iframe 窗口。
iframe 在网站应用刀耕火种的开发年代是非常常见的，现在前端应用嵌入 iframe 的场景越来越少了，但是在大型的网站中也会经常利用 iframe 嵌入多个网页到一套网站系统中，方便用户在一个系统中去进行业务操作，而不需要在几个不同的系统中来回切换。
1. iframe 1.1 定义方式 在网页中通过定义一个 iframe 标签即可引用另一个网页进来，例如：
实例演示
< iframe src ="http://www.baidu.com" height =500 width =500 /> <!-- 通过src设置iframe的地址 --> 12 可查看在线运行效果
1.2 height width 属性 通过设置 height 和 width 可以控制 iframe 的高和宽，但是实际项目中有时你并不知道所引用的 iframe 的宽高，或者说 iframe 的宽和高是动态不固定的，这时需要先获取到引用的 iframe 的宽高，然后将值设置给其属性，例如：
实例演示
< iframe id ="iframe" src ="http://www.imooc.com/wiki/html5/forms.html?preview=d2269b100476b4b77b9ddc11242e85ab" frameborder ="1" ></ iframe > <!--src的域名需要和当前网页域名一直，否则跨域不能获取iframe的contentWindow--> < script > var iframe = document .getElementById ("iframe" );//获取iframe的dom节点 iframe .onload = function (){ var doc = this .contentWindow .document ; this .height = doc .documentElement .scrollHeight ;//高度动态设置 this .width = doc .documentElement .scrollWidth ;//宽度动态设置 } </ script > 123456789 运行案例点击 "运行案例" 可查看在线运行效果
注意： 上述代码需要有一些 JavaScript 基础才能理解，不了解的同学可以单击 《JavaScript 入门教程》 学习。
1.3 frameborder 属性 该属性表示是否显示 iframe 边框，默认为 1 表示显示边框，0 表示隐藏，例如：
实例演示
< iframe src ="https://www.baidu.com" frameborder =0 ></ iframe > <!--无边框--> < iframe src ="https://www.baidu.com" ></ iframe > <!--默认有边框（很细的一个框，仔细看）--> 12 可查看在线运行效果
1.4 scrolling 属性 该属性表示是否显示滚动条，默认根据 iframe 的尺寸来判断是否需要滚动条，设置为 yes 时将始终显示滚动条，设置为 no 时表示完全不显示滚动条：
默认值 auto 表示，当内容超过 iframe 高或宽时，自动出现滚动条。
实例演示
< iframe src ="https://www.baidu.com" ></ iframe > <!--默认情下，在需要的情况下出现滚动条--> < iframe src ="https://www.baidu.com" scrolling ='yes' ></ iframe > <!--强制显示滚动条--> < iframe src ="https://www.baidu.com" scrolling ='no' ></ iframe > <!--强制不显示滚动条--> 123 可查看在线运行效果
1.5 srcdoc 属性 该属性定义在 iframe 展示的 HTML 描述代码，该属性不支持 IE 浏览器，例如：
实例演示
< iframe src ="https://www.baidu.com" srcdoc ='<p>使用百度搜索</p>' ></ iframe > 1 可查看在线运行效果
如果浏览器支持 srcdoc 属性，会只显示 srcdoc 中的内容, 不支持的时候 ( IE ) 就显示 src 指定的内容。
1.6 sandbox 属性 该属性用于表示对 iframe 的权限限制，可选值有：
实例演示
< iframe src ="https://www.baidu.com" sandbox ="" width =600 height =600 > </ iframe > 12 可查看在线运行效果
执行上述代码，会发现加载之后的百度首页虽然显示，但是并不能执行搜索，这是因为 sandbox 属性设置 为空字符串 时，iframe 会限制框内网页运行 JavaScript 脚本。
1.7 优缺点及建议 页面引用 iframe 元素，相当于引用一个完整的 HTML 网页。 这样做的好处是：
代码可复用性，相同的页面无需重复实现，只需要引用即可；
iframe 是一个封闭的运行环境，环境变量完全独立、隔离，不会污染宿主环境；
iframe 可以用于创建新的宿主环境，用于隔离或者访问原始接口及对象，提升网站的安全性
缺点是：
基于 iframe 的优缺点来看，在实际项目开发中，一般用来加载广告、播放器、富文本编辑器等非核心的或者需要格里运行的网页代码。
1.8 iframe 通信及跨域问题 1.8.1 iframe 通信 在使用 iframe 时难免会碰到需要在父窗口中使用 iframe 中的变量、或者在 iframe 框架中使用父窗口的变量，在 iframe 的域名和父窗口的域名完全一致的情况下，可以实现调用：
在父窗口中调用 iframe 元素的变量：
可以使用 contentWindow 的方式调用：
< iframe src ='index.html' id ='test' /> < script > //父窗口调用 iframe 的window对象 var obj = document .getElementById ("test" ).contentWindow ;</ script > 代码块12345 上述代码在父窗口中调用 iframe 元素的变量，以下是在 iframe 中调用父窗口的变量的方式：
在 iframe 中调用父窗口的变量：
< script > var dom = window .top .document .getElementById ("父窗口的元素ID" );</ script > 代码块123 兄弟 iframe 间相互调用变量：
< iframe src ='index1.html' id ='test1' /> < iframe src ='index2.html' id ='test2' /> < script > var dom2 = window .top .document .getElementById ("test2" ).contentWindow .getElementById ("" );//这里是在test1调用test2中的某个dom </ script > 代码块12345 1.8.2 跨域问题 但是，JavaScript 出于安全方面的考虑，不允许跨域调用其他页面的对象。这样在安全限制的同时也给 iframe 元素上带来了不少麻烦，导致一个网页中如果出现与当前域名不相同的 iframe，就无法通过 JavaScript 调用 iframe 中的 DOM 结点了 。
扩展知识：什么是跨域？简单地理解就是因为 JavaScript 同源策略的限制， a.com 域名下的 JavaScript 无法操作 b.com 或是 c.com 域名下的对象。
2. 小结 框是 HTML 中引用外部网页的方式，本章介绍了 iframe 元素的使用方式，以及使用框的优缺点。在实际项目开发中需要结合网页设计中的网络加载时间、性能、代码可用性等因素考虑，决定是否需要使用 iframe。
