前端面试题之HTML/HTML5

忘是亡心i 2022-06-03 03:28 275阅读 0赞

**HTML部分**

> **（1） 谈谈你对Web标准的理解。**  
> WEB标准不是某一个标准，而是一系列标准的组合。  
> 网页主要由三部分组成；  
> 1>结构（Structure）结构化标准语言包括XHTML和XML  
> 2>表现（Presentation）表现保准语言主要包括css  
> 3>行为（Behavior）行为标准主要包括对象模型（如 W3C DOM），ECMAScript并且要求这三部分分离。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制定的标准，比如ECMA（European Computer Manufactures Associatio ）的ECMAScript标准。  
> **以上3点相互分离有哪些优点呢？**  
> （1）易于维护：只 需要更改css文件，就可以改变整站的样式  
> （2）页面相应快：HTML文档体积变小，响应的时间短  
> （3）可访问性：语义化的HTML（结构和表现相互分离的HTML）编写的网页文件，更加容易被屏幕阅读器识别。  
> （4）设备的兼容性：不同的样式表可以让网页在不同的设备上呈现不同的样式  
> （5）搜索引擎：语义化的HTML能更容易被搜索引擎解析，，提升排名

--------------------

> **（2） 浏览器标准模式和怪异模式之间的区别是什么？**  
> 总的来说就是盒子模型 渲染模式的不同  
> **盒模型**  
> 在怪异模式下，盒模型为IE盒模型  
> height =border-top+padding-top+content+padding-bottom+border-bottom；  
> width=border-left+padding-left+content+padding-right+border-right  
> 而标准的盒模型  
> height=content;  
> width=content;  
> **图片元素的垂直对齐方式**  
> 对于inline元素和table-cell元素，标准模式下vertical-align属性默认取值为baseline，在怪异模式下，table单元格中的图片的vertical-align属性的默认值为bottom，因此在图片的底部会有像素的空间  
> **`<table>`元素中的字体**  
> css中，对于font的属性都是可以继承的，怪异模式下，对于table元素，字体的某些元素不会从body等其他封装元素中继承得到，特别是font-size属性  
> **内联元素的尺寸**  
> 标准模式下，non-replace inline元素无法自定义大小，怪异模式下，定义这些元素的width ，height属性可以影响这些元素显示 的尺寸。  
> **元素的百分比高度**  
> 在css中对于元素的百分比高度的规定如下：百分比为元素 包含块的高度，不可以为负值，如果包含块的高度没有显示的给出，该值等同于auto，所以百分比的高度必须在元素有高度声明的情况下使用。  
> 当一个元素使用百分比高度 的时候，标准模式下，高度取决于内容的变化，怪异模式下，百分比高度被正确的使用。  
> **元素溢出的处理**  
> 标准模式下，overflow取默认值visible，在怪异模式下，该溢出会被当作扩展box来对待，即元素的大小由其内容决定，溢出不会裁剪，元素框自动的调整，包含溢出内容。

--------------------

> **（3）`<img>`标签上的title与alt属性的区别是什么?**  
> alt:当图片不显示的时候用文字替代  
> title：为该属性提供信息

--------------------

> **（4）：你如何对网站的文件和资源进行优化？**  
> 1> 尽可能减少http请求的次数，将css,js图片各自合并  
> 2> 将css放在页面的最上面  
> 3> 将js放在页面的最下面  
> 4>避免在css中使用表达式  
> 5>将css,js都放在外部文件中  
> 6> 减少DNS查询  
> 7>最小化css,js减少文件的体积  
> 8>避免重定向  
> 9>移除重复的脚本  
> 10>配置实体的标签ETag  
> 11>使用AJAX缓存，让网站内容分批加载，局部更新  
> 12> 使用CDN托管，降低通信的距离  
> 13>添加Expire/Cache-Control头  
> 14>启用Gzip压缩文件  
> 详情请看：[http://blog.csdn.net/carrie\_zzz/article/details/78824289][http_blog.csdn.net_carrie_zzz_article_details_78824289]

--------------------

> **（5）：什么是语义化的HTML？**   
> 根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅 的代码的同时让浏览器的爬虫和及其很好的解析（直观的认识标签）

--------------------

> **（6）：超级链接有哪些常见的表现形式？**  
> 普通超链接，语法：<`a href="" target="">文本</a>`  
> 下载链接，即目标文档为下载资源，语法如：`<a href="DAY02.zip”>下载</a>`  
> 电子邮件链接，用于链接到email,语法如下：`<a href="mailto:tarena@tarena.com.cn">联系我们</a>`  
> 空连接，用于返回页面的顶部，语法如下：`<a href="#">...</a>`  
> 链接到js以实现特定的功能语法如下：`<a href ="javascript :．．．＂＞ＪＳ功能＜／ａ＞`

--------------------

> **（７）：举例常用的结构　标记，并描述其作用**  
> 结构标记专门用于标识页面的不同结构，相对于使用`<div>` 元素而言，可以实现语义化的标签。 常用的结构标记有：  
> `<header>` 元素：用于定义文档的页眉；  
> `<nav>` 元素：用于定义页面的导航链接部分；  
> `<section>` 元素：用于定义文档中的节，表示文档中的一个具体组 成部分；  
> `<article>` 元素：常用于定义独立于文档的其他部分的内容；  
> `<footer>` 元素：常用于定义某区域的脚注信息；  
> `<aside>` 元素：常用于定义页面的一些额外组成部分，如广告栏、 侧边栏和相关引用信息等。

--------------------

> **（８）：使用 元素显示文本与使用其他文本标记显示文本有什么同？**
> 
> `<label>` 元素的直观效果是直接显示标记之间的文本，而且不会为文本呈现任何特殊效果。但是，它和其他文本标记所不同的是，它为鼠标用户改进了用户体验性。 这是因为，`<label>` 元素可以附带一个for属性，只要将该属性的值设置为表单中任何一个控件的id属性的值，则当用户点击该标签（文本）时，浏览器就会自动将焦点转到和标签相关的表单控件上。即：如果在`<label>`元素内点击文本，就会触发此控件。

--------------------

> **（９）：锚点的作用是什么？如何创建锚点？**  
> 锚点是文档中某行的一个记号，类似于书签，用于链接到文档中的某个位置。当定义了锚点后，我们可以创建直接跳至该锚点（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。 在使用`<a>` 元素创建锚点时，需要使用name 属性为其命名，代码如下所示： `<a name=”anchorname1”>锚点一</a>` 然后就可以创建链接，直接跳转到锚点，代码如下所示： `<a href=”#anchorname1”>回到锚点一</a>`

--------------------

> **（１０）：你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?**  
> Trident：IE浏览器；  
> Gecko：Mozilla浏览器，比如Firefox；  
> Webkit：Safari浏览器，也是Chrome浏览器的内核原型；  
> Blink：Chrome浏览器，Opera浏览器。

--------------------

> **（11）：写出几种IE6 BUG的解决方法**  
> 1>双边距BUG float引起的 使用display  
> 2>像素问题 使用float引起的 使用dislpay:inline -3px  
> 3>超链接hover 点击后失效 使用正确的书写顺序 link visited hover active  
> 4>Ie z-index问题 给父级添加position:relative  
> 5.Png 透明 使用js代码 改  
> 6.Min-height 最小高度 ！Important 解决’  
> 7.select 在ie6下遮盖 使用iframe嵌套  
> 8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用ov er:hidden,zoom:0.08 line-height:1px）

--------------------

> **（12）：Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?**  
> 1>`<!DOCTYPE>` 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器， 用什么文档类型 规范来解析这个文档。  
> 2>严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。  
> 3>在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。  
> 4>DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现

--------------------

> **（13）：行内元素有哪些？块级元素有哪些？ 空(void)元素有那些**  
> 1>CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值， 比如div默认display属性值为“block”，成为“块级”元素； span默认display属性值为“inline”，是“行内”元素。  
> 2>行内元素有：a b span img input select strong（强调的语气） 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p  
> 3>知名的空元素： `<br> <hr> <img> <input> <link> <meta>` 鲜为人知的是： `<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>`

--------------------

> **（14）link 和@import 的区别是？**  
> 1>link是XHTML标签除了加载CSS外还可以定义RSS等其他事物；@import属于css范畴，只能加载CSS  
> 2> link引用css时，在页面载入时同时加载；@import需要页面网页完全载入以后加载  
> 3>link是XHTML标签，无兼容性的问题；@import是在css2.1提出的，低版本的浏览器是不支持的  
> 4>link支持使用javascript控制DOM去改变样式；而@import不支持

--------------------

> **（15）：xhtml和html有什么区别**   
> HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言  
> 最主要的不同：  
> XHTML 元素必须被正确地嵌套。  
> XHTML 元素必须被关闭。 标签名必须用小写字母。  
> XHTML 文档必须拥有根元素

--------------------

> **（16）：html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？**  
> HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。  
> 1>绘画 canvas  
> 2> 用于媒介回放的 video 和 audio 元素  
> 3>本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失,sessionStorage 的数据在浏览器关闭后自动删除  
> 4>语意化更好的内容元素，比如 article、footer、header、nav、section  
> 5> 新的技术webworker, websockt, Geolocation  
> **移除的元素**  
> 纯表现的元素：basefont，big，center，font, s，strike，tt，u；  
> 对可用性产生负面影响的元素：frame，frameset，noframes；

--------------------

> **（17）：HTML5 新的 DocType 和 Charset 是什么？**

<！DOCTYPE html> 
    <meta charset=”UTF-8”>

--------------------

> **（18）：除了音频和视频，HTML5 还支持其他什么新的媒体元素**  
> `< embed>` 作为对外部应对容器  
> `<track>`为媒介规定外部文本轨道  
> `<source>`

--------------------

> **（19）：HTML5 有哪些不同类型的存储，区别是什么？**  
> HTML5 能够本地存储数据，在之前都是使用 cookies 使用的。HTML5 提供了下面两种本地存储方案：  
> localStorage 用于持久化的本地存储，数据永远不会过期，关闭浏览器也不会丢失。 sessionStorage 同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储

--------------------

> **（20）：HTML5 标准提供了哪些新的 API？**   
> Media api  
> History api

--------------------

> **（21）：HTML5引入什么新的表单属性？**  
> Datalist  
> Datatime  
> Output  
> Keygen  
> Date  
> Month  
> Week  
> Time  
> Number  
> Range  
> Email  
> Url

--------------------

> **（22）：什么是HTML5？**  
> HTML5是最新的html标准，它主要目标是提供所有内容而不需要任何额外的插件

--------------------

> **（23）：没有,html5还会工作吗？**  
> 不会，浏览器不能识别它是HTML文档；

--------------------

> **（24）：哪些浏览器支持HTML5?**  
> 所有浏览器都支持

--------------------

> **（25）：HTML5的页面结构**  
> `<header>`代表HTML的头部数据  
> `<nav>`页面导航元素  
> `<article>`自包含的内容  
> `<section>`把分组内容放到区域里  
> `<aside>`代表页面侧边栏内容  
> `<footter>`代表页面的 脚部区域

--------------------

> **（26）：HTML5中的datalist是什么？**  
> HTML5中的Datalist元素有助于提供文本框自动完成特性

--------------------

> **（27）：HTML5中什么是输出元素？**  
> Output当你需要输出值的时候就是输出元素

--------------------

> **（28）:什么是SVG？**  
> SVG代表可缩放矢量图形（和canvas差不多）

--------------------

> **（29）：iframe有哪些缺点？**  
> iframe会阻塞主页面的Onload事件  
> iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载  
> 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript  
> 动态的给iframe添加src属性值，这样可以绕开以上的两个问题。

--------------------

> **（30）：请描述一下cookies,sessionStorage和localStorage的区别？**  
> cookie在浏览器和服务器间来回的传递。sessionStorage和localStorage不会  
> sessionStorage和localStorage的存储空间很大  
> sessionStorage和localStorage 有更加丰富易用的接口  
> sessionStorage和localStorage个子独立的存储空间

--------------------

> **（31）HTML5的离线存储？**  
> localStorage长期存储数据，浏览器关闭后数据不会丢失；  
> sessionStorage数据在浏览器关闭后自动的删除

--------------------

> **（32）：HTML5应用程序缓存和浏览器缓存有什么区别？**  
> 应用程序缓存是HTML5的重要特性之一。提供了离线使用的功能，让应用程序可以获取本地的网站内容。例如HTML CSS，图片以及javaScript。这个特性可以提高网站的性能，它的实现借助于manifest文件  
> `<!doctype hrml> <html manifest="example.appcache"> </html>`  
> 与传统的浏览器缓存相比。他不强制用户访问的网站内容被缓存。

--------------------

> **（33）：如何实现浏览器内多个 标签页之间的通信？（阿里）**  
> 调用localstorage,cookies等本地存储方式：  
> 1>localstorage在一个标签页里被添加，修改，删除时，都会触发一个storage事件，通过在另一个标签页里面监听storage事件，即可获得localstorage存储的值，实现不同标签页的值。  
> 2>使用cookie+setInterval将要传递的信息存储在cookie中 ，每隔一定的时间读取cookie信息，即可随时获取要传递的信息。

--------------------

> **（34）：webSocket如何兼容低浏览器？（阿里）**  
> ActiveX HTMLFile (IE) 、 基于 multipart 编码发送 XHR 、 基于长轮询的 XHR

--------------------

> **（35）：为什么HTML5里面我们不需要DTD（Document Type Definition文档类型定义）？**  
> 在 HTML 4.01 中， 声明引用 DTD，因为 HTML 4.01 基于 SGML（Standard for General Markup Language 通用标记语言标准;）。 DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。 HTML5 不基于 SGML，所以不需要引用 DTD，因此没有声明DTD

--------------------

> **（36）：Canvas和SVG图形之间的区别是什么？**  
> Canvas：  
> 依赖分辨率  
> 弱的文本渲染能力  
> 能够以.png或.jpq格式保存结果图像  
> 最适合图像密集型的游戏，其中的许多对象会被频繁重绘。  
> SVG：  
> 不依赖分辨率  
> 支持事件处理器  
> 最适合带有大型渲染区域的应用程序（比如谷歌地图）  
> 复杂度高会减慢渲染的速度（任何过度使用DOM的应用都不快）  
> 不适合游戏应用

--------------------

> **（37）：HTML5应用缓存是什么？**  
> 常用于实现用户的离线浏览。如果网络连接不可用，页面应该来自浏览器缓存，离线应用缓存可以帮助你达到这个目的。 应用缓存可以帮助你指定哪些文件需要缓存，哪些不需要。

--------------------

> **（38）：简要描述HTML5 中的本地存储**  
> 很多时候我们会存储用户本地信息到电脑上，例如：比方说用户有一个填充了一半的长表格，然后突然网络连接断开了，这样用户希望你能存储这些信息到本地，当网络恢复的时候，他想获取这些信息然后发送到服务器进行存储。 现代浏览器拥有的存储被叫做“Local Storage”，用于存储这些信息。

--------------------

> **（39）：什么是Web Worker？为什么我们需要他们？**  
> （模拟会执行上百万次的繁重代码）：  
> `function text(){ for(var i=0;i<1000000;i++){ x=x+i; } }`  
> 如果上述代码在HTML按钮点击以后执行，这种执行是同步的，即，浏览器必须等到此执行完毕之后才能进行其他操作。因为此操作耗时较长，那么这个操作会导致浏览器冻结并且没有响应，而且屏幕还会出现异常信息。 如果可以将这些繁重的代码移动到Javascript文件中，并采用异步的方式运行，就可以解决这个问题。这就是webworker的作用。Web Worker用于异步执行JavaScript文件，提高浏览器的敏捷度。

[http_blog.csdn.net_carrie_zzz_article_details_78824289]: http://blog.csdn.net/carrie_zzz/article/details/78824289