当前位置：首页 > news >正文

前端 - - - html 基础

news 2025/9/8 9:27:33

HTML是网页的基础，负责构建页面的结构，语法简单直观，非常适合入门。

什么是HTML？

HTML（HyperText Markup Language，超文本标记语言）是用来描述网页的一种语言。它不是编程语言，而是一种标记语言，通过各种标签来定义网页的不同部分。

HTML的基本结构

每个HTML文件都有固定的基本结构，就像盖房子需要先搭好框架：

<!DOCTYPE html>
<html><head><!-- 头部：存放网页的元信息，不直接显示在页面上 --><meta charset="UTF-8"><title>网页标题</title></head><body><!-- 身体：存放网页的所有可见内容 -->这里是网页显示的内容...</body>
</html>

<!DOCTYPE html>：声明这是一个HTML5文档（必须放在最开头）
<html>：根标签，所有内容都要放在这个标签里
<head>：头部标签，包含网页的元数据（如标题、编码等）
<meta charset="UTF-8">：指定字符编码为UTF-8，确保中文正常显示
<title>：定义网页标题，显示在浏览器的标签栏上
<body>：主体标签，所有可见内容（文字、图片、链接等）都放在这里

常用HTML标签（必学）

1. 标题标签：`` 到 `<h6>`

用于定义不同级别的标题，<h1>最大，<h6>最小：

<h1>一级标题（最重要）
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题（最小）</h6>

2. 段落标签：`<p>`

用于定义段落，会自动在段落前后添加空行：

<p>这是第一个段落。HTML的段落标签会自动处理换行和间距。</p>
<p>这是第二个段落。每个p标签都是一个独立的段落。</p>

3. 链接标签：`<a>`

用于创建超链接，可跳转到其他网页或页面内的位置：

<!-- 跳转到其他网站 -->
<a rel="nofollow" href="https://www.baidu.com">百度一下</a><!-- 跳转到本地页面（同一文件夹下的other.html） -->
<a rel="nofollow" href="other.html">查看其他页面</a><!-- 在新窗口打开链接 -->
<a rel="nofollow" href="https://www.example.com" target="_blank">在新窗口打开</a>

href：必须属性，指定链接的目标地址
target="_blank"：可选属性，让链接在新窗口打开

4. 图片标签：`<img>`

用于在网页中插入图片，是单标签（没有结束标签）：

<!-- 插入网络图片 -->
<img src="https://picsum.photos/400/300" alt="风景图片"><!-- 插入本地图片（同一文件夹下的image.jpg） -->
<img src="image.jpg" alt="本地图片">

src：必须属性，指定图片的路径（网络地址或本地路径）
alt：必须属性，当图片无法加载时显示的文字，也有助于搜索引擎理解图片内容

5. 列表标签

有两种常用列表：无序列表（带圆点）和有序列表（带数字）

<!-- 无序列表：<ul> + <li> -->
<h4>我的爱好：</h4>
<ul><li>看书</li><li>编程</li><li>运动</li>
</ul><!-- 有序列表：<ol> + <li> -->
<h4>学习步骤：</h4>
<ol><li>学习HTML</li><li>学习CSS</li><li>学习JavaScript</li>
</ol>

6. 容器标签：`<div>` 和 `<span>`

用于对内容进行分组，方便后续用CSS设置样式或用JS操作：

<div>：块级容器，独占一行，常用于分组大块内容
<span>：行内容器，不独占一行，常用于包裹段落中的部分文字

<div><h3>这是一个div容器</h3><p>div容器可以包含多个标签，自己独占一行</p>
</div><p>这是一段文字，<span>这里用span包裹了部分文字</span>，span不会换行</p>

7. 换行标签：`<br>`

用于强制换行（单标签）：

<p>这是第一行<br>这是第二行（通过br标签强制换行）</p>

8. 水平线标签：`<hr>`

用于插入一条水平线，分隔内容（单标签）：

<h3>第一部分内容</h3>
<p>这是第一部分的描述...</p><hr> <!-- 水平线 --><h3>第二部分内容</h3>
<p>这是第二部分的描述...</p>

动手实践：制作第一个HTML页面

复制下面的代码，保存为myfirstpage.html（注意文件后缀必须是.html），然后双击文件用浏览器打开：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>我的第一个HTML页面</title>
</head>
<body>欢迎来到我的网页<p>大家好，这是我用HTML制作的第一个网页！</p><hr><h2>我的基本信息</h2><p>姓名：小明</p><p>年龄：20岁</p><p>爱好：</p><ul><li>编程</li><li>看电影</li><li>旅行</li></ul><h2>我的照片</h2><img src="https://picsum.photos/500/300" alt="我的照片"><p>想了解更多？<a rel="nofollow" href="https://www.example.com" target="_blank">访问我的主页</a></p>
</body>
</html>