一、属性问题
1.“data-xxx ”属性的作用是什么？
data-xxx 为前端开发者提供自定义的属性，这些属性集可以通过对象的 dataset 属性获取，不支持该属性的浏览器可以通过 getAttribute 方法获取；
- data-xxx 属性用于存储页面或应用程序的私有自定义数据。
- data-xxx 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
示例：
1.利用dataset
<article
id="electriccars"
data-columns="3"
data-index-number="12314"
data-parent="cars">
...
</article>
var article = document.querySelector('#electriccars');
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"
2.不支持dataset属性，使用setAttribute
var cur = document.getElementById('cur');
//使用attributes方法存取data-*自定义属性的值非常方便
var trueImg = cur.getAttribute("data-img");
//使用setAttribute设置 data- 属性
cur.setAttribute('data-site', 'http://www.xxx');
2.href 和 src的区别
href:
- href 标识超文本引用，用在 link 和 a 等元素上，href 是引用和其它页面关联，用来建立当前元素和文档之间的链接。
src:
- src 表示引用资源，在请求 src 资源时会将其指向的资源下载并应用到文档中，用在 img，script，iframe 上，src 是页面内容不可缺少的一部分。
根本区别：src是引入(下载并引入)资源,而href是引用资源。
3. 锚点的作用是什么？如何设置锚点
作用：有了锚点，用户可以快速跳转到与锚点相对应的内容位置，而不需用户滚动滚动条慢慢寻找内容，提高用户体验。
设置锚点：有两种形式设置锚点
- 当设置锚点是a标签时，利用name属性命名锚点
- 当设置锚点是其它标签时，利用id属性命名锚点
注意：要想跳至设置的锚点是利用a标签。
示例：
<body>
<h1 id="h1">h1(非a标签使用id)</h1>
<a name="a">A (a标签使用name)</a>
<div></div>
<a href="#a">回到A</a>
<a href="#h1">回到h1</a>
</body>
4.页面导入样式时，使用link和@import有什么区别？
区别：
- link 属于 HTML 标签，而 @import 是 CSS 提供的；
- 页面被加载的时，link 会同时被加载，而 @import 引用的 CSS 会等到页面被加载完再加载；
- import 只在 IE5 以上才能识别，而 link 是 HTML 标签，无兼容问题；
- link 方式的样式的 权重 高于 @import 的权重。
5. script标签的defer和async属性的区别
两者关键的区别在于：
- 下载完成js之后何时执行代码
- 如果有多个script标签，是否顺序执行
两者都会在从上到下解析HTML结构时，解析至script就会立即下载js文件。
defer(延迟)：
- 下载js完成时不立即执行，而是等到整个页面在内存中正常渲染结束(DOM
最低0.47元/天 解锁文章
4610
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
