首页

# meta 元素都有什么

# 元数据

元数据（meatdata）：用来构建 HTML 文档的基本结构，以及就如何处理文档向浏览器提供信息和提示，它们本身不是文档内容，但提供了关于后面文档内容的信息。如 title、base、meta 都是元数据元素。

# meta 元素介绍

  • meta 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。meta 元素可以定义文档的各种元数据，提供各种文档信息，通俗点说就是可以理解为提供了关于网站的各种信息。

  • html 文档中可以包含多个 meta 元素，每个 meta 元素只能用于一种用途，如果想定义多个文档信息，则需要在 head 标签中添加个 meta 元素。

  • meta 元素包含四大属性：charset、content、http-equiv、name。

属性 描述
charset 声明了页面的字符编码。常用的值有：UTF-8（Unicode 字符编码）、ISO-8895-1（拉丁字母表的字符编码）
content 通常配合 name 或 http-equiv 使用，能够给这两个属性提供一个值
http-equiv 可用作 HTTP 头部的某些作用，通过定义该属性可以改变服务器和用户代理的行为
name 用于定义页面的元数据。它不能与 http-equiv、charset 共存，通常是和 content 配合使用

interview

# meta 元素用途

meta 元素除了 charset 属性外，都是 http-equiv 属性或 name 属性结合 content 来使用。

1. name 指定名/值对定义元数据

<meta name="参数" content="具体描述信息" />
1

name 属性与 content 属性结合使用，name 用来表示元数据的类型，表示当前 meta 标签的具体作用；content 属性用来提供值。

<head>
  <title>示例</title>
  <meta
    name="keywords"
    content="描述网站内容的关键词，以逗号隔开，用于SEO搜索"
  />
  <meta name="application name" content="当前页所属Web应用系统的名称" />
  <meta name="description" content="当前页的说明" />
  <meta name="author" content="当前页的作者名" />
  <meta name="copyright" content="版权信息" />
  <meta
    name="renderer"
    content="renderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面"
  />
  <meta
    name="viewreport"
    content="它提供有关视口初始大小的提示，仅供移动设备使用"
  />
</head>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2. charset 声明字符编码

charset 属性为 HTML5 新增的属性，用于声明字符编码，有两种写法。

<!-- HTML5 推荐方式 -->
<meta charset="utf-8" />
<!-- 旧的HTML -->
<meta http-equiv="content-Type" content="text/html;charset=utf-8" />
1
2
3
4

提示

理论上，可以使用所有的字符编码，但是并不是所有浏览器都能够理解它们。

3. http-equiv 模拟 http 标头字段

http-equiv 属性与 content 属性结合使用，http-equiv 属性为指定所要模拟的标头字段的名称，content 属性用来提供值。

<meta http-equiv="参数" content="具体的描述" />

<!-- content-Type 声明网页字符编码 -->
<meta http-equiv="content-Type" content="text/html charset=UTF-8" />

<!-- refresh 指定一个时间间隔(以秒为单位),在此时间过去之后从服务器重新载入当前页面,也可以另外指定一个页面. -->
<!-- 2秒后在当前页跳转到百度 -->
<meta http-equiv="refresh" content="2;URL=http://www.baidu.com" />

<!-- X-UA-Compatible 浏览器采取何种版本渲染当前页面 -->
<!-- 指定IE和Chrome使用最新版本渲染当前页面 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<!-- catch-control 用于指定所有缓存机制在整个请求/响应链中必须服从的指令 -->
<meta http-equiv="cache-control" content="no-cache" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 常用 meta 属性

<!-- 声明文档使用的字符编码 -->
<meta charset="utf-8" />
<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 页面描述 -->
<meta name="description" content="不超过150个字符" />
<!-- 页面关键词 -->
<meta name="keywords" content="" />
<!-- 网页作者 -->
<meta name="author" content="name, email@gmail.com" />
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow" />
<!-- 为移动设备添加 viewport -->
<meta
  name="viewport"
  content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"
/>
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 http://bigc.at/ios-webapp-viewport-meta.orz -->

<!-- iOS 设备 begin -->
<meta name="apple-mobile-web-app-title" content="标题" />
<!-- 添加到主屏后的标题（iOS 6 新增） -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
<meta
  name="apple-itunes-app"
  content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"
/>
<!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no" />
<!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit" />
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 不让百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true" />
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320" />
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait" />
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait" />
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes" />
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true" />
<!-- UC应用模式 -->
<meta name="browsermode" content="application" />
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app" />
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no" />
<!-- iOS 设备 end -->

<!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileColor" content="#000" />
<!-- Windows 8 磁贴图标 -->
<meta name="msapplication-TileImage" content="icon.png" />

<!-- 添加 RSS 订阅 -->
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" />
<!-- 添加 favicon icon -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />

<!-- sns 社交标签 begin -->
<!-- 参考微博API -->
<meta property="og:type" content="类型" />
<meta property="og:url" content="URL地址" />
<meta property="og:title" content="标题" />
<meta property="og:image" content="图片" />
<meta property="og:description" content="描述" />
<!-- sns 社交标签 end -->
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

# 说一下减少 dom 数量的方法，一次性给你大量的 dom 如何优化？

# 减少 dom 数量的方法

  • 可以使用伪元素、阴影实现的内容尽量不使用 dom 实现，如清除浮动、样式实现等。

  • 按需加载，减少不必要的渲染。

  • 结构合理，语义化标签。

# 大量 dom 时的优化

当对 dom 元素进行一系列操作时，对 dom 进行访问和修改 dom 引起的重绘和重排都比较消耗性能，所以关于操作 dom，应该从以下几点出发：

1. 缓存 dom 对象

首先不管在什么场景下，操作 dom 一般都会先去访问 dom，尤其是像循环遍历这种时间复杂度可能会比较高的操作。那么可以在循环之前就将主节点、不必循环的节点获取到，在循环里就可以直接引用，而不必去重新查询。

let rootElem = document.querySelector("#app");
let childList = rootElem.child; // 假设全是dom节点
for (let i = 0; i < childList.len; j++) {
  /**
   * 根据条件对应操作
   */
}
1
2
3
4
5
6
7

2. 文档片段

利用 document.createDocumentFragment() 方法创建文档碎片节点，创建的是一个虚拟的节点对象。向这个节点添加 dom 节点、修改 dom 节点并不会影响到真实的 dom 结构。

我们可以利用这点先将我们需要修改的 dom 一并修改完，保存至文档碎片中，然后利用文档碎片一次性替换真实的 dom 节点。

let fragment = document.createDocumentFragment();
const operationDomHandle = (fragment) => {
  // 操作
};
operationDomHandle(fragment);
// 然后最后再替换
rootElem.replaceChild(fragment, oldDom);
1
2
3
4
5
6
7

这样就只会触发一次回流，效率得到很大提升。如果需要对元素进行复杂的操作（删减、添加子节点），那么我们应当先将元素从页面中移除，然后再对其进行操作，或者将其复制一个（cloneNode()），在内存中进行操作后再替换原来的节点。

var clone = old.cloneNode(true);
operationDomHandle(clone);
rootElem.replaceChild(clone, oldDom);
1
2
3

3. 用 innerHTML 代替高频的 appendChild

innerHTML 效率要高一些，因为直接解析字符串比创建 html 节点对象再生成 html 节点要快。

4. 最优的 layout 方案

批量读，一次性写。先对一个不在 render tree 上的节点进行操作，再把这个节点添加回 render tree。这样只会触发一次 dom 操作。使用 requestAnimationFrame()，把任何导致重绘的操作放入 requestAnimationFrame。

5. 虚拟 dom

这是 js 模拟 dom 树并对 dom 树操作的一种技术。virtual dom 是一个纯 js 对象（字符串对象），所以对它操作会高效。

利用 virtual dom，将 dom 抽象为虚拟 dom，在 dom 发生变化的时候先对虚拟 dom 进行操作，通过 dom diff 算法将虚拟 dom 和原虚拟 dom 的结构做对比，最终批量的去修改真实的 dom 结构，尽可能的避免了频繁修改 dom 而导致的频繁重排和重绘。

# a 标签默认事件禁掉之后如何做才能实现跳转？

通过 location.href 实现跳转。

const domArr = document.getElementsByTagName("a");
[...domArr].forEach((item) => {
  item.addEventListener("click", function() {
    location.href = this.href;
  });
});
1
2
3
4
5
6

# html 标签 b 和 strong 的区别

两者虽然在网页中显示效果一样，但实际目的不同。

  • b 标签对应 bold，即文本加粗，其目的仅仅是为了加粗显示文本，是一种样式风格需求。

  • strong 标签的意思是加强，表示该文本比较重要，提醒读者/终端注意。为了达到这个目的，浏览器等终端将其加粗显示。

  • b 标签是为了加粗而加粗，strong 标签是为了标明重点而加粗。

最重要的区别就是样式标签和语义化标签的区别。最容易理解的场景就是，盲人朋友使用阅读设备阅读网络文字时：strong 标签会重读，b 标签不会。

由这道题还可以扩展到 html 的语义化。

# 知道语义化吗？说说你理解的语义化，如果是你，平时会怎么做来保证语义化？说说你了解的 HTML5 语义化标签？

# HTML 语义化

很多时候我们写 html，为了方便都会直接使用 div 和 span 标签，再通过 class 来确定具体样式。网站哪一部分为标题，哪一部分为导航，哪一部分为头部和底部，都只能通过 class 进行确定。

但 class 命名规范却又没有一套统一的标准，因此导致很多时候无法确定整体网站的结构。

因此，在 html5 出现之后，添加了关于页面布局结构的新标签。而在 html5 书写过程中，根据不同的内容使用合适的标签进行开发，即为语义化。

在编程中，语义指的是一段代码的含义（这个 html 的元素有什么用，扮演了什么样的角色）。html 语义元素清楚的像浏览器和开发者描述其意义，例如 <form>、<table>以及<img>等。

# 优点

对搜索引擎友好，有了良好的结构和语义，网页内容自然容易被搜索引擎抓取。

# html5 新增语义元素

  1. <article>

  2. <aside>

  3. <details>

  4. <figcaption>

  5. <figure>

  6. <footer>

  7. <header>

  8. <main>

  9. <mark>

  10. <nav>

  11. <section>

  12. <summary>

  13. <time>

# 为什么要语义化

  1. 其他开发者便于阅读代码，通过不同标签明白每个模块的作用有何区别；

  2. 结构明确、语义清晰的页面能有更好的用户体验，在样式（css）没有加载前也有较为明确的结构，比如 img 这一类，在图片无法加载的情况下有 alt 属性告知用户此处图片的具体内容；

  3. 利于 SEO，语义化便于搜索引擎爬虫理解，和搜索引擎建立良好的沟通，能让爬虫爬取更多关键有效的信息；

  4. 方便其他设备阅读（如屏幕阅读器，盲人设备和移动设备等）。

# 如何进行语义化

一般的网站分为头部、导航、文章（或其他模块）、侧栏、底部，根据不同的部位，使用不同的标签进行书写。

表示页面不同位置的标签有：header、nav、article、section、footer、aside。

表示具体元素的作用或者意义的标签有：a、abbr、address、audio、blockquote、caption、code、datalist、del、detail、ol、ul、figure、figuretion、img、input、mark、p等。

  • 尽可能少的使用无语义的 div 或 span。

  • 在语义不明显时，既可以使用 div 或者 p 时，尽量用 p，因为 p 在默认情况下有上下间距，对兼容特殊终端有利。

  • 不要使用纯样式标签，比如：b、font、u 等，改用 css 设置。

  • 需要强调的文本，可以包含在 strong 或者 em 标签中（浏览器预设样式，能用 css 指定就不要用它们），strong 默认样式是加粗（不要用 b），em 是斜体（不要用 i）。

  • 使用表格时，标题要用 caption，表头用 thead，主体部分用 tbody，尾部用 tfoot。表头和一般单元格要分开，表头用 th，单元 suo 格用 td。

  • 表单域要用 fieldset 标签包起来，并用 legend 标签说明表单的用途。

  • 每个 input 标签对应的说明文本都需要使用 label 标签，并且通过为 input 设置 id 属性，在 label 标签中设置 for=someId 来让说明文本和对应的 input 关联起来。

# 注意

em、strong、dfn、code、samp、kbd、var、cite 等，虽然这些标签定义的文本大多会呈现出特殊的样式，但实际上，这些标签都拥有确切的语义。

我们并不反对使用它们，但是如果您只是为了达到某种视觉效果而使用这些标签的话，我们建议您使用样式表，那样做会达到更加丰富的效果。

# 网站 SEO 怎么处理

# 搜索引擎工作原理

在搜索引擎网站的后台有一个非常庞大的数据库，里面储存了海量的关键词，而每个关键词又对应着很多网址，这些网址被称为 “搜索引擎蜘蛛” 或 “网络爬虫”。

这是程序从茫茫的互联网上一点一点下载收集而来的。随着各种网站的出现，这些勤劳的 “蜘蛛” 每天在互联网上爬行，从一个链接到另一个链接，下载其中的内容，进行分析提炼，找到其中的关键词，如果 “蜘蛛” 认为关键词在数据库中没有而对用户是有用的便存入后台的数据库中。反之，如果 “蜘蛛” 认为是垃圾信息或重复信息，就舍弃不要，继续爬行，寻找最新的、有用的信息保存起来提供用户搜索。当用户搜索时，就能检索出与关键词相关的网址显示给访客。

一个关键词对应多个网址，因此就出现了排序问题，相应的，与关键词最吻合的网址就会排在前面了。

在 “蜘蛛” 抓取网页内容，提炼关键词的过程中，就存在一个问题：“蜘蛛” 能否看懂。如果网站内容是 flash 或 js 等，那么它是看不懂的，会犯迷糊，即使关键词再贴切也没用。相应的，如果网站内容可以被搜索引擎识别，那么搜索引擎会提高该网站的权重，增加对该网站的友好度。这样一个过程我们称之为 SEO。

# 前端 SEO 规范简洁版

  1. 合理的 title、description、keywords，搜索引擎对这三项的权重逐个减小，title 值强调重点即可；description 把页面内容高度概括，不可过分堆砌关键词；keywords 列举出重要关键词。

  2. 语义化的 html 标签。

  3. 非装饰性的图片必须加 alt。

  4. 让重要的内容放在 html 最前面，优先加载，搜索引擎抓取 html 是从上到下的，保证重要内容一定要被抓取。

  5. 每个页面只出现一个 h1 标签。

  6. 页面尽量不要做成 flash、图片、视频，因为搜索引擎抓取不到。

  7. 少用 iframe，iframe 抓取不到。

  8. 页面尽量扁平，层级太深也不利于抓取。

  9. 异步加载内容（ajax）搜索引擎也无法抓取，重要信息选择直接输出，有利于用户体验和 seo 优化。

  10. 采用友情链接，在别人的网站导入自己的网站。

  11. 向各大搜索引擎登录入口提交尚未收录站点。

  12. 提高网站速度，网站速度是搜索引擎排序的一个重要指标。

  13. 做好 404 页面，不仅是为了提高蜘蛛的抓取，还是为了更好的用户体验。

# 前端 SEO 规范详细版

SEO 全称 Search Engine Optimization，搜索引擎优化。

1. 网站结构布局优化：尽量简单、开门见山，提倡扁平化结构

一般而言，建立的网站结构层次越少，越容易被 “蜘蛛” 抓取，也就容易被收录。一般中小型网站目录结构超过三级，“蜘蛛” 便不愿意往下爬了。并且根据相关数据调查：如果访客经过跳转 3 次还没找到需要的信息，很可能离开。因此，三层目录结构也是体验的需要。为此我们需要做到：

📌 （1）控制首页链接数量

网站首页是权重最高的地方，如果首页链接太少，没有 “桥”，“蜘蛛” 不能继续往下爬到内页，直接影响网站收录数量。但是首页链接也不能太多，一旦太多，没有实质性的链接，很容易影响用户体验，也会降低网站首页的权重，收录效果也不好。

📌 （2）扁平化的目录层次

尽量让 “蜘蛛” 只要跳转 3 次，就能达到网站内的任何一个内页。

📌 （3）导航优化

导航应该尽量采用文字方式，也可以搭配图片导航，但是图片代码一定要进行优化，img 标签必须添加 alt 和 title 属性，告诉搜索引擎导航的定位，做到即使图片未能正常显示时，用户也能看到提示文字。

其次，在每一个网页上应该加上面包屑导航，好处是：

  • 从用户体验方面来说，可以让用户了解当前所处的位置以及当前页面在整个网站中的位置，帮助用户很快了解网站的组织形式，从而形成更好的位置感，同时提供了返回各个页面的入口，方便用户操作。

  • 对 “蜘蛛” 而言，能够清楚的了解网站结构，同时还增加了大量的内部链接，方便抓取，降低跳出率。

📌 （4）网站的结构布局——不可忽略的细节

  • 页面头部

logo 及主导航，以及用户信息。

  • 页面主体

左边正文，包括面包屑导航及正文；右边放热门文章及相关文章。好处是：留住访客，让访客多停留，对 “蜘蛛” 而言，这些文章属于相关链接，增强了页面相关性，也能增强页面的权重。

  • 页面底部

版权信息和友情链接。

特别注意

分页导航写法，推荐写法是：“首页 1 2 3 4 5 6 下拉框”，这样 “蜘蛛” 能够根据相应页码直接跳转，下拉框直接选择页面跳转。而下面的写法是不推荐的：“首页 下一页 尾页”，特别是当分页数量特别多时，“蜘蛛” 需要经过很多次往下爬，才能抓取，会很累、容易放弃。

📌 （5）利用布局，把重要内容 html 代码放在前面

搜索引擎抓取 html 内容是从上到下，利用这一特点，可以让主要代码优先读取，广告等不重要代码放在下边。例如，在左栏和右栏的代码不变得情况下，只需改一下样式，利用 float: left; 和 float: right; 就可以随意让两栏在展现位置上互换，这样就可以保证重要代码在最前，让爬虫最先抓取。同样也适用于多栏的情况。

📌 （6）控制页面的大小，减少 http 请求，提高网站加载速度

一个页面最好不要超过 100k，太大，页面加载速度慢。当速度很慢时，用户体验不好，留不住访客，并且一旦超时，“蜘蛛” 也会离开。

2. 网页代码优化

📌 （1）突出重要内容

合理设计 title、description 和 keywords

  • <title> 标题：只强调重点即可，尽量把重要的关键词放在前面，关键词不要重复出现，尽量做到每个页面的 title 标题中不要设置相同的内容。

  • <meta keywords> 标签：关键词，列举出几个页面的重要关键词即可，切忌过分堆砌。

  • <meta description> 标签：网页描述，需要高度概括网页内容，切忌不能太长，过分堆砌关键词，每个页面也要有所不同。

📌 （2）语义化书写 html 代码，符合 W3C 标准

尽量让代码语义化，在适当的位置使用适当的标签，用正确的标签做正确的事。让阅读源码者和“蜘蛛”都一目了然。比如：h1-h6 是用于标题类的，nav 标签是用来设置页面主导航的，列表形式的代码使用 ul 或 ol，重要的文字使用 strong 等。

📌 （3）a 标签

页内链接，要加 title 属性加以说明，让访客和“蜘蛛”知道。而外部链接，链接到其他网站的，则需要加上 rel="nofollow" 属性，告诉“蜘蛛”不要爬，因为一旦“蜘蛛”爬了外部链接之后，就不会再回来了。

📌 （4）正文标题要用 h 标题标签

<h1> 标签：h1 标签自带权重，“蜘蛛”认为它最重要，一个页面有且最多只能有一个 h1 标签，放在该页面最重要的标题上面，如首页的 logo 上可以加 h1 标签。副标题用 <h2> 标签，而其它地方不应该随便乱用 h 标题标签。

📌 （5）img 标签应使用 alt 属性加以说明

当网络速度很慢，或者图片地址失效的时候，就可以体现出 alt 属性的作用，它可以让用户在图片没有显示的时候知道这个图片的作用。同时为图片设置宽度和高度，可提高页面的加载速度。

📌 （6）表格应该使用 caption 表格标题标签

caption 元素定义表格标题。caption 标签必须紧随 table 标签之后。

📌 （7）strong、em 标签

需要强调的是使用。

strong 标签在搜索引擎中能够得到高度的重视，它能突出关键词，表现重要内容，em 标签的强调效果仅次于 strong 标签。b 标签和 i 标签只适用于显示效果时使用，在 seo 中不会起任何效果。

📌 （8）重要内容不要用 js 输出

因为 “蜘蛛” 不会读取 js 里的内容，所以重要内容必须仿造 html 里。前端框架针对 seo 的缺陷，可通过服务端渲染弥补。

📌 （9）尽量少使用 iframe 框架

因为 “蜘蛛” 一般不会读取其中的内容。

📌 （10）搜索引擎会过滤掉 display: none 的内容

📌 （11）“蜘蛛” 只能抓取 a 标签中的 href

<a href="Default.aspx?id=1">测试</a> 最好后面不要带参数 <a href="Default.aspx">测试</a>，如果带上参数，“蜘蛛” 不会考虑的。这样的话，就需要用到 url 重写了。

📌 （12）“蜘蛛” 不会执行 JavaScript

换句话说，如果在 a 标签中使用了 onclick，“蜘蛛” 是不会抓取到的。

📌 （13）“蜘蛛” 只能抓取到 get 请求的页面，不会抓取到 post 请求的页面

📌 （14）我们希望网站的前台页面全部被 “蜘蛛” 抓取到

但是不希望后台页面被 “蜘蛛” 抓到，“蜘蛛” 可没有那么智能，知道你的网站哪个是前台页面，哪个是后台页面。

这里就需要创建一个名为 "robots.txt" 的存放于网站根目录下的 ASCII 编码的文本文件（注意 robots.txt 也叫 robots 协议，是一个协议，不是命令，一般最好要遵守的），它是搜索引擎搜索该网站时的第一个文件，指定了此网站中，哪些东西是可以被 “蜘蛛” 抓取到的，哪些东西是不让 “蜘蛛” 抓取的。

前端 SEO 优化 (opens new window)

# Html5 有哪些新特性？如何处理 Html5 新标签的浏览器兼容问题？如何区分 Html 和 Html5?

# Html5 新特性

  1. 拖放（Drag and Drop (opens new window)）API

  2. 语义化更好的内容标签（header，nav，footer，aside，article，section）

  3. 音频、视频（audio，video (opens new window)）API

  4. 画布（Canvas (opens new window)）API

  5. 地理（Geolocation (opens new window)）API

  6. 本地离线存储，localStorage 长期存储数据，浏览器关闭后数据不丢失；sessionStorage 的数据在浏览器关闭后自动删除

  7. 表单控件：calendar、date、time、email、url、search

  8. 新的技术：webworker (opens new window)、websocket (opens new window)

# Html5 兼容问题处理

1. 使用 DOM 操作来添加这些标签

既然浏览器不支持，自己来创建一个

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>测试H5新标签兼容性</title>
    <script>
      document.createElement("header");
      document.createElement("footer");
    </script>
    <style>
      header,
      footer {
        display: block;
        width: 50px;
        height: 50px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <header id="header">header</header>
    <footer id="footer">footer</footer>
  </body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

通过这种方法可以解决 html5 新标签在老 IE 浏览器中的兼容问题。但是，这样有个问题，那么多新标签，如果每个都要用这种方法添加，岂不是很麻烦？

2. 使用封装好的 js 库：html5shiv.js

html5shiv (opens new window) 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁，目的是让 IE 识别并支持 HTML5 元素。

<!-- 引入即可 -->
<script src="js/html5shiv.js"></script>
1
2

# 如何区分 Html 和 Html5

1. 文档类型声明

  • HTML 4.01 规定了三种不同的 <!DOCTYPE> 声明，分别是：Strict、Transitional 和 Frameset。

  • HTML5 中仅规定了一种，即：<!DOCTYPE html>。

2. 结构语义

  • html 没有体现结构语义化的标签，通常都是这样来命名的网站头部的：<div id="header"></div>。

  • html5 在语义上有很大优势，提供了一些新的 html5 标签，比如：header，nav，footer，aside，article，section，通俗易懂。

# 请说明 Html 布局元素的分类有哪些？并描述每种布局元素的应用场景

# 分类

1. 内联元素

  • span, a, b, strong, i, em, br, input, textarea

  • 本身属性为 display: inline;

  • 和其他行内元素从左到右在一行显示，不可以直接控制宽度、高度等其他相关 css 属性，但是可以直接设置外边距 margin 的左右值，内边距 padding 的上下左右值。

  • 宽高是由本身内容大小决定的（文字、图片等）。

  • 只能容纳文本或者其他行内元素，不能嵌套块级元素。

2. 块状元素

  • div, h1-h6, hr, menu, ol, ul, li, dl, table, p, form

  • 本身属性为 display: block;

  • 独占一行，每一个块级元素都会从新的一行重新开始，从到下排布，可以直接控制宽度、高度等其他相关 css 属性，例如 padding 系列，margin 系列。

  • 在不设置宽度的情况下，块级元素的宽度是它父级元素内容的宽度。

  • 在不设置高度的情况下，块级元素的宽度是它本身内容的高度。

3. 内联块状元素

  • 内联块状元素综合了前两种的特性却又各有取舍。

  • 不自动换行。

  • 能够识别 width、height、line-height、padding、margin。

  • 默认排列方式为从左到右。

# 应用场景

  • 内联元素：用于不指定宽高，宽高由内容指定；

  • 快状元素：用于指定宽高，占满一行；

  • 内联块状元素：用于指定宽高，不占满一行。

# 使用 target="_blank" 有什么缺点

外链用了 target="_blank" 结果悲剧了 (opens new window)

# document.write 和 innerHTML 有什么区别

document.write 用于直接将文本写入文档，可能导致文档的重新解析和替换。如果在文档已经完全加载后使用 document.write，它会清空整个文档，并用指定的内容替换掉。这可能导致意外的结果，因为它会覆盖整个页面。

innerHTML 是 DOM 元素的属性，允许获取或设置元素的 HTML 内容。它通常用于操作特定元素的内容。使用 innerHTML 时，只会影响目标元素的内容，而不是整个文档。

因此，innerHTML 的性能可能较好，因为它不会像 document.write 一样触发整个文档的重新解析。

在大多数情况下，推荐使用更现代的 DOM 操作方式，如 document.createElement、appendChild 等，以避免可能的问题并提高性能。

上次更新时间: 2023年12月16日 21:14:13

← CSS →