HTML入门指南：从零开始构建网页结构-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_63520660/article/details/145536245

一、什么是HTML？

HTML全称是"HyperText Markup Language（超文本标记语言）"，它就像网页的"骨架"，负责定义网页的结构和内容。想象一下，建房子需要钢筋水泥做框架，而HTML就是网页的钢筋框架。

简单发展史

1991年：HTML诞生
1999年：HTML4.01成为标准
2014年：HTML5正式发布（我们现在主要使用的版本）

二、HTML基础结构

每个HTML文件都像一封信件，有固定格式：

<!DOCTYPE html>
<html>
<head>
    <title>网页标题</title>
</head>
<body>
    <!-- 这里写网页内容 -->
</body>
</html>

<!DOCTYPE html>：声明文档类型
<html>：包裹整个网页
<head>：存放网页"元信息"（标题、字符编码等）
<body>：显示给用户看的内容

三、常用标签详解

1️⃣ 文本标签

标签	作用	注意点
`<h1>`-`<h6>`	标题（1最大，6最小）	一个页面建议只有一个`<h1>`
`<p>`	段落文字	会自动换行并保留段落间距
`<span>`	行内文字容器	常用于CSS样式修改
`<strong>`	强调文本（加粗）	表示内容重要性
`<em>`	强调文本（斜体）	表示语气强调
`<br>`	强制换行	单独使用，没有闭合标签
`<hr>`	水平分割线	可用于分隔内容区域

2️⃣ 图片标签

<img src="cat.jpg" alt="可爱的橘猫" width="300">

必须属性：
- src：图片路径（本地或网络地址）
- alt：图片无法显示时的替代文字
常用属性：
- width/height：控制尺寸（建议只设置一个保持比例）

3️⃣ 链接标签

<a href="https://www.example.com" target="_blank">点击访问</a>

href：链接地址（可以是网址、文件路径、锚点）
target：
- _self：当前窗口打开（默认）
- _blank：新窗口打开

4️⃣ 列表标签

无序列表（带项目符号）：

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

有序列表（带数字编号）：

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

5️⃣ 表格标签

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

<tr>：表格行
<td>：普通单元格
<th>：表头单元格（自动加粗居中）

6️⃣ 表单标签

<form action="/submit">
  <input type="text" placeholder="请输入姓名">
  <textarea rows="3"></textarea>
  <select>
    <option>北京</option>
    <option>上海</option>
  </select>
  <button type="submit">提交</button>
</form>

常用输入类型：
- text：文本输入
- password：密码输入
- checkbox：多选框
- radio：单选框

7️⃣ 布局标签

标签	作用
`<div>`	块级容器（最常用布局标签）
`<span>`	行内容器
`<header>`	头部区域
`<footer>`	底部区域
`<nav>`	导航栏
`<section>`	内容区块
`<article>`	独立文章内容

四、HTML5新特性

1. 语义化标签

用<header>、<nav>等标签替代大量<div>，让代码更易读，对搜索引擎更友好。

2. 多媒体支持

<video controls>
  <source src="movie.mp4" type="video/mp4">
</video>

<audio controls>
  <source src="music.mp3" type="audio/mpeg">
</audio>

3. Canvas绘图

<canvas id="myCanvas" width="200" height="100"></canvas>

通过JavaScript可以在画布上绘制图形、动画。

4. Web Storage

本地存储数据（后续学习JavaScript时会用到）

五、避坑指南

1. 标签使用禁忌

❌ 禁止<a>标签嵌套<a>标签
❌ <button>里不要放交互元素（如另一个按钮）
❌ 不要用<b>替代<strong>，用<i>替代<em>

2. 属性注意事项

属性	适用标签	特殊说明
`disabled`	input/button/select等	禁用元素，数据不会提交
`readonly`	input/textarea	只读，数据会提交
`required`	输入类标签	表单验证必填项
`autofocus`	输入类标签	页面加载自动聚焦

六、动手实践

个人简介页面示例

<!DOCTYPE html>
<html>
<head>
    <title>我的简介</title>
</head>
<body>
    <header>
        <h1>张三的个人主页</h1>
        <nav>
            <a href="#info">基本信息</a>
            <a href="#hobby">兴趣爱好</a>
        </nav>
    </header>
    
    <section id="info">
        <h2>基本信息</h2>
        <img src="avatar.jpg" alt="头像" width="100">
        <ul>
            <li>年龄：25</li>
            <li>职业：前端学习者</li>
        </ul>
    </section>
</body>
</html>