Html面试题解析(2)

Devil
158 阅读7分钟

这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战

你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

  • IE浏览器：Trident
  • Firefox: Gecko
  • Safari: webkit内核
  • Blink内核：是基于webkit内核的子项目，使用的浏览器有：Chrome、opera等除IE、Firefox、Safari之外的所有浏览器。
  • 几乎所有的国产双内核浏览器（Trident\Blink）如：360、猎豹、qq、百度等

每个HTML⽂件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？

  • 文档声明
  • <!DOCTYPE>声明位于文档中的最前面的位置，处于</html>标签之前。此标签可告知浏览器文档使用哪种HTML或XHTML规范（重点：告诉浏览器按照何种规范解析页面）
  • IE浏览器中不书写文档声明会使用“怪异模式”解析网页导致一系列CSS兼容性问题

div+css的布局较table布局有什么优点？

  • 正常场景一般都适用div+css布局
  • 优点
    • 结构与样式分离
    • 代码语义性好
    • 更符合HTML标准规范
    • SEO友好
  • Table布局的适用场景
    • 某种原因不方便加载外部css的场景，如：邮件正文，此时用table布局可以在无css情况下保持页面布局正常

img的alt与title有何异同？ strong与em的异同？

  • alt：不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字
    • 替换文字的语言由lang属性指定，在IE浏览器下会在没有title时把alt当成title显示
  • title: 为设置该属性的元素提供建议性的信息
  • strong\em均为语义化标签
    • strong: 粗体，语义表强烈语气，超过em
    • em: 斜体，表强调

简述⼀下src与href的区别

  • src用于替换当前元素
  • href用于当前文档和引用资源之间确立联系

📑拓展

src是source的缩写，指向外部资源的位置。

  • 指向的内容会嵌入到文档中当前标签所在位置
  • 在请求src资源时会将其指向的资源下载并应用到文档内，例如：js脚本、img图片和frame等元素
  <script src="js.js"></script>
  • 当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也是如此类似于将所指向资源嵌入到当前标签内。（这也是为什么将js脚本放在底部而不是头部）

href是Hypertext Reference的缩写，指向网络资源所在的位置

  • 建立其和当前元素或当前文档之间的链接
<link href="common.css" rel="stylesheet">
  • 浏览器会识别该文档为css文档，就会并行下载资源并且不会停止对当前文档的处理。（这也就是为什么建议使用link方式来加载css，而不是使用@import方式）

知道的网页制作会用到的图片格式有哪些？(6种)

  • png-8 \ png-24 \ jpeg \ gif \ svg \ webp

拓展

  • Webp格式，谷歌开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。
  • 在质量相同的情况下，Webp格式图像的体积比JPEG格式图像小40%

📑在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，⼀次js请求⼀般情况下有哪些地方会有缓存处理？

  • dns缓存、cdn缓存、浏览器缓存、服务器缓存

📑⼀个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

  • 图片懒加载
    • 在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。
  • 如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。
  • 如果图片过大，可以使用特殊编码的图片，加载时会加载一张压缩的缩略图，以提高用户体验。
  • 如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先进行图片压缩，图片压缩后大小与展示一致。

如何理解HTML结构的语义化？

  • 符合W3C统一的规范标准，是技术趋势
  • 没有样式时浏览器的默认样式也能让页面结构很清晰
  • 对功能障碍用户友好。屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”网页
  • 对其他非主流终端设备友好。例如：机顶盒、PDA、各种移动终端
  • 对SEO友好

📑谈谈以前端角度出发做好SEO需要考虑什么？

  • 网页结构和内容方面的情况
    • Meta标签优化：主要包括主题（title）、网站描述（description），还有一些其他的隐藏文字比如作者（author）、目录（category）、编码语种（language）
    • 符合W3C规范的语义性标签的使用

拓展

  • 搜索引擎主要以：外链数量和质量、网页内容和结构来决定某关键字下的网页搜索排名。

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

  • 新特性（9个）
    • 地理位置API
    • 音频、视频API
    • 拖拽和释放API
    • 画布(Canvas)API
    • 语义化标签
    • 增强型表单控件(calendar、date、time、email、url、search)
    • localStorage和sessionStorage
    • 全双工WebSocket
    • SVG
  • 移除的元素
    • 纯表现元素：basefont、big、center、font、s、strike、tt、u
    • 对可用性产生负面影响的元素：frame、frameset、noframes
  • 支持HTML5新标签
    • IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签。
    • 浏览器支持新标签后，还需要添加标签默认的样式
  • 如何区分：
    • DOCTYPE声明（H5更简洁）
    • 新增的结构元素、功能元素

HTML5 Canvas元素的作用？

  • Canvas元素用于在网页上绘制图形
  • 画布是一个矩形区域，您可以控制其每一像素
  • canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
  • 该元素的标签强大之处在于可以直接在HTML上进行图形操作

拓展

  • canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成
<!-- 声明canvas元素标签 -->
<canvas id="myCanvas" width="400px" height="200px"></canvas>

// js内部进行调用，绘制图形
// 1.找到canvas元素
var c = document.getElementById("myCanvas")
// 2. getContext("2d") 对象是内建的 HTML5 对象
// 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
var ctx = c.getContext("2d")
// 3. 设置颜色为：红色
// fillStyle属性：可以是CSS颜色、渐变或图案
ctx.fillStyle="#FF0000"
// 4. 定位置
// fillRect(x,y,width,height)
ctx.fillRect(0,0,150,75)

如何在HTML5页面中嵌入音频、视频？

  • HTML5包含嵌入音频文件的标准方式，支持的格式：MP3、Wav和Ogg
<!-- 音频 Mp3\Wav\Ogg-->
<audio src="" type="audio/mpeg"></audio>
  • HTML5包含嵌入视频文件的标准方式，支持的格式：MP4、WebM和Ogg
<!-- 视频 Mp4\webM\Ogg-->
<video width="450" height="340" controls>
  <source src="" type="video/mp4">
</video>

拓展

  • 为什么audio的type属性：audio/mpeg
    • MPEG-1音频分三层，分别为 MPEG-1 Layer1，MPEG-1 Layer2 以及 MPEG-1 Layer3，并且高层兼容低层。其中第三层协议被称为MPEG-1 Layer 3，简称MP3。

HTML5引入什么新的表单属性？

第一种

  • type属性值 控件
  • color 颜色选择控件
  • date、time 日期、时间选择控件
  • email 电子邮箱输入控件
  • file 文件选择控件
  • number 数字输入控件
  • range 拖拽条
  • search 搜索框
  • url 网址输入控件
<!-- 举例：数字输入控件，只能填写数字 -->
<input type="number">

第二种

  • datalist使用
  • datalist包含<option>元素，类似于<select>元素，然而<datalist>并不是独立控制，相反它是附加在<input type="text"/>上的list
<input type="text" name="" id="" list="dlist">
  <Datalist id="dlist">
    <option value="Blank"></option>
    <option value="Blue"></option>
    <option value="sea"></option>
    <option value="aha"></option>
    <option value="sky"></option>
  </Datalist>

  • 适用场景：假如我们需要用户输入的是他们的国家居住地，我们更喜欢使用<select>元素，因为会限制可选的结果（有时候也许是好的）。但如果我们想要用户自由输入的同时又有一些建议选项，这里就是<datalist>的用处了

  • output使用

<form action="L3_01.html" method="get" oninput="num.value=parseInt(num1.value)+parseInt(num2.value)">
  <input type="number" id="num1"> +
  <input type="number" id="num2"> = 
  <output name="num" for="num1 num2"></output>
</form>
  • 图片展示

h5-output.png

  • keygen的使用（待补）

拓展

  • 每当用户修改<input>元素的 value 时,input事件就会被触发。
avatar
文章
阅读
粉丝