字符集
1
2
3
4
5
6
7
8
| MARKDOWN
utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312；
gb2312简单中文，包括6763个汉字；
BIG5繁体中文，港澳台等用；
GBK包含全部中文字符，是GB2312的扩展，加入对繁体字的支持，兼容GB2312；
UTF-8则包含全世界所有国家需要用到的字符；
记住一点：以后我们统统使用UTF-8字符集，这样就避免出现字符集不统一而引起乱码的情况了。
|
标题标签
1
2
3
4
5
6
7
8
| 单词缩写：head 头部、标题
为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即：
h1 h2 h3 h4 h5 h6
标题标签语义：作为标题使用，并且依据重要性递减!
---
### 注意：h1标签因为重要，尽量少用，一般h1都是给logo使用。
|
段落标签
1
2
3
4
5
6
| MARKDOWN
单词缩写：paragraph 段落
在网页中要把文字有条理的显示出来，离不来段落标签，就如同写文章需要首行缩进、需要分段一样，整个网页也可以分为若干个段落。
段落标签：
<p>文本内容</p>
是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。
|
水平线标签
1
2
3
4
| PLAINTEXT
单词缩写：horizontal横线
在网页中常常看到一些水平线讲段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单的通过标记来完成，其基本语法格式如下：
hello!<hr>张三
|
换行标签
1
2
3
4
| PLAINTEXT
在HTML中一个段落的文字会从左到右依次排列，直到浏览器窗口的右端，然后自行换行。如果希望某段文本强制换行显示，就需要使用换行标签。
<br>
这时如果还像在word中直接敲回车键换行就不起作用了。
|
div span标签
1
2
3
4
| PLAINTEXT
div span是没有语义的，是我们网页布局主要的两个盒子；
div就是分割、分区的意思，其实有很多div来组合网页；
span跨度、跨距、范围。
|
文本格式化标签
1
2
3
4
5
6
| PLAINTEXT
在网页中有时需要为文字设置粗体、斜体或者下划线效果，这时候就需要用到HTML中的文本格式化标记，使文字以特殊的方式显示。
粗体：<strong>、<b>已废弃，不建议使用
斜体：<em>、<i>已废弃，不建议使用
删除线：<del>、<s>已废弃，不建议使用
下划线：<ins>、<u>已废弃，不建议使用
|
图像标签
1
2
3
4
| PLAINTEXT
图像标签：img
该语法中src属性用于指定图像文件的路径和文件名，它是img标签的必要属性。
<img src="图像URL">
|
手册文档
HTML进阶
1
| <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
|
link标签
因为页面切换主题网速慢会出现空白区域影响体验，就了解相关优化方法，下面做个整理
rel
preload优先加载（as必填的吧）
prefetch预加载（空闲时加载）
dns-prefetch使浏览器主动去执行域名解析的功能。
preconnect浏览器要建立一个连接，一般需要经过DNS查找，TCP三次握手和TLS协商（如果是https的话），这些过程都是需要相当的耗时的，所以preconnet，就是一项使浏览器能够预先建立一个连接，等真正需要加载资源的时候就能够直接请求了。
prerender不仅会加载资源，还会解执行页面，进行预渲染，但是这都是根据浏览器自身进行判断。
1
2
3
4
5
6
| <!-- 浏览器加载资源顺序如下 -->
<link rel="prefetch" as="video" href="4.html">
<link rel="stylesheet" href="2.css">
<script src="3.html"></script>
<link rel="prefetch" href="5.html">
<link rel="preload" as="style" href="1.css">
|
as
audioAudio file.documentAn HTML document intended to be embedded inside a <frame> or <iframe>.embedA resource to be embedded inside an <embed> element.fetchResource to be accessed by a fetch or XHR request, such as an ArrayBuffer or JSON file.fontFont file.imageImage file.objectA resource to be embedded inside an <embed> element.scriptJavaScript file.styleStylesheet.trackWebVTT file.workerA JavaScript web worker or shared worker.videoVideo file.
h5链接唤起App
1
2
3
4
5
6
7
8
| <a href="mqq://">qq</a>
<a href="mqqapi://forward/url?souce=baidu.com">qq内置浏览器</a>
<a href="weixin://">微信</a>
<a href="TencentWeibo://">腾讯微博</a>
<a href="taobao://">淘宝</a>
<a href="alipay://">支付宝</a>
<a href="sinaweibo://">新浪微博</a>
<a href="snssdk1128://">抖音</a>
|
微信相关
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
| 微信 weixin://
!发起群聊 weixin://dl/groupchat
通讯录
!添加朋友 weixin://dl/add
上报日志 weixin://dl/log
故障修复 搜索 :recover
新的朋友 weixin://dl/recommendation
群聊 weixin://dl/groups
标签 weixin://dl/tags
公众号 weixin://dl/officialaccounts
发现
朋友圈 weixin://dl/moments
扫一扫 weixin://dl/scan
购物（京东） weixin://dl/shopping
游戏 weixin://dl/games
我
个人信息 weixin://dl/profile
名字 weixin://dl/setname
我的二维码 weixin://dl/myQRcode
我的地址 weixin://dl/myaddress
相册 weixin://dl/posts
收藏 weixin://dl/favorites
优惠券 weixin://dl/card
表情 weixin://dl/stickers
设置 weixin://dl/settings
QQ 号 weixin://dl/bindqq
手机号 weixin://dl/bindmobile
邮箱地址 weixin://dl/bindemail
帐号保护 weixin://dl/protection
新消息通知 weixin://dl/notifications
通讯录黑名单 weixin://dl/blacklist
不让他（她）看我的朋友圈 weixin://dl/hidemoments
不看他（她）的朋友圈 weixin://dl/blockmoments
通用 weixin://dl/general
多语言 weixin://dl/languages
字体大小 weixin://dl/textsize
我的表情 weixin://dl/stickersetting
朋友圈小视频 weixin://dl/sight
功能 weixin://dl/features
通讯录同步助手 weixin://dl/securityassistant
群发助手 weixin://dl/broadcastmessage
聊天记录迁移 weixin://dl/chathistory
清理微信存储空间 weixin://dl/clear
帮助与反馈
意见反馈 weixin://dl/help 或 weixin://dl/feedback
关于微信 weixin://dl/about
其他
隐藏入口 参数不明 第三方 Webview 接口 weixin://dl/businessWebview/link/
隐藏入口 参数不明 第三方游戏库接口 weixin://dl/businessGame/library/
隐藏入口 参数不明 第三方游戏详情接口 weixin://dl/businessGame/detail/
隐藏入口 参数不明 第三方支付接口 weixin://dl/businessPay/
隐藏入口 参数不明 第三方临时会话接口 weixin://dl/business/tempsession/ 或 weixin://dl/businessTempSession/
未知
weixin://dl/chat
weixin://dl/designeremoji
weixin://dl/login/common_view
weixin://dl/login/phone_view
weixin://dl/personalemoticon
weixin://private/
weixin://private/setresult/
weixin://dl/updatenewestversion
weixin://dl/wechatout
weixin://dl/wechatoutcoupon
隐藏入口
第三方公众号临时会话接口
weixin://dl/business参数 ticket
weixin://dl/business/?ticket=
|
缓存功能
好像被废弃掉了，慎用！
1
| <html lang="zh-CN" manifest="/manifest/main.appcache">
|
HTML5中audio与video：
音频
HTML5 中提供的音频 API 标签为 <audio></audio>，使用示例如：
1
| <audio src="野狼disco.m4a" controls></audio>
|
兼容写法
1
2
3
4
5
6
7
| <audio controls>
<source src="resource/audio/OUTPUT.mp3" type='audio/mpeg'>
<source src="resource/audio/OUTPUT.aac" type='audio/aac; codecs="aac"'>
<source src="resource/audio/OUTPUT.ogg" type='audio/ogg; codecs="vorbis"'>
您的浏览器不支持，<a href="resource/audio/OUTPUT.mp3">请下载</a>
</audio>
|
当浏览器不支持或者当前音乐地址失效时会分别访问 source 提供的路径，如果全部失效则提示最下边的文本。
音乐属性
| 属性名 |
说明 |
controls |
显示控件 |
autoplay |
自动播放 |
loop |
循环播放 |
preload |
预加载 |
muted |
静音 |
视频
HTML5 中提供的音频 API 标签为 <video></video>，使用示例如：
1
| <video src="不能说的秘密.mp4" controls></video>
|
兼容写法与音乐相同
视频属性
| 属性名 |
说明 |
controls |
显示控件 |
autoplay |
自动播放 |
loop |
循环播放 |
muted |
静音 |
poster |
预览图片设置 |
preload |
预加载 none: 不预先加载任何数据 metadata: 只预先加载元数据 （视频总时长，第一帧画面图形等） auto: 预先加载视频 |
音视频事件
| 事件名 |
说明 |
onloadedmetadata |
当音频元数据加载完毕时触发，作用在于获取音视频文件的总时长 |
ontimeupdate |
当音频播放时间变化时触发 |
onvolumechange |
当声音改变时触发 |
音视频对象属性
可读可写属性
| 属性名 |
说明 |
currentTime |
音频已经播放时长（返回未格式化的秒） |
volume |
控制音量。值为 0 ~ 1 的任意值。 |
muted |
布尔值。静音。（ture 表示静音，false 表示非静音） |
playbackRate |
播放速率 |
只读属性
| 属性名 |
说明 |
duration |
音频总时长（返回未格式化的秒） |
paused |
布尔值。音频文件是否暂停。（ture 表示暂停，false 表示播放） |
ended |
布尔值。音频文件播放结束（ture 表示播放结束，false 表示播放中或者暂停） |
音视频对象方法
Wechat
Alipay
