2024蓝旭春季第一次前端培训课

一、一些写在前面的介绍们

1. 网页与浏览器

什么是网页呢？

网页是图片、链接、文字、声音、视频等元素组成，其实就是一个html文件（后缀名为html）。

网页生成制作：前端人员书写HTML文件，然后浏览器打开，就能看到了网页。

关于浏览器

浏览器是网页显示、运行的平台，用于显示网页服务器或者文件系统的 HTML 文件内容，将服务器上网页文件中的文字、图像及其他信息显示在网页页面上。

常用浏览器：IE、火狐（Firefox）、谷歌（Chrome）、Safari以及Opera等。

不同的浏览器有不同的**浏览器内核**，浏览器内核也就是浏览器所采用的**渲染引擎**，负责对网页语法的解释（如 HTML、JavaScript）并渲染（显示）网页。它决定了浏览器如何显示网页的内容以及页面的格式信息。

不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同。

IE内核 Trident
谷歌内核 Webkit/Blink
火狐内核 Gecko
Safari内核 Webkit
Edge内核 Chromium

正是因为内核不同，所以浏览器有兼容问题

2. Web标准

Web标准是由W3C组织和其他标准化组织提出的一系列的规范和指南，用于确保网页在不同的浏览器和设备上能够正确地显示和运行。包括html、css和javascript等技术的规范 。

标准****说明结构结构用于对网页元素进行整理和分类，现阶段主要是HTML表现表现用于设置网页元素的版式、颜色、大小等外观样式，主要指CSS行为行为指网页模型的定义与交互的编写，主要指JavaScript
最佳方案 => 结构、样式、行为相分离

3. VScode插件推荐

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code ：讲中文
Live Server：在线调试部署
open in browser：将页面在浏览器中打开
Auto Import：根据引入的组件，自动导入提示
Auto Rename Tag：修改标签时自动完成另一侧标签的同步修改
Auto Close Tag：自动闭合HTML/XML标签

二、讲讲HTML吧

1. 什么是HTML

HTML的全称为超文本标记语言(Hyper Text Markup Language)，它不是一种编程语言，而是一种标记语言。HTML文档也叫做web页面。
它包括一系列标签，使用标签来描述网页。通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
HTML文本是由HTML命令组成的描述性文本。
HTML不是简单的纯文本，它可以说明文字，图形、动画、声音、表格、链接等。

2. 什么是标签

HTML标签是由尖括号包围的关键词，就像这样  =>  < html >

①标签的结构

标签由 < 、 / 、 > 以及一些标签名构成
许多标签有两部分成对出现，我们称之为双标签。标签对中的第一个标签为开始标签，第二个标签为结束标签，两个标签中间包裹的内容即为显示内容。
部分特殊的标签只有单个标签自成一体，我们称之为单标签。就像
、
...

②标签之间的关系

包含关系（父子关系）

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

并列关系（兄弟关系）

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

3. HTML基本结构框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我是标题</title>
</head>
<body>
    我是一些内容
</body>
</html>

***<!DOCTYPE html> ***是文档说明，写在html标签外面的第一行，用于声明文档类型是符合HTML5标准的。（是声明，不是标签！）其意义所在是告诉浏览器程序员所编写的代码是按照html的规范进行编写，浏览器也要按照html规范进行编译，防止浏览器在编译代码时出现乱码。
***<html> </html> ***是页面中最大的标签、文档的根标签，所有的其他的标签都是写在HTML标签里边的。它是文档开始与结束的标记，其间包含head和body两大部分。 lang ：语言种类，用来定义当前文档显示的语言。（en=>英文，zh-CN=>中文）
***<head> </head> ***是HTML头部标签，其间包含title标签及文档的元（meta）数据等，它编写的是不在浏览器的文档窗口中显示给用户的信息。
***<title> </title> ***是HTML标签结构标签，它定义的网页标题在浏览器标题栏显示。
***<body> </body> ***是HTML主体结构标签，它定义的是呈现在浏览器的文档窗口中的内容。
<meta*>:* <meta>标签是网页代码中<head>区的一个关键标签，其提供的信息虽然用户不可见，但却是文档的最基本的元信息（元信息是关于信息的信息，用于描述信息的结构、语义、用途和用法等）。它以定义文档的各种元数据，提供各种文档信息，通俗来说就是可以理解为提供了关于网站的各种信息。
```
  一个<meta>标签就是一项元数据，网页可以有多个<meta>。

  <meta>标签约定放在内容的最前面。

  <meta>标签主要的属性有四种，分别是charset、name、http-equiv和content。下面来具体介绍一下吧~
```

①charset

** charset ** 是<meta>标签的一个很重要的属性，是用来定义文档的字符编码。如果设置得不正确，浏览器可能无法正确解码，就会显示乱码。
** “UTF-8” **是其中的一种字符编码，它被称为万国码，囊括所有国家所需字符。charset=”UTF-8”是告知浏览器此页面属于什么字符编码格式，下一步浏览器做好“翻译”工作。
常见的字符编码有：gb2312、gbk、unicode、utf-8。

②name和content

    name属性用来定义元数据的名称，与content属性包含的值相关联，主要用于描述网页，以便于搜索引擎的查找。它的格式是这样的

<meta name="元数据的名称" content="具体的值">

下面列举了几个常用的name值

Keyword（关键字）

<meta name="keywords" content="meta, html, 标签" />

作用：keywords可以为搜索引擎提供的关键字列表，可以提高被搜索到的几率

Description（简介）

<meta name="description" content="meta标签的介绍和使用讲解" />

作用：description用来告诉搜索引擎你的网站主要内容，它的内容应该简短精确。一些浏览器将其用作书签页面的默认描述。

viewport（视口标签）

<meta name="viewport" content="width=device-width, initial-scale=1.0">

作用：提供有关视口初始大小的提示，仅供移动设备使用。
值取值描述*width一个正整数或者字符串device-width 以pixels(像素)为单位，定义viewport（视口）的宽度。*height一个正整数或者字符串device-height以pixels(像素)为单位，定义viewport（视口）的高度。initial-scale一个0.0到10.0之间的正数定义设备宽度与视口大小之间的缩放比率。maximum-scale一个0.0到10.0之间的正数定义缩放的最大值。minimum-scale一个0.0到10.0之间的正数定义缩放的最小值。user-scalable一个布尔值（yes或no）no为用户不能缩放网页，默认为yes

③http-equiv

http-equiv类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确的精确的显示网页内容。与之对应的属性值为content,content中的内容就是各个参数的变量值。

<meta http-equit="参数" content="参数值" />

4. HTML常用标签

** ①标题标签<h1 ~ h6> **

标题标签，共有六级

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

** ②段落标签

用于定义段落
浏览器会自动在每个
元素前后添加一个空行。

    <p>我是一个段落标签</p>
    <p>
        在源代码中，
        这一段
        包含很多行，
        但浏览器
        会忽略它。
    </p>

** ③换行标签
**

标签可以简单地开始新的一行
而当浏览器遇到
标签时，通常会在相邻的段落之间插入一些垂直的间距。
请使用
标签来插入换行符，而不是用它来增加段落之间的空白。

    <p>我将在这里换行<br/>我将在这里换行</p>
    <p>我是第三行的内容</p><br/>
    <p>我是第四行的内容</p>

** ④水平线标签

用于在 HTML 页面中分隔内容，或定义内容上的变化

** ⑤文本格式化标签 **

** 文字 **

这里给出加粗、倾斜、下划线、删除线的各两种表示方法
标签名****效果b、strong加粗i、em倾斜u、ins下划线s、del删除线
列表

有序列表：

（可以是数字或者字母的顺序）

无序列表：

列表中的项目可以用
来设置（可嵌套）

    <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>
    <!-- 可以设置从第几个序号开始 -->
    <ol start="500">
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ol>
    <ul>
        <li>1.1</li>
        <li>
            <ul>
                <li>2.1</li>
                <li>2.2</li>
                <li>2.3</li>
            </ul>
        </li>
        <li>3.1</li>
    </ul>