前端面试题 - html标签和属性

本文链接：https://blog.csdn.net/EchoLiner/article/details/129421750

1、em标签和strong标签的区别

<em>这是斜体：Indicates emphasis</em>
<br/>
<strong>这是粗体：Indicates stronger emphasis</strong>

区别1️⃣：

em标签表示强调，strong 标签表示更强烈的强调。

在浏览器中，em 标签用斜体表示，strong标签用粗体表示。

区别2️⃣：

em 标签用来局部强调，strong 标签用来全局强调。

em标签的强调是有顺序的，只有阅读到文章某处时才会注意到它。

strong标签的强调是无序的，看见文章时立马就凸显出来的关键词句。

区别3️⃣：

em 标签表示内容的着重点，strong 标签表示内容的重要。

em 标签会改变所在句子的语意，strong 标签不会改变所在句子的语意。

可通过如下例子来说明：

<!-- （1）这里强调的是谁是炎黄子孙，强调的主体是“我们” -->
<p><em>我们</em>是炎黄子孙</p>
<!-- （2）这里强调的是我们是不是炎黄子孙，强调的主体是“是” -->
<p>我们<em>是</em>炎黄子孙</p>
<!-- （3）这里强调的是我们是什么，强调的主体是“炎黄子孙” -->
<p>我们是<em>炎黄子孙</em></p>

2、b标签和strong标签的区别

<b>这是粗体：bold </b>
<br/>
<strong>这是粗体：Indicates stronger emphasis</strong>

b标签基于物理的样式，strong标签基于内容的样式。

b标签和strong标签都是使字体加粗。

b标签只对视觉效果进行了强调，语义上没有帮助。

strong标签的语义性更强，搜索引擎更关注strong标签下的关键词，更有利于网站排名。在一些网站上，strong标签也用来表示强调，但如果页面上有太多strong标签，可能不利于网站排名。

总结：通常strong标签替换b标签来使用。

3、i标签和em标签的区别

<i>这是斜体：italic</i>
<br/>
<em>这是斜体：Indicates emphasis</em>

i标签基于物理的样式，em标签基于内容的样式。

i标签是视觉要素，仅表示样式上是斜体，没有强调的语义。

这两个标签在HTML4.01中不推荐使用，建议用CSS样式。

em标签是表达要素。 em标签表示一般的强调文本，这个标签具有语义。该标签中的内容在搜索引擎中更受重视,一些语音阅读器也会根据它在阅读时加强语气。

总结：通常 em标签替换 i标签使用。

4、HTML标签，基于内容的样式和基于物理样式有什么区别？

（1）基于内容的样式

基于内容的样式标签会告诉浏览器它所包含的文本具有特定的含义、上下文或者用法。然后浏览器就会把与该含义、上下文或者用法一致的格式应用在文本上。基于内容的样式标签赋予含义，而不是格式化。因此，它们对于自动处理来说非常重要，计算机并不关心文档的外观如何。

使用 HTML/XHTML 基于内容的样式标签时要遵从一些规则，一旦开始使用基于内容的样式之后，文档将会更加一致，而且可以更好地帮助执行自动搜索和内容编辑。这些标签是：

注：基于内容的样式更有利于SEO优化。

（2）基于物理的样式

在某些情况下，可能是出于合法性或者版权等方面的原因的考虑，你希望文本以某种特殊的方式来显示（例如斜体或加粗），在这种情况下，就可以对文本使用物理样式。

在使用 HTML 或 XHTML 时，都应该避免使用物理标签。应当尽可能地使用基于内容的样式。

当前的 HTML/XHTML 标准一共提供了 9 种物理样式，包括粗体（bold）、斜体（italic）、等宽（monospaced）、下划线（underlined）、删除线（strikethrough）、放大（larger）、缩小（smaller）、上标（superscripted）和下标（subscripted）文本。这些标签是：

注：请记住这些物理样式标签对紧接的文本产生的强烈效果。要实现在整个文档范围内对文本显示的全面控制，请使用CSS样式表。

5、title标签和h1标签的区别

（1）基本区别：

h标签分为h1、2、3、4、5、6，都是标题标签，写在html的body部分。h1标签通常写在文章的正文标题部分，展示给用户看的。

title标签只有一个，写在网页的head部分，展示给搜索引擎看的，搜索引擎的搜索结果中展示的标题就是title标签里的内容。

（2）设置这两个标签的注意事项：

一个网页中，h1标签最好只出现一次，而其他h标签可以出现多次。建议h标签应用于网页中可以被称之为标题的部分。而针对文章页而言，往往title标签也会用到h1标签。title标签不会在网页中展示，其设置的目的更多是应用在搜索引擎上。titile标签应该在每一个网页中都存在，且除了你的关键词之外还需要包含你的品牌词。当前网页越重要的关键词应该越靠左设置。title标签的字数建议不超过30个字。超出了在搜索引擎上就会出现省略号。

6、src属性和href属性的区别

src和href的作用都是用于请求资源。

（1）请求资源类型不同

href：超文本引用，用于建立文档与资源的联系，常用的有：link、a。

src：将其所指向的资源下载并应用到当前页面，常见的有script、img。

（2）作用结果不同

href：用于文档与资源之间确立联系。

src：请求到的资源替换当前内容。

（3）浏览器的解析不同

href：将资源解析成css文件，会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式加载 css，而不是使用 @import 方式。

src：会暂停其他资源的处理，直到该资源加载、解析和执行完毕，将其所指向资源应用到当前内容。这也是为什么把js文件放在底部而不是头部的原因。

7、<img>的title属性和alt属性的区别

title 通常是当鼠标滑动到元素上时显示。

alt是<img>标签的特有属性，是图片内容的等价描述，用于图片无法加载时显示、读屏器阅读图片。可提高图片访问性，除了纯装饰图片外都必须设置有意义的值，搜索引擎会重点分析。

8、iframe标签有哪些缺点？

（1）iframe会阻塞主页面的Onload事件

（2）搜索引擎的检索程序无法解读这种页面，不利于SEO优化

（3）iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载

（4）会产生很多页面，不容易管理

（5）iframe框架结构有时会让人感到迷惑，如果框架个数多的话，可能会出现上下、左右滚动条，会分散访问者的注意力，用户体验度差

（6）很多的移动设备无法完全显示框架，设备兼容性差

（7）iframe框架页面会增加服务器的http请求，对于大型网站是不可取的

现在基本上都是用Ajax来代替iframe，以iframe已经渐渐的退出了前端开发。

9、行内元素有哪些？块级元素有哪些？空(void)元素有哪些？

行内元素：a、b、span、img、input、strong、select、label、em、button、textarea

块级元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素：即没有内容的HTML元素，例如：br、meta、hr、link、input、img

10、行内元素和块级元素的区别

（1）行内元素与块级元素可以相互转换，通过修改display属性值来切换块级元素和行内元素，行内元素display：inline，块级元素display：block。

（2）行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的；

　块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向下排列。

（3）行内元素不可以设置宽高，宽高随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置外边距margin上下无效，左右有效，内填充padding上下无效，左右有效；

　块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。

（4）块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；

　行内元素不能包含块级元素，只能容纳文本或者其他行内元素。

11、canvas和svg的区别

Canvas和SVG是html5的2种可视化技术，都是在画布上绘制图形和放入图片。

一.Canvas 和 SVG 简介

1.什么是Canvas？

Canvas 是H5新标签

Canvas画布，利用JavaScript在网页绘制图像

在标签中给上宽高：不用加单位

如果在css中给宽高会对图像造成拉伸（默认宽高300px*150px）

通过获取绘制工具getContext(“2d”) 来在画布中绘制图形

2.什么是SVG？

SVG 可缩放矢量图形（Scalable Vector Graphics），基于可扩展标记语言XM，出来的时间比较老。

SVG 用来定义用于网格的基于矢量的图形。

二.Canvas 和 SVG 区别

1.绘制的图片格式不同

Canvas 的工具getContext 绘制出来的图形或传入的图片都依赖分辨率，能够以 .png 和 .jpg格式保存存储图像，可以说是位图。

SVG 可以在H5中直接绘制，但绘制的是矢量图。

由于位图依赖分辨率，矢量图不依赖分辨率，所以Canvas和SVG的图片格式的不同实际上是他们绘制出来的图片的格式不同造成的。

2.Canvas不支持事件处理器，SVG支持事件处理器

Canvas 绘制的图像都在Canvas这个画布里面，是Canvas的一部分，不能用js获取已经绘制好的图形元素。

如下：

html：

<canvas id="canvas" width="600" height="400"></canvas>

js：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.beginPath();
ctx.strokeStyle="red";
ctx.lineWidth=20;
ctx.strokeRect(200,50,300,100);
ctx.fillStyle="silver";
ctx.fillRect(200,100,300,200);

在控制台中可以看到canvas标签里面是没有单独的长方形存在的。

Canvas就像动画，每次显示全部的一帧的内容，想改变里面某个元素的位置或者变化需要在下一帧中全部重新显示。

而SVG绘图时，每个图形都是以DOM节点的形式插入到页面中，可以用js或其他方法直接操作。