HTML的语义化
面试官：什么是HTML语义化，语义化的作用是什么？（基础题）
语义化是指使用恰当语义的html标签，让页面具有良好的结构与含义；比如
标签就代表段落，
代表正文内容等等。
语义化的作用有两点：
- 开发者友好：使用语义类标签增强代码的可读性，开发者也能够清晰地看出网页的结构，易维护；
- 机器友好：带有语义的标签适合搜索引擎的爬虫爬取有效信息，能快速生成网页骨架或文章提纲，SEO友好。
面试官：你平时有哪些语义化的建议或最佳实践？（发散题）
根据语义化的优点，对于富文本内容类的网站（如门户、新闻网站），语义化利于SEO，对网站内容的传播有很大帮助，此类网站应该重视和实践语义化标准。而对于一些系统类网站的搭建，语义化就没有那没重要了，甚至刻意做语义化反而会影响开发者的效率，此类网站可以对页面骨架做语义化，至于模块的交互组件和表单等则无需刻意做语义化。
HTML5新增内容考察
面试官：你知道HTML5有哪些新增的东西吗？（基础题）
HTML5新增的内容确实不少，面试官不会要求你全部记下来，我们可以挑重要的东西来回答：
- 新的文档解析顺序：不再基于 *SGML；
- 全面支持CSS3：
- 加了一些语义化元素：
、、
、
、
等
- 删了一些样式类元素：、、
等
- 表单能力加强：的新类型（date、email、url等）、新属性（autocomplete、autofocus等）
- 新的属性：ping（用于a与area）、charset（用于meta）、async（用于script）等
- 定位能力：navigator.geolocation
- 多媒体支持：（视频）、（音频）等
- 2D/3D 制图支持：支持svg、canvas绘图和动画等
- 新的缓存策略：Localstorage、SessionStorage、IndexedDB等
- 新的网络协议：WebSocket
- 新的跨域通信方案：XHTMLHttpRequest2、PostMessage
…
拓展：什么是SGML
- SGML 即Standard Globalized Markup Language 是用来定义标准的标记语言，简单的说，就是定义文档的元语言。
- HTML 是基于SGML 的超链接语言，可以用于创建Web页面。在DTD 内部定义了标签的规则，DTD就是使用SGML 语言创建的。
- HTML5不是基于SGML 语言的，因此不需要DTD ，它是一种全新的标记语言，有自己的解析规则，HTML5的语法规则与之前版本有很大的差别，可以称的上是一种全新的语言
meta标签
面试官：介绍一下标签的用途 （基础题）
meta标签由name和content两个属性来定义，来描述一个HTML网页文档的元信息，例如作者、日期和时间、网页描述、关键词、页面刷新等，除了一些http标准规定了一些name作为大家使用的共识，开发者也可以自定义name
面试官：移动端适配的viewpoint，能否手写一下？（拓展题）
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
src和href的区别
面试官：介绍一下src和href的区别（基础题）
- src是指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在的位置，在请求src资源时会将其指向的资源下载并应用到文档内，如JS脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，所以一般JS脚本会放在底部而不是头部。
- href是指向网络资源所在位置（的超链接），用来建立和当前元素或文档之间的连接，当浏览器识别到它他指向的文件时，就会并行下载资源，不会停止对当前文档的处理
img标签的srcset
面试官：介绍一下标签的srcset和sizes属性的作用（基础题）
可以设计响应式图片，我们可以使用两个新的属性srcset 和 sizes来提供更多额外的资源图像和提示，帮助浏览器选择正确的一个资源
- srcset 定义了我们允许浏览器选择的图像集，以及每个图像的大小
- sizes 定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择
所以，有了这些属性，浏览器会：
- 查看设备宽度
- 检查 sizes 列表中哪个媒体条件是第一个为真
- 查看给予该媒体查询的槽大小
- 加载 srcset 列表中引用的最接近所选的槽大小的图像
- srcset提供了根据屏幕条件选取图片的能力
<img src="clock-demo-thumb-200.png"
alt="Clock"
srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
sizes="(min-width: 600px) 200px, 50vw"
/>
script标签的defer和async
面试官：介绍一下
- defer：浏览器指示脚本在文档被解析后执行，
前端数据存储的方式
面试官：前端有哪几种数据存储方式？（基础题）
主要的存储方式有Cookie、LocalStorage、SessionStorage、IndexedDB、WebSQL，它们的优缺点如下：
- Cookie：在HTML5标准前本地储存的主要方式优点是兼容性好，请求头自带cookie方便可以和服务端进行交互缺点是大小只有4k，请求头携带cookie浪费流量，每个domain限制20个cookie，JS无法直接操作，需要自行封装
- LocalStorage：以键值对为标准的数据存储方式优点是操作方便，永久性储存（除非手动删除），大小为5M缺点是兼容IE8+
- SessionStorage：与localStorage基本类似，区别是**sessionStorage当页面关闭后会被清理优点是会话级随存随取，不占用本地空间，操作方便缺点是不能在所有同源窗口中共享，是会话级别的储存方式，兼容IE8+
- IndexedDB：是被正式纳入HTML5标准的数据库储存方案，它是NoSQL数据库，用键值对进行储存，可以进行快速读取操作优点是存储量更大，非常适合web场景，同时支持JS进行操作，非常方便缺点是兼容性IE8+
- WebSQL：类似SQLite，是真正意义上的关系型数据库，用sql进行操作优点是关系型数据库，适合大型的离线web应用缺点是JS需要通过transaction操作sql，火狐浏览器不支持
拓展：如何操作webSql
// WebSql操作实例
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
### 给大家的福利
**零基础入门**
对于从来没有接触过网络安全的同学，我们帮你准备了详细的学习成长路线图。可以说是最科学最系统的学习路线，大家跟着这个大的方向学习准没问题。
同时每个成长路线对应的板块都有配套的视频提供：
## 最后
**自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。**
**深知大多数网络安全工程师，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**
**因此收集整理了一份《2024年网络安全全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。**
**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上网络安全知识点！真正的体系化！**
[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618653875)
**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**
715652139312)]
**既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上网络安全知识点！真正的体系化！**
[**如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！**](https://bbs.csdn.net/topics/618653875)
**由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！**
681
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
