百度360必应搜狗淘宝本站头条
HTML APICSS 语法HTML5 支持CSS 谷歌字体HTML URL 编码
当前位置：网站首页 > 技术文章 > 正文

从零开始搭建第一个网页:HTML基础入门

myzbx 2025-03-13 18:15 12 浏览

从零开始搭建第一个网页：HTML基础入门

在前端开发的世界里，HTML（HyperText Markup Language）是构建网页的基础。它决定了页面的内容结构和布局。对于初学者来说，掌握HTML基础知识是迈向成功的第一步。

初识HTML

HTML是一种标记语言，用于描述网页内容。通过标签（tag），开发者可以定义文本、图像、链接等元素的位置和样式。浏览器根据这些标签渲染出用户看到的网页界面。

HTML的基本结构

一个标准的HTML文档包含以下基本结构：

<!DOCTYPE html>
<html lang="zh-CN">

<meta charset="UTF-8">
</span></strong>第一个网页<strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'>




1. ：文档类型声明，告诉浏览器这是一个HTML5文档。

2. 标签：表示整个HTML页面的根元素。指定网页语言为中文。

3. 标签：包含元数据（meta data），如字符集、标题等。

4. 标签：定义网页标题，显示在浏览器窗口顶部。</p><p data-track='12'>5. <body>标签：表示页面的主要内容。</p><h1 class='pgc-h-arrow-right' data-track='13'>HTML基础语法</h1><h1 class='pgc-h-arrow-right' data-track='14'>标签的基本结构</h1><p data-track='15'>HTML标签由尖括号<和>包裹。每个标签都有开始标签和结束标签，除了某些自闭合标签（如<img>、<input>等）。</p><p data-track='16'>o 开始标签：<tagname></p><p data-track='17'>o 结束标签：</tagname></p><p data-track='18'>o 自闭合标签：<tagname /></p><h1 class='pgc-h-arrow-right' data-track='19'>属性</h1><p data-track='20'>标签可以通过属性指定额外的信息。属性通常以“键值对”形式出现，写在标签名之后，用空格分隔。</p><p data-track='21'>例如：</p><p data-track='22'><strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'><img</span></strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'> src=</span><span style='color: #4070A0; --tt-darkmode-color: #4070A0;'>"图片地址"</span><span style='color: #007020; --tt-darkmode-color: #4ED775;'> alt=</span><span style='color: #4070A0; --tt-darkmode-color: #4070A0;'>"图片描述"</span> <strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'>/></span></strong></p><p data-track='23'>o src：指定图片的URL。</p><p data-track='24'>o alt：当图片无法加载时显示的文字描述。</p><h1 class='pgc-h-arrow-right' data-track='25'>注释</h1><p data-track='26'>注释用于解释代码或暂时禁用某部分代码，以包裹。</p><p data-track='27'><em><span style='color: #60A0B0; --tt-darkmode-color: #60A0B0;'></span></em></p><h1 class='pgc-h-arrow-right' data-track='28'>特殊字符</h1><p data-track='29'>在HTML中，某些字符需要转义处理：</p><p data-track='30'>o & 转换为 &</p><p data-track='31'>o < 转换为 <</p><p data-track='32'>o > 转换为 ></p><h1 class='pgc-h-arrow-right' data-track='33'>常用HTML标签</h1><h1 class='pgc-h-arrow-right' data-track='34'>文本内容</h1><p data-track='35'>o <h1>到<h6>：标题，数字越小级别越高。</p><p data-track='36'><strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'><h1></span></strong>一级标题<strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'></h1></span></strong><br><strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'><h2></span></strong>二级标题<strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'></h2></span></strong></p><p data-track='37'>o <p>：段落标签。</p><p data-track='38'><strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'><p></span></strong>这是一个段落。<strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'></p></span></strong></p><h1 class='pgc-h-arrow-right' data-track='39'>链接</h1><p data-track='40'>o <a>标签用于创建超链接，href属性指定链接地址，target="_blank"控制新窗口打开。</p><p data-track='41'><strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'><a</span></strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'> href=</span><span style='color: #4070A0; --tt-darkmode-color: #4070A0;'>"http://www.example.com"</span><span style='color: #007020; --tt-darkmode-color: #4ED775;'> target=</span><span style='color: #4070A0; --tt-darkmode-color: #4070A0;'>"_blank"</span><strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'>></span></strong>访问示例网站<strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'></a></span></strong></p><h1 class='pgc-h-arrow-right' data-track='42'>图片</h1><p data-track='43'>o <img>标签插入图片，src属性指定图片路径，alt属性提供替代文字。</p><p data-track='44'><strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'><img</span></strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'> src=</span><span style='color: #4070A0; --tt-darkmode-color: #4070A0;'>"images/logo.png"</span><span style='color: #007020; --tt-darkmode-color: #4ED775;'> alt=</span><span style='color: #4070A0; --tt-darkmode-color: #4070A0;'>"站点标志"</span> <strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'>/></span></strong></p><h1 class='pgc-h-arrow-right' data-track='45'>表单元素</h1><p data-track='46'>o <form>：表单容器，处理用户输入。</p><p data-track='47'>o <input>：表单域，类型多样（文本框、提交按钮等）。</p><p data-track='48'><strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'><input</span></strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'> type=</span><span style='color: #4070A0; --tt-darkmode-color: #4070A0;'>"text"</span><span style='color: #007020; --tt-darkmode-color: #4ED775;'> name=</span><span style='color: #4070A0; --tt-darkmode-color: #4070A0;'>"username"</span><span style='color: #007020; --tt-darkmode-color: #4ED775;'> placeholder=</span><span style='color: #4070A0; --tt-darkmode-color: #4070A0;'>"请输入用户名"</span><strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'>></span></strong><br><strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'><input</span></strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'> type=</span><span style='color: #4070A0; --tt-darkmode-color: #4070A0;'>"submit"</span><span style='color: #007020; --tt-darkmode-color: #4ED775;'> value=</span><span style='color: #4070A0; --tt-darkmode-color: #4070A0;'>"提交"</span><strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'>></span></strong></p><h1 class='pgc-h-arrow-right' data-track='49'>简单案例：搭建一个个人主页</h1><p data-track='50'>让我们通过实际操作，一步步构建一个简单的个人网页。</p><h1 class='pgc-h-arrow-right' data-track='51'>步骤1：创建基本结构</h1><p data-track='52'>新建一个.html文件，输入以下内容：</p><p data-track='53'><span style='color: #902000; --tt-darkmode-color: #FF673C;'><!DOCTYPE </span>html<span style='color: #902000; --tt-darkmode-color: #FF673C;'>></span><br><strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'><html</span></strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'> lang=</span><span style='color: #4070A0; --tt-darkmode-color: #4070A0;'>"zh-CN"</span><strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'>></span></strong><br><strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'><head></span></strong><br> <strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'><meta</span></strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'> charset=</span><span style='color: #4070A0; --tt-darkmode-color: #4070A0;'>"UTF-8"</span><strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'>></span></strong><br> <strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'><title></span></strong>我的第一个网页<strong><span style='color: #007020; --tt-darkmode-color: #4ED775;'>




步骤2：添加内容

在标签内，添加一些文本和结构：

欢迎来到我的主页！


这是一个简单的HTML示例页面。

步骤3：美化页面

虽然目前没有样式，但我们可以继续扩展功能。

我的兴趣爱好



  • 阅读

  • 编程

  • 旅行



<a href="about.html">了解更多关于我

步骤4：保存并查看

保存文件，使用浏览器打开即可看到效果。记住每次修改后都要重新加载页面。

总结与展望

通过这个简单的案例，我们了解了HTML的基本结构和常用标签。当然，这只是冰山一角，要真正掌握前端开发，还需要学习更多知识：

o CSS：美化网页样式，布局设计。

o JavaScript：实现动态交互功能。

o 框架技术：如React、Vue等，提升开发效率。

坚持练习，不断实践，你将能够打造属于自己的精彩网站！

相关推荐

一键生成高颜值图表!让你的文字瞬间有画面感，职场人必备!

哈喽，打工人们！忙碌的周中，大熊又来给你们带来一个超实用的效率神器啦！这次的宝藏网站绝对是那种用过就离不开的"真香"型产品！假设你明天就要做重要汇报，可面对一大堆密密麻麻的文字材料，你...

批量将 Word 转换为 PDF/Excel/Txt/图片等多种格式

Word文档是我们工作中经常会打交道的一种文档格式，我们也经常会有需要对Word文档进行格式转换的需求，比如将Word格式转换为PDF、将Word文档转换为Excel、将Word...

绝了!一键用AI生成高颜值动态PPT(附详细步骤+Prompt)

大家好，我是一名酷爱研究AI的产品经理，最近我有个新发现：那些花了你3天做出来的PPT，现在用AI可以1小时搞定！而且颜值还高！为什么AI做PPT比传统方式效率高10倍？我用一张图就能告诉你：AI生成...

ztext - 简单几行代码创建酷炫3D特效文字的开源JS库

把网页上的文字变成酷炫的3D风格，还能制作旋转动效，有了ztext.js，只需要几行代码。ztext能做什么ztext.js是一个能把常规的平面文字变成3D样式的前端开源代码库，让开发者...

文字内插入小图片，也太可爱了吧（文字中怎么插图片）

图文排版H5手机版秀米有小伙伴留言问添加图片的时候可不可以把图片添加到文字之间比如下面这句话中的小贴纸图片后面可以接着输入文字其实吧这就是咱们的『文字内插入小图片』功能嘛可以用来在文字内加个表情包又...

Linux环境下C++代码性能分析方法（linux怎么写c++代码）

技术背景在开发C++应用程序时，找出代码中运行缓慢的部分是进行性能优化的关键。在Linux系统上，有多种工具和方法可用于对C++代码进行性能分析，每种方法都有其特点和适用场景。实现步骤手动中断调试法在...

SVG互动图文，让你的文章更有趣!教你4种简单易学的黑科技玩法!

如果你是一个公众号创作者，那么你一定想知道如何让你的文章更加吸引人，更加有趣，更加有创意。你可能已经尝试过各种图文排版技巧，但是你是否知道，有一种黑科技可以让你的文章变得更加酷炫，更加互动，更加爆款？...

Videoscribe怎么实现实心中文汉字的手绘制作

很多朋友在制作手绘视频的时候，不知道怎么输入实心的中文汉字，之前我们已经给大家分享了怎么输入汉字的方法，但是有一点遗憾的是输出的汉字是空心的手绘展示，在视觉上并不是非常的美观。经过大家不断的探索，终于...

一款用于将文本转化成图表的现代化脚本语言

大家好，又见面了，我是GitHub精选君！今天要给大家推荐一个GitHub开源项目terrastruct/d2，该项目在GitHub有超过10.3kStar，用一句话介绍该项目就是：...

探秘 Web 水印技术（制作水印网站）

作者：fransli，腾讯PCG前端开发工程师Web水印技术在信息安全和版权保护等领域有着广泛的应用，对防止信息泄露或知识产品被侵犯有重要意义。水印根据可见性可分为可见水印和不可见水印（盲水印）...

不忍心卸载的五款神仙工具（不忍心卸载的五款神仙工具是什么）

001.效率工具uTools-装机必备的生产力工具集uTools是一款非常强大的可以装下几乎所有效率工具的电脑生产力工具集，目前拥有Windows、Mac和Linux三个版本。软件界面...

「SVG」飞花令!这份最高检工作报告“超有料”

原标题：【SVG】飞花令！这份最高检工作报告“超有料”栏目主编：秦红文字编辑：沈佳灵来源：作者：最高人民检察院...

svg|2025政府工作报告，有没有你关心的数据?

··<setattributeName="visibility"begin="click+0s"dur="1ms"fill="freeze"restart="never"to="hi...

videoscribe只能输入英文，如何输入中文文本?

videoscribe只能输入英文，如何输入中文文本？打开VideoScribe软件，打开要添加中文字体的位置。打开Photoshop并在文件中创建一个新的透明背景图层。注意：必须是透明背景层。...

五个流行的SVG在线编辑器（svg编辑工具）

随着响应网络的发展，越来越多的高质量的SVG在线编辑器被公众所熟知。SVG矢量图形也越来越受欢迎，以便在任何设备上呈现图像，甚至一些易于使用的SVG在线编辑器，可以替代PS，本文总结了五种流行的SVG...

一周热门
最近发表
标签列表