如何自己做html_手工编写HTML代码（基础结构/标签）方法-html教程-PHP中文网

如何自己做html_手工编写HTML代码（基础结构/标签）方法

星夢妙者

发布： 2025-11-06 22:14:02

原创

869人浏览过

掌握HTML基本结构和常用标签即可快速搭建网页。从DOCTYPE声明到html根标签，包含head（含meta、title）和body部分，使用h1-h6、p、a、img、ul、li、div等标签构建内容，保存为.html文件后用浏览器预览，注意标签闭合、属性引号与代码缩进，逐步练习掌握基础。

如何自己做html_手工编写html代码（基础结构/标签）方法

想自己动手写HTML，其实没那么难。只要掌握基本结构和常用标签，就能快速搭建网页骨架。下面一步步带你了解如何从零开始手工编写HTML代码。

1. HTML文档的基本结构

每个HTML页面都有一个标准的结构框架，这是浏览器识别和显示网页的基础。手动编写时，必须包含以下几个关键部分：

<!DOCTYPE html>：声明文档类型，告诉浏览器这是HTML5文档。
<html></html>：根标签，所有内容都要写在里面。
<head></head>：存放页面元信息，比如标题、编码、引入CSS等。
<title></title>：定义网页标题，显示在浏览器标签页上。
<meta charset="UTF-8">：设置字符编码，避免中文乱码。
<body></body>：页面主要内容，用户看到的内容都放在这里。

示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>我的第一个网页</title>
</head>
<body>
  <h1>欢迎来到我的网站</h1>
</body>
</html>

登录后复制

2. 常用HTML标签及用途

掌握几个基础标签，就能构建出有结构的内容。以下是最常用的标签及其作用：

<h1> 到 <h6>：标题标签，h1最大，h6最小，用于组织内容层级。
<p></p>：段落标签，包裹文字内容。
<a href="网址">链接文字</a>：超链接，点击可跳转到其他页面或网站。
<img src="图片路径" alt="描述文字">：插入图片，alt是替代文本，图片加载失败时显示。
<ul><li></li></ul>：无序列表，适合做导航或项目点。
<br>：换行标签，单标签不需要闭合。
<div></div>：块级容器，用来分组内容或布局。

简单例子：

<h2>我的兴趣</h2>
<ul>
  <li>阅读</li>
  <li>编程</li>
  <li>旅行</li>
</ul>
<p><p>访问我的博客：<a href="<a href="https://www.php.cn/link/36acb34afa8318d3e64f4904d659c3e4">https://example.com">点击这里</a></p&gt</a>;</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/ai/735">
                            <img src="https://img.php.cn/upload/ai_manual/001/246/273/68b6cdbf48df2598.png" alt="代码小浣熊">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/ai/735">代码小浣熊</a>
                            <p>代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="代码小浣熊">
                                <span>51</span>
                            </div>
                        </div>
                        <a href="/ai/735" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="代码小浣熊">
                        </a>
                    </div>

登录后复制