当前位置: 首页 > news >正文

HTML 常用标签速查表

HTML 常用标签速查表


🧱 结构类标签

标签含义用途说明
<html>HTML文档根元素所有HTML内容的根节点
<head>头部信息放置元信息,如标题、引入CSS/JS等
<body>页面内容主体所有可视内容的容器

📝 文本与标题标签

标签含义用途说明
<h1> ~ <h6>标题<h1>最大,依次变小
<p>段落用于段落文本
<br>换行强制换行(单标签)
<hr>水平线用于分隔内容(单标签)
<strong>强调加粗语义强调,视觉加粗
<em>斜体强调表示语义上强调
<b>加粗仅视觉加粗,无语义
<i>斜体仅视觉斜体,无语义
<span>行内容器无语义,便于样式控制
<div>区块容器无语义,用于布局划分

富文本标签

📋 列表标签

标签含义用途说明
<ul>无序列表项目前有圆点
<ol>有序列表项目前有编号
<li>列表项用于ulol

🧩 表格标签

标签含义用途说明
<table>表格容器创建表格
<tr>表格行一行内容
<td>表格单元格表格中的数据格
<th>表头单元格表格中的标题格
<thead>表头区域分离表格头部
<tbody>表格主体表格主体部分
<tfoot>表格底部表格汇总行等

🔗 外部资源标签(超链接和媒体)

标签含义用途说明
<a href="">超链接可跳转页面或地址
<img src="">图片显示图片,单标签
<video>视频嵌入视频播放
<audio>音频嵌入音频播放
<source>媒体资源配合<video><audio>使用

🧾 表单相关标签

标签含义用途说明
<form>表单容器收集用户输入
<input>输入框类型由type决定
<textarea>多行输入文本框
<select>下拉框配合<option>使用
<option>下拉项用于<select>
<label>标签表单项描述
<button>按钮提交、重置或自定义行为

📦 语义化标签(HTML5)

标签含义用途说明
<header>页头放logo、导航等
<nav>导航区域链接菜单等
<main>主内容区域页面核心内容
<section>区块相对独立的内容区域
<article>文章独立内容,如文章、帖子
<aside>侧边栏相关信息、推荐等
<footer>页脚版权、声明等
http://www.xdnf.cn/news/1186759.html

相关文章:

  • 深入解析 ArkUI 触摸事件机制:从点击到滑动的开发全流程
  • 14-C语言:第14天笔记
  • MyBatis-Plus中使用BaseMapper实现基本CRUD
  • spring boot整合mybatis
  • Haprxy七层代理
  • MyBatisPlus(一)简介与基本CRUD
  • 开疆智能ModbusTCP转Profient网关连接西门子PLC与川崎机器人配置案例
  • leetcode933最近的请求次数
  • 继承接口实现websocke,实现任意路径链接
  • Java 流(Stream)分类、用途与性能分析
  • 黑马点评01 - 项目介绍 短信登录
  • 【C#补全计划:类和对象(七)—— 重写虚方法】
  • 屏幕适配--像素篇
  • C/C++---I/O性能优化
  • Linux的磁盘存储管理实操——(下二)——逻辑卷管理LVM的扩容、缩容
  • 小白如何认识并处理Java异常?
  • gig-gitignore工具实战开发(三):gig add基础实现
  • 双指针算法介绍及使用(下)
  • which soffice soffice not found
  • OpenRLHF:面向超大语言模型的高性能RLHF训练框架
  • 机器学习之knn算法保姆级教学
  • SEC_FirePower 第二天作业
  • Keepalived 原理及配置(高可用)
  • ubuntu22.04.4锁定内核应对海光服务器升级内核无法启动问题
  • 【Docker项目实战】在Docker环境下部署go-file文件分享工具
  • 5G基站信号加速器!AD8021ARZ-REEL7亚德诺 超低噪声高速电压放大器 专利失真消除技术!
  • 从零开发Java坦克大战:架构设计与难点突破 (下)
  • C++ 多线程同步机制详解:互斥锁、条件变量与原子操作
  • 电子电气架构 --- 车载软件与样件产品交付的方法
  • TDengine 转化函数 TO_TIMESTAMP 用户手册