前端三剑客 | 青训营笔记

Assam
153 阅读10分钟

这是我参与「第四届青训营 」笔记创作活动的的第5天.

H5新增特性

1.语义化标签

  • header：头部标签
  • main：页面内容标签(一个网页中只能有一个main)
  • footer：底部标签
  • nav：导航
  • section：空白独立的区域标签

2.音频(audio)、视频API(video)

  • 使用controls允许用户控制播放；
  • 使用autoplay决定音频、视频是否自动播放；
  • 使用loop决定是否循环播放

3.新增本地存储WebStorage

  • localStorage生命周期是永久，只能手动删除。
  • sessionStorage仅在当前会话下生效，关闭页面或浏览器后被清除。
  • 都是存储在客户端的，不参与和服务器之间的通信，存储大小为5MB。
  1. 新增画布(Canvas) API
  • 在页面中设定一个区域，宽和高，就可以用来绘制简单的2D图形，使用WebGL绘制3D图形
  1. 地理(Geolocation) API
  • 通过这个API，JavaScript代码可以访问到用户当前的位置信息
  1. 拖拽释放(Drag and drop) API
  • 在进行拖放操作时，DataTransfer 对象用来保存被拖动的数据。它可以保存一项或多项数据、一种或者多种数据类型。

1. 前端介绍

  1991年8月6日，世界上第一个服务器和第一个网站在欧洲核子研究中心上线，万维网的发明人--蒂姆·伯纳斯·李爵士，。

  前端工程师负责编写网页的源代码，浏览器负责将网页渲染成我们想要的样子。

  由于市面上有很多种浏览器，在万维网的初期，网页编写并没有标准，于是就出现了这种情况：

image.png

                   不同的浏览器现实的不一样

  于是伯纳斯李1994年建立万维网联盟（W3C），W3C的出现为了制订网页开发的标准，使同一个网页在不同的浏览器中有相同的效果。

  现在我们编写的网页都需要遵循W3C的规范。

  根据W3C标准，一个网页主要由三部分组成：结构、表现和行为。

image.png

  • 结构：HTML用于描述页面的结构
  • 表现：CSS用于控制页面中元素的样式
  • 行为：JavaScript用于响应用户操作

  通过不断的迭代，网页不再是最初的万维网版本：

  HTML4=>XHTML2.0=>HTML5

  使用文档声明(doctype)来告诉浏览器当前网页的版本。

```
     <!-- html5的文档声明，不区分大小写 -->
     <!doctype html>
     <!-- 或者 -->
     <!Doctype HTML>
```

2. 列表

  html中的列表一共有三种：

  • 有序列表：使用ol标签来创建有序列表，使用li表示列表项
  • 无序列表：使用ul标签来创建无序列表，使用li表示列表项
  • 定义列表：使用dl标签来创建定义列表，使用dt表示定义的内容，使用dd来对内容进行解释说明

3. 超链接

超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置。

使用a标签来定义超链接，href属性指定跳转的目标路径，值可以是一个外部网站的地址，也可以写一个内部页面的地址。

超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素。

    <a href="https://www.baidu.com">Website</a>  // 跳转外部链接直接写地址即可
    <a href="./test1.html">超链接1</a>           // 跳转内部链接

当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径，会以./或../开头

  • ./ 表示当前文件所在目录，可以省略不写
  • ../表示当前文件所在目录的上一级目录

target属性，用来指定超链接打开的位置可选值：

  • _self在当前页面中打开超链接，默认值
  • _blank在新建页面中打开超链接
    <a href="./demo.html">超链接——默认</a><br>
    <a href="./demo.html" target="_self">超链接——当前页面</a><br>
    <a href="./demo.html" target="_blank">超链接——新建页面</a><br>

20220729142756.gif

锚点跳转：

可以使用javascript:void(0);来作为href的属性，此时点击这个超链接什么也不会发生

可以直接将超链接的href属性设置为#，这样点击超链接以后页面不会发生跳转，而是转到当前页面的顶部的位置

可以跳转到页面的指定位置（锚点），只需将href属性设置#目标元素的id属性值（唯一的不重复）

4. 图片

图片标签用于向当前页面中引入一个外部图片。

img标签是一个自结束标签，这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）

属性

  • src：属性指定的是外部图片的路径
  • alt：图片的描述，这个描述默认情况下不会显示，有些浏览器会在图片无法加载时显示，搜索引擎会根据alt中的内容来识别图片
  • width：图片的宽度
  • height ：图片的高度
  • 宽度和高度中如果只修改了一个，则另一个会等比例缩放

注意

  • 一般情况在pc端，不建议修改图片的大小，需要多大的图片就裁多大
  • 但是在移动端，经常需要对图片进行缩放（大图缩小）

图片格式

颜色支持透明支持动态支持注释
jpeg(jpg)颜色丰富不支持透明不支持动态图适用一般
gif颜色单一支持简单透明支持动态图适用大多动态图
png颜色丰富支持复杂透明不支持动态图适用网页图片
webp(谷歌出版)颜色丰富支持复杂透明支持动态图具有其他所有优点，
并且文件较小，
但是兼容不好

base64

  • 将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片
    图片格式的选择
  • 一般都是一些需要和网页一起加载的图片才会使用base64.

图片格式的选择原则：

  • 图片效果一样的，选文件小的
  • 图片效果不一样的，选图片效果好的
  • 尽可能的兼顾和平衡图片效果和文件大小

5. 编码与字符集

所有的数据在计算机存储时都是以二进制的形式存储的，文字也不例外。

所以一段文字在存储到内存中时，都需要转换为二进制编码；当我们读取这段文字时，计算机会将编码转换为字符串，供我们阅读。

  • 编码：将字符转换为二进制码的过程。
  • 解码：将二进制码转换为字符的过程。
  • 字符集：编码和解码所采用的的规则（相当于密码本）。
  • 乱码：如果编码和解码所采用的字符集不同，就会出现乱码问题。

使用meta标签可以设置网页的字符集，避免乱码问题。

<meta charset="utf-8">

常见的字符集：

  • ASCII：美国信息交换标准代码；
  • ISO-8859-1：欧洲标准，向下兼容ASCII
  • GBK：汉字编码字符集；
  • UTF-8：针对Unicode的一种可变长度字符编码，也叫万国码

6. 字符实体与语义标签

（1）字符实体

  有些特殊符号在HTML中不能直接书写，我们就需要使用字符实体（转义字符）的语法。

&nbsp；空格
&gt；>
&gt；<
&amp；&

（2）语义标签

  语义标签：使用合适的语义标签去负责网页的结构。

  语义化使结构更加清晰，利于维护和阅读，也有利于SEO。

  元素又可以分为块元素和行内元素：

  块元素：块元素独占一行，网页中一般通过块元素来对页面进行布局。

块元素<h><p><div><button><ul>
作用标签段落无语义(主要布局元素)按钮无序列表

  行内元素：一行可以放多个，行内元素主要用来包裹文字。

行元素<a><input><b><strong><span>
作用超链接输入框加粗加粗(强调，语义化)空格

  一般情况下块元素中放行内元素，而不会在行内元素中放块元素。

  <p></p>标签中不能放任何块元素，如果放置了块元素，浏览器会对不符合规范的内容进行修正。

  HTML5 提供的新语义元素：

标签作用描述
<header>页眉介绍性的内容
<footer>页脚通常包含有关作者的信息、版权或文件链接
<nav>导航链接可以是当前文档内的，也可以是到其他文档的。常见例子是菜单、目录和索引
<main>文档主内容中心主题直接相关或扩展的内容
<article>文章自成一体，独立分发，可重复使用
<section>文档中的节没有一个更具体的语义元素来代表
<aside>页面内容以外的内容其内容与文档的主要内容只有间接的关系。经常以边栏或呼出框的形式出现
<mark>重要或强调的文本为参考或记事目的而被标记或突出的文本，表明其相关性和重要性
<summary><details> 标题为<details>指定一个摘要、标题或图例。点击<summary>可以切换<details>打开和关闭
<details>用户能够查看或隐藏的额外细节其中的信息只有被切换到 "打开 "状态时才可见。必须使用<summary>提供一个摘要或标签
<figure>自包含内容独立的内容，用
元素指定一个可选的标题。比如图示、图表、照片、代码清单等

  HTML5基本结构：

[代码片段](https://code.juejin.cn/pen/7125740065925365796)

7.canvas

  canvas是h5提供的新标签，可以用来绘制2D图形，是逐像素进行渲染的，一旦图形被绘制完成，它就不会继续得到浏览器的关注，如果位置发生变化，那么整个场景也需要重新绘制。

  特点：

  • 依赖分辨率；
  • 不支持事件处理器；
  • 文本渲染能力弱；
  • 能够以png或jpg格式保存结果图像；
  • 适合动态渲染和大数据绘制；

  SVG：使用XML绘制2D图形，每个被绘制的图形均被视为对象。如果svg对象属性发生变化，name浏览器能够自动重现图形；

  特点：

  • 不依赖分辨率；
  • 支持事件处理器；
  • 适合大型渲染区域的应用程序；
  • 不适合游戏应用；

  总结：

  • canvas是h5提供的新标签，SVG不是html5专属，存在历史比canvas久远；
  • canvas绘制图形通过JavaScript来实现，svg绘制通过标签来实现；
  • canvas绘制的图形为标量图（统计图），svg绘制的图形为矢量图（项目中的动态小图标、地图）；
  • canvas绘制的图形不能被引擎抓取，svg里面的图形可以被引擎抓取；

8.defer和async

  defer和async是script标签的两个属性，用于在不阻塞页面文档解析的前提下，控制脚本的下载和执行。

  • defer：开启新的线程来下载脚本文件，并使脚本文件解析完成后执行；

  注意：

  1. defer只适用于外联脚本，如果script标签没有指定src属性，只是内联脚本，不要使用defer
  2. 如果有多个声明了defer的脚本，则会按顺序下载和执行
  3. defer脚本会在DOMContentLoaded和load事件之前执行
  • async：用于异步下载脚本文件，下载完成后立即解释执行代码；

  注意：

  1. 只适用于外联脚本
  2. 如果有多个声明了async的脚本，其下载和执行也是异步的，不能确保彼此的先后顺序
  3. async会在load事件之前执行，但并不能确保与DOMContentLoaded的执行先后顺序
avatar
文章
阅读
粉丝