html

Last updated Nov 1, 2021

# iframe框架有那些优缺点

优点：

iframe能够原封不动的把嵌入的网页展现出来。
如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。

缺点：

搜索引擎的爬虫程序无法解读这种页面
框架结构中出现各种滚动条
使用框架结构时，保证设置正确的导航链接。
iframe页面会增加服务器的http请求

# label标签有什么作用

label 标签通常是写在表单内，它关联一个控件，使用 label 可以实现点击文字选取对应的控件。

1
2
<input type="checkbox" id="test">
<label for="test" >test</label>

# HTML5的form如何关闭自动完成功能

将不想要自动完成的 form 或 input 设置为 autocomplete=off

MDN

# DOM和BOM有什么区别

Document Object Model，文档对象模型

DOM 是为了操作文档出现的 API，document 是其的一个对象

DOM和文档有关，这里的文档指的是网页，也就是html文档。DOM和浏览器无关，他关注的是网页本身的内容。

Browser Object Model，浏览器对象模型

BOM 是为了操作浏览器出现的 API，window 是其的一个对象

window 对象既为 javascript 访问浏览器提供API，同时在 ECMAScript 中充当 Global 对象

# 行内元素和块级元素有哪些

# 行内元素

一个行内元素只占据它对应标签的边框所包含的空间
一般情况下，行内元素只能包含数据和其他行内元素

1
2
3
4
b, big, i, small, tt
abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
a, bdo, br, img, map, object, q, script, span, sub, sup
button, input, label, select, textarea

# 块级元素

占据一整行，高度、行高、内边距和外边距都可以改变，可以容纳块级标签和其他行内标签

1
header,form,ul,ol,table,article,div,hr,aside,figure,canvas,video,audio,footer

# DOCTYPE

1 DOCTYPE有什么作用？标准模式与混杂模式如何区分？它们有何意义?

告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。
标准模式（Standards mode）以浏览器支持的最高标准运行；混杂模式（Quirks mode）中页面是一种比较宽松的向后兼容的方式显示。

2 HTML5为什么只需要写 !DOCTYPE HTML？

HTML5不基于SGML（Standard Generalized Markup Language 标准通用标记语言），因此不需要对DTD（DTD 文档类型定义）进行引用，但是需要DOCTYPE来规范浏览器行为。

HTML4.01基于SGML，所以需要引用DTD。才能告知浏览器文档所使用的文档类型，如下：

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “ http://www.w3.org/TR/html4/strict.dtd">

# 简述一下你对HTML语义化的理解？

去掉或丢失样式的时候能够让页面呈现出清晰的结构。
有利于SEO和搜索引擎建立良好沟通，有助于爬虫抓取更多的信息，爬虫依赖于标签来确定上下文和各个关键字的权重。
方便其它设备解析。
便于团队开发和维护，语义化根据可读性。

在线情况下，浏览器发现HTML头部有manifest属性，它会请求manifest文件，如果是第一次访问，那么浏览器就会根据manifest文件的内容下载相应的资源，并进行离线存储。如果已经访问过并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面。然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不会做任何操作，如果文件改变了，那么就会重新下载文件中的资源，并且进行离线存储。例如，

在页面头部加入manifest属性

1
<html manifest='cache.manifest'>

在cache.manifest文件中编写离线存储的资源

1
2
3
4
5
6
7
8
9
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
Resourse/logo.png
FALLBACK:
 //offline.html

# 如何在页面上实现一个圆形的可点击区域？

map+area或者svg
border-radius
纯js实现，一个点不在圆上的算法

# 实现不使用 border 画出1px高的线，在不同浏览器的Quirks mode和CSS Compat模式下都能保持同一效果

1
<div style="height:1px;overflow:hidden;background:red"></div>

# HTML5有哪些新特性、移除了那些元素？

HTML5现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加

绘画 canvas
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
新的技术webworker、 websocket、 Geolocation

移除的元素：

纯表现的元素：basefont、big、center、font、s、strike、 tt、u
对可用性产生负面影响的元素：frame、frameset、noframes

# HTML全局属性(global attribute)有哪些

class:为元素设置类标识
data-*: 为元素增加自定义属性
draggable: 设置元素是否可拖拽
id: 元素id，文档内唯一
lang: 元素内容的的语言
style: 行内css样式
title: 元素相关的建议信息

# 渲染优化

1、使用CSS3代码代替JS动画（尽可能避免重绘重排以及回流）

2、页面中空的href和 src会阻塞页面其他资源的加载 (阻塞下载进程)

3、用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能

4、当需要设置的样式很多时设置className而不是直接操作style

5、少用全局变量、缓存DOM节点查找的结果。减少IO读取操作

6、图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳

作者：蛙哇
链接：https://juejin.im/post/5d9cca32f265da5b6e0a34fd
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

jieye の数字花园