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. 文本格式化

              文本格式化指的是对字体进行不同形式的修饰。例如：

                
          				
          				
          		
          菜鸟教程		
          						
          						
            
          加粗文本
          
                   
          斜体文本
          
          
          电脑自动输出
          
          
          这是下标和上标
                            
          
          

          预览效果如图：

          下面是一些常用的标签以及用途。 ⭐️ ⭐️

          ---

          1.1 HTML文本格式化标签

          HTML的常用文本格式化标签

          标签	描述
          	定义粗体文字
          	定义着重文字
          	定义斜体字
          	定义小号字
          	定义加重语气
          	定义下标字
          	定义上标字
          	定义插入字
          	定义删除字

                    	
          						
          						
          		
          菜鸟教程(runoob.com)			
          
          
          这个文本是加粗的
                           
          这个文本是加粗的
          
          定义着重字体
          
          
          这个文本字体放大
          
          这个文本是斜体的
          
          
          这个文本是斜体的
          
          
          这个文本是缩小的
          
          
          定义插入字
          
          
          定义删除字
          
          
          这个文本包含
          下标
          
          
          这个文本包含
          上标
          
          

          效果图预览：

          

          ---

          1.2 HTML"计算机输出"标签

          HTML"计算机输出“标签

          标签	描述
          	定义计算机代码
          	定义键盘码
          	定义计算机代码样本
          	定义变量
          	定义预格式文本

                    	
          						
          						
          		
          菜鸟教程(runoob.com)			
          
          
          	 定义计算机代码   
          	
          							
          	定义键盘码		
          	
          
          	定义计算机代码样本		 类似。>
          	
          
          	定义变量			
          	
          定义预格式文本
          		
          
          
          

          这几个标签在浏览器显示大差不差，不知道为什么，但是在csdn编辑器倒是很不一样，放上两个的对比：

          csdn:

          
          

          代码： 定义计算机代码 ： 代码：定义计算机代码： 代码：定义计算机代码：

          预览：定义计算机代码

          代码： 键盘码 ， c t r l + c 代码：键盘码，ctrl+c 代码：键盘码，ctrl+c

          预览：键盘码，ctrl+c

          代码： 计算机代码 : “ h e l l o w o r l d ” 代码：计算机代码:“hello world” 代码：计算机代码:“helloworld”

          预览：计算机代码:“hello world”

          代码： 变量， x ， y 代码：变量，x，y 代码：变量，x，y

          预览：变量，x，y

          定义预格式文本

          定义预格式文本

          定义预格式文本

          预览：

          定义预格式文本

          浏览器:

          预览：

          ---

          1.3 HTML 引文，引用及标签定义

          HTML 引文，引用，及标签定义

          标签	描述
          	定义缩写
          	定义地址
          	定义文字方向
          	定义长的引用
          	定义短的引用语
          	定义引用，引证
          	定义一个定义项目

                    	
          						
          						
          		
          菜鸟教程(runoob.com)			
          
          
          	
          The WHO was founded in 1948.
               
          	
          	Written by Jon Doe.
             
          	Visit us at:
          
          	Example.com
          
          	Box 564, Disneyland
          
          	USA
          	
          	
          该段落文字从左到右显示。
            
          该段落文字从右到左显示。
             
          	
          	
          About WWF
               				
          	
          Here is a quote from WWF's website:
          	      
          	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 标签，因为它们较长，需要独立的块来展示；而第三个引用使用了 q 标签，因为它比较短，可以内联显示。
          	
            
          	
                  
          Life is what happens when you're busy making other plans.
                  — John Lennon      
              
              
                  
          If you want to know what a man's like, take a good look at how he treats his inferiors, not his equals.
                  — J.K. Rowling, Harry Potter and the Goblet of Fire
              
              
          
                  In his famous quote, Einstein said: E=mc²     
              
          
          
          

          图片预览：

          

          ---

          2. HTML链接

              

          HTML链接

          定义：html链接用于网页之间的跳转。

          2.1链接跳转原理（有点乱可跳过）

              首先，HTML用标签 来定义目标地址，当我们点击其内的链接时。会发生以下步骤：

          1. 解析目标地址（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	两级 ../ 跳到 /，不再向上

            1. 浏览器触发行为

               浏览器会在当前窗口或标签页中加载目标地址。

            2. 服务器响应与页面渲染
            • 若目标为 服务器端资源（如 .html、.php 文件），浏览器向服务器发送请求，服务器返回对应文件内容，浏览器解析并渲染新页面。
            • 若目标为 前端路由（如单页应用 SPA 的 /#/home），则由前端 JavaScript 拦截跳转，通过 history.pushState() 等 API 实现无刷新页面更新（AJAX 加载内容）。

              2.2 HTML超链接

              HTML超链接

                  定义：HTML使用标签 来设置超文本链接。在标签 中使用了 href 属性来描述链接的地址

              1. href

                 href是定义链接目标的属性。这链接的目的地可以是一个网页，一个文件，一个邮件等等。

              访问 E x a m p l e 访问 Example 新窗口打开 E x a m p l e 新窗口打开 Example 安全链接 安全链接