前端HTML基础知识
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.字符实体 特殊代码 了解使用 < 在页面中呈现 "<"使用 > 在页面中呈现 ">"使用 在页面中呈现一个空格使用 © 在页面中呈现版权符号"©"使用 ¥ 在页面中呈现人民币符号"￥"--><hello world><br>© ¥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列表标签
在网页中展示关联性的内容。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>运行结果：
5.3 定义列表
HTML定义列表用于展示一组术语及其对应的定义或描述。
- <dl>标签：定义了定义列表的整体结构，作为包含所有术语和描述的容器。 含<dt>和<dd>标签,以构成术语和其对应描述的组合。
- <dt>标签：用于标记术语或名词，是列表中需要解释或定义的项目。在定义列表中，<dt>标签表示每个术语项，可以有一个或多个对应的<dd>标签来提供相关的描述。
- <dd>标签：紧随<dt>标签之后，用于提供与之前的术语相关的详细说明或定义。每个术语可以有一个或多个描述，每个描述都使用<dd>标签标记。
<!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.定义列表 dl(标题) dt(需要解释的名词) dd(解释内容)<dl><dt>名词</dt><dd>解释</dd><dd>解释</dd></dl> --><dl>前端内容介绍<dt>HTML</dt><dd>超文本标记语言</dd><dd>创建网页结构</dd><dt>CSS</dt><dd>层叠样式表</dd><dd>设置网页样式</dd><dt>JavaScript</dt><dd>脚本语言</dd><dd>设置网页交互效果</dd></dl></body>
</html>运行结果：
5.4 列表的嵌套
以无序列表为例，<ul>标签中嵌套<ul>标签， 内层标签符号默认由实心圆变为空心圆。
<!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><!-- 无序列表的嵌套 --><h2>多个购物袋<ul><li>水果袋<ul><li>香蕉</li><li>苹果</li><li>梨</li></ul></li><li>蔬菜袋<ul><li>土豆</li><li>白菜</li><li>生菜</li></ul></li><li>零食袋<ul><li>饼干</li><li>薯片</li><li>面包</li></ul></li></li></ul></h2></body>
</html>运行结果：
