zoukankan      html  css  js  c++  java
  • 前端面试题之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 全局属性汇总


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


  • 相关阅读:
    中国石油昆仑加油卡
    157 01 Android 零基础入门 03 Java常用工具类01 Java异常 01 异常介绍 02 异常内容简介
    156 01 Android 零基础入门 03 Java常用工具类01 Java异常 01 异常介绍 01 Java常用工具类简介
    155 01 Android 零基础入门 02 Java面向对象 07 Java多态 07 多态知识总结 01 多态总结
    154 01 Android 零基础入门 02 Java面向对象 07 Java多态 06 内部类 05 匿名内部类
    153 01 Android 零基础入门 02 Java面向对象 07 Java多态 06 内部类 04 方法内部类
    152 01 Android 零基础入门 02 Java面向对象 07 Java多态 06 内部类 03 静态内部类
    151 01 Android 零基础入门 02 Java面向对象 07 Java多态 06 内部类 02 成员内部类
    150 01 Android 零基础入门 02 Java面向对象 07 Java多态 06 内部类概述 01 内部类概述
    149 01 Android 零基础入门 02 Java面向对象 07 Java多态 05 接口(重点)07 接口的继承
  • 原文地址:https://www.cnblogs.com/LqZww/p/13544020.html
Copyright © 2011-2022 走看看