html语法

Xf3n1an2025-07-16 23:53

文章目录

一、html基础

web标准

构成 语言 说明
结构 HTML 页面元素和内容
表现 CSS 网页元素的外观和位置等页面样式（如：颜色、大小等）
行为 JavaScript 网页模型的定义与页面交互

HTML5是Web标准的最新版本（2014年正式发布），它整合了HTML4/XHTML，并强调语义化（semantic HTML）。除了结构（HTML）、表现（CSS）和行为（JavaScript），HTML5还内置了更多多媒体和API支持（如Canvas绘图、WebSockets实时通信）。注意HTML5的DOCTYPE声明必须是<!DOCTYPE html>，这简化了旧版的复杂声明。

1.什么是html

HTML 指的是超文本标记语言 (H yper T ext M arkup Language)

HTML 使用标记标签来描述网页

网页由哪些部分组成？

​ 文字、图片、音频、视频、超链接

HTML骨架结构由哪些标签组成？

  • html标签：网页的整体
  • head标签：网页的头部
  • body标签：网页的身体
  • title标签：网页的标题

2.HTML 标签

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

标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名

  • HTML 标签是由尖括号包围的关键词，比如 <html>
  • HTML 标签通常是成对出现的，比如 <b> 和</b>
  • 常见标签由两部分组成，我们称之为：双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容
  • 少数标签由一部分组成，我们称之为：单标签。自成一体，无法包裹内容。

HTML标签与标签之间的关系可分为：

  • 父子关系（嵌套关系）

    html 复制代码 
    <html lang="en">
<head>   
</head>
</html>
    html 复制代码 
    <head>
    <title> </title>
</head>

  • 兄弟关系（并列关系）

    html 复制代码 
    <head>
</head>
<body>
</body>

3.HTML 文档-网页

  • HTML 文档描述网页
  • HTML 文档包含 HTML 标签和纯文本
  • HTML 文档也被称为网页

Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：

html 复制代码 
<html>
<body>

<h1>我的第一个标题</h1>

<p>我的第一个段落。</p>

</body>
</html>

例子解释

  • <html> 与 </html> 之间的文本描述网页
  • <body> 与 </body> 之间的文本是可见的页面内容
  • <h1> 与 </h1> 之间的文本被显示为标题
  • <p> 与 </p> 之间的文本被显示为段落

4.html基础

1.HTML 标题

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

2.HTML 段落

HTML 段落是通过 <p> 标签进行定义的。

3.HTML 链接

HTML 链接是通过 <a> 标签进行定义的。

html 复制代码 
<a href="http://www.baidu.com">This is a link</a>

**注释：**在 href 属性中指定链接的地址。

4.HTML 图像

HTML 图像是通过<img> 标签进行定义的。

html 复制代码 
<img src="text.jpg" width="104" height="142" />

5.html元素

HTML 文档是由 HTML 元素定义的。

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。

开始标签 元素内容 结束标签
<p> This is a paragraph </p>
<a href="default.htm" > This is a link </a>
<br/>

开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。

HTML 元素语法:

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

1.嵌套的 HTML 元素

大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。

HTML 文档由嵌套的 HTML 元素构成。

2.空的 HTML 元素

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

<br>就是没有关闭标签的空元素（<br> 标签定义换行）。

在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。

在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

6.HTML 属性

HTML 标签可以拥有属性 。属性提供了有关 HTML 元素的更多的信息。

属性总是以名称/值对的形式出现，比如：name="value"。

属性总是在 HTML 元素的开始标签中规定。

属性实例:

HTML 链接由<a> 标签定义。链接的地址在 href 属性中指定：

html 复制代码 
<a href="http://www.baidu.com">This is a link</a>

<h1> 定义标题的开始。

<h1 align="center"> 拥有关于对齐方式的附加信息。

html 复制代码 
<html>

<body>

<h1 align="center">This is heading 1</h1>

<p>上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。</p>

</body>
</html>

<body> 定义 HTML 文档的主体。

<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。

html 复制代码 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="zh-cn" />
</head>

<body bgcolor="yellow">
<h2>请看: 改变了颜色的背景。</h2>
</body>

</html>

<table> 定义 HTML 表格。

<table border="1">

始终为属性值加引号

属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：

html 复制代码 
name='Bill "HelloWorld" Gates'

7.html标题

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

<h1> 定义最大的标题。<h6> 定义最小的标题。

标题很重要

请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。

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

因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

特点：

  • 文字都有加粗
  • 文字都有变大，并且从h1 → h6文字逐渐减小
  • 独占一行

1.HTML 水平线

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

hr 元素可用于分隔内容。

html 复制代码 
<html>

<body>
<p>hr 标签定义水平线：</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
</body>
</html>

使用水平线 (<hr> 标签) 来分隔文章中的小节是一个办法（但并不是唯一的办法）。

2.HTML 注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

注释是这样写的：

html 复制代码 
<!-- This is a comment -->

开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。

8.HTML 段落

可以把 HTML 文档分割为若干段落。

段落是通过 <p> 标签定义的。

html 复制代码 
<html>
<body>

<p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>

<p>段落元素由 p 标签定义。</p> 

</body>
</html>

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

使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它

特点：

  • 段落之间存在间隙

  • 独占一行

1.HTML 换行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：

特点：

  • 单标签
  • 让文字强制换行
html 复制代码 
<html>

<body>

<p>
To break<br />lines<br />in a<br />paragraph,<br />use the br tag.
</p>

</body>
</html>

换行+水平线

9.HTML 样式

style 属性用于改变 HTML 元素的样式

html 复制代码 
<html>
<body style="background-color:PowderBlue;">

<h1>Look! Styles and colors</h1>

<p style="font-family:verdana;color:red">
This text is in Verdana and red</p>

<p style="font-family:times;color:green">
This text is in Times and green</p>

<p style="font-size:30px">This text is 30 pixels high</p>

</body>
</html>

style 属性的作用：

提供了一种改变所有 HTML 元素的样式的通用方法。

样式是 HTML 4 引入的，它是一种新的首选的改变 HTML 元素样式的方式。通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。

1.背景颜色

background-color 属性为元素定义了背景颜色：

html 复制代码 
<html>
<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>
</html>

2.字体、颜色和尺寸

font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸：

html 复制代码 
<html>
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>

3.文本对齐

html 复制代码 
<html>
<body>

<h1 style="text-align:center">This is a heading</h1>
<p>上面的标题相对于页面居中对齐。</p>

</body>
</html>

10.HTML 文本格式化

场景：需要让文字加粗、下划线、倾斜、删除线等效果

HTML 可定义很多供格式化输出的元素，比如粗体和斜体字。

突出重要性的强调语境⬇

标签 描述
<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。
html 复制代码 
<html>
<body>

<b>This text is bold</b>
<br />
<strong>This text is strong</strong>
<br />
<big>This text is big</big>
<br />
<em>This text is emphasized</em>
<br />
<i>This text is italic</i>
<br />
<small>This text is small</small>
<br />
    
This text contains
<sub>subscript</sub>
<br />
This text contains
<sup>superscript</sup>
    
</body>
</html>
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <strong>加粗strong</strong> <em>倾斜em</em> <ins>下划线ins</ins> <del>删除线del</del>
</body>
</html>

11.HTML 引用

标签 描述
<abbr> 定义缩写或首字母缩略语。
<address> 定义文档作者或拥有者的联系信息。
<bdo> 定义文本方向。
<blockquote> 定义从其他来源引用的节。
<dfn> 定义项目或缩略词的定义。
<q> 定义短的行内引用。
<cite> 定义著作的标题。

1.用于短引用

HTML <q> 元素定义短的引用。

浏览器通常会为 <q> 元素包围引号。

html 复制代码 
<html>
<body>

<p>浏览器通常会在 q 元素周围包围引号。</p>

<p>WWF 的目标是 <q>构建人与自然和谐相处的世界。</q></p>

</body>
</html>

2.用于长引用

HTML <blockquote>元素定义被引用的节。

浏览器通常会对 <blockquote> 元素进行缩进处理。

html 复制代码 
<html>
<body>

<p>浏览器通常会对 blockquote 元素进行缩进处理。</p>

<blockquote>
五十年来，WWF 一直致力于保护自然界的未来。
WWF 工作于 100 个国家，并得到美国一百二十万会员及全球近五百万会员的支持。
</blockquote>

</body>
</html>

3.用于缩略词的

HTML <abbr> 元素定义缩写或首字母缩略语。

对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。

html 复制代码 
<html>
<body>

<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>

<p>对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。</p>

</body>
</html>

4.用于定义的

HTML <dfn> 元素定义项目或缩写的定义。

html 复制代码 
<html>
<body>

<p>The <dfn title="World Health Organization">WHO</dfn> was founded in 1948.</p>

<p>对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。</p>

</body>
</html>

12.HTML 注释

注释标签 <!-- 与 --> 用于在 HTML 插入注释。

1.注释多行 HTML 代码

html 复制代码 
<!DOCTYPE html>
<html>
<body>

<!-- 什么也不显示
<img border="0" src="/i/tulip_ballade.jpg" alt="Tulip">
<111111111>
<h1> 22222 </h1>
<p> aaaaa </p>
-->

</body>
</html>

2.条件注释

您也许会在 HTML 中偶尔发现条件注释：

html 复制代码 
<!--[if IE 8]>
    .... some HTML here ....
<![endif]-->

条件注释定义只有 Internet Explorer 执行的 HTML 标签。

3.注释的快捷键

在VS Code中：ctrl + /

13.HTML 颜色

颜色由红色、绿色、蓝色混合而成。

1.颜色值

颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。

每种颜色的最小值是 0（十六进制：#00）。最大值是 255（十六进制：#FF）。

这个表格给出了由三种颜色混合而成的具体效果：

2.颜色名

大多数的浏览器都支持颜色名集合。

**提示：**仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。

如果需要使用其它的颜色，需要使用十六进制的颜色值。

14.HTML CSS

通过使用 HTML4.0，所有的格式化代码均可移出 HTML 文档，然后移入一个独立的样式表。

html 复制代码 
<html>

<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>

<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>

</html>

15.HTML 链接标签

HTML 使用超级链接与网络上的另一个文档相连。

几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

1.HTML 超链接（链接）

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

我们通过使用 <a> 标签在 HTML 中创建链接。

有两种使用 <a> 标签的方式：

  1. 通过使用 href 属性 - 创建指向另一个文档的链接
  2. 通过使用 name 属性 - 创建文档内的书签

2.HTML 链接语法

链接的 HTML 代码很简单。它类似这样：

html 复制代码 
<a href="url">Link text</a>

href 属性规定链接的目标。

开始标签和结束标签之间的文字被作为超级链接来显示。

特点：

  • 双标签，内部可以包裹内容
  • 如果需要a标签点击之后去指定页面，需要设置a标签的href属性

实例

html 复制代码 
<a href="http://www.baidu.com/">访问百度</a>

上面这行代码显示为：访问百度

点击这个超链接会把用户带到 百度 的首页。

提示："链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

显示特点：

  • a标签默认文字有下划线
  • a标签从未点击过，默认文字显示蓝色
  • a标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色）

空链接

html 复制代码 
<a href="#">空链接</a>

功能：

  • 点击之后回到网页顶部
  • 开发中不确定该链接最终跳转位置，用空链接占个位置

3.target 属性

使用 Target 属性，设置a标签的跳转方式。

下面的这行会在新窗口打开文档：

html 复制代码 
<a href="http://www.baidu.com/" target="_blank">访问百度</a>

4.name 属性

name 属性规定锚（anchor）的名称。

您可以使用 name 属性创建 HTML 页面中的书签。

书签不会以任何特殊方式显示，它对读者是不可见的。

当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

命名锚的语法：

html 复制代码 
<a name="label">锚（显示在页面上的文本）</a>

**提示：**锚的名称可以是任何你喜欢的名字。

**提示：**您可以使用 id 属性来替代 name 属性，命名锚同样有效。

实例

首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：

html 复制代码 
<a name="tips">基本的注意事项 - 有用的提示</a>

然后，我们在同一个文档中创建指向该锚的链接：

html 复制代码 
<a href="#tips">有用的提示</a>

在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。

html 复制代码 
<html>

<body>

<p>
<a href="#C4">查看 Chapter 4。</a>
</p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>

16.HTML 媒体标签

1.图片标签

通过使用 HTML，可以在文档中显示图像。

html 复制代码 
<img src="" alt="">

特点：

  • 单标签
  • img标签需要展示对应的效果，需要借助标签的属性进行设置！

属性注意点：

  1. 标签的属性写在开始标签内部
  2. 标签上可以同时存在多个属性
  3. 属性之间以空格隔开
  4. 标签名与属性之间必须以空格隔开
  5. 属性之间没有顺序之分
属性 说明
src 指定图片的路径
alt 替换文本
title 提示文本
width 宽度
height 高度

src属性：

属性值：目标图片的路径

当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可

alt属性：

属性值：替换文本

当图片加载失败时，才显示alt的文本

title属性：

属性值：提示文本( 当鼠标悬停时，才显示的文本 )

title属性不仅仅可以用于图片标签，还可以用于其他标签

width和height属性:

属性值：宽度和高度

如果只设置width或height中的一个，另一个没设置的会自动等比例缩放。

如果同时设置了width和height两个，若设置不当此时图片可能会变形。

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="./cat.gif" alt="">
    <img src="" alt="这个图片不见了">
    <img src="./images/dog.gif" alt="" title="这是一只狗">
</body>
</html>

2.路径

场景：页面需要加载图片，需要先找到对应的图片

  • 绝对路径
  • 相对路径(常用)

3.音频标签

场景：在页面中插入音频

html 复制代码 
<audio src="" controls></audio>

常用属性：

注意： 音频标签目前支持三种格式：MP3、Wav、Ogg

4.视频标签

场景：在页面中插入视频

html 复制代码 
<video src="" controls></video>

常用属性：

注意： 视频标签目前支持三种格式：MP4 、WebM 、Ogg

17.HTML 列表标签

1.列表的应用场景

在网页中按照行展示关联性的内容，如：新闻列表、排行榜、账单等

特点：按照行的方式，整齐显示内容

种类：无序列表、有序列表、自定义列表

2.无序列表

在网页中表示一组无顺序之分的列表，如：新闻列表。

标签组成：

标签名 说明
ul 表示无序列表的整体，用来包裹li标签
li 表示无序列表的每一项，用来包含每一行的内容

显示特点：

​ 列表的每一项前默认显示圆点标识

注意点：

  • ul标签中只允许包含li标签
  • li标签可以包含任意内容
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul>
        <li>苹果</li>
        <li>香蕉</li>
        <li>草莓</li>
        <li>榴莲</li>
    </ul>
</body>
</html>

3.有序列表

在网页中表示一组有顺序之分的列表，如：排行榜。

标签组成

标签名 说明
ol 表示有序列表的整体，用来包裹li标签
li 表示有序列表的每一项，用来包含每一行的内容

显示特点：

​ 列表的每一项前默认显示序号标识

注意点：

  • ol标签中只允许包含li标签
  • li标签可以包含任意内容
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ol>
        <li>小明</li>
        <li>张三</li>
        <li>李四</li>
    </ol>    
</body>
</html>

4.自定义列表

在网页的底部导航中通常会使用自定义列表实现。

标签名 说明
dl 表示自定义列表的整体，用来包裹dt/dd标签
dt 表示自定义列表的主题
dd 表示自定义列表针对主题的每一项内容
标签 英文全称
dl definition list
dt definition term
dd definition description

显示特点：

dd前会默认显示缩进效果

注意点：

  • dl标签中只允许包含dt/dd标签
  • dt/dd标签可以包含任意内容
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <dl>
        <dt>帮助中心</dt>
        <dd>账户管理</dd>
        <dd>购物指南</dd>
        <dd>订单操作</dd>
        <dt>服务支持</dt>
        <dd>售后政策</dd>
        <dd>自助服务</dd>
        <dt>线下门店</dt>
        <dd>服务网点</dd>
        <dd>授权体验店</dd>
        <dt>关于</dt>
        <dd>企业社会责任</dd>
        <dd>举报</dd>
    </dl>
</body>
</html>

总结

无序列表最常用，有序列表偶尔用，自定义列表底部导航用

18.HTML 表格标签

在网页中以行+列的单元格的方式整齐展示和数据

基本标签：

标签名 说明
table 表格整体，可用于包裹多个tr
tr 表格每行，可用于包裹td
td 表格单元格，可用于包裹内容
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" width="800" height="200">
        <tr>
        <td>姓名</td>
        <td>成绩</td>
        <td>评语</td>
    </tr>
    <tr>
        <td>张三</td>
        <td>100分</td>
        <td>真棒</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>80分</td>
        <td>还行</td>
    </tr>
    </table>  
</body>
</html>

1.表格相关属性

注意：

​ 实际开发时针对于样式效果推荐用CSS设置

属性名 属性值 效果
border 数字 边框宽度
width 数字 表格宽度
height 数字 表格高度

2.表格标签

表格标题和表头单元格标签：在表格中表示整体大标题和一列小标题

标签名 名称 说明
caption 表格大标题 表示表格整体大标题，默认在表格整体顶部居中位置显示
th 表头单元格 表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

注意：

  • caption标签书写在table标签内部
  • th标签书写在tr标签内部（用于替换td标签）
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" width="300" height="50">
    <caption>学生成绩单</caption>
    <tr>
        <th>姓名</th>
        <th>成绩</th>
        <th>评语</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>100分</td>
        <td>真棒</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>80分</td>
        <td>还行</td>
    </tr>
    </table>  
</body>
</html>

3.表格的结构标签

让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table border="1" width="300" height="100">
        <caption><strong>学生成绩单</strong></caption>
        <thead>
            <th>姓名</th>
            <th>成绩</th>
            <th>评语</th>
        </thead>
        <tbody>
            <tr>
                <td>小哥哥</td>
                <td>100分</td>
                <td>小哥哥真帅气</td>
            </tr>
            <tr>
                <td>小姐姐</td>
                <td>100分</td>
                <td>小哥哥真漂亮</td>       
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td>总结</td>
                <td>郎才女貌</td>
                <td>郎才女貌</td>       
            </tr>    
        </tfoot>
    </table>
</body>
</html>

4.合并单元格

将水平或垂直多个单元格合并成一个单元格

合并原则：

  • 上下合并：只保留最上的，删除其他
  • 左右合并：只保留最左的，删除其他
属性名 属性值 说明
rowspan 合并单元格的个数 跨行合并(上下合并)，将多行垂直合并
colspan 合并单元格的个数 跨列合并(左右合并)，将多列水平合并

注意：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）
Document

姓名 成绩 评语
小哥哥 100分 小哥哥真帅气
小姐姐 100分 小哥哥真漂亮
[学生成绩单]

19.表单标签

表单（Form）是网页中一个 专门用来收集用户输入数据 的区域，它可以把这些数据发送到服务器，让网站根据这些数据做出响应。(搜索、登录、注册)

1.input系列标签

在网页中显示收集用户信息的表单效果，如：登录页、注册页

input标签可以通过type属性值的不同，展示不同效果。

标签名 type属性值 说明
input text 文本框，用于输入单行文本
input password 密码框，用于输入密码
input radio 单选框
input checkbox 多选框
input file 文件选择
input submit 提交按钮
input reset 重置按钮
input button 普通按钮，默认无功能，之后配合js添加功能
文本框

在网页中显示输入单行文本的表单控件

type属性值：text

常用属性：

​ placeholder：占位符，提示用户输入内容的文本

​ value:用户输入的内容，提交之后会发送给后端服务器

​ name:当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义

后端接收到数据的格式为： name的属性值 = value的属性值

密码框

在网页中显示输入密码的表单控件

type属性值：password

常用属性：

​ placeholder：占位符，提示用户输入内容的文本

单选框

在网页中显示多选一的单选表单控件

type属性值：radio

常用属性：

​ name:分组，有相同name属性的单选框为一组，一组中同时只能有一个被选中

​ checked:默认选中

复选框

在网页中显示多选多的多选表单控件

type属性值：checkbox

常用属性：

​ checked：默认选中

文件选择

在网页中显示文件选择的表单控件

type属性值：file

常用属性：

​ multiple:多文件选择

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    我是： <input type="radio" name="我是"> 男
          <input type="radio" name="我是" checked> 女
    <br>
    <br>
    常住地： <input type="text" placeholder="请输入住址">
    <br>
    <br>
    密码： <input type="password" placeholder="请输入密码">
    <br>
    <br>
    婚姻状况： <input type="checkbox"> 未婚
              <input type="checkbox"> 已婚
              <input type="checkbox"> 丧偶
    <br>
    <br>
    上传文件: <input type="file" multiple>
</body>
</html>
按钮

在网页中显示不同功能的按钮表单控件

type属性值：

标签名 type属性值 说明
input submit 提交按钮
input reset 重置按钮
input button 普通按钮，默认无功能，之后配合js添加功能

如果需要实现以上按钮功能，需要配合form标签使用

form使用方法：用form标签把表单标签包裹起来即可

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="">
        用户名: <input type="text">
        <br>
        <br>
        密码: <input type="password">
        <br>
        <br>
        <input type="submit" value="注册">
        <input type="reset">
        <input type="button" value="普通按钮">
    </form>
</body>
</html>
总结

2.button按钮标签

同input的按钮

标签名 type属性值 说明
button submit 提交按钮
button reset 重置按钮
button button 普通按钮，默认无功能，之后配合js添加功能

3.select下拉菜单标签

在网页中提供多个选择项的下拉菜单表单控件

标签组成：

  • select标签：下拉菜单的整体
  • option标签：下拉菜单的每一项

常见属性：

​ selected：下拉菜单的默认选中

4.textarea文本域标签

在网页中提供可输入多行文本的表单控件

标签名：textarea

常见属性：

  • cols：规定了文本域内可见宽度
  • rows：规定了文本域内可见行数

注意：

  • 右下角可以拖拽改变大小
  • 实际开发时针对于样式效果推荐用CSS设置
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <select name="" id="">
        <option value="">小猫</option>
        <option value="">小狗</option>
        <option value="">小牛</option>
        <option value="" selected>小马</option>
    </select>
    <br>
    <br>
    <textarea name="" id=""></textarea>
</body>
</html>

5.label标签

常用于绑定内容 与表单标签的关系。

标签名：label

使用方法①：

  1. 使用label标签把内容（如：文本）包裹起来
  2. 在表单标签上添加id属性
  3. 在label标签的for属性中设置对应的id属性值

使用方法②：

  1. 直接使用label标签把内容（如：文本）和表单标签一起包裹起来
  2. 需要把label标签的for属性删除即可
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    选择性别：<input type="radio" name="sex" id="man"> <label for="man">男</label>
             <label>
                <input type="radio" name="sex" > 女  
             </label>
</body>
</html>

点击文字即可选中radio

20.语义化标签

1.无语义标签

div标签：一行只显示一个（独占一行）

span标签：一行可以显示多个

2.有语义标签

21.字符实体

字符实体可以在网页中显示特殊符号

在网页中展示特殊符号效果时，需要使用字符实体替代

相关推荐
GoldKey3 小时前
gcc 源码阅读---语法树
linux·前端·windows
张拭心4 小时前
亚马逊 AI IDE Kiro “狙击”Cursor？实测心得
前端·ai编程
烛阴4 小时前
为什么你的Python项目总是混乱？层级包构建全解析
前端·python
@大迁世界5 小时前
React 及其生态新闻 — 2025年6月
前端·javascript·react.js·前端框架·ecmascript
红尘散仙6 小时前
Rust 终端 UI 开发新玩法：用 Ratatui Kit 轻松打造高颜值 CLI
前端·后端·rust
新酱爱学习6 小时前
前端海报生成的几种方式：从 Canvas 到 Skyline
前端·javascript·微信小程序
袁煦丞6 小时前
把纸堆变数据流！Paperless-ngx让文件管理像打游戏一样爽：cpolar内网穿透实验室第539个成功挑战
前端·程序员·远程工作
慧慧吖@6 小时前
关于两种网络攻击方式XSS和CSRF
前端·xss·csrf
徐小夕6 小时前
失业半年，写了一款多维表格编辑器pxcharts
前端·react.js·架构
热门推荐
01全球最强模型Grok4，国内已可免费使用！（附教程）02KGG转MP3工具|非KGM文件|解密音频03Coze扣子平台完整体验和实践（附国内和国际版对比）04Cursor Claude 模型无法使用的解决方法05【无标题】06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07《深入设计模式》模式结构汇总08绿色建筑新态势：楼宇自控助力能效提升，推动成本优化新路径09DeepSeek各版本说明与优缺点分析10深度神经网络训练过程与常见概念