本文详细介绍了HTML5的基础，包括文档结构元素如<html>、<head>和<body>，头部元素如<title>和<meta>，以及内容结构如<section>、<article>和<details>。此外，还涵盖了HTML5的超链接<a>标签、字符集与颜色、多媒体支持（图像、音视频）、表格和表单的基本概念与用法。内容深入浅出，适合初学者学习。
目录
1.标签
一、HTML5基础
1.HTML5基础概述
元素和标签：标签是用来描述文档内容的类型、组成与格式化信息的文本字符串，用一对尖括号<和>括起，位于起始标签和终止标签之间的文本是元素的内容。标签可用于标识元素的类型，设置元素的属性，并界定元素内容的始末。（非空元素和空元素）
属性：HTML5标签拥有属性，属性为HTML5元素提供附加信息。属性总是以“名称/值”对的形式出现，比如“name=“value””，且总是在HTML5元素的开始标签中规定。
2.文档结构元素
<html></html> 根标签，定义了文档的开始和结束，告知浏览器自身是一个HTML文档
<head></head> 头部标签，其中的内容可为脚本、样式表和提供的元信息
<body></body> 定义主体，包含文档所有内容（文本、超链接、图像、表格和列表等）3.头部元素
| 标签 | 描述 |
|---|---|
| <title> | 定义文档标题，显示在浏览器窗口的标题栏上 |
| <base> | 页面中所有链接的基准URL |
| <link> | 资源引用 |
| <meta> | 元信息 |
| 属性 | 值 | 描述 |
|---|---|---|
| http-equiv | expires | 用于设定网页在缓存区的到期时间，必须使用GMT时间格式 |
| refresh | 用于刷新与跳转（重定向）页面 | |
| name | author | 网页的作者 |
| description | 网页的内容描述 | |
| keywords | 网页的关键字 | |
| generator | 网页使用的编辑器 | |
| revised | 网页修订信息 | |
| robots | 搜索机器人向导参数 | |
| content | some_text | 定义与 http-equiv 或 name 属性相关的元信息的值 |
<meta charset="UTF-8">
<meta name="robots" content="index,follow"/>
<meta name="description" content="HTML,meta示例" />
<meta name="keywords" content="HTML,meta" />
<meta name="author" content="作者" />
<meta name="generator" content="JetBrains WebStorm 11.0.3" />
<title>我是网页标题</title>
二、HTML5内容结构与文本
1.HTML5结构标签
| 标签 | 描述 |
|---|---|
| <article> | 表示页面中一块与上下文不相关的独立内容 |
| <aside> | 定义其所处内容之外的内容，如文章的侧栏或边栏 |
| <details> | 实际用于标识该标签内部子标签可以被展开、收缩显示的标签 |
| <footer> | 定义 section 或 page 的页脚 |
| <header> | 定义 section 或 page 的页眉 |
| <nav> | 定义导航链接部分，主要用于构建导航菜单、侧边栏导航、内页导航和翻页操作等区域 |
| <section> | 定义文档中的节（区段）比如章节、页眉、页脚或文档中其它部分 |
| <summary> | 可以为<details>元素定义可见的标题 |
| <div> | 把文档分割为独立的、不同的部分，是一个容器标签，块元素 |
| <span> | 定义文档中一行的一部分，行内元素 |
2.HTML5基础标签
| 标签 | 描述 |
|---|---|
| <h1>~<h6> | 标题 1 至标题 6 |
| <p> | 定义段落，HTML5自动在段落前后添加额外空行 |
| <br> | 定义换行 |
| <hr> | 定义水平线 |
| <！-- -- > | 用于在HTML5源码中插入注释，注释会被浏览器忽略 |
3.HTML5格式化标签
| 标签 | 描述 |
|---|---|
| <sub> | 下标文本 |
| <sup> | 上标文本 |
| <ins> | 插入文本 |
| <del> | 删除文本 |
| <wbr> | 定义在文本何处适合添加换行符（当窗口宽度不够时换行） |
| <pre> | 预格式文本，保留空格和换行符 |
| 标签 | 描述 |
|---|---|
| <abbr> | 表示简称或缩写，使用title属性，鼠标指针移动到元素上会显示完整信息 |
| <address> | 定义文档或文章的作者的联系信息 |
| <bdo> | 表示元素输出方向，必须和 dir 属性一起使用 |
| <blockquote> | 长的引用语 |
| <q> | 短的引用语 |
4.HTML5列表
| 标签 | 描述 |
|---|---|
| <ol> | 有序列表 |
| <ul> | 无序列表 |
| <li> | 列表项 |
| <dl> | 定义列表 |
| <dt> | 定义列表项目 |
| <dd> | 定义列表项目描述 |
无序列表是一个项目的列表，每个项目默认用粗体圆点进行标记。列表项内容可以使用段落、换行符、图片、连接以及其它列表等。
有序列表也是项目，列表项目使用数字进行标记。
定义列表是项目及其注释的组合，定义列表以<dl>标签开始，每个定义列表项以<dt>标签开始，每个定义列表项的描述以<dd>标签开始。
三、HTML5超链接
1.<a>标签
<a>标签：a是锚（anchor）的缩写，HTML5使用<a>标签实现信息节点与目标的超链接，链接目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是图片、电子邮件地址、文件等。
| 属性 | 值 | 描述 |
|---|---|---|
| href | URL | 链接目标URL |
| target | _blank | 在新窗口中打开被链接文档 |
| _self | 在相同的窗口中打开被链接文档 |
href 属性定义的文档路径分为绝对路径和相对路径。
绝对路径：是包括通信协议名、服务器名、路径及文件名的完全路径。如链接清华大学信息科学技术学院首页，绝对路径是http://www.sist.tsinghua.edu.cn/docinfo/index.jsp。如果文档在本地计算机上，有绝对路径如 file:///F:/bbol_store/default.html。
相对路径：根相对路径指本站点文件夹（根目录）,根相对路径以 “./” 开头。“../”表示当前文件夹的上一级文件夹。如果两个都不写，默认访问根目录。
通过使用id属性，可以创建一个网页内部的书签，使用时可直接跳至书签指定位置。
# 和 JavaScript:; 可以作为超链接路径占位符，此时超链接无效。
<a id="c12"></a> 在需要的位置定义书签
<a href="#c12">第12章</a> 在指定位置建立和书签的链接
<a href="#">点了这个什么也不会发生</a>2.HTML5字符集与颜色
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 |   |   | |
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
有 16 种颜色名被 W3C 的 HTML5标准所支持：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。
如果需要使用其它颜色，需要使用十六进制的颜色（#000000~#FFFFFF）
四、HTML5多媒体
1.HTML5图像
| 标签 | 描述 |
|---|---|
| <img> | 定义图像 |
| <map> | 定义带有可单击区域的图像映射 |
| <area> | 定义图像地图中的可点击区域 |
| <figure> | 定义媒介内容的分组，以及它们的标题 |
| <figcaption> | 定义 figure 元素的标题 |
| 属性 | 值 | 描述 |
|---|---|---|
| alt | text | 必需，图像的替换文本 |
| src | URL | 必需，图像的URL地址 |
| height | Pixels 或% | 可选，图像的高度（大小单改等比例 双改则非） |
| width | Pixels 或% | 可选，图像的宽度 |
| usemap | URL | 将图像定义为客户器端图像映射 |
| 图片格式 | 特点 |
|---|---|
| jpeg（jpg） | 支持的颜色比较丰富，不支持透明效果，不支持动图，一般用来显示照片 |
| gif | 支持的颜色比较单一，支持简单透明，支持动图 |
| png | 支持的颜色丰富，支持复杂透明，不支持动图，专为网页而生 |
| webp | 是谷歌新推出的专用来表示网页中的图片的一种格式，它具备其他图片格式的所有优点，而且文件还特别的小，但兼容性不好 |
| base64 | 将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片，（主要用于一些需要和网页一起加载的图片） |
2.HTML5音视频
| 标签 | 描述 |
|---|---|
| <audio> | 定义音频 |
| <video> | 定义视频 |
| <source> | 为解决浏览器对视频格式的兼容情况，可以用<source>元素为同一个媒体数据指定多个播放格式与编码格式，确保浏览器可以从中选择一种自己支持的视频格式进行播放 |
| <track> | 为<video>元素之类的媒介规定外部文本轨道，如用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的 |
controls属性：是否允许用户控制播放
autoplay属性：音视频文件是否自动播放
loop属性：是否循环播放
3.<embed>标签
| 属性 | 值 | 描述 |
|---|---|---|
| src | URL | 嵌入内容的URL |
| height | pixels | 对象的高度 |
| type | MIME_type | 定义嵌入内容的类型 |
| width | pixels | 对象的宽度 |
<embed>标签定义嵌入的内容，比如插件，一旦对象嵌入页面中，对象将成为页面的一部分，该元素主要用来嵌入视频和Flash。
五、HTML5表格
1.HTML5表格概述
单元格的内容是数据，数据单元格可以包含文本、图片、列表、段落、表单、水平线或表格等元素。一个典型的HTML5表格包括一个标题、头部、主体和脚部。
| 标签 | 描述 |
|---|---|
| <table> | 定义表格 |
| <caption> | 表格标题 |
| <th> | 表格的头部行（标题行） |
| <tr> | 表格的行 |
| <td> | 表格单元格 |
| <thead> | 表格的头部 |
| <tbody> | 表格的主体 |
| <tfoot> | 表格的脚部 |
| <col> | 用于表格列的属性 |
| <colgroup> | 表格列的组合 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>四行三列带标题的表格</title>
</head>
<body>
<table border="1">
<caption>表格标题</caption>
<thead>
<tr>
<th>头部</th><th>头部</th><th>头部</th>
</tr>
</thead>
<tfoot>
<tr>
<td>脚部</td><td>脚部</td><td>脚部</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>主体</td><td>主体</td><td>主体</td>
</tr>
<tr>
<td>主体</td><td>主体</td><td>主体</td>
</tr>
</tbody>
</table>
</body>
</html>rowspan 纵向的合并单元格；colspan 横向的合并单元格 例：<td colspan="2">C4</td>
默认情况下元素在 td 中是垂直居中的。
如果表格中没有使用 tbody 而是直接使用 tr，那么浏览器会自动创建一个 tbody 并且将 tr 全都放到 tbody 里边，所以 tr 不是 table 的子元素。
| border-spacing | 指定边框之间的距离，单位 px |
| border-collapse | 设置边框的合并，可选值有 collapse |
六、HTML5表单
1.HTML5表单概述
表单：在显示生活中表单用于提交数据。在网页中也可以使用表单，网页中的表单用于将本地的数据提交给远程的服务器。使用 form 标签来创建一个表单。form 的属性有 action 用于设置表单要提交的服务器的地址。数据要提交到服务器中，必须要为元素指定一个name 属性。
| 文本框 | <input type="text" name="username"> |
| 密码框 | <input type="password" name="password"> |
| 提交按钮 | <input type="submit" value="XXX"> value设置按钮上显示的文字 |
| 单选按钮 | <input type="radio" name="XXX"> 同 name 的多个按钮视为一组只能选一。像这种选择框，必须要指定一个 value 属性，value 属性最终会作为用户的填写的值传递给服务器。 checked 用于设置单选按钮的默认选中值 |
| 多选框 | <input type="checkbox" name="XXX" value="XXX"> |
| 重置按钮 | <input type="reset"> 将内容重置为默认值 |
| 普通按钮 | <input type="button"> 普通的用于点按的按钮 |
| 下拉列表 | <select name="XXX"></select> |
| 下拉列表列表项 | <option value="XXX">选项n的值</option> selected 设置默认选中值 |
提交按钮，重置按钮，普通按钮还可以写在 button 标签里，button 有起始标签和终止标签。
| 属性 | 描述 |
|---|---|
| autocomplete | on / off 开启 / 关闭自动补全 |
| readonly | 将表单项设置为只读，数据会提交 |
| disabled | 将表单项设置为禁用，数据不会提交 |
| autofocus | 设置表单项自动获取焦点 |
扫一扫
9266
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
