HTML的一些点

137 阅读4分钟

其他

什么是data-属性?

HTML的数据属性,⽤于将数据储存于标准的HTML元素中作为额外信息,我们可以通过js访问并操作它,来达到操作数据的⽬的。
前端框架出现之后,这种⽅法已经不流⾏了

HTML5与HTML4的不同之处

⽂件类型声明()仅有⼀型:。新的解析顺序:不再基于SGML。
新的元素:section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr 。 input元素的新类型:date, email, url等等。
新的属性:ping(⽤于a与area), charset(⽤于meta), async(⽤于script)。全域属性:id, tabindex, repeat。
新的全域属性:contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck。
移除元素:acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt

有哪些常⽤的meta标签?

meta标签由name和content两个属性来定义,来描述⼀个HTML⽹⻚⽂档的属性,例如作者、⽇期和时间、⽹⻚描述、关键词、⻚⾯刷新等,除了⼀些http标准规定了⼀些name作为⼤家使⽤的共识,开发者也可以⾃定义name。
charset,⽤于描述HTML⽂档的编码形式
http-equiv,顾名思义,相当于http的⽂件头作⽤,⽐如下⾯的代码就可以设置http的缓存过期⽇期 viewport,移动前端最熟悉不过,Web开发⼈员可以控制视⼝的⼤⼩和⽐例
apple-mobile-web-app-status-bar-style,开发过PWA应⽤的开发者应该很熟悉,为了⾃定义评估⼯具栏的颜⾊。

src和href的区别?

src是指向外部资源的位置,指向的内容会嵌⼊到⽂档中当前标签所在的位置,在请求src资源时会将其指向的资源 下载并应⽤到⽂档内,如js脚本,img图⽚和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,知道将该资源加载、编译、执⾏完毕,所以⼀般js脚本会放在底部⽽不是头部。
href是指向⽹络资源所在位置(的超链接),⽤来建⽴和当前元素或⽂档之间的连接,当浏览器识别到它他指向的⽂件时,就会并⾏下载资源,不会停⽌对当前⽂档的处理。
知道img的srcset的作⽤是什么?(追问)
可以设计响应式图⽚,我们可以使⽤两个新的属性srcset 和 sizes来提供更多额外的资源图像和提示,帮助浏览器选择正确的⼀个资源。
srcset 定义了我们允许浏览器选择的图像集,以及每个图像的⼤⼩。
sizes 定义了⼀组媒体条件(例如屏幕宽度)并且指明当某些媒体条件为真时,什么样的图⽚尺⼨是最佳选择。所以,有了这些属性,浏览器会:
查看设备宽度
检查 sizes 列表中哪个媒体条件是第⼀个为真查看给予该媒体查询的槽⼤⼩
加载 srcset 列表中引⽤的最接近所选的槽⼤⼩的图像
srcset提供了根据屏幕条件选取图⽚的能⼒
还有哪⼀个标签能起到跟srcset相似作⽤?(追问)
元素通过包含零或多个 元素和⼀个 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的⼦ 元素,如果没有匹配的,就选择 元素的 src 属性中的URL。然后,所选图像呈现在 元素占据的空间中
picture同样可以通过不同设备来匹配不同的图像资源

script标签中defer和async的区别?✨

defer:浏览器指示脚本在⽂档被解析后执⾏,script被异步加载后并不会⽴刻执⾏,⽽是等待⽂档被解析完毕后执⾏。
async:同样是异步加载脚本,区别是脚本加载完毕后⽴即执⾏,这导致async属性下的脚本是乱序的,对于script有先后依赖关系的情况,并不适⽤。