知识点解析


前言

今天给大家分享一下HTML和CSS的部分重要知识点,学习学重点,事半功倍!


1:主流浏览器的内核分别是什么?

IE:trident内核 [‘traidnt ]

Firefox:gecko 内核 [ˈɡekəʊ]

Safari:webkit 内核

Chrome,Opera:Blink内核(基于webkit) 

2:每个HTML文件开头都有<!DOCTYPE html>,它的作用是什么

<!DOCTYPE html>声明位于文档中的最前面的位置,此标签告知浏览器文档使用哪种HTML或XHTMl规范(重点:告诉浏览器按照何种规范解析页面)

严格模式下:页面排版及 JS 解析是以该浏览器支持的最高标准来执行

混杂模式:不严格按照标准执行,主要用来兼容旧的浏览器,向后兼容

<!DOCTYPE  html>不存在或格式不正确会导致文档以混杂模式呈现

3: div+css的布局较table布局有什么优点?

(1)div+css布局的好处:

a.符合W3C标准,结构、样式和行为分离,代码结构清晰明了,带来足够好的可维护性。

b.布局精准,网站版面布局修改简单。

c.加快了页面的加载速度(最重要的)。

d.用只包含结构化内容的HTML代替嵌套的标签,提高另外搜索引擎对网页的搜索效率。

table布局的好处

a.容易上手。

b.可以形成复杂的变化,简单快速。

c.表现上更加“严谨”,在不同浏览器中都能得到很好的兼容。

4:img的alt属性与title属性有何异同

alt属性:在图片无法加载的时候才会显示的其值,

title属性:在图片正常加载鼠标划上去显示的值

5:strong标签与em标签的异同

strong:粗体强调标签,强调,表示内容的重要性

em:斜体强调标签,更强烈强调,表示内容的强调点

6:渐进增强和优雅降级之间的不同

渐进增强(progressive enhancement) [prəu'ɡresiv][ɪnˈhɑːnsmənt]

:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级( graceful degradation)[ˈɡreɪsfl ,deɡrəˈdeɪʃn]:一开始就构建完整的功能,然后再针对低版本浏览器进

行兼容。

渐进增强的观点关注内容本身

优雅降级的观点更关注主流浏览器,一些特定的浏览器,除修复较大的错误外,其他的差异将会被直接忽略

7:为什么利用多个域名来存储网站资源

:CDN缓存更方便(CDN主要用来使用户就近获取资源)。

:突破浏览器并发限制(同一时间针对同一域名下的请求有一定数量限制,超过限制数目的请求会被阻塞。一些静态资源,如果放到不同的域名下面就能实现与其他资源的并发请求。)

:节约 cookie 带宽

:节约主域名的连接数,优化页面响应速度

:对于UGC的内容和主站隔离,防止不必要的安全问题。

8:网页标准和标准制定机构的意义

网页标准的制定,使得web发展的更健康,提高网站的易用性。

a、开发者遵循统一的标准,降低了开发难度和开发成本

b、SEO优化网页也会更加方便,不会因为滥用代码出现各种bug和安全问题。

9:简述一下 src与 href 的区别

src 用于替换当前元素,href 用于在当前文档和引用资源之间确立联系。

Src是source的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在的位置。例如:js脚本,img图片,frame等。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,这也是为什么将js 脚本放在底部而不是头部。

href 是 Hypertext Reference 的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载 css,而不是使用@import 方式。

10:网页制作会用的图片格式有哪些

 Png,jpeg,gif,svg,webp

webp格式:谷歌开发的新的图片格式,体积小,质量好,但兼容性略差

14:你如何理解 HTML 结构的语义化?

A:在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构:裸奔时也好看;

B:用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;

C:有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;

D:方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备),更好的方式来渲染网页;

E:便于团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

15:以前端角度出发,有哪些注意事项有利于SEO?

(1).维护网站,提高内容质量,保持更新

(2).网站结构布局优化:尽量简单、开门见山,提倡扁平化结构。

(3).控制首页链接数量,要适中

(4).导航优化:

a:尽量采用文字方式

b:搭配图片导航,但是图片代码一定要进行优化,img标签必须添加“alt”和“title”属性

c:应该加上面包屑导航

(5).控制页面的大小:减少http请求,提高网站的加载速度

(6).适量的关键词和网页描述

title标题,强调重点即可,

meta keywords标签:关键词,列重要关键字即可

meta description标签:网页描述,要高度概括

body中的标签:尽量让代码语义化

a标签:页内链接,要加 “title” 属性加以说明

img应使用 “alt” 属性加以说明

strong、em标签 : 需要强调时使用

巧妙利用CSS布局

谨慎使用 display:none

保留文字效果


总结

这就是今天要跟大家分享的内容呀,最近在复习原来的知识呀,发的博客也是一些总结,我个人认为学习就是要不断复习的呀,emm,过两天学习新知识,也会来跟大家分享的呀,最后,祝屏幕前的你,生活愉快,万事胜意~~~

猜你喜欢

转载自blog.csdn.net/m0_72975897/article/details/126607085
今日推荐