html常用标签
文章说明
本文旨在总结 HTML 中常见的标签,并提供简洁的解释,方便大家快速查找和复习。我们假设读者已经具备一定的 HTML 基础知识。本文将持续更新和完善,欢迎大家参与续写和补充
一、 HTML 标签
整个网页从 <html>
开始到 </html>
结束。
二、 head 标签
head 标签也叫头标签,是从 <head>
开始到 </head>
结束。
特点:这些信息不会直接显示在网页内容中,但对浏览器、搜索引擎和其他网络服务非常重要。
<head>
常见内部标签
标签 | 功能 |
---|---|
<title> | 定义文档标题 |
<meta> | 定义网页基本信息(如网站作者,字符编码,视口设置等) |
<link> | 链接外部资源 (如 CSS 样式表) |
<script> | 引入 JavaScript 代码 |
<style> | 定义 CSS 样式 |
<base> | 为页面上的所有相对 URL 指定基础 URL |
三、 body 标签
body 标签定义了 HTML 文档的主体内容。简单来说,<body>
标签里面的东西就是我们在浏览器中实际看到的东西。body 标签内容较多,接下来我们会从以下几个方面进行详细解说:
- 段落文本标签
- 图像及链接标签
- 列表标签
- 表格标签
- 表单标签
3.1 段落文本标签
标签 | 说明 |
---|---|
<h1> -<h6> | 标题标签 (h1 最大,h6 最小) |
<p> | 段落标签 |
<br> | 换行标签 |
<div> | 分块标签 (块级元素) |
<span> | 无特殊含义,常搭配 CSS 或 JavaScript 使用 (行内元素) |
<pre> | 预格式化文本,保留空格和换行 |
<strong> | 定义重要的文本 |
<em> | 定义强调的文本 |
<small> | 定义小号字体 |
3.2 图像及链接标签
标签 | 说明 |
---|---|
<img> | 图像标签,用于在网页中插入图片 |
<a> | 链接标签,用于创建超链接 |
图像标签:
<img src='image.jdp' alt='描述图片的文字'>
● src 属性:指定图像的 URL 地址。这是必须的属性。
● alt 属性:定义图像的替代文本。当图像无法显示时,会显示该文本
常见属性及作用:
常见属性及作用:
● src: 图像的 URL 地址 (必须)
● alt: 图像的替代文本 (必须)
● width: 设置图像的宽度
● height: 设置图像的高度
● title: 鼠标悬停在图像上时显示的提示
链接标签:
<a herf='链接的url地址' target='_blank'>说明文本<\a>
● href 属性:指定链接的目标 URL 地址。这是必须的属性。
● target 属性:指定在何处打开链接
常见属性及作用:
● href: 链接的目标 URL 地址 (必须)。
● target: 指定在何处打开链接。
○ _blank: 在新的浏览器窗口或标签页中打开链接。
○ _self: 在当前窗口或标签页中打开链接 (默认值)。
○ _parent: 在父框架中打开链接。
○ _top: 在整个窗口中打开链接。
● title: 鼠标悬停在链接上时显示的提示文本。
● download: 强制浏览器下载链接的资源,而不是打开它
3.3 列表标签
标签 | 说明 |
---|---|
<ul> | 无序列表 |
<ol> | 有序列表 |
<li> | 列表项 ,用于 <ul> 和 <ol> 中 |
<dl> | 定义列表 |
<dt> | 定义术语 |
<dd> | 定义描述 |
3.4 表单标签
标签 | 说明 |
---|---|
<form> | 定义 HTML 表单,用于收集用户输入 |
<input> | 输入标签,用于创建各种输入字段(文本框、密码框、单选框、复选框、按钮等) |
<textarea> | 多行文本输入框 |
<select> | 下拉列表 |
<option> | 下拉列表选项,用于 <select> 中 |
<button> | 按钮 |
<label> | 为表单元素定义标注,提高可访问性,通常与 for 属性关联指定对应的 input 的 id。 |
<fieldset> | 将表单内的相关元素分组 |
<legend> | 为 <fieldset> 元素定义标题 |
<input>
** 的常用 type
属性值:**
text
: 文本框password
: 密码框radio
: 单选框checkbox
: 复选框submit
: 提交按钮reset
: 重置按钮button
: 普通按钮file
: 文件上传email
: 邮箱number
: 数字date
: 日期
3.5 表格标签
标签 | 说明 |
---|---|
<table> | 定义 HTML 表格 |
<tr> | 表格行 (Table Row) |
<th> | 表头单元格 (Table Header) |
<td> | 表格单元格 (Table Data) |
<caption> | 表格标题 |
<colgroup> | 定义表格列的组,用于格式化一个或多个列 |
<col> | 用于 <colgroup> 中,定义表格中每一列的属性 |
<thead> | 定义表格的表头 |
<tbody> | 定义表格的主体 |
<tfoot> | 定义表格的页脚 |
表格常用属性:
border
: 表格边框cellpadding
: 单元格内边距cellspacing
: 单元格间距colspan
: 单元格横跨列数rowspan
: 单元格纵跨行数
四.综合练习
使用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>
<h1>用户注册</h1>
<table><tr><td>用户名</td><td><input type="text" placeholder="请输⼊⽤⼾名"></td></tr><tr><td>⼿机号</td><td><input type="text" placeholder="请输⼊⼿机号"></td></tr><tr><td>密码</td><td><input type="text" placeholder="请输⼊密码"></td></tr>
</table>
<div><input type="button" value="注册"><span>已有账号? </span><a href="#">登录</a><br/>
</body></html>
运行效果:
相关文章:
html常用标签
文章说明 本文旨在总结 HTML 中常见的标签,并提供简洁的解释,方便大家快速查找和复习。我们假设读者已经具备一定的 HTML 基础知识。本文将持续更新和完善,欢迎大家参与续写和补充 一、 HTML 标签 整个网页从 <html> 开始到 </html…...
ROS分布式部署通信
目录 一、概念 二、设置 ROS 分布式网络 1. 环境要求 2. 主机(Master)设置 3. 从机(节点设备)设置 4. 测试是否正常通信 三、进阶启动多从机节点(launch)。 一、概念 ROS 分布式通信用于在多台计算机…...
.Net 6 上传文件接口 文件大小报错整体配置
/// <summary>/// 上传文件/// </summary>/// <param name"file"></param>/// <returns></returns>[HttpPost("UploadifyFile")][RequestSizeLimit(2000 * 1024 * 1024)] // 设置最大请求体大小为 100MBpublic async …...
12.【线性代数】——图和网络
十二 图和网络(线性代数的应用) 图 g r a p h { n o d e s , e d g e s } graph\{nodes, edges\} graph{nodes,edges}1.关联矩阵2. A A A矩阵的零空间,求解 A x 0 Ax0 Ax0 电势3. A T A^T AT矩阵的零空间,电流总结电流图结论 …...
游戏引擎学习第145天
仓库:https://gitee.com/mrxiao_com/2d_game_3 今天的计划 目前,我们正在完成遗留的工作。当时我们已经将声音混合器(sound mixer)集成到了 SIMD 中,但由于一个小插曲,没有及时完成循环内部的部分。这个小插曲主要是…...
Linux(Centos 7.6)命令详解:zip
1.命令作用 打包和压缩(存档)文件(package and compress (archive) files);该程序用于打包一组文件进行分发;存档文件;通过临时压缩未使用的文件或目录来节省磁盘空间;且压缩文件可以在Linux、Windows 和 macOS中轻松提取。 2.命…...
23年以后版本pycharm找不到conda可执行文件解决办法
这个问题很痛苦,折磨了我半天。 就是链接远程服务器的时候 就一直以为这三个都要配置 就这个conda环境这里怎么都找不到服务器的虚拟环境的python可执行文件,非常痛苦。 后面查找了资料,找了好久,才发现,原来只需要配…...
AGI(Artificial General Intelligence,通用人工智能)技术介绍
文章目录 **AGI的关键特点**1. **泛化能力**:2. **自主性和适应性**:3. **自我意识与推理**: **与当前AI的区别****AGI的挑战**1. **技术难点**:2. **伦理与安全**:3. **资源与算力**: **AGI的实现路径**- …...
createrepo centos通过nginx搭建本地源
yum update 先安装一个nginx。 安装Nginx yum install gcc gcc-c pcre pcre-devel openssl openssl-devel libtool zlib zlib-devel -y cd /usr/local/src wget http://nginx.org/download/nginx-1.22.0.tar.gz tar -zxvf nginx-1.22.0.tar.gz cd nginx-1.22.0 ./configu…...
279.完全平方数
279.完全平方数 力扣题目链接(opens new window) 给定正整数 n,找到若干个完全平方数(比如 1, 4, 9, 16, ...)使得它们的和等于 n。你需要让组成和的完全平方数的个数最少。 给你一个整数 n ,返回和为 n 的完全平方数的 最少数…...
Dify部署踩坑指南(Windows+Mac)
组件说明 Dify踩坑及解决方案 ⚠️ 除了修改镜像版本,nginx端口不要直接修改docker-compose.yaml !!!!!!! 1、更换镜像版本 这个文件是由.env自动生成的,在.env配置 …...
备赛蓝桥杯之第十五届职业院校组省赛第六题:简易JSX解析器
提示:本篇文章仅仅是作者自己目前在备赛蓝桥杯中,自己学习与刷题的学习笔记,写的不好,欢迎大家批评与建议 由于个别题目代码量与题目量偏大,请大家自己去蓝桥杯官网【连接高校和企业 - 蓝桥云课】去寻找原题࿰…...
深入解析ECDSA与RSA公钥算法:原理、对比及AWS最佳实践
一、公钥加密算法概述 在HTTPS通信和数字证书领域,ECDSA(椭圆曲线数字签名算法)和RSA(Rivest-Shamir-Adleman)是最主流的两种非对称加密算法。它们共同构成了现代网络安全的基础,但设计理念和技术实现存在显著差异。 © ivwdcwso (ID: u012172506) 二、RSA算法详解…...
单例设计模式---懒汉式--线程安全和不安全、枚举类
单例设计模式—懒汉式–线程安全和不安全 优点 资源利用率高:只有在真正需要使用单例实例时才进行创建,避免了在应用启动时就占用不必要的资源。 缺点 线程安全问题:在多线程环境下,如果多个线程同时调用获取实例的方法ÿ…...
c++: 容器vector
文章目录 介绍initializer_list与string的不同底层总代码 介绍 C 中的 vector 是一种序列容器,它允许你在运行时动态地插入和删除元素。 vector 是基于数组的数据结构,但它可以自动管理内存,这意味着你不需要手动分配和释放内存。 与 C 数组相…...
肖恩的n次根
1.肖恩的n次根 - 蓝桥云课 问题描述 喜欢研究数学问题的肖恩注意到,在编程语言中通常内置函数只有开平方根和开立方根,但是肖思想知道开高次方根(大于3次方称为高次方),应该怎么做。请你设计一个程序来帮帮肖恩。 输…...
Java直通车系列15【Spring MVC】(ModelAndView 使用)
目录 1. ModelAndView 概述 2. ModelAndView 的主要属性和方法 主要属性 主要方法 3. 场景示例 示例 1:简单的 ModelAndView 使用 示例 2:使用 ModelAndView 处理列表数据 示例 3:使用 ModelAndView 处理异常情况 1. ModelAndView 概…...
LeetCode和为k的字数组(560题)
题目展示 给你一个整数数组 nums 和一个整数 k ,请你统计并返回 该数组中和为 k 的子数组的个数 。 子数组是数组中元素的连续非空序列。 示例 1: 输入:nums [1,1,1], k 2 输出:2示例 2: 输入:nums …...
消息队列为什么会有消费组的概念,什么作用,以订单系统为例说明
消息队列中的消费组(Consumer Group)概念是为了实现消息的并行处理和负载均衡。在分布式系统中,消费组允许多个消费者实例共同消费同一个主题(Topic)中的消息,从而提高消息处理的速度和系统的吞吐量。 消费…...
数据结构--AVL树
一、二叉搜索树(Binary Search Tree, BST) 基本性质 对于树中的每个节点,其左子树中的所有节点值均小于该节点值。其右子树中的所有节点值均大于该节点值。左右子树也分别是二叉搜索树。 极端场景 在极端情况下,如插入节点顺序…...
OpenManus 的提示词
OpenManus 的提示词 引言英文提示词的详细内容工具集的详细说明中文翻译的详细内容GitHub 仓库信息背景分析总结 引言 OpenManus 是一个全能 AI 助手,旨在通过多种工具高效地完成用户提出的各种任务,包括编程、信息检索、文件处理和网页浏览等。其系统提…...
达梦数据库在Linux,信创云 安装,备份,还原
(一)系统环境检查 1操作系统:确认使用的是国产麒麟操作系统,检查系统版本是否兼容达梦数据库 V8。可以通过以下命令查看系统版本: cat /etc/os-release 2硬件资源:确保服务器具备足够的硬件资源࿰…...
怎么使用Sam Helper修改手机屏幕分辨率,使得游戏视野变广?
1.准备Shizuku 和Sam Helper软件 2.打开设置,找到关于本机,连续点击版本号五次打开开发者选项 3.找到开发者选项,打开USB调试和无线调试 4.返回桌面,我们接着打开shizuku,点击配对,这里打开开发者选项,找…...
Unity DOTS 从入门到精通之 创建实体
文章目录 前言安装 DOTS 包创建实体1.手动创建空实体(适用于运行时动态创建)2.克隆 预制体(主线程同步操作)3.克隆 预制体(兼容Job System)4.通过 GameObject 转换(Baker方式) 其他E…...
【OA角色数据权限】自定数据权限(自定义部门)、本部门数据权限、本部门及以下数据权限、仅本人数据权限
文章目录 引言I 表设计部门表设计角色表设计II 数据过滤处理注解参数说明数据权限使用数据过滤处理切面 DataScopeAspectQuery 基类知识扩展引言 I 表设计 部门表设计 部门表采用部门路径反应祖先层级关系(包含自己部门的ID) 查询用户所在的本部门及其对应的下级部门:采用…...
记录小白使用 Cursor 开发第一个微信小程序(一):注册账号及下载工具(250308)
文章目录 记录小白使用 Cursor 开发第一个微信小程序(一):注册账号及下载工具(250308)一、微信小程序注册摘要1.1 注册流程要点 二、小程序发布流程三、下载工具 记录小白使用 Cursor 开发第一个微信小程序(…...
STM32旋转编码器驱动详解:方向判断、卡死处理与代码分析 | 零基础入门STM32第四十八步
主题内容教学目的/扩展视频旋转编码器电路原理,跳线设置,结构分析。驱动程序与调用。熟悉电路和驱动程序。 师从洋桃电子,杜洋老师 📑文章目录 一、旋转编码器原理与驱动结构1.1 旋转编码器工作原理1.2 驱动程序结构 二、方向判断…...
海思Hi3516DV00移植yolov5-7.0的模型转化流程说明
一、YOLOv5 YOLOv5作为单阶段检测框架的集大成者,凭借其卓越的实时性、高精度和易用性,已成为工业界实际部署的首选方案。yolov5的最新版本是7.0,该版本是官方最后更新的一个版本。yolov5-7.0 工程化实现卓越:基于PyTorch框架构…...
C++ string类(前)
目录 一、前言 二、正文 1.1什么是string类 1.2为什么学习string类 1.3string使用注意 1.4 string 类常用接口说明 1.4.1string类对象的常见构造 1.4.2string类对象的容量操作 1.4.3 string 类对象的访问以及遍历操作 1.4.4 string 类对象的修改操作 三、结言 一、前…...
MySQL---INSERT语句、UPDATE语句、DELETE语句
目录 INSERT语句-插入 1.格式 2.操作 UPDATE语句-修改 1.格式 2.操作 DELETE语句-删除 1.格式 2.操作 INSERT语句-插入 1.格式 格式: insert into 表名 values (value1,value2,.....) 1. value后的内容:与表字段匹配的数据,如果字段为主键&…...
vuejs 模板语法、条件渲染、v-for、事件处理、表单输入绑定
创建vue项目之后我们就可以开始写代码了,我们的代码一般都会写在src目录-components目录-HelloWord.vue文件内。 我们之前写的HTML文件的结构是HTML代码可以集成或者连接外部的css/js文件。 我们通过vue建立的项目,它的结构是在一个vue文件内集成了HTML…...
Mysql中的常用函数
1、datediff(date1,date2) date1减去date2,返回两个日期之间的天数。 SELECT DATEDIFF(2008-11-30,2008-11-29) AS DiffDate -- 返回1 SELECT DATEDIFF(2008-11-29,2008-11-30) AS DiffDate -- 返回-1 2、char_length(s) 返回字符串 s 的字符数 3、round(x,d)…...
使用JMeter(组件详细介绍+使用方式及步骤)
JSON操作符 在我们使用请求时,经常会遇到JSON格式的请求体,所以在介绍组件之前我会将介绍部分操作符,在进行操作时是很重要的 Operator Description $ 表示根元素 当前元素 * 通配符,所有节点 .. 选择所有符合条件的节点 .name 子元素,name是子元素名称 [start:e…...
【大模型聊天】实时交互技术选型
在Python开发中,实现RAG问答或大模型聊天功能无需强制使用WebSocket,技术选型需结合实时性需求与交互场景。以下是技术分析及示例: 技术方案对比 技术适用场景优缺点WebSocket双向高频交互(如实时对话)优点࿱…...
计算机网络:计算机网络的概念
1.计算机网络:由若干个结点和链接这些的链路组成。 2.集线器(Hub):可以把多个结点连接起来,组成一个计算机网络。 不能避免数据冲突的情况 3.交换机(Switch):可以把多个结点连接起来&#x…...
Trae:引领未来的 AI 编程新时代
目录 Trae:引领未来的 AI 编程新时代 更快、更好、更准确的 AI IDE 无缝协作,AI 赋能开发者 Builder 模式:从 0 到 1 的智能助力 深度上下文理解,精准满足开发需求 实时代码补全,极致提升开发效率 智能 AI 协作…...
Vue _总结
文章目录 一 Vue介绍1 什么是Vue.js2 MVVM二 第一个例子1 引入vue2 html中用法3 创建vue实例对象三 Vue基本语法1 v-text2 v-bind3 v-on4 v-model5 v-if6 v-for7 计算属性8 组件化全局注册本地注册9 生命周期10 员工程序使用vue.js重构list.htmladd.htmlupdate.html四 使用vue-…...
Refreshtoken 前端 安全 前端安全方面
网络安全 前端不需要过硬的网络安全方面的知识,但是能够了解大多数的网络安全,并且可以进行简单的防御前两三个是需要的 介绍一下常见的安全问题,解决方式,和小的Demo,希望大家喜欢 网络安全汇总 XSSCSRF点击劫持SQL注入OS注入请求劫持DDOS 在我看来,前端可以了解并且防御前…...
基于深度学习的医学图像分割算法研究——结合MRI/CT图像的肿瘤区域自动分割与三维重建
针对课题《基于深度学习的医学图像分割算法研究——结合MRI/CT图像的肿瘤区域自动分割与三维重建》,以下是详细的研究框架与技术实现方案: 1. 核心研究要点 主要目标:构建端到端的深度学习模型,实现MRI/CT肿瘤区域的精准分割,并通过三维可视化支持临床诊断。核心挑战: 医…...
企业如何选择研发项目进度管理软件?盘点15款实用工具
这篇文章介绍了以下工具: 1. PingCode; 2. Worktile; 3. 腾讯 TAPD; 4. 华为 DevCloud; 5. 亿方云; 6. 阿里云效; 7. CODING 码云; 8. 明道云; 9. 进度猫; 10. 轻流等。 …...
【2024_CUMCM】图论模型
基本概念 注:以下叙述大多是自话,夹杂多数不专业表述 点集、边集 图论中图是由点和边组成的 G(V,E) V--点集 E--边集 权 G(V,E,W) W--权 一般都有权,构成赋权图 赋权图 在图中每条边都赋予一个非负实数权重的图,就是给每一条…...
Unity UGUI下优化需要射线检测类的UI元素的一种方式
直接上脚本 - 原理探究 先看MaskableGraphic 可以看到继承了Graphic,继续深入 在构造函数中找到了useLegacyMeshGeneration 而useLegacyMeshGeneration用来判断是否使用旧的网格生成系统,这里我们使用新的 在这个方法中,Graphic默认通过…...
unity3d 背景是桌面3d数字人,前面是web的表单
是可以实现的,但涉及多个技术栈的结合,包括 Unity3D、Web 技术(HTML、JavaScript)、以及可能的 WebGL 或 WebRTC 技术。大致有以下几种实现方案: 方案 1:Unity 作为独立应用(桌面端࿰…...
一周热点-Claude 3.7 Sonnet-在响应和思考模型之间切换
Anthropic 最近发布了 Claude 3.7 Sonnet,这是一款具有混合推理能力的模型,允许用户在即时响应和扩展思考模式之间切换,以适应不同类型的任务需求。以下是关于 Claude 3.7 Sonnet 的详细介绍: 1 混合推理模式 标准模式:快速生成响应,适合日常对话和简单任务,能在短时间内…...
【大模型安全】安全解决方案
【大模型安全】安全解决方案 1.技术层面2.数据层面数据收集阶段训练阶段模型推理阶段 1.技术层面 在使用大语言模型时,通常有几种选择:一种是采用封装好的大语言模型SaaS云服务;另一种是在公有云上部署自有的大语言模型,并通过权…...
Clion快捷键、修改字体
文章目录 一、Clion快捷键1.撤销:crtl Z2.重做:crtl shift Z3.删除该行:crtl Y4.多行后退:选中多行 Tab5.多行缩进:选中多行 shift Tab 二、修改注释的斜体 一、Clion快捷键 1.撤销:crtl Z 2.重做…...
软件工程笔记下
从程序到软件☆ 章节 知识点 概论☆ 软件的定义,特点,生存周期。软件工程的概论。软件危机。 1.☆软件:软件程序数据文档 (1)软件:是指在计算机系统的支持下,能够完成特定功能与性能的包括…...
探索DeepSeek:牛仔技术的未来在哪里?
引言 在当今快速发展的科技世界中,DeepSeek作为一种前沿技术,正逐渐改变我们对信息搜索和数据处理的认知。本文将深入探讨DeepSeek技术的核心优势、应用场景以及未来发展趋势,带您全面了解这一技术的魅力所在。 一、DeepSeek技术简介 1.1 什…...
Wireshark抓包标准化流程
1. 软件安装与验证 安装路径规范 按企业要求部署至指定目录: xxxx/xxxx/xxxx/xxxx验证安装完整性: 检查是否勾选 Install TShark(默认已选)确认安装后生成 Wireshark.exe 和 tshark.exe 可执行文件 权限配置 右键点击安装目录下…...
3月8日星期六今日早报简报微语报早读
3月8日星期六,农历二月初九,早报#微语早读。 1、国家卫健委主任:正会同有关部门起草育儿补贴的操作方案; 2、中国代表团出征第12届世界冬季特奥会,共48名运动员; 3、研究显示:2035年中国女性…...