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

【系统开发】前端 HTML基础

news 2025/10/4 13:06:07

文章目录

- 1 HTML基础
- 2 HTML元素
- - 文档结构元素
  - 内容分区与标题元素
  - 文本内容元素
  - 内联文本语义元素
  - 图像与多媒体元素
  - 表格元素
  - 表单元素
- 3 HTML属性
- - 基本语法
  - **`id`** - 唯一标识符
  - **`class`** - 类选择器
  - **`style`** - 内联样式
  - **`title`** - 提示文本
  - **`data-*`** - 自定义数据属性
  - **链接相关 (`<a>` 标签)**
  - **图片相关 (`<img>` 标签)**
  - **表单相关属性**
  - - `<input>` 标签：
    - `<form>` 标签：
  - **列表相关**
  - 布尔属性

1 HTML基础

HTML 指的是超文本标记语言: HyperText Markup Language

它不是编程语言，而是标记语言，HTML 告诉计算机“是什么”（内容与结构），而编程语言告诉计算机“做什么”（逻辑与操作）。

2 HTML元素

文档结构元素

这些元素定义了整个 HTML 文档的基本骨架和主要区域。

<!DOCTYPE html>
- 说明：文档类型声明，告诉浏览器这是一个 HTML5 文档。它不是元素/标签，但必须放在第一行。
<html>
- 说明：根元素，包裹所有其他 HTML 内容。lang 属性（如 lang="zh-CN"）对可访问性和 SEO 很重要。
<head>
- 说明：容器，用于存放页面的元数据，不会直接显示在页面中。
<meta charset="UTF-8">
- 说明：定义文档使用 UTF-8 字符编码，对于正确显示中文等字符至关重要。
<title>
- 说明：定义浏览器标签页上显示的页面标题，对 SEO 极其重要。
<body>
- 说明：包含所有显示在网页上的可见内容，如文本、图片、链接等。

示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>我的第一个网页</title>
</head>
<body><!-- 所有可见内容放在这里 -->
</body>
</html>

内容分区与标题元素

这些元素用于组织内容结构和创建大纲。

<h1> 到 <h6>
- 说明：六级标题，<h1> 级别最高，<h6> 最低。一个页面通常只有一个 <h1>。
<header>
- 说明：表示介绍性内容，通常包含一组引导性的导航链接、Logo、搜索框等。
<nav>
- 说明：定义页面的导航链接部分。
<main>
- 说明：定义文档的主要内容，一个页面只应有一个 <main>。
<article>
- 说明：表示一个独立、可自成一体的内容块，如博客文章、新闻、论坛帖子。
<section>
- 说明：表示文档中的一个通用独立章节。
<aside>
- 说明：表示与主内容间接相关的部分，常用于侧边栏、引用、广告等。
<footer>
- 说明：表示页脚，通常包含版权信息、相关链接等。
<div>
- 说明：通用流容器，没有特定语义。主要用于布局和样式化。

示例：

<body><header><h1>网站主标题</h1><nav>...</nav></header><main><article><h2>文章标题</h2><p>文章内容...</p></article><aside>相关链接...</aside></main><footer>版权信息 © 2023</footer>
</body>

文本内容元素

这些元素用于定义段落、列表等文本内容。

<p>
- 说明：定义一个段落。
<ul>
- 说明：定义一个无序列表（项目符号）。
<ol>
- 说明：定义一个有序列表（数字编号）。
<li>
- 说明：定义列表中的一个项目，用在 <ul> 或 <ol> 内部。
<a>
- 说明：定义超链接。最重要的属性是 href，用于指定链接目标。
<span>
- 说明：通用的行内容器，没有特定语义。常用于对一部分文本进行样式化。

示例：

<p>这是一个段落，里面有一个<a href="https://www.example.com">链接</a>。</p><ul><li>咖啡</li><li>茶</li><li>牛奶</li>
</ul><ol><li>第一步</li><li>第二步</li><li>第三步</li>
</ol><p>这是一段文字，其中<span style="color: red;">这部分是红色的</span>。</p>

内联文本语义元素

这些元素用于赋予行内文本特定的含义、结构或样式。

<strong>
- 说明：表示重要文本，通常以加粗显示。
<em>
- 说明：表示强调文本，通常以斜体显示。
<br>
- 说明：换行符。是一个空元素，没有闭合标签。
<hr>
- 说明：主题分隔线，表示故事或章节的转换。通常显示为一条水平线。

示例：

<p><strong>警告！</strong> 这是一个非常重要的信息。</p>
<p>我<em>真的</em>很喜欢猫。</p>
<p>第一行<br>第二行</p><p>第一章的内容...</p>
<hr>
<p>第二章的内容...</p>

图像与多媒体元素

<img>
- 说明：用于嵌入图像。最重要的属性是 src（图片来源）和 alt（替代文本）。也是一个空元素。
<audio>
- 说明：用于嵌入音频内容。
<video>
- 说明：用于嵌入视频内容。

示例：

<img src="cat.jpg" alt="一只可爱的橘猫">
<audio controls><source src="song.mp3" type="audio/mpeg">您的浏览器不支持 audio 元素。
</audio>
<video controls width="250"><source src="movie.mp4" type="video/mp4">您的浏览器不支持 video 元素。
</video>

表格元素

用于创建数据表格。

<table>
- 说明：定义表格。
<tr>
- 说明：定义表格中的一行。
<th>
- 说明：定义表头单元格，通常居中加粗。
<td>
- 说明：定义标准数据单元格。

示例：

<table border="1"><tr><th>姓名</th><th>年龄</th></tr><tr><td>张三</td><td>25</td></tr><tr><td>李四</td><td>30</td></tr>
</table>

表单元素

用于创建交互式控件，收集用户输入。这是 HTML 实现交互的关键部分。

<form>
- 说明：定义用于收集用户输入的表单。action 属性指定数据发送到哪里。
<input>
- 说明：多功能输入字段，通过 type 属性定义具体类型（文本、密码、复选框、单选按钮、提交按钮等）。
<textarea>
- 说明：多行文本输入区域。
<label>
- 说明：为表单控件定义标签。使用 for 属性与控件的 id 关联，可提升可访问性。
<select>
- 说明：定义下拉列表。
<option>
- 说明：定义下拉列表中的选项。
<button>
- 说明：定义可点击的按钮。

示例：

<form action="/submit" method="post"><label for="username">用户名：</label><input type="text" id="username" name="username"><br><label for="password">密码：</label><input type="password" id="password" name="password"><br><label for="message">留言：</label><textarea id="message" name="message"></textarea><br><label for="city">城市：</label><select id="city" name="city"><option value="bj">北京</option><option value="sh">上海</option></select><br><button type="submit">提交</button>
</form>

3 HTML属性

HTML 属性是 HTML 元素的重要组成部分，它们提供了关于元素的额外信息或用于配置元素的行为。

属性总是出现在开始标签中，通常以 名称=“值” 的形式出现。

基本语法

<元素名 属性名="属性值">内容</元素名>

`id` - 唯一标识符

为元素指定唯一的标识符
在同一文档中必须唯一
常用于 CSS 样式化和 JavaScript 操作

<div id="header">这是页头</div>
<p id="intro">介绍段落</p>

`class` - 类选择器

为元素指定一个或多个类名
一个元素可以有多个类（用空格分隔）
主要用于 CSS 样式化和 JavaScript 选择

<p class="important text-red">这是一个重要的红色文本</p>
<div class="container main-content">内容容器</div>

`style` - 内联样式

直接在元素上定义 CSS 样式
优先级较高，但不推荐大量使用（应使用外部CSS）

<p style="color: blue; font-size: 16px;">蓝色文本</p>
<div style="background-color: #f0f0f0; padding: 10px;">带背景的容器</div>

`title` - 提示文本

提供元素的额外信息
鼠标悬停时显示提示文本

<a href="#" title="点击了解更多信息">了解更多</a>
<p title="这是一段重要的说明文字">悬停看我</p>

**`data-*`** - 自定义数据属性

存储元素的私有自定义数据
可以通过 JavaScript 访问

<div data-user-id="12345" data-role="admin">用户信息</div>
<li data-price="29.99" data-category="electronics">产品A</li>

链接相关 (`<a>` 标签)

<!-- href - 目标URL -->
<a href="https://www.example.com">访问网站</a><!-- target - 打开方式 -->
<a href="page.html" target="_blank">在新窗口打开</a><!-- rel - 与目标URL的关系 -->
<a href="https://external.com" rel="noopener noreferrer">外部链接</a>

图片相关 (`<img>` 标签)

<!-- src - 图片路径 -->
<img src="image.jpg" alt="图片描述"><!-- alt - 替代文本（重要！） -->
<img src="cat.png" alt="一只可爱的猫咪"><!-- width/height - 尺寸 -->
<img src="photo.jpg" alt="照片" width="300" height="200">

表单相关属性

`<input>` 标签：

<!-- type - 输入类型 -->
<input type="text" placeholder="请输入用户名">
<input type="password" placeholder="密码">
<input type="email" placeholder="邮箱">
<input type="number" min="1" max="100">
<input type="checkbox" checked>
<input type="radio" name="gender" value="male"><!-- 其他重要属性 -->
<input type="text" name="username" value="默认值"placeholder="提示文本"requireddisabledmaxlength="20">

`<form>` 标签：

<form action="/submit" method="POST" enctype="multipart/form-data"><!-- 表单内容 -->
</form>

列表相关

<!-- ol 的有序列表属性 -->
<ol type="A" start="3"><li>第三项</li><li>第四项</li>
</ol><!-- ul 的无序列表 -->
<ul type="square"><li>项目一</li><li>项目二</li>
</ul>

布尔属性

布尔属性只有存在与否的概念，不需要值。如果存在，就表示"真"。

<!-- 以下都是正确的写法 -->
<input type="checkbox" checked>
<input disabled>
<video controls>
<option selected><!-- 也可以写成（但不必要） -->
<input type="checkbox" checked="checked">