HTML零基础入门详细教程

一花一world

已于 2023-06-08 22:21:32 修改

阅读量2.7k

点赞数

分类专栏：前端文章标签： html css 前端

于 2023-06-08 22:12:06 首次发布

本文链接：https://blog.csdn.net/ACCPluzhiqi/article/details/131116915

版权

前端专栏收录该内容

178 篇文章 28 订阅

订阅专栏

欢迎来到HTML的零基础入门教程。HTML是构建网页的基础，是Web开发的必备技能之一。在本教程中，我们将介绍HTML的基础知识，包括HTML的基本结构、标签、属性等内容。让我们开始吧！

1. HTML基本结构

HTML文档由标签（tag）和文本组成。标签用于描述文本的含义和结构，而文本则是标签所描述的内容。HTML文档的基本结构如下：

<!DOCTYPE html>
<html>
  <head>
    <title>页面标题</title>
  </head>
  <body>
    页面内容
  </body>
</html>

上面的代码是一个最简单的HTML文档。其中，<!DOCTYPE html>声明了文档类型，告诉浏览器这是一个HTML5文档。<html>标签是文档的根元素，包含了整个文档的内容。<head>标签用于定义文档的头部，包含了一些元数据和引用的外部资源。<title>标签定义了文档的标题，显示在浏览器的标签页上。<body>标签定义了文档的主体，包含了页面的内容。

2. HTML标签

HTML标签是用于描述文本的含义和结构的元素。HTML标签以<和>括起来，通常成对出现，有开始标签和结束标签。例如，<p>标签表示一个段落，它的开始标签是<p>，结束标签是</p>。在开始标签中，可以添加属性（attribute），用于描述标签的特性。例如，<a>标签表示一个链接，可以添加href属性来指定链接的地址。

下面是一些常用的HTML标签：

<h1>~<h6>：表示标题，从大到小依次排列。
<p>：表示段落。
<a>：表示链接。
<img>：表示图片。
<ul>和<li>：表示无序列表。
<ol>和<li>：表示有序列表。
<table>、<tr>、<th>和<td>：表示表格。
<form>、<input>和<button>：表示表单。

3. HTML属性

HTML属性是用于描述标签的特性的。属性通常包含一个名称和一个值，中间用等号连接。例如，<a href="https://www.google.com">Google</a>中的href是属性名称，https://www.google.com是属性值。不同的标签支持不同的属性，例如<a>标签支持href属性，<img>标签支持src和alt属性。

4. HTML注释

HTML注释用于在代码中添加注释，不会在浏览器中显示。注释以结尾。例如，表示一个注释。

5. HTML实例

下面是一个简单的HTML实例，展示了一些常用的标签和属性：

<!DOCTYPE html>
<html>
  <head>
    <title>我的网页</title>
  </head>
  <body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个段落。</p>
    <a href="https://www.google.com">Google</a>
    <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="W3Schools">
    <ul>
      <li>无序列表项1</li>
      <li>无序列表项2</li>
    </ul>
    <ol>
      <li>有序列表项1</li>
      <li>有序列表项2</li>
    </ol>
    <table>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
      </tr>
      <tr>
        <td>张三</td>
        <td>20</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>22</td>
      </tr>
    </table>
    <form>
      <label>用户名：</label>
      <input type="text" name="username">
      <label>密码：</label>
      <input type="password" name="password">
      <button type="submit">登录</button>
    </form>
  </body>
</html>

6.HTML语法规范

以上就是HTML的零基础入门教程，希望能对你有所帮助。如果你想深入学习HTML，可以继续学习HTML的语法、样式和脚本等内容。

HTML语法规范指的是HTML文件中各种标签、属性、元素的书写方式和使用规则，下面是HTML语法规范的一些基本要点：

HTML标签一般都是成对出现的，有开始标签和结束标签，如<p>和</p>。
HTML标签可以包含属性，属性一般是键值对的形式，如<img src="image.jpg" alt="图片">。
HTML标签和属性的名称不区分大小写，但是建议使用小写。
HTML文档必须包含<!DOCTYPE>声明，用于指定HTML版本和文档类型。
HTML文档必须包含<html>标签，所有的HTML标记都应该在<html>和</html>之间。
HTML文档必须包含<head>标签和<body>标签，<head>标签中一般包含文档的元数据，而<body>标签中包含文档的主要内容。
在HTML中，空格和换行符不会影响页面的呈现效果，但是可以提高代码的可读性。
在HTML中，可以使用注释来对代码进行说明，注释的格式为。
在HTML中，可以使用特殊字符实体来表示一些特殊符号，如<表示小于号<，>表示大于号>，&表示&符号等。

以上是HTML语法规范的一些基本要点，需要注意的是，HTML语法规范是不断发展和变化的，建议开发者时刻关注最新的HTML规范。

7.超链接标签

超链接标签是HTML中最常用的标签之一，它可以创建一个指向其他网页、文件、位置、电子邮件地址或任何其他URL的链接。超链接标签使用<a>标签来定义，其中href属性指定了链接的目标地址。

下面是一个基本的超链接标签的例子：

<a href="https://www.example.com">点击这里</a>

上面的代码创建了一个指向https://www.example.com的链接，链接的文本是“点击这里”。当用户点击链接时，浏览器将会跳转到指定的URL。

除了指向URL，超链接标签还可以指向页面内的位置（锚点）或其他文件。例如，下面的代码创建了一个指向页面内的锚点的链接：

<a href="#section1">跳转到第一部分</a>

在这个例子中，href属性的值是一个以#开头的锚点名称，浏览器会跳转到页面中具有该名称的元素（例如一个<div>）。

超链接标签还可以包含其他HTML元素，例如文本、图像和按钮。例如，下面的代码创建了一个包含图像的链接：

<a href="https://www.example.com">
  <img src="image.jpg" alt="图片">
</a>

在这个例子中，链接的文本是一个图像，当用户点击图像时，浏览器将会跳转到指定的URL。

8.图像标签和路径

图像标签是HTML中用于显示图像的标签，通常使用<img>标签来创建。<img>标签是一个空标签，没有闭合标签，它有以下属性：

src：指定图像的路径，可以是相对路径或绝对路径。
alt：指定图像的替代文本，当图像无法显示时，将显示替代文本。
width：指定图像的宽度，可以是像素值或百分比。
height：指定图像的高度，可以是像素值或百分比。

下面是一个示例代码，演示如何使用<img>标签来显示图像：

<!DOCTYPE html>
<html>
  <head>
    <title>图像标签示例</title>
  </head>
  <body>
    <h1>欢迎使用图像标签示例</h1>
    <img src="images/logo.png" alt="Logo" width="200" height="100">
  </body>
</html>

在上述示例中，<img>标签的src属性指定了图像的路径，alt属性指定了替代文本，width和height属性指定了图像的宽度和高度。

关于图像路径，有以下几种方式：

相对路径：相对于当前HTML文件的路径。例如，如果图像文件与HTML文件在同一目录下，可以使用src="logo.png"指定相对路径。
绝对路径：相对于网站根目录的路径。例如，如果图像文件位于网站根目录下的images目录中，可以使用src="/images/logo.png"指定绝对路径。
完整路径：包含协议、域名和路径的完整URL。例如，可以使用src="http://example.com/images/logo.png"指定完整路径。

需要注意的是，如果使用相对路径，需要确保图像文件与HTML文件在同一目录下或在正确的目录下。

9.文本格式化标签

文本格式化标签是HTML中用于对文本进行格式化的标签，可以使文本显示更加美观、易读。常用的文本格式化标签包括：

<b>标签：用于加粗文本。

<p>这是一段<b>加粗</b>的文本。</p>

<i>标签：用于斜体文本。

<p>这是一段<i>斜体</i>的文本。</p>

<u>标签：用于下划线文本。

<p>这是一段<u>下划线</u>的文本。</p>

<s>标签：用于删除线文本。

<p>这是一段<s>删除线</s>的文本。</p>

<sub>标签：用于下标文本。

<p>这是一段化学式：H<sub>2</sub>O。</p>

<sup>标签：用于上标文本。

<p>这是一段数学公式：x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup>。</p>

<code>标签：用于代码文本。

<p>这是一段代码：<code>print("Hello, World!")</code>。</p>

<pre>标签：用于预格式化文本，保留空格和换行符。

<pre>
这是一段预格式化文本，
    保留空格和换行符。
</pre>

需要注意的是，这些标签只是用于格式化文本的辅助手段，应该根据具体情况合理使用，不要滥用。同时，为了提高网页的可访问性，应该避免使用纯样式标签（如<b>、<i>、<u>等），而应该使用CSS样式来实现文本格式化。

10.换行标签