HTML知识点

Zoee
172 阅读13分钟

浏览器页面由哪三层构成？分别是什么？作用是什么？

构成：结构层、表示层、行为层；

分别是：HTML、CSS、Javascript；

作用：HTML实现页面结构，CSS实现页面的表现与风格，Javascript实现客户端的功能与业务。

Doctype作用？严格模式与混杂模式如何区分？他们有何意义？

Doctype的作用？

声明文件类型定义（DTD）

  • Doctype作用：声明位于文档的最前面，处于标签开始之前。用于告知浏览器的解析器，用什么文档类型规范来解析这个文档。

严格模式 & 混杂模式的区分？ 区分的意义？

  • 定义：

    • 严格模式（标准模式)：浏览器按照==W3C标准==来解析；
    • 混杂模式：向后兼容的解析方法，浏览器==用自己的方式==解析代码。

  • 如何区分？

    用DTD来判断

    • 严格格式DTD——严格模式；
    • 有URL的过渡DTD——严格模式，没有URL的过渡DTD——混杂模式；
    • DTD不存在/格式不对——混杂模式；【Doctype不存在或格式不正确会导致文档以混杂模式呈现。】
    • HTML5没有严格和混杂之分

  • 区分的意义？

    严格模式的排版和js运行模式以浏览器支持的最高标准运行。如果只存在严格模式，那么很多旧网站站点无法工作。

H5移除了哪些元素？

  1. 纯表现元素：
<basefont> <font> <u> <tt> <strike> <center> <big>
  1. 框架集：
<frame> <frameset> <noframe>

浏览器内核？

  • IE：trident内核
  • Firefox：Gecko内核
  • Safari：webkit内核
  • Opera / Chrome：Blink内核

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. 生命周期：

    1. cookie：可设置失效时间，否则默认关闭浏览器后失效；
    2. localStorage：除非被手动清除，否则永久保存；
    3. sessionStorage：仅在当前网页会话下有效，关闭页面或浏览器后就被清除

  2. 存放数据：

    1. cookie：4K左右；
    2. localStorage、sessionStorage：可以存放5M的信息；

  3. HTTP请求：

    1. cookie：每次都会携带在http请求头中，如果使用cookie保存过多数据会带来性能问题；
    2. localStorage、sessionStorage：仅在客户端即浏览器中保存，不参与和服务器的通信；

  4. 易用性：

    1. cookie：需要程序员自己封装，原生的cookie接口不友好；
    2. localStorage、sessionStorage：即可采用原生接口，亦可再次封装；

  5. 应用场景：

    从安全性来说，因为每次http请求都会携带cookie信息，这样子浪费了带宽，所以cookie应该尽可能的少用，此外cookie还需要指定作用域，不可以跨域调用，限制很多，但是用户识别用户登陆来说，cookie还是比storage好用，其他情况下可以用storage，localstorage可以用来在页面传递参数，sessionstorage可以用来保存一些临时的数据，防止用户刷新页面后丢失了一些参数。

localStorage、sessionStorage的区别：

  1. localStorage：用于持久化的本地存储，数据永远不会过期，关闭浏览器也不会丢失；
  2. sessionStorage：同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储
⚠️
localStorage：只能存储字符串，不能存储比如json的其他数据格式

HTML语义化？

在这里插入图片描述

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

  • 语义化标签：

    <header> <nav> <article> <session> <aside> <footer>

  • 语义化的意义：

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

link 与 @import 的区别？

  • 都是外部导入CSS文件，导入格式如下：

    <link rel="stylesheet" href="xx.css" type="text/css" />

    @import url('xx.css')

  • 区别：

  1. link是XHTML标签，除了加载CSS之外，还可以定义RSS等其他事务；

    @import属于CSS范畴，只能用于加载CSS。

  2. link引用CSS时，在页面载入时同时加载CSS；

    @import需要等待页面完全载入以后再加载CSS。

  3. link是XHTML标签，无兼容问题；

    @import是CSS2.1提出来的，低版本的浏览器不支持。

  4. link支持使用JavaScript控制DOM去改变样式；

    而@import不支持。

‘data’ 属性的作用是什么？

data-是H5新增的为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过 getAttribute方法获取。

需要注意的是：data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。 所有主流浏览器都支持 data-* 属性。即：当没有合适的属性和元素时，自定义的 data 属性是能够存储页面或 App 的私有的自定义数据。

浏览器内核的理解？

主要分成两部分：渲染引擎(layout engineer或 Rendering Engine) 和 JS 引擎。

  • 渲染引擎：负责取得网页的内容（HTML、 XML 、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。
  • JS引擎则：解析和执行 javascript 来实现网页的动态效果。 最开始渲染引擎和JS引擎并没有区分的很明确，后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

表单提交中Get和Post方式的区别？

  1. get是从服务器上获取数据，post是向服务器传送数据。

  2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到；

    post是通过HTTP post机制，将表单内各个字段与其内容放置在http header内一起传送到action属性所指的URL地址，用户看不到这个过程，因此比较安全。

  3. 对于get方式，服务器端用Request.QueryString获取变量的值；

    对于post方式，服务器端用Request.From获取提交的数据。

  4. get传送的数据量较小，不能大于2KB；

    post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。

  5. get安全性低，post安全性高。

HTML5 应用程序缓存和浏览器缓存有什么区别？

  • HTML5 引入了应用程序缓存，这意味着web应用可进行缓存，并可在没有因特网连接时进行访问。
  • 应用程序缓存为应用带来三个优势：
  1. 离线浏览：用户可在应用离线时使用它们
  2. 速度：已缓存资源加载的更快
  3. 减少服务器负载：浏览器将只从服务器下载更新过的或更改过的资源。

  • 应用程序缓存是 HTML5 的重要特性之一，提供了离线使用的功能，让应用程序可以获取本地的网站内容，例如 HTML 、 CSS 、图片以及 JavaScript 。这个特性可以提高网站性能，它的实现借助于 manifest 文件，如下：

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

  • 与传统浏览器缓存相比，它不强制用户访问的网站内容被缓存。

HTML5媒体标签？

  1. 音频 <audio>
  2. 视频 <video>
  3. 其他标签：
  • <embed> 标签定义嵌入的内容，比如插件。
  • <source> 对于定义多个数据源很有用。
  • <track> 标签为诸如 video 元素之类的媒介规定外部文本轨道。 用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。

为什么HTML5只需要写<!DOCTYPE HTML>

HTML5不基于SGML(标准通用标记语言)，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为。

meta标签用来做什么？

提供给机器解读的一些元数据。页面搜索引擎优化，定义页面实用语言等等。

1）http-equiv属性

  • charset(编码格式)
<!-- 定义网页文档的字符集 -->
<meta charset="utf-8" />
  • expires(过期时间)
  • refresh(特定时间内自动刷新跳转)
  • pragma(禁止浏览器从本地计算机缓存中访问页面内容no-cache)
  • windows-target(设定页面在窗口中以独立页面展示，防止被当成frame页调用)
  • set-cookie(自定义cookie)
<!-- 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" />
  • content-Type(字符集)

2）name+content

  • keywords(关键字)
  • description(主要内容)
  • robots(none不被检索)
  • author、generator(使用的制作软件)
  • copyright

3）移动端常用视口设置

<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)
 -->

src和href的区别？

  • 定义 （1）href：表示超文本引用，指向网络资源位置，建立当前文档和资源的连接，一般用于超链接

    （2）src：将资源嵌入到当前文档中，在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。==当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕==，图片和框架等元素也是如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

  • 作用结果 （1）href ：用于在当前文档和引用资源之间确立联系 （2）src ：用于替换当前内容

  • 浏览器解析方式 （1）当浏览器遇到href：会==并行下载资源并且不会停止对当前文档的处理==。(同时也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式) （2）当浏览器解析到src ：会==暂停其他资源的下载和处理，直到将该资源加载或执行完毕。==(这也是script标签为什么放在底部而不是头部的原因)

H5增加了表单（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" >

WEB标准 & W3C的理解

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

WebGL的理解

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

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 。

超链接target的取值 + 作用

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

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属性值相同

Canvas

是H5新增的一个标签，用于图形的绘制。

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

WebSocket 的实现和应用？

1. 什么是WebSocket？

WebSocket是HTML5中的协议，支持持久连续，http协议不支持持久性连接。Http1.0和HTTP1.1都不支持持久性的链接，HTTP1.1中的keep-alive，将多个http请求合并为1个

2. WebSocket是什么样的协议？具体的优点？

HTTP的生命周期通过Request来界定，也就是Request一个Response，那么在Http1.0协议中，这次Http请求就结束了。在Http1.1中进行了改进，是的有一个connection：Keep-alive，也就是说，在一个Http连接中，可以发送多个Request，接收多个Response。但是必须记住，在Http中一个Request只能对应有一个Response，而且这个Response是被动的，不能主动发起。

WebSocket是基于Http协议的，或者说借用了Http协议来完成一部分握手，在握手阶段与Http是相同的。我们来看一个websocket握手协议的实现，基本是2个属性，upgrade，connection。

基本请求如下：

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

多了下面2个属性：

Upgrade:webSocket
Connection:Upgrade

告诉服务器发送的是websocket

Sec-WebSocket-Key:x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat``Sec-WebSocket-Version: ``13
avatar
文章
阅读
粉丝