高频面试题-HTML

严格模式

head , body，Doctype 他们的作用是什么?

head标签中的元素主要用于描述文档的元信息，如文档的标题、字符集编码、外部资源的链接等。这些信息虽然不直接显示在页面上，但对于文档的结构、样式、行为等方面都有重要的影响。
body标签里的内容构成了网页的主体，是用户浏览网页时最直接看到和交互的部分。在body标签中，可以使用各种HTML元素来构建页面的结构、样式和行为。
Doctype的主要作用是声明文档的解析类型，告知浏览器的解析器应该使用哪种HTML版本来解析文档。正确的Doctype声明有助于页面在不同浏览器中的兼容性。如果Doctype不存在或格式不正确，会导致文档以兼容模式呈现，从而影响页面的布局和样式。

HTML5 为什么只需要写 <!DOCTYPE HTML>

HTML4.01 是基于 SGML（标准通用标记语言）的标记语言, 需要通过DOCTYPE 指向一个外部的 DTD 文件, 告诉浏览器文渲染页面的文档结构和规则
HTML5 是独立的标记语言。DOCTYPE 的主要作用是触发浏览器的标准模式, 标准模式意味着浏览器将使用最新的 HTML 和 CSS 规范来渲染页面. 如果<!DOCTYPE>不存在或格式不正确会导致文档怪异模式呈现, 怪异模式会导致页面以较旧的方式渲染，以兼容一些非标准的网页。

语义化

语义化的理解

语义化就是用合适的标签嵌套文档内容，
使得页面的内容结构化, 便于浏览器和搜索引擎的解析
也可以保证在没有css的情况下, 文档的显示也是格式化的
最终目的就是提高网站的可访问性，使得不同设备的用户以及残障人士都能轻松访问网站
例如使用head标签包裹页面的头部，使用main标签包裹页面的主体，使用footer标签包裹页面的底部

标签和属性

img标签的title属性和alt属性的区别?

title属性是提示文本, 鼠标悬停时展示提示信息
alt属性是替换文本, 图片加载失败时展示, alt属性是图片的必须属性, 可以帮助搜索引擎理解图片内容, 同时也是读屏器的阅读内容

简述⼀下src与href的区别

src会下载资源, 用于替换当前元素的内容。它通常与 <img>, <script>, <iframe>, <<video>, <audio> 等标签一起使用。主要用于加载图片、脚本、视频、音频等媒体资源。
href会在文档和资源之间建立关联,。它通常与 <a>, <link>等标签一起使用。主要用于页面导航、引入css样式表、引入外链JS等文件资源

iframe有那些缺点？

iframe 会阻塞主⻚⾯的 Onload 事件
并且和主⻚⾯共享连接池，所以会影响⻚⾯的并⾏加载
如果需要使⽤ iframe ，可以通过JS动态给 src 属性赋值，这样可以绕开以上两个问题
iframe可以嵌入其他网站的内容，这可能会导致安全问题，如点击劫持、钓鱼攻击等。

HTML全局属性有哪些?

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

Canvas和SVG有什么区别？

绘图格式与可缩放性：

- Canvas是基于位图的绘图技术, 缩放后会造成图像失真, Canvas以位图的形式存储图像
- SVG是基于矢量图形的绘图技术，可以任意缩放而不失真。SVG以文本的形式储存图像

可编辑性：

- Canvas输出位图, 一旦绘制完成，也就无法直接修改了。
- SVG输出XML文本，修改XML代码就可以实现图形的重新编辑

渲染方式与性能：

- Canvas是在HTML5画布中绘制图形，无法与页面中的其他元素的交互，但是依靠GPU加速技术，它的图形渲染性能非常高。
- SVG是通过DOM元素来呈现图形，可以与其他HTML元素进行交互，但是在处理大量图形或复杂动画时，渲染性能比较一般

图像处理：

- Canvas：提供了一些原生的图像处理方法，可以方便地对图像进行处理。
- SVG：并不提供原生的图像处理方法，只能依靠第三方库来实现。

p标签和div标签的区别?

p是段落标签,有明确的语义
div是容器标签,没有明确的语义
p标签不能嵌套p标签
div标签可以嵌套任何标签
p有默认样式, 通常用于嵌套一段文字
div标签没有默认样式, 什么地方都能用

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

局部处理: 使用transfrome 的 scale(0.5) 属性单独处理
全局处理: 把viewport 属性的缩放值设置为 0.5

H5

html5有哪些新特性?

->新增了多媒体(video/audio)

->新增了语义化标签(header/footer/nav/asid)

->新增了存储API(localStorage和sessionStorage)

->新增了绘画API(canvas)

->新增了拖拽释放API

->新增了表单增强控件(data/time/email/url)

->新增了多线程编程(webworker)

->新增了通信技术 websocket

HTML5离线储存的使⽤和⼯作原理

概念

在⽤户没有网络连接时，也可以正常访问应⽤，当⽤户建立⽹络连接后，更新⽤户机器上的缓存⽂件

原理

离线存储是基于 .appcache ⽂件的缓存机制(不是存储技术)实现的，通过这个⽂件上的解析清单离线存储资源，这些资源就会像 cookie ⼀样被存储了下来。当⽹络在处于离线状态下时，浏览器会通过被离线存储的数据进⾏⻚⾯展示

使用

⻚⾯头部像下⾯⼀样加⼊⼀个 manifest 的属性；
在 cache.manifest ⽂件的编写离线存储的资源
在离线状态时，操作 window.applicationCache 进⾏需求实现

浏览器是怎么对 HTML5 的离线储存资源进⾏管理和加载的呢

在线的情况下，如果浏览器发现 html 头部有 manifest 属性，它就会请求 manifest ⽂件
如果第⼀次访问 app ，浏览器就根据manifest⽂件的内容下载资源, 进⾏离线存储。
如果已经访问过 app, 浏览器会对比manifest ⽂件, 如果⽂件有变化，就要更新资源, 如果文件没变化, 就要复用资源
离线的情况下，浏览器就直接使⽤离线存储的资源。

元素分类

⾏内元素有哪些？块级元素有哪些？空(void)元素有那些？

⾏内元素有： a b span img input select strong

块级元素有： div p 列表标签(ul ol li dl dt dd) 标题标签(h1 h2 h3 h4) 表格标签(table)

空元素： <br> <hr> <img> <input> <link> <meta>

空元素是什么: 空元素就是自闭合标签, 标签里没有内容

⾏内元素/块级元素有什么区别？

在排列方式上:

块级元素独占一行, 行内元素一行展示多个,

在盒模型角度:

块级元素可以设置宽高和内外边距, 行内元素仅支持左右的内外边距

在默认值上:

块级元素默认宽度是父元素的100%, 行内元素的默认宽度是内容宽度

在嵌套上:

块级元素可以嵌套任何标签, 行内元素不能嵌套块级元素

其他

如何在⻚⾯上实现⼀个圆形的可点击区域？

图片方案: 使用svg图片

CSS方案: 使用border-radius绘制

JS方案: 确定圆心的坐标和半径, 然后计算点击的坐标在不在圆的范围内