高频口试题-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 进⾏需求实现
https://img-blog.csdnimg.cn/img_convert/5f55a4db40c1d6a7b60c4c43f9598c6e.png
浏览器是怎么对 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方案: 确定圆心的坐标和半径, 然后盘算点击的坐标在不在圆的范围内
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]