基础面试题06:简述一下你对HTML语义化的理解？更加通俗易懂！

.用正确的标签做正确的事情。

2.html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;

3.即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;

4.搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;

5.使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

简单例子：以前大部分都是div和span

<body>
 <div id="header">...</div>
 <div id="nav"><span>...</span></div>
 <div class="artical">
 <div class="section"></div>
 </div>
 <div id="side-bar"><span>...</span></div>
 <div id="footer">...</div>
</body>

现在HTML5之后，好多了：article、footer、header、nav、section。

<body>
 <header>...</header>
 <nav>...</nav>
 <article>
 <section>
 ...
 </section>
 </article>
 <aside>...</aside>
 <footer>...</footer>
</body>

布局效果：

义化标签还有<header>(头部)、<nav>(导航)、<main>(主要区域)、<article>(主要内容)、<section>(区块)、<aside>(侧边栏)和<footer>(底部)等。

语义化优点：

没CSS样式的情况下，页面整体也会呈现很好的结构效果
让人更容易读懂-增加代码可读性
让搜索引擎更容易读懂-SEO

2. 默认情况下，哪些HTML标签是块级元素、内联元素、空元素？

内联(行内)元素有：a b span img input select strong；
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；
常见的空元素：<br>、<hr>、<img>、<input>、<link>、<meta>

3. script标签中defer和async的区别

如果没有defer或async属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。

下图可以直观的看出三者之间的区别:

其中蓝色代表js脚本网络加载时间，红色代表js脚本执行时间，绿色代表html解析时间。

defer 和 async属性都是去异步加载外部的JS脚本文件，它们都不会阻塞页面的解析，其区别如下：

执行顺序： 多个带async属性的标签，不能保证加载的顺序；多个带defer属性的标签，按照加载顺序执行；
脚本是否并行执行：async属性，表示后续文档的加载和执行与js脚本的加载和执行是并行进行的，即异步执行；defer属性，加载后续文档的过程和js脚本的加载是并行进行的，js脚本需要等到文档所有元素解析完成之后才执行，DOMContentLoaded事件触发执行之前。

4. HTML5有哪些更新

增加了语义化标签（上边已提到）；
增加了重要的媒体标签<audio>和<video>，还引入了<source>标签配合媒体标签使用；
新增了<canvas>，使用 JavaScript 在就可以网页上绘制图像；
增加了draggable属性设置元素可拖放；
提供了两种在客户端存储数据的新方法localStorage和sessionStorage；
增加了DOM查询操作querySelector和querySelectorAll；
此外，还增加了大量的表单类型和表单属性；

5. DOCTYPE的作用

在网页HTML的顶部，会发现顶部有一个<!DOCTYPE html>声明，所有处于标签之前，它不是html标签。主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。

如果不写文档DOCTYPE声明，浏览器将无法获知HTML或XHTML文档的类型，也会进入怪异模式，那么，在不同的浏览器下，显示的样式效果会不一致；相反，浏览器按照W3C标准来解析代码，呈现页面。

6. 常⽤的meta标签及作用

对于viewport中的值，有下列选项：

width ：宽度(数值/device-width)
height ：高度(数值/device-height)
initial-scale ：初始缩放比例
maximum-scale ：最大缩放比例
minimum-scale ：最小缩放比例
user-scalable ：是否允许用户缩放(yes/no）

对接下来很多应届生面临找工作面试的问题，我将会总结一些前端面试常见的问题和大家分享。希望能帮助到即将进入职场的同学们。话不多说，我们开始吧。

简述一下你对HTML语义化的理解？

1、用正确的标签做正确的事情。

2、使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

3、即使在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的;

4、html语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析;

5、搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重，利于SEO;

欢迎你给我留言~

在线咨询

上一篇：HTML <label> 标签
下一篇：精美html大型商城模板通用电商模板源码

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商