HTML笔记整理

最新推荐文章于 2024-06-19 01:21:22 发布

萌萌哒的小刘

最新推荐文章于 2024-06-19 01:21:22 发布

阅读量295

点赞数

分类专栏： HMLT5 文章标签： html html5

本文链接：https://blog.csdn.net/weixin_47725432/article/details/108120705

版权

HMLT5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、html5有哪些新特性、移除了那些元素
- 1、拖拽释放(Drag and drop) API
  - 想实现一个对页面某个节点的拖曳？如何做（使用原生JS）
1. 给需要拖拽的节点绑定mousedown,mousemove,mouseup事件
2. mousedown事件触发后，开始拖拽
3. mousemove时，需要通过event.clientX和clientY获取拖拽位置，并实时更新位置
4. mouseup时，拖拽结束
5. 需要注意浏览器的边界的情况
- 2、语义化更好的内容标签（header, nav,footer,aside,article,section）
- 3、音频、视频API(audio,video)
  autoplay 自动播放
  controls 控制面板
  loop 是否循环播放
```
<audio controls>   支持的格式：mp3  wav  ogg
  <source src="jamshed.mp3" type="audio/mpeg">  
</audio>

<video width="450" height="340" controls>   支持格式： MP4  webm  ogg
  <source src="jamshed.mp4" type="video/mp4">  
</video> 
```
- 4、本地离线存储
  - localStorage 长期存储数据，浏览器关闭后数据不丢失；
  - sessionStorage 的数据在浏览器关闭后自动删除
  1. 如何实现浏览器内多个标签页之间的通信?
    调用 localstorge、cookies 等本地存储方式
  2. 请描述一下cookies，sessionStorage和localStorage的区别？
    ①、他们的慨念是一样的都是为了存储数据，区别是web Storage是为了更大容量存储数据。
    ②、cookie的大小是受限的，并且每次你请求一个新的页面的时候cookie都会被发送过去，这样无形中浪费的带宽，另外cookie还需要指定的作用域，不可以跨域使用
    ③、web Storage有setItem,getItem,removeItem,clear等方法，但是cookie需要前端开发者自己封装setCookie,getCookie。但是cookie也是不可或缺的：cookie的作用是与服务器进行交互，作为http规范的一部分二存在，而webStorage仅仅是为了本地存储数据而生的
  3. cookie的弊端
    ①、cookie的数量和长度的限制。每个domain做多只能有20条cookie,每个cookie长度不能超过4kb,否则会被截掉
    ②、安全性问题。如果cookie被人拦截掉，那人就可以取得所有的session信息，即使加密于事无补，因为拦截者并不需要知道cookie的意义，只需要转发cookie就可以达到目的了
    ③、有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。
  4. cookie的作用
    ①、可以在客户端上保存用户数据，起到简单的缓存和用户身份识别等作用。
    ②、保存用户的登陆状态，用户进行登陆，成功登陆后，服务器生成特定的cookie返回给客户端，客户端下次访问该域名下的任何页面，将该cookie的信息发送给服务器，服务器经过检验，来判断用户是否登陆。
    ③、记录用户的行为。
  5. Cookie 的设置
    ①、客户端发送 HTTP 请求到服务器
    ②、当服务器收到 HTTP 请求时，在响应头里面添加一个 Set-Cookie 字段
    ③、浏览器收到响应后保存下 Cookie
    ④、之后对该服务器每一次请求中都通过 Cookie 字段将 Cookie 信息发送给服务器。
- 5、表单控件：date、time、email、url、search
- 6、画布(Canvas) API
  Canvas元素用于在网页上绘制图形，该元素标签强大之处在于可以直接html上进行图形操作
- 7、地理(Geolocation) API
- 移除的元素
  纯表现的元素:basefont、big、center、font、 s、strike、tt、u
  对可用性产生负面影响的元素：frame、frameset、noframes
- 如何区分html5
  DOCTYPE声明新增的结构元素、功能元素
二、前端注意哪些SEO?
SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是：为网站提供生态式的自我营销解决方案，让其在行业内占据领先地位，获得品牌收益。
- 合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可
- 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
- 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
- 重要内容不要用js输出：爬虫不会执行js获取内容
- 少用iframe：搜索引擎不会抓取iframe中的内容
- 非装饰性图片必须加alt
- 提高网站速度：网站速度是搜索引擎排序的一个重要指标
三、 web前端性能优化
- 1.尽量减少http请求数：对并发请求有限制
  减少DNS查找
  避免重定向
  让ajax可缓存
  延迟加载组件
  预加载组件
  减少DOM元素的数量
  跨域分离组件
  尽量少用iframe
  杜绝404
- 2.css:把样式表放到顶部
  避免使用css表达式
  选中舍弃@import
  避免使用滤镜
- 3.js:把脚本放到底部
  去除重复脚本
  尽量减少DOM的访问
  用智能的事件处理器
- 4.js,css:把javascript和css放到外面
  压缩javascript和css
- 5.图片：优化图片
  优化css sprite
  不要用HTML缩放图片
- 6.优化用户体验
  用户看到哪些内容就请求哪些内容
  加一个loading动画用户会感觉时间变快
- 7.移动端：保证所有的组件都小于25k
  把组件打包到一个复合文档里
  避免图片src属性为空
- 8.cookie:给cookie减肥
  把组件放在不含cookie的域下
- 9.服务器：使用CDN(content delivery network)
  填上Expires或者Cache-ControlHTTP头
  Gzip组件
  配置ETags
  尽早清空缓存
  对ajax用get请求
四、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么?
- 当发生一个url请求，浏览器会开启一个线程来处理这个请求
- 浏览器通过与远程web服务器TCP三次握手协商来建立一个TCP/IP链接
- 一旦TCP/IP链接建立，浏览器会通过该链接向远程服务器发送HTTP的GET请求
- web服务器提供资源服务，客户端开始下载资源
五、对浏览器内核的理解
- 主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎
- 渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核
- JS引擎：解析和执行javascript来实现网页的动态效果
- 最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎
六、访问cookie的限制条件（cookie：储存在用户本地终端上的数据）
- cookie 指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据。cookie 在网络系统中几乎无处不在，当我们浏览以前访问过的网站时，网页中可能会出现：你好 XXX。
- 跨域问题：
  cookie允许Web开发者保留他们的用户的登录状态。但是当你的站点有一个以上的域名时就会出现问题了。在cookie规范上说，一个cookie只能用于一个域名，不能够发给其它的域名。因此，如果在浏览器中对一个域名设置了一个cookie，这个cookie对于其它的域名将无效。
- 解决：1、通过nginx反向代理 2、jsonp方式请求
- 设置了HTTP only：
  如果在cookie中设置了HttpOnly属性，那么通过程序(JS脚本、Applet等)将无法读取到cookie信息，这样能有效的防止XSS攻击。
七、Cookie 的 SameSite 属性
- SameSite 是最近非常值得一提的内容，因为 2 月份发布的 Chrome 80 版本中默认屏蔽了第三方的 Cookie，这会导致阿里系的很多应用都产生问题，为此还专门成立了问题小组，推动各 BU 进行改造。
- 作用
  SameSite 属性可以让Cookie在跨站请求时不会被发送，从而可以阻止跨站请求伪造攻击（CSRF）。
- 属性值
  ①、Strict仅允许一方请求携带 Cookie，即浏览器将只发送相同站点请求的 Cookie，即当前网页 URL 与请求目标 URL 完全一致。
  ②、Lax允许部分第三方请求携带 Cookie
  ③、None无论是否跨站都会发送 Cookie
- 改变
  之前默认是 None 的，Chrome80 后默认是 Lax。
- 出现的问题
  ①、天猫和飞猪的页面靠请求淘宝域名下的接口获取登录信息，由于 Cookie 丢失，用户无法登录，页面还会误判断成是由于用户开启了浏览器的“禁止第三方 Cookie”功能导致而给与错误的提示
  ②、淘宝部分页面内嵌支付宝确认付款和确认收货页面、天猫内嵌淘宝的登录页面等，由于 Cookie 失效，付款、登录等操作都会失败
  ③、阿里在各大网站比如今日头条，网易，微博等投放的广告，也是用 iframe 嵌入的，没有了 Cookie，就不能准确的进行推荐
  ④、一些埋点系统会把用户 id 信息埋到 Cookie 中，用于日志上报，这种系统一般走的都是单独的域名，与业务域名分开，所以也会受到影响。
  ⑤、一些用于防止恶意请求的系统，对判断为恶意请求的访问会弹出验证码让用户进行安全验证，通过安全验证后会在请求所在域种一个Cookie，请求中带上这个Cookie之后，短时间内不再弹安全验证码。在Chrome80以上如果因为Samesite的原因请求没办法带上这个Cookie，则会出现一直弹出验证码进行安全验证。
  ⑥、天猫商家后台请求了跨域的接口，因为没有 Cookie，接口不会返回数据…
- 解决
  就是设置 SameSite 为 none。
八、doctype 的作用？严格模式与混杂模式如何区分？它们有何意义？
- DOCTYPE是document type (文档类型) 的缩写。 < !DOCTYPE > 声明位于文档的最前面，处于标签之前，它不是html标签。主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。
- 严格模式和混杂模式都是浏览器的呈现模式，浏览器究竟使用混杂模式还是严格模式呈现页面与网页中的DTD（文件类型定义）有关，DTD里面包含了文档的规则。比如：loose.dtd
- 严格模式：又称标准模式，是指浏览器按照W3C标准来解析代码，呈现页面
- 混杂模式：又称为怪异模式或者兼容模式，是指浏览器按照自己的方式来解析代码，使用一种比较宽松的向后兼容的方式来显示页面。
九、WEB标准以及W3C标准是什么?
- 标签闭合
- 标签小写
- 不乱嵌套
- 使用外链css和js
- 结构行为表现的分离
十、iframe有那些缺点？
- iframe会阻塞主页面的Onload事件
- 搜索引擎的检索程序无法解读这种页面，不利于SEO - iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
- 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题
十一、网页验证码是干嘛的，是为了解决什么安全问题
- 区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水
- 有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试
十二、title与h1的区别、b与strong的区别、i与em的区别？
- title 属性没有明确意义只表示是个标题，H1 则表示层次明确的标题，对页面信息的抓取也有很大的影响;
- strong 是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时，strong 会重读，而 B 是展示强调内容。
- i 内容展示为斜体，em 表示强调的文本；
十三、 xhtml和html有什么区别?
- 功能上的差别
  主要是XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页
- 书写习惯的差别
  XHTML 元素必须被正确地嵌套，闭合，区分大小写，文档必须拥有根元素