前端基础回顾 - HTML篇

1186浏览 · 14分钟阅读 · 2020.3.20
前端
HTML
前端基础回顾 - HTML篇

1. H5新特性

HTML5是定义HTML标准的最新版本，具有新的属性、元素和行为。

DOCTYPE

其doctype为<!DOCTYPE html>，并且兼容之后的版本。

扩展一下什么是doctype，它指的是文档类型，它不是标签，而是一个指令，告诉浏览器该用什么方式去解析文档，每个HTML文档都需要声明doctype。

HTML4版本中，由于HTML是基于标准标记语言（SGML）的，因此需要引用文档类型定义DTD，这里面定义了标记语言的规则，所以就会有下面的文档类型声明：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

而HTML5不是基于SGML的，它有自己的标准。

语义

  • 新增区块段落标签：<section>、<article>、<nav>、<header>、<footer>、<aside>。

  • HTML5音视频支持： <audio>、<video>

  • 其他语义标签：<data>、<time>、<figure>、<figcation>、<main>

  • 如何兼容旧浏览器

  1. 自己使用document.createElement(newTagName)来创建新标签，并为其加上默认样式。
  2. 使用Github上的html5shiv，只需要在head标签中引用该脚本即可。

通信

  1. Web Sockets
  2. Server-sent events
  3. WebRTC

多媒体

  1. Camera API
<input type="file" accept="image/*">

将event.files使用URL.createObjectURL(file)即可获取文件的预览地址。

  1. HTML5音视频标签
  2. WebRTC

3D，图像和效果

  1. Canvas标签
  2. WebGL
  3. SVG

性能和集成

  1. Web Workers多线程
  2. 新的JS即时编译引擎
  3. History API(vue-router的实现基础)
  4. contentEditable富文本编辑
  5. 拖放
  6. requestAnimationFrame更优秀的JS动画性能
  7. 全屏API
  8. 在线和离线事件

设备访问

  1. Camera API 访问操作摄像头
  2. 触控事件，更好适配移动端
  3. 地理位置定位
  4. 检测设备方向（横竖屏）
  5. 指针锁定API

2. H5语义化的意义

  1. 语义化标签易于搜索引擎的抓取，让它们知道哪些内容是重要的。
  2. 文档结构更加清晰，比起div更容易找到某些代码块。
  3. 屏幕阅读器能为视觉阅读障碍提供更好的标识。

3. 行内元素与块级元素的区别

  1. 块状元素
  • 宽度默认100%
  • 可自动换行
    常用：address, div, form, h1-6, hr, ul, ol, table
  1. 行内元素
  • margin top/bottom设置无效
  • 高度设置无效，由内容或者line-height确定
    常用：a, br, i, img, input, button, span, textarea

4. 网页图片格式

  1. 图片压缩分类：
  • 无压缩
  • 无损压缩（无失真压缩），可逆压缩。
  • 有损压缩（有失真压缩），不可逆压缩。
  1. 图片格式分类
  • gif
    采用LZW压缩算法进行编码，是一种无损的基于索引色的图片格式。每个像素只有8位，所以颜色只有2^8=256种，所以它的特点是：尺寸小、支持透明和动画、色彩单一。
  • jpg
    有损压缩。可表示颜色2^24种，色彩丰富，用于表现原图，渐变，尺寸略大。
  • png-8
    采用无损压缩。克表示颜色2^8种，相比于gif对透明有更好的支持，尺寸也更小，但是不支持动画。
  • png-24
    采用无损压缩。支持透明，色彩丰富，图片质量堪比原图，但是尺寸比jpg更大。
  • webp
    Google开发的新图像格式。支持有损压缩、无损压缩、透明和动画。相同视觉体验下有更小的尺寸，但是兼容上还是个问题。
    31574388795a9fea579c556_articlex.png
  1. Retina屏优化

首先我们得知道啥是Retina屏，首先它是苹果公司提出并委托制造的。在同分辨率情况下，比如4*4的分辨率，正常的显示器会有4*4=16个像素点，但是Retina屏会根据使用场景（手机300/平板260/笔记本电脑200），每一个像素点会替代成更多的像素，也就是用多个像素点替换一个，可能就会有(4*2)*(4*2)=64个像素点，也就是用4个像素点去替换一个。这实际上就是提升了设备的分辨率，变成了8*8。

但是如果直接在设备上提供这么高分辨率的屏幕，那么我们现在很多网站应用都会不被适配。因为这些像素点更小，界面会被整体缩小，比如原来4px的字体，看上去就只有1/4。这些像素点合起来看做为一个为的就是不改变系统中对分辨率/像素的处理。

但是对于视频/图片这样的特殊格式，Retina屏会一比一的将像素映射出来，也就是会更细腻！

原来4*4分辨率的图片，在Retian屏上，就会出现模糊的情况，所以对于Retian屏，我们需要提供更高分辨率的图片。
这个具体得牵涉到移动端适配的问题了！

5. src和href

  1. href (Hypertext Reference) 表示链接到一个网络资源，被链接的网络资源会被加载，并且不会阻塞当前文档的加载和解析。
  2. src (Source) 会将一个网络资源加载并替换掉当前元素，页面的加载和解析会阻塞，直到该资源加载完毕。

另外，h5还为script标签提供了async和defer两个属性：

  • 当使用async时，脚本会异步加载，不会阻塞文档加载解析。
  • 当使用defer时，脚本会在文档解析完毕后才进行加载。

6. 常用HTML实体

HTML实体字符能够转义敏感字符，类似<，>，这能有效避免一些脚本注入攻击。

我们可以用HTML实体去代替这些字符，并且在显示的时候，还是原字符。

常用HTML实体：
空格 &nbsp;
< &lt;
> &gt;
© &copy;

并且因为浏览器会将多个空格压缩成一个，使用空格实体就不会被压缩。

7. link标签和@import的区别

link标签 @import
是html标签，无兼容问题 css2.1才支持
除了css，还能处理像favicon，RSS事务等 只能导入css
随着页面加载而加载 等到页面加载完毕后才加载（可能出现闪烁）

8. meta标签

定义其他标签无法定义的内容

属性

1. charset

定义页面的字符编码，建议UTF-8，而且有一些编码格式存在跨站脚本攻击风险。

示例：

<meta charset="utf-8">

2. content

配合http-equiv和name使用，作为其值。

3. http-equiv

由于其值都对应着http的某个请求头，所以叫做http-equiv(alent)，常用有以下几个值：

content-security-policy

设置CSP请求头，防止XSS攻击

refresh

重新加载页面或者重定向到其他页面，需提供一个正整数表示多少秒后开始。
重定向中的content为;url=

示例：

<meta http-equiv="refresh" content="3">

<meta http-equiv="refresh" content="3; url=http://example.com">

4. name

相当于mete标签中的键值

application-name

应用名称，一般网站不需要设置。

author

文档作者

description

文档描述，SEO重要

keywords

文档关键词，多个可用用,分割，SEO重要

referrer

控制什么情况下发送的HTTP请求头附带referrer

color-schmeme

颜色方案/主题

可选值：normal，[dark|light]+，only light

这个需要配合media的prefers-color-scheme使用

<meta name="color-scheme" content="dark light" />
<link rel="stylesheet" href="./dark.css" media="(prefers-color-scheme: dark)" />
<link rel="stylesheet" href="./light.css" media="(prefers-color-scheme: light)" />

这样设置后，当浏览器启用深色模式时，浏览器会加载dark.css。

robots

告诉爬虫是否爬取网站

值 描述 适用引擎
index 允许建立索引（默认） All
noindex 不允许建立索引 All
follow 允许继续爬取页面上的链接（默认） All
nofollow 不允许爬取页面上的链接 All

只有正规的爬虫引擎会遵守这些规则（可能吧），别指望用这个来保护你的网站。
也可以用robots.txt来存储这些规则

viewport

配置和视口相关的参数，仅适用于移动端，常见可配置参数：

width

定义了视口的像素宽度，可以是正整数或者device-width

initial-scale

定义了视口的缩放，可以是0.0 - 10.0

user-scalable

控制用户是否可以缩放页面，浏览器的设置可以覆盖该规则。

9. 常见的浏览器内核

浏览器引擎分为渲染引擎和JS引擎，一般说的浏览器内核指的是渲染引擎。
一般不同的浏览器采用的都是自己的内核。

浏览器 渲染引擎 JS引擎
IE Tritend Chakra
Chrome Blink V8
Safari WbeKit Nitro
Opera Blink V8
Firefox Gecko SpiderMonkey
Edge EdgeHTML/Blink Chakra

课后小练习

  1. 制作一个视频以及音频播放器，包括自定义基础控制功能。
  2. Camera API 尝试

部分资料参考

  1. MDN-HTML5
  2. browser-engines
上一篇 Linux命令行以及Shell脚本 - 基础篇
下一篇 HTML基础 - 视频播放