HTML 5 中文参考手册
HTML 5 入门
HTML5 是最新的 HTML 标准，它在 HTML4 的基础上引入了许多新特性和改进，旨在简化网页开发，提高网页的性能和兼容性。HTML5 支持多媒体、图形、存储和设备访问等功能，使得它非常适合现代网页和应用程序的开发。下面是一些HTML5入门的要点：
1. HTML5 新特性
1.1 结构化语义元素
-
<header>,<footer>,<article>,<section>,<nav>,<aside>等标签，用于更语义化的网页结构。
1.2 表单改进
-
新的输入类型（如
email,date,time等）。 -
新的表单属性（如
required,placeholder等）。
1.3 多媒体支持
-
<audio>和<video>标签，用于嵌入音频和视频内容。
1.4 图形和SVG
-
<canvas>标签，用于通过 JavaScript 绘制图形。 -
SVG（Scalable Vector Graphics）直接在HTML中嵌入矢量图形。
1.5 离线应用和存储
-
<offline>应用缓存（Application Cache）允许网页在没有网络连接时工作。 -
Web Storage（localStorage 和 sessionStorage）用于在浏览器中存储数据。
1.6 地理定位
-
使用 Geolocation API 获取用户的地理位置。
2. 学习HTML5的步骤
2.1 基础知识
-
首先，了解HTML的基本结构，包括
<!DOCTYPE html>,<html>,<head>,<body>等标签。 -
学习基础的CSS和JavaScript，因为HTML5通常与这些技术一起使用来创建动态和响应式的网页。
2.2 使用在线资源
-
MDN Web Docs（Mozilla Developer Network）：提供详细的HTML5文档和示例。
-
W3Schools：提供基础的HTML5教程和参考。
-
Codecademy 或 freeCodeCamp：提供交互式课程和项目，帮助学习HTML5和其他Web技术。
2.3 实践项目
-
从简单的HTML5页面开始，逐步添加新的HTML5特性，如表单、多媒体等。
-
构建一个个人网站或博客，实践使用HTML5的新特性。
-
使用框架如 Bootstrap 或 Tailwind CSS 来加速开发过程，同时学习如何利用这些框架实现响应式设计。
3. 工具和资源
-
Chrome DevTools 和 Firefox Developer Tools：强大的浏览器内置工具，用于调试和测试HTML5页面。
-
Sublime Text, Visual Studio Code 或 Atom：流行的代码编辑器，支持HTML和CSS/JavaScript开发。
-
GitHub 和 Git：用于版本控制和代码分享的必备工具。
4. 社区和论坛
-
Stack Overflow：解决编程问题的首选平台。
-
Reddit 的 /r/webdev 和 Hacker News：获取最新的Web开发趋势和技术讨论。
-
IT技术菜鸟教程：IT技术网www.itjs.cn是国内最早的IT技术交流平台，提供了大量HTML/JS等前端技术学习资源
通过以上步骤和资源，你可以有效地入门并掌握HTML5开发。随着实践的增加，你将能够创建功能丰富、现代且兼容性好的网页应用。
HTML 5 标签
按字母顺序排列
- 4: 指示在 HTML 4.01 中是否定义了该元素
- 5: 指示在 HTML 5 中是否定义了该元素
| 标签 | 描述 | 4 | 5 |
|---|---|---|---|
| <!--...--> | 定义注释。 | 4 | 5 |
| <!DOCTYPE> | 定义文档类型。 | 4 | 5 |
| <a> | 定义超链接。 | 4 | 5 |
| <abbr> | 定义缩写。 | 4 | 5 |
| <acronym> | 不支持。定义首字母缩写。 | 4 | |
| <address> | 定义地址元素。 | 4 | 5 |
| <applet> | 不支持。定义 applet。 | 4 | |
| <area> | 定义图像映射中的区域。 | 4 | 5 |
| <article> | 定义 article。 | 5 | |
| <aside> | 定义页面内容之外的内容。 | 5 | |
| <audio> | 定义声音内容。 | 5 | |
| <b> | 定义粗体文本。 | 4 | 5 |
| <base> | 定义页面中所有链接的基准 URL。 | 4 | 5 |
| <basefont> | 不支持。请使用 CSS 代替。 | 4 | |
| <bdo> | 定义文本显示的方向。 | 4 | 5 |
| <big> | 不支持。定义大号文本。 | 4 | |
| <blockquote> | 定义长的引用。 | 4 | 5 |
| <body> | 定义 body 元素。 | 4 | 5 |
| <br> | 插入换行符。 | 4 | 5 |
| <button> | 定义按钮。 | 4 | 5 |
| <canvas> | 定义图形。 | 5 | |
| <caption> | 定义表格标题。 | 4 | 5 |
| <center> | 不支持。定义居中的文本。 | 4 | |
| <cite> | 定义引用。 | 4 | 5 |
| <code> | 定义计算机代码文本。 | 4 | 5 |
| <col> | 定义表格列的属性。 | 4 | 5 |
| <colgroup> | 定义表格列的分组。 | 4 | 5 |
| <command> | 定义命令按钮。 | 5 | |
| <datagrid> | 定义树列表 (tree-list) 中的数据。 | 5 | |
| <datalist> | 定义下拉列表。 | 5 | |
| <datatemplate> | 定义数据模板。 | 5 | |
| <dd> | 定义定义的描述。 | 4 | 5 |
| <del> | 定义删除文本。 | 4 | 5 |
| <details> | 定义元素的细节。 | 5 | |
| <dialog> | 定义对话（会话）。 | 5 | |
| <dir> | 不支持。定义目录列表。 | 4 | |
| <div> | 定义文档中的一个部分。 | 4 | 5 |
| <dfn> | 定义定义项目。 | 4 | 5 |
| <dl> | 定义定义列表。 | 4 | 5 |
| <dt> | 定义定义的项目。 | 4 | 5 |
| <em> | 定义强调文本。 | 4 | 5 |
| <embed> | 定义外部交互内容或插件。 | 5 | |
| <event-source> | 为服务器发送的事件定义目标。 | 5 | |
| <fieldset> | 定义 fieldset。 | 4 | 5 |
| <figure> | 定义媒介内容的分组，以及它们的标题。 | 5 | |
| <font> | 不赞成。定义文本的字体、尺寸和颜色。 | 4 | |
| <footer> | 定义 section 或 page 的页脚。 | 5 | |
| <form> | 定义表单。 | 4 | 5 |
| <frame> | 不支持。定义子窗口（框架）。 | 4 | |
| <frameset> | 不支持。定义框架的集。 | 4 | |
| <h1> to <h6> | 定义标题 1 到标题 6。 | 4 | 5 |
| <head> | 定义关于文档的信息。 | 4 | 5 |
| <header> | 定义 section 或 page 的页眉。 | 5 | |
| <hr> | 定义水平线。 | 4 | 5 |
| <html> | 定义 html 文档。 | 4 | 5 |
| <i> | 定义斜体文本。 | 4 | 5 |
| <iframe> | 定义行内的子窗口（框架）。 | 4 | 5 |
| <img> | 定义图像。 | 4 | 5 |
| <input> | 定义输入域。 | 4 | 5 |
| <ins> | 定义插入文本。 | 4 | 5 |
| <isindex> | 不支持。定义单行的输入域。 | 4 | |
| <kbd> | 定义键盘文本。 | 4 | 5 |
| <label> | 定义表单控件的标注。 | 4 | 5 |
| <legend> | 定义 fieldset 中的标题。 | 4 | 5 |
| <li> | 定义列表的项目。 | 4 | 5 |
| <link> | 定义资源引用。 | 4 | 5 |
| <m> | 定义有记号的文本。 | 5 | |
| <map> | 定义图像映射。 | 4 | 5 |
| <menu> | 定义菜单列表。 | 4 | 5 |
| <meta> | 定义元信息。 | 4 | 5 |
| <meter> | 定义预定义范围内的度量。 | 5 | |
| <nav> | 定义导航链接。 | 5 | |
| <nest> | 定义数据模板中的嵌套点。 | 5 | |
| <noframes> | 不支持。定义 noframe 部分。 | 4 | |
| <noscript> | 不支持。定义 noscript 部分。 | 4 | |
| <object> | 定义嵌入对象。 | 4 | 5 |
| <ol> | 定义有序列表。 | 4 | 5 |
| <optgroup> | 定义选项组。 | 4 | 5 |
| <option> | 定义下拉列表中的选项。 | 4 | 5 |
| <output> | 定义输出的一些类型。 | 5 | |
| <p> | 定义段落。 | 4 | 5 |
| <param> | 为对象定义参数。 | 4 | 5 |
| <pre> | 定义预格式化文本。 | 4 | 5 |
| <progress> | 定义任何类型的任务的进度。 | 5 | |
| <q> | 定义短的引用。 | 4 | 5 |
| <rule> | 为升级模板定义规则。 | 5 | |
| <s> | 不支持。定义加删除线的文本。 | 4 | |
| <samp> | 定义样本计算机代码。 | 4 | 5 |
| <script> | 定义脚本。 | 4 | 5 |
| <section> | 定义 section。 | 5 | |
| <select> | 定义可选列表。 | 4 | 5 |
| <small> | 不支持。定义小号文本。 | 4 | 5 |
| <source> | 定义媒介源。 | 5 | |
| <span> | 定义文档中的 section。 | 4 | 5 |
| <strike> | 不支持。定义加删除线的文本。 | 4 | |
| <strong> | 定义强调文本。 | 4 | 5 |
| <style> | 定义样式定义。 | 4 | 5 |
| <sub> | 定义上标文本。 | 4 | 5 |
| <sup> | 定义下标文本。 | 4 | 5 |
| <table> | 定义表格。 | 4 | 5 |
| <tbody> | 定义表格的主体。 | 4 | 5 |
| <td> | 定义表格单元。 | 4 | 5 |
| <textarea> | 定义 textarea。 | 4 | 5 |
| <tfoot> | 定义表格的脚注。 | 4 | 5 |
| <th> | 定义表头。 | 4 | 5 |
| <thead> | 定义表头。 | 4 | 5 |
| <time> | 定义日期/时间。 | 5 | |
| <title> | 定义文档的标题。 | 4 | 5 |
| <tr> | 定义表格行。 | 4 | 5 |
| <tt> | 不支持。定义打字机文本。 | 4 | |
| <u> | 不支持。定义下划线文本。 | 4 | |
| <ul> | 定义无序列表。 | 4 | 5 |
| <var> | 定义变量。 | 4 | 5 |
| <video> | 定义视频。 | 5 | |
| <xmp> | 不支持。定义预格式文本。 | 4 | 5 |
HTML 5 属性
| 属性 | 值 | 描述 | 4 | 5 |
|---|---|---|---|---|
| onabort | script | 发生 abort 事件时运行脚本。 | 5 | |
| onbeforeonload | script | 在元素加载前运行脚本。 | 5 | |
| onblur | script | 当元素失去焦点时运行脚本。 | 4 | 5 |
| onchange | script | 当元素改变时运行脚本。 | 4 | 5 |
| onclick | script | 在鼠标点击时允许脚本。 | 4 | 5 |
| oncontextmenu | script | 当菜单被触发时运行脚本。 | 5 | |
| ondblclick | script | 当鼠标双击时运行脚本。 | 4 | 5 |
| ondrag | script | 只要脚本在被拖动就允许脚本。 | 5 | |
| ondragend | script | 在拖动操作结束时运行脚本。 | 5 | |
| ondragenter | script | 当元素被拖动到一个合法的放置目标时，执行脚本。 | 5 | |
| ondragleave | script | 当元素离开合法的放置目标时。 | 5 | |
| ondragover | script | 只要元素正在合法的放置目标上拖动时，就执行脚本。 | 5 | |
| ondragstart | script | 在拖动操作开始时执行脚本。 | 5 | |
| ondrop | script | 当元素正在被拖动时执行脚本。 | 5 | |
| onerror | script | 当元素加载的过程中出现错误时执行脚本。 | 5 | |
| onfocus | script | 当元素获得焦点时执行脚本。 | 4 | 5 |
| onkeydown | script | 当按钮按下时执行脚本。 | 4 | 5 |
| onkeypress | script | 当按键被按下时执行脚本。 | 4 | 5 |
| onkeyup | script | 当按钮松开时执行脚本。 | 4 | 5 |
| onload | script | 当文档加载时执行脚本。 | 4 | 5 |
| onmessage | script | 当 message 事件触发时执行脚本。 | 5 | |
| onmousedown | script | 当鼠标按钮按下时执行脚本。 | 4 | 5 |
| onmousemove | script | 当鼠标指针移动时执行脚本。 | 4 | 5 |
| onmouseover | script | 当鼠标指针移动到一个元素上时执行脚本。 | 4 | 5 |
| onmouseout | script | 当鼠标指针移出元素时执行脚本。 | 4 | 5 |
| onmouseup | script | 当鼠标按钮松开时执行脚本。 | 4 | 5 |
| onmousewheel | script | 当鼠标滚轮滚动时执行脚本。 | 5 | |
| onreset | script | 当表单重置时执行脚本。不支持。 | 4 | |
| onresize | script | 当元素调整大小时运行脚本。 | 5 | |
| onscroll | script | 当元素滚动条被滚动时执行脚本。 | 5 | |
| onselect | script | 当元素被选中时执行脚本。 | 4 | 5 |
| onsubmit | script | 当表单提交时运行脚本。 | 4 | 5 |
| onunload | script | 当文档卸载时运行脚本。 | 5 |
HTML 5 事件属性
| 属性 | 值 | 描述 | 4 | 5 |
|---|---|---|---|---|
| acceskey | a character | 设置访问一个元素的键盘快捷键。不支持。 | 4 | |
| class | class_rule or style_rule | 元素的类名。 | 4 | 5 |
| contenteditable | true false |
设置是否允许用户编辑元素。 | 5 | |
| contentextmenu | id of a menu element | 给元素设置一个上下文菜单。 | 5 | |
| dir | ltr rtl |
设置文本方向。 | 4 | 5 |
| draggable | true false auto |
设置是否允许用户拖动元素。 | 5 | |
| id | id_name | 元素的唯一 id。 | 4 | 5 |
| irrelevant | true false |
设置元素是否相关。不显示非相关的元素。 | 5 | |
| lang | language_code | 设置语言码。 | 4 | 5 |
| ref | url or elementID | 引用另一个文档或本文档上另一个位置。仅在 template 属性设置时使用。 | 5 | |
| registrationmark | registration mark | 为元素设置拍照。可规定于任何 <rule> 元素的后代元素，除了 <nest> 元素。 | 5 | |
| style | style_definition | 行内的样式定义。 | 4 | 5 |
| tabindex | number | 设置元素的 tab 顺序。 | 4 | 5 |
| template | url or elementID | 引用应该应用到该元素的另一个文档或本文档上另一个位置。 | 5 | |
| title | tooltip_text | 显示在工具提示中的文本。 | 4 | 5 |