胖蔡说技术
1、HTML语义化的理解
HTML语义化就是用正确的标签做正确的事。
- Html语义化可以让页面的内容机构化、结构清晰化，以便于浏览器、搜索引擎进行解析
- 爬虫也依赖HTML标签来确定上下文和关键字的权重，利于SEO的优化
- 对开发者友好，让人更容易读懂，利于代码可读性
2、块状元素和行内元素有哪些？如何相互转换？
块状元素是指独占一行，默认宽度为100%，可以设置宽高。高度由自身内容决定，可以设置margin和padding属性。常见的块状元素：
<address>：定义地址<caption>：定义表格标题<dd>：定义列表中定义条目<div>：定义文档中的分区或节<dl>：定义列表<dt>：定义列表中的项目<fieldset>：对表单中的相关元素进行分组<form>：创建 html 表单<h1> - <h6>：定义标题<hr>：创建一条水平线<li>：定义列表项目<legend>：元素用于表示其父元素 <fieldset> 的内容标题。<ol>：有序列表<ul>：无序列表<p>：定义段落<pre>：预格式化的文本<table>： HTML 表格<tbody>：表格主体（正文）<td>：表格中的标准单元格<tfoot>：表格的页脚（脚注或表注）<th>：表头单元格<thead>：表格的表头<tr>：表格中的行
不独占一行，与其他行内元素共享一行；设置宽高无效，高度由自身内容决定；margin 上下无效、左右有效；padding 均有效；行内元素不能包含块元素，除了a元素。常见的行内元素如下：
<span> <a> <srong> <b> <i> <em> <sub> <sup> <mark> <u> <img > <del> <input> <textarea> <select>行内块元素和相邻的行内元素（包含行内块）在一行上，它们直接会有空白缝隙，一行可以显示多个（行内元素特点），默认宽度就是内容的宽度（行内元素特点），高度、宽度、内外边距都可以自定义（块元素特点）。
如何转换？
- 转为块状：
display: block;
- 转为行内元素：
display: inline; - 转为行内块元素：
display: inline-block;
3、h5新增哪些元素？
- canvas：定义绘制图形
- audio：音频
- video：视频
- embed：定义嵌入式内容
- datalist：定义选项列表
- nav：定义导航链接的部分
- section：定义文档中的节（section、区段）
- footer：定义 section 或 document 的页脚。
- header：定义了文档的头部区域
- aside：定义页面的侧边栏内容。
4、src和href的区别?
href表示超文本引用，用于建立当前元素与文档的链接，目的不是为了引用资源，而是为了建立联系，让当前标签能够链接到目标地址。
src指向的内容会嵌入到文档中当前标签所在的位置。src与href的却别如下：
- href 指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的联系。在请求 src 资源时会将其指向的资源下载并应用到文档中，比如 JavaScript 脚本，img 图片；
- href 用于在当前文档和引用资源之间确立联系；src 用于替换当前内容；
- 当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。
5、iframe 的优缺点？
优点：
- 解决加载缓慢的第三方内容，如图标或广告，这些问题可以由iframe来解决
- iframe能够原封不动的把嵌入的网页展现出来
- 并行加载脚本
- 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe嵌套，可以增加代码的可重用
缺点：
- 阻塞主页面的
Onload事件 - 没有语义，不利于搜索引擎识别
- 增加http请求，加载也需要时间
- 移动设备无法完全显示框架，设备兼容性差。
6、常见的浏览器内核有哪些？
Gecko（Firefox）内核：Firefox、Netscape6及以上版本、MozillaWebKit内核：Safari、ChromeBlink内核：ChromeTrident内核：IE浏览器Presto内核：Opera（Opera内核原为 Presto，现为Blink）
7、DOCTYPE的作用？严格模式和混杂模式的区别？
<!DOCTYPE>声明位于位于HTML文档中的第一行，声明叫做文件类型定义（DTD)，声明的作用为了告诉浏览器该文件的类型。处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
- 严格模式（标准模式）：是指浏览器按照 W3C 标准解析代码。严格模式是浏览器根据web标准去解析页面，是一种要求严格的
DTD，不允许使用任何表现层的语法，如<br/>。 - 混杂模式（兼容模式）：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。混杂模式是一种比较宽松的向后兼容的模式。混杂模式通常模拟老式浏览器的行为，以防止老站点无法工作。
HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）
8、对于WEB标准以及W3C的理解与认识
WEB标准分为结构（structural layer）、表示（presentation layer）和行为（behavior layer）。三部分独立分开，使其更具有模块化：
- 结构（
structural layer）：其中主要由HTML标签组成。通俗来说：页面body里面我们写入的标签都是为了页面的结构。
- 表示（
presentation layer）：css样式表，通过css可以使页面的结构标签更具美感 - 行为（
behavior layer）：指页面和用户具有一定的交互，同时页面结构或者表现发生变化，主要是有js组成
W3C对web标准提出了规范化的要求：
- 标签字母要小写
- 标签要闭合
- 标签不允许随意嵌套
- -尽量使用外链css样式表和js脚本,让结构、表现和行为分为三块，符合规范，同时提高页面渲染速度，提高用户的体验。
- 样式尽量少用行间样式表，使结构与表现分离，标签的id和class等属性名要做到见文知义，标签越少，加载越快，用户体验更高，代码维护简单，便于改版
- 不需要变动页面内容，便可提高打印版本而不需要复制内容，提高网站易用性。
