HTML（上）

前端需要注意哪些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 等技术。

  • 如果图⽚过⼤，可以使⽤特殊编码的图⽚，加载时会先加载⼀张压缩的特别厉害的缩略图，以提⾼⽤户体验。

  • 如果图⽚展示区域⼩于图⽚的真实⼤⼩，则因在服务器端根据业务需要先⾏进⾏图⽚压缩，图⽚压缩后⼤⼩与展示⼀致。

posted @ 2022-07-26 12:35  宋亚洁洁洁  阅读(46)  评论(0)    收藏  举报