HTML介绍以及常用代码总结

lichongyang

2 周前

HTML 介绍

HTML（HyperText Markup Language，超文本标记语言）是构建网页的标准语言。它使用一系列的标签来定义网页的结构和内容。HTML 主要负责网页的骨架和结构，比如页面中的文本、图片、链接、表格、列表等。HTML 标签不包含逻辑或行为，它们仅用于标记和组织内容。对于网站功能和交互，通常需要与 CSS（样式表）和 JavaScript（脚本）配合使用。

HTML 的基本结构

一个标准的 HTML 页面结构如下：

&lt;!DOCTYPE html> &lt;!-- 声明文档类型 -->
&lt;html lang="zh">
&lt;head>
    &lt;meta charset="UTF-8"> &lt;!-- 设置字符集 -->
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt;!-- 设置视口，响应式设计 -->
    &lt;title>网页标题&lt;/title> &lt;!-- 网页的标题，显示在浏览器标签上 -->
    &lt;link rel="stylesheet" href="styles.css"> &lt;!-- 引入外部CSS文件 -->
&lt;/head>
&lt;body>
    &lt;!-- 页面主体内容 -->
    &lt;h1>这是一个HTML页面&lt;/h1>
    &lt;p>这段话是HTML标签中的段落。&lt;/p>
&lt;/body>
&lt;/html>

常见 HTML 标签总结

1. 文档结构标签

<!DOCTYPE html>: 声明文档类型，告诉浏览器文档的 HTML 版本。
<html>: HTML 文档的根元素，包裹整个页面。
<head>: 包含页面的元数据（例如字符集、标题、外部文件引用等）。
<meta>: 提供文档的元数据，例如字符集和视口设置。
<title>: 页面标题，显示在浏览器标签栏。
<body>: 页面主体内容，所有可见的页面元素都应该放在 <body> 标签内。

2. 文本相关标签

<h1> 至 <h6>: 标题标签，<h1> 为最大标题，<h6> 为最小标题。
<p>: 段落标签，用于包裹一段文本。
<strong>: 强调文本，通常加粗。
<em>: 强调文本，通常为斜体。
<br>: 换行标签，用于强制换行。
<blockquote>: 引用一段较长的文本，通常带有缩进。
<a>: 链接标签，用于创建超链接。

3. 列表标签

<ul>: 无序列表（bulleted list）。
<ol>: 有序列表（numbered list）。
<li>: 列表项，<ul> 或 <ol> 内部使用。

&lt;ul>
    &lt;li>苹果&lt;/li>
    &lt;li>香蕉&lt;/li>
    &lt;li>橙子&lt;/li>
&lt;/ul>

4. 表格标签

<table>: 表格标签。
<tr>: 表格行标签，用于定义行。
<th>: 表格头部标签，表示表格标题，默认加粗、居中。
<td>: 表格单元格标签，用于填充数据。

&lt;table>
    &lt;tr>
        &lt;th>姓名&lt;/th>
        &lt;th>年龄&lt;/th>
    &lt;/tr>
    &lt;tr>
        &lt;td>张三&lt;/td>
        &lt;td>25&lt;/td>
    &lt;/tr>
&lt;/table>

5. 表单标签

<form>: 表单标签，用于收集用户输入。
<input>: 表单输入框，可以是文本框、密码框、按钮等。
<textarea>: 多行文本框。
<button>: 按钮标签，用于提交表单或执行其他操作。
<label>: 标签，通常与 <input> 配合使用，定义表单控件的标签。

&lt;form>
    &lt;label for="name">姓名：&lt;/label>
    &lt;input type="text" id="name" name="name">
    &lt;button type="submit">提交&lt;/button>
&lt;/form>

6. 多媒体标签

<img>: 图片标签，用于显示图像。src 属性定义图片路径，alt 属性定义图片替代文本。
<audio>: 音频标签，用于嵌入音频内容。
<video>: 视频标签，用于嵌入视频内容。

&lt;img src="image.jpg" alt="图片描述">

7. 链接与引用标签

<a>: 超链接标签，href 属性定义链接目标。
<link>: 用于在 <head> 中引入外部资源，如 CSS 文件。
<meta>: 提供网页元数据（例如，描述、作者、关键字等）。
<iframe>: 内联框架，用于在页面中嵌入其他网页。

&lt;a href="https://www.example.com">访问示例网站&lt;/a>

8. HTML5 新标签

<article>: 定义文章，通常用于独立的内容区域。
<section>: 定义文档的章节，通常包含若干文章或相关内容。
<nav>: 定义导航区域，用于链接到其他页面。
<header>: 定义页面或文章的头部部分。
<footer>: 定义页面或文章的底部部分。
<aside>: 定义与页面内容不直接相关的内容，通常用于侧边栏。

&lt;article>
    &lt;h2>新闻标题&lt;/h2>
    &lt;p>新闻内容&lt;/p>
&lt;/article>

常用的 HTML 属性

id: 元素的唯一标识符，用于 JavaScript 操作和 CSS 样式定位。
class: 类名，用于 CSS 样式和 JavaScript 操作，可以指定多个类名。
style: 内联样式，用于直接给元素添加 CSS 样式。
href: 超链接的目标地址。
src: 媒体资源的路径，通常用于 <img>、<audio>、<video> 等标签。
alt: 图像的替代文本，当图像无法加载时显示。
type: 用于表单输入的类型，如 text、password、email 等。
placeholder: 用于表单输入框，显示在文本框中的提示文本。

&lt;input type="text" id="username" placeholder="请输入用户名">

HTML 常用技巧

嵌套标签：HTML 中标签可以嵌套使用，确保标签结构正确。

&lt;div>
    &lt;h1>标题&lt;/h1>
    &lt;p>这是一段文本。&lt;/p>
&lt;/div>

注释：HTML 中可以使用注释来标记代码的说明，注释不会在页面中显示。

&lt;!-- 这是一个注释 -->

字符实体：有些字符需要用字符实体表示，例如 < 表示为 <，> 表示为 >。

&lt;p>5 &lt; 10&lt;/p>  &lt;!-- 正常显示为 5 &lt; 10 -->
&lt;p>5 &amp;lt; 10&lt;/p> &lt;!-- 显示为 5 &lt; 10 -->

空格与换行：HTML 会忽略多余的空格和换行，除非使用特定标签（如 <pre>）或者 CSS 来控制布局。

总结

HTML 是网页结构的基础，理解和掌握 HTML 是前端开发的第一步。通过学习常用的 HTML 标签及其属性，你可以创建网页的基本结构，并与 CSS 和 JavaScript 结合，完成动态且富有表现力的网页设计。