HTML 基础 (快速入门)详细步调和示例
目录创建基本的 HTML 文件
添加内容到页面
页面结构与链接
HTML（超文本标志语言）是构建网页的基础技术，以下是 HTML 基础的详细步调和示例：
创建基本的 HTML 文件
[*]步调一：新建文件
[*]在本地计算机上选择一个符合的文件夹，用于存放 HTML 文件。在该文件夹内，使用文本编辑器（如 Notepad++、Sublime Text、Visual Studio Code 等）创建一个新的文本文件。
[*]步调二：命名文件
[*]将文件保存为以.html为后缀的文件名，例如index.html。这个文件名就是你网页的文件名，后续可以通过欣赏器访问这个文件来查看网页效果。
[*]步调三：编写基本结构
[*]在文本编辑器中，输入以下 HTML 基本结构代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个HTML页面</title>
</head>
<body>
</body>
</html>
[*]<!DOCTYPE html>：这是 HTML5 的文档范例声明，告诉欣赏器该文件是一个 HTML5 文档。
[*]<html>标签：是 HTML 文档的根标签，所有其他 HTML 元素都包罗在这个标签内。lang="en"属性指定了文档的语言为英语，也可以根据现实环境设置为zh-CN等其他语言代码。
[*]<head>标签：包罗了关于 HTML 文档的元信息，如文档标题、字符编码、样式表链接等。这些信息不会直接显示在网页内容中，但对网页的准确显示和功能起着重要作用。
[*]<meta charset="UTF-8">：指定了文档的字符编码为 UTF-8，这样可以支持各种语言和特别字符的准确显示。
[*]<meta name="viewport" content="width=device-width, initial-scale=1.0">：用于设置网页的视口，确保网页在差别设备上能够准确适配和显示。
[*]<title>标签：界说了网页的标题，显示在欣赏器的标题栏或标签页上。
添加内容到页面
[*]步调四：添加标题和段落
[*]在<body>标签内，添加以下代码来创建标题和段落：
<body>
<h1>欢迎来到我的HTML页面</h1>
<p>这是一个简单的HTML页面示例，展示了HTML的基本用法。</p>
</body>
[*]<h1>标签：表示一级标题，HTML 还提供了<h2>到<h6>等差别级别的标题标签，用于表示文档中的差别层次结构。
[*]<p>标签：用于界说段落，其中的文本会在欣赏器中以段落的情势显示。
[*]步调五：添加列表
[*]可以在页面中添加无序列表或有序列表，示例代码如下：
<body>
<h1>欢迎来到我的HTML页面</h1>
<p>这是一个简单的HTML页面示例，展示了HTML的基本用法。</p>
<h2>水果列表</h2>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>
<h2>数字列表</h2>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
</body>
[*]<ul>标签：表示无序列表，其中的每个列表项使用<li>标签表示，在欣赏器中会以项目符号的情势显示。
[*]<ol>标签：表示有序列表，列表项会按照数字顺序进行编号。
页面结构与链接
[*]步调六：使用 div 进行结构
[*]<div>标签是一个常用的块级元素，用于对页面内容进行分组和结构。可以为<div>标签添加class或id属性，以便通过 CSS 样式来控制其样式和结构。示例代码如下：
<body>
<div id="header">
<h1>我的网站标题</h1>
</div>
<div class="content">
<p>这里是页面的主要内容区域。</p>
</div>
<div id="footer">
<p>版权所有 © 2025</p>
</div>
</body>
[*]步调七：添加链接
[*]使用<a>标签来创建链接，示例代码如下：
<body>
<p>这是一个简单的HTML页面示例，展示了HTML的基本用法。</p>
<p>访问 <a href="https://www.example.com">示例网站</a> 了解更多信息。</p>
</body>
[*]<a>标签的href属性指定了链接的目标地址，用户点击链接时，欣赏器会跳转到该地址。还可以使用target="_blank"属性让链接在新窗口中打开。
以上就是 HTML 基础的一些重要步调和示例，通过不停学习和实践，可以创建出更复杂、更雅观的网页。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]