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

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

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

从零开始搭建第一个网页：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等，提升开发效率。

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

相关推荐

Django零基础速成指南:快速打造带用户系统的博客平台

#python##服务器##API##编程##学习#不是所有教程都值得你花时间！这篇实战指南将用5分钟带你解锁Django核心技能，手把手教你从零搭建一个具备用户注册登录、文章管理功能的完整...

iOS 17.0 Bootstrap 1.2.9 半越狱来啦!更新两点

这款Bootstrap半越狱工具终于更新，离上一次更新已相隔很久，现在推出1.2.9版本，主要为内置两点功能进行更新，也是提升半越狱的稳定性。如果你正在使用这款半越狱工具的，建议你更新。注意！...

iOS 16.x Bootstrap 1.2.3 发布，支持运行清理工具

本文主要讲Bootstrap半越狱工具更新相关内容。如果你是iOS16.0至16.6.1和17.0系统的，想体验半越狱的果粉，请继续往下看。--知识点科普--Bootstrap...

SpringBoot整合工作流引擎Acticiti系统，适用于ERP、OA系统

今日推荐：SpringBoot整合工作流引擎Acticiti的源码推荐理由：1、SpringBoot整合工作流引擎Acticiti系统2、实现了三级权限结构3、持久层使用了mybatis框架4、流程包...

SpringCloud自定义Bootstrap配置指南

在SpringCloud中自定义Bootstrap配置需要以下步骤，以确保在应用启动的早期阶段加载自定义配置：1.添加依赖（针对新版本SpringCloud）从SpringCloud2020...

Python使用Dash开发网页应用(三)（python网页开发教程）

PlotlyDash开发Web应用示例一个好的网页设计通常都需要编写css甚至js来定制前端内容，例如非常流行的bootstrap框架。我们既然想使用Dash来搭建web应用，很大的一个原因是不熟悉...

Oxygen XML Editor 27.1 中的新功能

OxygenXMLEditor27.1版是面向内容作者、开发者、合作者和出版商的行业领先工具包的增量版本。在27.1版本中，AIPositronAssistant得到了增强，包括用于...

【LLM-多模态】Mini-Gemini:挖掘多模态视觉语言模型的潜力

一、结论写在前面论文提出了Mini-Gemini，一个精简而强大的多模态VLM框架。Mini-Gemini的本质在于通过战略性框架设计、丰富的数据质量和扩展的功能范围，发掘VLM的潜在能力。其核心是补...

谐云课堂 | 一文详解分布式改造理论与实战

01微服务与分布式什么是分布式？首先，我们对上图提到的部分关键词进行讲解。单体，是指一个进程完成全部的后端处理；水平拆分，是同一个后端多环境部署，他们都处理相同的内容，使用反向代理来均衡负载，这种也叫...

基于Abaqus的手动挡换挡机构可靠性仿真

手动挡，也称手动变速器，英文全称为Manualtransmission，简称MT，即用手拨动换挡操纵总成才能改变变速器内的齿轮啮合位置，改变传动比，从而达到变速的目的。家用轿车主要采用软轴连接的换挡...

【pytorch】目标检测:彻底搞懂YOLOv5详解

YOLOv5是GlennJocher等人研发，它是Ultralytics公司的开源项目。YOLOv5根据参数量分为了n、s、m、l、x五种类型，其参数量依次上升，当然了其效果也是越来越好。从2020...

超实用!50个非常实用的PS快捷键命令大全分享

今天，给大家介绍50个非常实用的快捷键命令大全，大家伙都是设计师，关于软件使用那是越快越好啊。一、常用的热键组合1、图层混合模式快捷键：正常(Shift+Option+N)，正片叠底(Shif...

Pohtoshop中深藏不露的小技巧（科目一考试技巧记忆口诀看完必过）

邢帅教育ps教程为大家总结了一些Pohtoshop中深藏不露的小技巧，可以帮助到大家在设计时减少不必要的麻烦，提高工作效率哦~~~1.设置网格线保持像素完美不在1:1分辨率下也能保持像素完美，可以...

Ganglia监控安装总结（监控安装工作总结）

一、ganglia简介：Ganglia是一个跨平台可扩展的，高性能计算系统下的分布式监控系统，如集群和网格。它是基于分层设计，它使用广泛的技术，如XML数据代表，便携数据传输，RRDtool用于数据...

谁说Adobe XD做不出好看的设计?那是你没搞懂这些功能

AdobeXD的美化栏具有将设计视图美化的功能，它能使界面设计和原型设计更漂亮、更吸引眼球。美化栏的7个功能包括竖线布局设计、横线布局设计、重复网格、图形大小和位置设置、响应式调整大小、文字美化以及...

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