HTML面试题整理（一）-一一网

1. rem、em、px、rpx的区别

1.1 rem、em、px、rpx是什么

px（像素）：相对长度单位，一般用于网页端，参照于屏幕、显示器分辨率。
em：相对长队单位，参照父元素的 font-size 属性，如果父元素没有设置 font-size，则继续向上级寻找直至 html 元素，如果 html 也没有该属性值，则参照浏览器的默认字体尺寸。
- em的特点：
  - em的值不固定
  - em会继承父元素的字体大小
rem：rem是 CSS3 新增的一个相对单位，rem相对的只是 HTML根元素，如果HTML元素没有设置font-size属性，那么，则会参照浏览器默认字体大小。
rpx：rpx是微信小程序使用的长度单位，根据各个机型的不同，微信小程序官方进行了针对性的兼容吃处理，使得我们无需自己进行适配处理（当然，对于iphoneX以上的机型还是有些适配问题，例如刘海屏底部会挡住我们自己开发的底部按钮、导航栏等，这些需要我们自己获取机型进行适配），因为rpx是自适应单位，所以没有一个准确的换算，微信小程序屏幕宽度统一为750rpx，根据屏幕大小的不同，实际换算也就不同。具体换算请自行百度了解。例如
- iPhone5 1rpx = 0.42px 　　 1px = 2.34px ；
- iPhone6 1rpx = 0.5px 　　　　1px = 2rpx ；
- iPhone6s 1rpx = 0.552px 　　 1px = 1.81rpx；

注：

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px/1rem=16rpx
rem、em 是响应式单位，rem 根据 html 的 font-size 的大小来决定，例如 html 的 font-size 为 100px , 1rem 就是 100px ，em 是根据父元素决定，换算理论与 rem 同理。px 是基本像素单位。

1.2 px、em、rem的区别是什么

PX 是 1px 等于一个像素 em 是根据父元素 font-size 为参照物， rem 是根据根元素 html标签的font-size 为参照物， rem 与 em 都是基于你的设计中的字体大小计算得到的像素值。 rem 和 em 更适用于响应式布局，rpx是小程序专用长度单位，它是一种自适应单位，参照物为机型以及屏幕大小，没有具体的换算值。

2. 对标签语义化的理解

2.1 什么是语义化

简单讲就是根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

2.2 语义化的好处

清晰的页面结构
- 去掉或样式丢失的时候,也能让页面呈现清晰的结构，增强页面的可读性。
有利于SEO
- 和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息，搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重。
便于团队开发和维护
- 在团队中大家都遵循同一个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。

2.3 一些语义化实用建议

根据文档上下文结构合理的选用最适合表达当前语义的标签；
尽可能少的使用无语义的标签div和span；
不要使用纯样式标签，如：b、font、u等，一切表现改用css设置；
h标签的使用应该根据重要性逐级递减，没有断层。并且一个页面只能有一个h1；
提高关键词密度，如图片替换alt，链接说明title；
正确使用内容容器，如段落p，列表ul, ol, li, dl, dt, dd
需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。