HTML Day02
Day02
- 0. 引言
- 1. 文本格式化
- 1.1 HTML文本格式化标签
- 1.2 HTML"计算机输出"标签
- 1.3 HTML 引文，引用及标签定义
- 2. HTML链接
- 2.1链接跳转原理（有点乱可跳过）
- 2.2 HTML超链接
- 2.3 target属性
- 2.4 id属性
- 2.4.1 id属性在页面内和不同页面的定位
- 2.5 空链接
- 3.HTML头部
- 3.1 title元素
- 3.2 base元素
- 3.3 link元素
- 3.4 style元素
- 3.5 meta元素
- 3.6 script元素
0. 引言
我发现HTML和CSS嵌套太多，然后HTML5又新增和删除很多特性，因为初学HTML，大多数是填鸭式学习，即看了，问了，解答了，再忘了。所以博客很多东西都是一知半解，只能做做扩充知识点，后面会一直更新修改重新布局，现在只是当作二次手记学习过程，如果看到这里，我这个引言没删，说明写的不够好，至少不是终极版本。（点个关注激励一下是可以的嘻嘻）
1. 文本格式化
文本格式化指的是对字体进行不同形式的修饰。例如：
<!DOCTYPE html> <!声明文档类型为 HTML5，告诉浏览器以 HTML5 标准解析页面。>
<html> <!HTML 文档的根标签，所有其他 HTML 元素都包含在其中。>
<head> <!头部标签，包含文档元数据（如字符编码、页面标题），不直接显示在页面上。>
<meta charset="utf_8"> <!设置页面字符编码为 UTF-8，确保中文等特殊字符能正确显示。>
<title>菜鸟教程</title> <!设置浏览器标签页和收藏夹中显示的页面标题>
</head> <!头部标签结束><body> <!页面显示><b>加粗文本</b><br><br> <!br是换行>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是<sub>下标</sub>和<sup>上标</sup></body>
</html>
预览效果如图：
1.1 HTML文本格式化标签
| 标签 | 描述 |
|---|---|
| < b > <b> <b> | 定义粗体文字 |
| < e m > <em> <em> | 定义着重文字 |
| < i > <i> <i> | 定义斜体字 |
| < s m a l l > <small> <small> | 定义小号字 |
| < s t r o n g > <strong> <strong> | 定义加重语气 |
| < s u b > <sub> <sub> | 定义下标字 |
| < s u p > <sup> <sup> | 定义上标字 |
| < i n s > <ins> <ins> | 定义插入字 |
| < d e l > <del> <del> | 定义删除字 |
<!DOCTYPE html> <!声明文档类型为 HTML5。告诉浏览器使用 HTML5 标准解析页面，确保兼容性。必须放在 HTML 文件的第一行。>
<html> <!HTML 文档的根标签（起始标签）。所有HTML元素都要在其后>
<head> <!头部标签（起始标签），包含文档元数据。元数据不直接显示在页面上，用于描述文档（如编码、标题、引入资源）。>
<meta charset="utf-8"> <!UTF-8 是现代网页的标准编码>
<title>菜鸟教程(runoob.com)</title> <!设置页面标题。显示在浏览器标签页和收藏夹中。>
</head>
<body>
<b>这个文本是加粗的</b>
<br /> <!换行>
<strong>这个文本是加粗的</strong>
<br/>
<em>定义着重字体</em>
<br />
<big>这个文本字体放大</big>
<br />
<em>这个文本是斜体的</em>
<br />
<i>这个文本是斜体的</i>
<br />
<small>这个文本是缩小的</small>
<br/>
<ins>定义插入字</ins>
<br/>
<del>定义删除字</del>
<br />
这个文本包含
<sub>下标</sub>
<br />
这个文本包含
<sup>上标</sup>
<br/></body>
</html>
效果图预览：
1.2 HTML"计算机输出"标签
| 标签 | 描述 |
|---|---|
| < c o d e > <code> <code> | 定义计算机代码 |
| < k b d > <kbd> <kbd> | 定义键盘码 |
| < s a m p > <samp> <samp> | 定义计算机代码样本 |
| < v a r > <var> <var> | 定义变量 |
| < p r e > <pre> <pre> | 定义预格式文本 |
<!DOCTYPE html> <!声明文档类型为 HTML5。告诉浏览器使用 HTML5 标准解析页面，确保兼容性。必须放在 HTML 文件的第一行。>
<html> <!HTML 文档的根标签（起始标签）。所有HTML元素都要在其后>
<head> <!头部标签（起始标签），包含文档元数据。元数据不直接显示在页面上，用于描述文档（如编码、标题、引入资源）。>
<meta charset="utf-8"> <!UTF-8 是现代网页的标准编码>
<title>菜鸟教程(runoob.com)</title> <!设置页面标题。显示在浏览器标签页和收藏夹中。>
</head>
<body><code> 定义计算机代码</code> <!作用是标记一段计算机代码，通常是等宽字体><br/> <!换行><kbd>定义键盘码</kbd> <!标记用户需要通过键盘输入的内容,通常是灰色圆角背景><br/><samp>定义计算机代码样本</samp> <!标记计算机程序的输出或示例结果,通常使用等宽字体，与 < c o d e > 类似。><br/><var>定义变量</var> <!标记数学公式、编程中的变量或占位符。><br/><pre>定义预格式文本</pre> <!：保留文本的原始格式（如空格、换行）></body>
</html>
这几个标签在浏览器显示大差不差，不知道为什么，但是在csdn编辑器倒是很不一样，放上两个的对比：
csdn:
代码： < c o d e > 定义计算机代码 < / c o d e > ： 代码：<code>定义计算机代码</code>： 代码：<code>定义计算机代码</code>：
预览：定义计算机代码
代码： < k b d > 键盘码 < / k b d > ， < k b d > c t r l < / k b d > + < k b d > c < / k b d > 代码：<kbd>键盘码</kbd>，<kbd>ctrl</kbd>+<kbd>c</kbd> 代码：<kbd>键盘码</kbd>，<kbd>ctrl</kbd>+<kbd>c</kbd>
预览：键盘码，ctrl+c
代码： < s a m p > 计算机代码 : “ h e l l o w o r l d ” < / s a m p > 代码：<samp>计算机代码:“hello world”</samp> 代码：<samp>计算机代码:“helloworld”</samp>
预览：计算机代码:“hello world”
代码： < v a r > 变量， x ， y < / v a r > 代码：<var>变量，x，y</var> 代码：<var>变量，x，y</var>
预览：变量，x，y
< p r e > 定义预格式文本 < / p r e > <pre>定义预格式文本</pre> <pre>定义预格式文本</pre>
预览：
定义预格式文本
浏览器:
预览：
1.3 HTML 引文，引用及标签定义
| 标签 | 描述 |
|---|---|
| < a b b r > <abbr> <abbr> | 定义缩写 |
| < a d d r e s s > <address> <address> | 定义地址 |
| < b d o > <bdo> <bdo> | 定义文字方向 |
| < b l o c k q u o t e > <blockquote> <blockquote> | 定义长的引用 |
| < q > <q> <q> | 定义短的引用语 |
| < c i t e > <cite> <cite> | 定义引用，引证 |
| < d f n > <dfn> <dfn> | 定义一个定义项目 |
<!DOCTYPE html> <!声明文档类型为 HTML5。告诉浏览器使用 HTML5 标准解析页面，确保兼容性。必须放在 HTML 文件的第一行。>
<html> <!HTML 文档的根标签（起始标签）。所有HTML元素都要在其后>
<head> <!头部标签（起始标签），包含文档元数据。元数据不直接显示在页面上，用于描述文档（如编码、标题、引入资源）。>
<meta charset="utf-8"> <!UTF-8 是现代网页的标准编码>
<title>菜鸟教程(runoob.com)</title> <!设置页面标题。显示在浏览器标签页和收藏夹中。>
</head>
<body><p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p> <!p是段落标签，abbr是缩写标签，而title属性是让当鼠标停留到abbr定义的缩写文本时会展开全写><address>Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br> <!a是创建超链接的标签，href属性用于指定链接>Visit us at:<br>Example.com<br>Box 564, Disneyland<br>USA</address><br/><p>该段落文字从左到右显示。</p>
<p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p> <!bdo是定义文字方向的标签，dir属性用于指定文字方向，rtl是右到左，ltr是左到右，auto是自动检查方向><h1>About WWF</h1> <!h1是一级标题标签><p>Here is a quote from WWF's website:</p><blockquote cite="https://www.worldwildlife.org/who/index.html"> <!blockquote是定义长引用标签，可选属性，指定引用内容的原始 URL。注：该 URL 不会显示在页面上，但供搜索引擎或工具使用。>For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.</blockquote><h1>引用</h1><p>在这个示例中，第一个和第二个引用使用了 blockquote 标签，因为它们较长，需要独立的块来展示；而第三个引用使用了 q 标签，因为它比较短，可以内联显示。</p> <blockquote><p>Life is what happens when you're busy making other plans.</p><footer>— John Lennon</footer> <!footer 标签定义了一个页脚区域，内容为 “— John Lennon”。></blockquote><blockquote><p>If you want to know what a man's like, take a good look at how he treats his inferiors, not his equals.</p><footer>— J.K. Rowling, Harry Potter and the Goblet of Fire</footer></blockquote><p>In his famous quote, Einstein said: <q>E=mc²</q> <!q是短的引用></p>
</body>
</html>
图片预览：
2. HTML链接
HTML链接
2.1链接跳转原理（有点乱可跳过）
首先，HTML用标签 < a > <a> <a>来定义目标地址，当我们点击其内的链接时。会发生以下步骤：
- 解析目标地址（URL/路径）
URL是包含一系列信息的字符串，可以直接定位网络资源。其由以下几个部分组成：
协议（ h t t p ， f t p ， h t t p s 等） + 域名（ c s d n . c o m , g o o g l e . c o m 等） + 路径（资源在服务器上的位置，如 / i m a g e s / l o g o . p n g ) 协议（http，ftp，https等）+域名（csdn.com,google.com等）+路径（资源在服务器上的位置，如/images/logo.png) 协议（http，ftp，https等）+域名（csdn.com,google.com等）+路径（资源在服务器上的位置，如/images/logo.png)
比如:https://editor.csdn.net/md?not_checkout=1&articleId=148231018就是一个URL，这是我现在写博客的链接hh，而且是一个绝对URL。那么有绝对的，就有相对的。相对 URL是相对于当前页面的 URL，不包含协议和域名，仅依赖路径信息。
具体的：
- 绝对URL：完整地址直接指向互联网上的资源，浏览器通过 DNS 解析域名，向服务器发起 HTTP/HTTPS 请求获取目标内容。
- 相对URL：如 （
./about.html） 或（../contact）
基于当前页面的 URL 计算目标地址。
若当前页面为https://example.com/blog/post
则相对路径 (./comment)解析为 (https://example.com/blog/comment)，
相对路径 (../about) 解析为(https://example.com/about)。 - 这是怎么来的呢? 页面为 https://example.com/blog/post
.表示当前目录（也就是当前 URL 路径的最后一级目录（不包含文件名）。），即post所在的目录/blog/。当前目录路径/blog/+ 剩余路径comment=/blog/comment。最终 URL：https://example.com/blog/comment。`..表示向上一级目录：从当前目录/blog/post向上一级到/blog/的父级目录/（网站根目录）。拼接规则：上级目录路径/+ 剩余路径about=/about。最终 URL：https://example.com/about。
提示：如果 URL 以 / 结尾（如 https://example.com/blog/），则当前目录是最后一个 / 后的空路径，即 /blog/。
如果 URL 不以 / 结尾（如 https://example.com/blog/post），则当前目录是最后一个 / 前的路径，即 /blog/（此时 post 被视为 “文件”）。
| 符号 | 描述 | 作用 |
|---|---|---|
./ | 当前目录 | 指向当前目录 |
../ | 向上一级 | 向上跳转一级 |
../../ | 向上两级 | 向上跳转两级 |
../../../ | 向上三级 | 向上跳转三级 |
案例：…/ 的组数决定跳转层级，但最多只能到达根目录 /。不会出现 “超出根目录” 的错误，多余的 …/ 会被自动忽略。
| 当前路径 | 相对路径 | 解析结果 | 说明 |
|---|---|---|---|
/blog/post | ./comment | /bolg/comment | ./省略拼接comment |
/blog/post | ../about | /about | 一组 ../ 跳到 / |
/blog/category/post | ../../home | /home | 两组../跳到 / |
/blog/post | ../../images | /images | 两级 ../ 跳到 /，不再向上 |
- 浏览器触发行为
浏览器会在当前窗口或标签页中加载目标地址。 - 服务器响应与页面渲染
- 若目标为 服务器端资源（如
.html、.php文件），浏览器向服务器发送请求，服务器返回对应文件内容，浏览器解析并渲染新页面。 - 若目标为 前端路由（如单页应用 SPA 的
/#/home），则由前端 JavaScript 拦截跳转，通过history.pushState()等 API 实现无刷新页面更新（AJAX 加载内容）。
2.2 HTML超链接
定义：HTML使用标签 < a > <a> <a>来设置超文本链接。在标签 < a > <a> <a> 中使用了 href 属性来描述链接的地址
- href
href是定义链接目标的属性。这链接的目的地可以是一个网页，一个文件，一个邮件等等。
< a h r e f = “ h t t p s : / / w w w . e x a m p l e . c o m " > 访问 E x a m p l e < / a > <a href=“https://www.example.com">访问 Example</a> <ahref=“https://www.example.com">访问Example</a>
- 定义链接的打开方式
| 元素 | 描述 |
|---|---|
| _blank | 在新窗口或新标签页打开链接 |
| _self | 在当前窗口或标签页打开链接 |
| _parent | 在父框架中打开链接 |
| _top | 在整个窗口打开链接，取消任何框架 |
< a h r e f = “ h t t p s : / / w w w . e x a m p l e . c o m " t a r g e t = “ _ b l a n k " r e l = “ n o o p e n e r " > 新窗口打开 E x a m p l e < / a > <a href=“https://www.example.com" target=“\_blank" rel=“noopener">新窗口打开 Example</a> <ahref=“https://www.example.com"target=“_blank"rel=“noopener">新窗口打开Example</a>
- rel：定义链接与目标页面的关系
nofollow: 表示搜索引擎不应跟踪该链接，常用于外部链接。
noopener 和 noreferrer: 防止在新标签中打开链接时的安全问题，尤其是使用 target=“_blank” 时。
noopener: 防止新的浏览上下文（页面）访问window.opener属性和open方法。
noreferrer: 不发送referer header（即不告诉目标网站你从哪里来的）。
noopener noreferrer: 同时使用noopener和noreferrer。例子: 安全链接
< a h r e f = “ h t t p s : / / w w w . e x a m p l e . c o m " t a r g e t = “ _ b l a n k " r e l = “ n o o p e n e r n o r e f e r r e r " > 安全链接 < / a > <a href=“https://www.example.com" target=“\_blank" \:\:rel=“noopener noreferrer">安全链接</a> <ahref=“https://www.example.com"target=“_blank"rel=“noopenernoreferrer">安全链接</a>
- download：提示浏览器下载链接目标而不是导航到该目标。
< a h r e f = “ f i l e . p d f " d o w n l o a d = “ e x a m p l e . p d f " > 下载文件 < / a > <a href=“file.pdf" download=“example.pdf">下载文件</a> <ahref=“file.pdf"download=“example.pdf">下载文件</a>
- title：定义链接的额外信息，当鼠标悬停在链接上时显示的工具提示。
< a h r e f = “ h t t p s : / / w w w . e x a m p l e . c o m " t i t l e = “访问 E x a m p l e 网站 " > 访问 E x a m p l e < / a > <a href=“https://www.example.com" title=“访问 Example 网站">访问 Example</a> <ahref=“https://www.example.com"title=“访问Example网站">访问Example</a>
- id：用于链接锚点，通常在同一页面中跳转到某个特定位置。
下个标题会详细解释
- hreflang: 指定链接的目标URL的语言
< a h r e f = “ h t t p s : / / w w w . e x a m p l e . c o m / e s " h r e f l a n g = “ e s " > 访问西班牙语网站 < / a > <a href=“https://www.example.com/es" hreflang=“es">访问西班牙语网站</a> <ahref=“https://www.example.com/es"hreflang=“es">访问西班牙语网站</a>
- type: 指定链接资源的MIME类型
< a h r e f = “ s t y l e . c s s " t y p e = “ t e x t / c s s " > 样式表 < / a > <a href=“style.css" type=“text/css">样式表</a> <ahref=“style.css"type=“text/css">样式表</a>
- class: 用于指定元素的类名（CSS中定义）
< a h r e f = “ h t t p s : / / w w w . e x a m p l e . c o m " c l a s s = “ e x t e r n a l − l i n k " > 外部链接 < / a > <a href=“https://www.example.com" class=“external-link">外部链接</a> <ahref=“https://www.example.com"class=“external−link">外部链接</a>
- style: 直接在元素上定义CSS样式
< a h r e f = “ h t t p s : / / w w w . e x a m p l e . c o m " s t y l e = “ c o l o r : r e d ; " > 红色链接 < / a > <a href=“https://www.example.com" style=“color: red;">红色链接</a> <ahref=“https://www.example.com"style=“color:red;">红色链接</a>
2.3 target属性
<a href="https://www.runoob.com/" target="_blank" rel="noopener noreferrer">访问菜鸟教程!</a>
target属性有很多值可以选择，此文章上面有_blank，_self等等
2.4 id属性
什么是书签？
HTML 书签通过给元素添加唯一的id属性实现(详细见代码）
<div id="section-top">锚点位置就是这行！</div> <!id是属性名，"section_top"是属性值。div是html元素>
作用就是为页面的某个位置分配一个唯一标识符，运行通过链接（如href=“#section-top”）直接定位到此地。好比，你去电影院，知道电影厅号，电影厅号就是页面，而电影厅里面还有很多座位，具体的位置（比如3排23座）就是一个标识符，能让你定位找到具体的位置，而且这个标识符是唯一的，即不可能在同一个电影厅内找到两个3排23座。
2.4.1 id属性在页面内和不同页面的定位
同页面跳转
通过href="#id"链接到当前页面的锚点。
<!-- 导航链接 -->
<a href="#tips">查看提示</a><!-- 锚点位置（书签） -->
<h2 id="tips">提示</h2>
<p>这里是提示内容...</p>
跨页面跳转
在 URL 中添加#id，从其他页面直接跳转到目标页面的锚点。
<!-- 从外部链接跳转到某页面的"tips"锚点 -->
<a href="https://example.com/article.html#tips">查看文章中的提示</a> <!浏览器解析 URL 时，会先加载article.html，再定位到id="tips"的元素。>
2.5 空链接
| 方法 | 作用 | 是否跳转 | 适用场景 |
|---|---|---|---|
| href=“#” | 定位到页面顶部 | 是 | 占位符，捕获点击事件 |
| href=“javascript:void(0)” | 阻止默认行为，不刷新页面 | 否 | 阻止跳转，配合JS使用 |
| href=“” | 刷新当前页面 | 是 | 需要页面刷新时 |
| href=“about:blank” | 打开空白页面 | 是 | 新窗口打开空白页面 |
| role=“button” | 链接表现为按钮，无默认行为 | 否 | 配合JS实现按钮功能，无跳转 |
3.HTML头部
头部元素就是位于 < h e a d > <head> <head>标签内的元数据标签，用于定义文档的基本信息（如标题、字符集、样式表、脚本引用等）。这些标签不会直接显示在网页内容中，但对网页的性能、兼容性、搜索引擎优化（SEO）和用户体验至关重要。
HTML < h e a d > <head> <head>元素包含了所有的头部标签元素。 < h e a d > <head> <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: < t i t l e > , < s t y l e > , < m e t a > , < l i n k > , < s c r i p t > , < n o s c r i p t > <title>, <style>, <meta>, <link>, <script>, <noscript> <title>,<style>,<meta>,<link>,<script>,<noscript> 和 < b a s e > <base> <base>。
| 标签 | 描述 |
|---|---|
| < h e a d > <head> <head> | 定义了文档的信息 |
| < t i t l e > <title> <title> | 定义了文档的标题 |
| < b a s e > <base> <base> | 定义了页面链接标签的默认链接地址 |
| < l i n k > <link> <link> | 定义了一个文档和外部资源之间的关系 |
| < m e t a > <meta> <meta> | 定义了HTML文档中的数据 |
| < s c r i p t > <script> <script> | 定于了客户端的脚本文件 |
| < s t y l e > <style> <style> | 定义了HTML文档内的样式文件 |
BUT 在此之前，先给个之前发过的代码简单看一下脑袋 头部标签内部的元素有哪些。
<!DOCTYPE html> <!声明文档类型为 HTML5。告诉浏览器使用 HTML5 标准解析页面，确保兼容性。必须放在 HTML 文件的第一行。>
<html> <!HTML 文档的根标签（起始标签）。所有HTML元素都要在其后>
<head> <!头部标签（起始标签），包含文档元数据。元数据不直接显示在页面上，用于描述文档（如编码、标题、引入资源）。>
<meta charset="utf-8"> <!UTF-8 是现代网页的标准编码>
<title>菜鸟教程(runoob.com)</title> <!设置页面标题。显示在浏览器标签页和收藏夹中。>
</head> <!头部结束>
3.1 title元素
<title> 标签定义了不同文档的标题。
<title> 在 HTML/XHTML 文档中是必需的。
<title> 元素:
1.定义了浏览器工具栏的标题
2.当网页添加到收藏夹时，显示在收藏夹中的标题
3.显示在搜索引擎结果页面的标题
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我这个标题取得好吗？</title>
</head><body>
文档内容......
</body></html>
打开.html文件，浏览器打开，点击收藏，去书签界面，如下图：
显然标签页的名字和收藏夹内页面的名称都是title内定义的名字。
3.2 base元素
< b a s e > <base> <base> 标签在 HTML 中用于为文档内的所有相对 URL 设置基准路径和默认打开方式。
1. 设置基准URL:
<head>
<base href="www.runoob.com/">
</head>
作用： 页面中的所有相对链接都会自动以http://www.runoob.com/为前缀，最终解析为:www.runoob.com/page.html
比如:
<base href="https://example.com/"><!-- 以下链接会被解析为：https://example.com/images/logo.png -->
<img src="images/logo.png"><!-- 以下链接会被解析为：https://example.com/ -->
<a href="/">首页</a>
2. 统一链接打开方式
<base target="_blank">
作用： 所有链接默认在新标签页打开，无需为每个链接单独添加 target="_blank"。
比如:
<base target="_blank"><!-- 无需添加 target 属性，自动在新标签页打开 -->
<a href="page.html">关于我们</a>
但是注意，如果链接已经是绝对路径了，那么base属性将没有意义。
3.3 link元素
< l i n k > <link> <link>标签定义了文档与外部资源之间的关系，常用于链接到样式表。也就是引入外部资源（如 CSS、图标、字体等）。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
解释一下：
- rel=“stylesheet”：声明资源类型为样式表（CSS）
- type=“text/css”：指定资源的 MIME 类型
- href=“mystyle.css”：指定 CSS 文件的路径（本例为相对路径，表示与当前 HTML 文件同级目录下的 mystyle.css）。
3.4 style元素
< s t y l e > <style> <style> 标签定义了HTML文档的样式文件引用地址。在 < s t y l e > <style> <style> 元素中你也可以直接添加样式来渲染 HTML 文档。
<head>
<style type="text/css">
body {background-color:yellow;
}
p {color:blue
}
</style>
</head>
3.5 meta元素
< m e t a > <meta> <meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。
例如：
为搜索引擎定义关键词：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容：
<meta name="description" content="免费 Web & 编程 教程">
定义网页作者：
<meta name="author" content="Runoob">
每30s刷新当前页面：
<meta http-equiv="refresh" content="30">
3.6 script元素
< s c r i p t > <script> <script>标签用于加载脚本文件，如： JavaScript。
后续看明天！