html菜鸟教程零基础小白必备标签速查表

admin HTML教程 2025-10-24 3

是不是很多刚学 HTML 的小白朋友都有这样的烦恼？记了这个标签忘了那个，写网页时总对着键盘发呆，不知道该敲哪个标签；好不容易想起一个标签，又记不清属性怎么写，得翻半天教程？其实啊，HTML 常用标签就那么几十个，没必要死记硬背，找个实用的速查表，随用随查，效率能高不少。今天兔子哥就给零基础的朋友们整理一份超实用的标签速查表，按功能分类，每个标签都附用法和例子，新手存起来，写代码时不用再到处找资料，一起往下看吧！

一、基础结构标签：网页的 “骨架”，必须先搞懂

核心问题：写网页第一步该写啥？这些标签是啥意思？
就像盖房子先搭框架，写网页也得先有基础结构，这几个标签是所有网页的开头，必须记住。

作用	用法示例	新手提醒
声明文档类型	写在 HTML 文件最开头	必须第一行，不然浏览器乱解析
网页根标签	包裹所有内容	一个网页只有一个
网页设置区	放标题、编码、样式等	看不到的设置都放这
网页标题	`我的网页`	显示在浏览器标签栏
字符编码	放在里	不加中文会乱码，必写！
网页内容区	放文字、图片、链接等可见内容	所有看得见的都放这里

兔子哥小技巧：新建 HTML 文件时，先把这些标签敲好，形成固定模板，比如：
html预览

DOCTYPE html><html><head><meta charset="utf-8"><title>网页标题title>head><body>body>html>

这样每次写新网页就不用重复敲基础结构了，省时间还不容易错。

二、文本标签：让文字有层次，排版不乱

核心问题：怎么在网页上写标题、段落？文字怎么加粗、换行？
网页上的文字内容全靠这些标签，用对了排版整齐，读者看着舒服。

标题标签（最重要的文本标签）

html预览

<h1>一级标题h1> <h2>二级标题h2> <h3>三级标题h3>

用法提醒：标题标签自带加粗和换行，不用再加

；层级要清晰，别跳级用（比如从 h1 直接到 h3）。

常用文本标签

标签	作用	用法示例
	段落标签	`这是一段文字`
	换行标签	`第一行第二行`
	加粗文字	`重要内容`
	斜体文字	`强调内容`
	行内包裹标签	`单独样式文字`

新手常见问题：分不清和

？是段落，会自动在前后加空白；

只是强制换行，没有空白。比如写文章用分段，在段落内换行用

。

三、链接与图片标签：网页的 “血管” 和 “装饰”

核心问题：怎么在网页上加图片？怎么加点击跳转的链接？
链接让网页能 “串门”，图片让网页更生动，这俩是网页的 “必备元素”。

超链接标签

html预览

<a href="https://baidu.com" target="_blank">百度一下a><a href="about.html">关于我们a><a href="mailto:test@163.com">发邮件联系a>

必记属性：

href：链接地址，必须写，不然点了没反应
target="_blank"：新窗口打开链接，不加的话会在当前窗口跳转

图片标签

html预览

<img src="photo.jpg" alt="我的照片" width="200"><img src="images/logo.png" alt="网站logo">

必记属性：

src：图片路径，错了会显示裂图
alt：图片加载失败时显示的文字，必加！
width/height：设置宽高，只写一个会自动等比例缩放

小张的血泪教训：图片一直显示裂图，查了半小时才发现src里的文件名是 “Photo.jpg”（大写 P），改成小写 “photo.jpg” 就好了 —— 路径和文件名一定要完全匹配，大小写也不能错！

四、列表与表格标签：让内容有条理，数据不混乱

核心问题：怎么把爱好、步骤排成整齐的列表？怎么展示课程表、成绩表？
列表和表格能让杂乱的内容变整齐，新手做网页经常会用到。

列表标签（分无序列表和有序列表）

html预览

<ul><li>苹果li><li>香蕉li>ul><ol><li>打开电脑li><li>打开浏览器li>ol>

提醒：ul和ol里只能放li标签，别直接放文字，不然结构会乱。

表格标签（展示数据专用）

html预览

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

必记标签：（表格）、（行）、（单元格）、（表头），缺一不可。

五、表单标签：让网页能 “互动”，收集用户信息

核心问题：怎么做登录框、报名表单？用户填的内容怎么收集？
表单是网页和用户互动的关键，登录、注册、问卷调查都离不开它。

常用表单元素

html预览

<form>用户名：<input type="text" name="username" placeholder="请输入用户名"><br>密码：<input type="password" name="password"><br>性别：<input type="radio" name="sex" value="男" checked>男<input type="radio" name="sex" value="女">女<br>爱好：<input type="checkbox" name="hobby" value="html">HTML<input type="checkbox" name="hobby" value="css">CSS<br><input type="submit" value="提交"><input type="reset" value="清空">form>

关键提醒：

所有表单元素必须放标签里
每个输入项要加name属性，不然收集不到数据
type属性决定输入框类型，别写错（比如密码框是password不是pass）

六、语义化标签：让代码更易懂，SEO 更友好

核心问题：啥是语义化标签？为啥要用它们？
语义化标签就是有明确含义的标签，比如表示页头，表示导航，能让代码更清晰，搜索引擎也更喜欢。

标签	作用	用法示例
	页头或区块头部	放 logo、标题、导航
	导航区域	放主导航链接
	主要内容区	放网页核心内容
	独立文章内容	放博客文章、新闻等
	页脚	放版权信息、联系方式

用法示例：
html预览

<header><h1>我的网站h1><nav>导航链接nav>header><main><article>文章内容article>main><footer>版权信息footer>

七、速查表使用技巧：新手怎么查得快？

按功能找标签：想加图片就翻 “链接与图片标签”，做表单就看 “表单标签”，不用从头翻。
复制例子改参数：比如用图片标签时，复制例子里的，把文件名和描述改成自己的就行。
打印出来贴桌上：刚开始学的时候，把常用标签打印出来放电脑旁，忘了就瞄一眼，比来回翻教程快多了。
记不住就注释：在代码里加注释提醒自己，比如：

html预览

<ul><li>列表项1li>ul>

最后跟大家说句实在的，学 HTML 不用死记硬背所有标签，没人能一次记住。这个速查表就像 “HTML 字典”，刚开始写代码时多查多用，写得多了自然就记住了。兔子哥刚开始学的时候，连的src和alt都经常搞混，翻了几十次速查表才记牢 —— 谁都是这么过来的。
别害怕标签多，常用的其实就十几个，重点是理解每个标签的作用，知道什么时候该用哪个。把这个速查表存好，遇到不会的标签就查一查，写网页会越来越顺。希望这个速查表能帮到你，动手写代码的时候，别犹豫，边查边练才是最快的学习方法！

标签：浏览器零基础

本文地址： https://www.kfyz.com/html/1064.html