百度360必应搜狗淘宝本站头条
HTML5 标签标签HTML5 标签 (已废弃)HTML 简介键盘快捷键
当前位置：网站首页 > 技术文章 > 正文

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

zhezhongyun 2025-03-06 21:57 35 浏览

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

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

相关推荐

用豆包生成的BMI计算器（豆包的热量是多少?）

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8&#...

Android 开发中文引导-应用小部件

应用小部件是可以嵌入其它应用（例如主屏幕）并收到定期更新的微型应用视图。这些视图在用户界面中被叫做小部件，并可以用应用小部件提供者发布。可以容纳其他应用部件的应用组件叫做应用部件的宿主（1）。下面的截...

Qt推流(视频文件/视频流/摄像头/桌面转流媒体rtmp+hls+webrtc)

一、前言说明推流直播就是把采集阶段封包好的内容传输到服务器的过程。其实就是将现场的视频信号从手机端，电脑端，摄影机端打包传到服务器的过程。“推流”对网络要求比较高，如果网络不稳定，直播效果就会很差，观...

一看就会!谷歌广告转化跟踪详细设置指南来了

在出海推广业务中，投放广告最常见的目的是获取订单，但我们怎么知道有没有达成投放目的呢？谷歌转化跟踪技术就可以做到！熟悉谷歌的卖家朋友都知道，转化跟踪在最近几年变得越来越复杂了，虽然有很多选项可以自定义...

Android原生编解码接口MediaCodec详解

作者：躬行之MediaCodec是Android中的编解码器组件，用来访问底层提供的编解码器，通常与MediaExtractor、MediaSync、MediaMuxer、MediaCrypt...

手把手搭建RTSP流媒体服务器（rtsp 流媒体）

0.引言本文主要讲解如何搭建RTSP流媒体服务器的过程，使用开源项目ZLMediaKit。通过这个开源项目，推RTSP流到服务器，然后拉流端可以拉取RTSP、RTMP等流。ZLMediaKit码云链接...

MediaInfo 24.04.0 是一个关于多媒体文件的信息提供工具

MediaInfo24.04.0是一个关于多媒体文件的信息提供工具（仅当文件中包含信息时才提供）：包括常规信息（标题、作者、导演、专辑、曲目编号、日期、时长等）；视频信息（编解码器、画面比例、帧率...

rmvb格式视频怎么打开，rmvb转MP4认准这个方法

　一、rmvb是什么格式？　　RMVB是一种视频文件格式，其中的VB指的是可变比特率。比起上一代的RM格式，RMVB　　格式的画面比较清晰，因为它是降低了静态画面下的比特率。　　二、制作rmvb　　①...

教你用Plex Media Server，把铁威马变成你的“私人好莱坞”!

TNAS（铁威马NAS）中可以安装多媒体服务器、影视、PlexMediaServer、EmbyServer作为个人媒体服务器使用。PlexMediaServer可以组织整理TNAS上的媒体...

你肯定用过!经典Windows软件被抛弃

Windows系统这些年持续更新的过程中，不断融入新的软件和功能的同时，一些经典的应用也渐渐成为了历史……Windows媒体播放器被抛弃Windows系统不断地推陈出新，一些老旧的组件也难免被抛弃，在...

博思得Q8标签打印全能手（博思得标签打印机安装教程）

2014-12-0905:35:00作者：宋达希【中关村在线办公打印频道原创】服装吊牌、洗涤标签、产品说明标签等都要用到标签打印机，这些标签涵盖多种尺寸的长度和宽度以及材质。另外作为一件商品或者产...

flv文件用什么播放器打开，这样做不踩雷!

FLV是FLASHVIDEO的简称，是随着FlashMX的推出发展而来的视频格式。它的出现有效地解决了视频文件导入Flash后，使导出的SWF文件体积庞大，不能在网络上很好的使用等问题。一、...

media player怎么转换格式?音频转换神器推荐!

Windowsmediaplayer怎么转换格式？WindowsMediaPlayer是微软公司出品的一款多媒体播放器，通常简称“WMP”。提供了编辑音频和视频文件的功能。用户可以使用该软件导...

视频参数检查工具更新:MediaInfo 23.10

MediaInfo提供有关视频或音频文件的技术和标签信息。信息示例包括编解码器、比特率、每秒帧数、宽度、高度、频道数、持续时间、标题、作者、字幕语言和章节名称。多种方式可以查看信息（文本、工作表、树和...

多媒体管理软件:JRiver Media Center 31.0.68 (64位)

JRiverMediaCenter64位是适用于大量库的完整媒体解决方案。它组织、播放和标记所有类型的媒体文件，并对Xbox、PS3、UPnP、DLNA和TiVo进行翻录、刻录。JRiverM...

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