前端开发必备知识 —— HTML/HTML5
Posted Kabukiyo Lin
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端开发必备知识 —— HTML/HTML5相关的知识，希望对你有一定的参考价值。
前端开发必备知识 —— html/HTML5
src与href的区别
答：
- src是source，即资源，用于img,script和iframe标签，将资源引入并替换当前元素
- href是hypertext reference，即超文本引用，用于a和link标签，使得超文本引用与当前元素建立联系
HTML5的新特性
一、语义化标签
九个语义化标签 ，如：
- < header>
- < footer>
- < nav>
- < section>
- < article>
- < aside>
- < details>
- < summary>
- < dialog>
好处（用正确的标签做正确的事）：
- 内容结构化：可读性强，结构清晰，易于团队的维护
- 代码语义化：对机器友好，利于SEO
二、增强型表单type
input表单新增若干个type类型以供选择，能够更好地控制输入内容的类型。
- color 用于选取颜色
- date 选择日期
- datetime 选择日期（UTC）
- datetime-local 选择日期，无时区差异
- email 输入email
- month 输入月份
- number 输入数值
- range 一定范围内的数值取值
- search 搜索域
- tel 输入电话
- time 输入时间
- url 输入url
- week 选择周
三、新增的表单
- < datalist> —— 与 input 元素配合使用该元素，来定义 input 可能的值。
- < keygen> —— 用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。
- < output> —— 定义不同类型的输出，比如脚本的输出。
四、新增的表单属性
- placeholder
- required
- pattern 正则表达式验证Input表单输入的值
- min，max
- height，width 用于image类型 input表单图像的高度和宽度
- step 输入域合法数字间隔
- autofocus
- multiple
五、新增的媒体：视频和音频
- < audio > 播放音频
- < video > 播放视频
六、拖放api
拖放的过程有两个对象：源对象和目标对象。源对象就是即将被拖的元素（任何元素都可以被拖放），目标对象就是拖动之后要放置的目标位置。
- 源对象，可以触发的事件：dragstart（开始拖动）、drag（拖动中）、dragend（拖动结束）。整个拖动的过程：dragstart1 + dragn +dragend*1 ；
- 目标对象，可以触发的事件：dragenter（拖动着进入）、dragover（拖动着悬停）、dragleave（拖动着离开）、drop（放置）。过程有：dragenter1 + dragovern + dragleave1 或 dragenter1 + dragovern + drop1
七、web worker
参考我这篇blog
八、WebStorage
WebStorage分两种：
- localStorage
- sessionStorage
web存储 localStorage和sessionStorage、Cookie
Web Worker
!DOCTYPE的作用、严格模式与混杂模式
- !DOCTYPE声明在文档的第一行
- 告诉浏览器以什么模式来解析文档
- 有两种模式：严格模式（标准模式）和混杂模式（兼容模式）
严格模式与混杂模式
- 严格模式：渲染方式和JS引擎的解析方式以浏览器的最高标准执行
- 混杂模式：向后兼容
script标签、defer、async
浏览器在解析文档，构建DOM Tree时，如果遇到script标签欲加载JS文件，总的来说JS文件会阻塞文档的解析，具体发生步骤：
- 暂停对文档的解析，停止构建DOM Tree
- 将控制权交给javascript引擎
- 待JavaScript文件加载、解析和执行完毕后，再恢复对文档的解析
也就是像图中第一个情况；
所以建议：将script标签放在body标签后部，防止首屏渲染时间过长
defer与async
- defer：遇到script标签时不会暂停对文档的解析。即后续文档的解析与script的加载解析是并行进行（同时、异步）。只不过script的执行，要等到文档解析完成后再执行。
- async：同样也是不会暂停对文档的解析。不过，在script加载解析完毕后，直接执行JS文件。
- 执行顺序：多个defer按照加载顺序执行；多个async不能保证加载的顺序
head标签的作用
- head标签用于定义文档的头部，是所有头部元素的容器
- head中可以包含 base、link、meta、script、style、title，描述文档的各种属性信息
- head包含的信息大多数都不会真正作为内容展示给读者
- head中一定要有title，用于定义文档的标题
常见的meta
meta 用于描述网页文档的属性，譬如编码类型、关键词、页面描述等；
① 描述HTML文档的编码类型
<meta charset="UTF-8" >
② 关键词
<meta name="keywords" content="关键词" />
③ 描述
<meta name="description" content="页面描述内容" />
④ 重定向与刷新
<meta http-equiv="refresh" content="0;url=" />
⑤ 移动端适配
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
content可以取的值：
- width：宽度（数值/device-width）
- height：高度（数值/device-height）
- initial-scale：初始缩放比例
- maximum-scale：最大缩放比例
- minimum-scale：最小缩放比例
- user-scalable：是否允许用户缩放（yes/no）
⑥ 搜索引擎索引方式
<meta name="robots" content="index,follow" />
content可以取的值：
- all：文件将被检索，页面上的链接可以被查询
- index：文件将被检索
- follow：页面上的链接可以被查询
- noindex：文件将不被检索
- nofollow：页面上的链接不可以被查询
- none：文件将不被检索，页面上的链接不可以被查询
img中的srcset
答：
img中的srcset用于响应式页面，根据不同的屏幕密度设置相应的图片
块级元素、行内元素、空元素
一、块级元素 ： div、段落、标题、列表、表格、表单
- div
- p
- h1 - h6
- dl \\ ol \\ ul (带有项目和描述的描述列表 \\ 有序列表 \\ 无序列表)
- table
- form
二、行内元素 ：span、链接、换行、加粗、斜体、label
- span
- a 链接
- br 换行
- b 加粗 、 strong 逻辑加粗
- i 斜体 、 em 逻辑斜体
- label
三、空元素
- area
- br \\ base
- col \\ colgroup \\ command
- embed
- hr
- img \\ iput
- keygen
- link
- meta
- param
- source
- track
- wbr
HTML5 离线存储
在线时：
- 浏览器若发现html头部有manifest属性，则请求manifest文件
- 若是第一次访问页面，浏览器根据manifest文件的内容去下载相应的资源并进行离线存储
- 若已经访问过且已经将资源进行离线存储，浏览器则使用离线存储的资源进行展示。
- 再对比新的manifest文件与旧的manifest，如果没有差别，就不做任何操作。如果文件改变了，则根据新的manifest文件下载相应资源并离线存储。
离线时：
- 浏览器直接使用离线存储的资源进行展示
<html lang="en" manifest="index.manifest">
// cache.manifest文件
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
- CACHE：表示需要离线存储的资源列表
- NETWORK：表示只能在线访问的资源列表，不进行离线存储
- FALLBACK：若资源访问失败，则访问FALLBACK下的资源进行替代
SEO搜索引擎优化
一、合理使用title、description、keywords
- 强调重点，将重要的放在前面，切记重复堆砌
二、代码语义化
- 使用header、footer、nav、section、article、aside、dialog、summary和details
- 尽可能少使用无语义的div或span
- 尽可能避免用b或者i这种纯样式标签
- 有必要时，使用strong、em
三、img标签使用alt属性
- 在图像无法显示或者用户禁用图像时，alt属性可以代替图像的内容
四、友情链接
- 互相在自己的网站上放对方网站的链接
五、外链
- 在别的网站导入自己的网站链接
六、少用iframe
- 搜索引擎不会抓取iframe的内容
title与h1的区别
title
- 可以作为标签，写在head中
- 可以作为属性，为超链接或者图片添加标题描述（与alt不同，alt是图片失效时代替显示）
b和strong、i和em的区别
- b是视觉加粗，为字体添加了加粗样式，并无其它意义；
- strong是逻辑加粗，除了样式加粗外，表明这是“重点强调”的内容。相比于b更被搜索引擎重视，内容能更容易被抓取
i是视觉斜体，em是逻辑斜体；
iframe的优缺点
优点：
- 可以加载速度较慢的内容（广告）
- 可以并行下载脚本
- 可以解决跨域问题
缺点：
- 产生较多页面，不便管理
- 阻塞页面的onload事件
- 其内容无法被搜索引擎识别
label标签
- 定义表单控件的关系
- 放大表单作用域，提升使用体验
<label for="mobile">Number:</label>
<input type="text" id="mobile"/>
<label>Date:<input type="text"/></label>
Canvas和SVG的区别
Canvas
- Canvas是画布，是标量图，通过JavaScript来绘制2D图形，逐像素绘制
- 当位置发生变化则会重新绘制，适合图像密集型的游戏
- 依赖分辨率
- 不支持事件处理器
- 不能被搜索引擎抓取
- 弱的文本渲染能力
- 能用.png,.jpg保存图像
SVG
- SVG是可缩放矢量图形，是矢量图，是基于XML描述2D图形的语言
- 适合做有大型渲染区域的程序（地图），不适合做游戏
- 不依赖分辨率
- 支持事件处理器
- 可以被搜索引擎抓取
渐进增强与优雅降级
- 渐进增强：一开始针对低版本浏览器进行构建，以完成基本功能为首要任务。后续再针对高版本浏览器追加效果、功能，以达更好的体验。（向上兼容）
- 优雅降级：一开始就构建完整的内容、效果和功能，后续再对低版本浏览器作兼容。（向下兼容）
/*渐进增强写法*/
.transition
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
/*优雅降级写法*/
.transition
transition: all .5s;
-o-transition: all .5s;
-moz-transition: all .5s;
-webkit-transition: all .5s;
以上是关于前端开发必备知识 —— HTML/HTML5的主要内容，如果未能解决你的问题，请参考以下文章