本文仓库：github.com/lkjhgfdsall… 欢迎在 GitHub 上关注我，一起入门和进阶前端。

HTML基础知识回顾

HTML的基本组成

元素

浏览器会把HTML源码解析为一颗树，每个标签都是一个节点，这种节点被称为元素所有元素可以分为两大类，即块级元素和行内元素。块级元素默认占据一个独立的区域，占据100%的宽度；行内元素与其他元素在同一行，不产生换行，通常用来为某些文字指定特别的样式。

属性

属性是标签的额外信息，使用空格与标签名和其他元素分隔，属性名大小写不敏感。

空格

HTML会忽略标签内容首尾部分的空格，内容中间多个连续空格将被合并成一个，换行符与回车符都会被替换为空格

注释

HTML使用

<!-- 这是一个注释 -->

这样的方式注释

基本标签

这里仅仅罗列部分常见的标签

排版标签

<h1>

标题使用<h1>至<h6>标签进行定义。<h1>定义最大的标题，<h6>定义最小的标题。具有align属性，属性值可以是：left、center、right。

<p>

<p>标签是一个块级元素，代表文章的一个段落p标签是一个文本级标签，p里面只能放文字、图片、表单元素

<hr />

水平分隔线，可以在视觉上将文档分隔成各个部分。该标签是单独使用的，没有闭合标签。常用属性：（1）align="属性值"：设定线条置放位置。属性值可选择：left right center。（2）size="2" ：设定线条粗细。以像素为单位，内定为2。（3）width="500"或width="70%"：设定线条长度。可以是绝对值（单位是像素）或相对值。如果设置为相对值的话，内定为100%。（4）color="#0000FF"：设置线条颜色。（5）noshade：不要阴影，即设定线条为平面显示。若没有这个属性则表明线条具阴影或立体。

<br />，<wbr />

二者都为换行标签，可以使某段文本强制换行显示其中<br />是直接在该处换行，<wbr />会进行一个宽度的判断，若宽度不够则在该处换行，否则不换注意，块级元素的间隔，不要使用这俩标签来产生，而要使用 CSS 指定。

<div>

可以把标签中的内容分割为独立的区块。必须单独占据一行。算是最最常用到的标签了

<span>

和div作用差不多，但是不会换行，一般用来对某些行内内容指定样式

<pre>

可以保留该标签内部原始的换行和空格。浏览器默认以等宽字体显示标签内容。注意，HTML 标签在<pre>里面还是起作用的。<pre>只保留空格和换行，不会保留 HTML 标签。

字体标签与超链接

字体标签

<font>

可以通过face，size，color这三个属性定义文本的字体、大小和颜色现在已经废弃了

<strong>，<b>

二者都能加粗内容，但<b>没有语义，不推荐使用

<u> ，<s>

u标签为下划线，s标签为删除线

<sup>，<sub>

sup会将内容变为上标，sub会将内容变为下标

超链接标签

<a>

链接标签，用户点击后，浏览器会跳转到指定的网址。该标签内部不仅可以放置文字，也可以放置其他元素，比如段落、图像、多媒体等等。常用属性：（1）href：给出链接指向的网址。它的值应该是一个 URL 或者锚点。（2）hreflang：给出链接指向的网址所使用的语言，纯粹是提示性的，没有实际功能。（3）title：给出链接的说明信息。鼠标悬停在链接上方时，浏览器会将这个属性的值，以提示块的形式显示出来。（4）target：指定如何展示打开的链接。它可以是在指定的窗口打开，也可以在<iframe>里面打开。

<p><a href="http://11.com" target="test">foo</a></p>
<p><a href="http://22.com" target="test">bar</a></p>

上面代码中，两个链接都在名叫test的窗口打开。首先点击链接11，浏览器发现没有叫做test的窗口，就新建一个窗口，起名为test，在该窗口打开11.com。然后，用户又点击链接22，由于已经存在test窗口，浏览器就在该窗口打开22.com取代里面已经打开的foo.com target属性的值也可以是_self（当前窗口打开，这是默认值）；_blank（新窗口打开）；_parent(上层窗口打开，这通常用于从父窗口打开的子窗口，或者<iframe>里面的链接。如果当前窗口没有上层窗口，这个值等同于_self）；_top（顶层窗口打开。如果当前窗口就是顶层窗口，这个值等同于_self）注意，使用target属性的时候，最好跟rel="noreferrer"一起使用，这样可以避免安全风险。

<link>

主要用于将当前网页与相关的外部资源联系起来，通常放在<head>元素里面。

<link rel="stylesheet" type="text/css" href="123.css">

上面代码为网页加载样式表123.css

<link href="1.css" rel="stylesheet" title="moren1">
<link href="2.css" rel="alternate stylesheet" title="qiehuan2">
<link href="3.css" rel="alternate stylesheet" title="qiehuan3">

上面代码中，1.css是默认样式表，默认就会生效。2.css，3.css是替换样式表（rel="alternate stylesheet"），默认不生效。title属性在这里是必需的，用来在浏览器菜单里面列出这些样式表的名字，供用户选择，以替代默认样式表。

<link>还可以加载网站的 favicon 图标文件。

<link rel="icon" href="/favicon.ico" type="image/x-icon">

常用的rel属性：

preload 令浏览器尽快下载并缓存资源（如脚本或样式表），该指令优先级较高，浏览器肯定会执行。下载后，浏览器不会对资源执行任何操作，脚本未执行，样式表未应用。它只是缓存，当其他东西需要它时，它立即可用。

prefetch 与preload类似，但优先级较低在rel="preload"或rel="prefetch"时，可以使用as设置外部资源的类型，包括"script""style""image""media""document"这几种，如果不指定as属性，或者它的值是浏览器不认识的，那么浏览器会以较低的优先级下载这个资源。

preconnect 令浏览器提前与某个域名建立tcp连接

prerender 令浏览器提前渲染某个网页

图片标签

<img> 能够在网页上显示图像，且是一个单标签，没有闭合标签。默认是一个行内元素，与前后的文字处在同一行。图像默认以原始大小显示。如果图片很大，又与文字处在同一行，那么图片将把当前行的行高撑高，并且图片的底边与文字的底边在同一条水平线上。可以放在<a>标签内部，使得图片变成一个可以点击的链接。

常用属性（1）alt 属性用来设定图片的文字说明。图片不显示时，图片的位置上会显示该文本。

（2）width 属性，height 属性图片默认以原始大小插入网页，这两个属性可以指定图片显示时的宽度和高度，单位是像素或百分比。 注意，一旦设置了这两个属性，浏览器会在网页中预先留出这个大小的空间，不管图片有没有加载成功。 两个属性只设置了一个，浏览器会根据图像原本的大小，自动设置成比例的宽度或高度

（3）srcset 用来指定多张图像，适应不同像素密度的屏幕。它的值是一个逗号分隔的字符串，每个部分都是一张图像，后面接一个空格，然后是像素密度的描述符。具体如下

<img srcset="1.jpg,
             2.jpg 1.5x,
             3.jpg 2x"
     src="3.jpg">

如果srcset属性都不满足条件，那么就加载src属性指定的默认图像。 注意，图像后面的像素密度描述符，格式是像素密度倍数 + 字母x，其中字母x可以省略

（4）sizes 该属性可以给出数种屏幕条件，以及对应的图像显示宽度，浏览器根据当前设备的宽度，从该属性获得图像的显示宽度，然后从srcset属性找出最接近该宽度的图像，进行加载。

<img srcset="1.jpg 160w,
             2.jpg 320w,
             3.jpg 640w,
             4.jpg 1280w"
     sizes="(max-width: 440px) 100vw,
            (max-width: 900px) 33vw,
            254px"
     src="4.jpg">

一旦使用sizes属性，就必须与srcset属性搭配使用，单独使用sizes属性是无效的。

（5）title 属性提示性文本，鼠标悬停时出现的文本。

（6）loading属性可以指定图片的懒加载，即图片默认不加载，只有即将滚动进入视口，变成用户可见时才会加载 loading属性可以取auto（浏览器默认行为，等同于不使用loading属性），lazy（启用懒加载），eager（立即加载资源，无论它在页面上的哪个位置）这三个值。 由于行内图片的懒加载，可能会导致页面布局重排，所以使用这个属性的时候，最好指定图片的高和宽。

（7）align属性图片和周围文字的相对位置。属性取值可以是：bottom（默认）、center、top、left、right。如果想实现图文混排的效果，请使用align属性，取值为left或right。

<figure>，<figcaption> <figure>标签可以理解为一个图像区块，将图像和相关信息封装在一起。<figcaption>是它的可选子元素，表示图像的文本描述，通常用于放置标题，可以出现多个。

<figure>
  <img src="1.jpg">
  <figcaption>示例图片</figcaption>
</figure>

<picture> 一个容器标签，内部使用<source>和<img>，指定不同情况下加载的图像。 <picture>内部的<source>标签，主要使用media属性和srcset属性。media属性给出媒体查询表达式，srcset属性就是<img>标签的srcset属性，给出加载的图像文件。sizes属性其实这里也可以用，但由于有了media属性，就没有必要了。浏览器按照<source>标签出现的顺序，依次判断当前设备是否满足media属性的媒体查询表达式，如果满足就加载srcset属性指定的图片文件，并且不再执行后面的<source>标签和<img>标签。 <img>标签是默认情况下加载的图像，用来满足上面所有<source>都不匹配的情况，或者不支持<picture>的老式浏览器。

多媒体标签

<video>

块级元素，用于放置视频。如果浏览器支持加载的视频格式，就会显示一个播放器，否则显示<video>内部的子元素。

常见属性：（1）src：视频文件的网址。（2）controls：播放器是否显示控制栏。该属性是布尔属性，不用赋值，只要写上属性名，就表示打开。如果不想使用浏览器默认的播放器，而想使用自定义播放器，就不要使用该属性。（3）width：视频播放器的宽度，单位像素。（4）height：视频播放器的高度，单位像素。（5）autoplay：视频是否自动播放，该属性为布尔属性。（6）loop：视频是否循环播放，该属性为布尔属性。（7）muted：是否默认静音，该属性为布尔属性。（8）poster：视频播放器的封面图片的 URL。（9）preload：视频播放之前，是否缓冲视频文件。这个属性仅适合没有设置autoplay的情况。它有三个值，分别是none（不缓冲）、metadata（仅仅缓冲视频文件的元数据）、auto（可以缓冲整个文件）。（10）crossorigin：是否采用跨域的方式加载视频。它可以取两个值，分别是anonymous（跨域请求时，不发送用户凭证，主要是 Cookie），use-credentials（跨域时发送用户凭证）。

<audio>

块级元素，用于放置音频，用法与<video>标签基本一致。 <audio>标签内部使用<source>标签，可以指定要播放的音频格式

<audio>标签的属性与<video>标签类似常见标签：（1）autoplay：是否自动播放，布尔属性。（2）controls：是否显示播放工具栏，布尔属性。如果不设置，浏览器不显示播放界面，通常用于背景音乐。（3）loop：是否循环播放，布尔属性。（4）muted：是否静音，布尔属性。（5）preload：音频文件的缓冲设置。（6）src：音频文件网址。

<embed> 用于嵌入外部内容，这个外部内容通常由浏览器插件负责控制。由于浏览器的默认插件都不一致，很可能不是所有浏览器的用户都能访问这部分内容常见属性：（1）height：显示高度，单位为像素，不允许百分比。（2）width：显示宽度，单位为像素，不允许百分比。（3）src：嵌入的资源的 URL。（4）type：嵌入资源的 MIME 类型
<object>，<param> 作用跟<embed>相似，也是插入外部资源，由浏览器插件处理

表单标签

<form> 用来定义一个表单，所有表单内容放到这个容器元素之中。常用属性：（1）name：表单的名称，应该在网页中是唯一的。 注意，如果一个控件没有设置name属性，那么这个控件的值就不会作为键值对，向服务器发送。 （2）action：服务器接收数据的 URL。（3）method：提交数据的 HTTP 方法（4）enctype：当method属性等于post时，该属性指定提交给服务器的 MIME 类型。可能的值为application/x-www-form-urlencoded（默认值），multipart/form-data（文件上传的情况），text/plain。（5）target：在哪个窗口展示服务器返回的数据，可能的值有_self（当前窗口），_blank（新建窗口），_parent（父窗口），_top（顶层窗口），<iframe>标签的name属性（即表单返回结果展示在<iframe>窗口）。
<input> 行内元素，用来接收用户的输入。它是一个单独使用的标签，没有结束标志。常用元素：（1）type：控件类型 后面详细讲 （2）value：文本框里的默认内容（已经被填好了的）（3）name：控件的名称，主要用于向服务器提交数据时，控件键值对的键名。 注意，只有设置了name属性的控件，才会向服务器提交，不设置就不会提交。 （4）readonly：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。（5）form：关联表单的id属性。设置了该属性后，控件可以放置在页面的任何位置，否则只能放在<form>内部。（6）autofocus：布尔属性，是否在页面加载时自动获得焦点。（7）disabled：布尔属性，是否禁用该控件。一旦设置，该控件将变灰，用户可以看到，但是无法操作。

控件类型： （1）text 普通的文本输入框配套属性： [1]maxlength：可以输入的最大字符数，值为一个非负整数。 [2]minlength：可以输入的最小字符数，值为一个非负整数，且必须小于maxlength。 [3]pattern：用户输入必须匹配的正则表达式，比如要求用户输入4个～8个英文字符，可以写成[4]pattern="[a-z]{4,8}"。如果用户输入不符合要求，浏览器会弹出提示，不会提交表单。 [5]placeholder：输入字段为空时，用于提示的示例值。只要用户没有任何字符，该提示就会出现，则会消失。 [6]readonly：布尔属性，表示该输入框是只读的，用户只能看，不能输入。 size：表示输入框的显示长度有多少个字符宽，它的值是一个正整数，默认等于20。超过这个数字的字符，必须移动光标才能看到。 [7]spellcheck：是否对用户输入启用拼写检查，可能的值为true或false。

（2）search 一个用于搜索的文本输入框

（3）button 没有默认行为的按钮

（4）submit 表单的提交按钮有以下配套属性，用来覆盖<form>标签的相应设置 [1]formaction：提交表单数据的服务器 URL。 [2]formenctype：表单数据的编码类型。 [3]formmethod：提交表单使用的 HTTP 方法（get或post）。 [4]formnovalidate：一个布尔值，表示数据提交给服务器之前，是否要忽略表单验证。 [5]formtarget：收到服务器返回的数据后，在哪一个窗口显示。

（5）image 将一个图像文件作为提交按钮行为和用法与type="submit"完全一致。配套属性: [1]alt：图像无法加载时显示的替代字符串。 [2]src：加载的图像 URL。 [3]height：图像的显示高度，单位为像素。 [4]width：图像的显示宽度，单位为像素。 [5]formaction：提交表单数据的服务器 URL。 [6]formenctype：表单数据的编码类型。 [7]formmethod：提交表单使用的 HTTP 方法（get或post）。 [8]formnovalidate：一个布尔值，表示数据提交给服务器之前，是否要忽略表单验证。 [9]formtarget：收到服务器返回的数据后，在哪一个窗口显示。 用户点击图像按钮提交时，会额外提交两个参数x和y到服务器，表示鼠标的点击位置

（6）reset 重置按钮用户点击以后，所有表格控件重置为初始值。

（7）checkbox 复选框会在文字前面，显示一个可以点击的选择框，点击可以选中，再次点击可以取消。

（8）radio 单选框一组选择之中，只能选中一项。单选框通常为一个小圆圈，选中时会被填充或突出显示。配套属性： [1]checked：布尔属性，表示是否默认选中当前项。 [2]value：用户选中该项时，提交到服务器的值，默认为on'。

（9）password 密码输入框用户的输入会被遮挡，字符通常显示星号（*）或点（·）。配套属性： [1]maxlength：可以输入的最大字符数。 [2]minlength：可以输入的最少字符数。 [3]pattern：输入必须匹配的正则表达式。 [4]placeholder：输入为空时的显示文本。 [5]readonly：布尔属性，该输入框是否只读。 [6]size：一个非负整数，表示输入框的显示长度为多少个字符。 [7]autocomplete：是否允许自动填充，可能的值有on（允许自动填充）、off（不允许自动填充）、[8]current-password（填入当前网站保存的密码）、new-password（自动生成一个随机密码）。 [9]inputmode：允许用户输入的数据类型，可能的值有none（不使用系统输入法）、text（标准文本输入）、decimal（数字，包含小数）、numeric（数字0-9）等。

（10）file 文件选择框配套属性： [1]accept：允许选择的文件类型，使用逗号分隔，可以使用 MIME 类型（比如image/jpeg），也可以使用后缀名（比如.doc），还可以使用audio/（任何音频文件）、video/（任何视频文件）、image/*（任何图像文件）等表示法。 [2]capture：用于捕获图像或视频数据的源，可能的值有user（面向用户的摄像头或麦克风），environment（外接的摄像头或麦克风）。 [3]multiple：布尔属性，是否允许用户选择多个文件。

（11）hidden 不显示在页面的控件，用户无法输入它的值，主要用来向服务器传递一些隐藏信息。比如，CSRF 攻击会伪造表单数据，那么使用这个控件，可以为每个表单生成一个独一无二的隐藏编号，防止伪造表单提交。

（12）number 数字输入框配套属性： [1]max：允许输入的最大数值。 [2]min：允许输入的最小数值。 [3]placeholder：用户输入为空时，显示的示例值。 [4]readonly：布尔属性，表示该控件是否为只读。

（13）range 滑块配套属性： [1]max：允许的最大值，默认为100。 [2]min：允许的最小值，默认为0。 [3]step：步长值，默认为1。 value属性的初始值就是滑块的默认位置。如果没有设置value属性，滑块默认就会停在最大值和最小值中间。如果max属性、min属性、value属性都没有设置，那么value属性为50。

（14）url 只能输入网址的文本框配套属性： [1]maxlength：允许的最大字符数。 [2]minlength：允许的最少字符串。 [3]pattern：输入内容必须匹配的正则表达式。 [4]placeholder：输入为空时显示的示例文本。 [5]readonly：布尔属性，表示该控件的内容是否只读。 [6]size：一个非负整数，表示该输入框显示宽度为多少个字符。 [7]spellcheck：是否启动拼写检查，可能的值为true（启用）和false（不启用）。 该类型与<datalist>标签搭配使用，可以形成下拉列表供用户选择。随着用户不断键入，会缩小显示范围，只显示匹配的备选项。

（15）color 选择颜色的控件

（16）date 只能输入日期的输入框，可以输入年月日配套属性： [1]max：可以允许的最晚日期，格式为yyyy-MM-dd。 [2]min：可以允许的最早日期，格式为yyyy-MM-dd。 [3]step：步长值，一个数字，以天为单位。

（17）time 只能输入时间的输入框，可以输入时分秒配套属性： [1]max：允许的最晚时间。 [2]min：允许的最早时间。 [3]readonly：布尔属性，表示用户是否不可以编辑时间。 [4]step：步长值，单位为秒。

（18）month 只能输入时间的输入框，可以输入年月配套属性： [1]max：允许的最晚时间。 [2]min：允许的最早时间。 [3]readonly：布尔属性，表示用户是否不可以编辑时间。 [4]step：步长值，单位为月。

（19）week 输入一年中第几周的输入框配套属性： [1]max：允许的最晚时间。 [2]min：允许的最早时间。 [3]readonly：布尔属性，表示用户是否不可以编辑时间。 [4]step：步长值，单位为周。

（20）datetime-local 只能输入时间的输入框，可以输入年月日和时分不支持秒配套属性： [1]max：允许的最晚时间。 [2]min：允许的最早时间。 [3]step：步长值，单位为秒，默认值是60。

<select>，<option> 用于生成一个下拉菜单。里面的每一项用<option>表示。 <option>有一个布尔属性selected，一旦设置，就表示该项是默认选中的菜单项。 <select>常见属性：（1）autofocus：布尔属性，页面加载时是否自动获得焦点。（2）disabled：布尔属性，是否禁用当前控件。（3）form：关联表单的id属性。（4）multiple：布尔属性，是否可以选择多个菜单项。默认情况下，只能选择一项。一旦设置，多数浏览器会显示一个滚动列表框。用户可能需要按住Shift或其他功能键，选中多项。（5）name：控件名。（6）required：布尔属性，是否为必填控件。（7）size：设置了multiple属性时，页面显示时一次可见的行数，其他行需要滚动查看。 <option>常见属性：（1）disabled：布尔属性，是否禁用该项。（2）label：该项的说明。如果省略，则等于该项的文本内容。（3）selected：布尔属性，是否为默认值。显然，一组菜单中，只能有一个菜单项设置该属性。（4）value：该项提交到服务器的值。如果省略，则等于该项的文本内容。
<textarea> 多行文本输入框常见属性：（1）autofocus：布尔属性，是否自动获得焦点。（2）cols：文本框的宽度，单位为字符，默认值为20。（3）disabled：布尔属性，是否禁用该控件。（4）form：关联表单的id属性。（5）maxlength：允许输入的最大字符数。如果未指定此值，用户可以输入无限数量的字符。（6）minlength：允许输入的最小字符数。（7）name：控件的名称。（8）placeholder：输入为空时显示的提示文本。（9）readonly：布尔属性，控件是否为只读。（10）required：布尔属性，控件是否为必填。（11）rows：文本框的高度，单位为行。（12）wrap：输入的文本是否自动换行。可能的值有hard（浏览器自动插入换行符CR + LF，使得每行不超过控件的宽度），soft（输入内容超过宽度时自动换行，但不会加入新的换行符，并且浏览器保证所有换行符都是CR + LR，这是默认值），off（关闭自动换行，单行长度超过宽度时，会出现水平滚动条）。
<label> 提供控件的文字说明常见属性：（1）for：关联控件的id属性。（2）form：关联表单的id属性。设置了该属性后，<label>可以放置在页面的任何位置，否则只能放在<form>内部。 有些控件比较小（比如单选框），不容易点击，那么点击对应的<label>标签，也能选中该控件。点击<label>，就相当于控件本身的click事件。
<button> 一个可以点击的按钮内部可以放置文字和图像常用属性：（1）autofocus：布尔属性，表示网页加载时，焦点就在这个按钮。网页里面只能有一个元素，具有这个属性。（2）disabled：布尔属性，表示按钮不可用，会导致按钮变灰，不可点击。 name：按钮的名称（与value属性配合使用），将以name=value的形式，随表单一起提交到服务器。（3）value：按钮的值（与name属性配合使用），将以name=value的形式，随表单一起提交到服务器。（4）type：按钮的类型，可能的值有三种：submit（点击后将数据提交给服务器），reset（将所有控件的值重置为初始值），button（没有默认行为，由脚本指定按钮的行为）。（5）form：指定按钮关联的<form>表单，值为<form>的id属性。如果省略该属性，默认关联按钮所在父表单。（6）formaction：数据提交到服务器的目标 URL，会覆盖<form>元素的action属性。（7）formmethod：数据提交到服务器使用的 HTTP 方法，会覆盖<form>元素的method属性，可能的值为post或get。（8）formtarget：数据提交到服务器后，展示服务器返回数据的窗口，会覆盖<form>元素的target属性。可能的值有_self（当前窗口），_blank（新的空窗口）、_parent（父窗口）、_top（顶层窗口）。

其他常见标签

列表标签：
- <ul> 无序列表会在内部的列表项前面产生实心小圆点，作为列表符号。 内部可以嵌套<ul>或<ol>，形成多级列表。
- <ol> 有序列表会在内部的列表项前面产生数字编号。 内部可以嵌套<ol>标签或<ul>标签，形成多级列表。 常见属性：（1）reversed：属性产生倒序的数字列表。（2）start：值是一个整数，表示数字列表的起始编号。（3）type：指定数字编号的样式，目前有a：小写字母；A：大写字母；i：小写罗马数字；I：大写罗马数字；1：整数（默认值）
- <dl>，<dt>，<dd> 定义列表没有属性。子元素只能是dt和dd。 <dt>是列表的标题，是必须的，<dd>是列表项，可以不加，<dt>和<dd>都是块级元素，<dd>默认会在<dt>下方缩进显示。
表格标签：
- <table> 块级容器标签，所有表格内容都要放在这个标签里面。
- <caption> <table>里面的第一个子元素，表示表格的标题，可以不写
- <thead>、<tbody>、<tfoot> 都是块级容器元素，且都是<table>的一级子元素，分别表示表头、表体和表尾。都可以不写
- <tr> 表示表格的一行如果表格有<thead>、<tbody>、<tfoot>，那么<tr>就放在这些容器元素之中，否则直接放在<table>的下一级
- <th>，<td> 定义表格的单元格 <th>是加粗的单元格，一般用作标题常见属性：（1）colspan，rowspan 前者表示单元格跨越的栏数，后者表示单元格跨越的行数。它们的值都是一个非负整数，默认为1。（2）align 表示标题相对于表格的位置。属性取值可以是：left、center、right、top、bottom 效果：
框架标签及内嵌框架：
- <iframe> 生成一个指定区域，在该区域中嵌入其他网页。它是一个容器元素，如果浏览器不支持<iframe>，就会显示内部的子元素。常用属性：（1）frameborder：是否绘制边框，0为不绘制，1为绘制（默认值）。建议尽量少用这个属性，而是在 CSS 里面设置样式。（2）src：嵌入的网页的 URL。（3）width：显示区域的宽度。（4）height：显示区域的高度。（5）sandbox：设置嵌入的网页的权限 下面详细讲 （6）importance：浏览器下载嵌入的网页的优先级，可以设置三个值。high表示高优先级，low表示低优先级，auto表示由浏览器自行决定。（7）name：内嵌窗口的名称 设置嵌入的网页的权限 嵌入的网页默认具有正常权限，比如执行脚本、提交表单、弹出窗口等。如果嵌入的网页是其他网站的页面，你不了解对方会执行什么操作，因此就存在安全风险。HTML 提供了sandbox属性，允许设置嵌入的网页的权限（1）allow-forms：允许提交表单。（2）allow-modals：允许提示框，即允许执行window.alert()等会产生弹出提示框的 JavaScript 方法。（3）allow-popups：允许嵌入的网页使用window.open()方法弹出窗口。（4）allow-popups-to-escape-sandbox：允许弹出窗口不受沙箱的限制。（5）allow-orientation-lock：允许嵌入的网页用脚本锁定屏幕的方向，即横屏或竖屏。（6）allow-pointer-lock：允许嵌入的网页使用 Pointer Lock API，锁定鼠标的移动。（7）allow-presentation：允许嵌入的网页使用 Presentation API。（8）allow-same-origin：不打开该项限制，将使得所有加载的网页都视为跨域。（9）allow-scripts：允许嵌入的网页运行脚本（但不创建弹出窗口）。（10）allow-storage-access-by-user-activation：sandbox属性同时设置了这个值和allow-same-origin的情况下，允许<iframe>嵌入的第三方网页通过用户发起document.requestStorageAccess()请求，经由 Storage Access API 访问父窗口的 Cookie。（11）allow-top-navigation：允许嵌入的网页对顶级窗口进行导航。（12）allow-top-navigation-by-user-activation：允许嵌入的网页对顶级窗口进行导航，但必须由用户激活。（13）allow-downloads-without-user-activation：允许在没有用户激活的情况下，嵌入的网页启动下载。

特殊字符（转义字符）

特殊字符	描述	字符的代码
	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
￥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方2（上标2）	`²`
³	立方3（上标3）	`³`

特殊字符	描述	字符的代码
	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
￥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方2（上标2）	`²`
³	立方3（上标3）	`³`

特殊字符	描述	字符的代码
	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
￥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方2（上标2）	`²`
³	立方3（上标3）	`³`

特殊字符	描述	字符的代码
	空格符	` `
<	小于号	`<`
>	大于号	`>`
&	和号	`&`
￥	人民币	`¥`
©	版权	`©`
®	注册商标	`®`
°	摄氏度	`°`
±	正负号	`±`
×	乘号	`×`
÷	除号	`÷`
²	平方2（上标2）	`²`
³	立方3（上标3）	`³`