学做网站必懂的HTML基础标签用法
很多新手觉得学做网站需要懂很多代码，其实入门级的网站搭建，只要掌握几个核心的HTML基础标签，就能看懂网站结构、简单修改页面内容。
HTML是网站的“骨架”，所有网页都是由HTML标签组成的，下面就给大家讲解学做网站必懂的HTML基础标签，结合实际案例，让新手能快速理解和使用。
搞懂HTML标签的基本规则
HTML标签通常是成对出现的，比如<标签名>内容</标签名>，前面是开始标签，后面是结束标签；
有些标签是单标签（无需结束标签），比如<br/>（换行）、<img/>（插入图片）；
标签可以嵌套，但不能交叉嵌套（比如正确的是<div><p>内容</p></div>，错误的是<div><p>内容</div></p>）。
学做网站必懂的核心HTML标签
1. 文档结构标签：<!DOCTYPE html>（声明文档类型为HTML5）、<html></html>（整个HTML文档的根标签）、<head></head>（文档头部，存放网站标题、元信息等，不显示在页面上）、<body></body>（文档主体，页面上显示的所有内容都在这里）。
示例：<!DOCTYPE html><html><head><title>我的网站</title></head><body>网站内容</body></html>。
2. 标题标签：<h1></h1>到<h6></h6>，用于定义不同级别的标题，h1是一级标题（最重要，一个页面建议只放一个，比如网站标题），h2到h6级别依次降低（用于页面分区标题、文章小标题等）。
示例：<h1>我的个人博客</h1><h2>美食分享</h2><h3>家常菜做法</h3>。使用注意：标题标签有默认的字体大小和加粗效果，不要为了改变字体大小而滥用标题标签，要符合网站的结构逻辑，有利于搜索引擎收录。
3. 段落与换行标签：<p></p>用于定义段落，<br/>用于强制换行。
示例：<p>这是我的第一篇博客内容，记录我的美食制作心得。<br/>今天给大家分享的是番茄炒蛋的做法。</p>。区别：<p>标签会自动在段落前后添加空白间距，而<br/>只是简单的换行，没有间距。
4. 图片标签：<img src="图片路径" alt="图片描述" title="图片提示" />，是单标签，核心属性：src（图片的路径，必须正确，否则图片无法显示，比如“images/tomato.jpg”是相对路径，“https://xxx.com/tomato.jpg”是绝对路径）、alt（图片无法显示时显示的文字，有利于SEO和无障碍访问）、title（鼠标悬停在图片上时显示的提示文字）。
示例：<img src="images/food1.jpg" alt="番茄炒蛋成品图" title="番茄炒蛋" />。新手注意：图片路径是常见的坑，建议将图片放在网站的“images”文件夹里，用相对路径引用，避免使用绝对路径（如果图片地址变化，图片就会失效）。
5. 链接标签：<a href="链接地址" target="打开方式">链接文本/图片</a>，用于实现页面跳转，核心属性：href（跳转的链接地址，比如“index.html”是跳转到本站首页，“https://xxx.com”是跳转到外部网站）、target（打开方式，_self是在当前窗口打开，_blank是在新窗口打开）。
示例：<a href="about.html">关于我</a><a href="https://xxx.com" target="_blank">访问外部网站</a>。另外，链接也可以指向图片，实现点击图片跳转：<a href="product.html"><img src="images/product1.jpg" alt="产品图片" /></a>。
6. 列表标签：分为有序列表<ol></ol>和无序列表<ul></ul>，列表项用<li></li>定义。有序列表会自动添加数字序号，无序列表会自动添加项目符号。
示例：<h3>番茄炒蛋食材</h3><ul><li>番茄2个</li><li>鸡蛋3个</li><li>盐适量</li></ul>；<h3>制作步骤</h3><ol><li>鸡蛋打散，加少许盐搅拌均匀</li><li>番茄切块，备用</li><li>锅中倒油，油热后倒入鸡蛋翻炒至凝固</li></ol>。列表标签适合展示步骤、清单等内容，让页面结构更清晰。
7. 分区标签：<div></div>，用于划分页面区域，比如头部、导航栏、主体内容区、底部等，本身没有默认样式，需要结合CSS进行美化。
示例：<div class="header">网站头部（LOGO、导航）</div><div class="content">主体内容区</div><div class="footer">网站底部（版权信息）</div>。<div>标签是构建网站布局的核心标签，新手需要理解它的分区作用，后续学习CSS时就能快速上手页面美化。
新手学习建议：
不用死记硬背所有标签，先掌握上面这7类核心标签，然后用记事本或简单的编辑器（比如Notepad++）写几个简单的HTML文件，保存为.html格式，用浏览器打开查看效果，通过实操加深理解。比如写一个包含标题、段落、图片、链接的简单页面，熟悉标签的用法。
在实际搭建网站时，很多模板已经写好了HTML结构，新手只需要根据标签含义修改内容即可，掌握基础标签能让你更快上手网站修改和优化。