外观
HTML 笔记（简洁版）
html
__ __ ______ __ __ __
/\ \_\ \ /\__ _\ /\ "-./ \ /\ \
\ \ __ \ \/_/\ \/ \ \ \-./\ \ \ \ \____
\ \_\ \_\ \ \_\ \ \_\ \ \_\ \ \_____\
\/_/\/_/ \/_/ \/_/ \/_/ \/_____/一、HTML5 简介
1.1 什么是 HTML5？
HTML5是HTML最新的修订版本，由万维网联盟（W3C）于 2014 年 10 月完成标准制定。目标是取代 1999 年所制定的HTML 4.01 和XHTML 1.0 标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。广义论及 HTML5 时，实际指的是包括 HTML、CSS 和 JavaScript 在内的一套技术组合。它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务（Plug-in-Based Rich Internet Application，RIA）。
1.2 HTML5 新特性概述
HTML5添加了许多新的语法特征，其中包括<video>、<audio>和<canvas>元素，同时集成了SVG内容。这些元素是为了更容易地在网页中添加和处理多媒体和图片内容而添加的。其它新的元素如<section>、<article>、<header>和<nav>则是为了丰富文档的数据内容。新的属性的添加也是为了同样的目的。同时也有一些属性和元素被移除掉了。一些元素，像<a>、<cite>和<menu>被修改，重新定义或标准化了。同时 APIs 和 DOM 已经成为 HTML5 中的基础部分了。HTML5 还定义了处理非法文档的具体细节，使得所有浏览器和客户端程序能够一致地处理语法错误。
二、HTML5 基础
2.1 HTML5 文档结构
标准模板（vscode自动生成）
html
<!DOCTYPE html>
<html lang="en">
<!-- lang="en" 语言() -->
<head>
<meta charset="UTF-8">
<!-- charset="UTF-8" 编码-->
<title>网页标题</title>
</head>
<body>
<!-- 这是注解-->
</body>
</html>| 标签 | 说明 |
|---|---|
<!DOCTYPE html> | 表示文档类型，告诉浏览器如何解析网页。不可省略。 |
<html> | 网页的顶层容器，即标签树结构的顶层节点，也称为根元素，一个网页只能有一个<html>标签。 |
<head> | 容器标签，用于放置网页的元信息。 |
<title> | 用于指定网页的标题，会显示在浏览器窗口的标题栏。 |
<body> | 容器标签，用于放置网页的主体内容。 |
<meta> | 设置或说明网页的元数据，必须放在<head>里面。 |
<!-- --> | 注释，浏览器会自动忽略，不会呈现在页面上。 |
2.2 HTML5 标签和元素
HTML5 中有许多标签和元素，用于创建网页内容，并提供各种不同的功能。
- 文本级标签：p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素。（a标签里不能放a和input）
- 容器级标签：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。
文本标签
| 标签 | 描述 |
|---|---|
<h1>—<h6> | 标题标签。标题使用标签进行定义。<h1>定义最大的标题，<h6>定义最小的标题。 |
<p> | 段落标签。可以把 HTML 文档分割为若干段落。 |
<br> | 换行标签。使某段文本强制换行显示，就需要使用换行标签。 |
<hr> | 水平线标签。水平分隔线可以在视觉上将文档分隔成各个部分。 |
<div> | 通用标签，表示一个区块（division）。不带有任何语义。 |
<span> | 通用目的的行内标签（即不会产生换行），不带有任何语义。 |
<div>和<span>标签
div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。
- div标签：块级元素，用于创建一个独立的块，可以把标签中的内容分割为独立的区块。
- span标签：行内元素，用于包裹文本或其他行内元素。
字体标签
特殊字符（转义字符）
| 特殊字符 | 描述 | 字符的代码 |
|---|---|---|
| 空格符 | |
< | 小于号 | < |
> | 大于号 | > |
& | 和号 | & |
￥ | 人民币 | ¥ |
© | 版权 | © |
® | 注册商标 | ® |
° | 摄氏度 | ° |
± | 正负号 | ± |
× | 乘号 | × |
÷ | 除号 | ÷ |
² | 平方2（上标2） | ² |
³ | 立方3（上标3） | ³ |
字体样式标签
<u>：下划线标记<s>或<del>：中划线标记（删除线）<i>或<em>：斜体标记<b>或<strong>：粗体<sup>和<sub>：上标和下标
图像标签
使用<img>标签可以在网页中显示图像，它是一个单标签（自闭合标签）。
html
<img src="path" alt="text" title="text" width="x" height="y" />能插入的图片类型
注意：HTML页面不是直接插入图片，而是插入图片的引用地址。
- 能够插入的图片类型是：jpg(jpeg)、gif、png、bmp等。
- 不能往网页中插入的图片格式是：psd、ai等。
图像标签的属性
src：指图片的引用路径。（相对路径、绝对路径均可）。alt：当图片不可用（无法显示）的时候，代替图片显示的内容。title：提示性文本。当鼠标悬停到图片的提示文字。width和height：图像宽度和图像高度。align：：图片和周围文字的相对位置。属性取值可以是：bottom（默认）、center、top、left、right。
链接标签
通过<a>标签表示，用户点击后，浏览器会跳转到指定的网址。
注意：
<a>标签是文本级标签（a标签里不能放a和input）。
外部链接
html
<a href="path" target="目标窗口位置">链接文本或图像</a>属性
href（hypertext reference）：超文本地址。target（可选）：指定链接如何在浏览器中打开。_self：当前窗口打开，这是默认值。_blank：新窗口打开。
title（可选）：提供链接的额外信息，通常在鼠标悬停在链接上时显示为工具提示。rel（可选）：指定与链接目标的关系，如 nofollow、noopener 等。download：使链接用于下载文件。
锚链接
锚链接的作用是在本页面或者其他页面的的不同位置进行跳转。
使用name属性或者id属性给特定的位置设置标识。
html
<!--跳转标记-->
<h1 id="top"></a>
<!--锚标记-->
<!--锚标签 在 href 属性中要用 # 标记-->
<a href="#top"></a>
<!-- 跳转a.html页面的top锚点-->
<a href="a.html#top">回到顶部</a>邮件链接
指向一个邮件地址，使用mailto协议。用户点击后，浏览器会打开本机默认的邮件程序，让用户向指定的地址发送邮件。
html
<a href="mailto:邮件地址"></a>除了邮箱，邮件协议还允许指定其他几个邮件要素。
subject：主题cc：抄送bcc：密送body：邮件内容
使用方法是将这些邮件要素，以查询字符串的方式，附加在邮箱地址后面。
额外：电话链接
如果是手机浏览的页面，还可以使用
tel协议，创建电话链接。用户点击该链接，会唤起电话，可以进行拨号。html<a href="tel:13312345678">13312345678</a>
行内元素和块元素
行内元素（Inline Elements）：
- 行内元素用于包裹文本或其他行内元素。
- 它们不会独占一行，而是在一行上水平排列。
- 行内元素的宽度和高度由内容决定，无法设置宽度、高度、上下的内边距和外边距。
- 一些常见的行内元素包括
<a>（链接）、<span>（文本容器）、<em>（强调文本）等。
块元素（Block Elements）：
- 块元素用于包裹大段的内容，如段落、标题、列表等。
- 它们会在页面上创建一个独立的块，通常会独占一行或一整个父元素的宽度。
- 块元素可以设置宽度、高度、内边距、外边距等样式属性。
- 一些常见的块元素包括
<div>（通用容器）、<p>（段落）、<h1>-<h6>（标题）、<ul>（无序列表）等。
2.5 HTML5 列表、表格和框架
列表标签
有序列表
type="属性值"。属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。结合start属性表示从几开始。
html
<ol>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
</ol>无序列表
- li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。
- 我们这里再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。
属性
type="属性值"。属性值可以选：disc(实心原点，默认)，square(实心方点)，circle(空心圆)。 效果如下：
html
<ul>
<li>列表内容</li>
<li>列表内容</li>
<li>列表内容</li>
</ul>自定义列表
dl的子元素只能是dt和dd。（dt、dd 都是容器级标签）
<dt>：definition title 列表的标题，这个标签是必须的<dd>：definition description 列表的列表项，如果不需要它，可以不加
注意：dt、dd只能在dl里面；dl里面只能有dt、dd。
html
<dl>
<dt>列表名称</dt>
<dd>列表内容</dd>
<dd>列表内容</dd>
<dd>列表内容</dd>
</dl>表格标签
表格标签用<table>表示。 一个表格<table>是由每行<tr>组成的，每行是由每个单元格<td>组成的。
html
<table>
<caption>表格的标题</caption>
<tr>
<th> 头</th>
<td colspan="1">文</td>
</tr>
<th> 头</th>
<tr>
<tr rowspan="1">文</tr>
</tr>
</table>tr：行td：单元格<th>：加粗的单元格。<caption>：表格的标题。rowspan：纵向合并。例如rowspan="2"表示当前单元格在垂直方向上要占据两个单元格的位置。colspan：横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。
属性
border：边框。像素为单位。width：宽度。像素为单位。height：高度。像素为单位。bordercolor：表格的边框颜色。align：表格的水平对齐方式。属性值可以填：leftrightcenter。dir：公有属性，单元格内容的排列方式(direction)。
<tr>行
一个表格就是一行一行组成的。
属性
height：一行的高度。align：一行的内容水平居中显示，取值：left、center、rightvalign：一行的内容垂直居中，取值：top、middle、bottom`
<td>单元格
每行是由每个单元格<td>组成的
属性
align：内容的横向对齐方式。valign：内容的纵向对齐方式。width：绝对值或者相对值(%)。height：单元格的高度。
表格的<thead>标签、<tbody>标签、<tfoot>标签
这三个标签有与没有的区别：
| 有 | 没有 |
|---|---|
| 浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容。 | 浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。 |
| 当表格非常大内容非常多的时候，数据可以边获取边显示。 | 必须等表格的内容全部从服务器获取完成才能显示出来。 |
框架标签
如果我们希望在一个网页中显示多个页面，那框架标签就派上用场了。
- 注意，框架标签不能放在
<body>标签里面，因为<body>标签代表的只是一个页面，而框架标签代表的是多个页面。于是：<frameset>和<body>只能二选一。- 框架的集合用
<frameset>表示，然后在<frameset>集合里放入一个一个的框架<frame>
补充：frameset和frame已经从 Web标准中删除，建议使用 iframe 代替。
<frameset>：框架的集合
一个框架的集合可以包含多个框架或框架的集合。属性：
rows：水平分割，将框架分为上下部分。写法有两种：
1、绝对值写法：rows="200,*" 其中*代表剩余的。这里其实包含了两个框架：上面的框架占200个像素，下面的框架占剩下的部分。
2、相对值写法：rows="30%,*" 其中*代表剩余的。这里其实包含了两个框架：上面的框架占30%，下面的框架占70%。
注：如果你想将框架分成很多行，在属性值里用逗号隔开就行了。
cols：垂直分割，将框架分为左右部分。写法有两种：
1、绝对值写法：cols="200,*" 其中*代表剩余的。这里其实包含了两个框架：左边的框架占200个像素，右边的框架占剩下的部分。
2、相对值写法：cols="30%,*" 其中*代表剩余的。这里其实包含了两个框架：左边的框架占30%，右边的框架占70%。
注：如果你想将框架分成很多列，在属性值里用逗号隔开就行了。
<frame>：框架
一个框架显示一个页面。
属性：
scrolling="no"：是否需要滚动条。默认值是true。noresize：不可以改变框架大小。默认情况下，单个框架的边界是可以拖动的，这样的话，框架大小就不固定了。如果用了这个属性值，框架大小将固定。
举例：
html
<frame src="top.html" noresize></frame>1
bordercolor="#00FF00"：给框架的边框定义颜色。这个属性在框架集合<frameset>中同样适用。 颜色这个属性在IE浏览器中生效，但是在google浏览器中无效，不知道为啥。frameborder="0"或frameborder="1"：隐藏或显示边框（框架线）。name：给框架起一个名字。
利用name这个属性，我们可以在框架里进行超链。
内嵌框架
内嵌框架用<iframe>表示。<iframe>是<body>的子标记。
内嵌框架inner frame：嵌入在一个页面上的框架(仅仅IE、新版google浏览器支持，可能有其他浏览器也支持，暂时我不清楚)。
属性：
src="subframe/the_second.html"：内嵌的那个页面width=800：宽度height=“150：高度scrolling="no"：是否需要滚动条。默认值是true。name="mainFrame"：窗口名称。公有属性。
2.4 HTML5 全局属性
HTML5 全局属性是可以应用于所有 HTML 元素的属性。这些属性提供了一些通用的功能和行为，可以在任何元素上使用。
以下是一些常见的 HTML5 全局属性：
| 全局属性 | 说明 |
|---|---|
class | 指定元素的一个或多个类名，用于定义元素的样式或标识元素的类型。 |
id | 为元素指定一个唯一的标识符。 |
style | 用于为元素指定内联样式。 |
title | 提供关于元素的额外信息，通常以工具提示的形式显示。 |
lang | 指定元素内容的语言。 |
data-* | 用于存储自定义数据，可以通过 JavaScript 访问。 |
draggable | 指定元素是否可以拖动。 |
hidden | 表示元素是否隐藏。 |
contenteditable | 指定元素的内容是否可编辑。 |
spellcheck | 指定元素是否启用拼写检查。 |
lang | 指定网页元素使用的语言。 |
dir | 表示文字的阅读方向，有三个可能的值ltr、rtl 和auto。 |
2.5 HTML5 表单
表单
表单标签用<form>表示，用于与服务器的交互。表单就是收集用户信息的，就是让用户填写的、选择的。
html
<form method="post" action="result.html">
<p>名字:<input name="name" type="text"> </p>
<p>密码:<input name="pass" type="password"> </p>
<p>
<input type="submit" name="Button" value="提交"/>
<input type="reset" name="Reset" value="重填"/>
</p>
</form>属性
name：表单的名称，用于JS来操作或控制表单时使用；id：表单的名称，用于JS来操作或控制表单时使用；action：指定表单数据的处理程序，一般是PHP，如：action=“login.php”method：表单数据的提交方式，一般取值：get(默认)和post
注意：表单和表格嵌套时，是在<form>标记中套<table>标记。
GET和POST的区别：
GET方式： 将表单数据以键值对形式追加到地址后面。只适合提交少量信息，并且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII字符。
POST方式： 将表单数据直接发送(隐藏)到指定的处理程序。可以提交海量信息，相对来说安全一些，提交的数据格式是多样的。
Enctype： 表单数据的编码方式(加密方式)，Enctype只能在POST方式下使用。
- Application/x-www-form-urlencoded：默认加密方式，除了上传文件之外的数据都可以。
- Multipart/form-data：上传附件时，必须使用这种编码方式。
输入标签（文本框）
用于接收用户输入。
html
<input type="text" />属性
type="属性值"：文本类型。name：指定表单元素的名称。value：元素的初始值。type为radio时必须指定一个值siza：指定表单元素的初始宽度。当type为text或password时，表单元素的大小以字符为单位，其他类型以像素为单位。maxlength：type为text或password时，输入的最大字符数。checked：将单选按钮或多选按钮默认处于选中状态。hidden：隐藏框，在表单中包含不希望用户看见的信息。readonly：文本框只读，不能编辑。disabled：文本框禁用，不能编辑，光标点不进去。
以下是type可选的属性值
text（默认） | 输入框。 |
password | 输入密码框。 |
file | 文件选择框。 |
search | 搜索的文本输入框。 |
email | 只能输入电子邮箱的文本输入框。 |
radio | 单选按钮，name 属性值相同的按钮作为一组进行单选。 |
checkbox | 多选按钮，name 属性值相同的按钮作为一组进行选择。 |
button | 普通按钮，结合js代码进行使用。（推荐使用<button>标签代替）。 |
submit | 提交按钮，传送当前表单的数据到action属性的地址。 |
reset | 重置按钮，清空当前表单的内容，并设置为最初的默认值。 |
image | 图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。 |
range | 一个滑块，用户拖动滑块，选择给定范围之中的一个数值。 |
color | 颜色选择的控件。 |
number | 数字输入框，只能输入数字。 |
url | 网址的文本框。自动检查网址格式。 |
tel | 电话号码的输入框。 |
date | 日期的输入框，年月日。 |
time | 时间的输入框，时分秒。 |
month | 年份和月份的输入框。 |
week | 第几周的输入框。 |
datetime-local | 时间输入框，年月日和时分。 |
注意：多个单选框的input标签中，name 的属性值可以相同，但是 id 的属性值必须是唯一的。
html
<form>
姓名：<input value="呵呵" >逗比<br>
昵称：<input value="哈哈" readonly=""><br>
名字：<input type="text" value="name" disabled=""><br>
密码：<input type="password" value="pwd" size="50"><br>
性别：<input type="radio" name="gender" id="radio1" value="male" checked="">男
<input type="radio" name="gender" id="radio2" value="female" >女<br>
爱好：<input type="checkbox" name="love" value="eat">吃饭
<input type="checkbox" name="love" value="sleep">睡觉
<input type="checkbox" name="love" value="bat">打豆豆
</form>按钮标签
<button>标签会生成一个可以点击的按钮，没有默认行为，通常需要用type属性或脚本指定按钮的功能。
<button>内部不仅放置文字，还可以放置图像，这可以形成图像按钮。
属性
autofocus：布尔属性，表示网页加载时，焦点就在这个按钮。网页里面只能有一个元素，具有这个属性。disabled：布尔属性，表示按钮禁用。type：按钮的类型，可能的值有三种：submit（点击后将数据提交给服务器），reset（将所有控件的值重置为初始值），button（没有默认行为，由脚本指定按钮的行为）。
html
<button name="search" type="submit">
<img src="search.gif">搜索
</button>下拉列表标签
<select>标签里面的每一项用<option>表示。select就是“选择”，option“选项”。（select标签和ul、ol、dl一样，都是组标签。）
<select>标签属性
multiple：可以对下拉列表中的选项进行多选。size="3"：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。
<option>标签属性
selected：预选中。
html
<form>
<select multiple size="5">
<option>小学</option>
<option>初中</option>
<option selected>高中</option>
<option selected>大学</option>
<option>研究生</option>
</select>
</form>文本域标签
<textarea>text 就是“文本”，area 就是“区域”。
属性
rows="4"：指定文本区域的行数。cols="20"：指定文本区域的列数。readonly：只读。
html
<form>
<textarea name="txtInfo" rows="4" cols="20">hello,world</textarea>
</form><label>标签
<label>标签为输入元素定义标注（marking）。
在 label 元素内点击文本，就会触发此控件。也就是说，当用户选择该标签时，就会浏览器自动将焦点转移到与标签相关的表单控件上。
注意：
<label>标签的属性应当与相关元素的id属性相同。
html
<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
<input type="radio" name="sex" id="nv" /> <label for="nv">女</label>下面的区域以后再来“探索”吧