1.说说同样是引用URL的标签属性href与src的区别是什么?
1.1 href与src的区别:
考点是:src和href的区别
- href 表示超文本引用,指向网络资源的所在位置,用来建立当前文档和引用资源的联系
- 浏览器会识别该文档为css文档,并行下载该文档,并且不会停止对当前文档的处理,这也是在文档中不使用@import的原因
<link href="./style.css" rel="stylesheet" /> <a href="https://xxxx.net" />
- src 引用资源(js脚本 图片等) ,将目标资源下载应用到当前文档
- 当浏览器解析到该元素时,会暂停浏览器的渲染,直到该资源加载完毕,这也是js脚本放到底部的原因
<script src="script.js"></script>
1.2 总结
- src用于引入文件,href用于在当前文档和引用资源之间建立联系。
2.为什么引用CSS的link标签放在头部,引用JS的script标签放在body结束标签之前?
考点:页面渲染机制
link标签放在head标签中
-
用户访问网站时,代码是从上往下解析的,正常展示页面内容的样式,提高用户体验
-
放在 html 结构底部时,加载页面会出现 html 结构混乱的情况
-
script 标签加上 defer | async属性时,可以放在 head 标签中
-
如果设置 async defer :脚本与页面的其余部分异步执行(脚本将在页面继续解析时执行)
- 如果 async 或 defer 都不存在:在浏览器继续解析页面之前立即获取并执行脚本
<script defer async src='x.js' ></script>
3 你知道如何提高一个网站的搜索权重吗?
-
考点:SEO优化、HTML语义化
3.1 SEO优化(TDK) title description keywords
设置网站的 title 标题标签,如:
<title>cookie课堂</title>
设置网站的 description 描述标签,如
<meta name="Description" content="cookie课堂是IT技能学习平台,提供了丰富的java开发、web前端"/>
设置网站的 keywords 关键词标签,如:
<meta name="keywords" content="cookie课堂,java,vue教程,html教程,js教程,w3c教程,css,webpack">
3.2 HTML语义化
-
增强了可读性,结构更加清晰,便于对浏览器、搜索引擎解析
-
搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重,利于 SEO
<title>:定义文档的标题(注:只能在head标签内出现)。
<hn>:h1~h6,分级标题,<h1> 与 <title> 协调有利于搜索引擎优化。
<ul>:无序列表。
<ol>:有序列表。
<header>:页眉通常包括网站标志、主导航、全站链接以及搜索框。
<nav>:标记导航。
<main>:页面主要内容,一个页面只能使用一次。如果是web应用,则包围其主要功能。
<article>:定义外部的内容,其中的内容独立于文档的其余部分。
<section>:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
<aside>:定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
<footer>:页脚,只有当父级是body时,才是整个页面的页脚。
<small>:呈现小号字体效果,指定细则,输入免责声明、注解、署名、版权。
<strong>:和 em 标签一样,用于强调文本,但它强调的程度更强一些。
<em>:将其中的文本表示为强调的内容,表现为斜体。
<mark>:使用黄色突出显示部分文本。
<figure>:规定独立的流内容(图像、图表、照片、代码等等)(默认有40px左右margin)。
<figcaption>:定义 figure 元素的标题,应该被置于 figure 元素的第一个或最后一个子元素的位置。
<cite>:表示所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。
<blockquoto>:定义块引用,块引用拥有它们自己的空间。
<q>:短的引述(跨浏览器问题,尽量避免使用)。
<time>:datetime属性遵循特定格式,如果忽略此属性,文本内容必须是合法的日期或者时间格式。
<abbr>:简称或缩写。
<dfn>:定义术语元素,与定义必须紧挨着,可以在描述列表dl元素中使用。
<address>:作者、相关人士或组织的联系信息(电子邮件地址、指向联系信息页的链接)。
<del>:移除的内容,定义文档中已被删除的文本。
<ins>:添加的内容,定义文档中添加的文本
<code>:标记代码。
<meter>:定义已知范围或分数值内的标量测量。(Internet Explorer 不支持 meter 标签)
<progress>:定义运行中的进度(进程)。
4 你知道什么DOM、BOM吗?描述下这两者的区别及使用
-
考点:DOM、BOM
DOM定义
-
DOM就是⽂档对象模型,是⼀个抽象的概念
-
定义了访问和操作HTML⽂档的⽅法和属性
// 查找节点
document.getElementById("xX")
// 改变元素
document.getElementById("xX").innerHTML = '<h1>1231</h1>';
// 创建元素
document.createElement('h1')
BOM定义
-
BOM就是浏览器对象模型
-
内置对象定义操作浏览器的方法
// 使用window
window.alert('你好,小滴课堂')
// screen
console.log(window.screen.width)
// location
window.location.href
// localStorage
window.localStorage.setItem(key, value)
// history
window.history.go(1)