学完这篇，你就能自己搭出一个有文字、有图片的简单网页了。
做网页，最绕不开的就是 <div> 标签。
div 是个块级元素——什么叫块级？就是它特别霸道，会独占一整行。你在页面上要划分一个区域、放一组内容，就用 div 包起来。一个网页少则几个、多则几十个 div，太正常了。
还有一个长得像的兄弟叫 <span>，它是行内元素，不会占一整行，宽度完全由里面的内容撑开。
简单记：
- div：占一整行，划分大块区域用
- span：不占整行，控制一小段文字样式用
实际写网页的时候，div 用得远远比 span 多。
上节课讲的都是成对出现的双标签，这次介绍一类新的：单标签。
最典型的就是 <img>，专门用来在网页里插入图片。单标签顾名思义，只有一个标签，没有闭合。
图片标签有个必不可少的属性叫 src，用来告诉浏览器图片文件在哪里。比如图片和你的 html 文件在同一个文件夹，图片名叫 3.jpg，那就写 <img src="3.jpg">，保存刷新就能看到图片了。
另外还有个 alt 属性，用来写图片的替代文字。万一图片加载不出来（路径错了、文件删了等等），alt 里的文字会显示出来。这个很多人不爱写，但对 SEO 和无障碍访问很重要，别偷懒。
属性是个很重要的概念，写在标签的开始标签里面。标签名后面敲个空格，就可以写属性了。
格式很简单：属性名="属性值"，开发中推荐用英文双引号。
最常用的两个属性：
class——可以重复使用
比如你有 5 个 div 都要红色文字，给它们都写上 class="red"，然后在 CSS 里只需要写一条样式规则，5 个 div 就全变红了。省事吧？
id——必须唯一
id 相当于网页元素的身份证号，同一个页面里，两个元素的 id 不能一样。主要用于精准定位某个特定元素。
记住核心区别：id 唯一，class 可以重复。写样式优先用 class，id 主要做唯一标识。
说几个我自己带人时见过最多的问题：
- 图片加载不出来：99% 是路径写错了，要么图片放错了文件夹，要么文件名大小写不对（Linux 服务器区分大小写）
- 代码报错：多半是中文输入法没切英文，打了中文括号或尖括号
- 中文乱码：保存文件时编码没选 UTF-8
- class 和 id 搞混：明明需要统一样式，结果用了 id，每个都要单独写一遍样式
这些都是小问题，知道原因后一眼就能解决。
HTML 入门真的不难，核心就是认识这些常用标签，理解属性的用法，然后多写多练。
从零基础到现在，你已经知道了：
- 网页的基础骨架结构
- 块级元素（div）和行内元素（span）的区别
- 单标签（img）和双标签的区别
- 属性和属性值的写法
- class 和 id 的核心区别
有了这些基础，下一步就可以学 CSS 样式美化了。
我做了十几年开发，从 PHP 到 Golang，写过无数的网页和系统。现在运营唯一客服系统，也接企业官网、小程序、客服系统定制开发。
如果你需要做网站、搭客服系统，或者想继续学前端开发，可以找我聊：
我是程序员老狼，一个还在一线写代码的技术人。下节课咱们开讲 CSS，让网页从"能用"变成"好看"，不见不散。
程序员老狼 | 聊城变量网络科技有限公司
专注企业官网、在线客服系统、小程序开发
浙公网安备 33010602011771号