HTML基本标签使用【超链接标签、表格标签、表单标签、input标签】

最新推荐文章于 2025-09-03 16:22:23 发布

原创

最新推荐文章于 2025-09-03 16:22:23 发布 · 1.4k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

一、基本介绍

1.1 概念

HTML，全称为超文本标记语言（HyperText Markup Language），是一种用于创建网页的标准标记语言。
它通过一系列标签来描述网页内容的结构和外观，从而使浏览器能够解释并展示网页给用户。
HTML文档由不同的元素组成，每个元素由标签表示，这些标签用来标记文本、图像、链接、表格、表单等网页内容，并定义它们的结构和意义。

1.2 HTML的核心特点

标记性：HTML使用一系列尖括号包围的关键词（即标签）来标记网页的不同部分，如<p>用于段落，<a>用于链接。
结构化：通过标签，HTML文档被组织成逻辑结构，如头部（<head>）、主体（<body>）、标题（<h1>至<h6>）、列表（<ul>, <ol>）、表格（<table>）等。
超文本：HTML支持超链接，通过<a>标签可以链接到互联网上的其他网页，实现信息的交叉引用和跳转。
兼容性与可移植性：HTML是一种开放标准，被所有现代浏览器支持，保证了网页在不同平台和设备上的可访问性。
进化与发展：从最初的HTML到HTML5，该语言不断进化，引入了更多功能和语义化标签，以适应多媒体内容、响应式设计及Web应用程序的需求。

总的来说，HTML是构建网页的基础，是Web内容创作者必须掌握的语言之一，它与CSS（层叠样式表）和JavaScript一起构成了网页设计与开发的三大技术支柱。

二、HTML基本标签

HTML基本标签是构成网页结构的基础元素，以下是一些最常用和最基本的HTML标签及其简要说明：

文档类型声明:
```
<!DOCTYPE html>
```
这个声明告诉浏览器这是一个HTML5文档。
HTML根元素:
```
<html lang="en">
...
</html>
```
包含整个HTML文档，lang属性定义页面的语言。

头部元素:

<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>

在这里插入图片描述

包含文档的元数据，如字符集定义、标题等。

标题标签 (h1 到 h6):
```
<h1>一级标题</h1>
<h2>二级标题</h2>
...
<h6>六级标题</h6>
```
用于定义不同级别的标题，h1 是最高级别。
段落标签:
```
<p>这是一个段落。</p>
```
用来定义段落。
换行标签:
```
<br>
```
强制换行，单标签。

链接标签:

<a href="http://example.com">链接文本</a>

用于创建超链接。

图像标签:
```
<img src="image.jpg" alt="图像描述">
```
插入图像，src 属性指定图像地址，alt 提供替代文本。

列表标签:

无序列表:

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
</ul>

属性值	描述	用法举例
circle	空心圆	< ul type=“circle”>< /ul>
disc	实心圆	< ul type=“disc”>< /ul>
square	黑色方块	< ul type=“square”>< /ul>

有序列表:

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
</ol>

属性值	描述	用法举例
1	数字类型	< ul type=“1”>< /ul>
A	大写字母类型	< ul type=“A” >< /ul>
a	小写字母类型	< ul type=“a”>< /ul>
I	大写古罗马	< ul type=“I”>< /ul>
i	小写古罗马	< ul type=“i”>< /ul>

在这里插入图片描述

区块标签:
- <div>: 通用的区块容器。
- <section>: 定义文档中的独立区域或节。
- <article>: 自包含的内容，可以分布独立。
行内标签:
- <span>: 用于对文本进行内联样式设置。
- <strong>: 加重文本，通常显示为粗体。
- <em>: 强调文本，通常显示为斜体。

这些只是HTML中的一部分基本标签，实际中还有更多用于实现特定功能和样式的标签，如表格、表单元素、多媒体嵌入、语义化标签等。

三、超链接标签

HTML中的超链接标签 <a> 是Anchor（锚点）的缩写，用于创建从当前文档到其他文档、同一文档内的特定部分或其他网络资源的链接。以下是 <a> 标签常用的属性介绍：

href (Hypertext Reference):
- 必需属性，定义了链接的目标地址。它可以是一个URL，指向另一个网页、文件、邮箱地址或者当前文档内的锚点。
- 示例：<a href="https://www.example.com">访问示例网站</a>
target:
- 可选属性，规定在何处打开链接文档。
  - _self（默认）: 在相同的框架或窗口中打开链接。
  - _blank: 在新窗口或新的浏览器标签页中打开链接。
  - _parent: 在父框架集中打开链接（如果当前页面包含在框架集内）。
  - _top: 在整个浏览器窗口中打开链接，清除所有框架（如果当前页面位于框架内）。
- 示例：<a href="https://www.example.com" target="_blank">在新窗口打开</a>
title:
- 可选属性，提供有关链接的额外信息，通常是鼠标悬停在链接上时显示的提示文本。
- 示例：<a href="https://www.example.com" title="访问示例网站的首页">示例网站</a>
rel (Relationship):
- 可选属性，定义了链接文档与当前文档之间的关系，如rel="noopener noreferrer" 常用于增强安全性，防止新打开的页面通过javascript影响原页面。
name (或 id):
- 可选属性，主要用于创建文档内的书签或锚点。当链接的 href 中使用 #name 或 #id 形式的URL时，浏览器会滚动到具有相应 name 或 id 的元素位置。
- 示例：<a name="section1">第一部分</a> 和 <a href="#section1">跳转到第一部分</a>

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
    <title>锚点的使用</title>
  </head>
  <body>
  <a href="#i1">第一章</a>
  <a href

最低0.47元/天解锁文章

HTML基本标签使用【超链接标签、表格标签、表单标签、input标签】

目录

一、基本介绍

1.1 概念

1.2 HTML的核心特点

二、HTML基本标签

三、超链接标签