目录
创建基本的 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>
- <body>
- <p>这是一个简单的HTML页面示例，展示了HTML的基本用法。</p>
- <p>访问 <a href="https://www.example.com">示例网站</a> 了解更多信息。</p>
- </body>
- <a>标签的href属性指定了链接的目标地址，用户点击链接时，欣赏器会跳转到该地址。还可以使用target="_blank"属性让链接在新窗口中打开。
以上就是 HTML 基础的一些重要步调和示例，通过不停学习和实践，可以创建出更复杂、更雅观的网页。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
