前端面试题及答案,HTML

1.1<img>标签上title属性与alt属性的区别是什么?

alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。

这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户,视觉障碍的用户和使用屏幕阅读器的用户等。

title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。

1.2、分别写出以下几个HTML标签:文字加粗、下标、居中、字体

加粗:<b><strong>

下标:<sub>

居中:<center>

字体:<font><basefont>

1.3、请写出至少5html5新增的标签,并说明其语义和应用场景

section:定义文档中的一个章节

nav:定义只包含导航链接的章节

header:定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。

footer:定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。

aside:定义和页面内容关联度较低的内容——如果被删除,剩下的内容仍然很合理。

1.4、请说说你对标签语义化的理解?

a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构

b. 有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;

c. 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;

d. 便于团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

1.5Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?

<!DOCTYPE> 声明位于文档中的最前面,处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。

严格模式的排版和 JS 运作模式是,以该浏览器支持的最高标准运行。

在混杂模式中,页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

1.6、你知道多少种Doctype文档类型?

标签可声明三种 DTD 类型,分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset。

XHTML 1.0 规定了三种 XML 文档类型:Strict、Transitional 以及 Frameset。

Standards (标准)模式(也就是严格呈现模式)用于呈现遵循最新标准的网页,

Quirks(包容)模式(也就是松散呈现模式或者兼容模式)用于呈现为传统浏览器而设计的网页。

1.7HTMLXHTML——二者有什么区别

a. XHTML 元素必须被正确地嵌套。

b. XHTML 元素必须被关闭。

c. 标签名必须用小写字母。

d. XHTML 文档必须拥有根元素。

1.8html5有哪些新特性、移除了那些元素?

a. HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加。

b. 拖拽释放(Drag and drop) API

c. 语义化更好的内容标签(header,nav,footer,aside,article,section)

d. 音频、视频API(audio,video)

e. 画布(Canvas) API

f. 地理(Geolocation) API

g. 本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失

h. sessionStorage 的数据在页面会话结束时会被清除

i. 表单控件,calendar、date、time、email、url、search

j. 新的技术webworkerwebsocket

移除的元素:

a. 纯表现的元素:basefont,big,center, s,strike,tt,u;

b. 对可用性产生负面影响的元素:frame,frameset,noframes;

1.9iframe的优缺点?

优点:

a. 解决加载缓慢的第三方内容如图标和广告等的加载问题

b. iframe无刷新文件上传

c. iframe跨域通信

缺点:

a. iframe会阻塞主页面的Onload事件

b. 无法被一些搜索引擎索引到

c. 影响浏览器中的并行资源下载,iframe和父页面不能共享下载

d. script脚本标签写在了iframe之前,iframe中的资源会被阻塞

1.10Quirks模式是什么?它和Standards模式有什么区别?

在写程序时我们也会经常遇到这样的问题,如何保证原来的接口不变,又提供更强大的功能,尤其是新功能不兼容旧功能时。IE6以前的页面大家都不会去写DTD,所以IE6就假定 如果写了DTD,就意味着这个页面将采用对CSS支持更好的布局,而如果没有,则采用兼容之前的布局方式。这就是Quirks模式(怪癖模式,诡异模式,怪异模式)。

区别:总体会有布局、样式解析和脚本执行三个方面的区别。

a. 盒模型:在W3C标准中,如果设置一个元素的宽度和高度,指的是元素内容的宽度和高度,而在Quirks 模式下,IE的宽度和高度还包含了padding和border。

b. 设置行内元素的高宽:在Standards模式下,给<span>等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效。

c. 设置百分比的高度:在standards模式下,一个元素的高度是由其包含的内容来决定的,如果父元素没有设置百分比的高度,子元素设置一个百分比的高度是无效的用

d. 设置水平居中:使用margin:0 auto在standards模式下可以使元素水平居中,但在quirks模式下却会失效。

1.11、请阐述table的缺点

a. 太深的嵌套,比如table>tr>td>h3,会导致搜索引擎读取困难,而且,最直接的损失就是大大增加了冗余代码量。

b. 灵活性差,比如要将tr设置border等属性,是不行的,得通过td

c. 代码臃肿,当在table中套用table的时候,阅读代码会显得异常混乱

d. 混乱的colspan与rowspan,用来布局时,频繁使用他们会造成整个文档顺序混乱。

e. table需要多次计算才能确定好其在渲染树中节点的属性,通常要花3倍于同等元素的时间。

f. 不够语义

1.12、简述一下srchref的区别

src用于替换当前元素;href用于在当前文档和引用资源之间确立联系。

src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置

href是Hypertext Reference的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接

原文地址:https://www.cnblogs.com/binmengxue/p/12120604.html

时间: 2024-11-01 16:19:01

前端面试题及答案,HTML的相关文章

最全的web前端面试题及答案整理 你不得不看

面试web前端开发,不管是笔试还是面试,都会涉及到各种专业技术问题,今天小编整理了一些常见的web前端面试题及答案,希望对大家有所帮助. 1.常用那几种浏览器测试?有哪些内核(Layout Engine)? (Q1) 浏览器:IE,Chrome,FireFox,Safari,Opera. (Q2) 内核:Trident,Gecko,Presto,Webkit. 2. 说下行内元素和块级元素的区别?行内块元素的兼容性使用?(IE8 以下) (Q1) 行内元素:会在水平方向排列,不能包含块级元素,设

前端面试题及答案整理(一)(转)

各公司秋招很快就开始了,最近在准备面试的东西,干脆将发现的各类 面试题整理一下共享出来,大部分面试题是没有标准答案的,我给出的答案也是仅供参考,如果有更好的解答欢迎在评论区留言. Part1 手写代码 现场手写代码是现在面试中很常见的一类面试题,考察基础的数据结构与算法能力. 1 数组去重的实现 基本数组去重 Array.prototype.unique = function(){ var result = []; this.forEach(function(v){ if(result.inde

web前端面试题及答案

1.常用那几种浏览器测试?有哪些内核(Layout Engine)? 答: (Q1) 浏览器:IE,Chrome,FireFox,Safari,Opera.    (Q2) 内核:Trident,Gecko,Presto,Webkit. 2. 说下行内元素和块级元素的区别?行内块元素的兼容性使用?(IE8 以下) 答: (Q1) 行内元素:会在水平方向排列,不能包含块级元素,设置width无效,height无效(可以设置line-height),margin上下无效,padding上下无效. 块

前端面试题及答案,网络和优化

1.1.讲讲输入完网址按下回车,到看到网页这个过程中发生了什么 a. 域名解析 b. 发起TCP的3次握手 c. 建立TCP连接后发起http请求 d. 服务器端响应http请求,浏览器得到html代码 e. 浏览器解析html代码,并请求html代码中的资源 f. 浏览器对页面进行渲染呈现给用户 参考<输入URL到展现页面的全过程> 1.2.谈谈你对前端性能优化的理解 a. 请求优化: 合并JS和CSS,减少DNS查找次数,避免重定向,使用GET完成AJAX请求,减小请求中的Cookie,缓

史上最全前端面试题(含答案) - Web开发面试题

HTML+CSS 1.对WEB标准以及W3C的理解与认识 标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外 链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被更多的用户所访问.内容能被更广泛的设备所访问.更少的代码和组件,容易维 护.改版方便,不需要变动页面内容.提供打印版本而不需要复制内容.提高网站易用性: 2.xhtml和html有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言 最主要的不同: XHTML 元素必须被正

Java -- Web前端面试题及答案(需更深入了解)

Web前端方面 1.CSS引入的方式有哪些? 1)外联:<link>标签 2)内联:<style>标签 3)元素内嵌:元素的style属性 2.CSS选择符有哪些? 标签选择符.类选择符.id选择符.组合选择符 3.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto) 4."=="和"==="的不同 ==只比较值,===比较值和数据类型 5.什么是盒

前端面试题及答案,CSS

1.1.请列举几种可以清除浮动的方法(至少两种) 浮动会漂浮于普通流之上,像浮云一样,但是只能左右浮动.正是这种特性,导致框内部由于不存在其他普通流元素了,表现出高度为0(高度塌陷). a. 添加额外标签,例如<div style="clear:both"></div> b. 使用br标签和其自身的html属性,例如<br clear="all" /> c. 父元素设置 overflow:hidden:在IE6中还需要触发hasL

一份来自于全球的前端面试题清单,看看老外喜欢考哪些题(部分有答案)

方括号中的蓝色标题是题目的出处,有些题目在原址内包含答案.搜集的大部分外国前端面试题没有做翻译,单词并不难,大家应该看得懂.题目旁边的方括号内, 简单记录了与此题相关的知识点.总共大概一千多道,包含国内的题目,如有错误,欢迎指正.有些原链可能已无法打开,有些可能需要代理才能查看. 一.HTML [HTML related interview questions] 1.What is doctype? Why do u need it? 2.What is the use of data-* at

前端面试题2016--HTML

本文由我收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习.透彻学习,形成自己的知识链.万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的!也是不可能的!不可能的!不可能的! 前端还是一个年轻的行业,新的行业标准, 框架, 库都不断在更新和新增.正如赫门在2015深JS大会上的<前端服务化之路>主题演讲中说的一句话:“每18至24个月,前端都会难一倍”,这些变化使前端的能力更加丰富.创造的应用也会更加完美.所以关注各种前端技术,跟上快速变化的节奏,也是身为一个前