• Welcome to the world's largest Chinese hacker forum

    Welcome to the world's largest Chinese hacker forum, our forum registration is open! You can now register for technical communication with us, this is a free and open to the world of the BBS, we founded the purpose for the study of network security, please don't release business of black/grey, or on the BBS posts, to seek help hacker if violations, we will permanently frozen your IP and account, thank you for your cooperation. Hacker attack and defense cracking or network Security

    business please click here: Creation Security  From CNHACKTEAM

Recommended Posts

前言

通过我的实习面试和舍友的面试,发现其实前端面试对html的测试并不多(应该是共识),可能会问一些比较小的知识点,主要是对H5新功能、头标签、内嵌元素和块元素、语义的测试。下面我整理一下我的html面试问题,关于难点我会写的更具体一些。以后有时间就把其他前端知识点的面试题汇总一下,为秋季招聘面试做准备。

HTML常见面试题

1.行内元素有哪些?块级元素有哪些? 空(void)元素有哪些

内嵌元素:span、img、input、a、strong.

级别元素:div,h1到h6,ul,ol,li,页脚,页眉,节,p。

空元素:br,hr.

元素之间的转换:

显示inline将元素转换成内嵌元素。

display:内嵌块;元素被转换为内联块元素。

显示:块;将元素转换为块元素。

2.图片格式问题

Png:无损压缩,尺寸和体积比jpg大,适合小图标。

Jpg:是有损压缩,比png小,适合制作中大型图片。

Gif:动画

Webp:同时支持有损或无损压缩。同样质量的图片,webp更小。缺点:兼容性差

3.如何理解语义化

原因:

以前只有DIV的时候,因为没有任何语义,所以都是靠CSS来显示页面的样式。因此,开发者提出了HTML结构的语义,W3C制定了语义标签。

什么是语义:

语义化是指根据内容的结构(内容语义)选择合适的标签(代码语义),方便开发者读写更优雅的代码,同时让浏览器的爬虫和机器很好地解析。也就是说,构成HTML结构的标签应该是有意义的。比如head表示页面的头部,footer表示页面的底部,并不是都用div来表示。

语义标记:

语义元素:文章旁注细节页脚主要时间等

确定页面是否使用语义:

移除页面的CSS以查看HTML代码结构。如果页面结构仍然清晰,内容可以正常显示,就使用语义。

为什么有语义和语义优势:

对SEO有好处,帮助爬虫抓取更有效的信息:爬虫依靠标签来确定上下文和每个关键词的权重(见SEO)。

屏幕阅读器可以将它用作路标,帮助视力有障碍的用户浏览页面。

(即无障碍网页,详见无障碍原则)

在div中找到有意义的代码块比找到无意义的代码块更容易。

有利于构建清晰的结构,有利于团队的发展和维护。

用户体验更好,即使CSS无法加载,页面结构依然清晰。

4.H5新特性

语义标签

以及媒体和视频标签。

音频控制='控制'

源src=' '类型=' ' /

/音频

视频静音='静音'循环='循环'控制

源src=' '类型=' ' /

您的浏览器不支持播放此视频。

/视频

本地缓存

本地存储

本地存储

表单的新功能

邮箱:输入类型='电子邮件'/li

地址:li 3360输入类型=' URL'//Li

Li date :输入类型='date' //li

Li日期:输入类型='时间'//li

Li数量:输入类型='数量'//li

李手机号码3360

lt;input type="tel" /></li> <li>搜索: <input type="search" /></li> <li>颜色: <input type="color" /></li>
  • 图像功能

Canvas:
如果要在我们的HTML文档中添加Canvas标签,我们需要ID、宽度和高度。
<canvas id="myCanvas" width="100" height="100"> </canvas>
详见MDN canvas教程

SVG:

	<svg width="100" height="100">
      <circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" />
    </svg>

HTML SVG 是一种描述矢量和光栅图形的标记语言,XML 文本文件定义 SVG 图片和相关行为。

详见MDN SVG教程


5.导入样式时使用link和@import的区别

  • 出现顺序:
    link先有,后有@import(兼容性link比@import强:link是HTML提供的语法,没有兼容性问题
    @import是CSS提供的语法,IE5以上才兼容);
  • 加载顺序:
    link在页面加载时 css同时被加载
    @import 引入的css需要等页面加载完后再加载
  • link方式的样式的权重高于@import的权重。
  • 推荐使用link

6.img标签的title和alt

区别一:
title : 鼠标移入图片时显示的值
alt : 图片无法加载时显示的值
区别二:
seo的层面上,为了增加seo效果要加入alt属性来描述这张图是什么内容或者关键词,因为无法抓取图片的内容。

7.i与em的区别

定义
i:实体标签,用来做文字倾斜的。
em:是逻辑标签,用来强调文字内容的
区别:
i只是一个倾斜标签,没有实际含义。
em表示标签内字符的重要,用以强调的。
场景:
i更多的用在字体图标,em术语上(医药,生物)
PS:

HTML 着重元素 (<em>) 标记出需要用户着重阅读的内容
 <em> 元素是可以嵌套的,嵌套层次越深,则其包含的内容被认定为越需要着重阅读。
 请注意: 通常地,该元素会被浏览器展示为斜体文本

8.title与h1的区别

定义:
title:概括了网站信息,写在<head>里,告诉搜索引擎或者用户关于这个网站的内容主题是什么
h1:文章主题内容,写在<body>
区别:
title是显示在网页标题上、h1是显示在网页内容上
对SEO而言,title比h1更重要


在这里插入图片描述


9.在一个页面中给多个元素设置相同的id会导致什么问题

根据id设置的css样式同样会显现。
根据id触发元素事件,只有第一个元素有效后面的元素都无法正常获取

测试代码
<style>
    #one{
        color: aquamarine;
    }
</style>
<body>
    <div id="one">47</div>
    <div  id="one">587</div>
    <div  id="one">587</div>
</body>
<script>
   var one= document.getElementById('one')
     one.onclick=function(){
        console.log('123')
    }
</script>

10.HTML的<head>标签

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
文档类型声明·<!DOCTYPE>

用法:

<!DOCTYPE html> 

作用:

  • 声明位于文档中的最前面的位置,处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML规范
  • 不是一个 HTML 标签,它就是文档类型声明标签
页面语言 lang
<html lang="en">  指定html 语言种类

最常见的2个:

  1. en定义语言为英语
  2. zh-CN定义语言为中文

lang的作用:
根据根据lang属性来设定不同语言的css样式,或者字体告诉搜索引擎做精确的识别
让语法检查程序做语言识别
帮助翻译工具做识别
帮助网页阅读程序做识别

字符集
<meta charset="UTF-8" />
字符集是多个字符的集合。
计算机要准确的处理各种字符集文字,需要进行字符编码,以便计算机能够识别和存储各种文字。

PS:

此外<meta>元素包含的name和content特性:
<meta http-equiv="X-UA-Compatible" content="initial-scale=1.0" name="viewport">

  • name指定元素的类型;说明应该包含元素类型的信息。
  • content指定实际的元数据内容。
    这两个元元素用于定义你的页面的作者和提供页面的简要描述
    为它可能让你的页面在搜索引擎的相关的搜索中出现得更多SEO)

参考资料

前端语义化
MDN head详解

Link to comment
Share on other sites