Tech Docs Station

Appearance

元素与标签 ​

HTML 元素是 HTML 文档的基本构建块。每个元素由标签、属性和内容组成。

HTML 标签 ​

HTML 标签是由尖括号包围的关键词：

html
<p>这是一个段落</p>

标签的分类 ​

1. 双标签 ​

大多数 HTML 元素是双标签，包含开始标签和结束标签：

html
<div>内容</div>
<p>段落</p>
<h1>标题</h1>

2. 自闭合标签 ​

部分元素没有内容，称为空元素或自闭合标签：

html
<br>        <!-- 换行 -->
<hr>        <!-- 水平线 -->
<img src="image.jpg">   <!-- 图片 -->
<input type="text">     <!-- 输入框 -->

HTML 属性 ​

属性为 HTML 元素提供附加信息，总是在开始标签中定义：

html
<a href="https://example.com">链接</a>
<img src="photo.jpg" alt="照片">

属性格式 ​

  • 属性以 名称="值" 的形式出现
  • 属性值应该用引号包围（单引号或双引号）
  • 多个属性用空格分隔

常用属性 ​

属性说明示例
id元素的唯一标识<div id="header">
class元素的类名<p class="highlight">
style内联样式<span style="color: red;">
title鼠标悬停提示<a title="点击查看">
lang语言代码<html lang="zh-CN">

块级元素与行内元素 ​

块级元素 ​

块级元素独占一行，可以包含其他块级或行内元素：

html
<div>块级容器</div>
<p>段落</p>
<h1>标题</h1>
<ul>列表</ul>
<table>表格</table>

行内元素 ​

行内元素不会换行，只能包含文本或其他行内元素：

html
<span>行内容器</span>
<a href="#">链接</a>
<strong>加粗</strong>
<em>斜体</em>
<img src="image.jpg">

HTML 注释 ​

注释用于在代码中添加说明，不会在浏览器中显示：

html
<!-- 这是一个注释 -->
<!--
    这是多行注释
    可以跨越多行
-->

实践示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>元素与标签示例</title>
</head>
<body>
    <!-- 页面头部 -->
    <header id="page-header">
        <h1 class="main-title">欢迎学习 HTML</h1>
    </header>
    
    <!-- 主要内容 -->
    <main>
        <p>这是一个<span style="color: blue;">段落</span>示例。</p>
        <a href="https://example.com" title="点击访问">访问示例网站</a>
    </main>
    
    <!-- 页面底部 -->
    <footer>
        <p>版权所有 &copy; 2024</p>
    </footer>
</body>
</html>