面向面试编程 - HTML 篇
前言
“面向面试编程系列”以面试问题为切入点，整理归纳前端基础知识，作为日常学习、工作以及今后面试中的备忘录。资料来源广泛，官方文档、学习课程、社区面经均有参考。遇到新的问题也会及时收录进来，持续更新。先从“最简单”的 HTML 开始吧。
正文从这里开始~
01. 你知道哪些 HTML 标签
display 属性默认值分别为
block、inline和inline-block
-
块级： div、p、h1、ul、li、dl、dt、ol、pre、hr、form、option、address -
行内： span、img、i、a、strong、em、code、label、video、canvas、b、br、iframe -
行内块： input、textarea、button、select
其中像
img、video、iframe等又称为可替换元素
02. 什么是可替换元素
-
可替换元素的展现效果不是由 CSS来控制的，这些元素是一种外部对象，它们外观的渲染是独立于CSS的。可替换元素的内容是通过标签类型及其属性值来决定的。比如<img />标签，展示的内容是由src属性决定的。浏览器去下载src属性给到的资源，并用该资源去替换img标签，页面默认展示出来的宽高就是图片资源的宽高，我们也可以用CSS覆盖其样式
03. 谈谈 HTML 语义化
语义类标签是作为自然语言和纯文本的补充，可用来表达一定的结构或消除歧义。
好处：
-
带来了清晰的 DOM 结构，在没有 CSS 的时候也能保证良好的页面可读性 -
良好的 SEO，可以让搜索引擎更好的爬取更多页面的有效信息 -
支持更多类型的设备，如读屏软件等
缺点：
-
一些语义类标签自带样式，可能不是真正需要的，需要额外做处理 -
兼容性问题 -
不太好确定页面元素究竟该使用哪个语义标签，过分滥用反而会导致页面结构复杂，嵌套过深等问题
03. strong 和 b 以及 em 和 i 标签的区别
-
b 标签仅让内容加粗突出显示，在语义上不具备强调重要性的作用，可用在文本中的摘要关键词等 -
strong 标签在语义上突出内容的重要性，如用在标题和一些说明上；也常被用来标记警告或警示标志突出内容的严重性 -
i 标签代表在普通文本中具有不同语态的一段文本，比如普通文本中展示一个技术术语可用之进行包裹 -
em 表示重音，代表强调某个内容，通常会随着强调位置的不同改变句子的含义。比如我今天吃了一个苹果，强调“一个“和强调“今天“这句话想传达的意思是不一样的
