前端知识体系1.HTML-CFANZ编程社区

本文目录：

1.页面导入样式时，使用link和@import有什么区别？
2.说说<script>、<script async>和<script defer>的区别
3.关于<form>标签的enctype属性的了解
4.说说对<meta>标签的理解
5.说一下HTML5的drag api
6.说一下对iframe标签的理解
7.Form表单是怎么上传文件的？你了解它的原理吗？
8.From表单提交时为什么会刷新页面？怎么预防刷新？
9.web workers有用过吗？能帮我们解决哪些问题？
10.了解a标签的download属性吗？
11.谈谈src和href的区别
12.HTML5如果不写<! DOCTYPE html> ，页面还会正常工作么
13.请写出唤醒拔打电话、发送邮件、发送短信的例子
14.写个例子说明HTML5在移动端如何打开APP？
1. 有用过HTML5的webSQL和IndexedDB吗？说说你对它们的理解
16.如何让移动web页面如何自动探测电话号码
17.a标签的href和onclick属性同时存在时哪个先触发
18.你知道什么是锚点吗？它的作用是什么？怎么创建一个锚点
19.请说说 <pre> 和 <code> 标签的区别？
20.什么是单闭合标签和双闭合标签？为何要分为这两种呢？
21.怎么给radio分组
22.说一下HTML页面的生命周期
23.说一说对DOM事件的具体理解

1.页面导入样式时，使用link和@import有什么区别？

区别：
1）从属关系的区别：link属于XHTML标签，而@import是CSS提供的语法规则，link除了加载CSS，还可以定义RSS，定义rel连接属性等，@import就只能加载CSS。
2）加载顺序的区别：页面加载时，link会同时被加载，而@import引用的CSS会等页面被加载完后再加载。
3）兼容性的区别：@import只有IE5以上才能被识别，而link是XHTML标签，无兼容问题。
4）DOM可控性区别：通过js操作DOM,可以插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import方式插入样式

在html设计制作中，css有四种引入方式。
方式一：内联样式

<div style="display: none;background:red"></div>

方式二：嵌入样式

<head>
    <style>

    .content {
        background: red;
    }

    </style>
</head>

方式三：链接样式

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

方式四：导入样式

<style>
    @import url(style.css);
</style>

或者写在css样式文件中

@charset "utf-8";
@import url(style.css);
*{ margin:0; padding:0;}
.notice-link a{ color:#999;

2.说说`<script>`、`<script async>`和`<script defer>`的区别

3.关于`<form>`标签的enctype属性的了解

enctype属性规定在将表单数据发送到服务器之前如何对其进行编码
注意：只有method = "post"时才使用enctype属性。
1.application/x-www-form-urlencoded | 在发送前编码所有字符（默认）
2.multipart/form-data | 不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。
3.application/json | 这种方案，可以很方便的提交复杂的结构化数据，特别适合 RESTful 的接口。
4.text/plain | 空格转换为 "+" 加号，但不对特殊字符编码。

4.说说对`<meta>`标签的理解

Meta标签是HTML语言head区的一个辅助性标签，它位于HTML文档头部的head标记和title标记之间，它提供用户不可见的信息。
Meta ：即元数据（Metadata）是数据的基本信息。
元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。
用我们的大白话来说，它本身是一个没什么用的标签，但是一旦在它内部通过其他属性设置了某些效果，它就起作用了，所以我们称之为“ 元数据 ”。
下面举几个移动端常用到的meta标签例子：
1、移动端页面设置视口宽度等于设备宽度，并禁止缩放。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

2、禁止将页面中的数字识别为电话号码

<meta name="format-detection" content="telephone=no" />

3、添加到主屏后的标题

<meta name="apple-mobile-web-app-title" content="标题">

4.指定当前页面的字符集

<meta charset="UTF-8">

name 与 content 的搭配使用:

name=viewport: 移动端开发使用的属性，用来设置视窗的宽度，是否允许缩放等
name=author: 用来设置作者，给 SEO 使用
name=description: 页面的描述，在浏览器用作书签时会显示对应的内容
name=keywords: 网页的关键字，给 SEO 使用

5.说一下HTML5的drag api

在元素标签上添加draggable = “true”表示当前元素可被拖放
dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。
drag：事件主体是被拖放元素，在正在拖放被拖放元素时触发。
dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。

dragenter: 事件主体是目标元素，在被拖放元素进入目标元素时触发。
dragover: 事件主体是目标元素，在被拖放元素在目标元素内移动时触发。
dragleave: 事件主体是目标元素，在被拖放元素移出目标元素时触发。
drop: 事件主体是目标元素，在被拖放元素进入目标元素并且结束拖放时触发。

6.说一下对iframe标签的理解

iframe 创建包含另外一个文档的内联框架(即行内框架)，简而言之，iframe标签是框架的一种形式，一般用来包含别的页面。
**优点: **
1.iframe能够把嵌入的网页原样展现出来；
2.模块分离，便于更改，如果有多个网页引用iframe，只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷；
3.网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，增加代码的可重用；
4.如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决；
5.重载页面时不需要重载整个页面，只需要重载页面中的一个框架页；
6.方便制作导航栏。
**缺点: **
1.样式和脚本需要额外链入，调用外部页面,需要额外调用css,增加页面额外的请求次数，增加服务器的http请求；
2.代码复杂，在网页中使用框架结构最大的弊病是搜索引擎的“蜘蛛”程序无法解读这种页面，会影响搜索引擎优化，不利于网站排名；
3.框架结构有时会让人感到迷惑，滚动条除了会挤占有限的页面空间外会使iframe布局混乱，还会分散访问者的注意力，影响用户体验；
4.链接导航疑问。运用框架结构时，必须保证正确配置所有的导航链接，否则，会给访问者带来很大的麻烦。比如被链接的页面出现在导航框架内，这种情况下访问者便被陷住了，因为此时他没有其他地点可去；
5.产生多个页面，不易管理；
6.多数小型的移动设备（PDA 手机）无法完全显示框架，设备兼容性差。
尽量少用iframe：
iframes提供了一个简单的方式把一个网站的内容嵌入到另一个网站中。iframe的创建比其它包括scripts和css的 DOM 元素的创建慢了1-2个数量级。
使用iframe的页面一般不会包含太多iframe，所以创建DOM节点所花费的时间不会占很大的比重。但带来一些其它的问题：onload事件以及连接池(connection pool)，即iframe会阻塞主页面的Onload事件及iframe和主页面共享连接池，会影响页面的并行加载。

7.Form表单是怎么上传文件的？你了解它的原理吗？

简单来说就是把文件转化成字节流，然后使用http进行传输，后端接受后在把二进制转化成原先的文件格式。
在HTML表单中，可以上传文件的唯一控件就是<input type="file">。
当一个表单包含<input type="file">时，表单的enctype必须指定为multipart/form-data（表明表单需要上传二进制数据），method必须指定为post，浏览器才能正确编码并以multipart/form-data格式发送表单的数据。multiple="multiple"说明可以同时上传多个文件
也可以使用文件编码传输，可以把图片转化成base64格式然后进行传输，到了服务器之后直接解码base6

8. From表单提交时为什么会刷新页面？怎么预防刷新？

因为早期网页交互模型只能是浏览器提交数据给服务器，服务器做出响应重新返回一个页面，浏览器加载这个页面进行显示。早期前端没有编程式发送网络请求的 API，更没有前端路由管理的概念，所以表单提交跳转页面是广泛接受的方案。
不想刷新可以使用 JS 拦截 form 的 onsubmit 事件，阻止掉浏览器的默认行为，然后用 ajax/fetch 和后台交互。

9.web workers有用过吗？能帮我们解决哪些问题？

提供协程能力，如果有一个比较密集的计算任务，可以放到另一个进程中处理，等处理好了再把结果传回主程，这样主要进程就不会阻塞，页面可以正常渲染和响应

10.了解a标签的download属性吗？

<a href="/wordpress/wp-content/themes/default/images/index_logo.gif" download="_5332_">下载</a>

download 属性规定被下载的超链接目标，该属性也可以设置一个值来规定下载文件的名称。兼容性各异，Chrome和Firefox仅支持加载同源链接.

11.谈谈src和href的区别

src和href都是用于外部资源的引入， src一般引入js文件，图片文件，href一般链接css资源文件。
它们之间的主要区别可以用这样一句话来概括：
src用于替代这个元素，而href用于建立这个标签与外部资源之间的关系。
例如：

<a href="www.xxx.com">
    <img src="1.jpg">
</a>

a 标签里面的内容是一张图片，a标签加上href属性将图片链接到了www.xxx.com这个网站，但并未替换a标签里面的内容。
而img标签的src属性则是将这个标签完全替换成了src里面的资源。

12.HTML5如果不写`<! DOCTYPE html>` ，页面还会正常工作么

会，但是页面添加了<! DOCTYPE html>说明该页面采用了W3C标准，如果不加则页面会根据浏览器自身的解析标准来解析，这可能会导致页面在不同的浏览器呈现出不同的效果

13.请写出唤醒拔打电话、发送邮件、发送短信的例子

<a href="tel:139xxxxxxxx">一键拨打号码</a>
<a href="mailto:yuojian@163.com">一键发送邮件</a>
<a href="sms:139xxxxxxx">一键发送短信</a>

input 也有几个类型来影响键盘弹出的样式

<input type="text" placeholder="请输入文字"/>
<input type="number" pattern="[0-9]*" placeholder="请输入qq号"/> 
//type="number"限定输入数字，pattern="[0-9]*"限制数字范围
<input type="tel" placeholder="请输入电话"/>
<input type="date" placeholder="请输入日期"/>
<input type="datetime-local" placeholder="请输入时间"/>

14.写个例子说明HTML5在移动端如何打开APP？

用 a 标签就可以，原理是使用 deeplink，比如说

<a href="zhihu://">打开知乎</a>

Android 是利用 deeplink， iOS 是利用 URL Schemes

15. 有用过HTML5的webSQL和IndexedDB吗？说说你对它们的理解

webSQL 和 IndexedDB 都是一种客户端的数据存储方案，webSQL已经废弃。IndexedDB 的特点是：存储空间大，使用异步存储数据模式，存放键值对型数据，支持数据库事务等，同时还可以存储多种类型数据，包括 js 对象类型。可以用在前端缓存大量数据

16.如何让移动web页面如何自动探测电话号码

在head里加上这么一个meta信息

<meta name="format-detection" content="telephone=yes">

17.a标签的href和onclick属性同时存在时哪个先触发

<a href="javascript:alert(1)" onclick="alert(2)">点一下试试，看谁先触发</a>
<a href="javascript:alert(1)" onclick="alert(2);return false;">点一下试试</a>

onclick事件先触发，如果函数执行返回false(全等), 则href不会被触发。

18.你知道什么是锚点吗？它的作用是什么？怎么创建一个锚点

<a href="#ss">   ----->     name="ss" 的a标签
<a href="#ss">   ----->    id="ss" 的任意标签

这里name="ss" 的a标签以及 id="ss" 的任意标签都是锚点，简单创建用id就可以，绝大多数标签又可以有id属性，而name仅在a标签中才可以作为锚点

19.请说说 `<pre>` 和 `<code>` 标签的区别？

pre标签是块级元素，code标签是行内元素
pre的内容保留换行符和空格，code的内容不保留
单行代码用code，多行代码用pre

20.什么是单闭合标签和双闭合标签？为何要分为这两种呢？

单标签如<meta />，只需将标签名申明一遍的，按照标准，结尾应该有/
双标签如<div></div>,标签名需在首位各写一遍
区别：单标签与双标签都有属性，但是双标签有内容，也就是innerHTML
补充,常见的单标签：

<br />
<hr />
<area />
<base />
<img />
<input />
<link />
<meta />
<basefont />
<param />
<col />
<frame />
<embed />

21.怎么给radio分组

给input[type=radio]设置相同的name值，即可实现radio的分组

<div id="wrap">
    <label for="f">
        <input id="f" name="gender" type="radio" value="female">
        <span>女性</span>
    </label>
    |
    <label for="m">
        <input id="m" name="gender" type="radio" value="male">
        <span>男性</span>
    </label>
</div>

22.说一下HTML页面的生命周期

HTML页面的生命周期有以下三个重要事件：

DOMContentLoaded —— 浏览器已经完全加载了 HTML，DOM 树已经构建完毕，但是像是 <img> 和样式表等外部资源可能并没有下载完毕。
load —— 浏览器已经加载了所有的资源（图像，样式表等）。
beforeunload —— 当用户即将离开当前页面（刷新或关闭）时触发。正要去服务器读取新的页面时调用，此时还没开始读取；
unload —— 在用户离开页面后触发。从服务器上读到了需要加载的新的页面，在即将替换掉当前页面时调用。

每个事件都有特定的用途:

DOMContentLoaded —— DOM 加载完毕，所以 JS 可以访问所有 DOM 节点，初始化界面。
load —— 附加资源已经加载完毕，可以在此事件触发时获得图像的大小（如果没有被在 HTML/CSS 中指定）
beforeunload —— 该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。
unload —— 删除本地数据localstorage等

DOMContentLoaded

DOMContentLoaded 由 document 对象触发。使用 addEventListener 来监听它：

document.addEventListener("DOMContentLoaded", () => {});

DOMContentLoaded 和脚本
当浏览器在解析 HTML 页面时遇到了 <script>...</script> 标签，将无法继续构建DOM树（UI 渲染线程与 JS 引擎是互斥的，当 JS 引擎执行时 UI 线程会被挂起），必须立即执行脚本。所以 DOMContentLoaded 有可能在所有脚本执行完毕后触发。

外部脚本（带 src 的）的加载和解析也会暂停DOM树构建，所以 DOMContentLoaded 也会等待外部脚本。带 async 的外部脚本，可能会在DOMContentLoaded事件之前或之后执行。带 defer 的脚本肯定会在在DOMContentLoaded事件之前执行。

DOMContentLoaded 与样式表
外部样式表并不会阻塞 DOM 的解析，所以 DOMContentLoaded 并不会被它们影响。

load

window 对象上的 load 事件在所有文件包括样式表，图片和其他资源下载完毕后触发。

window.addEventListener('load', function(e) {...});
window.onload = function(e) { ... };

beforeunload

当窗口即将被卸载（关闭）时, 会触发该事件。此时页面文档依然可见, 且该事件的默认动作可以被取消。beforeunload在unload之前执行，它还可以阻止unload的执行。

// 推荐使用
window.addEventListener('beforeunload', (event) => {
  // Cancel the event as stated by the standard.
  event.preventDefault();
  // Chrome requires returnValue to be set.
  event.returnValue = '关闭提示';
});


window.onbeforeunload = function (e) {
  e = e || window.event;
  // 兼容IE8和Firefox 4之前的版本
  if (e) {
    e.returnValue = '关闭提示';
  }
  // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
  return '关闭提示';
};

unload

用户离开页面的时候，window 对象上的 unload 事件会被触发，无法阻止用户转移到另一个页面上。

// 推荐使用
window.addEventListener("unload", function(event) { ... });

window.onunload = function(event) { ... };

readyState

document.readyState 表示页面的加载状态，有三个值：

loading 加载 —— document仍在加载。
interactive 互动 —— 文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。
complete —— 文档和所有子资源已完成加载。 load 事件即将被触发。

可以在 readystatechange 中追踪页面的变化状态：

document.addEventListener('readystatechange', () => {
  console.log(document.readyState);
});

23.说一说对DOM事件的具体理解

DOM事件捕获的具体流程
window => document => html => body => ... => 目标元素
同理，冒泡的顺序正好是反过来的

在页面中获得body和html标签的方式
获取body标签：document.body
获取html标签的：document.documentElement

Event对象的常见应用

event.preventDefault()
阻止默认行为
event.stopPropagation()
阻止冒泡
event.stopImmediatePropagation()
绑定多个事件的时候，阻止其他绑定事件的执行
event.currentTarget()
表示当前绑定事件的元素，在事件代理中绑定事件的元素往往是当前点击元素的父元素
event.target()
表示当前被点击的元素，在事件代理中可以发挥很大的作用，比如给同属于一个父元素的十个子元素绑定事件，可以给父元素进行事件代理，通过target拿到当前被点击的元素

如果自定义事件
new CustomEvent和new Event一样都可以进行自定义事件，它们的第一个参数都是自定义事件的名字，区别只是CustomEvent的第二个参数可以传递自定义参数

const myevent = new CustomEvent("tReady", {
  detail: {
    msg: 99,
    doc: document
  },
  bubbles: true,
  cancelable: true
});
// 输出事件
window.dispatchEvent(myevent);

//使用方法
var iframe = document.getElementById("headerIframe").contentWindow;
iframe.addEventListener("tReady",  function (e) {
    var msg = e.detail.msg;
    that.page = msg;
    console.log(that.page);
});