• 前端面试题之HTML


    如何理解HTML语义化

    参考答案

    HTML 语义化就是使用正确的标签做正确的事;比如段落就用 p 标签,页眉就用 header 标签,页脚用 footer 标签,导航用 nav 标签,文章就用 article 标签,视频用 video 标签等等。

    语义化 HTML 的好处有:

    1. 易于用户阅读:在没有 CSS 情况下,页面也能够更好的呈现内容结构与代码结构;
    2. 便于团队的开发和维护:更具有可读性,让代码更好的维护;
    3. 有利于 SEO:搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重;
    4. 利于其他设备的解析:如屏幕阅读器、盲人阅读器,提高可访问性。

    meta viewport是做什么用的,怎么写

    参考答案
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    
    参数 含义
    width 设置layout viewport 的宽度,为一个正整数,或字符串"device-width"
    initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
    minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
    maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
    height 设置layout viewport 的高度,这个属性对我们并不重要(很少使用)
    user-scalable 是否允许用户进行缩放

    参考资料

    MDN - <meta>

    博客园 - 移动前端开发之viewport的深入理解

    <head> 部分相关的标签清单:

    1. 英文版
    2. 中文版

    img标签中的alt和title有什么区别

    参考答案
    • alt 是当图片加载失败时,显示在网页上的替代图片的文字;
    • title 是鼠标放在图片上时显示的文字,来更加清楚的表达链接的目的;
    • alt 只适用于 img 标签,而 title 适用于很多标签。

    你用过哪些HTML5标签

    参考资料

    MDN - HTML5标签列表


    HTML5有哪些新特性?废除了哪些元素?如何让低版本的IE支持 HTML5新标签?

    参考答案

    新特性:

    1. 语义:新增加了 <section><article><nav><header><footer> 等标签;
    2. 连通性:增加 Web Sockets、Server-sent events 特性,帮助我们实现服务器将数据推送到客户端的功能;
    3. 离线 & 存储:对本地离线存储的更好的支持;localStorage 长期存储数据,浏览器关闭后数据不丢失;sessionStorage 的数据在浏览器关闭后自动删除;
    4. 多媒体:<audio><video> 元素嵌入并支持新的多媒体内容的操作;
    5. 2D/3D 绘图 & 效果:增加用于绘制图像的 canvas,SVG 矢量图像格式;
    6. 性能 & 集成:HTML5 会通过 XMLHttpRequest2 等技术,帮助您的 Web 应用和网站在多样化的环境中更快速的工作;
    7. 设备访问 Device Access:能够处理各种输入和输出设备。

    废除的元素:

    1. 表现元素:basefont、big、center、font、s、strike、tt、u;
    2. 部分浏览器支持的元素:applet、bgsound、blink、marquee;
    3. 对可用性产生负面影响的元素:frameset、frame、noframes,在 html5 中不支持 frame 框架,只支持 iframe 框架。

    让低版本的 IE 支持 HTML5 新标签:
    使用 html5shiv 可以解决 IE 低版本不兼容的问题,只需要在 head 中加入当版本低于 IE9 时,浏览器会加载 html5.js 脚本,使得支持 HTML5 的新功能,也可以将脚本文件下载到本地。

    <head>
      <!--[if lt IE 9]>
      <script src='http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js'>
      </script>
      <![endif]-->
    </head>
    

    参考资料

    MDN - HTML5


    H5是什么

    参考答案

    首先 H5 != HTML5,其次 H5 是指在手机这类无法播放 Flash 的移动端上呈现的,可以达到 Flash 效果的网页,也可称移动端 PPT。


    @import与link的区别

    参考答案
    1. @import 是 CSS 提供的语法规则,只有导入样式表的作用;link 是 HTML 的标签,不仅可以加载 CSS,还可以定义 RSS、rel 连接属性等;
    2. 页面被加载时,@import 引入的 CSS 将在页面加载完毕后被加载;link 标签引入的 CSS 被同时加载;
    3. @import 在 IE5+ 才能被识别;link 不存在兼容问题;
    4. @import 不支持使用 JS 控制 DOM 改变样式;而 link 支持。

    常见的浏览器内核

    参考答案

    浏览器的内核分成两部分:渲染引擎JS引擎

    渲染引擎:负责取得网页的内容(HTML、XML、图像等)、整理讯息(例如加入 CSS 等),以及计算网页的显示方式,然后会输出至显示器或打印机。

    JS 引擎:解析 JavaScript 语言,执行 JavaScript 语言来实现网页的动态效果。

    常见的浏览器内核如下:

    • Trident 内核(又称 MSHTML):IE、猎豹安全浏览器、360安全浏览器、搜狗浏览器、百度浏览器、UC浏览器等等;
    • Gecko 内核:Netscape6 及以上版本、FireFox 等;
    • Webkit 内核:Chrome、Safari等;
    • Presto 内核(现为 Blink):Opera7 及以上。

    什么是重绘和重排

    参考答案

    传送门 - 重绘和重排(回流)


    什么是DOCTYPE

    参考答案

    <!DOCTYPE>必须声明在文档中的最前面的位置。

    <!DOCTYPE>声明不是一个 HTML 标签,它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

    注意:总是给您的 HTML 文档添加 <!DOCTYPE> 声明,确保浏览器能够预先知道文档类型。


    HTML全局属性有哪些

    参考资料

    HTML 全局属性汇总


    更多面试题请移步至 我的新博客 - 持续更新地址


  • 相关阅读:
    监控网速
    nginx与apache 对比 apache是同步多进程模型,一个连接对应一个进程;nginx是异步的,多个连接(万级别)可以对应一个进程
    shell 爬虫
    shell 读写远程数据库
    tmp
    交换分区 在dd命令执行期间 top 其消耗系统约14%的cpu,而mem占比约为0
    中间变量 加层 对解决问题的思路 逆序生成
    ALLOWED_HOSTS = ['*']
    搭建一个简单的Python的Web环境 监控服务器内存 线程 进程 网络
    小米加步枪
  • 原文地址:https://www.cnblogs.com/LqZww/p/13544020.html
Copyright © 2020-2023  润新知