H5

DOCTYPE

告诉浏览器以什么方式解析文档

标签

块元素

• div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p blockquote（短引文）

行内元素

• a b span img input select strong

空元素

• br hr img input link meta

语义化标签

好处：有利于搜索引擎爬取->SEO搜索引擎优化；对于开发人员增强可读性

• header表示网页的头部（页眉）
• main表示网页的主体部分（一个页面中只会有一个main）
• footer表示网页的底部（页脚）
• nav表示网页中的导航
• aside和主体相关的其他内容（侧边栏）
• article表示一个独立的文章
• section表示一个独立的区块，上边的标签都不能表示时使用section

src和href

• src： 表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src 会将其指向的资源下载并应用到文档内，如请求 js 脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，所以⼀般 js 脚本会放在页面底部。

• href： 表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它指向的文件时，就会并行下载资源，不会停止对当前文档的处理。 常用在 a、link 等标签上。

meta标签

meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等

<meta charset="UTF-8">

<meta name="keywords" content="关键词" />

<meta name="description" content="页面描述" />

<meta http-uquiv="refresh" content="0;url=" />

如果设置了http-equiv属性，元素就是一个pragma指令，提供的信息相当于一个类似名称的HTTP头所能提供的信息。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<meta name="robots" content="index,follow" />

robot对应content 参数如下：

• all, 文件被检索， 链接可被查询
• none, 文件不可检索，链接不可查询
• index, 文件可检索
• follow, 链接可被查询
• noindex 文件不可检索
• nofollow 链接不可查询

SVG & Canvas

SVG 可缩放矢量图形， 特点：

• 不依赖分辨率
• 支持事件
• 复杂的图形会影响性能
• 适合大型区域的应用

Canvas 画布 ，通过javascript与像素进行渲染

• 依赖分辨率
• 不支持事件
• 不适合渲染文本
• 能够以png或jpg保存图像
• 适合密集型应用，如游戏

图片格式

• jpg：支持颜色丰富，不支持透明，
• gif: 支持颜色单一，支持动图，支持简单透明
• png：支持颜色丰富，不支持动图，支持复杂透明
• bmp：无损, 不压缩, 文件较大
• webp： 具备其他格式有点且文件小，但是兼容性不好
• base64：图片转字符串，通过字符的形式来引入图片