小宋爱睡觉
  • HTML
Crucials
2021-11-26

HTML

# href和src的区别重要

src

  1. 请求的资源会内嵌到元素当中，比如img中的src指向的图片链接
  2. 请求的资源会应用到文档内如script，浏览器会暂停其他资源下载 等待其加载 编译 执行完成

href

  1. 表示文本的引用，指向网络资源，建立和当前元素或本文档的链接关系
  2. 浏览器会并行下载，不会阻断其他资源的加载，如a、link标签

# img的title和alt的区别

  • title通常当鼠标滑动到元素上的时候显示
  • alt是<img>的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提图片高可访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

# 语义化理解

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

优点

  1. 对机器友好，有利于SEO 有利于搜索引擎的爬虫爬取有效信息
  2. 对开发者友好，可以增强可读性，使结构清晰，便于维护

# DOCTYPE的作用

doctype

doctype是html5一种标准通用标记语言的文档类型声明，目的是告诉浏览器以什么是html或xhtml)的文档类型来解析文档，不同的渲染模式会影响浏览器的css和js的解析

来自 MDN文档

有两种模式(通过document.compatMode获取)

  • CSS1Compat: 严格/标准模式(strict mode),默认浏览器用W3C标准解析，以其支持的最高标准呈现页面 <!doctype html>作用就是让浏览器进入标准模式
  • BackCompat：怪异模式(quick mode)使用怪异模式解析渲染，以一种比较宽松的向后兼容的方式显示

区分这两种模式

网页中的DTD，直接影响是什么模式

  1. 如果文档包含严格的DOCTYPE,就一般以严格模式呈现(严格DTD --- 严格模式)

  2. 包含过渡DTD和URI的DOCTYPE，也以严格模式，但有过渡DTD没有URI（统一资源标识符，就是声明最后的地址），就以混杂模式呈现（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）

  3. 没有doctype或形式不正确会以混在模式呈现

  4. html5没有DTD 就没有严格模式和混杂模式的区别

# Script中的defer和async 非常重要

共同点： 都是异步加载外部的js，加载时不会阻塞页面的解析

不同点：

执行顺序不同

  • 多个带有async属性的标签，不能保证执行的顺序，加载完就执行，有可能会阻塞html的渲染
  • 多个带有defer属性的标签，可以保证执行的顺序

脚本是否并行执行

  • async表示后续文档的加载和执行 与 js脚本的加载执行 是并行的(一般是计数器或者广告)
  • defer加载文档和js脚本的加载是并行的 但是 js脚本要等到文档所有元素解析完成后执行 即DOMContentLoaded 之前执行(一般是对执行顺序很重要的)

# 浏览器产生乱码的原因是什么

  • 网页源代码是gbk编码，内容的中文是utf-8编码，这样浏览器打开会出现html乱码
  • html网页编码是gbk，程序从数据库调出呈现是utf-8编码的内容也会造成编码乱码
  • 浏览器不能自动监测网页编码，造成网页乱码

解决办法

  1. 使用软件编辑html网页内容

  2. 如果网页编码为gbk，数据库存储的是utf-8 需要程序 查询 数据库数据 前进行 程序转码

  3. 浏览器找到转换编码的菜单

# iframe优缺点重要

iframe会创建包含另一个文档的内联框架

优点：

  • 用来加载速度比较慢的内容（广告）

  • 使脚本并行下载

  • 实现跨子域通信

缺点：

  • iframe会阻塞主页面onload事件

  • 无法被搜索引擎识别

  • 产生很多页面不易管理

  • iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载

使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题

# title和h1的区别 b和strong的区别 i和em的区别

  • strong有语义化起到加重语气的效果，b只是简单地加粗，搜索引擎更侧重strong

  • title没有明确意义只是标题 h1表示层次明确的标题，对信息抓取有很大影响

  • i内容展示为斜体，em表示强调的文本

# 行内元素，块级元素，空元素有哪些

行内元素有：a b span img input select strong

块级元素有: div ul ol li dl dt dd h1-h6 p

行内块元素(行内可替换元素) img input

空元素就是没有内容的html: 常见的有br hr img input link meta

# canvas和svg的区别重要

SVG概念

svg是基于xml描述的2d图形的语言，svg dom中的每个元素都是可用的，可以为某个元素附加js事件处理器，在svg中，每个被绘制的图形都可被视为对象，如果svg对象属性发生变化，浏览器可以自动重现图形

特点

  • 不依赖分辨率

  • 支持事件处理器

  • 适合大型渲染区域应用如google地图

  • 复杂度高会减慢渲染速度(任何过度使用dom的应用都不快)

  • 不适合游戏应用

canvas概念

canvas是画布，通过js绘制2d图形，逐像素渲染，位置改变就重新绘制

特点

  • 依赖分辨率

  • 不支持事件处理器

  • 弱文本渲染能力

  • 可以以.png .jpg保存结果图像

  • 适合图像密集型游戏

# 常见的meta标签

meta

由name和content属性定义，用户描述网页文档的属性

  1. charset 用于描述html编码类型
<meta charset="UTF-8" >
1
  1. keywords 页面关键词
<meta name="keywords"content="关键词" />
1
  1. description 页面描述
<meta name="description"content="页面描述内容" />
1
  1. refresh 页面的重定向和刷新
<meta http-equiv="refresh"content="0;url="" />
1
  1. viewport 适配移动端 可控制视口大小和比例
<meta name="viewport"content="width=device-width, initial-scale=1, maximum-scale=1">
1
  • 其中，content 参数有以下几种：

    • width viewport ：宽度(数值/device-width)

    • height viewport ：高度(数值/device-height)

    • initial-scale ：初始缩放比例

    • maximum-scale ：最大缩放比例

    • minimum-scale ：最小缩放比例

    • user-scalable ：是否允许用户缩放(yes/no）

  1. robot 搜索引擎索引方式
<meta name="robots"content="index,follow" />
1

  • 其中，content 参数有以下几种：

    • all：文件将被检索，且页面上的链接可以被查询；

    • none：文件将不被检索，且页面上的链接不可以被查询；

    • index：文件将被检索；

    • follow：页面上的链接可以被查询；

    • noindex：文件将不被检索；

    • nofollow：页面上的链接不可以被查询。

# head标签有什么用

用于定义文档头部，可以引用脚本、样式表

下列标签可以用于head

  • <base>

  • <link>

  • <meta>

  • <script>

  • <style>

  • <title> 唯一必须元素

# label的作用

当选择label标签时，浏览器会将焦点转到和label标签相关的表单控件上

两种使用方法

  1. label里面的for与id的值相同
<label for="mobile">Number:</label>
<input type="text" id="mobile"/>
1
2
  1. label包裹着input标签
<label>Date:<input type="text"/></label>
1

# img的srcset属性的作用

响应式页面根据屏幕密度不同设置不同的图片

<img src="/Users/xiaosong/Downloads/image-128.png" srcset="image-256.png 2x" />
1

上述代码在1x时候加载image-128.png 在 2x的时候加载imges-256.png，现在有1x 2x 3x 4x 每一个图片都设置4张图片加载就会很慢，于是有了新的srcset标准

<img src="image-128.png" srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w" sizes="(max-width: 360px) 340px, 128px" />
1
  • srcset指定图片地址和对应图片质量
  • sizes设置图片的尺寸临界点

语法：sizes="[media query] [length], [media query] [length] ... "

  • sizes就是指默认显示128px, 如果视区宽度大于360px, 则显示340px。
  • w单位理解为图片质量，可视区小于这个质量的值就会使用

# html5新特性

媒体标签

  • audio：音频
<audio src='' controls autoplay loop='true'></audio>
1

  • 属性：controls 控制面板

  • autoplay自动播放

  • loop="true"循环播放

  • video：视频

<video src=''poster='imgs/aa.jpg'controls></video>
1

  • 属性：poster 指定视频还没下载完毕，用户尚未点击播放前显示的封面，默认为第一帧，也可以自己设置

  • controls 控制面板

  • width height

  • source标签，兼容浏览器

<video>
  <source src='aa.flv'type='video/flv' />
  <source src='aa.mp4'type='video/mp4' />
</video>
1
2
3
4

表单

  • emails 验证当前输入邮箱地址是否合法
  • url 验证url
  • number 只能输入数字，自带上下增大减小箭头，max min分别设置最大最小
  • search 输入框最后会有一个小×，可以删除输入
  • range 提供一个范围，其中可以设置max和min以及value，value为默认值
  • color 提供颜色拾取器
  • time 时分秒
  • date 日期选择年月日
  • datetime 时间和日期(只支持Safari)
  • datetime-local 日期时间控件
  • week 周控件
  • month 月控件

表单的属性

  • placeholder 提示信息
  • autofocus 自动获取焦点
  • autocomplete="on"或off 需要表单提交过和有name属性 才能生效
  • required输入框不得为空
  • pattern 正则表达式（手机号：patte="^(+86)?\d{10}$"）
  • multiple 可选择多个文件或者多个邮箱
  • form="form表单的id"

表单事件

  • oninput 当输入框内容发生变化触发
  • onvalid 当验证不通过时触发
  • `进度条、度量条
  • progress标签：表示任务的进度(ie，Safari不支持)，max表示任务的进度，value表示已完成多少
  • meter 显示剩余容量或剩余库存
  • high/low：高低范围
  • max/min: 最大/小值
  • value: 当前度量衡

drag api

  • dragstart 事件主体是被拖放元素，再开始拖放被拖放元素时触发
  • drag 事件的主体是被拖放的元素，正在被拖放元素时触发
  • dragenter 事件主体是目标元素，在被拖放元素进入某元素时触发
  • dragover 事件主体是目标元素，再被拖放元素内移动时触发
  • dragleave 事件的主体是目标元素，在被拖放元素移除目标时触发
  • drop 事件主体是被拖放元素，在目标元素完全接收被拖放元素时触发
  • 事件主体是被拖放元素，在整个拖放操作结束时触发

# 前端需要注意哪些SEO 重要

  • 合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可
  • 语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
  • 重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
  • 重要内容不要用js输出：爬虫不会执行js获取内容
  • 少用iframe：搜索引擎不会抓取iframe中的内容
  • 非装饰性图片必须加alt
  • 提高网站速度：网站速度是搜索引擎排序的一个重要指标

# HTML5的离线储存怎么使用，工作原理能不能解释一下？

  • 在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件
  • 原理：HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示
  • 如何使用：
    • 页面头部像下面一样加入一个manifest的属性；
    • 在cache.manifest文件的编写离线存储的资源
    • 在离线状态时，操作window.applicationCache进行需求实现
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/offline.html
1
2
3
4
5
6
7
8
9

# 浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢

  • 在线的情况下，浏览器发现html头部有manifest属性，它会请求manifest文件，如果是第一次访问app，那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，那么就会重新下载文件中的资源并进行离线存储。
  • 离线的情况下，浏览器就直接使用离线存储的资源。
上次更新: 2022/03/05, 09:16:57
Copyright © 2021-2022 粤ICP备2021165371号