HTML面试题汇总

今天药忘吃喽~ 2022-05-29 13:22 410阅读 0赞

1、主流浏览器内核私有属性css前缀：

*  mozilla内核 (firefox,flock等) -moz
 *  webkit内核(safari,chrome等) -webkit
 *  opera内核(opera浏览器) -o
 *  trident内核(ie浏览器) -ms

2、默认情况下，使用h1标签会形成什么效果?

*  加粗、大号文字

3、关于HTML语义化，你知道的都有哪些标签？

*  header、article、address都属于语义化明确的标签。

4、HTML标签：

*  **块级标签**：默认宽度100%(占满一行)；  
    块级标签自动换行(独占一行，右边不能有任何东西)；  
    块级标签可以使用CSS设置宽度高度！  
    常用的块状元素有：div、 p、 h1\*\*h6、ol、ul、dl、table、address、blockquote、form
 *  **行级标签**：默认宽度由内容撑开(内容多宽、宽度就占多宽)；  
    行级标签不会自动换行(一行当中，从左往右依次排列)；  
    行级标签的宽度高度不能设置！ 常用的内联元素有：a、span、br、i、em、strong、label、q、var、cite、code  
    常用的内联块状元素有：img、input。

5、解释一下utf-8和GBK和ISISO8859-2 字符集

*  charset 属性规定 HTML 文档的字符编码。
 *  UTF-8（8-bit Unicode Transformation  
    Format）是一种针对Unicode的可变长度字符编码，又称万国码。UTF-8用1到6个字节编码UNICODE字符。用在网页上可以同一页面显示中文简体繁体及其它语言（如英文，日文，韩文）。
 *  GBK是汉字编码，是双字节码，可表示繁体字和简体字。
 *  ISO8859-2 字符集，也称为 Latin-2，收集了 东欧 字符。

6、添加样式的方式有

*  内联式：即直接加在标签上的样式 如:`<div style="width:100px;"></div>` 导入样式：`@import url("css/style.css")`
 *  嵌入式：即用`<style>.classname {width: 100px;}</style>`标签括起来写在页面中的样式。  
    外部引用式：即将样式单独放到一个文件夹中，然后用link标签引入页面的形式，如：`<link rel="stylesheet" type="text/css" href="Css.css" />`

7、关于HTML5需要知道的：[指向][Link 1]

8、组成HTML网页必不可少的是，head标签中必不可少的是（此题略不严谨，HTML5中可以省略HTML组成网页的部分）

*  Html,head,body;title.

9、onchange和onblur

*  onchange 在元素值改变时触发。onchange 属性适用于：input、textarea 以及 select元素。
 *  onblur 事件会在对象失去焦点时发生。支持该事件的 JavaScript 对象：button, checkbox,fileUpload, layer, frame, password, radio, reset, submit, text,textarea, window。

10、标签的目的是什么？

*  用可伸缩矢量图来画图或文本

11、img标签中的alt属性的作用是

*  提供替代图片的信息，使屏幕阅读器能获取到关于图片的信息

12、关于置换元素和不可替换元素

*  置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。 例如：浏览器会根据`<img>`标签的src属性的值来读取图片信息并显示出来，而如果查看(x)html代码，则看不到图片的实际内容；`<input>`标签的type属性来决定是显示输入框，还是单选按钮等。 (x)html中 的`<img>、<input>、<textarea>、<select>、<object>`都是置换元素。这些元素往往没有实际的内容，即是一个空元素。置换元素在其显示中生成了框，这也就是有的内联元素能够设置宽高的原因。
 *  不可替换元素：(x)html 的大多数元素是不可替换元素，即其内容直接表现给用户端（如浏览器）。例如：`<label>`label中的内容`</label>` 标签`<label>`是一个非置换元素，文字label中的内容”将全被显示。

13、HTML元素的显示优先级

*  帧元素（frame）>HTML元素优先，表单元素总>非表单元素优先  
    常见的非表单元素包括：链接标记（A），DIV标记，SPAN标记，TABLE标记等等。表单元素覆盖样式元素的根本原因在于HTML元素默认的显示优先级规则。
 *  所有这样HTML元素又可以根据其显示要求分成两类，即有窗口的HTML元素(Windowed Element),无窗口的HTML元素（Windowless Element)。  
    有窗口的元素包括：SELECT元素，OBJECT元素，插件，IE5.01以主更早版本中的IFRAME元素。  
    无窗口的元素包括：大多数的普通HTML元素，如链接和TABLE标记，除了SELECT元素之外的大多数表单元素。

14、DOCTYPE 不存在或形式不正确会导致 HTML 和 XHTML 文档以混杂模式呈现。

15、form表单中input元素的readonly与disabled属性描述

*  设置readonly = true，页面上无法修改内容，但是可以通过JavaScript修改,内容会被提交
 *  设置disabled = true,无法修改内容，也不会被提交

16、iframe的使用场景有

*  典型系统结构，左侧是功能树，右侧就是一些常见的table或者表单之类的。为了每一个功能，单独分离出来，采用iframe。  
    （即与第三方域名下的页面共享cookie）
 *  ajax上传文件。
 *  加载别的网站内容，例如google广告，网站流量分析。
 *  在上传图片时，不用flash实现无刷新。
 *  跨域访问的时候可以用到iframe，使用iframe请求不同域名下的资源。

17、放在HTML里的哪一部分JavaScripts会在页面加载的时候被执行？

*  在HTML body部分中的JavaScripts会在页面加载的时候被执行。
 *  在HTML head部分中的JavaScripts会在被调用的时候才执行。

18、Web Storage分类 ：Web Storage实际上由两部分组成：sessionStorage与localStorage。

*  sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
 *  localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

19、关于比较Ajax与Flash的优缺点

*  Ajax的优势：1.可搜索性 2.开放性 3.费用 4.易用性 5.易于开发。
 *  Flash的优势：1.多媒体处理 2.兼容性 3.矢量图形 4.客户端资源调度
 *  Ajax的劣势：1.它可能破坏浏览器的后退功能 2.使用动态页面更新使得用户难于将某个特定的状态保存到收藏夹中，不过这些都有相关方法解决。
 *  Flash的劣势：1.二进制格式 2.格式私有 3.flash 文件经常会很大，用户第一次使用的时候需要忍耐较长的等待时间 4.性能问题

20、关于HTML`<form>`标签的enctype属性：enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。

*  application/x-www-form-urlencoded 在发送前编码所有字符（默认）
 *  multipart/form-data 不对字符编码。 在使用包含文件上传控件的表单时，必须使用该值。
 *  text/plain 空格转换为 “+” 加号，但不对特殊字符编码。

21、常见的浏览器端存储的方式  
有时需要将网页中的一些数据保存在浏览器端，这样做的好处是，当下次访问页面时，不需要再次向服务器请求数据，直接就可以从本地读取数据。目前常用的有以下几种方法：

*  Cookie：cookie会随着每次HTTP请求头信息一起发送，无形中增加了网络流量，另外，cookie能存储的数据容量有限，根据浏览器类型不同而不同，IE6大约只能存储2K。  
    Cookie可以实现记录访问者的信息、在页面之间传递信息、自动识别用户。
 *  Flash ShareObject：这种方式能能解决上面提到的cookie存储的两个弊端，而且能够跨浏览器，应该说是目前最好的本地存储方案。不过，需要在页面中插入一个Flash，当浏览器没有安装Flash控件时就不能用了。所幸的是，没有安装Flash的用户极少。  
    缺点：需要安装Flash插件。
 *  Google Gear：Google开发出的一种本地存储技术。 缺点：需要安装Gear组件。
 *  userData：IE浏览器可以使用userData来存储数据，容量可达到640K，这种方案是很可靠的，不需要安装额外的插件。缺点：它仅在IE下有效。
 *  sessionStorage：使用于Firefox2+的火狐浏览器，用这种方式存储的数据仅窗口级别有效，同一个窗口（或者Tab）页面刷新或者跳转，都能获取到本地存储的数据，当新开窗口或者页面时，原来的数据就失效了。  
    缺点：IE不支持、不能实现数据的持久保存。
 *  globalStorage：使用于Firefox2+的火狐浏览器，类似于IE的userData。 缺点：IE不支持。
 *  localStorage：localStorage是Web Storage互联网存储规范中的一部分，现在在Firefox3.5、Safari 4和IE8中得到支持。 缺点：低版本浏览器不支持。
 *  结论： Flash shareobject是不错的选择，如果你不想在页面上嵌入Flash，可以结合使用userData(IE6+)和globalStorage(Firefox2+)和localStorage(chrome3+)实现跨浏览器。

[Link 1]: http://blog.csdn.net/qq_26562641/article/details/54669288