html快速入门教程

最新推荐文章于 2024-09-22 11:12:26 发布

23DAY

最新推荐文章于 2024-09-22 11:12:26 发布

阅读量1.6k

点赞数 2

分类专栏：前端文章标签： html html5 前端

本文链接：https://blog.csdn.net/tengchuanb/article/details/121302676

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

html快速入门教程

一、简介
- 1.html
- 2.HTML 标签
- 3.Web 浏览器
- 4. 声明
- 5.中文编码
- 6.HTML5
二、标签与属性
- 1.元素/标签
- 2.属性
三、标签示例
- 1.title（标题）
- 2.hr（水平线）
- 3.注释
- 4.p（段落）
- 5.link（链接）
- - 1.target ：
  - 2.id :
- 6.head（头部）
四、css
- 1.内联样式
- 2.内部样式表
- 3.外部样式表
- 另：已弃用的标签和属性
五、img
- 1.源属性（src）
- 2.alt
- 3. height&width
- 4.注意
- 5.举例
- - 1.对于图片上的某些位置，点击会进入不同页面
  - 2.图片插入超链接
六、表格
- 1.表格
- 2.边框属性
- 3.表头
- 4.举例
- 5.单元格边距和间距
七、列表
- 1.无序列表
- 2.有序列表
- 3. 自定义列表
- 4.注意
- 5.举例
八、区块
- 1.区块元素
- 2. 内联元素
- 3.div 元素
- 4.span 元素
九.布局
十、表单
- 1.文本域（Text Fields）
- 2.密码字段
- 3.单选按钮（Radio Buttons）
- 4.复选框（Checkboxes）
- 5.提交按钮(Submit Button)
- 6.下拉表单
- 7.带边框的表单
- 8.发送电子邮件的表单
- 9.input的其他类型
- 10.html5新的表单标签
- 11.html5新的表单属性
十一、框架
- 1.设置高度与宽度
- 2. 移除边框
- 3.使用iframe来显示目标链接页面
十二、脚本
- 1.script 标签
- 2.noscript 标签
十三、video
- 1.浏览器的支持
- 2.视频格式
- 3.使用 DOM 进行控制
十四、audio
- 1.浏览器支持
- 2.音频格式的MIME类型
十五、语义元素
- 1.什么是语义元素?
- 2.HTML5中新的语义元素
- 3.HTML5 section 元素
- 4.HTML5 article 元素
- 5.HTML5 nav 元素
- 6.HTML5 aside 元素
- 7.HTML5 header 元素
- 8.HTML5 footer 元素
- 9.HTML5 figure 和 figcaption 元素

一、简介

1.html

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

HTML 指的是超文本标记语言: HyperText Markup Language
HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>主题</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>

声明为 HTML5 文档
元素是 HTML 页面的根元素
元素包含了文档的元（meta）数据，如定义网页编码格式为 utf-8。
元素描述了文档的标题
元素包含了可见的页面内容
<h1> 元素定义一个大标题
元素定义一个段落

2.HTML 标签

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签

3.Web 浏览器

Web浏览器（QQ浏览器，Firefox，谷歌等）是用于读取HTML文件，并将其作为网页显示。

浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户

4.<!DOCTYPE> 声明

声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html> 
<!DOCTYPE HTML> 
<!doctype html> 
<!Doctype Html>

5.中文编码

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>

6.HTML5

1.什么是 HTML5?

HTML5 是下一代 HTML 标准

HTML , HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

2.HTML5 是如何起步的？

HTML5 是 W3C 与 WHATWG 合作的结果,WHATWG 指 Web Hypertext Application Technology Working Group。

WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

HTML5 中的一些有趣的新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

3.HTML5 <!DOCTYPE>

<!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单:

<!DOCTYPE html>

4.最小的HTML5文档

下面是一个简单的HTML5文档：

<!DOCTYPE html>
<html> 
    <head> 
        <meta charset="utf-8"> 
        <title>文档标题</title> 
    </head>  
    <body> 文档内容...... 
    </body>  
</html>

注意对于中文网页需要使用声明编码，否则会出现乱码。

5.HTML5 的改进

新元素
新属性
完全支持 CSS3
Video 和 Audio
2D/3D 制图
本地存储
本地 SQL 数据
Web 应用

6.HTML5 多媒体

使用 HTML5 你可以简单的在网页中播放视频(video)与音频 (audio) 。

7.HTML5 应用

使用 HTML5 你可以简单地开发应用

本地数据存储
访问本地文件
本地 SQL 数据
缓存引用
Javascript 工作者
XHTMLHttpRequest 2

8.HTML5 图形

使用 HTML5 你可以简单的绘制图形:

使用元素
使用内联 SVG
使用 CSS3 2D 转换、CSS3 3D 转换

9.HTML5 使用 CSS3

新选择器
新属性
动画
2D/3D 转换
圆角
阴影效果
可下载的字体

10.语义元素

HTML5 添加了很多语义元素如下所示：

标签	描述
<article>	定义页面独立的内容区域。
<aside>	定义页面的侧边栏内容。
<bdi>	允许您设置一段文本，使其脱离其父元素的文本方向设置。
<command>	定义命令按钮，比如单选按钮、复选框或按钮
<details>	用于描述文档或文档某个部分的细节
<dialog>	定义对话框，比如提示框
<summary>	标签包含 details 元素的标题
<figure>	规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption>	定义元素的标题
<footer>	定义 section 或 document 的页脚。
<header>	定义了文档的头部区域
<mark>	定义带有记号的文本。
<meter>	定义度量衡。仅用于已知最大和最小值的度量。
<nav>	定义导航链接的部分。
<progress>	定义任何类型的任务的进度。
<ruby>	定义 ruby 注释（中文注音或字符）。
<rt>	定义字符（中文注音或字符）的解释或发音。
<rp>	在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。
<section>	定义文档中的节（section、区段）。
<time>	定义日期或时间。
<wbr>	规定在文本中的何处适合添加换行符。

11.HTML5 表单

新表单元素, 新属性，新输入类型，自动验证。

12.已移除元素

以下的 HTML 4.01 元素在HTML5中已经被删除:

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>

二、标签与属性

1.元素/标签

HTML 元素语法

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性

标签	描述
article	定义一个文章区域
a	定义超链接
h1-h6	定义 HTML 标题
<!-- -->	定义注释
body	定义文档的主体
br	定义换行
p	定义段落
button	定义一个点击按钮
div	定义文档中的节
font	HTML5不支持，不赞成使用。定义文字的字体、尺寸和颜色
form	定义了HTML文档的表单
frame	定义框架集的窗口或框架
hr	定义水平线
iframe	定义内联框架
img	定义图像
input	定义输入控件
output	定义不同类型的输出，比如脚本的输出
label	定义 input 元素的标注
li	定义列表的项目
option	定义选择列表中的选项
param	定义对象的参数
span	定义文档中的节
source	标签为媒介元素（比如和）定义媒介资源
table	定义表格
tbody	定义表格中的主体内容
td	定义表格中的单元
th	定义表格中的表头单元格
title	定义文档的标题
var	定义文本的变量部分

2.属性

HTML 标签可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name=“value”。

举例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="https://www.baidu.com">这是一个链接</a>
</body>
</html>

页面：

这是一个链接使用了 href 属性

属性举例：

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)
dir	设置元素中内容的文本方向
lang	设置元素中内容的语言代码

三、标签示例

1.title（标题）

标题（Heading）是通过 <h1> - <h6> 标签进行定义的

搜索引擎使用标题为您的网页的结构和内容编制索引。

2.hr（水平线）

<hr>
 hr 标签在 HTML 页面中创建水平线
<hr>

hr 标签在 HTML 页面中创建水平线

3.注释

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

4.p（段落）

浏览器会自动地在段落的前后添加空行。（</p> 是块级元素）

当显示页面时，浏览器会移除源代码中多余的空格和空行

所有连续的空格或空行都会被算作一个空格

所有连续的空行（换行）也被显示为一个空格

在不产生一个新段落的情况下进行换行（新行），用 <br>标签

5.link（链接）

HTML使用标签 <a>来设置超文本链接，在标签<a> 中使用了href属性来描述链接的地址

属性值设置：

1.target ：

使用 target 属性，你可以定义被链接的文档在何处显示

<a href=“https://baidu.com/” target="_blank" rel=“noopener noreferrer”>网址链接

2.id :

id 属性可用于创建一个 HTML 文档书签。

书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。

例如：

<!--在HTML文档中插入ID:-->
<a id="tips">提示：始终将正斜杠添加到子文件夹。假如这样书写链接：href="https://www.baidu.com/html"，就会向服务器产生两次 HTTP 请求。这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="https://www.baidu.com/html/"。</a>

<!--在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：-->
<a href="#tips">访问提示部分

6.head（头部）

<head> 元素包含了所有的头部标签元素，是所有头部元素的容器

在 <head>元素中可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: ,

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
    
<!-- title -->
<title>标签</title> 
    
<!-- base -->
<base href="//www.baidu.com//images/" target="_blank">
    
<!-- meta -->
<!--1 - 定义文档关键词，用于搜索引擎-->
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
<!--2 - 定义web页面描述-->
<meta name="description" content="Free Web tutorials on HTML and CSS">
<!--3 - 定义页面作者-->
<meta name="author" content="Hege Refsnes">
<!--4 - 每30秒刷新页面-->
<meta http-equiv="refresh" content="30">
<!--5 - 规定字符集-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!-- link -->
<link rel="stylesheet" type="text/css" href="mystyle.css">
    
<!-- style -->
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
    
</head>
<body>

<!-- script -->
<script>
document.write("Hello World!")
</script> 
    
<p><img src="logo.png">因为base标签指定了页面上所有链接的默认的URL，所以该图片的访问地址为"http://www.baidu.com/images/logo.png"<\p>
    
<p><a href="//www.baidu.com/">baidu.com</a> 这个链接会在新窗口打开，即便它没有 target="_blank" 属性，但是因为在 base 标签里已经设置了 target 属性的值为 "_blank"。</p>
</body>
</html>

</body>
</html>

1.title

<title> 标签定义了不同文档的标题

<title> 在 HTML文档中是必须的

一个 HTML 文档中不能有一个以上的 <title> 元素

<title> 元素:

定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

2.base

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接

在一个文档中，最多能使用一个 <base> 元素。<base> 标签必须位于 <head> 元素内部

通常把标签排在元素中第一个元素的位置，这样 head 区域中其他元素就可以使用元素中的信息了

如果使用了标签，则必须具备 href 属性或者 target 属性或者两个属性都具备

3.link

link 元素是空元素，它仅包含属性。

此元素只能存在于 head 部分，不过它可出现任何次数

4.style

在<style> 元素中你也可以直接添加样式来渲染 HTML 文档:

5.meta

meta标签描述了一些基本的元数据。

meta 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

6.script

JavaScript 通常用于图像操作、表单验证以及动态内容更改。

四、css

CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的.

CSS 可以通过以下方式添加到HTML中:

内联样式- 在HTML元素中使用"style" 属性
内部样式表 -在HTML文档头部区域使用

最好的方式是通过外部引用CSS文件

1.内联样式

当特殊的样式需要应用到个别元素时，就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示改变段落的颜色和左外边距。

<!--设置背景-->
<body style="background-color:yellow;"> 
    
    <!--现在通常使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义文本样式，而不是使用<font>标签-->
	<p style="color:blue;margin-left:20px;">设置字体颜色</p>
    
    <!--设置居中 文本对齐属性text-align取代了旧标签 <center> -->
    <h1 style="text-align:center;">居中对齐的标题</h1>
    
    <!--设置字体格式-->
    <h2 style="font-family:verdana;">标题</h2> 
</body>

2.内部样式表

当单个文件需要特别样式时，就可以使用内部样式表。

在部分通过

<head>
	<style type="text/css">
	body {background-color:yellow;}
	p {color:blue;}
	=</style>
</head>

3.外部样式表

当样式需要被应用到很多页面的时候，用外部样式表

使用外部样式表，可以通过更改一个文件来改变整个站点的外观

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

另：已弃用的标签和属性

不建议使用的标签有: <font>,<center>, <strike>

不建议使用的属性: color 和 bgcolor.

五、img

在 HTML 中，图像由<img> 标签定义。

<img> 是空标签，也就是它只包含属性，并且没有闭合标签。

1.源属性（src）

需要使用源属性（src）
src 指 “source”

源属性的值是图像的 URL 地址

语法：<img src=“url” alt=“some_text”>

2.alt

alt 属性用来为图像定义一串预备的可替换的文本

在浏览器无法载入图像时，替换文本属性告诉读者他们失去的信息，此时，浏览器将显示这个替代性的文本而不是图像。

为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。

3. height&width

height（高度）与 width（宽度）属性用于设置图像的高度与宽度。

属性值默认单位为像素

指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

4.注意

假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片

加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。

5.举例

1.对于图片上的某些位置，点击会进入不同页面

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

2.图片插入超链接

<p>
	<a href="//www.baidu.com/a.html">
		<img  border="10" src="x.gif" alt="name=x" width="32" height="32">
    </a>
</p>

六、表格

表格由 <table> 标签来定义

每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）

字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。

1.表格

<table border="1">     
    <tr>         
        <td>row 1, cell 1</td>         
        <td>row 1, cell 2</td>     
    </tr>     
    <tr>         
        <td>row 2, cell 1</td>         
        <td>row 2, cell 2</td>     
    </tr> 
</table>

在浏览器显示如下

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

2.边框属性

如果不定义边框属性，表格将不显示边框

<table border="1">     
    <tr>         
        <td>Row 1, cell 1</td>         
        <td>Row 1, cell 2</td>    
    </tr> 
</table>

显示如下：

Row 1, cell 1

Row 1, cell 2

3.表头

表头使用标签进行定义

大多数浏览器会把表头显示为粗体居中的文本：

<table border="1">     
    <tr>         
        <th>Header 1</th>         
        <th>Header 2</th>     
    </tr>     
    <tr>         
        <td>row 1, cell 1</td>         
        <td>row 1, cell 2</td>    
    </tr>     
    <tr>         
        <td>row 2, cell 1</td>         
        <td>row 2, cell 2</td>     
    </tr> 
</table>

Header 1	Header 2
row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

4.举例

1.带有标题的表格

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

Monthly savings
Month	Savings
January	$100
February	$50

2.跨行/列的表格

<h4>单元格跨两列:</h4>
<table border="1">
<tr>
  <th>Name</th>
  <th colspan="2">Telephone</th>
</tr>
<tr>
  <td>Bill Gates</td>
  <td>555 77 854</td>
  <td>555 77 855</td>
</tr>
</table>

<h4>单元格跨两行:</h4>
<table border="1">
<tr>
  <th>First Name:</th>
  <td>Bill Gates</td>
</tr>
<tr>
  <th rowspan="2">Telephone:</th>
  <td>555 77 854</td>
</tr>
<tr>
  <td>555 77 855</td>
</tr>
</table>

单元格跨两列:

Name	Telephone
Bill Gates	555 77 854	555 77 855

单元格跨两行:

First Name:	Bill Gates
Telephone:	555 77 854
Telephone:	555 77 855

3.表格内标签

<table border="1">
<tr>
  <td>
   <p>pA</p>
   <p>pB</p>
  </td>
  <td>这个单元格包含一个表格:
   <table border="1">
   <tr>
     <td>A</td>
     <td>B</td>
   </tr>
   <tr>
     <td>C</td>
     <td>D</td>
   </tr>
   </table>
  </td>
</tr>
<tr>
  <td>这个单元格包含一个列表
   <ul>
    <li>apples</li>
    <li>bananas</li>
    <li>pineapples</li>
   </ul>
  </td>
  <td>HELLO</td>
</tr>
</table>

这个单元格包含一个表格:

A	B
C	D

这个单元格包含一个列表

apples
bananas
pineapples

HELLO

5.单元格边距和间距

<h4>没有单元格边距:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>有单元格边距:</h4>
<table border="1" 
cellpadding="30">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>   
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>没有单元格间距:</h4>
<table border="1">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>单元格间距="0":</h4>
<table border="1" cellspacing="0">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

<h4>单元格间距="10":</h4>
<table border="1" cellspacing="10">
<tr>
  <td>First</td>
  <td>Row</td>
</tr>
<tr>
  <td>Second</td>
  <td>Row</td>
</tr>
</table>

七、列表

1.无序列表

无序列表是一个项目的列表，使用粗体圆点进行标记。

无序列表使用 <ul> 标签

<ul>
	<li>Coffee</li>
	<li>Milk</li>
</ul>

显示如下：

Coffee
Milk

2.有序列表

列表项目使用数字进行标记

有序列表始于 <ol> 标签，每个列表项始于<li> 标签

列表项使用数字来标记

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

显示如下：

Coffee
Milk

3. 自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合

自定义列表以 <dl> 标签开始，每个自定义列表项以 <dt> 开始，每个自定义列表项的定义以 <dd> 开始

<dl>
	<dt>Coffee</dt>
		<dd>- black hot drink</dd>
	<dt>Milk</dt>
		<dd>- white cold drink</dd>
</dl>

浏览器显示如下：

Coffee
- black hot drink
Milk
- white cold drink

4.注意

列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

5.举例

1.不同类型的列表

<!--大小写字母列表-->
<ol type="A">
<ol type="a">
<!--罗马数字列表-->
<ol type="I"> 
<ol type="i">
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ol>

2.不同类型的无序列表

<h4>圆点列表：</h4>
<ul style="list-style-type:disc">
 <!--<ul style="list-style-type:circle">-->
 <!--<ul style="list-style-type:square">-->
 <li>Apples</li>
 <li>Bananas</li>
 <li>Lemons</li>
 <li>Oranges</li>
</ul>

3.嵌套列表

<h4>嵌套列表：</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

嵌套列表：

Coffee
Tea
- Black tea
- Green tea
Milk

八、区块

1.区块元素

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时，通常会以新行来开始（和结束）

实例:<h1>, <p>, <ul>, <table>

2. 内联元素

内联元素在显示时通常不会以新行开始。

实例:<b>, <td>, <a>, <img>

3.div 元素

<div> 元素是块级元素，它可用于组合其他 HTML 元素的容器

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据

举例：

<div style="color:#0000FF">
  <h3>标题</h3>
  <p>文本全部变色</p>
</div>

4.span 元素

HTML <span> 元素是内联元素，可用作文本的容器

<span> 元素也没有特定的含义

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性

<span> 标签提供了一种将文本的一部分或者文档的一部分独立出来的方式

举例：

<p>这是 <span style="color:blue;font-weight:bold">蓝色</span> 这是 <span style="color:darkolivegreen;font-weight:bold">绿色</span> </p>

显示：

这是蓝色这是绿色

九.布局

大多数网站会把内容安排到多个列中

大多数网站可以使用 <div> 或者 <table> 元素来创建多列

CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。

虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的

使用 CSS 最大的好是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护

十、表单

表单是一个包含表单元素的区域

表单元素是允许用户在表单中输入内容，比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等

表单使用表单标签 <form> 来设置

多数情况下被用到的表单标签是输入标签<input>。

输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下

1.文本域（Text Fields）

文本域通过<input type=“text”> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

浏览器显示如下：

First name:
Last name:

<textarea rows="3" cols="20">
文本框
</textarea>

文本框

注意:表单本身并不可见。同时，在大多数浏览器中，文本域的默认宽度是 20 个字符。

2.密码字段

密码字段通过标签来定义:

<form>
Password: <input type="password" name="pwd">
</form>

浏览器显示效果如下:

Password:

注意密码字段字符不会明文显示，而是以星号或圆点替代

3.单选按钮（Radio Buttons）

标签定义了表单单选框选项

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>

浏览器显示效果如下:

Male
Female

4.复选框（Checkboxes）

定义了复选框.

用户需要从若干给定的选择中选取一个或若干选项。

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>

浏览器显示效果如下:

I have a bike
I have a car

5.提交按钮(Submit Button)

定义了提交按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件

表单的动作属性定义了目的文件的文件名，由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理

<form name="input" action="form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>

浏览器显示效果如下:

Username:

6.下拉表单

<form action="">
<select name="char">
<option value="A">A</option>
<option value="B">B</option>
<option value="C" selected>C</option>
<option value="D">D</option>
</select>
</form>

7.带边框的表单

<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>

Personal information: Name:
E-mail:
Date of birth:

8.发送电子邮件的表单

<form action="MAILTO:someone@qq.com" method="post" enctype="text/plain">
Name:<br>
<input type="text" name="name" value="your name"><br>
E-mail:<br>
<input type="text" name="mail" value="your email"><br>
Comment:<br>
<input type="text" name="comment" value="your comment" size="50"><br><br>
<input type="submit" value="发送">
<input type="reset" value="重置">
</form>

Name:

E-mail:

Comment:

9.input的其他类型

HTML5 拥有多个新的表单输入类型，提供了更好的输入控制和验证

下面介绍这些新的输入类型：

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

1. color

color 类型用在input字段主要用于选取颜色

从拾色器中选择一个颜色:

<input type="color" name="favcolor">

2.date

date 类型允许你从一个日期选择器选择一个日期

定义一个时间控制器:

<input type="date" name="bday">

3.datetime

datetime 类型允许你选择一个日期（UTC 时间）

定义一个日期和时间控制器（本地时间）

<input type="datetime" name="bdaytime">

4. datetime-local

datetime-local 类型允许你选择一个日期和时间 (无时区

定义一个日期和时间 (无时区):

<input type="datetime-local" name="bdaytime">

5.email

email 类型用于应该包含 e-mail 地址的输入域

在提交表单时，会自动验证 email 域的值是否合法有效:

<input type="email" name="email">

6.month

month 类型允许你选择一个月份

定义月与年 (无时区):

<input type="month" name="bdaymonth">

7. number

number 类型用于应该包含数值的输入域。

您还能够设定对所接受的数字的限定：

数量 ( 1 到 5 之间 ):

<input type="number" name="quantity" min="1" max="5">

使用下面的属性来规定对数字类型的限定：

属性	描述
disabled	规定输入字段是禁用的
max	规定允许的最大值
maxlength	规定输入字段的最大字符长度
min	规定允许的最小值
pattern	规定用于验证输入字段的模式
readonly	规定输入字段的值无法修改
required	规定输入字段的值是必需的
size	规定输入字段中的可见字符数
step	规定输入字段的合法数字间隔
value	规定输入字段的默认值

8. range

range 类型用于应该包含一定范围内数字值的输入域

range 类型显示为滑动条

定义一个不需要非常精确的数值（类似于滑块控制）:

<input type="range" name="points" min="1" max="10">

使用下面的属性来规定对数字类型的限定：

max - 规定允许的最大值
min - 规定允许的最小值
step - 规定合法的数字间隔
value - 规定默认值

9.search

search 类型用于搜索域，比如站点搜索或 Google 搜索。

定义一个搜索字段 (类似站点搜索或者Google搜索):

<input type="search" name="googlesearch">

10. tel

定义输入电话号码字段:

<input type="tel" name="usrtel">

11.time

time 类型允许你选择一个时间。

定义可输入时间控制器（无时区）：

<input type="time" name="usr_time">

12.url

url 类型用于应该包含 URL 地址的输入域。

在提交表单时，会自动验证 url 域的值。

<input type="url" name="homepage">

13. week

week 类型允许你选择周和年

定义周和年 (无时区):

<input type="week" name="week_year">

10.html5新的表单标签

HTML5 有以下新的表单元素:

<datalist>
<keygen>
<output>

1.datalist 元素

<datalist> 元素规定输入域的选项列表。

<datalist> 属性规定 form 或 input 域应该拥有自动完成功能

当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项

使用 <input> 元素的列表属性与 <datalist> 元素绑定.

<input> 元素使用<datalist>预定义值:

<input list="browsers">  
<datalist id="browsers">  
    <option value="Internet Explorer">  
    <option value="Firefox">  
    <option value="Chrome">  
    <option value="Opera">  
    <option value="Safari"> 
</datalist>

2.keygen 元素

<keygen> 元素的作用是提供一种验证用户的可靠方法

<keygen>标签规定用于表单的密钥对生成器字段

当提交表单时，会生成两个键，一个是私钥，一个公钥

私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

<form action="demo_keygen.asp" method="get"> 
    用户名: 
    <input type="text" name="usr_name"> 
    加密: 
    <keygen name="security">
    <input type="submit"> 
</form>

3.output 元素

<output> 元素用于不同类型的输出，比如计算或脚本输出：

将计算结果显示在 <output> 元素:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 
    <input type="range" id="a" value="50">
    100 + 
    <input type="number" id="b" value="50">= 
    <output name="x" for="a b"></output> 
</form>

11.html5新的表单属性

HTML5 的<form> 和 <input>标签添加了几个新属性.

<form>新属性：

autocomplete
novalidate

<input>新属性：

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height 与 width
list
min 与 max
multiple
pattern (regexp)
placeholder
required
step

1.form / input autocomplete 属性

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。

autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。

HTML form 中开启 autocomplete (一个 input 字段关闭 autocomplete ):

<form action="demo-form.php" autocomplete="on">  
    First name:
    <input type="text" name="fname">
    <br>  
    Last name: 
    <input type="text" name="lname">
    <br> 
    E-mail: 
    <input type="email" name="email" autocomplete="off">
    <br>  
    <input type="submit"> 
</form>

2.form novalidate 属性

novalidate 属性是一个 boolean(布尔) 属性

novalidate 属性规定在提交表单时不应该验证 form 或 input 域

无需验证提交的表单数据

<form action="demo-form.php" novalidate>  
    E-mail: 
    <input type="email" name="user_email">  
    <input type="submit"> 
</form>

3.input autofocus 属性

autofocus 属性是一个布尔属性

autofocus 属性规定在页面加载时，域自动地获得焦点

让 “First name” input 输入域在页面载入时自动聚焦：

First name:<
input type="text" name="fname" autofocus>

4.input form 属性

form 属性规定输入域所属的一个或多个表单。

位于form表单外的 input 字段引用了 HTML form (该 input 表单仍然属于form表单的一部分):

<form action="demo-form.php" id="form1">  
    First name: 
    <input type="text" name="fname"><br>  
    <input type="submit" value="提交"> 
</form>  
Last name: 
<input type="text" name="lname" form="form1">

5.input formaction 属性

The formaction 属性用于描述表单提交的URL地址

The formaction 属性会覆盖元素中的action属性

注意: The formaction 属性用于 type=“submit” 和 type=“image”

以下HTMLform表单包含了两个不同地址的提交按钮：

<form action="demo-form.php">  
    First name: 
    <input type="text" name="fname"><br>  
    Last name: 
    <input type="text" name="lname"><br>  
    <input type="submit" value="提交"><br>  
    <input type="submit" formaction="demo-admin.php"  value="提交"> 
</form>

6.input formenctype 属性

formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method=“post” 表单)

formenctype 属性覆盖 form 元素的 enctype 属性。

注意: 该属性与 type=“submit” 和 type=“image” 配合使用。

第一个提交按钮已默认编码发送表单数据，第二个提交按钮以 “multipart/form-data” 编码格式发送表单数据:

<form action="demo-post_enctype.php" method="post">  
    First name: <input type="text" name="fname"><br>  
    <input type="submit" value="提交">  
    <input type="submit" formenctype="multipart/form-data"  value="以 Multipart/form-data 提交"> 
</form>

7.input formmethod 属性

formmethod 属性定义了表单提交的方式。

formmethod 属性覆盖了 <form> 元素的 method 属性。

注意: 该属性可以与 type=“submit” 和 type=“image” 配合使用

重新定义表单提交方式实例:

<form action="demo-form.php" method="get"> 
    First name: <input type="text" name="fname"><br>  
    Last name: <input type="text" name="lname"><br>  
    <input type="submit" value="提交">  
    <input type="submit" formmethod="post" formaction="demo-post.php"  value="使用 POST 提交"> 
</form>

8.input formnovalidate 属性

novalidate 属性是一个 boolean 属性.

novalidate属性描述了 <input> 元素在表单提交时无需被验证。

formnovalidate 属性会覆盖 <form> 元素的novalidate属性.

注意: formnovalidate 属性与type=submit一起使用

两个提交按钮的表单(使用与不使用验证 ):

<form action="demo-form.php">
 E-mail: <input type="email" name="userid"><br>
 <input type="submit" value="提交"><br>
 <input type="submit" formnovalidate value="不验证提交">
</form>

9.input formtarget 属性

formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。

The formtarget 属性覆盖 <form>元素的target属性.

注意: formtarget 属性与type=“submit” 和 type="image"配合使用

两个提交按钮的表单, 在不同窗口中显示:

<form action="demo-form.php">
 First name: <input type="text" name="fname"><br>
 Last name: <input type="text" name="lname"><br>
 <input type="submit" value="正常提交">
 <input type="submit" formtarget="_blank"
 value="提交到一个新的页面上">
</form>

10.input height 和 width 属性

height 和 width 属性规定用于 image 类型的 <input> 标签的图像高度和宽度。

注意: height 和 width 属性只适用于 image 类型的<input> 标签。

**提示:**图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度，图像所需的空间在加载页时会被保留。如果没有这些属性，浏览器不知道图像的大小，并不能预留适当的空间。图片在加载过程中会使页面布局效果改变（尽管图片已加载）

定义了一个图像提交按钮, 使用了 height 和 width 属性:

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

11.input list 属性

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

在 <datalist>中预定义 <input> 值:

<input list="browsers">
<datalist id="browsers">
 <option value="Internet Explorer">
 <option value="Firefox">
 <option value="Chrome">
 <option value="Opera">
 <option value="Safari">
</datalist>

12.input min 和 max 属性

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）

注意: min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range

元素最小值与最大值设置:

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

13.input multiple 属性

multiple 属性是一个 boolean 属性.

multiple 属性规定<input> 元素中可选择多个值。

注意 multiple 属性适用于以下类型的 <input> 标签：email 和 file

上传多个文件:

Select images: 
<input type="file" name="img" multiple>

14.input pattern 属性

pattern 属性描述了一个正则表达式用于验证 <input> 元素的值。

注意pattern 属性适用于以下类型的 <input> 标签: text, search, url, tel, email, 和 password.

下面的例子显示了一个只能包含三个字母的文本域（不含数字及特殊字符）：

<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

15.input placeholder 属性

placeholder 属性提供一种提示（hint），描述输入域所期待的值。

简短的提示在用户输入值前会显示在输入域上。

注意: placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password

input 字段提示文本t:

<input type="text" name="fname" placeholder="First name">

16.input required 属性

required 属性是一个 boolean 属性.

required 属性规定必须在提交之前填写输入域（不能为空）

**注意:**required 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file

不能为空的input字段:

Username: <input type="text" name="usrname" required>

17.input step 属性

step 属性为输入域规定合法的数字间隔。

如果 step=“3”，则合法的数是 -3,0,3,6 等

step 属性可以与 max 和 min 属性创建一个区域值.

注意: step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week.

规定input step步长为3:

<input type="number" name="points" step="3">

十一、框架

通过使用框架，你可以在一个浏览器窗口中显示不止一个页面。

iframe语法:

1.设置高度与宽度

height 和 width 属性用来定义iframe标签的高度与宽度

<iframe src="another.html" width="200" height="200"></iframe>

2. 移除边框

frameborder 属性用于定义iframe表示是否显示边框。

设置属性值为 “0” 移除iframe的边框:

<iframe src="demo_iframe.htm" frameborder="0"></iframe>

3.使用iframe来显示目标链接页面

iframe可以显示一个目标链接的页面

目标链接的属性必须使用iframe的属性，如下实例:

<iframe src="a.html" name="iframe_x"></iframe>
<p>
    <a href="//www.baidu.com" target="iframe_x">BAIDU.COM</a>
</p>

十二、脚本

1.script 标签

JavaScript 最常用于图片操作、表单验证以及内容动态更新。

举例：

<script> document.write("Hello World!"); </script>

2.noscript 标签

只有在浏览器不支持脚本或者禁用脚本时，才会显示 <noscript> 元素中的内容：

十三、video

<video> 元素提供了播放、暂停和音量控件来控制视频。

同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸

如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。

<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

<video> 元素支持多个 <source> 元素

<source> 元素可以链接不同的视频文件

1.浏览器的支持

当前， <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg:

浏览器	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	NO	NO
Opera	YES (从 Opera 25 起)	YES	YES

MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

2.视频格式

格式	MIME-type
MP4	video/mp4
WebM	video/webm
Ogg	video/ogg

3.使用 DOM 进行控制

HTML5 <video> 和 <audio> 元素同样拥有方法、属性和事件

<video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制

其中的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置

举例：

<div style="text-align:center"> 
  <button onclick="playPause()">播放/暂停</button> 
  <button onclick="makeBig()">放大</button>
  <button onclick="makeSmall()">缩小</button>
  <button onclick="makeNormal()">普通</button>
  <br> 
  <video id="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    您的浏览器不支持 HTML5 video 标签。
  </video>
</div> 

<script> 
var myVideo=document.getElementById("video1"); 

function playPause()
{ 
	if (myVideo.paused) 
	  myVideo.play(); 
	else 
	  myVideo.pause(); 
} 
function makeBig()
{ 
	myVideo.width=560; 
} 
function makeSmall()
{ 
	myVideo.width=320; 
} 
function makeNormal()
{ 
	myVideo.width=420; 
} 
</script>

十四、audio

举例：

<audio controls>   
    <source src="horse.ogg" type="audio/ogg">   
    <source src="horse.mp3" type="audio/mpeg">
</audio>

control 属性供添加播放、暂停和音量控件。

在<audio> 与 </audio> 之间你需要插入浏览器不支持的元素的提示文本。

<audio> 元素允许使用多个 <source> 元素.

<source> 元素可以链接不同的音频文件

1.浏览器支持

<audio>元素支持三种音频格式文件: MP3, Wav, 和 Ogg:

浏览器	MP3	Wav	Ogg
Internet Explorer 9+	YES	NO	NO
Chrome 6+	YES	YES	YES
Firefox 3.6+	YES	YES	YES
Safari 5+	YES	YES	NO
Opera 10+	YES	YES	YES

2.音频格式的MIME类型

Format	MIME-type
MP3	audio/mpeg
Ogg	audio/ogg
Wav	audio/wav

十五、语义元素

语义= 意义

语义元素 = 有意义的元素

1.什么是语义元素?

一个语义元素能够清楚的描述其意义给浏览器和开发者。

无语义 元素实例: <div> 和 <span> - 无需考虑内容

语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容

2.HTML5中新的语义元素

许多现有网站都包含以下HTML代码： <div id=“nav”>, <div class=“header”>, 或者 <div id=“footer”>, 来指明导航链接, 头部, 以及尾部.

HTML5 提供了新的语义元素来明确一个Web页面的不同部分:

<header>
<nav>
<section>
<article>
<aside>
<figcaption>
<figure>

HTML5 语义元素

3.HTML5 section 元素

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。

根据W3C HTML5文档: section 包含了一组内容及其标题。

<section>
  <h3>A</h3>
  <p>aaaaaaaa</p>
</section>

<section>
  <h3>B</h3>
  <p>bbbbbbbb</p>
</section>

A

aaaaaaaa

B

bbbbbbbb

4.HTML5 article 元素

<article> 标签定义独立的内容。.

<article> 元素使用实例:

Forum post
Blog post
News story
Comment

<article>  
    <h3>标题</h3>  
    <p>段落</p> 
</article>

标题

段落

5.HTML5 nav 元素

<nav> 标签定义导航链接的部分。

<nav> 元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在 <nav> 元素中

<nav>    
    <a href="/html/">HTML</a> |    
    <a href="/css/">CSS</a> |   
    <a href="/js/">JavaScript</a> |    
    <a href="/jquery/">jQuery</a> 
</nav>

6.HTML5 aside 元素

<aside> 标签定义页面主区域内容之外的内容（比如侧边栏）。

aside 标签的内容应与主区域的内容相关.

<p>段落1</p>   
<aside>   
    <h4>标题</h4>   
    <p>段落2</p> 
</aside>

段落1

7.HTML5 header 元素

<header>元素描述了文档的头部区域

<header>元素主要用于定义内容的介绍展示区域.

在页面中你可以使用多个<header> 元素.

<article>  
    <header>    
        <h1>标题</h1>    
        <p><time pubdate datetime="2011-03-15"></time></p>  
    </header>  
    <p>段落</p> 
</article>

8.HTML5 footer 元素

<footer> 元素描述了文档的底部区域.

<footer> 元素应该包含它的包含元素

一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等

文档中你可以使用多个 <footer>元素.

<footer>  
    <p>Posted by:xxx</p>  
    <p><time pubdate datetime="2012-03-01"></time></p> 
</footer>

9.HTML5 figure 和 figcaption 元素

<figure>标签规定独立的流内容（图像、图表、照片、代码等等）。

<figure> 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。

<figcaption> 标签定义 <figure> 元素的标题.

<figcaption>元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

<figure>   
    <img loading="lazy" src="a.jpg" alt="注释" width="304" height="228">   
    <figcaption>Fig1. - The Pulpit Pock, Norway.</figcaption> 
</figure>