html学习笔记（1）

一、什么是HTML

HTML是HyperText Markup Language的缩写，即超文本标记语言，是一种用于创建网页的标准标记语言。以下是关于HTML的详细介绍：

基本概念

超文本：HTML中的“超文本”指的是网页中可以包含链接，这些链接能够将用户从一个页面导航到另一个页面，甚至可以链接到其他网站或资源。
标记语言：HTML使用标记标签来描述网页的内容和结构。这些标签被尖括号包围，例如<html>、<head>、<body>等。标记标签告诉浏览器如何显示网页中的文本、图片、视频等内容。

历史发展

HTML最初由蒂姆·伯纳斯-李在1989年发明，目的是为了在互联网上共享和展示文档。
自发明以来，HTML经历了多个版本的发展，包括HTML 1.0、HTML 2.0、HTML 3.2、HTML 4.01和HTML5等。每个新版本都引入了新的功能和改进，以适应不断发展的互联网需求。

主要功能

定义网页结构：HTML通过各种标签和元素来定义网页的结构，如标题、段落、列表、表格等。
插入多媒体内容：HTML支持在网页中插入图片、音频、视频等多媒体元素，使网页内容更加丰富。
创建超链接：HTML可以创建超链接，使用户能够在不同的网页或资源之间进行导航。
支持交互性：HTML与JavaScript等脚本语言结合，可以创建具有交互性的网页，如表单提交、菜单弹出等。

基本结构

一个基本的HTML文档通常包含以下几个部分：
DOCTYPE声明：用于告诉浏览器使用的HTML版本。
html标签：HTML文档的根标签，包含整个网页的内容。
head标签：包含网页的元数据，如标题、样式表、脚本等。
body标签：包含网页的可见内容，如文本、图片、视频等。

应用领域

HTML是创建网页和Web应用程序的基础，广泛应用于互联网行业。
它也是学习其他Web开发技术，如CSS和JavaScript的基础。

二、html固定的基本结构

html有固定的基本结构如下：

<html><head><title>HTML 快速入门</title></head><body><h1>Hello HTML</h1><img src="1.jpg"/></body>
</html>

其中 <html> 是根标签， <head> 和 <body> 是子标签， <head> 中的字标签 <title> 是用来定义网页的标

题的，里面定义的内容会显示在浏览器网页的标题位置。

而 <body> 中编写的内容，就网页中显示的核心内容。

输入html:5点击enter自动生成html基本结构

结果如下：

HTML 中的标签特点：

HTML 标签不区分大小写

HTML 标签的属性值，采用单引号、双引号都可以

HTML 语法相对比较松散

三、标签

1.图片img

在HTML中，<img>是一个非常重要的标签。

1.1 基本定义

<img>是单标签（自闭合标签），用于在HTML页面中嵌入图像。它不需要像其他一些标签那样有对应的闭合标签（例如标签有开始和结束标签，而<img>没有）。

1.2 常用属性

src属性
- 这是<img>标签最重要的属性。它指定了要显示图像的源文件路径。例如：<img src = "image.jpg">，这里的“image.jpg”是图像文件的名称，可以是相对路径（相对于HTML文件所在的文件夹），也可以是绝对路径（完整的网络地址或者文件系统中的绝对位置）。
alt属性
- 这个属性提供了图像的替代文本。当图像无法显示时（例如由于网络问题、图像文件丢失或者用户使用屏幕阅读器等辅助技术时），浏览器会显示alt属性中的文本。例如：<img src = "image.jpg" alt = "这是一张美丽的风景图">。
width和height属性
- 用于指定图像的宽度和高度。可以使用像素值来设置，例如：<img src = "image.jpg" width = "300" height = "200">。如果只设置其中一个属性，图像会按照原始的宽高比例进行缩放。但是现在通常推荐使用CSS来控制图像的大小，以实现更好的布局和响应式设计。

1.3 在HTML中的应用场景

在构建网页内容时，<img>标签被广泛用于显示各种类型的图像，如产品图片、用户头像、宣传海报、网页背景图等。例如，在一个电子商务网站上，产品详情页面会使用<img>标签来展示产品的外观图片，以吸引用户购买。

2.标题h1~h6

2.1 h1标签

重要性：h1标签定义的是最重要的标题，通常用于表示页面的主标题或文章的标题。
使用限制：一个页面通常只使用一个h1标签，以确保页面的主题明确。
搜索引擎优化：h1标签中的关键词对搜索引擎优化（SEO）非常重要，因为搜索引擎会给予h1标签中的内容较高的权重。

2.2 h2标签

重要性：h2标签定义的是次重要的标题，通常用于表示段落的标题或副标题。
使用限制：h2标签可以在一个页面中使用多次，但要注意合理使用，避免过度使用导致页面结构混乱。
搜索引擎优化：h2标签中的关键词也对SEO有一定的影响，但权重低于h1标签。

2.3 h3标签

重要性：h3标签定义的是更次一级的标题，通常用于表示段落中的小节标题。
使用限制：h3标签可以在一个页面中使用多次，但要注意层次结构的清晰。
搜索引擎优化：h3标签中的关键词对SEO的影响相对较小，但仍然有助于搜索引擎理解页面的内容结构。

2.4 h4标签

重要性：h4标签定义的是更次一级的标题，通常用于表示段落中的更小的标题。
使用限制：h4标签可以在一个页面中使用多次，但要注意层次结构的清晰。
搜索引擎优化：h4标签中的关键词对SEO的影响相对较小。

2.5 h5标签

重要性：h5标签定义的是更次一级的标题，通常用于表示段落中的更小的标题。
使用限制：h5标签可以在一个页面中使用多次，但要注意层次结构的清晰。
搜索引擎优化：h5标签中的关键词对SEO的影响相对较小。

3.水平线hr

4.视频

<video src="../MyRecord_20250119214840.mp4" controls="controls" width="60%"></video>

5.音频

<audio src="../MyRecord_20250119214840.mp3" controls="controls"></audio>

6.段落、

<p>Microsoft KM-TEST Loopback Adapter&nbsp&nbsp功能特点：这是一个虚拟网络适配器，用‘’于‘’在Windows系统中模拟本地回环网络。它可以被用于网络分析、测试和开发等场景中，使得用户可以在本地计算机上模拟网络环境，进行各种网络应用的测试和调试。应用场景：适用于在Windows系统上进行网络应用的开发和测试，帮助开发人员在本地环境中模拟网络通信，进行功能测试和调试。</p>

7.链接

<a href="https://static-recommend-img.tiangong.cn/image/ppt-image/cover/1737123607763/cover_1880258806994616320.png?v=1737177167000&image_process=resize%2Cw_600%2Fformat%2Cwebp" target="_parent">点击链接</a>

重要属性

href：指定链接的目标地址，可以是绝对路径、相对路径、锚点、电子邮件地址、电话号码、JavaScript代码等。例如：
- <a href="https://www.example.com">访问示例网站</a>
- <a href="mailto:someone@example.com">发送电子邮件</a>
- <a href="tel:+8613888888888">拨打手机</a>
- <a href="javascript:alert('Hello World!');">执行JavaScript函数</a>
target：规定在何处打开被链接文档，常用值有：
- _self：在当前窗口或标签页中打开链接（默认）。
- _blank：在新窗口或新标签页中打开链接。
- _parent：在父框架中打开链接。
- _top：在整个窗口中打开链接，取消任何框架。
rel：定义当前文档与目标文档之间的关系，常用值有：
- alternate：表示替代版本，如用于 RSS 订阅链接。
- nofollow：告诉搜索引擎不要追踪此链接，常用于外部链接。
- noopener：防止新的浏览上下文（页面）访问 window.opener 属性和 open 方法，提高安全性。
- noreferrer：不发送 referer 头信息，即不告诉目标网站你从哪里来的。
download：提示浏览器下载链接目标而不是导航到该目标。如果指定了文件名，浏览器会提示下载并保存为指定文件名。例如：<a href="file.pdf" download="example.pdf">下载文件</a>