标签：总结 面试题 标签 元素 语义 HTML link 页面
前言
通过本人的实习面试和听舍友面试中发现，其实前端面试对html的考查并不会很多（应该是共识），有一些比较细小的知识点可能会询问，主要是H5新特性、<head>标签、行内元素与块元素、语义化含义的考查。下面我将整理我的html面试题，对难点我会写的比较具体，后续有空也会陆续出前端其他知识点的面试题总结，为秋招面试做准备。
HTML常见面试题
1.行内元素有哪些？块级元素有哪些？ 空(void)元素有哪些
行内元素：span、img、input、a、strong...
块级元素：div、h1至h6、ul、ol、li、footer、header、section、p...
空元素：br、hr...
元素间的转换问题：
display: inline; 把某元素转换成了行内元素
display: inline-block;把某元素转换成了行内块元素
display: block; 把某元素转换成了块元素
2.图片格式问题
png:无损压缩，尺寸体积比jpg大，适合做小图标
jpg:有损压缩，比png体积小，适合做中大图片
gif:动图
webp：同时支持有损或者无损压缩，相同质量的图片，webp体积更小。缺点：兼容性不好
3.如何理解语义化
- 产生原因：
以前只有 DIV时，由于它没有什么任何语义意义, 全靠CSS显示页面的样式。故开发者提出了HTML结构的语义化，W3C就制定出了语义化标签。 - 什么是语义化：
语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。即构成HTML结构的标签要有意义，如head 表示页面头，footer 表示页面底部，而不都用div来表示 - 语义化标签：
语义化元素：<article> <aside> <details> <footer> <main> <time>等 - 判断页面是否使用语义化：
去掉页面的CSS看HTML代码结构，若页面结构仍然清晰，内容大体可以正常显示则使用了语义化 - 为什么有语义化、
语义化优点：
• 有利于SEO，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重（参见SEO）
• 屏幕阅读器可以将其用作路标，帮助视障用户浏览页面
(即无障碍网页，具体参照：无障碍原则)
• div查找有意义的代码块比搜索无意义的代码块容易
• 有利于构建清晰的结构，有利于团队的开发、维护
• 用户体验更良好，即使CSS无法加载页面结构仍然清晰
4.H5新特性
- 语义化标签
- 媒体和视频标签
<audio controls="controls">
<source src=" " type=" " />
</audio>
<video muted="muted" loop="loop" controls>
<source src=" " type=" " />
您的浏览器不支持播放此视频
</video>
- 本地缓存
localStorage
sessionStorage - 表单新增功能
<li>邮箱: <input type="email" ></li>
<li>网址: <input type="url" /></li>
<li>日期: <input type="date" /></li>
<li>日期: <input type="time" /></li>
<li>数量: <input type="number" /></li>
<li>手机号码: <input type="tel" /></li>
<li>搜索: <input type="search" /></li>
<li>颜色: <input type="color" /></li>
- 图像功能
Canvas:
如果要在我们的HTML文档中添加Canvas标签，我们需要ID、宽度和高度。
<canvas id="myCanvas" width="100" height="100"> </canvas>
详见MDN canvas教程
SVG:
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" />
</svg>
HTML SVG 是一种描述矢量和光栅图形的标记语言,XML 文本文件定义 SVG 图片和相关行为。
5.导入样式时使用link和@import的区别
- 出现顺序：
link先有，后有@import（兼容性link比@import强：link是HTML提供的语法，没有兼容性问题
@import是CSS提供的语法，IE5以上才兼容）； - 加载顺序：
link在页面加载时 css同时被加载
@import 引入的css需要等页面加载完后再加载 - link方式的样式的权重高于@import的权重。
- 推荐使用
link
6.img标签的title和alt
区别一：
title ： 鼠标移入图片时显示的值
alt ： 图片无法加载时显示的值
区别二：
在seo的层面上，为了增加seo效果要加入alt属性来描述这张图是什么内容或者关键词，因为无法抓取图片的内容。
7.i与em的区别
定义：
i:实体标签，用来做文字倾斜的。
em：是逻辑标签，用来强调文字内容的
区别：
i只是一个倾斜标签，没有实际含义。
em表示标签内字符的重要，用以强调的。
场景：
i更多的用在字体图标，em术语上（医药，生物）
PS:
HTML 着重元素 (<em>) 标记出需要用户着重阅读的内容
<em> 元素是可以嵌套的，嵌套层次越深，则其包含的内容被认定为越需要着重阅读。
请注意： 通常地，该元素会被浏览器展示为斜体文本
8.title与h1的区别
定义：
title：概括了网站信息，写在<head>里，告诉搜索引擎或者用户关于这个网站的内容主题是什么
h1：文章主题内容，写在<body>里
区别：
title是显示在网页标题上、h1是显示在网页内容上
对SEO而言，title比h1更重要
9.在一个页面中给多个元素设置相同的id会导致什么问题
根据id设置的css样式同样会显现。
根据id触发元素事件，只有第一个元素有效后面的元素都无法正常获取
测试代码
<style>
#one{
color: aquamarine;
}
</style>
<body>
<div id="one">47</div>
<div id="one">587</div>
<div id="one">587</div>
</body>
<script>
var one= document.getElementById('one')
one.onclick=function(){
console.log('123')
}
</script>
10.HTML的<head>标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
文档类型声明·<!DOCTYPE>
用法：
<!DOCTYPE html>
作用：
- 声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML规范
- 不是一个 HTML 标签，它就是文档类型声明标签
页面语言 lang
<html lang="en"> 指定html 语言种类
最常见的2个：
en定义语言为英语zh-CN定义语言为中文
lang的作用:
根据根据lang属性来设定不同语言的css样式，或者字体告诉搜索引擎做精确的识别
让语法检查程序做语言识别
帮助翻译工具做识别
帮助网页阅读程序做识别
字符集
<meta charset="UTF-8" />
字符集是多个字符的集合。
计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。
PS:
此外<meta>元素包含的name和content特性：
<meta http-equiv="X-UA-Compatible" content="initial-scale=1.0" name="viewport">
- name指定元素的类型；说明应该包含元素类型的信息。
- content指定实际的元数据内容。
这两个元元素用于定义你的页面的作者和提供页面的简要描述
为它可能让你的页面在搜索引擎的相关的搜索中出现得更多SEO）
参考资料
标签：总结,面试题,标签,元素,语义,HTML,link,页面 来源： https://www.cnblogs.com/fharry/p/16218525.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。