关于前端HTML的面试题（二）

最新推荐文章于 2021-06-04 03:55:26 发布

Jojorain

最新推荐文章于 2021-06-04 03:55:26 发布

阅读量961

点赞数

文章标签： html html5

本文链接：https://blog.csdn.net/Jojorain/article/details/104783720

版权

14.iframe有那些缺点？

1.iframe会阻塞主页面的Onload事件；
2.搜索引擎的检索程序无法解读这种页面，不利于SEO;
3.iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript。动态给iframe添加src属性值，这样可以绕开以上两个问题。

15.HTML与XHTML 二者有什么区别，你觉得应该使用哪一个并说出理由。

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

错误： this is example.

正确：this is example.

2.XHTML 元素必须被关闭。

错误：this isexample.

正确：this isexample.

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

错误：this isexample.

正确：this isexample.

3.1空标签也必须被关闭

错误： 

正确： 

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

所有的 XHTML 元素必须被嵌套于根元素中。

16.常见的浏览器内核有哪些？

Trident内核：IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]

Gecko内核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等

Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]

Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

17.HTML5的form如何关闭自动完成功能？

给不想要提示的 form 或某个 input 设置为autocomplete=off。

18. 实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果。

<div  style="height:1px;overflow:hidden;background:red"></div>

19.title与h1的区别、b与strong的区别、i与em的区别？

1.title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响；
2.strong是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：会重读，而是展示强调内容。
3.i 内容展示为斜体，em表示强调的文本；

Physical Style Elements – 自然样式标签
b, i, u, s, pre

Semantic Style Elements – 语义样式标签
strong, em, ins, del, code

应该准确使用语义样式标签, 但不能滥用, 如果不能确定时首选使用自然样式标签。

20.请描述下 SEO 中的 TDK ？

在SEO中，所谓的TDK其实就是title、description、keywords这三个标签，这三个标签在网站的优化过程中

title标题标签，description描述标签，keywords关键词标签

21. 简单书写 HTML 代码：请写出一个 html 网站代码，内容为一个图片，链接到 “http://www.baidu.com” ，图片路径为 “./img/logo.png”, 为图片设置替换文本 ”webfoss”, 新网页在新窗口打开；

<a href="http://www.baidu.com" alt="webfoss" target="_blank"><img src="./img/logo.png"></a>

22. 标签上 title 与 alt 属性的区别是什么？

alt是给搜索引擎识别，在图像无法显示时的替代文本；title是关于元素的注释信息，主要是给用户解读。当鼠标放到文字或是图片上时有title文字显示。（因为IE不标准）在IE浏览器中alt起到了title的作用，变成文字提示。在定义img对象时，将alt和title属性写全，可以保证在各种浏览器中都能正常使用。

23. 前端页面有哪三层构成，分别是什么？作用是什么？

分成：结构层、表示层、行为层。

1.结构层（structural layer）
由 HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。”

2.表示层（presentationlayer）
由 CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。

3.行为层（behaviorlayer）
负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。

24.DIV+CSS 布局较 table 有什么优势？

1、速率更快，页面体积变小，浏览速度变快，这就使得对于某些控制主机流量的网站来说是最大的优势了；

2、更好地被搜索引擎收录，大部分html页面的样式写入了CSS文件中，便于被搜索引擎采集收录；

3、对浏览者和浏览器更具优势，由于CSS富含丰富的样式，使页面更加灵活性，它可以根据不同的浏览器，而达到显示效果的统一和不变形；

4、修改更有效率，由于使用了DIV+CSS制作方法，在修改页面的时候更加容易省时，提高工作效率；

25.为什么用多个域名存储网站资源更有效？

1、CDN缓存更方便

2、突破浏览器并发限制

3、节约cookie带宽

4、节约主域名的连接数，优化页面响应速度

5、防止不必要的安全问题

26.简要说明一下做好 SEO 需要考虑哪些方面？

一、内部结构优化

1.TDK优化：这里的TDK并不止首页，还有栏目页和文章页的TDK，这就是为什么建站的时候选择可以自定义标签的原因。T即title，网站的标题，很!重!要!如果TDK满分10分，T要占到7分左右，标题是蜘蛛过来第一个看的东西，即第一印象，标题必须包含关键词，即网站的功能，网站是做什么产品或是服务的，语句通顺，不要堆砌关键词。D即description，网站描述，是对标题的补充。K即keywords，栏目页和文章页的TDK在后台具体栏目的高级设置里可以找到。
2.301重定向和404报错页面的制作，必须要有，没什么可说的。
3.层级目录：即打开一个页面要多少层级，这个很多网站都忽略，建议在三级以内，减少蜘蛛爬取需要的时间。
4.关键词布局及密度：根据用户浏览页面点击的热力图发现的点击热区，进而将关键词部署到相应地方。即F布局，一个页面内的关键词密度保持在2%-8%之内，这个只是个经验数据，不一定准确。
5.四处一词：TDK+尾部或锚文本。
6.网站导航：即主导航、次导航和面包屑导航，包含关键词、突出重点、使用纯文字，要和相应TDK保持一致。

二、内容优化

主要是文章的质量要高，即使不是纯原创，至少也要是高度伪原创，伪原创要选取未收录的或者屏蔽了搜索引擎的网站上的文章，或者是翻译过来的文章，只要是你第一个发的文章，蜘蛛就认为是原创。

三、内链优化

总结起来就是增加站内的链接密度，就像蜘蛛网一样，越密集越好，最常见的就是首页、栏目和文章页的相互跳转;LOGO的链接，文章页使用TAG标签和上、下一篇或相关文章，增加页面间的链接数和相关度。

四、外链优化

一个原则就是内容相关、循序渐进，很多人为了迅速增加外链，疯狂添加，但是权重升不上来的原因就在此。外链的主要方法就是增加友情链接，但是要考察增加的友链质量度，包括PR值，是否有nofollow等标签，正常网站的友链数在30个左右，如果你添加友链的网站有超过50个友链，那并不会对你的网站有多少价值，相反还可能把你的权重更多的分给他。除了友链，增加论坛、新闻、博客、SNS、软文的相关链接也是增加网站外链的一种。

27.少写出20个html5标签,并说说各个标签的语义

section：定义文档中的一个章节；
nav：定义只包含导航链接的章节；
header：定义页面或章节的头部,它经常包含logo，页面标题和导航的目录。
footer：定义页面或章节的尾部,它经常包含版权信息，法律信息链接和反馈建议用的地址。
aside：定义和页面内容关联度较低内容，如果被删除，剩下的内容仍然很合理。
article	:定义文章。
audio :定义声音内容。
bdi: 定义文本的文本方向，使其脱离其周围文本的方向设置。
canvas：定义图形。
command	:定义命令按钮。
datalist: 定义下拉列表。
details: 定义元素的细节。
dialog: 定义对话框或窗口。
embed: 定义外部交互内容或插件。
figcaption: 定义 figure 元素的标题。
figure：定义媒介内容的分组，以及它们的标题。
keygen: 定义生成密钥。
mark :定义有记号的文本。
meter：定义预定义范围内的度量。
output :定义输出的一些类型。

28.哪些浏览器支持html5.

IE9
Firefox 3.5
Chrome 3.0
Safari 3.0
Opera 10.5

29.HTML是什么意思？

答：超文本标记语言（Hyper Text Markup Language）。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

30.我们想要在鼠标指向img时浮出一条提示信息，应该使用哪个参数做到？

答：img标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。

31.哪种颜色格式支持上百万种颜色，但是不支持无损压缩？

答：bmp格式。

32.在HTML中，能够实现表格跨列的是？

答：一般使用<td>元素的colspan属性来实现单元格跨列操作，使用元素的rowspan属性来实现单元格的跨行操作。

<table border="1">
  <tr>
    <th>星期一</th>
    <th>星期二</th>
  </tr>
  <tr>
    <td colspan="2">星期天</td>
  </tr>
</table>

Jojorain

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于前端HTML的面试题（二）

14.iframe有那些缺点？1.iframe会阻塞主页面的Onload事件；2.搜索引擎的检索程序无法解读这种页面，不利于SEO;3.iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript。动态给iframe添加src属性值，这样可以绕开以上两个问题。15....
复制链接

扫一扫