前端学习笔记Day01

2024-02-29 13:08:28

一、基础认识

基础概念

认识网页
- 网页有哪些部分组成？
  
  文字、图片、音频、视频、超链接
- 我们看到的网页背后的本质是什么？
  
  前端程序员所写的代码
- 前端代码通过什么软件转换成用户看到的页面？
  
  浏览器

五大浏览器和渲染引擎

五大浏览器
- 浏览器：是网页显示、运行的平台，是前端开发的必备利器
- 常见的五大浏览器：
  
  IE浏览器、火狐浏览器（FireFox）、谷歌浏览器（Chrome）、Safari浏览器、欧朋浏览器（Opear）

渲染引擎

渲染引擎（浏览器内核）：浏览器专门对代码进行解析渲染的部分

浏览器出品的公司不同，内在的渲染引擎也是不同的：

浏览器	内核
IE	Trident	IE、猎豹安全、360极速浏览器、百度浏览器
FireFox	Gecko	火狐浏览器内核
Safari	Webkit	苹果浏览器内核
Chrome/Opera	Blink	Blink其实是Webkit的分支

注意点：
- 渲染引擎不同，导致解析相同代码时的速度、性能、效果也不同的
- 谷歌浏览器的渲染引擎速度快、性能高、效果好，所以更吸引用户的喜爱(推荐)

Web标准

为什么需要Web标准
- 不同浏览器的渲染引擎不同，对于相同代码解析的效果会存在差异
  
  如果用户想看一个网页，结果用不同浏览器打开效果不同，用户体验极差!
- Web标准:让不同的浏览器按照相同的标准显示结果，让展示的效果统一!

Web标准的构成

构成	语言	说明
结构	HTML	页面元素和内容
表现	CSS	网页元素的外观和位置等页面样式(如:颜色、大小等)
行为	JavaScript	网页模型的定义与页面交互

Web标准的记忆方法
- Web标准要求页面实现:结构、表现、行为三层分离
  - 结构:HTML(决定了身体)
  - 表现:CSS(决定了样式美观)
  - 行为:JavaScript(决定了交互的动态效果)

HTML初体验
1. HTML的感知
  - HTML(Hyper Text Markup Language)中文译为:超文本标记语言专门用于网页开发的语言，主要通过HTML标签对网页中的文本、图片、音频、视频等内容进行描述
  - 案例:文字变粗案例体验构建一个网页，需要在网页中显示一个加粗的文字
    - 网页体验-构建基本网页的步骤
      1. 在代码文件夹中点击鼠标右击 → 新建文本文档 → 命名为:文字变粗案例.txt
      2. 双击这个文件，输入代码等内容 → 记得保存!
      3. 在文件上点击鼠标右键 → 重命名 → 修改文件后缀为为.html
      4. 双击文字变粗案例.html ，浏览器会自动打开文件并显示之前输入的内容
        
        文字要变粗体
        <strong>文字要变粗体</strong>
        <h1>文字要变成一号标题变成粗体</h1>
2. HTML骨架结构
  - HTML页面固定结构
    - 网页类似于一篇文章:
      - 每一页文章内容是有固定的结构的，如:开头、正文、落款等......
      - 网页中也是存在固定的结构的，如:整体、头部、标题、主体
    - 网页中的固定结构是要通过特点的 HTML标签 进行描述的
```
<html>
  <head>
    <title>网页的标题</title>
  </head>
  <body>
    网页的主体内容
  </body>
</html>
```
3. 开发工具的使用
  1. 为什么使用VS Code？
    - 通过文本编辑器，如:记事本，完全可以编写网页源代码
      
      但是效率......不忍直视
    - 实际开发中，注重开发的效率和便捷性，因此我们会使用一些开发工具
      
      开发工具有很多: Visual Studio Code 、 Webstorm 、 Sublime 、Dreamweaver、 Hbuilder
    - 前端开发神器:VS Code → 速度快、体积小、插件多
  2. VS Code使用前安装要求
    - VSCode 软件安装完毕
    - Chinese (Simplified) Language Pack for Visual Studio Code 简体中文插件安装完毕
    - open in browser 直接打开浏览器插件安装
  3. VS Code创建网页的步骤
    - 双击打开VS Code软件
    - 将day01代码文件夹用鼠标左键按住不放，拖拽到VS Code窗口中，文件夹会显示在左侧目录上
    - 点击目录上的+新建文件按钮创建页面，注意:文件后缀名需要是.html
  4. VS Code的基本快捷键
    - 快速生成标签:英文 + tab
    - 保存文件:ctrl + s(win)/command+s(mac)
      - 注意1:写完文件之后务必需要保存文件，否则网页无变化
      - 注意2:可以设置自动保存省去每次保存的麻烦
    - 快速查看网页效果:右击 → Open in Default Browser
      - 快捷键:alt + b(win)/option+b(mac)
      - 注意:必须安装了open in browser 插件
    - 快速生成结构标签:! + tab
      - 注意1:!必须是英文的，中文!无效
      - 注意2:必须保证当前文件后缀名是.html，否则无效
      - VS Code自动生成的骨架多了其他标签，之后会介绍
  5. VS Code的其他快捷键
    - 快速复制一整行:ctrl + c(win)/command+c(mac)
    - 快速粘贴一整行:ctrl + v(win)/command+v(mac)
    - 快速删除(剪切)一整行:ctrl + x(win)/command+x(mac)
      
      ......
    - 其他快捷键会在学习过程中用到一个介绍一个，同学们先需要把基础快捷键操作记牢!
语法规范
1. HTML的注释
  1. 什么是注释
    - 注释的作用:
      - 为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码
      - 浏览器执行代码时会忽略所有的注释
    - 注释的快捷键:
      - 在VS Code中:ctrl + /
  2. 注释的作用和写法
    - 注释的作用:
      - 为代码添加的具有解释性、描述性的信息，主要用来帮助开发人员理解代码
      - 浏览器执行代码时会忽略所有的注释
    - 注释的快捷键:
      - 在VS Code中:ctrl + /
2. HTML标签的构成
  - HTML标签的结构
    - 标签的结构图:
    - 结构说明:
      1. 标签由<、>、/、英文单词或字母组成。并且把标签中<>包括起来的英文单词或字母称为标签名
      2. 常见标签由两部分组成，我们称之为:双标签。前部分叫开始标签，后部分叫结束标签，两部分之间包裹内容**
      3. 少数标签由一部分组成，我们称之为:单标签。自成一体，无法包裹内容
  - 小结
    - 常见标签由几部分组成?称之为?
      
      两部分，双标签
    - 少数标签由几部分组成?称之为?
      
      一部分，单标签
    - 以下标签按照结构划分，分别属于哪一类标签?
```
<p>我是标签</p>
<h1>我是标签</h1>
<hr>
<br>
```
3. HTML标签的属性
  - HTML标签的属性
    - 标签的完整结构图:
    - 属性注意点:
      1. 标签的属性写在开始标签内部
      2. 标签上可以同时存在多个属性
      3. 属性之间以空格隔开
      4. 标签名与属性之间必须以空格隔开 5. 属性之间没有顺序之分
  - 小结
    - 双标签的属性需要写在开始标签还是结束标签中? • 开始标签
    - 标签上可以同时存在几个属性?
      
      多个
    - 标签名与属性之间，属性与属性之间以什么隔开? • 空格
4. HTML标签的关系
  - HTML标签与标签之间的关系可分为:
    - 父子关系(嵌套关系)
```
<head>
  <title></title>
</head>
```
    - 兄弟关系(并列关系)
```
<head></head>
<body></body>
```
  - 小结
    - 标签之间的关系可分为哪几种?
      - 父子关系(嵌套关系)
      - 兄弟关系(并列关系)
    - 以下标签之间的关系书写错误的是?
```
A:
  <head></head>
  <body></body>
B:
  <div><p></p></div>
C:
  <head><title></head></title>
D:
  <body><div></div></body>
答案：C
```

二、HTML标签学习

排版标签
1. 标题标签
  - 场景:在新闻和文章的页面中，都离不开标题，用来突出显示文章主题
  - 代码:h系列标签
```
  <h1>我是1级标题</h1>
  <h2>我是2级标题</h2>
  <h3>我是3级标题</h3>
  <h4>我是4级标题</h4>
  <h5>我是5级标题</h5>
  <h6>我是6级标题</h6>  
```
  - 语义:1~6级标题，重要程度依次递减
  - 特点:
    - 文字都有加粗
    - 文字都有变大，并且从h1 → h6文字逐渐减小
    - 独占一行
  - 注意点:h1标签对于网页尤为重要，开发中有特定的使用场景，如:新闻的标题、网页的logo部分
  - 小结
    - 标题标签一共有几个?分别表示什么含义?
      - h1标签:一级标题
      - h2标签:二级标题
      - h3标签:三级标题
      - h4标签:四级标题
      - h5标签:五级标题
      - h6标签:六级标题
    - 标题标签有哪些特点?
      - 文字都有加粗
      - 文字都有变大，但是从h1 → h6文字逐渐减小
      - 独占一行
2. 段落标签
  - 场景:在新闻和文章的页面中，用于分段显示
  - 代码
```
<p>我是一段文字</p>
```
  - 语义:段落
  - 特点:
    - 段落之间存在间隙
    - 独占一行
  - 小结
    - 段落标签的标签名是?
      - p标签
    - 段落标签有哪些特点?
      - 段落之间存在间隙
      - 独占一行
3. 换行标签
  - 场景:让文字强制换行显示
  - 代码:
```
<br/>
   
```
  - 语义:换行
  - 特点:
    - 单标签
    - 让文字强制换行
4. 水平线标签
  - 场景:分割不同主题内容的水平线
  - 代码:
```
<hr/> 

```
  - 语义:主题的分割转换
  - 特点:
    - 单标签
    - 在页面中显示一条水平线
文本格式化标签
1. 文本格式化标签的介绍
  - 场景:需要让文字加粗、下划线、倾斜、删除线等效果
  - 代码:
  标签说明标签说明
  
  b 加粗 strong 加粗
  
  u 下划线 ins 下划线
  
  i 倾斜 em 倾斜
  
  s 删除线 del 删除线
  - 语义:突出重要性的强调语境
2. 标签语义化(了解)
  - 实际项目开发中选择标签的原则:标签语义化
    - 即:根据语义选择对应正确的标签
    - 如:需要写标题，就使用h系列标签
    - 如:需要写段落，就使用p标签
    - ......
  - 好处:
    - 对人:好理解，好记忆
    - 对机器:有利于机器解析，对搜索引擎(SEO)有帮助
  - 推荐:
    - strong、ins、em、del，表示的强调语义更强烈!

标签	说明	标签	说明
b	加粗	strong	加粗
u	下划线	ins	下划线
i	倾斜	em	倾斜
s	删除线	del	删除线

媒体标签

图片标签
1. 图片标签的介绍
  - 场景:在网页中显示图片
  - 代码:
```
<img src="" alt="">
```
  - 特点:
    - 单标签
    - img标签需要展示对应的效果，需要借助标签的属性进行设置
2. 图片标签的src属性
  - 属性名:src
  - 属性值:目标图片的路径
  - 注意点:
    - 当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可(包括后缀名)
    - 路径的情况有很多
```
<body>
  <img src="./1.jpg" alt="" title="">
</body>
</html>
```
3. 图片标签的alt属性
  - 属性名:alt
  - 属性值:替换文本
    - 当图片加载失败时，才显示alt的文本
    - 当图片加载成功时，不会显示alt的文本
4. 图片标签的title属性
  - 属性名:title
  - 属性值:提示文本
    - 当鼠标悬停时，才显示的文本
  - 注意点:title属性不仅仅可以用于图片标签，还可以用于其他标签
5. 图片标签的width和height属性
  - 属性名:width和height
  - 属性值:宽度和高度(数字)
  - 注意点:
    - 如果只设置width或height中的一个，另一个没设置的会自动等比例缩放(此时图片不会变形)
    - 如果同时设置了width和height两个，若设置不当此时图片可能会变形
路径
1. 路径的介绍
  - 场景:页面需要加载图片，需要先找到对应的图片
  - 类似于:生活中两个人，我要去找你，需要通过一定的路径才能找到!
  - 同理:页面需要找到图片，也是需要通过路径才能找到
  - 路径可分为:
    - 绝对路径(了解)
    - 相对路径(常用
2. 绝对路径(了解)
  - 绝对路径:指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
  - 例如:
    - 盘符开头:D:\day01\images\1.jpg
    - 完整的网络地址:https://www.itcast.cn/2018czgw/images/logo.gif(了解)
3. 相对路径有哪三种情况:
  - 同级目录:直接写:目标文件名字!
  - 下级目录:直接写:文件夹名/目标文件名字!
  - 上级目录:直接下:../目标文件名字!
4. VScode中路径的快捷键
  - 同级和下级目录:./ 之后选择即可
  - 上级目录:../ 之后选择即可
音频标签
- 场景:在页面中插入音频
- 代码:
```
<audio src="./music.mp3" controls autoplay loop></audio>
```
- 常见属性:
  
  属性名功能
  
  src 音频的路径
  
  controls 显示播放的控件
  
  autoplay 自动播放（部分浏览器不支持）
  
  loop 循环播放
- 注意点:
  - 音频标签目前支持三种格式:MP3、Wav、Ogg

属性名	功能
src	音频的路径
controls	显示播放的控件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

视频标签

场景:在页面中插入音频

代码:

<video src="./video.mp4" controls autoplay muted loop></video>

常见属性:

属性名	功能
src	视频的路径
controls	显示播放的控件
autoplay	自动播放（部分浏览器不支持)→谷歌浏览器中写muted可以完成静音的自动播放
loop	循环播放

注意点:
- 音频标签目前支持三种格式:MP4 、WebM 、Ogg

链接标签
1. 链接标签的介绍
  - 场景:点击之后，从一个页面跳转到另一个页面
  - 称呼: a标签、超链接、锚链接
  - 代码:
```
<a href="https://www.baidu.com/">超链接</a>
```
  - 特点:
    - 双标签，内部可以包裹内容
    - 如果需要a标签点击之后去指定页面，需要设置a标签的href属性
2. 链接标签的href属性
  - 属性名:href
  - 属性值:点击之后跳转去哪一个网页(目标网页的路径)
    - 外部链接:
```
<a href="https://www.baidu.com/">百度一下</a>
```
    - 内部链接:
```
<a href="./目标网页.html">目标网页</a>
```
3. 链接标签的显示特点(了解)
  - a标签默认文字有下划线
  - a标签从未点击过，默认文字显示蓝色
  - a标签点击过之后，文字显示为紫色(清除浏览器历史记录可恢复蓝色)
4. 链接标签的target属性
  - 属性名:target
  - 属性值:目标网页的打开形式
    
    取值效果
    
    _self 在当前窗口中跳转
    
    _blank 在新窗口中跳转
1. 空链接(拓展补充)
  - 代码:
```
<a href="#">空链接</a>
```
  - 功能:
    - 点击之后回到网页顶部
    - 开发中不确定该链接最终跳转位置，用空链接占个位置

取值	效果
_self	在当前窗口中跳转
_blank	在新窗口中跳转

码农公寓

一、基础认识

二、HTML标签学习

相关文章