HTML 教程 - 老男孩拯救计划

HTML 简介

HTML 是用于创建网页的标准标记语言。

什么是 HTML

HTML（HyperText Markup Language）即超文本标记语言，是用于创建网页的标准标记语言。HTML 不是一种编程语言，而是一种标记语言，使用标记标签来描述网页。

HTML 的发展历史

HTML 由蒂姆·伯纳斯-李于1991年提出，经过多年发展，从 HTML2.0 到 HTML5，经历了多个版本的演进。HTML5 是当前最新的版本，提供了更多强大的新特性。

HTML 基础

学习 HTML 的基本语法和结构。

HTML 文档结构

每个 HTML 文档都有一个基本的结构，包括 DOCTYPE、html、head、body 等标签。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>网页标题</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落</p>
</body>
</html>

标题标签

HTML 提供了六个级别的标题标签，从 h1 到 h6。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落和换行

使用 p 标签定义段落，br 标签创建换行。

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

<p>第一行<br>第二行</p>

HTML 文本格式化

HTML 提供了多种文本格式化标签。

常用格式化标签

常用的文本格式化标签包括加粗、斜体、下划线等。

<b>加粗文本</b>
<strong>加粗文本（强调）</strong>
<i>斜体文本</i>
<em>斜体文本（强调）</em>
<u>下划线文本</u>
<del>删除线文本</del>

预格式化文本

使用 pre 标签保留文本的原始格式。

<pre>
function hello() {
    console.log("Hello World");
}
</pre>

HTML 链接

链接是 HTML 的核心特性之一。

创建链接

使用 a 标签创建链接，href 属性指定链接地址。

<a href="https://www.example.com">访问示例网站</a>
<a href="about.html">关于页面</a>
<a href="#top">返回顶部</a>

新窗口打开链接

使用 target 属性指定链接打开方式。

<a href="https://www.example.com" target="_blank">新窗口打开</a>
<a href="https://www.example.com" target="_self">当前窗口打开（默认）</a>

HTML 图像

学习如何在网页中插入图像。

插入图像

使用 img 标签插入图像，src 属性指定图像路径。

<img src="image.jpg" alt="图片描述">

<!-- 带宽高的图像 -->
<img src="logo.png" alt="Logo" width="200" height="100">

图像格式

常用的网页图像格式包括 JPG、PNG、GIF、WebP 等。

<!-- JPG - 适合照片 -->
<img src="photo.jpg" alt="照片">

<!-- PNG - 适合图标、透明背景 -->
<img src="icon.png" alt="图标">

<!-- GIF - 适合动画 -->
<img src="animation.gif" alt="动画">

HTML 列表

HTML 支持三种类型的列表。

无序列表

使用 ul 标签创建无序列表。

<ul>
    <li>苹果</li>
    <li>香蕉</li>
    <li>橙子</li>
</ul>

有序列表

使用 ol 标签创建有序列表。

<ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>

定义列表

使用 dl、dt、dd 标签创建定义列表。

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
</dl>

HTML 表格

表格用于展示结构化数据。

创建表格

使用 table、tr、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 标签创建表单。

<form action="/submit" method="post">
    <label>用户名：</label>
    <input type="text" name="username"><br>
    <label>密码：</label>
    <input type="password" name="password"><br>
    <button type="submit">提交</button>
</form>

表单输入类型

HTML5 提供了多种输入类型。

<input type="text">       <!-- 文本输入 -->
<input type="password">   <!-- 密码输入 -->
<input type="email">      <!-- 邮箱输入 -->
<input type="number">     <!-- 数字输入 -->
<input type="date">       <!-- 日期选择 -->
<input type="checkbox">   <!-- 复选框 -->
<input type="radio">      <!-- 单选按钮 -->
<textarea></textarea>      <!-- 文本域 -->

HTML 区块

HTML 元素可以分为块级元素和行内元素。

块级元素

块级元素会自动换行，占据完整宽度。

<div>这是一个块级元素</div>
<h1>标题也是块级元素</h1>
<p>段落也是块级元素</p>
<ul>列表也是块级元素</ul>

行内元素

行内元素不会自动换行，只占据必要的宽度。

<span>这是一个行内元素</span>
<b>加粗也是行内元素</b>
<i>斜体也是行内元素</i>
<a href="#">链接也是行内元素</a>

HTML 语义化

语义化标签使代码更清晰易读。

语义化标签

HTML5 引入了一系列语义化标签。

<header>网页头部</header>
<nav>导航栏</nav>
<main>
    <article>
        <section>
            <h1>文章标题</h1>
            <p>文章内容...</p>
        </section>
    </article>
    <aside>侧边栏</aside>
</main>
<footer>网页底部</footer>

上一篇暂无

下一篇HTML5 教程