HTML 日常开发常用标签

server/2025/3/4 11:43:03/

文章目录

  • HTML 日常开发常用标签
    • 1、基本结构标签
    • 2、内容标签
    • 3、多媒体标签
    • 4、表单标签
    • 5、列表和定义标签
    • 6、表格标签
    • 7、链接和图像
    • 8、元数据
    • 9、语义化标签(HTML5新增)
    • 10、框架和内联
    • 11、交互
    • 12、过时或不推荐使用的标签

HTML 日常开发常用标签

1、基本结构标签

html"><html>: 定义整个HTML文档。
<head>: 包含元数据,如标题、CSS链接和JavaScript链接。
<title>: 定义页面标题,显示在浏览器标签中。
<body>: 包含页面的内容,所有可视元素都在此内。

2、内容标签

html"><h1><h6>: 定义标题,层级从高到低。
<p>: 定义段落。
<div>: 无意义的分块,用于样式和布局。
<span>: 无意义的内联容器,用于文本内容。

3、多媒体标签

html"><img>: 嵌入图片。
<video>: 嵌入视频。
<audio>: 嵌入音频。
<source>: 定义媒体资源,如视频或音频文件。
<track>: 为媒体添加文本轨道,如字幕。

4、表单标签

html"><form>: 定义表单,用于收集用户输入。
<input>: 定义输入字段,类型包括:text、password、email、file、checkbox、radio等。
<textarea>: 定义多行文本输入框。
<select>:定义下拉选择框,包含 <option> 元素。
<button>: 定义按钮。
<label>: 定义表单字段的标签。
<fieldset><legend>: 组织表单元素,并为字段集合提供标题。

5、列表和定义标签

html"><ul>: 无序列表。
<ol>: 有序列表。
<li>: 列表项,用于<ul><ol>内。
<dl>: 定义列表。
<dt>: 定义列表中的术语。
<dd>: 定义术语的描述。

6、表格标签

html"><table>: 定义表格。
<tr>: 定义表格行。
<th>: 定义表头单元格。
<td>: 定义表格单元格。
<thead>: 定义表格头部。
<tbody>: 定义表格主体。
<tfoot>: 定义表格脚注。

7、链接和图像

html"><a>: 定义超链接。
<link>: 定义外部资源链接,如CSS文件。
<img>: 已在多媒体标签中提及。

8、元数据

html"><meta>: 提供页面的元数据,如字符集、 viewport设置和SEO信息。
<style>: 定义CSS样式。
<script>: 定义或引用JavaScript。

9、语义化标签(HTML5新增)

html"><header>: 页面或部分区域的头部。
<footer>: 页面或部分区域的底部。
<nav>: 导航链接区。
<section>: 独立的内容区。
<article>: 独立的文章内容。
<aside>: 侧边栏内容。
<details>: 提供额外细节。
<summary>: 定义 <details> 的标题。

10、框架和内联

html"><iframe>: 内嵌另一个HTML文档。
<u><ins><del>: 定义特殊的文本格式。

11、交互

html"><dialog>: 定义对话框(HTML5新增)。
<progress>: 显示进度条。
<meter>: 显示度量值。

12、过时或不推荐使用的标签

html"><center>: 文本居中(已废弃,推荐使用CSS)。
<font>:定义字体(已废弃)。
<strike><s>:划线文本(已废弃,推荐使用CSS)。
<applet>:Java小程序(已废弃)。
<embed><object>:嵌入外部内容(部分情况下使用)。
<b><i>:虽然仍可使用,但建议使用更语义化的标签如<strong><em>

http://www.ppmy.cn/server/172318.html

相关文章

通过Python编程语言实现机器学习小项目教程案例

通过Python编程语言实现机器学习小项目教程案例 文章目录 通过Python编程语言实现机器学习小项目教程案例1. 项目背景与目标2. 开发环境准备2.1 所需工具2.2 环境搭建2.3 库版本验证3. 数据集介绍与加载3.1 数据集特性3.2 数据加载4. 数据探索与可视化4.1 数据概览4.2 可视化分…

【单片机通信技术】串口通信的几种方式与比较,详细解释SPI通信

一、介绍 串口通信是一种通过串行接口逐位传输数据的通信方式&#xff0c;广泛应用于嵌入式系统、工业控制、传感器网络等领域。 二、以下是几种常见的串口通信方式及其对比&#xff1a; 1.UART&#xff08;Universal Asynchronous Receiver/Transmitter&#xff09; 特点&am…

Solar2月应急响应公益月赛

暗链排查-1 burp 抓包&#xff0c;找到 js&#xff0c;cyberchef 一把梭&#xff0c;纯黑盒 暗链排查-2 roottianshou-0e3d41087e0b47e587d7b244849b893b-7769f979cf-szxvl:~# gcore -o nginx_core 11 [Thread debugging using libthread_db enabled] Using host libthread_db…

机器学习入门指南(2021版)

机器学习入门指南&#xff08;2021版&#xff09; 大家好&#xff0c;我是老胡。 这是为朋友社群准备的一篇机器学习入门指南&#xff0c;分享了我机器学习之路看过的一些书、教程、视频&#xff0c;还有学习经验和建议&#xff0c;希望能对大家的学习有所帮助。 pdf版思维导图…

UE5切换关卡函数OpenLevel,输入模式结构体,UI界面

1.输入模式结构体 FInputModeGameOnly&#xff1a;玩家只能与游戏世界交互&#xff0c;UI 不可交互。FInputModeGameAndUI&#xff1a;玩家可以与游戏世界和 UI 同时交互。FInputModeUIOnly&#xff1a;玩家只能与 UI 交互&#xff0c;无法与游戏世界进行互动。 FInputModeGam…

C++实现3D(EasyX)详细教程

一、关于3D 我们看见&#xff0c;这两个三角形是相似的&#xff0c;因此计算很简单 若相对物体的方向是斜的&#xff0c;计算三角函数即可 不会的看代码 二、EasyX简介 initgraph(长,宽) 打开绘图 或initgraph(长,宽…

IDEA 接入 Deepseek

在本篇文章中&#xff0c;我们将详细介绍如何在 JetBrains IDEA 中使用 Continue 插件接入 DeepSeek&#xff0c;让你的 AI 编程助手更智能&#xff0c;提高开发效率。 一、前置准备 在开始之前&#xff0c;请确保你已经具备以下条件&#xff1a; 安装了 JetBrains IDEA&…

ctfshow——vim临时文件泄露

提示&#xff1a;发现网页有个错别字&#xff1f;赶紧在生产环境vim改下&#xff0c;不好&#xff0c;死机了。 题目如下图所示。 一、 首先&#xff0c;我们先对提示进行分析本题&#xff0c;他说网页存在错别字&#xff0c;并且在vim环境下进行了修改&#xff0c;但是没修改…