领先的免费Web技术教程，涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

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

nixiaole 2025-03-03 19:39:27 知识剖析 10 ℃

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

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

初识HTML

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

HTML的基本结构

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

html>
lang="zh-CN">

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">? 开始标签：<tagname></p><p data-track="17">? 结束标签：</tagname></p><p data-track="18">? 自闭合标签：<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">? src：指定图片的URL。</p><p data-track="24">? 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">? & 转换为 &</p><p data-track="31">? < 转换为 <</p><p data-track="32">? > 转换为 ></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">? <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">? <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">? <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">? <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">? <form>：表单容器，处理用户输入。</p><p data-track="47">? <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：美化页面

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

我的兴趣爱好



  • 阅读

  • 编程

  • 旅行



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

步骤4：保存并查看

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

总结与展望

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

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

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

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

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

Tags：

猜你喜欢

最近发表
标签列表