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

前端HTML基础知识

news 来源：原创 2025/5/2 6:22:29

1.HTML介绍

HTML(HyperText Markup Language，超文本标记语言)是构成网页的基本元素，是一种用于创建网页的标准化标记语言。HTML不是一种编程语言，而是一种标记语言，通过标签来描述网页的结构和内容。

超文本：超文本是指超越纯文本的文本，这意味着HTML不仅能包含文本，还能包含图片/表格/列表/链接/按钮等内容。

标记语言：HTML 使用**标签**来标记网页内容。不同的标签有不同的功能，学习HTML就是学习如何使用这些标签来构建网页。

标签：也称为标记或元素，用于在网页中标记和定义内容。每个标签有特定的语法和功能。标签的基本语法是使用尖括号包围标签名，标签名不区分大小写，推荐使用小写字母书写。标签通常分为双标签和单标签两类：

- 双标签(例如`<p></p>`)：用于定义一段内容，内容位于开始标签和结束标签之间。
- 单标签(例如`<img/>`)：用于定义单一的元素或属性，没有结束标签。

标签属性：每个属性都为标签添加了额外的信息或设置，让浏览器知道如何正确处理内容。属性书写在开始标签中，使用空格与标签名隔开，属性名与属性值之间用等号连接，属性值用引号括起来。例如图片标签：`<img src="image.jpg" alt="描述">`。

2.HTML基本框架

<!-- 输入！+Tab键，会自动生成<!DOCTYPE html>标签。 -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>
</body>
</html>

基本框架内容说明

<!DOCTYPE html>
<!-- 告诉浏览器 按照html5的文档规范去解析  --><html lang="en"><!-- 所有网页最大的结构 网页中所有的标签存放在html标签中 --><!-- lang属性可以帮助搜索引擎了解网页的主要语言，从而改善搜索结果的相关性。 --><!-- en为英文，zh-CN为中文 --><head>
<!-- 头部存放页面相关的关键配置或者引入资源--><meta charset="UTF-8"><!-- meta标签：提供有关页面的元信息，用来设置网页的基本信息 --><!-- charset：表示网页编码格式浏览器打开网页的时候会使用charset指定的编码读取整个HTML文
档 --><!-- 告诉浏览器使用utf-8编码 --><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 配置移动端信息 --><!-- viewport：用于控制网页在不同设备上的显示方式 --><!-- width=device-width：设置视口宽度为设备的宽度 --><!-- initial-scale=1.0：设置初始缩放比例为1.0 --><title>Document</title><!-- 网页标题名称，可自定义修改 -->
</head>
<body><!-- 自定义内容 -->
</body>
</html>

3.HTML文本标签

3.1 标题标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>基础标签</title>
</head>
<body>
<!-- 1.标题标签
用于定义不同级别的标题，通常用于网页的标题、章节标题等。
常见的标题标签有<h1>到<h6>，其中<h1>是最高级别的标题，<h6>是最低级别的标题。--><h1>这是一级标题</h1><h2>这是二级标题</h2><h3>这是三级标题</h3><h4>这是四级标题</h4><h5>这是五级标题</h5><h6>这是六级标题</h6></body>
</html>

运行结果：

3.2 段落标签

段落标签由开始标签<p>和结束标签</p> 组成，开始和结束标签之间的内容会被视为一个段落。段落与段落之间有一定的间距。这有助于使页面内容更易读，提升用户体验。段落标签会独占一整行的，在网页当中我们有单独显示的一行文字我们也是可以使用到p标签的。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>基础标签</title>
</head>
<body><!-- 2.段落标签
用于定义段落文本，通常用于网页的正文内容。
常见的段落标签有<p>，其中<p>用于定义一个段落。--><p>北国风光，千里冰封，万里雪飘。</p><!-- 添加换色与更改字体大小属性 --><p style="color: red;font-size: 20px;">望长城内外，惟余莽莽；大河上下，顿失滔滔。</p>
<!-- <span></span>更改部分字体属性 --><p>望长城内外，惟余莽莽；<span style="color: blue">大河上下</span>，顿失滔滔。</p></body>
</html>

运行结果：

3.3 其他标签


<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>基础标签</title>
</head>
<body><!-- 3.其他常用标签换行标签<br>粗体文本标签<b></b>和<strong></strong>(强调作用) 斜体文本标签<i></i>和<em></em>(强调作用)删除线标签<s></s>和<del></del>下划线标签<u></u>和<ins></ins>上标标签<sup></sup>和下标标签<sub></sub>--><p><i>北国风光</i>，<b>千里冰封</b>，<s>万里雪飘</s>。<u>望长城内外，惟余莽莽</u></p><p>H<sub>2</sub>O</p><!-- 定义一个水的化学式 --><p>x<sup>2</sup>+y<sup>2</sup>=1</p><!-- 定义一个单位圆 --></body>
</html>

运行结果：

4. HTML特殊标签

4.1 字符实体

在HTML书写某些特殊字符的时候，可能会遇到问题，比如要在网页里面显示出字符 < >，就有可能和我们的标签冲突，所以有些特殊字符需要用对应代替的写法（字符实体）表示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 1.字符实体  特殊代码  了解使用 &lt; 在页面中呈现 "<"使用 &gt; 在页面中呈现 ">"使用 &nbsp; 在页面中呈现一个空格使用 &copy; 在页面中呈现版权符号"©"使用 &yen; 在页面中呈现人民币符号"￥"-->&lt;hello world&gt;<br>&copy;&nbsp;&nbsp;&nbsp;&yen;648元</body>
</html>

运行结果：

4.2 容器标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 2.容器标签  div id属性补充:段落标签里面只能放span标签以其他文本标签,不能放段落标签,也不能放容器标签 !为什么用容器标签来做分区呢?div标签没有默认样式语义化标签:<main></main>       页面主要内容区域标签<footer></footer>   页面底部区域标签<nav></nav>         页面导航栏区域标签<header></header>      页面顶部区域标签--><div id="header">页面顶部区域</div><div id="main">页面中部区域</div><div id="footer">页面底部区域</div><p>我是第一个p标签</p><p>我是第二个p标签</p><!-- <p><div>错误写法</div></p> --><header><div><p></p></div></header><nav></nav><main></main><footer></footer></body>
</html>

运行结果：

4.3 图片标签

HTML使用 <img>入图片，img是image的简称。<img>是单标签，只包含属性，没有结束标签。通过标签属性来要图片在页面上显示。

属性注意点：

标签的属性写在开始标签内部
标签上可以同时存在多个属性
属性之间以空格隔开
属性之间没有顺序之分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 3.图片标签  img  单标签
src属性:图片路径,必须要填,图片的后缀也要写上   jpg,png,gif,webp....绝对路径:网络图片地址,从电脑盘符(c或者d盘)触发的一个完整路径   相对路径:./本层文件夹或者../ 
width 属性：图片宽度
height属性：图片高度
如果只设置一个,另一边会根据图片的宽高比自动进行缩放
alt属性:图片加载失败的提示文字信息
title属性:设置图片标题(鼠标悬浮式显示的文字)--><p>林丹照片</p><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.EQ2mZbBjqplkUZdbKMOKqgHaEH?w=322&h=180&c=7&r=0&o=5&dpr=2&pid=1.7" alt="" title="林丹照片"><!-- 绝对路径: --><img src="./img1/image.png" width="300px" alt="图片加载失败" title="超级丹">
<!-- 相对路径: --></body>
</html>

运行结果：

4.4 超链接标签

超链接(Hyperlink)通常简称为链接(Link)，是指从一个网页指向另一个目标的连接关系，这个目标可以是另一个网页，也可以是当前网页中的其它位置，还可以是图片、文件、应用程序等。链接的两端分别称为源锚点和目标锚点，通过点击源锚点即可以跳转到目标锚点。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 4.超链接标签  a 点击跳转href:要跳转到的地址target:指定打开方式取值:_self  在本页面打开_blank   在新窗口打开_new   打开一个新的窗口,并将当前窗口作为新窗口的父窗口-->
<a href="http://www.jd.com" target="_blank">京东一下</a>
<a href="http://www.baidu.com" target="_blank">百度一下</a><!-- 怎么让图片变成超链接:a标签把img标签包裹起来 <a href="跳转到的网址" target="跳转类型指令"><img src="需要点击的图片" width="300px" alt="图片加载失败" title="悬浮名"></a>--><a href="https://cn.bing.com/images/search?q=%e6%9e%97%e4%b8%b9&form=HDRSC2&first=1" target="_blank"><img src="https://tse3-mm.cn.bing.net/th/id/OIP-C.EQ2mZbBjqplkUZdbKMOKqgHaEH?w=322&h=180&c=7&r=0&o=5&dpr=2&pid=1.7" width="300px" alt="图片加载失败" title="超级丹"></a></body>
</html>

5. HTML列表标签

5.1 无序列表

HTML无序列表是用于组织并展示列表项，其中列表项的顺序不是特别重要，因此被称为“无序”列表。使用圆点、方块或其他符号来标记每个列表项。

<ul>标签：标识了无序列表的开始和结束。所有的列表项都应包含在这个标签内部。
<li>标签：代表单个列表项，这是构成无序列表的基础。每个<li>都会被自动添加一个标记，通常是一个圆点。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 无序列表  顺序不重要<ul><li></li></ul>样式属性   type:disc     默认,实心圆点circle   空心圆点square   实心方块none     不显示符号  --><h2>水果</h2><ul type="disc"><li>香蕉</li><li>苹果</li><li>梨</li><li>西瓜</li></ul></body>
</html>

运行结果：

5.2 有序列表

HTML有序列表用于组织一组需要按特定顺序展示的列表项，因此被称为“有序”列表。列表项前通常使用数字作为标记，表明各项的顺序。

<ol>标签：这个标签定义了有序列表的开始和结束，是创建有序列表的容器。所有需要按顺序展示的列表项都应该包含在这个标签内部。
<li>标签：代表有序列表中的单个列表项。与无序列表一样，每个列表项都使用 <li>标签来标记，但在有序列表中，每个<li>项前通常会自动添加一个数字，反映其在列表中的顺序。

在使用有序列表时，也应遵循将<li>标签直接嵌套在<ol>标签内的规范，以保持结构清晰和语义准确。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><!-- 有序列表   顺序很重要  ol  litype: 1  默认,数字a,A i,Inone--><h2>比赛排名</h2><ol type="1"><li>冠军</li><li>亚军</li><li>季军</li></ol></body>
</html>

运行结果：