前端面试题----HTML篇

HTML面试题

面试题：HTML和HTML5有什么区别？

主要有三个区别：

1、文档声明区别

HTML：超文本标记语言，一种纯文本类型的语言。文档声明太过复杂。

HTML5：文档声明HTML5方便书写，精简，有利于程序员快速的阅读和开发。

2、结构语义区别

html：没有体现结构语义化的标签，如：<div id="nav"></div>

html5：添加了许多具有语义化的标签，如：<article>、<aside>、<audio>、<bdi>...

3、绘图区别

HTML5：HTML5的canvas（画布）元素使用脚本（通常使用JavaScript）在网页上绘制图像，可以控制画布每一个像素。

HTML不行。

​ 面试题：行内元素有哪些？块级元素有哪些？ 空(void)元素有哪些？

行内元素有哪些？

• a - 锚点
• em - 强调
• img - 图片
• font - 字体设定 ( 不推荐 )
• i - 斜体
• input - 输入框
• span - 无语义行内标签

块级元素有哪些？

• address - 地址
• ul/ol - 列表
• h1 - 标题
• dir - 目录列表
• div - 常用块级容易，也是 css layout 的主要标签
• p - 段落

空(void)元素有哪些？

• <br/> //换行
• <hr> //分隔线
• <input> //文本框等
• <img> //图片
• <link>
• <meta>

​ 面试题：页面导入样式时，使用link和@import有什么区别？

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS（简易信息聚合）等其他事务；@import属于CSS范畴，只能加载CSS。

区别2：link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。所以会出现一开始没有css样式，闪烁一下出现样式后的页面(网速慢的情况下)

区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

区别4：link支持使用Javascript控制DOM去改变样式；而@import不支持。

​ 面试题：title与h1的区别、b与strong的区别、i与em的区别？

title与h1的区别

　　定义：

　　　　title是网站标题，

　　　　h1是文章主题

　　作用：

　　　　title概括网站信息，可以直接告诉搜索引擎和用户这个网站是关于什么主题和内容的，是显示在网页Tab栏里的；

　　　　h1突出文章主题，面对用户，更突出其视觉效果，指向页面主体信息，是显示在网页中的。

b与strong的区别

　　定义：

　　　　b(bold)是实体标签，用来给文字加粗，

　　　　strong是逻辑标签，作用是加强字符语气。

　　区别：

　　　　b标签只是加粗的样式，没有实际含义，常用来表达无强调或着重意味的粗体文字，比如文章摘要中的关键词、 评测文章中的产品名称、文章的导言；

　　　　strong表示标签内字符重要，用以强调，其默认格式是加粗，但是可以通 过CSS添加样式，使用别的样式强调。

　　建议：为了符合CSS3的规范，b应尽量少用而改用strong

i与em的区别

　　定义：

　　　　i(italic)是实体标签，用来使字符倾斜，

　　　　em(emphasis)是逻辑标签，作用是强调文本内容

　　区别：

　　　　i标签只是斜体的样式，没有实际含义，常用来表达无强调或着重意味的斜体，比如生物学名、术语、外来语；

　　　　em表示标签内字符重要，用以强调，其默认格式是斜体，但是可以通过CSS添加样式。

　　建议：为了符合CSS3的规范,i应尽量少用而改用em
 

​ 面试题：img标签的title和alt有什么区别？

alt是代替图片的文字，图片不能显示时会显示alt，title是鼠标指上去时的解释文字。

​ 面试题：png、jpg、gif 这些图片格式解释一下，分别什么时候用？

1. gif图形交换格式，索引颜色格式，颜色少的情况下，产生的文件极小，支持背景透明，动画，无损压缩（适合线条，图标等），缺点只有256种颜色
2. jpg//jpeg支持上百万种颜色，有损压缩，不支持图形渐进与背景透明，不支持动画
3. png为替代gif产生的，位图文件，支持透明，半透明，不透明。不支持动画，无损图像格式。Png8简单说是静态gif，也只有256色，png24不透明，但不止256色。
4. webp谷歌开发的旨在加快图片加载速度的图片格式，图片压缩体积是jpg的2/3，有损压缩，并且支持动画。高版本的W3C浏览器才支持。