笔记创作活动第1天

HTML5 新增的内容

语义化标签，如：article、footer、header、nav 等
视频 video、音频 audio
画布 canvas
表单控件 calemdar、date、time、email
localStorage 长期存储数据，浏览器关闭后数据不丢失，sessionStorage 的数据在浏览器关闭后自动删除
拖拽释放

HTML5 移除的内容

纯表现的元素：basefont、font、s、strike、tt、u、big、center
对可选用性产生负面影响的元素：frame、frameset、noframes

DOCTYPE 的作用

Doctype 是 HTML5 的文档声明，可以通过它告诉浏览器使用哪一个 HTML 版本标准解析文档。

HTML5 为什么只需要写`<!DOCTYPE html>`？

其实主要是因为 HTML5 不基于 SGML，所以不需要引用 DTD。在 HTML4 中，声明引用 DTD，因为 HTML4 基于 SGML。DTD 规定了标记语言的规则，这样浏览器才能正确的呈现内容。

语义化标签

通俗来说就是使用正确的标签做相应的事情，使页面有良好的结构，使得元素具有具体的含义。

优点：清晰的页面结构（即便没有 CSS）。有利于 SEO 和搜索引擎建立良好的沟通，有助于爬虫抓取更多的有效信息，爬虫是依赖于标签来确定上下文和各个关键字的权重。语义化标签更具有可读性，方便开发和维护，减少差异化。

SEO 中的 TDK

在 SEO 中，TDK 其实就是 title、description、keywords 这三个标签，title 表示标题标签，description 是描述标签，keywords 是关键词标签

a 标签除了用于导航外，还有什么作用

手机拨号：<a href="tel:110">110</a> 发送邮件：<a href="sms:110">110</a> 锚点：快速跳转到页面的某个位置。下载文件：载的原理在于 a 标签所对应的资源浏览器无法解析，于是浏览器会选择将其下载下来。

常见的块级 / 行内元素

块级元素：

p、div、form、ul、li、ol、table、h1、h2、h3、h4、h5、h6、dl、dt、dd

总是在新行上开始，就是每个块级元素独占一行，默认从上到下排列
宽度缺少时是它的容器的 100%，除非设置一个宽度
高度、行高以及外边距和内边距都是可以设置的
块级元素可以容纳其它行级元素和块级元素

行内元素：

span、a、img、button、input、select

和其它元素都会在一行显示
宽度就是文字或者图片的宽度，不能改变
设置宽度 width、height 无效，但是可以设置 line-height
行级元素只能容纳文本或者其它行内元素
设置 margin、padding 只有左右有效，上下无效

src 和 href 的区别

相同点：都可以用来引入外部资源。

src：通常用于 img、video、audio、script等元素，通过src指向外部请求的地址。在请求时会阻塞其他资源的下载，直到该资源加载、编译、执行完成。这也是JS脚本放在文件底部的原因。

href：当浏览器识别到它指向的文件时，就会并行下载资源，不会停止对当前文档的处理，通常用于a、link等元素。

img上 title 与 alt

alt：全称alternate，切换的意思，如果无法显示图像，浏览器将显示alt指定的内容
title：当鼠标移动到元素上时显示title的内容

区别：

一般当鼠标滑动到元素身上的时候显示title，而alt是img标签特有的属性，是图片内容的等价描述，用于图片无法加载时显示，这样用户还能看到关于丢失了什么东西的一些信息，相对来说比较友好。

label标签

label元素不会向用户呈现任何特殊效果，但是，它为鼠标用户改进了可用性，当我们在label元素内点击文本时就会触发此控件。也就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。最常用label的地方就是表单中的性别单选框了，当点击文字时也能够自动聚焦绑定的表单控件。

<form>
     <label for="male">男</label>
     <input type="radio" name="sex" id="male">
     <label for="female">女</label>
     <input type="radio" name="sex" id="female">
</form>
复制代码

script 标签中 defer 和 async 的区别

script ：会阻碍 HTML 解析，只有下载好并执行完脚本才会继续解析 HTML。
async script ：解析 HTML 过程中进行脚本的异步下载，下载成功立马执行，有可能会阻断 HTML 的解析。
defer script：完全不会阻碍 HTML 的解析，解析完成之后再按照顺序执行脚本。

内置API

元素的宽高

标准盒子时 offsetWidth = width + border + padding

IE盒子时 offsetWidth = width

HTML常见面试题及小知识点 ｜ 青训营笔记