HTML

2022/9/3

# 1. 对语义化的理解

概念
html 中有许多元素本身就包含了标签所包含内容的一些信息,如浏览器在解析到 h1 标签时,就会将该标签包含的内容解释为最重要的标题;
html 的标签语义化即是指正确使用这些具有语义的标签来恰当表示文档的结构
优点
1)在没有css的情况下,也能呈现出良好的内容结构
2)有利于SEO(搜索优化),爬虫依赖于标签来确定关键词的权重,语义化可以使爬虫抓取到更多有效信息
3)代码结构清晰,更具可读性,方便维护和更新
4)方便其他设备解析,如移动设备、屏幕阅读器、盲人阅读器等

# 2. script 标签中的 defer 和 async 属性

html 中会遇到3种script
1)<script src='xxx'></script>
浏览器在解析html时,如果遇到这种没有标签的 script 标签,会暂停解析,先发送网络请求获取该 js 脚本的内容,然后让 JS 引擎执行获得的代码,当代码执行完毕后再继续解析 html。
存在的问题:如果因为网络或其他原因 js 脚本迟迟获取不到,或js 脚本运行时间过长时,html 的解析就会被无限延迟,最终浏览器会呈现出空白的画面。

2)<script scr='xxx' defer></script>
当浏览器器遇到带 defer 属性的 script 时,会异步 发起对 js 脚本的网络请求,而不会阻塞 html 的解析。当网络请求回来后, 如果 html 还没有解析完,浏览器会继续解析 html 直到完成之后,再执行 js 代码。
有多个defer时,会按照其在 html 的先后顺序运行

3)<script scr='xxx' async></script>
当浏览器器遇到带 async 属性的 script 时,同样会异步 发起对 js 脚本的网络请求。不同之处在于当网络请求返回后,如果 html 还未解析完毕,会先暂停 html 的解析,转而执行返回的 js 代码,运行完 js 代码后再重新开始 html 的解析
存在的问题:
在执行 js 代码时, 我们并不知道此刻 html 的解析情况,这也就导致了如果在 js 代码中需要用到某个 DOM 节点,这个 DOM 元素可能获取得到也可能获取不到,即 async 是不可控的;
而在有多个async时,其运行的先后顺序也是无法确定的,哪个网络请求先返回,就会先执行哪一个。

图解 async 和 defer 属性 (opens new window)

HTML5 相关

# 3. HTML 全局属性(global attribute) (opens new window)有哪些

概念:全部标签都有的属性,即使属性对某些标签不起作用
1)accesskey:规定激活元素的快捷键
例:<a href="http://www.baidu.com" accesskey="c"></a>
按住 alt + c 即可激活该 a 标签,跳转到百度
2)class:为标签定义类名
3)contenteditable:规定标签是否可编辑,ture为可以,false为不可以
4)contextmenu:规定元素的上下文菜单。上下文菜单会在用户右键点击元素时出现。目前只有 FireFox 支持
5) ......

# 4. HTML 文件开头的 Doctype 作用

doctype 必须位于文档最开始的位置,在所有标签之前,用于告诉浏览器应该按照哪种文档定义来解析文档

# 5. HTML5 是什么?为什么要推出HTML5

HTML5 是指包含html、css 和 js 在内的一套技术组合,是HTML的最新版本,由W3C于2014年完成标准制定。
目的是为了增强浏览器的原生功能,以减少Web应用对于插件的需要;同时增强对移动互联网的支持和用户的体验

# 6. HTML5 的优缺点

优点:
1)HTML5 本身是由 W3C 推荐出来的,网络标准统一
2)多设备、跨平台 3)即时更新,提高了用户的体验 4)新增了一些标签,有利于开发者定义新的内容 5)可以给网页带来更多的多媒体元素,可以很好地代替flash 6)语义化,有利于SEO

缺点:
1)浏览器兼容性差,IE9以下基本不支持,许多浏览器对新特性的支持程度也不一样
2)安全性问题,HTML5 新增的 web storage、web socket 这样的功能容易被黑客利用,来盗取用户信息和资料

# 7. HTML5 新增的标签、淘汰的标签

# 8. HTML5 新增的 API

# 9. HTML5 新增的 input 元素