前端面试整理********************************************************-CSDN博客

HTML语义化？1、什么是HTML语义化？<基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>　　根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。2、为什么要语义化？为了在没有CSS的...

摘要由CSDN通过智能技术生成

HTML语义化？

1、什么是HTML语义化？

<基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>

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

2、为什么要语义化？

为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

3、写HTML代码时应注意什么？

尽可能少的使用无语义的标签div和span；
在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
不要使用纯样式标签，如：b、font、u等，改用css设置。
需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

4、HTML5新增了哪些语义标签，详述之。

MVC面试问题与答案

读这篇文章不意味着你一定要去并且能搞定MVC面试。这篇文章的目的是在面试之前让你快速复习MVC知识。这篇文章也不是MVC培训课程。

如果你想学习MVC，从这儿开始 Learn MVC ( Model view controller) step by step 7 days ，或者是 step by step MVC (Model View Controller) video series from YouTube.

什么是MVC (模型视图控制器)?

MVC是一个架构模式，它分离了表现与交互。它被分为三个核心部件：模型、视图、控制器。下面是每一个部件的分工：

视图是用户看到并与之交互的界面。
模型表示业务数据，并提供数据给视图。
控制器接受用户的输入并调用模型和视图去完成用户的需求。
MVC

的优缺点有？

答：

优点：

⑴产品结构清晰



⑵易于维护



⑶满足用户的需求



⑷

有利于软件工程化管理

缺点：

⑴增加了系统结构的复杂性



⑵视图与控制器间的过于紧密的链接



⑶视图对模型数据的

低效率访问

MVC的优缺点有？答：优点： ⑴产品结构清晰 ⑵易于维护 ⑶满足用户的需求 ⑷ 有利于软件工程化管理
缺点： ⑴增加了系统结构的复杂性 ⑵视图与控制器间的过于紧密的链接 ⑶视图对模型数据的低效率访问

MVC

的优缺点有？

答：

优点：

⑴产品结构清晰



⑵易于维护



⑶满足用户的需求



⑷

有利于软件工程化管理

缺点：

⑴增加了系统结构的复杂性



⑵视图与控制器间的过于紧密的链接



⑶视图对模型数据的

低效率访问

图: MVC (模型、视图、控制器)

下面是MVC（模型、视图、控制器）架构的控制流程：

所有的终端用户请求被发送到控制器。
控制器依赖请求去选择加载哪个模型，并把模型附加到对应的视图。
附加了模型数据的最终视图做为响应发送给终端用户。

相比Windows应用，MVC架构更适用于Web应用。对于Windows应用，MVP(Model View Presenter )架构更好一点。如果你使用WPF和Silverlight，MVVM更适合。

MVC有两个大的好处：

分离了关注点。后台代码被移到单独的类文件，我们可以最大限度的重复利用代码。
自动化UI测试成为可能，因为后台代码移到了.NET类。这让我们更容易做单元测试和自动化测试。

MVC是三层传统架构的演变。三层架构和MVC有一些通用的组成部分。显示如下：

功能性	三层 / 分层架构	Model view controller architecture
显示与交互	用户界面	视图
UI逻辑	用户界面	控制器
商业逻辑 / 验证	中间层	模型
请求首先发送给谁？	用户界面	控制器
访问数据	数据链接层	数据链接层

图示: 三层架构

在写这篇文章时MVC已经发行了4个版本：MVC 1 , MVC 2, MVC 3, 和 MVC 4. 所以 MVC 4是最新版本。

下面的表格列出了详细的不同点。但是在面试中限于时间问题，很难去说出所有的东西。所以，我标出了所有重要区别。

前几天去面试了一家公司，整下改公司的面试题。

1.新的 HTML5 文档类型和字符集是？

HTML5 文档类型很简单：

<!doctype html>

HTML5 使用 UTF-8 编码示例：

<meta charset="UTF-8">

2.HTML5 中如何嵌入音频？

当前，audio 元素支持三种音频格式：

<!-- control 属性供添加播放、暂停和音量控件 -->
<!-- audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式 -->
<audio controls="controls">
    <source src=”jamshed.mp3″ type=”audio/mpeg”>
    <source src=”jamshed.ogg″ type=”audio/ogg”>
    Your browser does’nt support audio embedding feature.
</audio>

3.HTML5 中如何嵌入视频？

当前，video 元素支持三种视频格式：

<!-- 跟 audio 元素一样 -->
<video width="320" height="240" controls="controls">
    <source src="movie.ogg" type="video/ogg">
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

4.除了 audio 和 vidio，HTML5还有哪些媒体标签？

<embed src="helloworld.swf" />

<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

<video width="320" height="240" controls="controls">
    <source src="movie.ogg" type="video/ogg">
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

<track> 播放带有字幕的视频：

<video width="320" height="240" controls="controls">
    <source src="forrest_gump.mp4" type="video/mp4" />
    <source src="forrest_gump.ogg" type="video/ogg" />
    <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
    <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
</video>

5.HTML5 存储类型有什么区别？

HTML5 能够本地存储数据，在之前都是使用 cookies 使用的。HTML5 提供了下面两种本地存储方案：

localStorage - 没有时间限制的数据存储，数据永远不会过期，关闭浏览器也不会丢失
sessionStorage - 针对一个 session 的数据存储，同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。

6.HTML5 canvas 元素有什么作用？

用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML5 上进行图形操作

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <canvas id