ToB企服应用市场:ToB评测及商务社交产业平台

标题: 高频口试题-HTML [打印本页]

作者: 魏晓东 时间: 2024-7-19 20:24
标题: 高频口试题-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方案: 确定圆心的坐标和半径, 然后盘算点击的坐标在不在圆的范围内

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)