HTML基础

2023-02-08 16:47:26 浏览数 (1)

字符集

代码语言：javascript复制
MARKDOWN
utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312；
gb2312简单中文，包括6763个汉字；
BIG5繁体中文，港澳台等用；
GBK包含全部中文字符，是GB2312的扩展，加入对繁体字的支持，兼容GB2312；
UTF-8则包含全世界所有国家需要用到的字符；

记住一点：以后我们统统使用UTF-8字符集，这样就避免出现字符集不统一而引起乱码的情况了。

标题标签

代码语言：javascript复制
单词缩写：head 头部、标题
为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题，即：
h1 h2 h3 h4 h5 h6
标题标签语义：作为标题使用，并且依据重要性递减!

---

### 注意：h1标签因为重要，尽量少用，一般h1都是给logo使用。

段落标签

代码语言：javascript复制
MARKDOWN
单词缩写：paragraph 段落
在网页中要把文字有条理的显示出来，离不来段落标签，就如同写文章需要首行缩进、需要分段一样，整个网页也可以分为若干个段落。
段落标签：
<p>文本内容</p>
是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。

水平线标签

代码语言：javascript复制
PLAINTEXT
单词缩写：horizontal横线
在网页中常常看到一些水平线讲段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单的通过标记来完成，其基本语法格式如下：
hello!<hr>张三

换行标签

代码语言：javascript复制
PLAINTEXT
在HTML中一个段落的文字会从左到右依次排列，直到浏览器窗口的右端，然后自行换行。如果希望某段文本强制换行显示，就需要使用换行标签。
<br>
这时如果还像在word中直接敲回车键换行就不起作用了。

div span标签

代码语言：javascript复制
PLAINTEXT
div span是没有语义的，是我们网页布局主要的两个盒子；
div就是分割、分区的意思，其实有很多div来组合网页；
span跨度、跨距、范围。

文本格式化标签

代码语言：javascript复制
PLAINTEXT
在网页中有时需要为文字设置粗体、斜体或者下划线效果，这时候就需要用到HTML中的文本格式化标记，使文字以特殊的方式显示。
粗体：<strong>、<b>已废弃，不建议使用
斜体：<em>、<i>已废弃，不建议使用
删除线：<del>、<s>已废弃，不建议使用
下划线：<ins>、<u>已废弃，不建议使用

图像标签

代码语言：javascript复制
PLAINTEXT
图像标签：img
该语法中src属性用于指定图像文件的路径和文件名，它是img标签的必要属性。
<img src="图像URL">

手册文档

  • 字符实体 HTML ISO-8859-1

HTML进阶

meta

代码语言：javascript复制
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

link标签

因为页面切换主题网速慢会出现空白区域影响体验，就了解相关优化方法，下面做个整理

rel

preload优先加载（as必填的吧）

prefetch预加载（空闲时加载）

dns-prefetch使浏览器主动去执行域名解析的功能。

preconnect浏览器要建立一个连接，一般需要经过DNS查找，TCP三次握手和TLS协商（如果是https的话），这些过程都是需要相当的耗时的，所以preconnet，就是一项使浏览器能够预先建立一个连接，等真正需要加载资源的时候就能够直接请求了。

prerender不仅会加载资源，还会解执行页面，进行预渲染，但是这都是根据浏览器自身进行判断。

代码语言：javascript复制
<!-- 浏览器加载资源顺序如下 -->
<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

代码语言：javascript复制
<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>

微信相关

代码语言：javascript复制
微信 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=

缓存功能

好像被废弃掉了，慎用！

代码语言：javascript复制
<html lang="zh-CN" manifest="/manifest/main.appcache">

HTML5中audio与video：

音频

HTML5 中提供的音频 API 标签为 <audio></audio>，使用示例如：

代码语言：javascript复制
<audio src="野狼disco.m4a" controls></audio>

兼容写法

代码语言：javascript复制
<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>，使用示例如：

代码语言：javascript复制
<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 表示播放中或者暂停）

音视频对象方法

方法名

说明

pause

暂停

play

播放

html html5 嵌入式 编程算法

0 人点赞