学习了这么久,第一次面试前端,虽然只是电话面试,但是还是很紧张。
主要问题:
1.介绍你的项目
2.html的状态
3html5新增加的标签
4.css的display:none和visibility区别
5.怎么清除浮动
6.jquery的选择器
7.jquery的on和事件绑定区别
问题答案的总结
html的状态:
详细见这篇博客:http://blog.csdn.net/liuwengai/article/details/51722704
html5新增加的标签
<article>标签定义外部的内容(结构元素)
<aside>定义页面内容之外的内容。 aside的内容与article的内容相关。(结构元素)
<figure>定义一组媒介内容的分组,以及它们的标题。(结构元素)
<section>标签定义文档中的节(section,区段)。比如章节,页眉,页脚或文档中的其他部分(结构元素)
<meter>定义预定义范围内的度量。仅用于已知最大和最小值的度量(内联元素)
<progress>定义任何类型的任务的进度。可以使用<progress>标签来显示javascript中耗费时间的函数的进度(内联元素)
<time>定义一个日期/时间 (内联元素)
<audio>定义声音内容。(内嵌元素)
audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式
<video>定义视频。(内嵌元素)
Video也支持多个source元素,链接到不同的视频文件,浏览器将使用第一个可识别的格式
属性值:
autoplay=”autoplay”就绪后马上播放
loop=“loop”播放完再次播放
<command>定义命令按钮 (交互元素)
<datalist>定义下拉列表,与input元素配合使用该元素,定义input可能出现的值,datalist的选项不会被显示出来,它仅仅是合法的输入值列表(交互元素)
<details>定义元素的细节 (交互元素)
<canvas>定义图形,绘制路径,矩形,圆形,字符以及添加图像的方法
Canvas元素本身没有绘图能力,所有的绘制工作必须在JavaScript内部完成
<dialog>定义对话(会话)dialog元素表示几个人之间的对话。
<embed>定义外部交互内容或插件
<event-source>为服务器发送的事件定义目标
<footer>定义 section 或 page 的页脚
<figcaption> 标签定义 figure 元素的标题。
<hgroup> 标签用于对网页或区段(section)的标题进行组合。
<keygen>标签提供一种验证用户的可靠方法。keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。
<header>定义 section 或 page 的页眉(介绍信息)
<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。
<nav>定义导航链接。
<output>定义输出的一些类型。
<source>定义媒体资源
Video也支持多个source元素,链接到不同的视频文件,浏览器将使用第一个可识别的格式
属性值:
autoplay=”autoplay”就绪后马上播放
loop=“loop”播放完再次播放
display:none和visibility:hidden
CSS display:none;
使用该属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”,视为不存在,不加载;
一旦父节点元素应用了display:none,父节点及其子孙节点元素全部不可见
隐藏产生reflow和repaint(回流与重绘)
visibility:hidden;
使用该属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在,也即是说它仍具有高度、宽度等属性值。
引用一段网上的总结:
display:none是个相当惨无人道的声明,子孙后代全部搞死(株连性),而且连块安葬的地方都不留(不留空间),导致全体民众哗然(渲染与回流)。
visibility:hidden则具有人道主义关怀,虽然不得已搞死子孙,但是子孙可以通过一定手段避免(伪株连性),而且死后全尸,墓地俱全(占据空间),国内民众比较淡然(无渲染与回流)。
清除浮动
方法一:使用带clear属性的空元素
在浮动元素后使用一个空元素如<div class="clear"></div>
,并在CSS中赋予.clear{clear:both;}
属性即可清理浮动。
优点:简单,代码少,浏览器兼容性好。
缺点:需要添加大量无语义的html元素,代码不够优雅,后期不容易维护。
方法二:使用CSS的overflow属性
给浮动元素的容器添加overflow:hidden;或overflow:auto;可以清除浮动
方法三:给浮动的元素的容器添加浮动
给浮动元素的容器也添加上浮动属性即可清除内部浮动,但是这样会使其整体浮动,影响布局,不推荐使用。
方法四:使用邻接元素处理
给浮动元素后面的元素换行符 br 添加clear属性。
<style type="text/css">
.div1{
background:#000080;border: