HTML（一） -- 基本标签

1. 文档类型声明标签

2. lang语言种类

4. 常用标签

4.1 标题标签

4.2 段落标签

4.3 字体标签

4.4 水平线标签

4.5 换行标签

4.6 文本格式化标签

4.7 div与span标签

4.8 img图像标签

小拓展：（重点记忆）

4.9 超链接标签

4.10 描点链接

4.11 注释

5. 列表设计

5.1 有序列表

5.2 无序列表

5.3 自定义列表

6. 特殊字符

1. 文档类型声明标签

<!DOCTYPE> 文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页。
这句代码的意思是: 当前页面采取的是 HTML5 版本来显示网页.

注意:
	1. <!DOCTYPE> 声明位于文档中的最前面的位置，处于 <html> 标签之前。

	2. <!DOCTYPE>不是一个 HTML 标签，它就是 文档类型声明标签。

2. lang语言种类

用来定义当前文档显示的语言。

1. en定义语言为英语

2. zh-CN定义语言为中文

简单来说,定义为en 就是英文网页, 定义为 zh-CN 就是中文网页

其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文

这个属性对浏览器和搜索引擎(百度.谷歌等)还是有作用的

3. 字符集

字符集 (Character set)是多个字符的集合。以便计算机能够识别和存储各种文字。

在<head>标签内，可以通过<meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。

charset 常用的值有：GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所有国家需要用到的字符.

上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用“UTF-8”编码，尽量
统一写成标准的 "UTF-8"，不要写成 "utf8" 或 "UTF8"。

4. 常用标签

4.1 标题标签

为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题，即<h1> -> <h6> 。

特点：
1. 加了标题的文字会变的加粗，字号也会依次变大。
2. 一个标题独占一行。

4.2 段落标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，<p>标签用于定义段落，它可以将整个网页分为若干个段落。
具体实现：
<p> 我是一个段落标签 </p>
特点：
1. 文本在一个段落中会根据浏览器窗口的大小自动换行。
2. 段落和段落之间保有空隙。

4.3 字体标签

HTML 中的 <font> 标签（字体标签）用于设置文本的字体、大小、颜色等样式。使用该标签的语法如下：
<font face=“楷体” size=“5” color=“#ffc0cb”>欢迎来到java世界！</font>
该标签需要设置 size 和 color 属性。

其中：

- size 属性用于设置字体大小，可选的值有 1 至 7，其中 1 是最小的，7 是最大的。

- color 属性用于设置字体颜色，可选的值有颜色名称、RGB 等。

- face 属性用来设置字体的样式。

以下是一个例子，展示如何使用 <font> 标签设置文本样式：
<p>
  <font size="4" color="red">This text is red and size 4.</font><br>
  <font size="3" color="blue">This text is blue and size 3.</font><br>
  <font size="2" color="green">This text is green and size 2.</font><br>
</p>
以上代码将会在浏览器中显示一个段落，其中包含了三个 <font> 标签。

第一个标签将文本字体设置为红色，字体大小为 4，

第二个标签将文本字体设置为蓝色，字体大小为 3，

第三个标签将文本字体设置为绿色，字体大小为 2。

4.4 水平线标签

用于在 HTML 页面中插入水平线。下面是水平线标签的语法和属性：

语法：
<hr>
属性：

        - align ：规定水平线的对齐方式。

        - color ：规定水平线的颜色。

        - size ：规定水平线的高度。

        - width ：规定水平线的宽度。

例如，以下代码将在页面中插入一条红色、高度为 2 像素、宽度为 50% 的水平线：
<hr color="red" size="2" width="50%">
请注意，水平线标签不需要闭合标签，它是一个单一标签。水平线标签是 HTML 4.01 版本之前的标签，现在已经被 CSS 样式所取代。因此，在编写新的 HTML 页面时，建议使用 CSS 样式来控制水平线的样式。

4.5 换行标签

在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签 <br />。
具体实现：
<br />
特点：
1. <br /> 是个单标签。
2. <br /> 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

4.6 文本格式化标签

在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。

语义	标签
加粗	<strong></strong>或者<b></b>
倾斜	<em></em>或者<i></i>
删除线	<del></del>或者<s></s>
下划线	<ins></ins>或者<u></u>

4.7 div与span标签

<div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的。

<div> 和 <span> 都是 HTML 中的容器标签，用于对页面进行布局和样式控制。

<div> 标签用于创建一个块级容器，通常用于将内容分组（比如将一个页面分成多个部分），并对该组内容应用样式。 <div> 标签中可以包含其他 HTML 元素，比如文本、图像、表格等。

示例代码如下：
<div>
  <h2>这是一个标题</h2>
  <p>这是一个段落</p>
  <img src="image.jpg">
</div>
<span> 标签用于创建一个行内容器，通常用于对文字或其他行内元素应用样式。 <span> 标签中可以包含其他 HTML 元素，但这些元素不会在页面中单独占用一行，而是与其他文本或行内元素一起显示。（即，同行显示）

示例代码如下：
<p>这是一段文字，其中<span style="color: red;">红色</span>部分表示重要内容。</p>
注：可以通过 CSS 来对 <div> 和 <span> 标签进行样式控制。 <div> 标签通常被用于盒模型的布局，可以设置宽度、高度、边框、内边距等属性，而 <span> 标签则通常被用于文字样式的设置，可以设置颜色、字体大小、字重等属性。
特点：
1. <div> 标签用来布局，但是现在一行只能放一个<div>。 大盒子
2. <span> 标签用来布局，一行上可以多个 <span>。小盒子
3.div独占一行,会自动换行;多个span不会换行,会并列在一行。

4.8 img图像标签

在 HTML 标签中，<img> 标签用于定义 HTML 页面中的图像。
具体实现：
<img src="图像路径" />
解释：
src 是<img>标签的必须属性，它用于指定图像文件的路径和文件名。
所谓属性：简单理解就是属于这个图像标签的特性。

图像标签的其他属性：

属性	属性值	说明
src	图像路径	必须属性
alt	文本	替换文本,图像不能显示时的提示文字
title	文本	提示文本,鼠标放在图像上显示的文字
width	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的边框粗细

图像标签注意点

图像标签可以拥有多个属性，必须写在标签名的后面。
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值”。

小拓展：（重点记忆）

相对路径分类符合说明
同一级路径 ./(可以省略) 图像文件位于HTML文件同一级,如<img src="baidu.gif/>
下一级路径 / 图像文件位于HTML文件下一级,如<img src="images/baidu.gif/>
上一级路径 ../ 图像文件位于HTML文件上一级,如<img src="../baidu.gif/>

相对路径分类	符合	说明
同一级路径	./(可以省略)	图像文件位于HTML文件同一级,如<img src="baidu.gif/>
下一级路径	/	图像文件位于HTML文件下一级,如<img src="images/baidu.gif/>
上一级路径	../	图像文件位于HTML文件上一级,如<img src="../baidu.gif/>

4.9 超链接标签

在 HTML 标签中，<a> 标签用于定义超链接，作用是从一个页面链接到另一个页面
链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>
属性：
1.href：用于指定链接目标的url地址
2.target:用于指定链接页面的打开方式（有下面两种）：

_self ：默认值；
_blank ：新窗口打开

3. #：空链接

4.10 描点链接

HTML 描点链接（Anchor Link）可以使用户直接跳转到页面的某个特定位置。描点链接可以在网页内部的不同位置之间进行导航。要创建一个描点链接，需要以下两个步骤：

1. 在目标位置设置一个描点：
<a id="top">这是一个ID为top的描点位置</a>
其中， id 属性用于定义一个唯一的标识符，我们将使用这个标识符来创建链接。

2. 在其他位置创建连接，指向该描点：
<a href="#top">跳转到我的描点位置</a>
其中， href 属性用于指定目标 URL， # 符号后面跟着我们在第一步中定义的描点的 ID，这样链接就会跳转到带有该 ID 的元素。如果 href 后面只是一个 # 符号，则链接将滚动到页面的顶部。注意：在同一个 HTML 页面内部，id 属性的值必须是唯一的。此外，当目标描点时某个元素时，滚动到描点位置仅对较长的页面有意义。如果页面内容不够长，则可能无法看到滚动效果。

4.11 注释

如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。

HTML中的注释以“”结束。

具体实现：
 快捷键: ctrl + /

一句话: 注释标签里面的内容是给程序猿看的, 这个代码是不执行不显示到页面中的.

添加注释是为了更好地解释代码的功能，便于相关开发人员理解和阅读代码，程序是不会执行注释内容的。

5. 列表设计

什么是列表？列表有什么功能？

列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，以便浏览者能更快捷地获得相应的信息

列表最大的特点就是整齐、整洁、有序，它作为布局会更加自由和方便。

根据使用情景不同，列表可以分为三大类：

无序列表

有序列表

自定义列表

5.1 有序列表

<ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用 <li> 标签来定义列表项。

有序列表的基本语法格式如下：
<ol>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ol>
有序列表的特性：

有顺序，每个<li>标签独占一行（块元素）
默认<li>标签项前面有数字顺序标记；在实际使用时，可以通过type属性 : 改变前面标记的样式( 一般都是用CSS去控制 ) 。
应用场景：一般用于排序类型的列表，如试卷、问卷、排行榜选项等。

示例展示：

<!--使用数字计数器，从1开始递增-->
<ol>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

<!--使用字母计数器，从a开始递增-->
<ol type="a">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

<!--使用罗马数字计数器-->
<ol type="i">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ol>

结果展示：

5.2 无序列表

<ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li> 标签定义。

无序列表的基本语法格式如下：
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    ...
</ul>
注：ul和li必须是组合出现的，他们之间是不能有其他标签的。

无序列表的特性：

每个<li>标签独占一行（块元素） <li> 与 </li> 之间相当于一个容器，可以容纳所有元素。
各个列表项之间没有顺序级别之分，是并列的。
默认<li>标签项前面有个实心小圆点。在实际使用时，可以通过type(Disc /Circle/Square)属性 : 改变前面标记的样式( 一般都是用CSS去控制 )。
应用场景：一般用于无序类型的列表，如导航、侧边栏新闻、有规律的图文组合模块等。

实例展示：

<!--使用实心圆-->
<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>

<!--使用实心方块-->
<ul style="list-style-type:square;">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>

<!--使用空心圆-->
<ul style="list-style-type:circle;">
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>

结果展示：

5.3 自定义列表

HTML 自定义列表主要用于展示术语定义或键值对信息。

它们提供了一种结构化的方式来呈现信息，并使其易于阅读和理解。

通过使用自定义标记来标识术语和定义，读者可以更好地理解术语，而不必阅读整个文档。此外，定义列表还提供了一种非常灵活的方式来组织和呈现信息。

<dl>：定义列表。
<dt>：定义专业术语或名词。
<dd>: 名词进行解释和描述。

自定义序列表的基本语法格式如下：
<dl>
    <dt>名词1</dt>
    <dd>名词解释1</dd>
    <dd>名词解释2</dd>
    <dd>名词解释3</dd>
</dl>

示例演示：

<dl>
    <dt>名词1</dt>
    <dd>名词解释1</dd>
    <dd>名词解释2</dd>
    <dd>名词解释3</dd>
</dl>

<dl>
    <dt>java语言</dt>
    <dd>一种编程语言。</dd>
    <dd>被特意设计用于互联网的分布式环境。</dd>
    <dd>使用Java编写的应用程序，既可以在一台单独的电脑上运行，也可以被分布在一个网络的服务器端和客户端运行。</dd>
</dl>

结果展示：

6. 特殊字符

有些时候，在HTML中不能直接书写一些特殊符号，如：

1. 多个连续的空格（在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格）

2. 比如字母两侧的大于小于号（可能会被认为是标签并解析）

字符	说明	代码
	空格符
<	小于号	<
>	大于号	>
&	和	&
©	版权	©
®	注册商标	®
℃	摄氏度	℃
±	正负号	&plusmn；
×	乘号	×
÷	除号	÷

重点记住：空格、大于号、小于号这三个，其余的使用很少，如果需要回头查阅即可。

继续学习之路：

HTML（一） -- 基本标签

HTML（二） -- 表格设计

HTML（三） -- 表单设计

HTML（四） -- 多媒体设计

如果对你有帮助，请帮我点一下赞，我才有动力继续创作，谢谢！