HTML最常用标签和属性，学会这几个就能搭出网页页面了

唯一Chat

发布于 2026-08-25 09:04:58

810

文章被收录于专栏：陶士涵的菜地陶士涵的菜地

上节课咱们讲了网页最基础的骨架结构，<!DOCTYPE html>、<html>、<head>、<body> 这套东西。今天继续往下走，讲几个做网页天天都在用的标签和属性。

学完这篇，你就能自己搭出一个有文字、有图片的简单网页了。

div 和 span：网页里出现最多的两个标签

做网页，最绕不开的就是 <div> 标签。

div 是个块级元素——什么叫块级？就是它特别霸道，会独占一整行。你在页面上要划分一个区域、放一组内容，就用 div 包起来。一个网页少则几个、多则几十个 div，太正常了。

还有一个长得像的兄弟叫 <span>，它是行内元素，不会占一整行，宽度完全由里面的内容撑开。

简单记：

div：占一整行，划分大块区域用
span：不占整行，控制一小段文字样式用

实际写网页的时候，div 用得远远比 span 多。

单标签：img 图片标签

上节课讲的都是成对出现的双标签，这次介绍一类新的：单标签。

最典型的就是 <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 样式美化了。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2026-08-24，如有侵权请联系 cloudcommunity@tencent.com 删除

浏览器