什么是HTML

HTML(HyperText Markup Language)：超文本标记语言：

超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容

如上图看到的页面，我们除了能看到一些文字，同时也有大量的图片展示；有些网页也有视频，音频等。这种展示效果超越了文本展示的限制。
标记语言：由标签构成的语言

之前学习的XML就是标记语言，由一个一个的标签组成，HTML 也是由标签组成。我们在浏览器页面右键可以查看页面的源代码，如下

这些标签不像XML那样可以自定义，HTML中的标签都是预定义好的，运行在浏览器上并由浏览器解析，然后展示出对应的效果。例如我们想在浏览器上展示出图片就需要使用预定义的 img 标签；想展示可以点击的链接的效果就可以使用预定义的 a 标签等。

HTML特点

HTML 文件以.htm或.html为扩展名
HTML 标签不区分大小写

如上案例中的 font 写成 Font 也是一样可以展示出对应的效果的。
HTML 标签属性值单双引皆可

如上案例中的color属性值使用双引号也是可以的。
HTML 语法松散

比如 font 标签不加结束标签也是可以展示出效果的。但是建议同学们在写的时候还是不要这样做，严格按照要求去写。

特殊字符

HTML 原代码	显示结果	描述
<	<	小于号或显示标记
&gt ;	>	大于号或显示标记
&	&	可用于显示其它特殊字符
"	“	引号
®	®	已注册
©	©	版权
™	™	商标
		不断行的空白

HTML标签

结构标签

IDE自动创建html文档时会自动生成顶部的版本信息<!DOCTYPE html>和在head结构标签通过子标签<meta charset="UTF-8">指定默认编码

标签	描述
<HTML>	定义 HTML 文档
<head>	定义关于文档的信息
<title>	定义文档的标题
<body>	定义文档的主体

基础标签

标签	描述
<h1> ~ <h6>	定义标题，h1最大，h6最小
<font>	定义文本的字体、字体尺寸、字体颜色
<b>	定义粗体文本
<i>	定义斜体文本
<u>	定义文本下划线
<center>	定义文本居中
<p>	定义段落
<br>	定义折行
<hr>	定义水平线

图片、音频、视频标签

标签	描述
<img>	定义图片
<audio>	定义音频
<video>	定义视频

img：定义图片
- src：规定显示图像的 URL
- height：定义图像的高度
- width：定义图像的宽度
audio：定义音频。支持的音频格式：MP3、WAV、OGG
- src：规定音频的 URL
- controls：显示播放控件
video：定义视频。支持的音频格式：MP4, WebM、OGG
- src：规定视频的 URL
- controls：显示播放控件

一般来说，媒体文件尤其是视频常常会结合iframe标签使用

嵌入标签iframe

HTML 中的 <iframe> 标签是用于在当前 HTML 文档中嵌入另一个 HTML 页面或者外部网页的标记。它允许您在一个页面中显示另一个页面的内容，从而创建了一种框架式的结构。

以下是 <iframe> 标签的一些特点和用法：

嵌入其他页面： 最常见的用法是使用 <iframe> 标签嵌入其他页面的内容，这些内容可以是本地文件或者远程网页。
创建内联框架： <iframe> 标签允许您在当前页面中创建一个内联框架，用于显示其他页面的内容，而无需用户离开当前页面。
指定嵌入页面的地址： 使用 <iframe> 标签的 src 属性可以指定要嵌入的页面的地址，可以是本地文件的路径或者外部网页的 URL。
控制框架的尺寸： 使用 <iframe> 标签的 width 和 height 属性可以控制框架的宽度和高度，可以是像素值或者百分比值。
兼容性：<iframe>标签在所有现代浏览器中都被支持，但在一些特殊情况下可能会受到安全策略的限制。
嵌入其他文档类型： 除了 HTML 页面外，<iframe> 标签还可以用于嵌入其他类型的文档，如 PDF 文件、音频文件、视频文件等。

需要注意的是，虽然 <iframe> 标签提供了一种方便的方式来嵌入其他页面的内容，但过度使用<iframe>可能会导致性能问题、安全隐患以及页面的可访问性问题。因此，在使用 <iframe> 标签时，需要谨慎考虑其影响，并遵循最佳实践。

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IFrame Demo</title>
</head>
<body>
    <h1>嵌入页面示例</h1>
    <p>以下是一个嵌入页面的示例：</p>

    <iframe src="https://www.example.com" width="800" height="600" frameborder="0"></iframe>

    <p>以上是一个嵌入页面的示例。</p>
</body>
</html>

在这个示例中，我们使用 <iframe> 标签将名为 "https://www.example.com" 的外部网页嵌入到当前页面中。该 <iframe> 元素具有指定的宽度（800 像素）和高度（600 像素），并且没有边框（frameborder="0"）。在用户访问页面时，该网页会在页面中显示为一个框架，用户可以与该框架中的内容进行交互。

超链接标签

标签	描述
<a>	定义超链接，用于链接到另一个资源

href：指定访问资源的URL
target：指定打开资源的方式
- self:默认值，在当前页面打开
  - blank：在空白页面打开

列表标签

标签	描述
<ol>	定义有序列表
<ul>	定义无序列表
<li>	定义列表项

type：设置符号的类型【无用，后期主要使用css控制】

表格标签

在最早期的网页发展中，网站的布局基本上表格布局，不过现在基本上是css控制了而且有很多现成的css布局方案可以选择

标签	描述
<table>	定义表格
<tr>	定义行
<td>	定义单元格
<th>	定义表头单元格

table：定义表格
width：宽度
- border：边框
- cellpadding：定义内容和单元格的距离
- cellspacing：定义单元格之间的距离。如果指定为0，则单元格的线会合为一条、
- bgcolor：背景色
- align：对齐方式
tr：定义行
bgcolor：背景色
- align：对齐方式
td：定义单元格
colspan：合并列
- rowspan：合并行
th：定义表头单元格
<caption>：表格标题

代码演示

合并单元格要弄明白的问题——要合并的单元格究竟属于第几行或者说第几列，它要跨越几列或几行

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

<table border="1" cellspacing="0" width="500">
    <tr>
        <th>序号</th>
        <th>品牌logo</th>
        <th>品牌名称</th>
        <th>企业名称</th>
    </tr>
    <tr align="center">
        <td>010</td>
        <td><img src="../img/三只松鼠.png" width="60" height="50"></td>
        <td>三只松鼠</td>
        <td>三只松鼠</td>
    </tr>
    <tr align="center">
        <td>009</td>
        <td><img src="../img/优衣库.png" width="60" height="50"></td>
        <td>优衣库</td>
        <td>优衣库</td>
    </tr>
    <tr align="center">
        <td>008</td>
        <td><img src="../img/小米.png" width="60" height="50"></td>
        <td>小米</td>
        <td>小米科技有限公司</td>
    </tr>
</table>

</body>
</html>

效果：

序号	品牌名称	企业名称
010	三只松鼠	三只松鼠
009	优衣库	优衣库
008	小米	小米科技有限公司

布局标签

其实所有标签都可以结合CSS来完成布局效果，只是有一些一开始就是为了布局而诞生的，算是“语义标签”。

标签	描述
<div>	定义 HTML 文档中的一个区域部分，经常与 CSS 一起使用，用来布局网页
<span>	用于组合行内元素。

表单标签

标签	描述
<form>	定义表单
<input>	定义表单项，通过type属性控制输入形式
<label>	为表单项定义标注
<select>	定义下拉列表
<option>	定义下拉列表的列表项
<textarea>	定义文本域

form标签属性

Tip

在HTML中，# 符号代表当前页面的链接目标。当您在一个链接或者表单的 action 属性中使用 # 时，它表示将表单提交到当前页面本身。实际上，# 是一个特殊的片段标识符，它指向当前页面的顶部，也被称为“锚点”。
当您在一个表单的 action 属性中使用 # 时，表单将被提交到当前页面，浏览器将会重新加载当前页面并且将表单数据发送到当前页面。这种方法通常用于在没有服务器端处理表单数据的情况下，使用客户端脚本（如 JavaScript）来处理表单提交。

action：规定当提交表单时向何处发送表单数据，该属性值就是URL
以后会将数据提交到服务端，该属性需要书写服务端的URL。
method ：规定用于发送表单数据的方式
- get：默认值。如果不设置method属性则默认就是该值
  - 请求参数会拼接在URL后边
  - url的长度有限制 4KB
- post：
  - 浏览器会将数据放到http请求消息体中
  - 请求参数无限制的

input标签属性

表单项，通过type属性控制输入形式
input 标签有个 type 属性。 type 属性的取值不同，展示的效果也不一样

label标签属性

指定输入项的文字描述信息
label的for属性一般会和 input 的 id属性值对应。如果对应了，则点击label区域，会让input输入框获取焦点。

select标签及option子标签属性

select: 下拉列表
- 子元素：option，指定列表项
  - selected属性，可以指定默认值

如下图就是下拉列表的效果：

textarea标签属性

<textarea>：文本域
如下图就是文本域效果。它可以输入多行文本，而 input 数据框只能输入一行文本。

Warning

以上标签项的内容要想提交，必须得定义 name 属性。
每一个标签都有id属性，id属性值是唯一的标识。
单选框、复选框、下拉列表需要使用 value 属性指定提交的值。【否则只是选中而不是提交/其中option若不存在value默认提交标签体的内容】

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="#" method="post">
        <input type="hidden" name="id" value="123">

        <label for="username">用户名：</label>
        <input type="text" name="username" id="username"><br>

        <label for="password">密码：</label>
        <input type="password" name="password" id="password"><br>

        性别：
        <input type="radio" name="gender" value="1" id="male"> <label for="male">男</label>
        <input type="radio" name="gender" value="2" id="female"> <label for="female">女</label>
        <br>

        爱好：
        <input type="checkbox" name="hobby" value="1"> 旅游
        <input type="checkbox" name="hobby" value="2"> 电影
        <input type="checkbox" name="hobby" value="3"> 游戏
        <br>

        头像：
        <input type="file"><br>

        城市:
        <select name="city">
            <option>北京</option>
            <option value="shanghai">上海</option>
            <option>广州</option>
        </select>
        <br>

        个人描述：
        <textarea cols="20" rows="5" name="desc"></textarea>
        <br>
        <br>
        <input type="submit" value="免费注册">
        <input type="reset" value="重置">
        <input type="button" value="一个按钮">
    </form>
</body>
</html>

效果如下：

用户名：
密码：
性别：男女
爱好：旅游电影游戏
头像：
城市:
个人描述：

语义化标签

参考文章：Web前端开发笔记——第二章 HTML语言第十一节语义标签_晚风(●•σ )的博客-CSDN博客

定义

Web语义化，语义元素标签即为更明确、清楚的元素标签，使开发者、浏览者更加理解其内容。比如，下列是一个网站的基本的语义元素标签的页面，其中包括头部标签、底部标签、内容栏标签等等，这些都是一个个块：

头部标签、底部标签

通过<header></header>头部标签和<footer></footer>底部标签，可定义网页的头部区域以及底部区域，头部一般介绍网页的信息区域或者展示区域，底部一般是该网页的备案号、链接的条款、联系方式等等。

导航栏标签

通过<nav></nav>导航栏标签，可以定义导航栏的内容。例如，下列html代码中参见代码

<html>

<head>  
    <meta charset="utf-8">  
    <title></title>  
</head>  
  
<body>  
    <header>  
        <h1>主页</h1>  
    </header>  
    <nav>  
        <a href="#">数据库</a>  
        <a href="#">HTML</a>  
        <a href="#">JavaScript</a>  
        <a href="#">计算机网络</a>  
    </nav>  
    <footer>  
        <p>2000-2021</p>  
    </footer>  
  
</body>

</html>

效果如下

主页

内容栏标签、区段标签

通过<article></article>标签来定义一个独立的内容，且通过<section></section>标签来定义一个个区段，它可以是不同的段落。例如，下列html代码中效果如下：

<html>

<head>  
    <meta charset="utf-8">  
    <title></title>  
</head>  
  
<body>  
    <header>  
        <h1>主页</h1>  
    </header>  
    <nav>  
        <a href="#">数据库</a>  
        <a href="#">HTML</a>  
        <a href="#">JavaScript</a>  
        <a href="#">计算机网络</a>  
    </nav>  
    <article>  
        <h2>计算机网络</h2>  
        <section>  
            <h1>特点</h1>  
            <p>计算机网络系统是由网络硬件和网络软件组成的。在网络系统中，硬件的选择对网络起着决定性的作用，而网络软件则是挖掘网络潜力的工具。</p>  
        </section>  
        <section>  
            <h1>功能</h1>  
            <p>资源共享是基于网络的资源分享，但随着网络和经济社会的发展资源共享在社会中也暴露出了一些问题。</p>  
        </section>  
    </article>  
    <article>  
        <h2>数据库</h2>  
        <section>  
            <p>数据库是“按照数据结构来组织、存储和管理数据的仓库”。是一个长期存储在计算机内的、有组织的、可共享的、统一管理的大量数据的集合。</p>  
        </section>  
    </article>  
    <footer>  
        <p>2000-2021</p>  
    </footer>  
  
</body>

</html>

效果如下：

主页

计算机网络

特点

计算机网络系统是由网络硬件和网络软件组成的。在网络系统中，硬件的选择对网络起着决定性的作用，而网络软件则是挖掘网络潜力的工具。

功能

资源共享是基于网络的资源分享，但随着网络和经济社会的发展资源共享在社会中也暴露出了一些问题。

数据库

数据库是“按照数据结构来组织、存储和管理数据的仓库”。是一个长期存储在计算机内的、有组织的、可共享的、统一管理的大量数据的集合。

外围区域：aside

通过<aside></aside>标签来定义除网页的主要区域外的其它内容，例如广告栏、侧边栏等等。

独立流：figure

标签规定独立的流内容（图像、图表、照片、代码等等）。
元素的内容应该与主内容相关，同时元素的位置相对于主内容是独立的。如果被删除，则不应对文档流产生影响。
figcaption定义内容的标题，它位于figure的最后且一个独立流中只有一个

**源码如下：** ```html

```

其他语义标签

`<main>`元素

定义页面的主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。

`<small>`元素

为较不重要的内容定义小字体。如果被包围的字体已经是字体模型所支持的最小字号，那么 <small> 标签将不起任何作用。（同理<big>也是如此）

`<strong>`元素

粗体，强调的意思

`<mark>`元素

mark 标签定义带有记号的文本。请在需要突出显示文本时使用<mark>标签。

`<blockquote>`元素

定义块引用，浏览器会在 blockquote 元素前后添加换行，并增加外边距。cite属性可用来规定引用的来源

`<abbr>`元素

解释缩写词。使用title属性可提供全称，只在第一次出现时使用就ok。
效果：

The WHO was founded in 1948.

源码： ```html

The WHO was founded in 1948.

```

什么是HTML

HTML特点

特殊字符

HTML标签

结构标签

基础标签

图片、音频、视频标签

嵌入标签iframe

超链接标签

列表标签

表格标签

代码演示

布局标签

表单标签

form标签属性

input标签属性

label标签属性

select标签及option子标签属性

textarea标签属性

代码演示

语义化标签

定义

头部标签、底部标签

导航栏标签

内容栏标签、区段标签

计算机网络

特点

功能

数据库

外围区域：aside

独立流：figure

其他语义标签

<main>元素

<small>元素

<strong>元素

<mark>元素

<blockquote>元素

<abbr>元素

`<main>`元素

`<small>`元素

`<strong>`元素

`<mark>`元素

`<blockquote>`元素

`<abbr>`元素