【前端开发--HTML学习笔记】前端开发之HTML超详细的学习笔记（小白入门很友好）

于 2024-06-01 17:55:41 发布
阅读量1.2k 收藏 20
点赞数 18
分类专栏： 前端开发 前端笔记分享 文章标签： html 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_67844671/article/details/139377266
版权

一，HTML学习笔记

1，HTML简介

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

image-20240226185731262

1-1 实例解析

image-20240226185803319

- <!DOCTYPE html> // 声明为 HTML5 文档
- <html> // 元素是 HTML 页面的根元素
- <head> // 元素包含了文档的元（meta）数据，如 **<meta charset="utf-8">** 定义网页编码格式为 **utf-8**。
- <title> // 元素描述了文档的标题
- <body> // 元素包含了可见的页面内容
- <h1> // 元素定义一个大标题
- <p> // 元素定义一个段落

**注：**在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

1-2 HTML 网页结构

image-20240226190135750

1-3 <!DOCTYPE> 声明

声明有助于浏览器中正确显示网页。网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。doctype 声明是不区分大小写的，以下方式均可： 
<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

1-4 中文编码

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
页面标题</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

2，HTML编辑器

推荐使用VScode,webstorm等

  • VS Code：https://code.visualstudio.com/

VS Code 安装教程参考：https://www.runoob.com/w3cnote/vscode-tutorial.html

2-1 步骤 1: 新建 HTML 文件

在 VS Code 安装完成后，选择" 文件(F)->新建文件(N) "，在新建的文件中输入以下代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
 
<h1>我的第一个标题</h1>
 
<p>我的第一个段落。</p>
 
</body>
</html>

image-20240226190556214

2-2 步骤 2: 另存为 HTML 文件

然后选择" 文件(F)->另存为(A) "，文件名为 runoob.html:

image-20240226190741099

当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 扩展名。两者没有区别，完全根据您的喜好，我建议统一用 .html。

在一个容易记忆的文件夹中保存这个文件，比如 runoob

2-3 步骤 3: 在浏览器中运行这个 HTML 文件

然后鼠标右击编辑器上的文件名，选择在默认浏览器打开（也可以其他的浏览器）:

image-20240226190820529

**注：**vscode 中使用浏览器打开 html 文件需要 安装 “open in browser” 扩展。

VS Code 可以安装 Live Preview 插件来实时预览编写的代码：

image-20240226190852501

在编辑窗口右击鼠标，选择 Show Preview 选项：

image-20240226190909039

显示结果：

image-20240226190926548

这样我们就可以在编辑代码过程中实时预览到效果了。

3，HTML 基础

3-1 标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

</body>
</html>

image-20240226191103880

3-2 段落

HTML 段落是通过标签 <p> 来定义的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>

</body>
</html>

image-20240226191158320

3-3 链接

HTML 链接是通过标签 <a> 来定义的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<a href="https://www.runoob.com">这是一个链接使用了 href 属性</a>

</body>
</html>

image-20240226191243130

3-4 图像

HTML 图像是通过标签 <img> 来定义的.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<img src="/images/logo.png" width="258" height="39" />

</body>
</html>

image-20240226191326239

4，HTML元素

4-1 HTML元素

image-20240226191422441

开始标签常被称为起始标签（opening tag），结束标签常称为闭合标签（closing tag）*。

4-2 HTML 元素语法

  • HTML 元素以开始标签起始
  • HTML 元素以结束标签终止
  • 元素的内容是开始标签与结束标签之间的内容
  • 某些 HTML 元素具有空内容（empty content）
  • 空元素在开始标签中进行关闭（以开始标签的结束而结束）
  • 大多数 HTML 元素可拥有属性

注释: 您将在本教程的下一章中学习更多有关属性的内容。

4-3 嵌套的 HTML 元素

  1. 大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。
  2. HTML 文档由相互嵌套的 HTML 元素构成。

4-4 HTML 文档实例

<!DOCTYPE html>
<html>

<body>
<p>这是第一个段落。</p>
</body>

</html>

以上实例包含了三个 HTML 元素。

4-5 HTML 实例解析

4-5-1 <p> 元素:
<p>这是第一个段落。</p>
  • 这个 <p> 元素定义了 HTML 文档中的一个段落。
  • 这个元素拥有一个开始标签 <p> 以及一个结束标签 </p>.
  • 元素内容是: 这是第一个段落。
4-5-2 <body> 元素:
<body>
<p>这是第一个段落。</p>
</body>
  • <body> 元素定义了 HTML 文档的主体。
  • 这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。
  • 元素内容是另一个 HTML 元素（p 元素）。
4-5-3 <html> 元素：
<html>

<body>
<p>这是第一个段落。</p>
</body>

</html>
  • <html> 元素定义了整个 HTML 文档。
  • 这个元素拥有一个开始标签 <html> ，以及一个结束标签 </html>.
  • 元素内容是另一个 HTML 元素（body 元素）。

4-6 不要忘记结束标签

即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：

<p>这是一个段落
<p>这是一个段落
  • 以上实例在浏览器中也能正常显示，因为关闭标签是可选的。
  • 但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。

4-7 HTML 空元素

  • 没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
  • <br> 就是没有关闭标签的空元素（<br> 标签定义换行）。
  • 在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
  • 在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
  • 即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。

4-8 HTML 提示：使用小写标签

  • HTML 标签对大小写不敏感：

    等同于

    。许多网站都使用大写的 HTML 标签。

  • 菜鸟教程使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

5，HTML属性

5-1 HTML属性

  • HTML 元素可以设置属性
  • 属性可以在元素中添加附加信息
  • 属性一般描述于开始标签
  • 属性总是以名称/值对的形式出现，比如：name=“value”。

5-2 属性实例

HTML 链接由 标签定义。链接的地址在 href 属性中指定：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<a href="https://www.runoob.com">这是一个链接使用了 href 属性</a>

</body>
</html>

image-20240226192425547

5-3 HTML 属性常用引用属性值

  • 属性值应该始终被包括在引号内。
  • 双引号是最常用的，不过使用单引号也没有问题。

image-20240226192513165

5-4 HTML 提示：使用小写属性

  • 属性和属性值对大小写不敏感。
  • 不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
  • 而新版本的 (X)HTML 要求使用小写属性。

5-5 HTML 属性参考手册

  • 查看完整的HTML属性列表: HTML 标签参考手册。
  • 下面列出了适用于大多数 HTML 元素的属性：

image-20240226192607527

更多标准属性说明： HTML 标准属性参考手册.

6，HTML标题

6-1 HTML标题

  • 标题（Heading）是通过 <h1> - <h6> 标签进行定义的。
  • <h1> 定义最大的标题。 <h6> 定义最小的标题。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

</body>
</html>

image-20240226192912753

6-2 HTML水平线

  • <hr> 标签在 HTML 页面中创建水平线。
  • hr 元素可用于分隔内容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
	<p>hr 标签定义水平线：</p>
	<hr />
	<p>这是段落。</p>
	<hr />
	<p>这是段落。</p>
	<hr />
	<p>这是段落。</p>
</body>
</html>

image-20240226193042357

6-3 HTML 注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

注释写法如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<!--这是一个注释，注释在浏览器中不会显示-->

<p>这是一个段落</p>

</body>
</html>

image-20240226193127816

7，HTML段落

7-1 HTML 段落

段落是通过 <p> 标签定义的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>这是一个段落。</p>
<p>这是一个段落。</p>
<p>这是一个段落。</p>

</body>
</html>

image-20240226194631648

**注意：**浏览器会自动地在段落的前后添加空行。（</p> 是块级元素）

7-2 不要忘记结束标签

即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>这是一个段落
<p>这是另一个段落

</body>
</html>

image-20240226194731048

上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。

注释: 在未来的 HTML 版本中，不允许省略结束标签。

7-3 HTML 折行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br>标签：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>这个<br>段落<br>演示了分行的效果</p>

</body>
</html>

image-20240226194842558

8，HTML 文本格式化

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head> 
<body>

<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>

</body>
</html>

image-20240227132140204

通常标签 <strong> 替换加粗标签<b> 来使用, <em> 替换 <i>标签使用。

8-1 HTML 文本格式化标签

image-20240227132311460

8-2 HTML “计算机输出” 标签

image-20240227132406039

9，HTML 链接

9-1 文本链接

最常见的链接类型是文本链接，它使用 元素将一段文本转化为可点击的链接，例如：

<a href="https://www.runoob.com/">访问菜鸟教程</a>

9-2 图像链接

您还可以使用图像作为链接。在这种情况下， 元素包围着 元素。例如：

<a href="https://www.example.com">
  <img src="example.jpg" alt="示例图片">
</a>

9-3 锚点链接

除了链接到其他网页外，您还可以在同一页面内创建内部链接，这称为锚点链接。要创建锚点链接，需要在目标位置使用 <a> 元素定义一个标记，并使用#符号引用该标记。例如：

<a href=
最低0.47元/天 解锁文章
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

学网安的A

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值