HTML查漏补缺精选题（一）

作者: 前端辉羽 | 来源:发表于2021-01-26 17:12 被阅读0次

本文目录：

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分组

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>`标签的理解

image.png

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>

HTML查漏补缺精选题（一）

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？

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

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

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

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

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

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

21.怎么给radio分组

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

让前端飞

HTML查漏补缺精选题（一）

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？

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

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

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

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

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

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

21.怎么给radio分组

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

让前端飞

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

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

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

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

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