HTML知识点（必知必会）

Tsuki_
1,292 阅读10分钟

1，html元素布局分类有哪些

  • 内联元素(display:inline)：无法设定宽高，元素大小由内容大小决定，不会自动换行，从左到右排列，内部不能嵌套块级元素
  • 块级元素(display:block)：会自动换行，宽度默认父元素的宽度，高度默认内容高度
  • 内联块级元素(display:inline-block)：可以设置宽高，排列方式从左向右

2，html中b标签和strong标签的区别

  • b：为了加粗而加粗
  • strong：为了标明重点加粗 （盲人使用阅读设备strong会重读，b不会）

3，减少dom数量的办法

  • 使用伪元素替代dom元素解决方案，比如清除浮动，样式实现等。
  • 不滥用dom标签，结构合理。
  • 大列表使用虚拟列表从而只渲染当前视口能够展示的列表内容。

4，一次性给你大量dom如何优化

  • 缓存dom对象，比如循环插入大量dom对象，将父dom在循环外获取，循环内插入。
  • 使用document.createDocumentFragement创建文档碎片节点或者创建一个不在dom树上的节点，将大量dom一次性更新进入该节点，然后批量替换或插入dom中。
  • 将连续的appendChild替换成使用innerHtml，避免多次对dom造成影响（ps:appendChild向父元素最后一个子节点插入元素，innerHtml直接替换父元素下所有元素，appendChild添加的元素如果是页面上已有的元素，执行完原元素会被销毁。）

5,如何禁用a标签默认事件且禁用后如何实现跳转

  • 禁用a标签默认事件

    • a标签的href属性设置为href="javascript:;"||href="javascript:void(0);",通过执行空js代码，阻止跳转
    • 在a标签点击事件上使用e.preventDefault()与window.event.returnValue=false，后者兼容ie，以此阻止dom元素默认行为

  • 实现跳转

    • 点击事件 使用location.href = url 进行跳转。

6，什么是SEO

搜索引擎后台有个非常庞大的数据库，数据库存储海量关键词，每个关键词对应多个网址。这些数据由蜘蛛每天在互联网中收集获取，从一个链接爬行到另一个链接，对当前网页进行提炼关键词，之后将关键词与对应网站保存在数据库中，而当我们使用搜索引擎时，搜索引擎肯定会将与搜索词与数据库中存在的关键词对比，匹配程度越高的关键词对应的网站越是优先展示在前面。
而seo（seach engine optimization）就是在此基础上，对当前网站进行优化，改进网站对应关键词在搜索引擎中的排名，获取更多的曝光程度。

7，前端如何进行seo优化

前端进行seo优化无非是期望通过对网页的处理，使得爬虫对当前网站提取出的关键词更加贴切，提高网站关键词在搜索引擎中的排名。

  • 合理控制网站首页链接数量，链接足够多蜘蛛才能爬取内页，提高网站收录数量，但也不能太多，过多无意义链接不仅影响用户体验也会降低网站首页权重
  • 控制网站结构层次在三层以内，让蜘蛛跳转三次就能到到达网站任何一个内页，这意味着层次低越容易被蜘蛛收录，如果层次太多蜘蛛可能就不愿意继爬取
  • 导航尽量使用文字的方式，如果是图片也必须加入alt与title属性，告诉搜索引擎导航的定位
  • 利用布局，将重要的的html放在前面，便于蜘蛛的优先爬取
  • 控制页面大小，提高页面加载速度，如果页面加载速度很慢，蜘蛛就会离开
  • 页面的<meta keywords><meta description>尽量强调重点关键词，不要重复过分堆砌
  • 正文标题使用h1标签，h1标签自带权重，蜘蛛认为它最重要
  • 使用strong标签em标签而不是b标签，因为strong与em目的就是标明重点而加粗，在搜索引擎能够得到高度重视
  • 重要内容不要使用js输出，蜘蛛不会读取js输出，可以采用服务端渲染的办法将中药内容直接呈现在当前html中。
  • 蜘蛛只抓取get请求页面，不抓去post请求页面，合理控制页面请求方式
  • 外部链接需要加上el = nofollow属性，告诉蜘蛛不要去爬取，因为爬取外链可能蜘蛛就不回来了。
  • 不要使用iframe框架，蜘蛛一般不会读取其内容

8，什么是meta标签及其常用属性

meta标签位于html的head区域，它描述了当前网页的各种信息，比如页面的说明，关键字，修改日企等。对于用户它是不可见的，它服务于浏览器，搜索引擎及其他网络服务。

  • charset：定义文档字符编码
  • content：定义name属性或者http-equiv属性相关元信息
  • name：将content属性关联到一个名称
  • http-equiv：将content属性关联到http头部
// 当前网页字符编码utf-8
<meta charset="utf-8"/>
// 当前网页关键字，seo优化会用到
<meta name="keywords" content="便于seo优化"/>
// 描述当前网页干什么的
<meta name="description" content="当前网页说明"/>
// 声明网页字符编码
<meta name="content-Type" content="text/html"/>

9，script的async与defer区别

浏览器在解析html时遇到script标签会停止解析，先去下载执行js文件，再继续解析，所以如果该标签至于html前面会影响html解析给用户带来不好体验，而async与defer就是处理这个事情。

  • defer：defer加载完成时会等到dom解析生成完毕后执行 （当dom加载完会执行DOMContentLoaded事件，defer标签未加载或未执行完，将推迟该事件执行，直到defer标签加载执行完才会触发该事件 ），这就相当于将script标签放在html文档底部，且defer按原本script标签出现顺序执行
  • async：async加载完毕立即执行，所以js执行顺序与标签出现顺训很有可能不一样（js创建的脚本默认都是以async加载的）
  • ps：
    • 二者都是使得script标签异步加载，加载时不阻塞dom解析
    • 且对内联js脚本不起作用（<script>var a = 1</script>）
    • 脚本内不可是用document.write
    • 二者都会阻塞onload事件（onload意味着所有依赖资源加载完成执行）
    • defer阻塞DOMContentLoaded事件，async不阻塞（DOMContentLoaded：当dom资源下载解析完执行该事件，此时css图片等资源可能未加载完成）
    • defer与async同时出现，async优先级更高，除非浏览器不兼容async，则以defer为准。

11，preload，prefetch，dns-prefetch preconnect

preload：顾名思义，提前加载，通过preload声明告知浏览器提前加载该资源（仅下载资源，但不执行），当需要使用到该资源就可以立即使用

preload使用举例：比如图片懒加载，使用preload提前加载图片资源，当需要展示图片直接从缓存中获取即可，从而优化浏览器下载图片这段时间

preload使用方式：

  • 1，使用link标签加载（当然使用JS动态创建preload的link标签也可以）：

    <link rel="preload" href="/path/to/style.css" as="style">

  • 2，直接再http响应头加上如下preload字段：这种方式比link标签加载速度更快，还没到页面解析的时候浏览器根据响应头就去加载该资源了

    Link: <https://example.com/other/styles.css>; rel=preload; as=style
    • as=style 作用将当前资源下载优先级提升最高（对于HTML/CSS资源，它们下载优先级就是最高的），如果没有as属性则视为异步加载

prefetch：提前获取，区别于preload，它是在浏览器的空闲时间去加载资源，当使用到该资源可以立即使用，prefetch针对浏览器未来可能使用到的资源

prefetch使用举例：比如图片懒加载，使用prefetch提前加载图片资源，当需要展示图片直接从缓存中获取即可，从而优化浏览器下载图片这段时间，对于图片懒加载

prefetch使用方式：与preload相同

<!-- link 模式 -->
<link rel="prefetch" href="/path/to/style.css" as="style">

<!-- HTTP 响应头模式 -->
Link: <https://example.com/other/styles.css>; rel=prefetch; as=style

二者细节：

  • preload与prefetch资源加载存放位置：一般来说，加载的资源存放在内存中等待被使用，如果设置了强缓存字段，将放在http缓存中可以被不同页面使用

  • 正确使用preload与prefetch不会造成二次加载：说的是当页面使用该资源，该资源还没下载完不会重复下载，而是等到该资源下载完毕使用

  • 不正确使用preload与prefetch会造成二次加载：

    • 二者适用于不同场景，如果对同一个资源同时使用二者，则会造成资源二次下载

    • preload加载字体资源需设置cross origin属性，否则字体资源会加载两次，cross origin属性含义为当前请求使用匿名跨域模式

  • 当页面关闭时：会立即停止preload资源加载，但prefetch加载资源会继续加载不被中断

  • 与defer/async资源加载对比：

    • 区别于preload/prefetch，defer/async只适用于JS脚本资源，且加载之后立即执行，对于首屏使用JS脚本资源使用defer/async更好，对于非首屏使用脚本或其他资源，可以使用preload/prefetch

preload与prefetch使用：

  • 1，preload提前加载字体资源，解决字体闪烁：因为字体文件必须等到CSSOM下载完毕作用到页面之后才会开始下载，因此会出现字体样式闪烁，所以使用preload提前加载字体资源，如果在css资源解析完毕时字体资源已经加载完毕，即可解决字体闪烁问题

  • 2，preload提前加载第二屏内容，比如第二屏的图片资源（图片懒加载场景），从而使用户完成首屏浏览滚动能够更快看到次屏资源

  • 3，prefetch提前加载下一页面资源：当前页面加载完成后，可以分析用户可能点击页面，对这些页面使用prefetch提前加载，缩短下一页面首屏时间

dns-prefetch：顾名思义预先进行dns解析，dns解析需要耗时，所以我们当前页面如果可能跳转到别的网站可以使用dns-prefetch<link ref="dns-prefetch" href="xxx.com."/>，这将在浏览器空闲时解析该网站的dns，当我们前往该网站时就不需要在进行dns解析。

preconnect：顾名思义预先链接，dns-prefetch是提前dns解析，而preconnect则是提前完成与某个网站的连接，包括dns解析，tls协商，tcp握手，与dns-prefetch进行优化区别是一般我们知道用户可能一定会使用的某个链接可以使用preconnect，其他不确定的可以dns-prefetch，否则全部进行preconnect，不管用不用得到反而得不偿失。

12，什么是Html语义化及语义化的优点

h5出现后，新增了很多语义化标签，比如header，footer，nav，article等，能够清楚的向浏览器或者开发者解释当前内容的意义。

  • 便于开发者阅读代码，清晰代码结构
  • 利于Seo蜘蛛爬取数据时对数据的理解

2346

avatar
文章
阅读
粉丝