HTML之常用基础标签

    • 一、HTML文档基本结构标签
      • 1. `<html>`标签
      • 2. `<head>`标签
      • 3. `<body>`标签
    • 二、文本相关基础标签
      • 1. 标题标签（`<h1>` - `<h6>`）
      • 2. 段落标签（`<p>`）
      • 3. 换行标签（`<br>`）
      • 4. 强调标签（`<em>`和`<strong>`）
      • 5. 代码标签（`<code>`、`<pre>`等）
    • 三、链接相关基础标签
      • 1. 超链接标签（`<a>`）
      • 2. 图像标签（`<img>`）
    • 四、列表相关基础标签
      • 1. 无序列表（`<ul>`和`<li>`）
      • 2. 有序列表（`<ol>`和`<li>`）
      • 3. 自定义列表（`<dl>`、`<dt>`和`<dd>`）
    • 五、表格相关基础标签
      • 1. 表格标签（`<table>`、`<tr>`、`<td>`等）
    • 六、表单相关基础标签
      • 1. 表单标签（`<form>`）
      • 2. 其他表单元素（`<select>`、`<textarea>`等）

一、HTML文档基本结构标签

1. <html>标签

<html>标签是HTML文档的根元素，整个HTML页面的所有内容都包含在该标签内。它就像是一座大厦的框架，界定了网页的范围。一个标准的HTML文档以<html>标签开始，以</html>标签结束。

<html><!-- 网页内容都写在这里 -->
</html>

2. <head>标签

<head>标签用于定义HTML文档的头部信息，这些信息不会直接显示在网页的可视区域，而是包含了网页的元数据，如网页标题、字符编码、引入外部样式表和脚本等。它类似于一本书的目录页，虽然不展示具体内容，但对整体内容的呈现起到重要的辅助作用。

<head><meta charset="UTF-8"><title>我的网页标题</title><link rel="stylesheet" href="styles.css"><script src="script.js"></script>
</head>

在上述代码中，<meta charset="UTF-8">定义了网页的字符编码为UTF-8，确保网页能够正确显示各种字符；<title>标签设置了网页在浏览器标签页显示的标题；<link>标签用于引入外部的CSS样式表，让网页可以按照指定的样式进行渲染；<script>标签则用于引入外部的JavaScript脚本，实现网页的交互功能。

3. <body>标签

<body>标签是HTML文档的主体部分，网页中所有可见的内容，如文字、图片、链接等，都要写在<body>标签内。它是用户实际浏览到的页面内容区域，相当于书中真正的正文部分。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>我的网页</title>
</head>
<body>这是网页的正文内容！
</body>
</html>

二、文本相关基础标签

1. 标题标签（<h1> - <h6>）

HTML提供了6个等级的标题标签，从<h1>到<h6>，重要性依次递减，字体大小也逐渐变小。标题标签常用于划分网页的不同章节和主题，使页面结构更加清晰，就像书籍中的各级标题一样。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>标题标签示例</title>
</head>
<body><h1>一级标题：网页主标题</h1><h2>二级标题：章节主题</h2><h3>三级标题：小节主题</h3><h4>四级标题：更小的主题</h4><h5>五级标题：辅助主题</h5><h6>六级标题：最次要主题</h6>
</body>
</html>

2. 段落标签（<p>）

<p>标签用于定义一个段落。在网页中，将相关的文本内容放在<p>标签内，可以使文本以段落的形式展示，增强可读性。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>段落标签示例</title>
</head>
<body><p>这是第一个段落，包含了一些描述性的文字。</p><p>这是第二个段落，与第一个段落内容相互独立。</p>
</body>
</html>

3. 换行标签（<br>）

<br>标签是一个单标签（自闭合标签），用于在文本中强制换行。当需要在段落内实现换行效果，但又不想产生新的段落间隔时，就可以使用<br>标签。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>换行标签示例</title>
</head>
<body><p>这是一行文本<br>这是换行后的文本。</p>
</body>
</html>

4. 强调标签（<em>和<strong>）

<em>标签用于定义强调文本，通常会以斜体的形式显示；<strong>标签用于定义重要文本，一般会以加粗的形式呈现。两者都能起到突出文本内容的作用，但语义略有不同，<strong>表示内容的重要性，<em>侧重于表达强调语气。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>强调标签示例</title>
</head>
<body><p>这是一段普通文本，其中<em>这句话</em>需要强调语气，<strong>这句话</strong>非常重要。</p>
</body>
</html>

5. 代码标签（<code>、<pre>等）

在网页中展示代码片段时，<code>标签用于标记内联代码，<pre>标签则用于保留文本的原始格式（包括空格和换行）展示代码块。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>代码标签示例</title>
</head>
<body><p>以下是一个简单的JavaScript代码示例：</p><pre><code>
function add(a, b) {return a + b;
}</code></pre>
</body>
</html>

三、链接相关基础标签

1. 超链接标签（<a>）

<a>标签用于创建超链接，通过href属性指定链接的目标地址，可以链接到其他网页、文件、锚点等。它是网页之间相互跳转的桥梁。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>超链接标签示例</title>
</head>
<body><p>点击以下链接访问百度：<a href="https://www.baidu.com">百度</a></p><p>下载文件：<a href="example.pdf" download>示例文件</a></p><p>跳转到页面内的锚点：<a href="#section1">跳转到第一节</a></p><h2 id="section1">第一节内容</h2><p>这里是第一节的具体内容……</p>
</body>
</html>

在上述代码中，第一个链接通过href属性指向外部网站；第二个链接添加了download属性，用于实现文件下载功能；第三个链接通过href属性指向页面内带有id="section1"的元素，实现页面内的跳转。

2. 图像标签（<img>）

<img>标签用于在网页中插入图像，通过src属性指定图像文件的路径，alt属性用于在图像无法显示时显示替代文本，width和height属性可以设置图像的宽度和高度。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>图像标签示例</title>
</head>
<body><img src="example.jpg" alt="示例图片" width="300" height="200">
</body>
</html>

四、列表相关基础标签

1. 无序列表（<ul>和<li>）

<ul>标签用于创建无序列表，列表项使用<li>标签定义，列表项前面会显示默认的项目符号（如圆点）。常用于展示没有顺序要求的项目集合。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>无序列表示例</title>
</head>
<body><h2>水果列表</h2><ul><li>苹果</li><li>香蕉</li><li>橙子</li></ul>
</body>
</html>

2. 有序列表（<ol>和<li>）

<ol>标签用于创建有序列表，同样使用<li>标签定义列表项，列表项前面会显示数字序号。适用于有先后顺序的内容展示。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>有序列表示例</title>
</head>
<body><h2>任务清单</h2><ol><li>完成需求分析</li><li>进行设计规划</li><li>编写代码实现</li></ol>
</body>
</html>

3. 自定义列表（<dl>、<dt>和<dd>）

<dl>标签用于创建自定义列表，<dt>标签定义术语，<dd>标签定义术语的解释。常用于展示术语与解释的对应关系。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>自定义列表示例</title>
</head>
<body><h2>计算机术语解释</h2><dl><dt>HTML</dt><dd>超文本标记语言，用于创建网页结构。</dd><dt>CSS</dt><dd>层叠样式表，用于美化网页外观。</dd><dt>JavaScript</dt><dd>一种脚本语言，用于实现网页交互功能。</dd></dl>
</body>
</html>

五、表格相关基础标签

1. 表格标签（<table>、<tr>、<td>等）

<table>标签用于创建表格，<tr>标签定义表格的行，<td>标签定义表格的单元格。此外，<th>标签用于定义表头单元格，通常会以加粗、居中的样式显示。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>表格标签示例</title>
</head>
<body><table border="1"><tr><th>姓名</th><th>年龄</th><th>性别</th></tr><tr><td>张三</td><td>25</td><td>男</td></tr><tr><td>李四</td><td>23</td><td>女</td></tr></table>
</body>
</html>

在上述代码中，border="1"用于显示表格的边框，实际开发中更多通过CSS来控制表格样式。

六、表单相关基础标签

1. 表单标签（<form>）

<form>标签用于创建表单，用于收集用户输入的数据，如注册、登录、调查问卷等。通过action属性指定表单数据提交的目标地址，method属性指定提交数据的方式（如GET或POST）。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>表单标签示例</title>
</head>
<body><form action="submit.php" method="post"><label for="username">用户名：</label><input type="text" id="username" name="username"><br><label for="password">密码：</label><input type="password" id="password" name="password"><br><input type="submit" value="提交"></form>
</body>
</html>

在上述代码中，<label>标签用于为表单元素添加描述信息，for属性与对应的表单元素的id属性值相同，这样点击标签文本时会自动聚焦到对应的表单元素上。<input>标签用于创建不同类型的输入字段，如文本框（type="text"）、密码框（type="password"）、提交按钮（type="submit"）等。

2. 其他表单元素（<select>、<textarea>等）

<select>标签用于创建下拉选择框，<option>标签定义下拉选项；<textarea>标签用于创建多行文本输入框。

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>其他表单元素示例</title>
</head>
<body><form action="submit.php" method="post"><label for="city">选择城市：</label><select id="city" name="city"><option value="beijing">北京</option><option value="shanghai">上海</option><option value="guangzhou">广州</option></select><br><label for="message">留言：</label><br><textarea id="message" name="message" rows="5" cols="30"></textarea><br><input type="submit" value="提交"></form>
</body>
</html>

若这篇内容帮到你，动动手指支持下！关注不迷路，干货持续输出！
ヾ(´∀ ˋ)ﾉヾ(´∀ ˋ)ﾉヾ(´∀ ˋ)ﾉヾ(´∀ ˋ)ﾉヾ(´∀ ˋ)ﾉ

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/pingmian/86845.shtml
繁体地址，请注明出处：http://hk.pswp.cn/pingmian/86845.shtml
英文地址，请注明出处：http://en.pswp.cn/pingmian/86845.shtml

如若内容造成侵权/违法违规/事实不符，请联系英文站点网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

外键列索引优化：加速JOIN查询的关键

外键列索引优化：加速JOIN查询的关键

在使用数据库时&#xff0c;特别是在执行涉及JOIN操作的查询时&#xff0c;优化外键列的索引是非常重要的。外键通常用于建立表之间的关联&#xff0c;而JOIN操作则是基于这些外键列来实现的。下面是一些关键步骤和技巧&#xff0c;可以帮助你优化外键列的索引&#xff0c;从而…
阅读更多...
2025年 UI 自动化框架使用排行

2025年 UI 自动化框架使用排行

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 </
阅读更多...
【软考高项论文】论信息系统项目的整体管理

【软考高项论文】论信息系统项目的整体管理

摘要 在信息系统项目的管理中&#xff0c;整体管理处于核心地位&#xff0c;对项目全局规划与协调起着关键作用&#xff0c;保障项目各阶段目标一致且高效执行。本文结合作者参与的 2024 年 6 月启动的信息系统项目&#xff0c;深入探讨项目整体管理的过程&#xff0c;着重阐述…
阅读更多...
（4）Wireshark捕获设置

（4）Wireshark捕获设置

1.简介 WireShark的强大之处就在于不用你再做任何配置就可以抓取http或者https的包。主要是讲解和分享如何使用WireShark抓包。 2.运行Wireshark 安装好 Wireshark 以后&#xff0c;就可以运行它来捕获数据包了。方法如下&#xff1a; 1.在 Windows 的“开始”菜单中&#…
阅读更多...
智慧校园电子班牌系统源码的开发与应用，基于Java/SpringBoot后端、Vue2前端、MySQL5.7数据库

智慧校园电子班牌系统源码的开发与应用，基于Java/SpringBoot后端、Vue2前端、MySQL5.7数据库

智慧校园系统源码&#xff0c;智慧班牌源码&#xff0c;java语言 技术栈&#xff1a; ‌后端开发‌&#xff1a;采用Java语言和Spring Boot框架进行开发。Java是一种广泛使用的、面向对象的编程语言&#xff0c;而Spring Boot是基于Spring框架的快速应用开发框架&#xff0c;能…
阅读更多...
工程优化——WebSocket、WSS（WebSocket Secure）和SSE（Server-Sent Events）通信对比

工程优化——WebSocket、WSS（WebSocket Secure）和SSE（Server-Sent Events）通信对比

WebSocket、WSS&#xff08;WebSocket Secure&#xff09;和SSE&#xff08;Server-Sent Events&#xff09;是三种常见的实时通信技术&#xff0c;它们的核心区别在于通信方向、协议实现、数据格式和适用场景。以下是分维度的详细解释&#xff0c;并附带Python示例和应用场景选…
阅读更多...
【TiDB 社区智慧合集】 TiDB x 运营商｜掌上营业厅、账务、物联网等多核心业务场景的实战应用案例

【TiDB 社区智慧合集】 TiDB x 运营商｜掌上营业厅、账务、物联网等多核心业务场景的实战应用案例

作者&#xff1a; Billmay表妹 原文来源&#xff1a; https://tidb.net/blog/bb1467af 在信息基础设施国产化战略加速落地的背景下&#xff0c;电信及广电领域正迎来数据库国产化替代的关键转型期。TiDB 凭借自身技术创新优势&#xff0c;深度携手各大运营商&#xff0c;以全…
阅读更多...
Java 17 下 Spring Boot 与 Pulsar 队列集成实战：生产者与消费者实现指南

Java 17 下 Spring Boot 与 Pulsar 队列集成实战：生产者与消费者实现指南

Pulsar队列与Springboot集成有2种模式&#xff1a;官方pulsar-client 或社区Starter&#xff08;如pulsar-spring-boot-starter&#xff09; 如果考虑最新、最快、最齐全的功能&#xff0c;使用官方pulsar-client如果考虑快速低成本接入&#xff0c;使用社区Starter&#xff0…
阅读更多...
《Go语言高级编程》RPC 入门

《Go语言高级编程》RPC 入门

《Go语言高级编程》RPC 入门 一、什么是 RPC&#xff1f; RPC&#xff08;Remote Procedure Call&#xff0c;远程过程调用&#xff09;是分布式系统中不同节点间的通信方式&#xff0c;允许程序像调用本地函数一样调用远程服务的方法。 Go 语言的标准库 net/rpc 提供了基础的…
阅读更多...
第N5周：Pytorch文本分类入门

第N5周：Pytorch文本分类入门

&#x1f368; 本文为&#x1f517;365天深度学习训练营中的学习记录博客 &#x1f356; 原作者&#xff1a;K同学啊 一、前期准备 1.加载数据 import torch import torch.nn as nn import torchvision from torchvision import transforms,datasets import os,PIL,p…
阅读更多...
uniappx 安卓app项目本地打包运行，腾讯地图报错：‘鉴权失败，请检查你的key‘

uniappx 安卓app项目本地打包运行，腾讯地图报错：‘鉴权失败，请检查你的key‘

根目录下添加 AndroidManifest.xml 文件&#xff0c; <application><meta-data android:name"TencentMapSDK" android:value"腾讯地图申请的key" /> </application> manifest.json 文件中添加&#xff1a; "app": {"…
阅读更多...
【向上教育】结构化面试开口秘籍.pdf

【向上教育】结构化面试开口秘籍.pdf

向 上 教 育 XI A N G S H A N G E D U C A T I O N 结构化 面试 开口秘笈 目 录 第一章 自我认知类 ........................................................................................................................... 2 第二章 工作关系处理类 .......…
阅读更多...
Webpack 热更新（HMR）原理详解

Webpack 热更新（HMR）原理详解

&#x1f525; Webpack 热更新&#xff08;HMR&#xff09;原理详解 &#x1f4cc; 本文适用于 Vue、React 等使用 Webpack 的项目开发者&#xff0c;适配 Vue CLI / 自定义 Webpack 项目。 &#x1f3af; 一、什么是 HMR&#xff1f; Hot Module Replacement 是 Webpack 提供的…
阅读更多...
MySQL索引完全指南

MySQL索引完全指南

一、索引是什么&#xff1f;为什么这么重要&#xff1f; 索引就像字典的目录 想象一下&#xff0c;你要在一本1000页的字典里找"程序员"这个词&#xff0c;你会怎么做&#xff1f; 没有目录&#xff1a;从第1页开始一页一页翻&#xff0c;可能要翻500页才能找到有…
阅读更多...
学习使用dotnet-dump工具分析.net内存转储文件（2）

学习使用dotnet-dump工具分析.net内存转储文件（2）

运行ShenNiusModularity项目&#xff0c;使用createdump工具dump完整的进程内存映射文件&#xff0c;然后运行dotnet-dump analyze命令加载dump文件。   可以先使用dumpheap命令显示有关垃圾回收堆的信息和有关对象的收集统计信息。dumpheap支持多类参数&#xff08;如下所示…
阅读更多...
Oracle BIEE 交互示例（一）同一分析内

Oracle BIEE 交互示例（一）同一分析内

Oracle BIEE 交互示例（一）同一分析内 1 示例背景2 实践目标3 实操步骤3.1 创建数据集3.1.1 TEST_TABLE3.1.2 保存名字为【01 TEST_TABLE】3.2 创建分析3.2.1 创建列3.2.2 创建视图3.2.2.1 数据透视表3.2.2.2 图形3.2.2.3 表3.3 设置交互4 结果示例1 示例背景 版本：OBIEE 12…
阅读更多...
使用API有效率地管理Dynadot域名，出售账户中的域名

使用API有效率地管理Dynadot域名，出售账户中的域名

关于Dynadot Dynadot是通过ICANN认证的域名注册商&#xff0c;自2002年成立以来&#xff0c;服务于全球108个国家和地区的客户&#xff0c;为数以万计的客户提供简洁&#xff0c;优惠&#xff0c;安全的域名注册以及管理服务。 Dynadot平台操作教程索引&#xff08;包括域名邮…
阅读更多...
Vite 打包原理详解 + Webpack 对比

Vite 打包原理详解 + Webpack 对比

&#x1f680; Vite 打包原理详解 Webpack 对比 &#x1f44b; 本文适合&#xff1a;Vite 使用者、Vue/React 工程师、希望搞清楚打包流程及与 Webpack 区别的开发者 &#x1f310; 技术背景&#xff1a;Vite 采用 ES Modules 原生浏览器能力驱动开发体验&#xff0c;Webpack…
阅读更多...
区块链RWA（Real World Assets）系统开发全栈技术架构与落地实践指南

区块链RWA（Real World Assets）系统开发全栈技术架构与落地实践指南

一、技术架构设计&#xff1a;分层架构与模块协同 1. 核心区块链层 区块链选型策略&#xff1a; 公链&#xff1a;以太坊主网&#xff08;安全性高&#xff0c;DeFi生态完备&#xff09; Polygon CDK&#xff08;Layer2定制化合规链&#xff0c;Gas费低至$0.003&#xff09;…
阅读更多...
GBDT：梯度提升决策树——集成学习中的预测利器

GBDT：梯度提升决策树——集成学习中的预测利器

核心定位&#xff1a;一种通过串行集成弱学习器&#xff08;决策树&#xff09;、以梯度下降方式逐步逼近目标函数的机器学习算法&#xff0c;在结构化数据预测任务中表现出色。 本文由「大千AI助手」原创发布&#xff0c;专注用真话讲AI&#xff0c;回归技术本质。拒绝神话或妖…
阅读更多...
最新文章

Copyright @ 2022~2023