HTML总结

最新推荐文章于 2024-09-05 21:31:46 发布

小橘子丶

最新推荐文章于 2024-09-05 21:31:46 发布

阅读量136

点赞数

分类专栏：前端总结文章标签： java

本文链接：https://blog.csdn.net/m0_46204282/article/details/112039656

版权

前端总结专栏收录该内容

8 篇文章 0 订阅

订阅专栏

HTML
HTML5 有哪些新特性？

答：1.HTML4 规定了三种声明方式，分别是：严格模式、过渡模式 和 框架集模式；
而HTML5因为不是SGML的子集，只需要<!DOCTYPE>就可以了：
2.语义化更好的内容标签。header/footer/article等
3.音频、视频 API(audio,video)
4.表单控件：
HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
5.5个API-本地存储，长期存储数据的 localStorage，比较常用，临时存储的 sessionStorage，浏览器关闭后自动删除，实际工作中使用的场景不多。
画布/Canvas，canvas，figure,figcaption.
地理/Geolocation.地理位置 API 允许用户向 Web 应用程序提供他们的位置。出于隐私考虑，报告地理位置前会先请求用户许可。
拖拽释放.HTML拖拽释放 (Drag and drop) 接口使应用程序能够在浏览器中使用拖放功能。例如，通过这些功能，用户可以使用鼠标选择可拖动元素，将元素拖动到可放置元素，并通过释放鼠标按钮来放置这些元素。可拖动元素的一个半透明表示在拖动操作期间跟随鼠标指针。
Web Workers.webworker, websocket, Geolocation,当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

答：
⻚⾯被加载的时， link 会同时被加载，⽽ @imort ⻚⾯被加载的时， link 会同时被加
载，⽽ @import 引⽤的 CSS 会等到⻚⾯被加载完再加载 import 只在 IE5 以上才能识
别，⽽ link 是 XHTML 标签，⽆兼容问题 link ⽅式的样式的权重 ⾼于 @import 的权
重
<!DOCTYPE> 声明位于⽂档中的最前⾯，处于 <html> 标签之前。告知浏览器的解析器， ⽤什么⽂档类型 规范来解析这个⽂档
严格模式的排版和 JS 运作模式是 以该浏览器⽀持的最⾼标准运⾏
在混杂模式中，⻚⾯以宽松的向后兼容的⽅式显示。模拟⽼式浏览器的⾏为以防⽌站点⽆法⼯作。 DOCTYPE 不存在或格式不正确会导致⽂档以混杂模式呈现
如何实现浏览器内多个标签页之间的通信？
调用 localstorge、cookies 等本地存储方式；
1、在 B 页面中可以使用 window.opener 获得 A 页面的 window 句柄，使用该句柄即可调用 A 页面中的对象，函数等。
例如 A 页面定义 js 函数 onClosePageB，在 B 页面可以用 window.opener.onClosePageB 来进行回调。
2、使用 window.showModalDialog(sURL [, vArguments] [,sFeatures])打开新窗口。 其中 vArguments 参数可以用来向对话框传递参数。传递的参数类型不限，包括数组、函数等。对话框通过window.dialogArguments来取得传递进来的参数。
3、如果是支持 HTML5 的话，建议用本地存储 (local storage)，它支持一个事件方法 window.onstorage，只要其中一个窗口修改了本地存储，其他同源窗口会触发这个事件。

总结：
WebSocket、SharedWorker；
也可以调用 localstorge、cookies 等本地存储方式；
localstorge 另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，
我们通过监听事件，控制它的值来进行页面信息通信；
注意 quirks：Safari 在无痕模式下设置 localstorge 值时会抛出 QuotaExceededError 的异常；

方法一：调用 localstorge 标签1：标签2： $(function(){
window.addEventListener(“storage”, function(event){
console.log(event.key + “=” + event.newValue);
}); //使用storage事件监听添加、修改、删除的动作 }); 方法二：使用 cookie+setInterval 将要传递的信息存储在 cookie 中，每隔一定时间读取 cookie 信息，即可随时获取要传递的信息。标签1：
$(function(){
$KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲btn").click(fun\dots$ ("#name").val();
document.cookie=“name=”+name;
}); }); 标签2： $(function(){ function getCookie(key) {
return JSON.parse("{"" + document.cookie.replace(/;\s+/gim,"","").replace(/=/gim, “”:"") +
“”}")[key]; } setInterval(function(){
console.log(“name=” + getCookie(“name”)); }, 10000); });

⾏内元素有哪些？块级元素有哪些？空(void)元素有那些？⾏内元素和块级元素有什么区别？

答：内元素有： a b span img input select strong 块级元素有： div ul ol li dl dt
dd h1 h2 h3 h4… p 空元素： br,hr img input link meta ⾏内元素不可以设置宽⾼，不独占⼀⾏
块级元素可以设置宽⾼，独占⼀⾏简述⼀下src与href的区别？答： src
⽤于替换当前元素，href⽤于在当前⽂档和引⽤资源之间确⽴联系。 src 是 source
的缩写，指向外部资源的位置，指向的内容将会嵌⼊到⽂档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应⽤到⽂档内，例如 js
脚本，img 图⽚和 frame 等元素当浏览器解析到该元素时，会暂停其他
资源的下载和处理，直到将该资源加载、编译、执⾏完毕，图⽚和框架等元素也如此，类似于将所指向资源嵌⼊当前标签内。这也是为什么将js脚本放在底
部⽽不是头部 href 是 Hypertext Reference
的缩写，指向⽹络资源所在位置，建⽴和当前元素（锚点）或当前⽂档（链接）之间的链接，如果我们在⽂档中添加那么浏览器会识别该⽂档为 css
⽂件，就会并⾏下载资源并且不会停⽌对当前⽂档的处理。这也是为什么建议使⽤ link ⽅式来加载 css ，⽽不是使⽤ @import ⽅式

cookies,sessionStorage,localStorage 的区别？

答： cookie 是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。 cookie
数据始终在同源的 http 请求中携带（即使不需要），记会在浏览器和服务器间来回传递。 sessionStorage 和
localStorage 不会自动把数据发给服务器，仅在本地保存。存储大小 cookie 数据大小不能超过 4k。
sessionStorage 和 localStorage 虽然也有存储大小的限制，但比 cookie 大得多，可以达到 5M 或更大。
有期时间 localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据； sessionStorage
数据在当前浏览器窗口关闭后自动删除。 cookie 设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭

HTML5 的离线储存的使用和原理？

答：相似存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 数据在浏览器关闭后自动删除。
离线的存储两种方式 HTML5 的离线存储.appcache文件【废弃】 service-worker 的标准 HTML5
的离线存储.appcache文件【废弃】在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。
原理：HTML5 的离线存储是基于一个新建的。appcache
文件的缓存机制（不是存储技术），通过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。
之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。如何使用 1、页面头部像下面一样加入一个 manifest 的属性
2、在 cache.manifest 文件的编写离线存储的资源 CACHE MANIFEST
#v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html 3、在离线状态时，操作 window.applicationCache
进行需求实现。 service-worker 可以参考
http://www.alloyteam.com/2019/07/web-applications-offline/
https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API/Using_Service_Workers

怎样处理移动端 1px 被渲染成 2px 问题？

答： meta 标签中的 viewport 属性，initial-scale 设置为 1 rem 按照设计稿标准走，外加利用
transfrome 的 scale(0.5) 缩小一倍即可； 2 全局处理 meta 标签中的 viewport 属性
，initial-scale 设置为 0.5 rem 按照设计稿标准走即可解释 UI 设计师设计的时候，画的 1px（真实像素）实际上是
0.5px(css) 的线或者边框。但是他不这么认为，他认为他画的就是 1px 的线，因为他画的稿的尺寸本身就是屏幕尺寸的 2 倍。假设手机视网膜屏的宽度是 320x480 宽，但实际尺寸是 640x960 宽，设计师设计图的时候一定是按照 640x960
设计的。但是前端工程师写代码的时候，所有 css 都是按照 320x480 写的，写 1px(css)，浏览器自动变成 2px（真实像素）。
那么前端工程师为什么不能直接写 0.5px(css) 呢？因为在老版本的系统里写 0.5px(css) 的话，会被浏览器解读为
0px(css)，就没有边框了。所以只能写成 1px(css)，实际在屏幕上显示出来就是设计师画的 1px（真实像素）的 2
倍那么宽，所以设计师会觉得这个线太粗了，和他的设计稿不一样。在新版的系统里，已经开始逐渐支持 0.5px(css)
这种写法。所以如果设计师在大图上设计了一个 1px（真实像素）的线的话，前端工程师直接除以 2，写 0.5px(css) 就好了。
另外一种解释事实就是它并没有变粗，就是 css 单位中的 1px，对于 dpr 为 2 的设备，它实际能显示的最小值是 0.5px。
设计师口中说的 1px 是针对设备物理像素的，换算成 css 像素就是 0.5px。一句话总结，background:1px solid
black 在任何屏幕上都是一样粗的，但是 retina 屏可以显示比这更细的边框，然后设计师就不乐意了，让你改。

…
浏览器是如何渲染页面的？
答：

解析 HTML 文件，创建 DOM 树
自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。解析 CSS
优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；构建渲染树将 CSS 与 DOM
合并，构建渲染树（Render Tree）布局和绘制布局和绘制，重绘（repaint）和重排（reflow）

如何写出高性能的 HTML？

答：避免使用 Iframe Iframe 也叫内联 frame，可以把一个 HTML 文档嵌入到另一个文档中。使用 iframe
的好处是被嵌入的文档可以完全独立于其父文档，凭借此特点我们通常可以使浏览器模拟多线程，需要注意的是使用 iframe
并不会增加同域名下的并行下载数，浏览器对同域名的连接总是共享浏览器级别的连接池，即使是跨窗口或跨标签页，这在所有主流浏览器都是如此。也因为这样这让
iframe 带来的好处大打折扣。在页面加载过程中 iframe 元素会阻塞父文档 onload 事件的触发，而开发者程序通常会在
onload 事件触发时初始化 UI 操作。例如，设置登录区域的焦点。因为用户习惯等待这一操作，所以尽可能的让 onload
事件触发从而使用户的等待时间变短是非常重要的。另外开发者会把一些重要的行为绑定在 unload 事件上，而不幸的是在一些浏览器中，只有当
onload 事件触发后 unload 事件才能触发，如果 onload 事件长时间未触发，而用户已经离开当前页面，那么 unload
事件也将永远得不到触发。那是否有方案可以让 onload 事件不被 iframe 阻塞吗？有个简单的解决方案来避免 onload
事件被阻塞，使用 JavaScript 动态的加载 iframe 元素或动态设置 iframe 的 src 属性：
document.getElementById(‘iframe1’).setAttribute(‘src’， ‘url’);
但其仅在高级浏览器中有效，对于 Internet Explorer 8 及以下的浏览器无效。除此之外我们必须知道 iframe
是文档内最消耗资源的元素之一，在 Steve Souders 的测试中，在测试页面中分别加载 100 个
A、DIV、SCRIPT、STYLE 和 IFRAME 元素，并且分别在 Chrome、Firefox、Internet
Explorer、Opera、Safari 中运行了 10 次。结果显示创建 iframe 元素的开销比创建其他类型的 DOM 元素要高
1~2 个数量级。在测试中所有的 DOM 元素都是空的，如加载大的脚本或样式块可能比加载某些 iframe
元素耗时更长，但从基准测试结果来看，即使是空的 iframe，其开销也是非常昂贵的，鉴于 iframe
的高开销，我们应尽量避免使用。尤其是对于移动设备，对于目前大部分还是只有有限的 CPU 与内存的情况下，更应避免使用 iframe。
避免空链接属性空的链接属性是指 img、link、script、ifrrame 元素的 src 或 href
属性被设置了，但是属性却为空。如，我们创建了一个图片，并且暂时设置图片的地址为空，希望在未来动态的去修改它。但是即使图片的地址为空，浏览器依旧会以默认的规则去请求空地址： Internet Explorer 8 及以下版本浏览器只在 img 类型元素上出现问题，IE 会把 img
的空地址解析为当前页面地址的目录地址。例如：如果当前页面地址为 http://example.com/dir/page.html，IE
会把空地址解析为 http://example.com/dir/ 地址并请求。早些版本的 Webkit 内核浏览器与 Firefox
会把空地址解析为当前页面的地址。如果页面内有多个空链接属性元素，当前页面的服务器则会被请求多次，增加服务器的负载。相较桌面浏览器对内核的更新升级较积极，这个问题在
ios 与 android 系统的移动浏览器上问题可能较严重。幸运的是所有主流浏览器面对 iframe 的 src
属性为空时，会把空地址解析为 about:blank 地址，而不会向服务器发出额外的请求。避免节点深层级嵌套
深层级嵌套的节点在初始化构建时往往需要更多的内存占用，并且在遍历节点时也会更慢些，这与浏览器构建 DOM 文档的机制有关。例如下面 HTML
代码：

Hello World
通过浏览器 HTML 解析器的解析，浏览器会把整个
HTML 文档的结构存储为 DOM 树结构。当文档节点的嵌套层次越深，构建的 DOM 树层次也会越深。缩减 HTML 文档大小
提高下载速度最显而易见的方式就是减少文件的大小，特别是压缩内嵌在 HTML 文档中的 JavaScript 和 CSS
代码，这能使得页面体积大幅精简。除此之外减少 HTML 文档大小还可以采取下面几种方法：删掉 HTM 文档对执行结果无影响的空格空行和注释
避免 Table 布局使用 HTML5 显式指定文档字符集 HTML 页面开始时指定字符集，有助于浏览器可以立即开始解析 HTML
代码。HTML 文档通常被解析为一序列的带字符集编码信息的字符串通过 internet 传送。字符集编码在 HTTP 响应头中，或者
HTML
标记中指定。浏览器根据获得的字符集，把编码解析为可以显示在屏幕上的字符。如果浏览器不能获知页面的编码字符集，一般都会在执行脚本和渲染页面前，把字节流缓存，然后再搜索可进行解析的字符集，或以默认的字符集来解析页面代码，这会导致消耗不必要的时间。为了避免浏览器把时间花费在搜寻合适的字符集来进行解码，所以最好在文档中总是显式的指定页面字符集。
显式设置图片的宽高当浏览器加载页面的 HTML 代码时，有时候需要在图片下载完成前就对页面布局进行定位。如果 HTML
里的图片没有指定尺寸（宽和高），或者代码描述的尺寸与实际图片的尺寸不符时，浏览器则要在图片下载完成后再 “回溯”
该图片并重新显示，这会消耗额外时间。所以，最好为页面里的每一张图片都指定尺寸，不管是在页面 HTML 里的标签，还是在 CSS
里。避免脚本阻塞加载当浏览器在解析常规的
script 标签时，它需要等待 script 下载完毕，再解析执行，而后续的 HTML
代码只能等待。为了避免阻塞加载，应把脚步放到文档的末尾，如把 script 标签插入在 body 结束标签之前：

iframe 的优缺点？

答： iframe 会阻塞主页面的 Onload 事件； iframe
和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。使用 iframe 之前需要考虑这两个缺点。如果需要使用
iframe，最好是通过 javascript 动态给 iframe 添加 src 属性值，这样可以可以绕开以上两个问题。 Canvas 和
SVG 图形的区别是什么？答：Canvas 和 SVG 都可以在浏览器上绘制图形。 SVG Canvas 绘制后记忆，换句话说任何使用
SVG 绘制的形状都能被记忆和操作，浏览器可以再次显示 Canvas 则是绘制后忘记，一旦绘制完成你就不能访问像素和操作它 SVG
对于创建图形例如 CAD 软件是良好的，一旦东西绘制，用户就想去操作它 Canvas 则用于绘制和遗忘类似动漫和游戏的场画。
为了之后的操作，SVG 需要记录坐标，所以比较缓慢。因为没有记住以后事情的任务，所以 Canvas 更快。
我们可以用绘制对象的相关事件处理我们不能使用绘制对象的相关事件处理，因为我们没有他们的参考分辨率独立分辨率依赖 SVG 并不属于 html5
专有内容，在 html5 之前就有 SVG。 SVG 文件的扩展名是”.svg”。 SVG 绘制的图像在图片质量不下降的情况下被放大。
SVG 图像经常在网页中制作小图标和一些动态效果图。

聊聊 meta 标签？

答：核心提供给页面的一些元信息（名称 / 值对），有助于 SEO。属性值 name 名称 /
值对中的名称。author、description、keywords、generator、revised、others。把 content
属性关联到一个名称。 http-equiv 没有 name
时，会采用这个属性的值。content-type、expires、refresh、set-cookie。把 content 属性关联到
http 头部 content 名称 / 值对中的值，可以是任何有效的字符串。始终要和 name 属性或 http-equiv
属性一起使用 scheme 用于指定要用来翻译属性值的方案。