当前位置： 首页 > article >正文

HTML中各种标签的作用

article 2025/6/10 12:05:09

一、HTML文件主要标签结构及说明

1. <！DOCTYPE html>

  • 作用：声明文档类型，告知浏览器这是 HTML5 文档。

  • 必须：是。

2. <html lang=“zh”>. </html>

  • 作用：包裹整个网页内容，lang="zh"表示网页主要语言为中文。

  • 必须：是。

3. <head>. </头>

  • 作用：网页的“头部”，包含网页设置、资源引入、样式、标题等。

  • 必须：是（至少有 <title> 和 <meta charset>）。

主要内容：

  • <meta charset="UTF-8">
    设置网页的字符编码，保证中文、特殊符号正常显示。必须。

  • <title>Coze 智能体对话助手</title>
    设置网页标题，显示在浏览器标签上。必须。

  • <meta name="viewport" ...>
    控制网页在移动端的显示方式，让页面自适应手机等设备。推荐添加。

  • <link href="https://fonts.googleapis.com/...">
    引入Google字体，美化页面字体。可选。

  • <style> ... </style>
    CSS样式，控制页面元素外观。可选（但如果要美观展示建议有）。

  • <script> ... </script>
    JavaScript代码，负责页面的交互功能。可选（根据需求添加）。

4. < 体>... </身体>

  • 作用：页面的“身体”，所有可见内容都在这里。

  • 必须：是。

二、body部分主要结构

你的 body 分为以下几个模块：

1. <h2>... </h2>

  • 作用：页面主标题，居中显示。

  • 可选。

2. <div class="container"> ... </div>

  • 作用：主要内容容器，居中美化页面。

  • 可选（但常用）。

3. 多个 <div class="section"> ... </div>

  • 作用：每一块功能的分区，包括标题、输入框、按钮和显示结果。

  • 可选（结构和样式用，便于模块化）。

每个 section 包含：

  • .section-title：带图标的功能标题。

  • .inputs-row：一排输入框+按钮。

  • 一个 <p> 或 <div> 用于显示交互结果。

具体四个功能区说明

  1. 普通对话功能

    • 用户输入文本，点击发送，调用接口得到回答。

  2. 网页内容获取功能

    • 输入网址，获取并显示网页内容。（注意 JS 里其实没写具体实现，需要补充 getWebInfo 函数）

  3. 文生图功能

    • 输入图片描述（和可选的宽高），调用图片生成接口，返回图片和说明。

  4. 大模型参数对比与推荐

    • 输入两个模型的名字、应用场景、预算和要求，点击智能对比按钮，得到推荐。

4. <divstyle =".“> ... </div>

  • 作用：页面底部版权信息。

  • 可选。

三、各标签的分类总结

必须的标签

  • <!DOCTYPE html>

  • <html>

  • <head>

  • <meta charset="UTF-8">

  • <title>

  • <body>

推荐但可选的标签

  • <meta name="viewport">（响应式建议加）

  • <link rel="stylesheet"> / <style>（美化页面用）

  • <script>（实现动态交互）

  • <div class="container">（结构和美观）

仅在需要时添加

  • <input>、<button>、<img> 等（表单、功能需求才加）

  • <svg>（矢量图标，装饰/提示用）

  • 其他 <div>、<p>（结构和排版用）

四、这份 HTML 的主要作用和特点

  1. 结构清晰
    不同功能分区，各自独立。

  2. 美观易用
    用 CSS 美化，响应式适配手机端。

  3. 交互丰富
    JavaScript 实现“普通对话”、“网页内容获取”、“文生图”、“模型对比”四大功能，通过 fetch 调用后端接口。

  4. 现代网页标准
    使用了 Google 字体、SVG 图标、渐变背景等，体验更现代。

五、总结一句话

这是一个现代化、分区清晰的多功能对话助手网页模板，涵盖输入交互、内容展示、风格美化和响应式设计。

如果你需要进一步解释某个标签或某一块功能的代码实现，可以告诉我！

来源于ChatGtp的解释

相关文章：

HTML中各种标签的作用

一、HTML文件主要标签结构及说明 1. <&#xff01;DOCTYPE html> 作用&#xff1a;声明文档类型&#xff0c;告知浏览器这是 HTML5 文档。 必须&#xff1a;是。 2. <html lang“zh”>. </html> 作用&#xff1a;包裹整个网页内容&#xff0c;lang"z…...

编程日记 2025/6/10 12:05:09

CVE-2023-25194源码分析与漏洞复现(Kafka JNDI注入)

漏洞概述 漏洞名称&#xff1a;Apache Kafka Connect JNDI注入导致的远程代码执行漏洞 CVE编号&#xff1a;CVE-2023-25194 CVSS评分&#xff1a;8.8 影响版本&#xff1a;Apache Kafka 2.3.0 - 3.3.2 修复版本&#xff1a;≥ 3.4.0 漏洞类型&#xff1a;反序列化导致的远程代…...

编程日记 2025/6/10 12:04:05

统计学（第8版）——统计抽样学习笔记（考试用）

一、统计抽样的核心内容与问题 研究内容 从总体中科学抽取样本的方法利用样本数据推断总体特征&#xff08;均值、比率、总量&#xff09;控制抽样误差与非抽样误差 解决的核心问题 在成本约束下&#xff0c;用少量样本准确推断总体特征量化估计结果的可靠性&#xff08;置…...

编程日记 2025/6/10 12:02:57

Copilot for Xcode (iOS的 AI辅助编程)

Copilot for Xcode 简介Copilot下载与安装 体验环境要求下载最新的安装包安装登录系统权限设置 AI辅助编程生成注释代码补全简单需求代码生成辅助编程行间代码生成注释联想 代码生成 总结 简介 尝试使用了Copilot&#xff0c;它能根据上下文补全代码&#xff0c;快速生成常用…...

编程日记 2025/6/10 12:01:46

Axure零基础跟我学：展开与收回

亲爱的小伙伴，如有帮助请订阅专栏！跟着老师每课一练，系统学习Axure交互设计课程！ Axure产品经理精品视频课https://edu.csdn.net/course/detail/40420 课程主题：Axure菜单展开与收回 课程视频：...

编程日记 2025/6/10 12:00:40

Docker、Wsl 打包迁移环境

电脑需要开启wsl2 可以使用wsl -v 查看当前的版本 wsl -v WSL 版本&#xff1a; 2.2.4.0 内核版本&#xff1a; 5.15.153.1-2 WSLg 版本&#xff1a; 1.0.61 MSRDC 版本&#xff1a; 1.2.5326 Direct3D 版本&#xff1a; 1.611.1-81528511 DXCore 版本&#xff1a; 10.0.2609…...

编程日记 2025/6/10 11:59:35

RabbitMQ 各类交换机

为什么要用交换机&#xff1f; 交换机用来路由消息。如果直发队列&#xff0c;这个消息就被处理消失了&#xff0c;那别的队列也需要这个消息怎么办&#xff1f;那就要用到交换机 交换机类型 1&#xff0c;fanout&#xff1a;广播 特点 广播所有消息​​&#xff1a;将消息…...

编程日记 2025/6/10 11:58:25

高保真组件库：开关

一：制作关状态 拖入一个矩形作为关闭的底色：44 x 22，填充灰色CCCCCC，圆角23，边框宽度0，文本为”关“，右对齐，边距2,2,6,2，文本颜色白色FFFFFF。 拖拽一个椭圆，尺寸18 x 18，边框为0。3. 全选转为动态面板状态1命名为”关“。 二：制作开状态 复制关状态并命名为”开…...

编程日记 2025/6/10 11:56:56

未授权访问事件频发，我们应当如何应对？

在当下&#xff0c;数据已成为企业和组织的核心资产&#xff0c;是推动业务发展、决策制定以及创新的关键驱动力。然而&#xff0c;未授权访问这一隐匿的安全威胁&#xff0c;正如同高悬的达摩克利斯之剑&#xff0c;时刻威胁着数据的安全&#xff0c;一旦触发&#xff0c;便可…...

编程日记 2025/6/10 11:55:54

Easy Excel

Easy Excel 一、依赖引入二、基本使用1. 定义实体类&#xff08;导入/导出共用&#xff09;2. 写 Excel3. 读 Excel 三、常用注解说明&#xff08;完整列表&#xff09;四、进阶&#xff1a;自定义转换器&#xff08;Converter&#xff09; 其它自定义转换器没生效 Easy Excel在…...

编程日记 2025/6/10 11:54:52

欢乐熊大话蓝牙知识17:多连接 BLE 怎么设计服务不会乱？分层思维来救场！

多连接 BLE 怎么设计服务不会乱&#xff1f;分层思维来救场&#xff01; 作者按&#xff1a; 你是不是也遇到过 BLE 多连接时&#xff0c;调试现场像网吧“掉线风暴”&#xff1f; 温度传感器连上了&#xff0c;心率带丢了&#xff1b;一边 OTA 更新&#xff0c;一边通知卡壳。…...

编程日记 2025/6/10 11:53:50

AWS vs 阿里云：功能、服务与性能对比指南

在云计算领域&#xff0c;Amazon Web Services (AWS) 和阿里云 (Alibaba Cloud) 是全球领先的提供商&#xff0c;各自在功能范围、服务生态系统、性能表现和适用场景上具有独特优势。基于提供的引用[1]-[5]&#xff0c;我将从功能、服务和性能三个方面进行结构化对比分析&#…...

编程日记 2025/6/10 11:52:46

用js实现常见排序算法

以下是几种常见排序算法的 JS实现&#xff0c;包括选择排序、冒泡排序、插入排序、快速排序和归并排序&#xff0c;以及每种算法的特点和复杂度分析 1. 选择排序&#xff08;Selection Sort&#xff09; 核心思想&#xff1a;每次从未排序部分选择最小元素&#xff0c;与未排…...

编程日记 2025/6/10 11:51:35

python读取SQLite表个并生成pdf文件

代码用于创建含50列的SQLite数据库并插入500行随机浮点数据&#xff0c;随后读取数据&#xff0c;通过ReportLab生成横向PDF表格&#xff0c;包含格式化&#xff08;两位小数&#xff09;及表头、网格线等美观样式。 # 导入所需库 import sqlite3 # 用于操作…...

编程日记 2025/6/10 11:50:31

当下AI智能硬件方案浅谈

背景&#xff1a; 现在大模型出来以后&#xff0c;打破了常规的机械式的对话&#xff0c;人机对话变得更聪明一点。 对话用到的技术主要是实时音视频&#xff0c;简称为RTC。下游硬件厂商一般都不会去自己开发音视频技术&#xff0c;开发自己的大模型。商用方案多见为字节、百…...

编程日记 2025/6/10 11:49:26

大模型真的像人一样“思考”和“理解”吗？​

Yann LeCun 新研究的核心探讨&#xff1a;大语言模型&#xff08;LLM&#xff09;的“理解”和“思考”方式与人类认知的根本差异。 核心问题&#xff1a;大模型真的像人一样“思考”和“理解”吗&#xff1f; 人类的思考方式&#xff1a; 你的大脑是个超级整理师。面对海量信…...

编程日记 2025/6/10 11:48:20

【题解-洛谷】P10480 可达性统计

题目&#xff1a;P10480 可达性统计 题目描述 给定一张 N N N 个点 M M M 条边的有向无环图&#xff0c;分别统计从每个点出发能够到达的点的数量。 输入格式 第一行两个整数 N , M N,M N,M&#xff0c;接下来 M M M 行每行两个整数 x , y x,y x,y&#xff0c;表示从 …...

编程日记 2025/6/10 11:47:13

在Spring Boot中集成RabbitMQ的完整指南

前言 在现代微服务架构中&#xff0c;消息队列&#xff08;Message Queue&#xff09;是实现异步通信、解耦系统组件的重要工具。RabbitMQ 是一个流行的消息中间件&#xff0c;支持多种消息协议&#xff0c;具有高可靠性和可扩展性。 本博客将详细介绍如何在 Spring Boot 项目…...

编程日记 2025/6/10 11:46:06

Element-Plus：popconfirm与tooltip一起使用不生效？

你们好&#xff0c;我是金金金。 场景 我正在使用Element-plus组件库当中的el-popconfirm和el-tooltip&#xff0c;产品要求是两个需要结合一起使用&#xff0c;也就是鼠标悬浮上去有提示文字&#xff0c;并且点击之后需要出现气泡确认框 代码 <el-popconfirm title"是…...

编程日记 2025/6/10 11:44:57

Selenium 查找页面元素的方式

Selenium 查找页面元素的方式 Selenium 提供了多种方法来查找网页中的元素&#xff0c;以下是主要的定位方式&#xff1a; 基本定位方式 通过ID定位 driver.find_element(By.ID, "element_id")通过Name定位 driver.find_element(By.NAME, "element_name"…...

编程日记 2025/6/10 11:43:49

OPENCV图形计算面积、弧长API讲解（1）

一.OPENCV图形面积、弧长计算的API介绍 之前我们已经把图形轮廓的检测、画框等功能讲解了一遍。那今天我们主要结合轮廓检测的API去计算图形的面积&#xff0c;这些面积可以是矩形、圆形等等。图形面积计算和弧长计算常用于车辆识别、桥梁识别等重要功能&#xff0c;常用的API…...

编程日记 2025/6/10 11:42:38

【Java】Ajax 技术详解

文章目录 1. Filter 过滤器1.1 Filter 概述1.2 Filter 快速入门开发步骤：1.3 Filter 执行流程1.4 Filter 拦截路径配置1.5 过滤器链2. Listener 监听器2.1 Listener 概述2.2 ServletContextListener3. Ajax 技术3.1 Ajax 概述3.2 Ajax 快速入门服务端实现：客户端实现：4. Axi…...

编程日记 2025/6/10 11:41:31

spring boot使用HttpServletResponse实现sse后端流式输出消息

1.以前只是看过SSE的相关文章&#xff0c;没有具体实践&#xff0c;这次接入AI大模型使用到了流式输出&#xff0c;涉及到给前端流式返回&#xff0c;所以记录一下。 2.resp要设置为text/event-stream resp.setContentType("text/event-stream"); resp.setCharacter…...

编程日记 2025/6/10 11:40:23

二叉树-144.二叉树的前序遍历-力扣(LeetCode)

一、题目解析 对于递归方法的前序遍历十分简单&#xff0c;但对于一位合格的程序猿而言&#xff0c;需要掌握将递归转化为非递归的能力&#xff0c;毕竟递归调用的时候会调用大量的栈帧&#xff0c;存在栈溢出风险。 二、算法原理 递归调用本质是系统建立栈帧&#xff0c;而非…...

编程日记 2025/6/10 11:39:21

无需布线的革命：电力载波技术赋能楼宇自控系统-亚川科技

无需布线的革命&#xff1a;电力载波技术赋能楼宇自控系统 在楼宇自动化领域&#xff0c;传统控制系统依赖复杂的专用通信线路&#xff0c;不仅施工成本高昂&#xff0c;后期维护和扩展也极为不便。电力载波技术&#xff08;PLC&#xff09;的突破性应用&#xff0c;彻底改变了…...

编程日记 2025/6/10 11:38:18

Netty自定义协议解析

目录 自定义协议设计 实现消息解码器 实现消息编码器 自定义消息对象 配置ChannelPipeline Netty提供了强大的编解码器抽象基类，这些基类能够帮助开发者快速实现自定义协议的解析。 自定义协议设计 在实现自定义协议解析之前，需要明确协议的具体格式。例如，一个简单的…...

编程日记 2025/6/10 11:37:17

__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined.

这个警告表明您在使用Vue的esm-bundler构建版本时&#xff0c;未明确定义编译时特性标志。以下是详细解释和解决方案&#xff1a; ‌问题原因‌&#xff1a; 该标志是Vue 3.4引入的编译时特性标志&#xff0c;用于控制生产环境下SSR水合不匹配错误的详细报告1使用esm-bundler…...

编程日记 2025/6/10 11:36:14

【技巧】dify前端源代码修改第一弹-增加tab页

回到目录 【技巧】dify前端源代码修改第一弹-增加tab页 尝试修改dify的前端源代码&#xff0c;在知识库增加一个tab页"HELLO WORLD"&#xff0c;完成后的效果如下 [gif01] 1. 前端代码进入调试模式 参考 【部署】win10的wsl环境下启动dify的web前端服务 启动调试…...

编程日记 2025/6/10 11:35:13

Java设计模式：责任链模式

一、什么是责任链模式&#xff1f; 责任链模式&#xff08;Chain of Responsibility Pattern&#xff09; 是一种 行为型设计模式&#xff0c;它通过将请求沿着一条处理链传递&#xff0c;直到某个对象处理它为止。这种模式的核心思想是 解耦请求的发送者和接收者&#xff0c;…...

编程日记 2025/6/10 11:34:10

比特币：固若金汤的数字堡垒与它的四道防线

第一道防线&#xff1a;机密信函——无法破解的哈希加密 将每一笔比特币交易比作一封在堡垒内部传递的机密信函。 解释“哈希”&#xff08;Hashing&#xff09;就是一种军事级的加密术&#xff08;SHA-256&#xff09;&#xff0c;能将信函内容&#xff08;交易细节&#xf…...

编程日记 2025/6/10 11:33:07