如何理解HTML语义化
参考答案
HTML 语义化就是使用正确的标签做正确的事;比如段落就用 p 标签,页眉就用 header 标签,页脚用 footer 标签,导航用 nav 标签,文章就用 article 标签,视频用 video 标签等等。
语义化 HTML 的好处有:
- 易于用户阅读:在没有 CSS 情况下,页面也能够更好的呈现内容结构与代码结构;
- 便于团队的开发和维护:更具有可读性,让代码更好的维护;
- 有利于 SEO:搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重;
- 利于其他设备的解析:如屏幕阅读器、盲人阅读器,提高可访问性。
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 | 是否允许用户进行缩放 |
img标签中的alt和title有什么区别
参考答案
- alt 是当图片加载失败时,显示在网页上的替代图片的文字;
- title 是鼠标放在图片上时显示的文字,来更加清楚的表达链接的目的;
- alt 只适用于 img 标签,而 title 适用于很多标签。
你用过哪些HTML5标签
参考资料
HTML5有哪些新特性?废除了哪些元素?如何让低版本的IE支持 HTML5新标签?
参考答案
新特性:
- 语义:新增加了
<section>
、<article>
、<nav>
、<header>
、<footer>
等标签; - 连通性:增加 Web Sockets、Server-sent events 特性,帮助我们实现服务器将数据推送到客户端的功能;
- 离线 & 存储:对本地离线存储的更好的支持;localStorage 长期存储数据,浏览器关闭后数据不丢失;sessionStorage 的数据在浏览器关闭后自动删除;
- 多媒体:
<audio>
和<video>
元素嵌入并支持新的多媒体内容的操作; - 2D/3D 绘图 & 效果:增加用于绘制图像的 canvas,SVG 矢量图像格式;
- 性能 & 集成:HTML5 会通过 XMLHttpRequest2 等技术,帮助您的 Web 应用和网站在多样化的环境中更快速的工作;
- 设备访问 Device Access:能够处理各种输入和输出设备。
废除的元素:
- 表现元素:basefont、big、center、font、s、strike、tt、u;
- 部分浏览器支持的元素:applet、bgsound、blink、marquee;
- 对可用性产生负面影响的元素: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>
参考资料
H5是什么
参考答案
首先 H5 != HTML5,其次 H5 是指在手机这类无法播放 Flash 的移动端上呈现的,可以达到 Flash 效果的网页,也可称移动端 PPT。
@import与link的区别
参考答案
- @import 是 CSS 提供的语法规则,只有导入样式表的作用;link 是 HTML 的标签,不仅可以加载 CSS,还可以定义 RSS、rel 连接属性等;
- 页面被加载时,@import 引入的 CSS 将在页面加载完毕后被加载;link 标签引入的 CSS 被同时加载;
- @import 在 IE5+ 才能被识别;link 不存在兼容问题;
- @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全局属性有哪些
参考资料
更多面试题请移步至 我的新博客 - 持续更新地址