【3.0】HTML基础
【一】HTML简介
【1】什么是HTML
超文本标记语言
如果想要让浏览器能够渲染出写的页面，都必须遵从HTML语法
我们浏览器看到的页面，内部其实都是HTML代码(所有的网站内部都是HTML代码)
【2】最基础的页面
上述语法就是HTML 用于构建网页的骨架(所有的网页都是由HTML组成)
【3】总结
HTML就是书写页面的一套标准
【二】HTML中的注释语法
由于HTML代码非常杂乱无章且非常多，所以我们习惯性的用注释来划分区域方便后续的查找
【1】单行注释
【2】多行注释
【三】HTML的文档结构
【1】基础结构
注意：HTML代码是没有格式的，可以全部写在一行，只不过我们习惯了缩进来表示代码
【2】基本结构
HTML的文档结构通常遵循以下基本结构
首先， 声明定义了当前文件是一个 HTML 文件。
接下来是 标签，它是整个 HTML 文档的根元素。
在 标签之内，有两个主要的部分： 和 。
<head> 用于定义文档的头部信息，其中可以包含一些重要的元素
例如 <title> 设置页面标题，<meta> 设置字符编码、关键词等。
这些元素通常不会展示在浏览器中，而是提供一些关于页面的描述和配置。
<body> 则包含了整个页面的可见内容
例如段落、标题、图像、链接等。
这些元素将直接影响和呈现到用户所看到的页面上。
需要注意的是，HTML 的标签是有层级关系的，内部的标签必须位于外部标签的范围之内，无法单独存在。
【四】HTML标签的分类
根据标签的闭合情况，可以分为单标签和双标签
【1】双标签
有头有尾
内容写在中间
【2】单标签(自闭标签)
标签自己闭合，不需要另一半标签
【五】head常用标签
【1】title
标题标签
控制网页小标题
【2】style
内部用来书写CSS代码
【3】script
内部用来书写JS代码(可以引入外部JS文件)
【4】link
引入外部CSS文件
【5】meta
（1）介绍
<meta>标签是一种HTML标签，用于在网页中提供元数据（metadata）。
<meta>标签是一种HTML标签，用于在网页中提供元数据（metadata）。
元数据是描述数据的数据，它们提供关于网页内容、字符集、作者、关键字等信息，帮助搜索引擎和浏览器理解和处理网页。
（2）常见的<meta>标签
<meta charset="字符集">：
指定网页文档使用的字符集，常见的字符集有UTF-8、ISO-8859-1等。
<meta name="viewport" content="viewport设置">：
用于指定网页在移动设备上的视口（viewport）设置，包括网页的宽度、初始缩放比例等。
<meta name="keywords" content="关键词">：
用于指定网页的关键词，帮助搜索引擎判断网页的相关性。
<meta name="description" content="网页描述">：
用于提供对网页内容的简要描述，显示在搜索结果页面中作为网页摘要。
<meta name="robots" content="指令">：
指定搜索引擎对网页的索引和抓取规则，如通过"noindex"禁止索引网页。
<meta http-equiv="参数" content="内容">：
用于设置HTTP响应头信息
如<meta http-equiv="refresh" content="5;url=http://example.com/">可在5秒后自动跳转到指定地址。
<meta>标签通常放置在HTML文件的<head>标签内，起到提供关于网页的元数据的作用。
正确使用<meta>标签可以优化网页的SEO、改善用户体验以及与搜索引擎的交互。
【六】body常用标签
【1】<h1>
级别标题标签
用于显示网页标题的级数(1-6级)
【2】<b>
加粗文字
【3】<i>
斜体
【4】<u>
下划线
【5】<s>
删除线
【6】<p>
段落标签
一个 p 标签就是一行
【7】br
换行
【8】hr
水平分割线
【小结】常用的<body>标签
在HTML中，<body>标签是用来定义页面的主体内容的。
它是HTML文档的必需标签之一，包围了展示在浏览器窗口中的实际内容。
<h1>到<h6>：这些标签用于定义标题的级别，<h1>表示最高级别的标题，<h6>表示最低级别的标题。
<p>：该标签用于定义段落，在网页中呈现一段文本。
<a>：用于创建一个超链接，可以使用户点击链接跳转到其他页面或下载文件。
<img>：用于在网页中插入图像，可以通过指定图像的URL来显示图片。
<ul>和<li>：这些标签用于创建无序列表，其中<ul>定义列表，而<li>定义每个列表项。
<ol>和<li>：这些标签用于创建有序列表，其中<ol>定义列表，而<li>定义每个列表项。
<div>：该标签可以用来将文档分成逻辑部分或组合内容。
<span>：该标签用来对文本进行样式化或划定特定区域，通常与CSS一起使用。
<table>、<tr>和<td>：这些标签用于创建表格，其中<table>定义整个表格，<tr>定义表格的行，<td>定义表格的单元格。
<form>：用于创建一个表单，用户可以在表单中输入信息并提交。
【七】标签的分类
HTML中的标签可以分为两种主要类型：块级标签和行内标签。
【1】块级标签（Block-level elements）
（1）介绍
块级标签是指一类会独自占据一行的HTML元素。
它们从新的一行开始，直到遇到下一个块级标签或行内标签。
块级标签通常用于组织和结构化页面的不同部分，并且可以包含其他块级元素和行内元素。
（2）常见的块级标签
<div>：用于定义文档中的一个区域或一个区块。
<p>：用于定义段落。
<h1>-<h6>：用于定义标题的级别。
<ul>：用于创建无序列表。
<ol>：用于创建有序列表。
<table>：用于定义表格。
【2】行内标签（Inline elements）
（1）介绍
行内标签是指在一行内显示的HTML元素，它们不会打断当前行并且只占据所需的内容宽度。
行内标签通常用于插入和标记文本中的小片段或注释，并且不能包含块级元素，只能包含其他行内元素。
（2）常见的行内标签
<span>：用于对文本的某个部分进行样式化或划定特定区域。
<a>：用于创建超链接。
<strong>：使文本加粗显示。
<em>：使文本斜体显示。
<img>：用于插入图像。
<br>：用于换行。
（3）补充
需要注意的是，HTML5中引入了一些新的标签和元素，它们的性质可能介于块级和行内之间，被称为块级行内元素（block-level inline element）或行内块级元素（inline block-level element）
如 <button>、<input> 等，其具体表现取决于CSS的属性和样式。
【3】总结
块级标签可以修改长度，行内标签不可以，修改了也不会发生变化
块级标签内部可以嵌套任意的块级标签和行内标签
但是 p 标签虽然是块级标签，但是他只能嵌套行内标签不能嵌套块级标签
如果套用这个，浏览器也会帮助处理，有报错，用户也感觉不到
小结
只要是块级标签都可以嵌套任意块级标签和行内标签(P标签除外)
行内标签不能嵌套块级标签 可以嵌套行内标签
【八】特殊符号
【1】空格
【2】大于号>
【3】小于号<
【4】&符&
【5】￥符¥
【6】版权©
【7】商标®
【小结】
特殊符号是指在文本中使用的一些非常规字符，这些字符通常不直接出现在键盘上，需要通过特定的键盘组合或者字符实体来输入。以下是一些常见的特殊符号及其对应的表示方法：
版权符号：©，表示方法为© 或者 ©。
注册商标符号：®，表示方法为® 或者 ®。
商标符号：™，表示方法为™ 或者 ™。
惊叹号：！，直接输入"!" 即可。
问号：？，直接输入"?" 即可。
减号：-，直接输入 "-" 即可。
加号：+，直接输入 "+" 即可。
百分号：%，直接输入 "%" 即可。
等于号：=，直接输入 "=" 即可。
乘号：×，表示方法为 × 或者 ×。
除号：÷，表示方法为÷ 或者 ÷。
分号：；，直接输入";" 即可。
冒号：：，直接输入":" 即可。
单引号：'，直接输入"'" 即可。
双引号："，直接输入 """ 即可。
【九】常用标签
【1】div标签
它是最常见的HTML容器标签，用于将文档分隔成独立的区块。
Div标签可以用来包裹其他标签，通过设置样式来控制其中内容的布局和外观。
它没有具体的语义含义，常用于定义页面的整体结构或划分不同的内容区域。
【2】span标签
它是一个内联元素，主要用于对文本或一小段文本进行样式上的控制。
Span标签通常用于对特定部分进行样式修饰或添加特殊效果
例如修改文字颜色、加粗、斜体等，或者配合CSS实现一些交互效果。
与Div标签不同，Span标签没有具体的语义意义，更多地用于样式上的调整。
在构造初期最常使用，页面的布局一般先用div和span占位后再去调整样式，尤其是div使用最为频繁
可以把div标签看成一块区域
也就意味着div标签来提前规划所有的区域。之后再向该区域内填写内容即可
普通的文本先用span占位
然后再去装饰页面
【3】img标签
图片标签
src
存放图片的路径(可以是本地也可以是网页链接)
alt
当图片加载不成功时，加载出的图片描述性信息
title
当鼠标悬浮在图片上面之后，自动展示图片信息
height/width
高度和宽度
当你在调整其中一个参数时，另一个参数也会等比例缩放
当在调整两个参数而不考虑比例时，就会造成图片的失真
【4】a标签
链接标签
href
指定 url 用户点击该链接就会跳转到目标链接
当 a 标签指定的网址从来没有被点击过，那么a标签的字体颜色就是蓝色
当 a 标签指定的网址从来被点击过后，那么a标签的字体颜色就是紫色
可以放其他标签的id值，点击即可跳转到对应的标签位置
target
_self
默认 a 标签是在当前页面完成跳转
_blank
跳转到新建的标签页
a标签的锚点功能
比如点击一个文本标题，自动跳转到标题对应的区域
【5】总结
Div标签用于对页面进行布局和结构划分
而Span标签则更多地用于对文字或一小段文本进行样式控制。
根据需要，可以通过设置不同的class或id来给这些标签添加样式，并使用CSS来对其进行进一步的控制和美化。
【十】标签的两个重要属性
【1】id值
是类似于标签的唯一标识符，用于在同一个页面上唯一标识一个特定的元素。
每个id值在整个文档中都必须是唯一的，不能重复使用。
通过id值，我们可以在JavaScript或CSS中引用特定标签，并对其进行操作或样式化。
类似于标签的身份证号，在同一个页面上id值不能重复
【2】class值
一个HTML标签可以具有多个class值，这样可以将多个不同的样式或行为应用于同一个标签。
多个class值之间使用空格分隔。
通过class值，我们可以定义一组相关的样式或行为，并将其应用于多个标签，实现代码的重用和简化。
类似于面向对象中类的继承，一个class可以继承多个class值
【十一】列表标签
【1】无序列表
HTML
复制代码
1
2
3
4
5
6
<ul>
<li>第一项</li>>
<li>第二项</li>>
<li>第三项</li>>
<li>第四项</li>>
</ul>
Plain Text
复制代码
1
2
3
4
第一项
第二项
第三项
第四项
无序列表是使用频率最高的列表标签
虽然ul标签很难看，但是只要是排版一直的几行数据基本上用的都是ul标签
【2】有序列表
HTML
复制代码
1
2
3
4
5
6
<ol>
<li>第一项</li>>
<li>第二项</li>>
<li>第三项</li>>
<li>第四项</li>>
</ol>
自动为每一行加顺序
【3】标题列表
HTML
复制代码
1
2
3
4
5
6
7
8
9
10
<dl>
<dt>标题一</dt>
<dd>内容一</dd>
<dt>标题二</dt>
<dd>内容二</dd>
<dt>标题三</dt>
<dd>内容三</dd>
<dt>标题四</dt>
<dd>内容四</dd>
</dl>
可以用来做多级目录
