2020-05-16 17:43 门头沟学院前端工程师

关注

【HTML】知识点整理

1. HTML5上一个版本是HTML4.01

2. HTML文件类型声明（Doctype）定义+作用

定义

<!DOCTYPE html>

作用
声明位于文档中的最前面，处于标签之前。用于告知浏览器的解析器，用什么文档类型规范来解析这个文档。
严格模式 & 混杂模式
严格模式（标准模式）：浏览器按W3C标准解析执行代码。它的排版和JS运行是以浏览器支持的最高标准去运行。
混杂模式：是一种向后兼容的解析方式。模拟老式浏览器，以防止站点无法工作。

3. HTML语义化

语义化：正确的标签包含了正确的内容，结构良好，便于阅读。
语义化便签

<header>、<footer>、<section>、<article>、<nav>、<hgroup>、<aside>、<figure>

（1）<hgroup>：用于对网页或区段（section）的标题进行组合

<hgroup>
  <h1>Welcome to my WWF</h1>
  <h2>For a living planet</h2>
</hgroup>

（2）<figure>：添加插图和图题
使用<figure>标签添加插图，并设置浮动，相关的文本可以在其附近围绕。
<figure>标签内部还可以添加<figcaption>图题，其包含了对图片的完整说明。（添加图题后，alt文本就显得多余，可以去除）。

<figure>
  <p>黄浦江上的的卢浦大桥</p>
  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

语义化优点
（1）易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
（2）有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
（3）方便其他设备解析，如盲人阅读器根据语义渲染网页。
（4）有利于开发和维护，语义化更具有维护性，代码更好维护，与CSS3关系更加和谐。

4. 废除标签

废除一些网页美化方面的标签，使样式与结构分离更加彻底。

<big>、<u>、<font>、<basefont>、<center>、<s>、<tt>

5. 增加了表单（input）属性

<!-- 此类型要求输入格式正确的email地址 -->
<input type=email >
<!-- 要求输入格式正确的URL地址  -->
<input type=url >
<!-- 要求输入格式数字，默认会有上下两个按钮 -->
<input type=number >
<!-- 时间系列，但目前只有 Opera和Chrome支持 -->
<input type=date >
<input type=time >
<input type=datetime >
<input type=datetime-local >
<input type=month >
<input type=week >
<!-- 默认占位文字 -->
<input type=text placeholder="your message" >
<!-- 默认聚焦属性 -->
<input type=text autofacus="true" >

6. meta标签

charset属性

<!-- 定义网页文档的字符集 -->
<meta charset="utf-8" />

移动端常用视口设置

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<!-- 
  viewport参数详解：
  width：宽度（数值 / device-width）（默认为980 像素）
  height：高度（数值 / device-height）
  initial-scale：初始的缩放比例 （范围从>0 到10）
  minimum-scale：允许用户缩放到的最小比例
  maximum-scale：允许用户缩放到的最大比例
  user-scalable：用户是否可以手动缩 (no,yes)
 -->

http-equiv属性

<!-- expires指定网页的过期时间。一旦网页过期，必须从服务器上下载。 -->
<meta http-equiv="expires" content="Fri, 12 Jan 2020 18:18:18 GMT"/>
<!-- 等待一定的时间刷新或跳转到其他url。下面1表示1秒 -->
<meta http-equiv="refresh" content="1; url=https://www.baidu.com"/>
<!-- 禁止浏览器从本地缓存中读取网页，即浏览器一旦离开网页在无法连接网络的情况下就无法访问到页面。 -->
<meta http-equiv="pragma" content="no-cache"/>
<!-- 也是设置cookie的一种方式，并且可以指定过期时间 -->
<meta http-equiv="set-cookie" content="name=value expires=Fri, 12 Jan 2001 18:18:18 GMT,path=/"/>
<!-- 使用浏览器版本 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 针对WebApp全屏模式，隐藏状态栏/设置状态栏颜色，content的值为default | black | black-translucent -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

7. src & href 区别

定义
（1）href：表示超文本引用，指向网络资源所在位置。
（2）src：要把文件下载到html页面中去
作用结果
（1）href ：用于在当前文档和引用资源之间确立联系
（2）src ：用于替换当前内容
浏览器解析方式
（1）当浏览器遇到href：会并行下载资源并且不会停止对当前文档的处理。(同时也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式)
（2）当浏览器解析到src ：会暂停其他资源的下载和处理，直到将该资源加载或执行完毕。(这也是script标签为什么放在底部而不是头部的原因)

8. 常见浏览器的内核

浏览器	内核
IE	trident
Firefox	gecko
Safari	Webkit
Opera / Chrome	Blink

9. WEB标准 & W3C的理解

WEB标准：
网页主要有三部分组成： HTML（结构）+ CSS（表现）+JavaScript（行为）
W3C的理解：
（1）标签闭合、标签小写、标签不随便嵌套
（2）使用外链CSS和JS脚本，实现结构表现行为的分离。
（3）文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问。
（4）容易维护、改版方便。
（5）提高网站易用性。

10. WebGL的理解

WebGL（ Web Graphics Library ）是一种 3D 绘图标准，这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起。
优点：通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定， WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染，无需任何浏览器插件支持。

11. SVG

基于XML，由W3C制定的可缩放的矢量图形。

特点：
(1)任意放缩：用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。
(2)文本独立：SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。
(3)较小文件：总体来讲，SVG文件比那些 GIF 和 JPEG 格式的文件要小很多，因而下载也很快。
(4)超强显示效果：SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率。
(5)超级颜色控制：SVG图像提供一个 1600 万种颜色的调色板，支持 ICC 颜色描述文件标准、 RGB 、线 X 填充、渐变和蒙版。
(6)交互 X 和智能化： SVG 面临的主要问题一个是如何和已经占有重要市场份额的矢量图形格式 Flash 竞争的问题，另一个问题就是 SVG 的本地运行环境下的厂家支持程度。
浏览器支持：
Internet Explorer9，Firefox，Chrome ， Opera 和 Safari 都支持 SVG 。

12. 超链接target的取值 + 作用

取值	作用
_blank	在新窗口中打开链接
_self	默认值，在同一框架/窗口中打开
_top	在整个窗口中打开，因而会清除所有框架
_parent	在父级框架中打开
_framename	在指定框架中打开

13. 'data-'属性

data-为H5新增的为前端开发者提供自定义的属性，能够存储页面或 App 的私有的自定义数据。
这些属性集可以通过对象的 dataset 属性获取，不支持该属性的浏览器可以通过 getAttribute 方法获取
注意：data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。所有主流浏览器都支持 data-* 属性。

14. 浏览器内核

分为渲染引擎 + JS引擎

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。
JS引擎：解析 Javascript 语言，执行 javascript 语言来实现网页的动态效果

15. Label的作用

label标签来定义表单控制间的关系 , 当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。

<label for='Name'>Number:</label>
<input type=“ text “ name='Name' id='Name'/>
<label>Date:<input type='text' name='B'/></label>

注意:label的for属性值要与后面对应的input标签id属性值相同

16. Canvas

是H5新增的一个标签，用于图形的绘制。
<canvas>：只是一个图形容器，必须使用脚本（如，JS）来实现绘制图形。

17. 表单提交中Get & Post方式的区别

(1) get 是从服务器上获取数据， post 是向服务器传送数据。
(2) get 是把参数数据队列加到提交表单的 ACTION 属性所指的 URL 中，值和表单内各个字段一一对应，在 URL 中可以看到。 post 是通过 HTTP post 机制，将表单内各个字段与其内容放置在 HTML HEADER 内一起传送到 ACTION 属性所指的 URL 地址 , 用户看不到这个过程。
(3)对于 get 方式，服务器端用 Request.QueryString 获取变量的值，对于 post 方式，服务器端用 Request.Form 获取提交的数据。
(4) get 传送的数据量较小，不能大于 2KB 。 post 传送的数据量较大，一般被默认为不受限制。但理论上， IIS4 中最大量为 80KB ， IIS5 中为 100KB 。
(5) get 安全性低， post 安全性较高。

18. HTML5 应用程序缓存 & 浏览器缓存的区别

HTML5 引入了应用程序缓存。

<!doctype html>
<html manifest="example.appcache">
...
</html>

优势：
（1）离线浏览 - 用户可在应用离线时使用它们
（2）速度 - 已缓存资源加载得更快
（3）减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
区别：与传统浏览器缓存相比，它不强制用户访问的网站内容被缓存。

19. H5媒体标签

<audio>：定义音频内容

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
</audio>

<video>：定义视频内容

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
</video>

<source> ：定义多媒体资源<video> 和 <audio>
<embed>：定义嵌入的内容，比如插件。
<track>：为诸如<video> 和<audio>元素之类的媒介规定外部文本轨道。

20. H5存储类型

H5新增了客户端存储数据的两个对象，分别为：

localStorage - 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。【持久化的本地存储】
sessionStorage - 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。【会话级别的存储】

21. cookie、session、localStorage、sessionStorage的区别

cookie & session区别：
（1）cookie存放于客户端，session存放于服务端。
（2）cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗。
考虑到安全应当使用session。
（3） session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能。
考虑到减轻服务器性能方面，应当使用cookie。
（4）单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
cookie、localStorage、sessionStorage区别：
（1）都是在浏览器端/客户端存储的数据。
（2）生命周期：
Cookie：可设置失效时间，否则默认为关闭浏览器后失效
Localstorage:除非被手动清除，否则永久保存
Sessionstorage：仅在当前网页会话下有效，关闭页面或浏览器后就会被清除
（3）存放数据：
Cookie：4k左右
Localstorage和sessionstorage：可以保存5M的信息
（4）http请求：
cookie每次都会携带在http报文头中，会发送到服务器端。（即两边来回传送）
Localstorage和sessionstorage：仅在客户端中保存，不参与和服务器的通信。
（5）易用性：
Cookie：需要程序员自己封装，原生的cookie接口不友好。
Localstorage和sessionstorage：可采用原生接口，或者自己再次封装