本文详细介绍了HTML和HTML5相关知识。阐述了HTML的定义、发展、结构、标签和元素等内容，说明了HTML结构包含头部和正文。同时介绍了HTML5，它是下一代标准，多数现代浏览器已支持，还提及了HTML5的结构标签、媒体应用、表单属性等，最后设有知识题。
文章目录
什么是HTML？
HTML 语言用于描述网页。
| HTML 是指超文本标记语言: Hyper Text Markup Language |
| HTML 不是一种编程语言，而是一种标记语言 |
| HTML 使用标记标签来描述网页 |
| HTML 文档包含了HTML 标签及文本内容 |
| HTML 文档也叫做 web 页面 |
HTML发展
2014年，HTML 5标准最终面世。
| HTML 2.0——1995年11月，RFC 1866发布 |
| HTML 3.2——1997年1月14日，W3C发布推荐标准 |
| HTML 4.0——1997年12月18日，W3C发布推荐标准 |
| HTML 4.01——1999年12月24日，W3C发布推荐标准 |
| HTML 5——2014年10月28日，W3C发布推荐标准 |
HTML结构
只有 <body> 标签中的内容会显示在浏览器中。
HTML的结构一般包括 <head>标签和 <body>标签， <head>和 <body>这2个标记符分别表示网页的头部和正文。
1.<head>头部中可包含页面的标题、关键词、描述说明等内容。
头部本身不作为内容来显示，但影响网页显示的效果。
在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种 meta 元数据信息。
| 标签 | 描述 |
|---|---|
| <head> | 定义了文档的信息 |
| <title> | 定义了文档的标题 |
| <base> | 定义了页面链接标签的默认链接地址 |
| <link> | 定义了一个文档和外部资源之间的关系 |
| <meta> | 定义了HTML文档中的元数据 |
| <script> | 定义了客户端的脚本文件 |
| <style> | 定义了HTML文档的样式文件 |
2. <title> 标签定义了文档的标题
浏览器会以特殊的方式来使用标题，并且通常放置在浏览器窗口的标题栏或状态栏上。
当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。
3. <link> 标签定义了文档与外部资源之间的关系
<link> 标签通常用于链接到样式表。
4. <meta>标签通常用于提供有关页面的元信息。
<meta>指定网页的描述(description)，关键词(keywords)，文件的最后修改时间(revised)，作者(author)，和其他元数据。
5. <body>标签定义文档的主体
<body> 标签包含文档的所有展示内容。，有且只有一个。
HTML标签
HTML 标签通常是成对出现的。
| HTML 标记标签通常被称为 HTML 标签 (HTML tag) |
|---|
| HTML 标签是由尖括号包围的关键词，比如 <html>。 |
| HTML 标签通常是成对出现的，比如 <b>和 </b>。 |
| 标签对中的第一个标签是开始标签，第二个标签是结束标签。 |
| 开始和结束标签也被称为开放标签和闭合标签。 |
| 某些 HTML 元素具有空内容（empty content），在开始标签中进行关闭（以开始标签的结束而结束）。 |
HTML元素
一个 HTML元素包含了开始标签与结束标签。
1. 块级元素和内联元素
| 块级元素 | 内联元素 |
|---|---|
| 所有块级元素占用全部宽度，不能和其他元素共享一行 | 所有内联元素只占用必要的宽度，默认和其他元素在同一行 |
| 可以根据盒模型特性设置宽高内外间距，如果不设置宽度，则默认填充父级元素的宽度 | 不遵循盒模型特性设置，宽高只和内容有关 |
| 内部可以继续容纳其他元素。包括：div、dl、h系列、hr、ul、li、ol、table、p等 | 内部只可以继续容纳其他内联元素 |
| 常见的块级元素 ：div, form, table, header, aside, section, article, figure, figcaption, h1~h6, nav, p, pre, blockqoute, canvas, ol, ul, dl | 常见的行内元素：span, a, img, label, input, select, textarea, br, i, em, strong, small, button, sub, sup, code |
2. 既是内联元素又是块级元素
| 既希望元素具有宽度高度特性，又具有同行特性。 |
| 每一行所有的inline-block元素会共同形成一个line box。 |
| line box的高度由里面最高的元素决定，不会与下一行的列表元素发生错位。 |
什么是 HTML5?
HTML5 是下一代 HTML 标准。
HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
HTML5 受包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等主流浏览器的支持。
关于文档类型声明及DTD
<!DOCTYPE>是标准通用标记语言的文档类型声明，有助于在浏览器中正确地显示网页。
HTML5 不基于 SGML，所以不需要引用 DTD（HTML 4.01 基于 SGML）。
| HTML5声明 | HTML 4.01声明 |
|---|---|
| < ! DOCTYPE html > | <! DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> |
HTML5结构标签
| 标签 | 描述 |
|---|---|
| <header> | 标记定义一个页面的页眉信息。 |
| <nav> | 定义导航链接的部分。 |
| <section> | 定义文档中的节（section、区段）。 |
| <aside> | 定义页面的侧边栏内容。 |
| <article> | 定义页面独立的内容区域。 |
| <hgroup> | 标记定义文件中一个区块的相关信息 |
| <figure> | 规定独立的流内容（图像、图表、照片、代码等等）。 |
| <figcaption> | 定义 <figure> 元素的标题。 |
| <dialog> | 定义对话框，比如提示框。 |
| <footer> | 定义 section 或 document 的页脚。 |
HTML5的Canvas
| canvas 画布，帆布。是在 HTML5 页面中用于展示绘图效果的图形容器。 |
| 拥有多种绘制路径、矩形、圆形、字符以及添加图像、保存图像的方法。（通过脚本绘制图像，通常是 JavaScript。） |
| 可以用于绘制图表、制作简单的以及不那么简单的动画。 |
| 支持变形转换，支持操作旋转、扭曲、缩放和移动。 |
| 甚至可以制作游戏。 |
HTML5音频多视频媒体
视频
| 兼容性 |
|---|
| safari支持mp4、不支持webm和ogv。 |
| ie8（包含）以下都不支持 video 标签。 |
| ie9 支持 video 标签（但只支持 mp4 ）。 |
| <video> | |
|---|---|
| 属性 | 描述 |
| src | 设置或返回视频的多媒体资源的值。 |
| autoplay | 设置或返回是否在就绪（加载完成）后随即播放视频。 |
| controls | 设置或返回视频是否应该显示控件（比如播放/暂停等）。 |
| loop | 设置或返回视频是否应在结束时再次播放。 |
| width | 设置或返回视频的 高度属性的值。 |
| height | 设置或返回视频的 宽度属性的值。 |
| poster | 设置或返回视频的 海报封面属性的值。 |
| muted | 设置或返回是否关闭声音。 |
音频
| 兼容性 |
|---|
| safari支持mp3和wav、不支持ogg。 |
| JS中new Audia() 等同于 html 上加一个 标签。 |
| chrome和opera不能自动播放，需要一个页面元素上的交互才可以。 |
| width / height 属性没有作用，必须使用 style 标签里面的样式去控制它。 |
| <video> | |
|---|---|
| 属性 | 描述 |
| src | 设置或返回音频的多媒体资源的值。 |
| autoplay | 设置或返回是否在就绪（加载完成）后随即播放音频。 |
| controls | 设置或返回音频是否应该显示控件（比如播放/暂停等）。 |
| loop | 设置或返回音频是否应在结束时再次播放。 |
| width | 设置或返回音频的 高度属性的值。 |
| height | 设置或返回音频的 宽度属性的值。 |
HTML5重定义标签
| 标签 | 描述 |
|---|---|
| <b> | 代表内联文本，通常是粗体，没有传递表示重要的意思 |
| <i> | 代表内联文本，通常是斜体，没有传递表示重要的意思 |
| <dd> | 可以同details与figure一同使用，定义包含文本，dialog也可用 |
| <dt> | 可以同details与figure一同使用，汇总细节，dialog也可用 |
| <hr> | 表示主题结束，而不是水平线，虽然显示相同 |
| <small> | 表示小字体，例如打印注释或者法律条款 |
| <strong> | 表示重要性而不是强调符号 |
HTML5其他标签
| 标签 | 描述 |
|---|---|
| <bdi> | 允许您设置一段文本，使其脱离其父元素的文本方向设置。 |
| <canvas> | 代表位图区域，画布。 |
| <details> | 用于描述文档或文档某个部分的细节。 |
| <summary> | 标签包含 details 元素的标题。 |
| <svg> | 定义一个嵌入式矢量图。 |
| <wbr> | 规定在文本中的何处适合添加换行符。 |
HTML5表单属性
| 属性 | 描述 |
|---|---|
| autocomplete | 自动完成，适用于<form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range, color。 |
| autofocus | 自动地获得焦点，适用于所有 <input> 标签的类型 |
| multiple | 可选择多个值，适用于<input>中type为email和file |
| placeholder | 默认占位符，适用于<input>中type为：text, search, url, telephone, email, password |
| required | 规定不能为空，适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio, file |
HTML5新增属性
| 属性 | 描述 |
|---|---|
| contenteditable | 规定是否可编辑元素的内容。 |
| contextmenu | 指定一个元素的上下文菜单。当用户右击该元素，出现上下文菜单 |
| draggable | 指定某个元素是否可以拖动 |
| dropzone | 指定是否将数据复制，移动，或链接，或删除 |
| hidden | 规定对元素进行隐藏。 |
HTML 知识题
| 题目 | 答案 |
|---|---|
| HTML5 的正确 doctype 是？ | <!DOCTYPE html> |
| 在 HTML5 中，onblur 和 onfocus 是： | 事件属性 |
| 在 HTML5 中，哪个方法用于获得用户的当前位置？ | getCurrentPosition() |
| HTML5 全局属性，“contenteditable” 用于 | 定元素内容是否是可编辑的。 |
| 在 HTML5 中，contextmenu 和 spellcheck 是： | HTML 属性 |
| 由 SVG 定义的图形是什么格式的？ | XML |
| HTML5 内建对象用于在画布上绘制： | getContext |
| 在 HTML5 中，head与header哪个不是在页面中显示的？ | head |
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
