html面试题

1、列举一下块级元素，行内元素，空元素都有哪些？ 块级元素与行内元素的区别？

块级元素（block）：div   ol   ul   li   dl   dt   dd   h1   h2   h3…  p   canvas   table   address   article   footer   header   menu 

行内元素（inline）：span    label   select   strong   textarea

空元素：br   hr   img   input   link   meta   area   col   param   source

块级元素与行内元素的区别： 

① 块级元素可以设置宽高；行内元素不能设置宽高（例外：img 和input可以设置宽高）

② 块级元素独占一行，行内元素不可以

块级元素和行内元素的转化：

① 块级元素 → 行内元素：display: inline;

② 行内元素 → 块级元素：display: block;            （可设置宽高，独占一行）

                                         display: inline-block;  （可设置宽高，不会独占一行）

参考：https://www.jianshu.com/p/815cfbb23992

2、谈谈你对HTML标签语义化的理解

根据内容的结构选择合适的标签，也就是说用正确的标签做正确的事情。

① 页面更容易被搜索引擎收录，有利于SEO。

（ 设置  <meta name="keywords"  content="" />   ）

② 能更好地体现页面的主题，在没有CSS的情况下，页面也能呈现出很好的内容结构。

③ 可以在更多的设备上进行解析（如屏幕阅读器、移动设备、盲人阅读器）；便于团队开发和维护

>>实现HTML标签语义化一些具体的措施：

① 尽可能使用 p 标签，而不是 div、span。原因：p标签在默认情况下有上下间距，对兼容特殊终端有利

② 需要强调的文本，尽量使用 strong（加粗）和 em（斜体），而不是 b 和 i 。

注意：可以针对自己的简历来说一下，如何用html来实现简历页面。

3、怎么在前端HTML里面输出一个空格？

方法一：【html】空格原样输出。使用 <pre></pre> 标签

方法二：【html】改用 html 实体。使用 &nbsp; 表示空格

方法三：【css】空格原样输出。使用 white-space: pre; 样式属性（空白会被浏览器保留，作用和法一相同）

参考：https://www.cnblogs.com/keenoooo/p/10295067.html

https://cloud.tencent.com/developer/article/1181857

4、HTML标签中 meta 是用来作什么的？

meta标签可以避免很多兼容问题。它有两个属性，分别是 name 和 http-equiv 属性。

语法为：<meta name=""  content="">     或者  <meta http-equiv=""  content="">

● name属性：用于描述网页。其属性值 content 中的内容便于搜索分类SEO优化

● http-equiv属性：向浏览器传回一些有用的信息。其属性值 content 中的内容就是各个参数的变量值

例如：常用的几个meta标签

① 声明文档使用的字符编码

<meta charset='utf-8'>   

② 启用360浏览器的极速模式(webkit)

<meta name="renderer" content="webkit"> 

③ 页面关键词，利于SEO

<meta name="keywords" content=""/>    

④ 优先使用 IE 最新版本和 Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>   

⑤ 避免IE使用兼容模式

<meta http-equiv="X-UA-Compatible" content="IE=edge">     

⑥ 网页的宽度自动适应手机屏幕的宽度。

<meta name="viewport"  content="width=device-width, initial-scale=1.0, maximum-scale=3.0, minimum-scale=1.0, user-scalable=no">

width=device-width: 表示宽度是设备屏幕的宽度      initial-scale=1.0: 表示初始的缩放比例

maximum-scale=3.0: 表示最小的缩放比例               minimum-scale=1.0: 表示最大的缩放比例

user-scalable=no    : 用户不可以调整缩放比例（若值为 yes，则用户可以调整缩放比例）