HTML&CSS中img标签的alt与title属性区别及SEO优化技巧

作者 |樱桃小丸子

友情链接|

HTML&CSS

img的alt和title有什么异同？

alt是图片加载失败时网页上显示的替代文本；

标题是鼠标放在上面时显示的文字，标题是对图片的描述和进一步说明；

这些都是表面的差异。 alt是img的必要属性，但title不是。

对于网站SEO优化，标题和alt是最重要的点：

搜索引擎主要依靠alt属性来判断图像的含义。因此，在图片的alt属性中使用简短的文字描述并包含关键词也是页面优化的一部分。如果条件允许，可以在title属性中进一步描述图片。

简单描述一下src和href的区别

href 指向网络资源的位置，在当前元素（锚点）或当前文档（链接）之间建立链接，用于超链接。

src 指的是外部资源的位置，指向的内容会嵌入到文档中当前标签的位置；当请求src资源时，它所指向的资源会被下载并应用到文档中，比如js脚本、img图片、frame等元素。 。当浏览器解析这个元素时，会暂停其他资源的下载和处理，直到该资源被加载、编译和执行。对于图片、框架等元素也是如此，类似于将指向的资源嵌入到当前标签中。这也是为什么js脚本放在底部而不是头部的原因。

html5新元素？

HTML5 中一些有趣的新功能：

①用于绘画的Canvas元素；

②用于媒体播放的视频和音频元素；

③更好地支持本地离线存储；

④新的特殊内容元素，例如文章、页脚、页眉、导航、部分；

⑤新的表单控件，如日历、日期、时间、电子邮件、url、搜索”

以上是w3c的原话。简单来说，就是更符合标准，提供更多的功能支持；更加标准化，可读性更强，性能提升，功能实现更简单方便。就像手机一样，版本越高功能越多。一些。

更多详情请参见html5新元素

什么是CSS层叠？介绍

CSS 是层叠样式表的缩写。 CSS中的级联是指HTML文档树形结构中的子标签可以继承所有父标签定义的样式，也可以多次定义自己的样式。所有样式都遵循从外到内、从先到后的顺序叠加。如果没有冲突，所有样式都有效。当重复定义冲突时，按照内部优先、最后定义优先的原则进行覆盖，即内部子元素覆盖父元素。稍后定义的样式会覆盖之前定义的样式。

CSS 垂直和水平居中

这是一个经典问题，实现方法有很多种。以下是其中一种实现：

具体方案说明：

① 使用绝对定位left:50%和margin-left取半宽度值的复数形式来设置水平居中。

② 使用绝对定位top:50%和margin-top取高度值一半的复数形式来设置垂直居中

HTML 结构：

CSS代码：

什么是CSS Hack？

为不同的浏览器编写不同的CSS就是CSS Hack。

详情请参阅以下链接

CSS hack百科全书&详解（什么是CSS hack）

您是否知道任何 CSS 浏览器兼容性问题？

CSS多浏览器兼容性问题及解决方案

px和em的区别

px 和 em 都是长度单位。不同的是px的值是固定的，是绝对单位。类似的还有pt（磅，1pt=1/72英寸）、pc（皮卡车，1pc=12pt）和mm（毫米）。 )、cm（厘米）、in（英寸），指定了绝对单位，计算起来更容易。

em的值不是固定的，它是一个相对单位。 em指的是当前默认字体大小的倍数（继承父元素默认字体大小），可以根据父元素字体大小的变化自动调整。例如，2em 是当前字体大小的两倍。如果父元素或默认字体大小为 12pt，则 2em 为 24pt。与ex类似，ex是当前字体大小高度值的倍数（通常是字体大小的一半）。

浏览器默认字体高度为16px。所以未经调整的浏览器遵守：1em=16px。那么12px=0.75em，10px=0.625em

HTML5离线存储

localStorage长期存储数据，浏览器关闭后数据不丢失；

sessionStorage数据在浏览器关闭后会自动删除。

说说你对语义的理解

① 当样式被移除或丢失时，页面可以呈现清晰的结构；

②有利于SEO：与搜索引擎建立良好的沟通，有助于爬虫捕获更有效的信息：爬虫依靠标签来确定每个关键词的上下文和权重；

③ 方便其他设备解析（例如屏幕阅读器、盲人阅读器、移动设备）以有意义的方式呈现网页；

④ 更容易团队开发和维护，语义更具可读性。是网页下一步的重要趋势。遵循W3C标准的团队都遵循这个标准，可以减少差异化。

描述一段语义的 HTML 代码

（HTML5中添加的很多新标签（如：、、and等）都是基于语义设计原则的）

如何让div居中？

设置div的宽度，然后添加margin:0 auto属性

div{宽度：200px;保证金：0 自动； }

列出显示值并描述其功能。位置、相对、绝对定位原点的值分别是多少？

①

块像块类型元素一样显示。

无默认值。像内联元素类型一样显示。

inline-block 显示像内联元素，但其内容显示像块类型元素。

列表项像块类型元素一样显示，并添加了样式列表标记。

②

绝对

Absolute 生成绝对定位的元素，该元素相对于第一个父元素定位而不是静态定位。如果父元素未定位，则相对于 html（浏览器窗口）的根元素定位。

固定的

固定（旧版 IE 不支持）生成绝对定位元素，相对于浏览器窗口定位。

相对的

relative 生成​​一个相对定位的元素，相对于其在文档流中的原始位置定位。

静止的

静态默认值。如果没有定位，元素会出现在正常流程中（忽略顶部、底部、左侧、右侧 z-index 声明）

了解BFC规范

BFC，块级格式化上下文，创建新BFC的盒子是独立布局的，盒子内部子元素的样式不会影响外面的元素。同一个BFC中的两个相邻的块级盒子在垂直方向（与布局方向相关）的边距会塌陷。

（W3C CSS 2.1 规范中的一个概念，确定元素如何定位其内容以及如何与其他元素关联和交互。）

描述CSS Reset的作用和使用。

Reset 重置浏览器的 css 默认属性。浏览器有不同的品种和风格，然后重新设置使它们统一。

最简化的 CSS Reset

CSS 定义权重

CSS有自己的优先级计算公式，不仅仅是内联 > 内部 > 外部样式； ID > 类 > 元素。

了解选择器的特殊性很重要，尤其是在修复错误时，但尽量避免使用它们。

CSS 选择器权重和优先级规则

CSS定位方法有哪些？ position属性的值有哪些？它们之间有什么区别？

CSS中的定位内容为：position:relative |绝对|静态|固定的

• 静态自动定位。自动定位是指元素在页面的普通文档流中由 HTML 自动定位。普通文档中的元素也称为流元素。分层分级无法通过 z-index 完成。

• 相对定位，相对定位不脱离文档流，是指其在原始文档流中的位置，通过上、下、左、右进行定位，并可以通过z-index进行分层分级。

• Absolute 绝对定位，绝对定位与文档流分离，通过上、下、左、右根据最近的已定位（绝对、相对或固定定位）的父元素进行定位。当父位置为静态时，绝对元素会根据body根元素（浏览器窗口）进行定位，并且可以通过z-index进行分层分级。

• 固定固定定位，固定定位与父元素无关（无论父元素是否定位），直接根据浏览器窗口定位，不随滚动条拖动页面而滚动。可以通过z-index进行分层分级。

CSS中margin和padding的区别

margin是外边距，属于元素的外部。相邻元素的边距可以合并。

内边距是内边距。元素内部，相邻元素的填充不能合并。

使用 CSS 预处理器？你喜欢哪一位呢？

什么是 CSS 预处理器？我们现阶段是否使用它，如何使用它？

JavaScript

JS的基本数据类型

数字、字符串、布尔值、对象、未定义

JavaScript 中如何判断变量是否为 String 类型？请写出函数的实现

JavaScript 的 DOM 是什么意思？

DOM 是 W3C 的对象模型。 DOM 是一个平台和语言中立的接口，允许程序和脚本动态访问和更新文档的内容结构和样式。

如何显示/隐藏 DOM 元素

将元素的 css 样式更改为 display: none。另外，还可以将可见性设置为隐藏，透明度设置为0，或者长宽设置为0。

JavaScript 节点是什么意思？

根据W3C标准，HTML中文档的所有内容都是节点，整个文档是一个文档节点，每个html元素是一个元素节点，Html元素中的文本是一个文本节点，每个html属性是一个属性节点，而comments则是评论节点。

创建javascript对象的几种方法

1.工厂模式

2. 构造函数模式

3.原型模式

4. 混合构造函数和原型模式

5.动态原型模式

6. 寄生构造函数模式

7. 安全构造函数模式

JavaScript继承的6种方法

1. 原型链继承

2.借用构造函数继承

3.组合继承（原型+借用构造）

4. 原型继承

5. 寄生遗传

6、寄生联合遗传

JavaScript继承方法详解

NaN 到底是什么？ typeof的结果是什么？如何判断变量的值是否为NaN？

NaN是'not a number'的缩写，意思是“不是数字”，通常在运算过程中生成：

console.log('abc'/4);控制台.log(4 * 'a');

虽然它“不是数字”，但 NaN 结果的类型是数字：

console.log(typeof (4 * 'a')); // 数字

NaN 不等于任何变量，包括 NaN 本身：

console.log(NaN === NaN); // 错误的

要确定变量是否为 NaN，可以使用 isNaN()

函数，但这并不是一个完美的函数。有时使用 value !== value 似乎更准确。幸运的是，ES6 已经有了 Number.isNaN() 方法，它比 isNaN() 准确得多。

如何添加、删除、移动、复制、创建和查找节点？

①创建新节点

createDocumentFragment() //创建 DOM 片段

createElement() //创建一个特定的元素

createTextNode() //创建文本节点

②添加、删除、替换、插入

appendChild() //添加

removeChild() //删除

ReplaceChild() //替换

insertBefore() //插入

③搜索

getElementsByTagName() //按标签名称

getElementsByName() //传递元素的Name属性的值

getElementById() //通过元素Id唯一性

documentload 和 documentready 之间的区别

页面加载时有两个事件

①Load是页面所有资源加载完毕后执行的函数（包括DOM文档树、css文件、js文件、图片资源等）

问题：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，因此可能会影响部分效果。

②$(document).ready()是在DOM文档树加载完之后执行的函数（不包括图片、css等），所以会比load执行得更快。

原生js中不包含ready()方法。唯一的加载方法是 onload 事件。

事件绑定有哪些方法？

以按钮的Click事件为例：

1.将回调函数直接绑定到元素上

点击我

2、JS获取到DOM元素对象后，给onclick属性赋值并绑定事件：document.getElementById('btn').onclick=clickBtn;

3、JS获取到DOM对象后，调用该对象的addEventListener函数绑定事件：document.getElementById('btn').addEventListener('click',clickBtn);

事件沸沸扬扬？

JavaScript事件冒泡介绍及应用

JavaScript 中的伪数组是什么？如何将伪数组转换为标准数组？

伪数组（类似数组）：您不能直接调用数组方法，也不能期望 length 属性产生任何特殊行为，但您仍然可以使用真正的数组遍历方法来遍历它们。

典型的是函数的实参参数，以及像 getElementsByTagName、document.childNodes 等调用。它们都返回 NodeList 对象，这些对象是伪数组。

您可以使用 Array.prototype.slice.call(fakeArray) 将数组转换为真正的 Array 对象。

js多种方法将伪数组转换为标准数组

常用的JS框架有哪些？

前端Js框架总结

Javascript中被调用者和调用者的作用是什么？

caller 返回调用当前函数的函数的引用；

被调用者返回正在执行的函数，它是指定函数对象的主体。

数组方法 pop() push() unshift() shift()

push() 添加到尾部 pop() 删除到尾部 unshift() 添加到头部 shift() 删除到头部

JavaScript中数组对象详解

为什么使用 IIFE

简单来说就是实现模块化，创建私有变量等，很多类库（比如jQuery）都采用这种写法。

JavaScript立即执行函数表达式（IIFE）详解

在严格模式下开发Javascript有什么好处？

参考阮一峰老师的Javascript严格模式详解

Javascript严格模式详解

Node.js的适用场景

高并发、聊天、实时消息推送

描述cookies

Web前端面试题5——简单描述Cookies。 JS中如何操作Cookies？

这是什么活动？ IE和Firefox的事件机制有什么区别？如何停止冒泡？

①我们在网页上进行的某个操作（有些操作对应多个事件）。例如：当我们点击一​​个按钮时，就会产生一个事件。是 JavaScript 可以检测到的行为。

②事件处理机制：IE是事件冒泡，Firefox是事件捕获；

③ ev.stopPropagation();

如何判断一个对象是否属于某个类

使用实例

if(Person 的一个实例)

警报（'是'）；

在Javascript中，有一个函数在执行过程中搜索对象时永远不会搜索原型。这个功能是什么？

拥有自己的财产

js中延迟加载的方法有哪些？

defer和async、动态创建DOM（最常用）、按需异步加载js

JavaScript 的本地对象、内置对象和宿主对象

本地对象如 array obj regexp 等可以用 new 实例化

load Math 等内置对象无法实例化。

宿主就是浏览器自带的文档、窗口等。

手写数组快速排序

快速排序算法的详细讲解可以参考阮一峰老师的文章快速排序

快速排序的 JavaScript 实现

“快速排序”的思想很简单。整个排序过程只需要三步：

(1) 在数据集中，选择一个元素作为“枢轴”。

（2）所有小于“base”的元素都移到“base”的左边；所有大于“base”的元素都会移动到“base”的右侧。

(3) 对“基线”左右两个子集重复第一步和第二步，直到所有子集中只剩下一个元素。

计算字符串“aaaabbbccccddfgh”中的字母数或计算最大字母数。

编写一个函数来删除字符串前后的空格。 （兼容所有浏览器）

如何制作组合选项

组合选项是您可以手动输入值或从下拉列表中选择值的选项。

主意：

① 布局select和input，使input覆盖select，除了select的下拉图标方便选择。

② 编写js，为select添加onchange事件。 onchange时，将input的值设置为select选择的值。

网上有很多成品。你可以自己尝试一下。这是一个。

实施组合选项

其他