html上标标签 HTML（上）

顺晟科技

2022-09-30 11:33:08

254

前端需要注意哪些SEO？

SEO（Search Engine Optimization），就是搜索引擎优化。

合理的 title 、 description 、 keywords ：搜索对这三项的权重逐个减⼩

title值强调重点即可，重要关键词出现不要超过2次，⽽且要靠前，不同⻚⾯ title 要有所不同。
description 把⻚⾯内容⾼度概括，⻓度合适，不可过分堆砌关键词，不同⻚⾯description 有所不同。
keywords 列举出重要关键词即可。

语义化的 HTML 代码，符合W3C规范：语义化代码让搜索引擎容易理解⽹⻚
重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取⻓度有限制，保证重要内容⼀定会被抓取。
重要内容不要⽤ js 输出：爬⾍不会执⾏js获取内容。
少⽤ iframe ：搜索引擎不会抓取 iframe 中的内容。
⾮装饰性图⽚必须加 alt。
提⾼⽹站速度：⽹站速度是搜索引擎排序的⼀个重要指标。

<img> 的 title 和 alt 有什么区别

title 通常当⿏标滑动到元素上的时候显示。
alt 是 <img> 的特有属性，是图⽚内容的等价描述，⽤于图⽚⽆法加载时显示、读屏器阅读图⽚。可提图⽚⾼可访问性，除了纯装饰图⽚外都必须设置有意义的值，搜索引擎会重点分析。

strong与em的异同？

strong : 粗体，强调标签，强调表示内容的重要性
em : 斜体，强调标签，更强调表示内容的强调点

语义化理解

用正确的标签做正确的事情
HTML 语义化就是让⻚⾯的内容结构化，便于对浏览器、搜索引擎解析；
在没有样式 CSS 情况下也以⼀种⽂档格式显示，并且比较容易阅读。
搜索引擎的爬⾍依赖于标记来确定上下⽂和各个关键字的权重，利于 SEO 。
使阅读源代码的⼈对⽹站更容易将其分块，便于阅读维护理解

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

HTML5 现在已经不是 SGML(标准通用标记语言) 的⼦集，主要是关于图像，位置，存储，多任务等功能的增加
- 绘画 canvas
- ⽤于媒介回放的 video 和 audio 元素
- 本地离线存储 localStorage ⻓期存储数据，浏览器关闭后数据不丢失
- sessionStorage 的数据在浏览器关闭后⾃动删除
- 语意化更好的内容元素，⽐如 article 、 footer 、 header 、 nav 、 section
- 表单控件，比如calendar 、 date 、 time 、 email 、 url 、 search
- 新的技术 webworker 、 websocket 、 Geolocation
移除的元素：
- 纯表现的元素： basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、 u
- 对可⽤性产⽣负⾯影响的元素： frame 、 frameset 、 noframes
⽀持 HTML5 新标签：
- IE8/IE7/IE6 ⽀持通过 document.createElement ⽅法产⽣的标签
- 可以利⽤这⼀特性让这些浏览器⽀持 HTML5 新标签
- 浏览器⽀持新标签后，还需要添加标签默认的样式
当然也可以直接使⽤成熟的框架、⽐如 html5shim

HTML5 的离线储存怎么使⽤，⼯作原理能不能解释⼀下？

在⽤户没有与因特⽹连接时，可以正常访问站点或应⽤，在⽤户与因特⽹连接时，更新⽤户机器上的缓存⽂件
原理： HTML5 的离线存储是基于⼀个新建的 .appcache ⽂件的缓存机制(不是存储技术)，通过这个⽂件上的解析清单离线存储资源，这些资源就会像 cookie ⼀样被存储了下来。之后当⽹络在处于离线状态下时，浏览器会通过被离线存储的数据进⾏⻚⾯展示。
如何使⽤：
- ⻚⾯头部像下⾯⼀样加⼊⼀个 manifest 的属性；
```
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/offline.html
```
- 在 cache.manifest ⽂件的编写离线存储的资源
- 在离线状态时，操作 window.applicationCache 进⾏需求实现

浏览器是怎么对 HTML5 的离线储存资源进⾏管理和加载的呢

在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest ⽂件，如果是第⼀次访问 app ，那么浏览器就会根据 manifest ⽂件的内容下载相应的资源并且进⾏离线存储。如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使⽤离线的资源加载⻚⾯，然后浏览器会对⽐新的 manifest ⽂件与旧的 manifest ⽂件，如果⽂件没有发⽣改变，就不做任何操作，如果⽂件改变了，那么就会重新下载⽂件中的资源并进⾏离线存储。
离线的情况下，浏览器就直接使⽤离线存储的资源。

iframe有那些缺点？

iframe 会阻塞主⻚⾯的 Onload 事件
搜索引擎的检索程序⽆法解读这种⻚⾯，不利于 SEO
iframe 和主⻚⾯共享连接池，⽽浏览器对相同域的连接有限制，所以会影响⻚⾯的并⾏加载
使⽤ iframe 之前需要考虑这两个缺点。如果需要使⽤ iframe ，***是通过 javascript 动态给 iframe 添加 src 属性值，这样可以绕开以上两个问题

xhtml和html有什么区别?

功能上的差别：
- XHTML 可兼容各⼤浏览器、⼿机以及 PDA(掌上电脑) ，并且浏览器也能快速正确地编译⽹⻚
书写习惯的差别：
- XHTML 元素必须被正确地嵌套，闭合，区分⼤⼩写，⽂档必须拥有根元素

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

作用：
- <!DOCTYPE> 声明位于⽂档中的最前⾯，处于 <html> 标签之前。告诉浏览器的解析器，⽤什么⽂档类型规范来解析这个⽂档
区分：
- 严格模式是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法。
- 在混杂模式中，页面以宽松的向后兼容的方式展示。模拟老式浏览器的行为以防止站点无法工作。
意义：
- 为了让 html5 之前版本的文档能和 DTD 声明的标准对应，从而正确的解析；
- 也为了兼容向后兼容，防止一些站点无法工作。

⾏内元素有哪些？块级元素有哪些？空(void)元素有那些？⾏内元素和块级元素有什么区别？

⾏内元素有： a b span img input select strong
块级元素有： div ul ol li dl dt dd h1 h2 h3 h4… p
空元素： <br> <hr> <img> <input> <link> <meta>
区别：
- ⾏内元素不可以设置宽⾼，不独占⼀⾏
- 块级元素可以设置宽⾼，独占⼀⾏

HTML全局属性(global attribute)有哪些？

class : 为元素设置类标识
id: 元素 id ，⽂档内唯⼀
data-*: 为元素增加⾃定义属性
title : 元素相关的建议信息
lang : 元素内容的的语⾔
draggable : 设置元素是否可拖拽
style : ⾏内 css 样式

Canvas和SVG有什么区别？

svg 绘制出来的每⼀个图形的元素都是独⽴的 DOM 节点，能够⽅便的绑定事件或⽤来修改。 canvas 输出的是⼀整幅画布。
svg 输出的图形是⽮量图形，后期可以修改参数来⾃由放⼤缩⼩，不会失真和锯⻮。⽽ canvas 输出的是标量画布，就像⼀张图⽚⼀样，放⼤会失真或者锯⻮

HTML5 为什么只需要写 <!DOCTYPE HTML>

HTML5 不基于 SGML ，因此不需要对 DTD 进⾏引⽤，但是需要 doctype 来规范浏览器的⾏为。
⽽ HTML4.01 基于 SGML ,所以需要对 DTD 进⾏引⽤，才能告知浏览器⽂档所使⽤的⽂档类型。

如何在⻚⾯上实现⼀个圆形的可点击区域？

svg
border-radius
纯 js 实现需要求⼀个点在不在圆上简单算法、获取⿏标坐标等等

viewport

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimu
 // width 设置viewport宽度，为⼀个正整数，或字符串‘device-width’
 // device-width 设备宽度
 // height 设置viewport⾼度，⼀般设置了宽度，会⾃动解析出⾼度，可以不⽤设置
 // initial-scale 默认缩放⽐例（初始缩放⽐例），为⼀个数字，可以带⼩数
 // minimum-scale 允许⽤户最⼩缩放⽐例，为⼀个数字，可以带⼩数
 // maximum-scale 允许⽤户最⼤缩放⽐例，为⼀个数字，可以带⼩数
 // user-scalable 是否允许⼿动缩放

怎样处理移动端 1px 被渲染成 2px 问题？

局部处理
- mate 标签中的 viewport 属性， initial-scale 设置为 1
- rem 按照设计稿标准⾛，外加利⽤ transfrome 的 scale(0.5) 缩⼩⼀倍即可；
全局处理
- mate 标签中的 viewport 属性， initial-scale 设置为 0.5
- rem 按照设计稿标准⾛即可

div+css的布局较table布局有什么优点？

改版的时候更⽅便，只需要修改 css ⽂件。
⻚⾯加载速度更快、结构化清晰、⻚⾯显示简洁。
表现与结构相分离。
易于优化（ SEO ）搜索引擎，排名更容易靠前

简述⼀下src与href的区别

src ⽤于替换当前元素，href ⽤于在当前⽂档和引⽤资源之间确⽴联系。
src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌⼊到⽂档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应⽤到⽂档内，例如 js 脚本，img 图⽚和 frame框架等元素
<script src ="js.js"></script> 当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，图⽚和框架等元素也是这样，类似于将所指向资源嵌⼊当前标签内。这也是为什么将 js 脚本放在底部⽽不是头部
href 是 Hypertext Reference 的缩写，指向⽹络资源所在位置，建⽴和当前元素（锚点）或当前⽂档（链接）之间的联系，如果我们在⽂档中添加 <link href="common.css" rel="stylesheet"/> 那么浏览器会识别该⽂档为 css ⽂件，就会并⾏下载资源并且不会停⽌对当前⽂档的处理。这也是为什么建议使⽤ link ⽅式来加载 css ，⽽不是使⽤ @import ⽅式

⽹⻚制作会⽤到的图⽚格式有哪些？

png-8 、 png-24 、 jpeg 、 gif 、 svg、webp、Apng
Webp： WebP 格式，⾕歌开发的⼀种旨在加快图⽚加载速度的图⽚格式。图⽚压缩体积⼤约只有 jpeg的 2/3 ，可以大量节省服务器带宽资源和数据空间。
在质量相同的情况下，webp 格式图像的体积要⽐ jpeg 格式图像⼩ 40% 。
Apng：全称是 “Animated Portable Network Graphics” , 是 png 的位图动画扩展，可以实现 png 格式的动态图⽚效果。

从⽤户刷新⽹⻚开始，⼀次js请求⼀般情况下有哪些地⽅会有缓存处理？

dns 缓存， cdn 缓存，浏览器缓存，服务器缓存

⼀个⻚⾯上有⼤量的图⽚（⼤型电商⽹站），加载很慢，你有哪些⽅法优化这些图⽚的加载，给⽤户更好的体验。

图⽚懒加载，在⻚⾯上的未不可视区域可以添加⼀个滚动事件，判断图⽚位置与浏览器顶端的距离与⻚⾯的距离，如果前者⼩于后者，优先加载。
如果为幻灯⽚、相册等，可以使⽤图⽚预加载技术，将当前展示图⽚的前⼀张和后⼀张优先下载。
如果图⽚为css图⽚，可以使⽤ CSSsprite ， SVGsprite ， Iconfont 、 Base64 等技术。
如果图⽚过⼤，可以使⽤特殊编码的图⽚，加载时会先加载⼀张压缩的特别厉害的缩略图，以提⾼⽤户体验。
如果图⽚展示区域⼩于图⽚的真实⼤⼩，则因在服务器端根据业务需要先⾏进⾏图⽚压缩，图⽚压缩后⼤⼩与展示⼀致。

上一篇：纪念IE支持的彻底结束（？）有用的C 下一篇：html基础菜鸟教程初识HTML（

网站建设

Html

html上标标签 HTML（上）