一、初识前端开发之常用的HTML相关元素学习（URL/URI的补充）

Lyk 2022/4/11 HTML服务器浏览器内核注释HTML结构img元素a元素iframe元素HTML全局属性字符实体URL/URI元素语义化SEO字符编码

# 1、网页从编写到浏览器显示的整个过程（重要）。

HTML学习网站 (opens new window)

# 从用户角度
- 第一步：用户在浏览器输入一个网站；
- 第二步：浏览器会找到对应的服务器地址，请求静态资源（可以存放在世界上任何一个地方）；
- 第三步：服务器返回静态资源给浏览器；
- 第四步：浏览器对静态资源进行解析和展示；
# 从前端程序员角度
- 第一步：开发项目（HTML/CSS/JavaScript/Vue/React）
- 第二步：打包、部署项目到服务器里面

# 2、服务器是什么？

服务器本质也是一台类似服务器本质上也是一台类似于你电脑一样的主机；是用来存放数据的
服务器是二十四小时不关机的（稳定运行）；
服务器是没有显示器的；
服务器一般装的是Linux操作系统（比如centos）；

# 3、网页的三大组成部分是哪些？它们的作用是什么？

HTML：网页的内容结构；如人的结构
CSS：网页的美化（网页的视觉体验）；如人穿上漂亮的衣服
JavaScript：交互（网页的交互处理）；如人做出的一些动作

# 4、浏览器内核是什么？有哪些常见的浏览器内核？

浏览器内核是：在浏览器输入网址发送网络请求后，负责将服务器返回过来的静态资源，进行解析网页语法，并渲染(显示)网页
常见的浏览器内核：
- Trident （三叉戟）：IE、360安全浏览器、搜狗高速浏览器、百度浏览器、UC浏览器；
- Gecko（壁虎）：Mozilla Firefox；
- Presto（急板乐曲）-> Blink （眨眼）：Opera
- Webkit ：Safari、360极速浏览器、搜狗高速浏览器、移动端浏览器（Android、iOS）
- Webkit -> Blink ：Google Chrom

# 5、元素的结构是什么？有哪些单标签元素、双标签元素？

元素的结构:以下面代码为例

<!-- 
1.<div>是开始标签，
  </div>是结束标签
2.class='nav' 是元素的属性及属性值
  a：有些属性是公共的，每一个元素都可以设置； 
     比如：class、id、title属性
  b：有些属性是元素特有的，不是每一个元素都可以设置
     比如:meta元素的charset属性、img元素的alt属性等
3.文本:我是双标签元素->是元素的内容
4.<div class='nav'>我是双标签元素</div>这个整体我们称之为元素
-->
<div class='nav'>我是双标签元素</div>

1
2
3
4
5
6
7
8
9
10
11
12

单标签元素：br、img、hr、meta、input；

<input type="我是单标签元素">

双标签元素：html、div、body、head、h2、p、a元素；

<div>我是双标签元素</div>

# 6、注释的作用，HTML的注释如何编写。

什么是注释？
- 简单来说，注释就是一段代码说明
- 注释是只给开发者看的，浏览器并不会把注释显示给用户看
注释的意义:
- 帮助我们自己理清代码的思路, 方便以后进行查阅.
- 与别人合作开发时, 添加注释, 可以减少沟通成本.(同事之间分模块开发)
- 开发自己的框架时, 加入适当的注释, 方便别人使用和学习.(开源精神)
- 可以临时注释掉一段代码, 方便调试.
注释快捷键：ctrl + /

# 7、完整的HTML结构了解

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12

< !DOCTYPE html > 文档类型声明：
- HTML最上方的一段文本我们称之为文档类型声明，用于声明文档类型
- HTML文档声明，告诉浏览器当前页面是HTML5页面；
- 让浏览器用HTML5的标准去解析识别内容；
- 必须放在HTML文档的最前面，不能省略，省略了会出现兼容性问题；
< html >元素：
- 表示一个 HTML 文档的根（顶级元素），所以它也被称为根元素。所有其他元素必须是此元素的后代
- W3C标准建议为html元素增加一个lang属性，
  - 作用是:帮助语音合成工具确定要使用的发音; 帮助翻译工具确定要使用的翻译规则;
- 比如常用的规则：
  - lang=“en”表示这个HTML文档的语言是英文；
  - lang=“zh-CN”表示这个HTML文档的语言是中文；
< head >元素：
- 包含HTML head 元素规定文档相关的配置信息（也称之为元数据），包括文档的标题< title>，引用的文档样式< style >和脚本< script >等

<!--
· <title >Document< /title>：网页的标题
· <meta charset="UTF-8"> ：可以用于设置网页的字符编码，让浏览器更精准地显示每一个文字，
  不设置或者设置错误会导致乱码； 一般都使用utf-8编码，涵盖了世界上几乎所有的文字；
· <meta http-equiv="X-UA-Compatible" content="IE=edge">：IE浏览器适配
· <meta name="viewport" content="width=device-width, initial-scale=1.0"> : 移动端适配
-->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>

1
2
3
4
5
6
7
8
9
10
11

< body >元素：
- body元素里面的内容将是你在浏览器窗口中看到的东西，也就是网页的具体内容和结构。之后学习的大部分HTML元素都是在body中编写呈现的；

# 8、HTML常用元素之img，a的使用及对iframe元素的了解

# 8.1.img元素

我们应该如何告诉浏览器来显示一张图片呢？使用img元素。
img是image单词的所以，是图像、图像的意思；事实上img是一个可替换元素（ replaced element ）；
img有两个常见的属性：
- src属性：source单词的缩写，表示源；是必须的，它包含了你想嵌入的图片的文件路径。
- alt属性：不是强制性的，有两个作用
  1. 作用一：当图片加载不成功（错误的地址或者图片资源不存在），那么会显示这段文本；
  2. 作用二：屏幕阅读器会将这些描述读给需要使用阅读器的使用者听，让他们知道图像的含义；
- 对于src属性，我们可以设置网络图片（给一个图片地址即可）；也可以设置本地图片（设置本地图片路径即可，本地电脑上的图片，后续会和html一起部署到服务；）
- 本地图片的路径有两种方式：
  - 方式一：绝对路径（几乎不用）；
    1. 从电脑的根目录开始一直找到资源的路径；如：D:\Users\Administrator\桌面\newlykblog\lyk19990226.github.io\blogs\frontEnd\ECMAScript6~12\220408-02_images\1.jpg
  - 方式二：相对路径（常用）；相当于当前文件的一个路径；如：./images/1.jpg
    1. . 代表当前文件夹（1个.），可以省略【./或/】
    2. 代表上级文件夹（2个.）【../】
- 对于网页来说，不管什么操作系统（Windows、Mac、Linux），路径分隔符都是 /，而不是 \

# 8.2.a元素

在网页中我们经常需要跳转到另外一个链接，这个时候我们使用a元素；

HTML < a> 元素（或称锚（anchor）元素）：定义超链接，用于打开新的URL；
- a元素有两个常见的属性：
  - href：Hypertext Reference的简称
    1. 指定要打开的URL地址；
    2. 也可以是一个本地地址；
  - target：该属性指定在何处显示链接的资源。
    1. _self：默认值，在当前窗口打开URL；
    2. _blank：在一个新的窗口中打开URL；
    3. 其他不常用, 后面iframe可以讲一下；
- a元素 - 锚点链接：锚点链接可以实现：跳转到网页中的具体位置
  - 锚点链接有两个重要步骤：如下代码
    1. 第一步：在要跳到的元素上定义一个id属性；
    2. 第二步：定义a元素，并且a元素的href指向对应的id；
```
<p id='one'>文本内容1...</p>
<p id='two'>文本内容2...</p>
<p id='three'>文本内容3...</p>
<a href='#one'>找到文本内容1的位置</a>
<a href='#two'>找到文本内容2的位置</a>
<a href='#three'>找到文本内容3的位置</a>
```
1
2
3
4
5
6
- a元素 - 图片链接：a和img元素实现点击图片跳转链接
```
<a href='https://lyk19990226.github.io'>
  <img src='https://lyk19990226.github.io/img/common/logo.jpg' alt="博客"></img>
</a>
```
1
2
3
- a元素 – 其他URL地址：a元素一定是用来跳转到新网页的么？
```
<a href='https://github.com/coderwhy/HYMiniMall/archive/master.zip'>下载压缩包</a>
<a href='mailto:12345@qq.com'>发送邮件</a>

```
1
2
3

# 8.3.iframe元素

<!--
 利用iframe元素可以实现：在一个HTML文档中嵌入其他HTML文档
   ◼ frameborder属性
       用于规定是否显示边框
        ✓ 1：显示
        ✓ 0：不显示
   ◼ a元素target属性的其他值: 
       ✓_parent：在父窗口中打开URL
       ✓_top：在顶层窗口中打开URL
-->
<!-- 如以下面3个html文件为例 点击a元素测试即可理解 -->
<!-- 1.html -->
<a href="https://www.taobao.com" target='_parent'>淘宝一下</a>

<!-- 2.html -->
<iframe src="1.html"></iframe>

<!-- 3.html -->
<iframe src="2.html"></iframe>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 9、HTML常用的全局属性

我们发现某些属性只能设置在特定的元素中：比如img元素的src、a元素的href；
也有一些属性是所有HTML都可以设置和拥有的，这样的属性我们称之为 “全局属性（Global Attributes）”

全局属性有很多：全局属性 (opens new window)
常见的全局属性如下：(所有元素都有全局属性)
- id：定义唯一标识符（ID），该标识符在整个文档中必须是唯一的。其目的是在链接（使用片段标识符），脚本或样式（使用 CSS）时标识元素。
- class：一个以空格分隔的元素的类名（classes ）列表，它允许 CSS 和 Javascript 通过类选择器或者DOM方法来选择和访问特定的元素；
- style：给元素添加内联样式；
- title：包含表示与其所属元素相关信息的文本。这些信息通常可以作为提示呈现给用户，但不是必须的。
```

<div id="key" class="keyword" style="color:red;" title="这是一个块"></div>
```
1
2

# 10、字符实体

<!-- 思考：我们编写的HTML代码会被浏览器解析。 
◼ 如下代码是如何被解析的呢？
  如果你使用小于号（<），浏览器会将其后的文本解析为一个tag。 
  但是某些情况下，我们确实需要编写一个小于号（<）；
  这个时候我们就可以使用字符实体；
如下代码浏览器会将<hehehe<>解析成一个tag（浏览器展示：没有内容）
-->
<span><hehehe</span>  
  
<!--
◼ HTML 实体是一段以连字号（&）开头、以分号（;）结尾的文本（字符串）：
  实体常常用于显示保留字符（这些字符会被解析为 HTML 代码）和不可见的字符（如“不换行空格”）；
  你也可以用实体来代替其他难以用标准键盘键入的字符；
如下代码浏览器展示的内容:<hehehe>
-->
<span>&lt;hehehe&gt;</span>
  
<!--
◼ 常用的字符实体:可以用实体名称表示，也可用实体编号表示，因为实体编号不容易记，所以一般用实体名称来表示
  · 空格：实体名称(&nbsp;) ; 实体编号(&#160;)
  · 大于号>：实体名称(&gt;) ; 实体编号(&#60;)
  · 小于号<：实体名称(&lt;) ; 实体编号(&#62;)
-->

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 11、URL的了解及URI的补充

URL 代表着是统一资源定位符（Uniform Resource Locator）
- 通俗点说：URL 无非就是一个给定的独特资源在 Web 上的地址。
- 理论上说，每个有效的 URL 都指向一个唯一的资源；
- 这个资源可以是一个 HTML 页面，一个 CSS 文档，一幅图像，等等；
- URL的标准格式如下：

1、URL的格式:
  [协议类型]://[服务器地址]:[端口号]/[文件路径][文件名]?[查询]#[片段ID]

2、以下面完整的URL地址为例
  https://john.doe@www.example.com:123/forum/questions?tag=networking&order=newest#top
  · 协议类型：https / http
  · 用户信息：john.doe （少有）
  · 服务器地址：www.example.com  （输入后会被dns解析成ip地址，然后去对应ip的服务器请求数据）
  · 端口号：123  （服务器的不同服务）
  · 文件路径：forum/questions
  · 查询：?tag=networking&order=newest
  · 片段ID：#top  (a元素的描点)

1
2
3
4
5
6
7
8
9
10
11
12

URL和和URI的区别
- 和URI的区别：
  - URI = Uniform Resource Identifier 统一资源标志符，用于标识 Web 技术使用的逻辑或物理资源。；
  - URL = Uniform Resource Locator 统一资源定位符，俗称网络地址，相当于网络中的门牌号；
- URI在某一个规则下能把一个资源独一无二的识别出来。
  - URL作为一个网络Web资源的地址，可以唯一将一个资源识别出来，所以URL是一个URI；
  - 所以URL是URI的一个子集；
  - 但是URI并不一定是URL
- 官方解释：locators are also identifiers, so every URL is also a URI, but there are URIs which are not URLs.(定位器也是标识符，所以每个URL也是一个URI，但有些URI不是URL。)

# 12、什么元素语义化

元素的语义化：用正确的元素做正确的事情。
- 理论上来说，所有的HTML元素，我们都能实现相同的事情；
```

<style>
  .title {
    font-size:24px;
    margin:20px 0;
    font-weight:700;
  }
</style>
<h2>我是h2元素</h2>
<div class="title">div元素实现h2元素</div>
```
1
2
3
4
5
6
7
8
9
10
- 标签语义化的好处
  - 方便代码维护；
  - 减少让开发者之间的沟通成本；
  - 能让语音合成工具正确识别网页元素的用途，以便作出正确的反应；
  - 有利于SEO等等...；

# 13、SEO的了解

搜索引擎优化（英语：search engine optimization，缩写为SEO）是通过了解搜索引擎的运作规则来调整网站，以及提高网站在有关搜索引擎内排名的方式

# 14、字符编码的了解

计算机是干什么的?
- 计算机一开始发明出来时是用来解决数字计算问题的，后来人们发现，计算机还可以做更多的事，例如文本处理。
- 但计算机其实挺笨的，它只“认识”010110111000…这样由0和1两个数字组成的二进制数字；
- 这是因为计算机的底层硬件实现就是用电路的开和闭两种状态来表示0和1两个数字的。
- 因此，计算机只可以直接存储和处理二进制数字。
为了在计算机上也能表示、存储和处理像文字、符号等等之类的字符，就必须将这些字符转换成二进制数字。
- 当然，肯定不是我们想怎么转换就怎么转换，否则就会造成同一段二进制数字在不同计算机上显示出来的字符不一样的情况，
- 因此必须得定一个统一的、标准的转换规则
字符编码的发展历史可以阅读coderwhy的简书一篇文章：coderwhy文章 (opens new window)

Lyk-Blog

Choose mode

一、初识前端开发之常用的HTML相关元素学习（URL/URI的补充）

一、初识前端开发之常用的HTML相关元素学习（URL/URI的补充）

# 1、网页从编写到浏览器显示的整个过程（重要）。

# 从用户角度

# 从前端程序员角度

# 2、服务器是什么？

# 3、网页的三大组成部分是哪些？它们的作用是什么？

# 4、浏览器内核是什么？有哪些常见的浏览器内核？

# 5、元素的结构是什么？有哪些单标签元素、双标签元素？

# 6、注释的作用，HTML的注释如何编写。

# 7、完整的HTML结构了解

# 8、HTML常用元素之img，a的使用及对iframe元素的了解

# 8.1.img元素

# 8.2.a元素

# 8.3.iframe元素

# 9、HTML常用的全局属性

# 10、字符实体

# 11、URL的了解及URI的补充

# 12、什么元素语义化

# 13、SEO的了解

# 14、字符编码的了解

Lyk-Blog

一、初识前端开发之常用的HTML相关元素学习（URL/URI的补充）

一、初识前端开发之常用的HTML相关元素学习（URL/URI的补充）

# 1、网页从编写到浏览器显示的整个过程（重要）。

# 从用户角度

# 从前端程序员角度

# 2、服务器是什么？

# 3、网页的三大组成部分是哪些？它们的作用是什么？

# 4、浏览器内核是什么？有哪些常见的浏览器内核？

# 5、元素的结构是什么？有哪些单标签元素、双标签元素？

# 6、注释的作用，HTML的注释如何编写。

# 7、完整的HTML结构了解

# 8、HTML常用元素之img，a的使用及 对iframe元素的了解

# 8.1.img元素

# 8.2.a元素

# 8.3.iframe元素

# 9、HTML常用的全局属性

# 10、字符实体

# 11、URL的了解及URI的补充

# 12、什么元素语义化

# 13、SEO的了解

# 14、字符编码的了解

# 8、HTML常用元素之img，a的使用及对iframe元素的了解