html01-常见概念
文档声明
什么是
<！DOCTYPE>？是否需要在HTML5中使用？什么是严格模式与混杂模式
列举怪异模式中的怪癖行为
什么是
<！DOCTYPE>？是否需要在HTML5中使用？
<！DOCTYPE>是HTML的文档声明，通过它告诉浏览器，使用哪一个HTML版本标准解析文档。文档声明有很多种书写格式，对应不同的HTML版本，
<！DOCTYPE>这种书写是告诉浏览器，这个文档使用HTML5的标准进行解析。
- 什么是严格模式与混杂模式
严格模式： 标准模式。浏览器按照W3C标准解析代码
混杂模式： 怪异模式或兼容模式。浏览器用自己的方式解析代码
区分：与网页中的DTD直接相关
- 如果共包含严格DOCTYPE，一般以严格模式呈现
- 如果包含DTD和URI的DOCTYPE，也以严格模式呈现。有DTD没有URI的以混杂模式呈现
- DOCTYPE不存在或形式不正确会导致文档以混杂模式呈现。
- HTML5没有DTD，因此也就没有严格模式与混杂模式的区别，HTML5有相对宽松的语法，是现实，已经尽可能大的实现了向后兼容。
意义： 怪异模式是为了兼容旧网站。
- 列举怪异模式中的怪癖行为
- 宽高的算法与W3C盒模型不同
- 在表格中的字体样式不会继承
- 怪异模式下可以设置行内元素宽高
- 怪异模式下
white-space:pre会失效
语义化
- 说说对html语义化的理解
语义元素
语义是指对一个词或者句子含义的正确解释。很多HTML标签也具有语义的意义，元素本身传达了关于标签所包含内容类型的信息。
语义化
- 代码结构：使页面没有css的情况下，也能够呈现出很好的内容结构
- 又利于SEO：爬虫依赖标签来确定关键字的权重，因此可以和搜索引建立良好的沟通，帮助爬虫抓取更多有效信息
- 提升用户体验：
title、alt可以用于解释名词或者解释图片信息，以及label标签的灵活运用 - 便于团队开发和维护：语义化使得代码具有可读性
- 方便其他设备解析： 屏幕阅读器、盲人阅读器、移动设备
HTML5常用的语义元素
- header: 用于定义页面的头部区域，通常包括网站logo、主导航、全站链接以及搜索框。
- nav: 定义页面的导航链接部分区域
- main: 定义文档的主要内容，改内容在文档中应当是独一无二的
- article： 定义页面独立的内容，可以有自己的header、footer、section等，庄主与单个主题的博客文章、报纸文章或网页文章
- section: 文档中的一个区域，比如，内容中的一个专题组
- aside：表示一个和其余页面内容几乎无关的部分
- footer： 定义最近一个章节内容或者根节点元素的页脚。一个页脚通常包含该章节作者、版权数据或者文档相关的链接等。
无障碍网页
能被残障人士使用。屏幕阅读器
常见无障碍属性：
- 角色：定义元素是做什么的
- 属性：给元素定义属性，使其具备更多语义
- 状态：当前元素的条件的特殊属性
面试真题
- 说说对html语义化的理解
去掉或者丢失央视的时候能够让页面呈现出清晰的结构
有利于SEO：和搜素引擎建立良好的沟通，有助于爬虫抓取更多的有效信息（爬虫依赖标签来确定上下文和各个关键字的权重）
方便其他设备解析
便于团队开发和维护，语义化更具可读性。
参考文章
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements
https://developer.mozilla.org/en-US/docs/Web/Accessibility
https://developer.mozilla.org/zh-CN/docs/Web/Accessibility/ARIA
W3C标准组织
万维网联盟，主要是对Web进行标准化，解决兼容性等问题。HTML最早设计用于高校之间项目交流。
参考文章
https://www.runoob.com/w3c/w3c-process.html
SEO
- 请描述下SEO的TDK?
什么使SEO
搜索引擎优化，针对搜索引擎优化。
如何进行SEO优化工作
内部优化
- 合理的title、description、keywords
- 非装饰性图片加alt
- 不显示对象谨慎使用
display:none - 重要内容HTML代码放在最前
- 少用iframe，浏览器不会抓取
外部优化
放友情链接和外联。好的友情链接可以快速的提高网站的权重。
iframe
- iframe框架有哪些优缺点
- iframe是用来做什么的
iframe介绍
嵌入式框架，本质是一个标签，将一个完整的网页内容嵌入到现有的网页中。
ajax的出现，iframe用得越来越少了
面试经验：
- iframe有什么用？有什么优缺点
- 优点
- 重载页面时不需要重载整个页面，只需要重载页面中的一个框架页
- 方便制作导航栏
- 缺点
- 产生多也页面，不容易管理
- 调用外部页面，需要额外调用css，给页面带来额外的请求次数
- 阻塞页面的加载，window的onload事件需要在所有iframe加载完毕后才会触发
- 浏览器的后退按钮无效
- 无法被一些搜索引擎引到
- 多数小型的移动设备无法完全显示框架
- 优点
微格式
- 知道什么是微格式吗?谈谈理解。在前端构建中应该考虑微格式吗？
介绍
建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式
把语义嵌入到HTML中，以便于分离式开发，对Web网页进行了语义注释。将结构化类名应用到标记中，
建立在已有的、被广泛采用的标准基础之上的一组简单的、开放的数据格式
前端构建的意义
- 更为准确地识别内容块地的语义
- 可以转换成其他格式(json),提供给外部程序和Web服务使用
微格式可以对网站进行SEO优化。
参考：
https://microformats.org/wiki/h-card
替换元素
- 什么是可替换元素，什么是非可替换元素，各自有什么特点？
介绍
常见有：
- 图片img
- 内联框架iframe
- 音频视频标签
面试经验
可替换展示效果不由CSS决定
非可替换在页面上呈现完全由CSS决定
参考：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Guides/Images/Replaced_element_properties
页面可见性
- 页面可见性API可以有哪些用途
介绍
判断用户有没有在看当前页面，html5提供页面可见性接口
面试经验
- 轮播效果，只有用户在看的时候才自动展示下一张
- 信息仪表盘不在应用程序不可见时轮询服务进行更形
- 页面想要检测是否正在渲染，一边可以精确的计算网页浏览量
- 设备待机时，网页想要关闭设备声音