html笔记

最新推荐文章于 2024-04-25 20:22:26 发布

VIP文章大银_strawberry

最新推荐文章于 2024-04-25 20:22:26 发布

阅读量716

点赞数

文章标签： html safari firefox

本文链接：https://blog.csdn.net/weixin_38446891/article/details/126402256

版权

【HTML基础】

本文档是个人对 Pink 老师课程的总结归纳及补充，转载请注明出处！

一、HTML简介

1.1 网页

1.1.1 什么是网页？

网站： 利用前端技术制作的网页集合。

网页： 构成网站的基本元素，通常是 HTML 格式的文件（.htm 或 .html）必须通过浏览器来阅读。

1.1.2 什么是HTML?

超文本： 由图片、声音、动画、视频……构成且可以相互链接的文本。

HTML： 超文本标记语言（HTML 不是编程语言，而是由一套标记标签构成的标记语言）。

1.1.3 网页的形成

前端代码开发 ——> 浏览器解析、渲染代码 ——> 呈现 Web 页面。

1.2 浏览器

1.2.1 常用浏览器

PC 端五大浏览器： IE、Chrome、Firefox、Safari、Opera、（目前 IE 已经被 Edge 取代）。

1.2.2 浏览器内核

四大浏览器内核： IE（Trident）、Firefox（Gecko）、Safari（Webkit）、Chrome / Opera / Edge（Blink 属于 Webkit 的分支，Blink 兼容 Webkit）

注：目前国内浏览器一般都采用 Webkit / Blink 内核。

1.3 Web标准

W3C： 万维网联盟，国际最著名的标准化组织之一。

Web 标准： W3C 组织和其他标准化组织为 Web 开发制定的一系列标准的集合。

1.3.1 为什么需要Web标准？

浏览器不同，解析渲染显示的页面效果就有些许差异，通过 Web 标准可以统一浏览器解析显示效果，同时大大减少开发者的工作量（一套代码，多种浏览器平台兼容运行）。

遵循 Web 标准除了可以让不同的开发人员写出的页面更标准、更统一外，还有以下优点：

让 Web 开发前景更广阔
网页能被更广泛的设备访问
更容易被搜索引擎搜索（排名靠前）
降低网站的流量费用
使网站更易于维护
提高页面的加载速度

1.3.2 Web标准的构成

主要包括三个方面： 结构、表现、行为。

结构： 用于对网页元素进行整理和分类，现阶段主要指的是 HTML
表现： 用于设置网页元素的版式、大小、颜色等外观样式，主要指 CSS
行为： 网页模型的定义及交互方式的编写，现阶段主要指的是 JavaScript

Web 标准提出的最佳体验方案： 结构、样式、行为 相互分离。

简单的理解： 结构写到 .html 文件中、表现写到 .css 文件中、行为写到 .js 文件中
一句话解释： 结构类似身体、表现类似衣服、行为类似动作（结构始终是一切的基础！）

二、HTML标签

特别提醒：以下内容中，HTML 标签内会出现若干 “标签样式属性”，此处只需要了解即可，因为实际开发中都是使用 CSS 来对 HTML 进行样式设置，一般都不会使用样式属性。

2.1 HTML语法规范

2.1.1 基本语法概述

HTML 标签是由尖括号包围的关键字词，例如：<html>。

HTML 标签通常是成对出现的，例如：<html> 和 </html>，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。

有些特殊的标签必须是单个标签，例如：<br />，我们称为单标签。注意：/ 之前有一个空格（Coding Style 编码风格）。每个标签原则上都应该有结束符，即： /。所以单标签的最后要加 / 以表示结束，当然不加也是可以被浏览器正常解析的。

HTML5 规范中明确说明单标签 / 是可以忽略的，实际开发中建议不要给单标签添加斜线。

任何标签都建议不要大写，即便是 <!doctype html> 标签。

2.1.2 标签关系

包含关系

<head>
    <title></title>
</head>

并列关系

<head>
</head>
<body> 
</body>

2.2 HTML基础结构标签

2.2.1 第一个HTML网页

每个网页都会有一个基础的结构标签（骨架标签：4组），页面内容也是在这些基础标签上书写的。

HTML 页面也称为 HTML 文档。

【HTML 基础结构】

<html>
    <head>
        <title></title>
    </head>
    <body>
    </body>
</html>

标签名	定义	说明
`<html>` `</html>`	根标签	页面中最大的标签（最基础的标签）
`<head>` `</head>`	头部标签	在 head 标签中我们必须要设置 title 标签
`<title>` `</title>`	标题标签	页面自己的网页标题
`<body>` `</body>`	主体标签	包含文档的所有内容

网页 title 示例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XXmmGrSm-1660792894581)(mark-img/image-20220115163652252.png)]

2.3 网页开发工具

WebStorm（生态、智能、收费）
VSCode（免费、插件、轻量）
HBuilderX（国产、跨端开发）
Sublime Text（插件、轻量、收费）
Atom（免费、插件、轻量）
Dreamweaver（可视化、智能、收费）
Notepad++（免费、轻量）
Windows 记事本（坑爹）
……

2.3.1 文档类型声明标签

<!doctype> 文档类型声明，作用是告诉浏览器应该使用哪种 HTML 版本来解析渲染网页。

<!doctype html>
<!-- 当前页面采用 HTML5 版本 -->

注意：

<!doctype> 声明位于文档最前面的位置，处于 <html> 标签之前
<!doctype> 文档类型声明标签，不属于 HTML 标签
请默认统一指定 HTML5 版本 <!doctype html>

2.3.2 lang语言种类

用来定义当前网页显示的主语言，书写在 <html> 标签内。

en 定义语言为英语
zh 定义语言为中文

简单来说：定义为 en 就是面向英文用户的网页，定义为 zh 就是面向中国大陆用户的网页。

en-GB 英文（英国）

en-US 英文（美国）

zh-CN 中文（简体，中国大陆）

zh-SG 中文（简体，新加坡）

zh-HK 中文（繁体，香港）

zh-MO 中文（繁体，澳门）

zh-TW 中文（繁体，台湾）

<html lang="zh-CN"> 
</html>

语言的设置是为了方便 浏览器搜索推荐 以及触发 浏览器翻译功能，并不是说设置了某类主语言后网页中就不能存在其他类型的语言了。

2.3.3 字符集

字符集： 多个字符的集合，以便计算机能够识别和储存各种文字。

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

<meta charset="UTF-8">

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

注意： 字符设置是必须的，否则极大可能引起网页乱码。一般情况下，统一使用 “UTF-8” 编码，尽量统一写成标准的 UTF-8，不要写成 “utf8” 或 “UTF8”。

标准骨架：

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
</body>

</html>

2.3.4 IE 兼容模式

IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的绘制模式。

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Title</title>
</head>

<body>
</body>

</html>

2.4 HTML常用标签

2.4.1 标签语义

简单的理解： 标签的含义，即：这个标签是用来干嘛的。

2.4.2 标题标签

为了使网页更具有语义化，我们经常会在页面中用到标题标签。

HTML 提供了 6 个等级的网页标题，即：<h1> 到 <h6>。

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

单词 head 的缩写，意为：头部、标题。

标签语义： 作为标题使用，并且依据重要性递减。

特点：

加了标题的文字会自动加粗，字号也会依次变大
一个标题就独占一行，同一行标题后不会再放置其他任何内容（后期可以通过 CSS 修改）

级别越大的标题标签，对网页元素的强调性越强，同时也和浏览器 SEO 优化有关。

故：标题标签不得滥用，要用在合适的地方！

2.4.3 段落和换行标签

在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示，在 HTML 标签中，<p> 标签用于定义段落，它可以将整个网页分为若干个段落。

<p>我是一个段落标签</p>

单词 paragraph 的缩写，意为：段落。

便签语义： 可以把 HTML 文档分割为若干段落。

特点：

文本在一个段落中会根据浏览器窗口的大小自动换行

对于中文段落来说无论如何都会自动换行，但是对于英文段落来说如果字母是连续的（aaa…），那么浏览器会认为该段落整体都是一个字母不会自动换行，要想英文段落自动换行字母之间得有空格。
段落和段落之间保有空隙（段间距）
同一段落里的不同行文字之间也有一定的空隙（行间距）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-anGKYtui-1660792894582)(mark-img/d9b00c3588a14988a0eee7baf8782ca3.png)]

在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。

如果希望某段文本强制换行显示，就需要使用换行标签 <br>。

<br>

单词 break 的缩写，意为：打断、换行。

**标签语义：**强制换行。

特点：

<br> 是个单标签
<br> 标签只是简单地开始新的一行，跟段落不一样，所以不会产生段间距

分割线标签：<hr>。

<hr>
<!-- 某些时候需要对内容块进行分割时会用到分割线标签 -->

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-btkU992O-1660792894582)(mark-img/2d74ab3a559a4df5b69a32aa0bc5dd09.png)]

注意：实际开发中并不常用 hr 作为分割线，而是使用 CSS 盒子模型中的边框来实现分割线效果，或是利用一个空盒子设置长宽高及背景颜色来实现分割线效果。

2.4.4 文本格式化标签

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

标签语义： 突出重要性，比普通文字更重要。

语义	标签	说明
加粗	`<strong>` `</strong>` 或 `<b>` `</b>`	介于可读性、搜索引擎优化及屏幕阅读器适配推荐使用前者
倾斜	`<em>` `</em>` 或 `<i>` `</i>`	介于可读性、搜索引擎优化及屏幕阅读器适配推荐使用前者
删除线	`<del>` `</del>` 或 `<s>` `</s>`	介于可读性、搜索引擎优化及屏幕阅读器适配推荐使用前者
下划线	`<ins>` `</ins>` 或 `<u>` `</u>`	介于可读性、搜索引擎优化及屏幕阅读器适配推荐使用前者

注意：<em> 标签不只是单纯的用于倾斜文本，其核心的意义在于对元素进行强调！所以在后期的开发中可以把一些特殊性、强调性的元素放在 em 标签中，然后再对 em 这个盒子进行样式设置，这比把其放入其他盒子（如：span）中要更合理，同理 <strong> 标签页适合放一些重点强调的元素。

2.4.5 <div>和<span>标签

<div> 和 <span> 是没有语义的，它们就是两种盒子，用来对网页进行布局和装其他内容。

<div>这是头部</div>
<span>今日价格</span>

div 是 division 的缩写表示：分割、分区。

span 意为：跨度、跨距。

特点：

<div> 标签用来布局，一行只能放一个 <div>，大盒子
<span> 标签用来布局，一行上可以放多个 <span>，小盒子

说明： 后期可以通过 CSS 将 div 与 span 之间的特性相互转换。

拓展： span 标签不单单是用于布局，对于一些需要单独修饰和设置的元素，可以将其用 span 标签嵌套起来，然后就可以单独对其进行设置（比如：在一个 p 标签的段落中要对其中某一句话单独设置样式，那么就可以用 span 将这句话单独嵌套起来，这样就方便对其单独设置样式还不会影响段落中的其他内容，这其实也是利用了 span 一行可以放置多个盒子的特性），不过对于特殊且具有强调性的元素建议使用 em，对于重点强调但不特殊的的元素建议使用 strong。

2.4.6 图像标签和路径

（1）图像标签

在 HTML 标签中，<img> 标签用于定义 HTML 页面中的图像。

<img src="图像URL">

单词 image 的缩写，意为图像。

src 是 <img> 标签的必须属性，它用于指定图像文件的路径和文件名。

URL 是 统一资源定位符（通俗理解：地址、网址）。

所谓属性：简单理解就是属于这个图像标签的特性。

图像标签的其他属性：

属性	属性值	说明
`src`	图片路径	必须属性
`alt`	文本	替换文本，图像显示失败时显示（为了提高 SEO 及适配屏幕阅读器，建议都把 alt 写上）
`title`	文本	提示文本，鼠标放到图片上，显示的提示文字
`width`	像素	设置图像的宽度（了解，后面通过 CSS 设置）
`height`	像素	设置图像的高度（了解，后面通过 CSS 设置）
`border`	像素	设置图像的边框粗细（了解，后面通过 CSS 设置）

图像标签的注意点：

图像标签可以同时拥有多个属性（其它标签也是同理）
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开（其它标签也是同理）
属性均采取键值对的格式，即：key="value" 的格式，属性="属性值"
设置图像的宽度与高度时：一般设置其中之一便可，另外一个会自动按比例适配
设置宽高时，可以使用百分数作为值，此时图片大小会以当前父元素的大小为基础进行比例缩放，这样做的好处在于当父元素改变大小时，图片也会随比例同等缩放

（2）路径

相对路径

相对路径：以引用文件所在位置为参考基础，而建立出目录路径。

相对路径分类	符号	说明
同一级路径	`.`	如：`<img src="baidu.png" />`
下一级路径	`/`	如：`<img src="image/baidu.png" />`
上一级路径	`../`	如：`<img src="../image/baidu.png" />`

绝对路径

绝对路径：指目录下的绝对位置，直接到达目的位置，通常是从盘符开始的路径。

如 Windows 系统的绝对路径：D:\web\img\logo.png

网络地址

https://github.com/JERRY-Z-J-R/JERRY-Z-J-R/blob/main/mark-img/readme.gif

注意：

相对路径为 /（正斜杆），绝对路径为 \（反斜杆）
实际开发中建议使用相对路径或网络地址（都是 / 正斜杆）

这里所说的绝对路径为 /（正斜杠）指的是在 Windows 环境中，而 Linux 系统依旧是反斜杠。

2.4.7 超链接标签

在 HTML 标签中，<a> 标签用于定义超链接，作用是从一个页面链接到另一个页面。

（1）链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式">文本、图像或其他内容</a>

单词 anchor 的缩写，意为：锚。

两个属性的作用如下：

属性	作用
`href`	用于指定链接目标的 url 地址，（必须属性）当标签应用 href 属性时，它就具有了超链接的功能
`target`	用于指定链接页面的打开方式，其中 `_self` 在当前页面打开的方式（为默认值），`_blank` 在新窗口中打开的方式

（2）链接分类

**外部链接：**例如：<a href="http://www.baidu.com">百度</a>
**内部链接：**网站内部页面之间相互链接，直接链接内部页面名称即可，例如： <a href="index.html">首页</a>
**空链接：**如果当时没有确定链接目标时， <a href="javascript:void(0)">首页</a>"，当用户点击链接时，void(0) 计算为 0，但 Javascript 上没有任何效果
**下载链接：**如果 href 里面地址是一个文件或者压缩包（前提：路径包含文件类型后缀名，如：.exe、.zip 等），便会下载这个文件
**网页元素链接：**在网页中的各种网页元素，如：文本、图像、表格、音频、视频等都可以添加超链接
**锚点链接：**点击链接，可以快速定位到当前页面中的某个位置
- 在链接文本的 href 属性中，设置属性值的 #名字 的形式，如：<a href="#two">第2集</a>
- 找到目标位置标签（此处以 h3 标签为例），里面添加一个 id属性="刚才的名字"，如：<h3 id="two">第2集介绍</h3>
- <a href="#"></a> 默认定位到页面顶部