HTML基础入门教程-拓冰网站定制

HTML 是 HyperText Markup Language（超文本标记语言）的缩写，它不是一门编程语言，而是一门“描述网页结构”的标记语言。你看到的每一段文字、每一张图片、每一个输入框，背后都是一个个 HTML 标签。拓冰把这套教程拆成五个部分，带你从 0 搭出第一个能跑的网页。

一、HTML 是什么

HTML 用一组带有尖括号的“标签”来告诉浏览器：这里是一级标题、这里是一段正文、这里是一张图片。浏览器解析这些标签后，按规则把它们渲染成你最终看到的页面。它本身不负责颜色、字体这些“长相”——那是 CSS 的活儿；也不负责“动起来”——那是 JavaScript 的活儿。HTML 只负责一件事：搭骨架。

HTML 的版本演进到 HTML5，已经不再是需要写一长串 DTD 声明的时代。现代浏览器对 HTML5 的支持非常完善，新手直接从 HTML5 学起即可，无需纠结历史包袱。

二、HTML 文档结构

一个标准的 HTML5 文档由 doctype 声明、html 根元素、head 头部和 body 主体组成。head 里放的是给浏览器和搜索引擎看的“元信息”，body 里放的才是用户真正能看到的内容。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>我的第一个网页</title>
</head>
<body>
  <h1>你好，拓冰</h1>
  <p>这是我用 HTML 写的第一段文字。</p>
</body>
</html>

拓冰提示 <!DOCTYPE html> 必须放在文档第一行，前面不能有空格或空行，否则部分浏览器会进入“怪异模式”导致布局错乱。中文站点记得给 <html> 加上 lang="zh-CN"，这对搜索引擎和无障碍读屏都更友好。

三、常用标签

HTML 提供了大量语义化标签，新手先掌握下面这十几个就够搭出绝大多数页面。

<h1> ~ <h6>：六级标题，一个页面只用一个 h1。
<p>：段落。
<a>：超链接，href 属性决定跳转地址。
<img>：图片，必须写 alt 属性。
<ul> / <ol> / <li>：无序 / 有序列表与列表项。
<div>：通用块级容器，没有语义。
<span>：通用行内容器。

<nav>
  <a href="index.html">首页</a>
  <a href="about.html">关于我们</a>
</nav>
<main>
  <article>
    <h2>文章标题</h2>
    <p>文章正文……</p>
    <img src="images/cover.jpg" alt="封面图" width="800" height="450">
  </article>
</main>

拓冰在做定制站时，会优先使用 header、nav、main、article、section、footer 这些 HTML5 语义标签，而不是清一色 div。语义化标签对 SEO 和无障碍都有加分，也让源码一眼能看出结构。

四、表单与表格

表单负责“收集用户输入”，是联系页、预约页、登录页的核心。表格则用于展示结构化数据（如价格表、参数表），但不要用表格做布局——那是上世纪的写法。

<form action="/submit" method="post">
  <label for="name">姓名</label>
  <input type="text" id="name" name="name" required>

  <label for="phone">电话</label>
  <input type="tel" id="phone" name="phone" placeholder="请输入手机号">

  <label for="msg">需求</label>
  <textarea id="msg" name="msg" rows="4"></textarea>

  <button type="submit">提交需求</button>
</form>

避坑提醒 每个表单控件都要配 <label> 并用 for 与 id 关联；提交按钮优先用 <button type="submit"> 而不是 <input type="submit">，可读性和可扩展性都更好。

五、HTML5 新特性

HTML5 带来了一批“开箱即用”的能力，省掉了过去必须依赖 JavaScript 或 Flash 才能实现的效果。

语义标签：header、nav、main、section、article、aside、footer。
多媒体标签：<video>、<audio> 无需插件即可播放。
画布：<canvas> 配合 JS 可做图形绘制、数据可视化。
新表单类型：email、url、date、number、range 自带校验。
本地存储：localStorage / sessionStorage 替代 Cookie 存较大数据。

<input type="email" name="email" required>
<input type="date" name="visit">
<video src="media/intro.mp4" controls width="640" height="360"></video>

掌握 HTML 之后，下一步就是给骨架“穿衣服”——学 CSS。如果你想跟着真实项目学，可以预约拓冰的源码教学服务，我们用真实交付的定制站做案例，带你边改边学。

HTML 基础入门教程

HTML 基础入门教程：从一行标签到一个网页