HTML 标签大全：一站式学习前端基石
前言
在我们的前端旅程中，已经探索了CSS的奥秘、JavaScript的魔法，今天，我们将深入HTML的核心——那些构建万维网基石的标签。本文将作为您的HTML导览，从根到叶，一览无遗。
一、简介
HTML（超文本标记语言）是构建网页和网上应用程序的基础。它不仅仅是编程语言，更是前端开发的灵魂。标签是其构成元素，通过不同的标签，我们能够定义网页的结构、呈现内容、实现互动。
二、常见标签解析
主要结构标签
<html>: 网页的根本，所有其他元素都包含在内。<head>: 头部区域，包含元数据、外部链接资源。<body>: 身体部分，所有可见的页面内容都放在这里。
内容与布局标签
<header>,<main>,<footer>: 定义页面的结构，区分头部、主要内容和页脚。<section>,<article>,<aside>: 组织文档，便于阅读和理解。<div>,<span>: 用于布局和样式的基本单位。
文本格式化标签
<h1>至<h6>: 标题标签，重要性逐级递减。<p>: 段落标签，文章的基本组成部分。<a>: 超链接标签，连接网络的纽带。
媒体和表单标签
<img>,<video>,<audio>: 嵌入图片、视频和音频。<form>,<input>,<textarea>: 创建表单，收集用户输入。
单标签小巧玲珑
<br>: 换行神器，简单有效。<hr>: 分隔线，清晰明了。<meta>,<link>,<img>: 元数据、关联资源和图像，网页的“隐形”助手。
三、标签的用例与属性汇总表
| 标签 | 案例 | 属性 | 作用 |
|---|---|---|---|
<html> | <html lang="en">...</html> | lang | 定义 HTML 文档的根元素 |
<head> | <head>...</head> | 无 | 定义文档的头部，包含了文档的元数据和链接到外部资源的引用 |
<title> | <title>Page Title</title> | 无 | 定义文档的标题 |
<meta> | <meta charset="UTF-8"> | charset, name, content, http-equiv | 定义元数据，如字符集、描述等 |
<link> | <link rel="stylesheet" href="styles.css"> | rel, href, type, media | 定义文档与外部资源的关系，通常用于引入样式表 |
<style> | <style>...</style> | type, media | 定义文档的样式信息 |
<body> | <body>...</body> | bgcolor, text, link, vlink, alink, background | 定义文档的主体，包含所有可见的内容 |
<header> | <header>...</header> | 无 | 定义一个文档或节的头部，通常包含导航链接、logo等 |
<main> | <main>...</main> | 无 | 定义文档的主要内容，通常不包含导航、页眉、页脚等 |
<section> | <section>...</section> | 无 | 定义文档中的一个区块，通常包含一组相关内容 |
<article> | <article>...</article> | 无 | 定义一个独立的文章或内容块，通常包含在页面中间或边栏中 |
<aside> | <aside>...</aside> | 无 | 定义页面的侧边栏内容 |
<nav> | <nav>...</nav> | 无 | 定义导航链接的容器 |
<footer> | <footer>...</footer> | 无 | 定义文档或节的页脚，通常包含版权信息、联系方式等 |
<h1> - <h6> | <h1>Heading 1</h1> | align | 定义标题，从大到小分别表示主标题到六级标题 |
<p> | <p>This is a paragraph.</p> | align | 定义一个段落 |
<br> | <p>Line 1<br>Line 2</p> | 无 | 定义换行 |
<hr> | <hr> | align, color, noshade, size, width | 定义水平线 |
<div> | <div>...</div> | align, title | 定义文档中的一个区域，通常用于布局 |
<span> | <span>...</span> | align, title | 定义文档中的一个行内区域，通常用于样式设置或脚本操作 |
<a> | <a href="https://example.com">Link</a> | href, target, rel, download, type | 定义超链接 |
<img> | <img src="image.jpg" alt="Image"> | src, alt, width, height, border, usemap | 定义图像 |
<video> | <video src="movie.mp4" controls></video> | src, controls, autoplay, loop, muted | 定义视频 |
<audio> | <audio src="sound.mp3" controls></audio> | src, controls, autoplay, loop, muted | 定义音频 |
<iframe> | <iframe src="https://example.com"></iframe> | src, width, height, frameborder, allowfullscreen | 定义内联框架，用于嵌入其他网页或内容 |
<form> | <form action="/submit" method="post"></form> | action, method, enctype, target | 定义一个表单 |
<input> | <input type="text" name="username"> | type, name, value, placeholder, required, readonly, disabled, checked, autofocus | 定义输入字段 |
<button> | <button type="button">Click me</button> | type, name, value, disabled, formaction | 定义一个按钮 |
<select> | <select name="country"><option value="US">United States</option></select> | name, size, multiple, disabled | 定义一个下拉列表框 |
<textarea> | <textarea name="message"></textarea> | name, cols, rows, maxlength, placeholder | 定义一个多行文本输入框 |
<label> | <label for="username">Username:</label> | for, form | 定义标签用于表单元素的标注 |
<area> | <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm"> | 定义图像映射的区域 | |
<base> | <base href="https://www.example.com/"> | 定义页面中所有链接的默认地址 | |
<col> | <col span="2" style="background-color:red"> | 定义表格中的列或者一组列的属性 | |
<embed> | <embed src="video.mp4" width="320" height="240"> | 定义嵌入式内容 | |
<param> | <param name="autoplay" value="true"> | 定义对象的运行参数 | |
<source> | <source src="video.mp4" type="video/mp4"> | 定义多媒体资源的来源 | |
<track> | <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English"> | 定义用于音频或视频的文本轨道 | |
<wbr> | <p>This is a long paragraph with a <wbr>word break.</p> | 定义可能的换行位置 |
四、总结
HTML标签是构建网页的基石，理解和掌握它们是每位前端开发者的必修课。本文旨在提供一个快速而全面的标签参考，帮助您建立坚实的HTML基础。
文章参考
- MDN Web Docs
- W3Schools
项目地址
Github地址
拓展阅读
如果觉得我的文章对您有帮助，三连+关注便是对我创作的最大鼓励！或者一个star🌟也可以😂.
此博客模板以专业严谨与幽默并存的风格，旨在提供给读者一个既详细又轻松的HTML标签学习体验。希望能够帮助你更好地理解和使用HTML，为你的前端开发之路添砖加瓦！
