yuadhのinterview_note
yuadh
2022-12-19
目录

HTML

# HTML文档结构

2个元素提供HTML文档的外部结构

  • DOCUTYPE element，告诉浏览器正在处理 HTML 文档
  • html element，他们间的内容标记网页，body标记网页可见内容
<!DOCUTYPE HTML>
<html>
    <title></title>
    <head>
        元数据提供文档
    </head>
    <body>
        <h1>
            
        </h1>
    </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12

# 🍅DOCUTYPE

DOCTYPE是document type (文档类型) 的缩写

文档类型声明，**告诉浏览器文档的类型，便于解析文档 ** 不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JS 脚本的解析 它必须声明在HTML⽂档的第⼀⾏.

浏览器渲染页面的两种模式

  • CSS1 Compat：标准模式（Strick mode），浏览器使用W3C的标准解析渲染页面 浏览器以其支持的最高标准呈现页面

  • BackCompat：怪异模式(混杂模式)(Quick mode)，默认模式，页面以一种比较宽松的向后兼容的方式显示

DOCTYPE 不存在或者形式不正确会导致HTML或XHTML文档以混杂模式呈现，就是把如何渲染html页面的权利交给了浏览器，有多少种浏览器就有多少种展示方式 因此要提高浏览器兼容性就必须重视

# HTML5特性

# 新增

  • 新的选择器 document.querySelector、document.querySelectorAll
  • 媒体播放的 video 和 audio 标签
    • 以前用的flash实现
  • 本地存储 localStorage 和 sessionStorage
  • 浏览器通知 Notifications
  • 语义化标签，例如 header，nav，footer，section，article 等标签
  • 地理位置 Geolocation
    • 鉴于隐私性，除非用户统一，否则不可获取用户地理位置信息
  • 离线应用 manifest
  • 全双工通信协议 websocket
  • 浏览器历史对象 history
  • 多任务处理 web worker
    • 运行在后台的JS，独立于其他脚本，不影响性能
  • 拖拽相关API
  • 增强表单控件 url，date，time，email，calendar，search
  • 页面可见性改变事件 visibilitychange
  • 跨窗口通信 PostMessage
  • 表单 FormData 对象
  • canvas+SVG
  • contenteditable——元素是否可被编辑

# 移除

  • 纯表现的元素：basefont、big、center、font、 s、strike、tt、u
  • 对可用性产生负面影响的元素：frame、frameset、noframes
  1. 不要将section作为页面容器
  2. 如果artcle、aside、nav更符合条件，就不要使用section

# HTML5比HTML4性能优化/标签

defer和sync

HTML5视频播放 流畅清晰，省电；HTML5游戏小巧流畅，画面质量高，易上手；HTML5广告摆脱了以前网页广告的悬浮、滚动和弹出，更容易让用户接受

HTML5代码贴合用户有明确释义，对开发者有利，搜索引擎也更容易识别到网页上的内容，让网站获得更多流量

HTML5可跨平台，多数核心代码不用重写，应用于包括移动应用、移动网站、PC网站、各种浏览器插件。对用户来说，不用下载APP，直接打开浏览器就能访问应用，避开各类应用商店的审核程序

实时更新，维护更简单，HTML5游戏是马上的、即时的更新。

使用门槛低，容易推广

HTML5应用导流入口很多，超级 App (如微信朋友圈)、搜索引擎、应用市场、浏览器……而原生 App 的流量入口只有应用市场

更精美的动画效果，更低的开发成本

应用HTML5技术做出来的网页能给人眼前一亮的感觉，基于html5和CSS3共同实现，HTML5还支持自适应，“一次设计，普遍适用。”不用单独开发，为企业降低开发成本

# 🍅语义化

根据内容的结构选择合适的标签

优点

  • 增加代码可读性，结构清晰，便于开发和维护
  • 对机器友好，文字表现力丰富，有利于SEO SEO(Search Engine Optimization)是搜索引擎优化，为了让用户在搜索和网站相关的关键词的时候，可以使网站在搜索引擎的排名尽量靠前
  • 方便设备解析（如盲人阅读器等）
  • 在没有 CSS 样式下，页面也能呈现出很好的内容结构、代码结构

常见的语义化标签

title ：页面主体内容

header ： 页眉通常包括网站标志、主导航、全站链接以及搜索框

nav ： 标记导航，仅对文档中重要的链接群使用

section ： 定义文档中的节（section、区段） 比如章节、页眉、页脚或文档中的其他部分

main，帮助到搜索引擎以及搜索工程师找到网站的主要内容

article： 文档、页面、应用或站点的独立部分，大体可独立分配/重复使用，可是论坛帖子、杂志、新闻、博客条目、用户评论，互动小工具、任何其他独立项目的内容，专用于结构化文章，特别是要发布的，如博客、页面内容、论坛帖子

aside ： 定义其所处内容之外的内容 如侧栏、文章的一组链接、广告、友情链接、相关产品列表等

footer：页脚，只有当父级是body时，才是整个页面的页脚

address： 作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）

# xhtml、html

ML——Markup Language（标记语言）

HTML——HyperText Markup Language，超文本标记语言

XHTML——Extensive Markup Language，可扩展标记语言，是以XML格式编写的HTML

XHTML目标是取代HTML，是更严格更纯净的HTML版本

# data-

data-属性赋予页面 私有 自定义 属性

存储的数据能够被JS利用

例如图片懒加载

# 渐进式渲染

提高网页性能，尽快呈现页面的技术

体现

图片懒加载：当用户滚动页面到图片部分时，JS加载并显示图像

确定显示内容优先级

初步加载HTML片段

# img标签title、alt

alt：图片加载失败时，显示alt的内容，利于SEO

title：鼠标移动到图片上时，显示title的内容

# src、href

src——source，指向外部资源位置，将资源下载到页面，解析到该元素时 浏览器对文件进行解析，编译和执行，导致整个页面加载被暂停

href—— Hypertext Reference ，超文本引用，指向资源位置，建立与目标文件的链接

浏览器遇到href 并行下载不会停止对当前文档的处理

所以建议 使用link加载css，而不是@import？？关css啥事？

# iframe

iframe 元素 可以在一个网站里面嵌入另一个网站内容

优点

  1. 实现一个窗口同时加载多个第三方域名下内容
  2. 增加代码复用性

缺点：

  1. 搜索引擎无法识别
  2. 影响首页首屏加载时间
  3. 兼容性差

# 限制iframe访问另一个页面

设置X-Frame-Options 响应头 ——是否允许网页通过iframe 嵌套

  • deny：完全禁止任何网页嵌套
  • sameorigin：只允许同源域名访问
  • allow-from url：允许url的域名可嵌套

设置Content-Security-Policy

CSP，内容安全策略，限定网页允许加载的资源，防范XSS攻击

"Content-Security-Policy": "frame-ancestors 'self'"//限定iframe的嵌套
1

判断 window.top 页面顶级窗口和 自身窗口 window.self 是否相等，若不等则是嵌入了iframe

# meta标签

Metadata——元数据，描述数据 的数据，主要描述数据 属性 的信息

meta**是文档级元数据元素，**表示那些不由其他HTML相关元素(<base>、<link>, <script>、<style>或 <title>）之一表示的任何元数据

目的：传递信息

<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />
1
  • width=device-width: 自适应手机屏幕的尺寸宽度
  • maximum-scale:缩放比例的最大值
  • inital-scale:缩放的初始化
  • user-scalable:用户可以缩放

# 属性

  • name 提供文档级别的元数据
  • charset 声明字符集，告诉文档使用哪种字符编码
  • itemprop 提供用户定义的元数据
  • http-equiv相当于HTTP头文件的作用
http-equiv="X-UA-Compatible"  IE浏览器兼容性设置
content="IE=edge" IE8/9及以后的版本都会以最高版本IE来渲染页面
1
2

# name属性

name和content一起使用，前者表示要表示的元数据的名称，后者是元数据的值

# description

是一段简短而精确的、对页面内容的描述

# keywords

与页面内容相关的关键词，使用逗号分隔。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类。

# viewpoint

为 viewport（视口）的初始大小提供指示。目前仅用于移动设备

<meta name="viewport" content="width=device-width, initial-scale=1.0">
1

width用来设置 viewport 的宽度为设备宽度;

initial-scale为设备宽度与 viewport 大小之间的缩放比例

user-scalable 可对页面进行缩放，no 禁止缩放

<meta 
  name="viewport" 
  content="
    width=device-width,  // viewport的宽等于屏幕宽，避免 横向滚动条
    initial-scale=1.0,  // 初始缩放为1
    maximum-scale=1.0, 
    user-scalable=no,  // 不允许手动缩放
    viewport-fit=cover // 缩放以填充满屏幕
    " 
>
1
2
3
4
5
6
7
8
9
10

# 标签

strong 重要文本
em 强调文本
b 粗体文本
big 大号字体效果

# 表引用的标签?

<cite></cite>
1

# 表列表的标签?

1、无序列表，使用“ul”标签定义

2、有序列表，使用“ol”标签定义

3、自定义列表，使用“dl”标签定义

# h标签，表段落的标签？

h标签有6个

<p></p>
1

# 🙋 Web Worker

JS采用单线程模型，前面任务没做完 后面的任务只能等着

web worker为JS创造多线程环境，允许主线程创建worker线程，将一些任务分配给后者运行，主线程运行的同时，worker线程在后台，互不干扰，worker完成计算任务 将结果返回 主线程

好处：计算密集型/高延迟的任务 由worker负担，主线程流畅

worker线程一旦创建 ，始终运行，不会被主线程上的活动打断，有利响应主线程的通信，缺点：worker消耗资源，不该过度使用

注意

  • 同源限制
  • DOM限制
  • 无法读取主线程所在网页的DOM对象，但可读navigator/location对象
  • worker线程和主线程不在同一个上下文环境，不能直接通信
  • worker不能执行alert()/confirm()，但可以发出Ajax请求

# Service Worker

是web worker的一个类型

本质 充当application与浏览器间的代理服务器，旨在创建有效的离线体验，拦截网络请求并基于网络是否可用，以及更新的资源是否驻留，在服务器上来采取适当的动作

运行在浏览器背后的独立线程， 通常用来 缓存文件，提高首屏速度

不仅是cache，还通过worker的方式进一步优化，基于H5的web worker，不会阻塞JS线程执行

SW最重要的是

  1. 后台线程：独立于当前网络线程
  2. 网络代理：在网页发起请求时代理，缓存文件

使用SW的话，传输协议必须是HTTPS。Service Worker涉及请求拦截，必须用HTTPS协议保障安全。它可让我们自由控制缓存文件、如何匹配缓存、如何读取缓存

编辑 (opens new window)
上次更新: 2023/02/07, 15:11:55
Git
JS

← JS→

最近更新
01
青训营真题day01
02-07
02
01day01-html与css
02-07
03
day02-js
02-07
更多文章>
Theme by Vdoing | Copyright © 2022-2023 yuadh | MIT License