Javascript
- 借鉴C语言的基本语法
- 借鉴Java语言的数据类型和内存管理
- 借鉴Scheme语言,将函数提升到“第一等公民”(first class)的地位
- 借鉴Self语言,使用基于原型(prototype)的继承机制
CSS in HTML
- 行内样式(Inline CSS)
<p style="color: blue">This is aparagraph.</p> - 内部样式(Internal Css)
<head>
<style type = text/css>
body {
background-color: blue;
}
p {
color: yellow;
}
</style>
</head>
HTML DTD
HTML并非图灵完备,它只是一门标记语言
- 标签(元素)Element:
<tagname>...</tagname> - 文本Text:
text;<![CDATA[text]]> - 注释Comment:
<!--comments--> - DTD Document Type Defination:
<!Doctype html> - 处理信息ProcessingInstruction:
<?a1?>
HTML全部标签分类
- 文档型:
<!DOCTYPE>;<head>;<body> - 闭合性
- 闭合标签:
<p></p> - 空标签:
<br>;<img><input>
- 闭合标签:
- 换行型
- 块级标签:
<div>;<h1>;<h2>; - 行内标签:
<span><a>
- 块级标签:
- H5新元素
- 语义化标签
- 媒体标签:
<video>;<audio>;<embed> - 表单标签:
<input type="date">;<input type="color"> - 功能标签:
<canvas>;<progress>
HTML head标签
- title:标题,全局唯一
- base:向页面所有相对URL提供前缀;全局唯一,不建议使用!
- meta:通常是约定好的键值对;例外是charset,http-equiv!
- link:rel决定类型,href决定引入地址
- script:type指定MIME类型;可内嵌代码,可外链文件
HTML ARIA
了解ARIA并非只是为了供盲人阅读,它可以为我们设计UI系统提供指导意义
HTML5存储
Cookies Local Storage Session Storage
Capacity 4kb 10mb 5mb
Browsers HTML4/HTML5 HTML5 HTML5
Accessible from Any window Any window Any window
Expires Manually set Never On tab close
Storage Location Browser and server Browser only Browser only
Sent with requests Yes No No
获取当前的经纬度
const position = (res) => {
console.log('Latitude:', res.coords.latitude)
console.log('Longitude:', res.coords.longitude)
}
navigator.geolocation.getCurrentPosition(position)
HTML5 WebAssembly
WebAssembly(WASM)是一种新的编码方式,可以直接在浏览器中运行
- 浏览器内
- 流媒体视频的编解决码加速
- 短视频的冷启动加速
- 前端Javascript代码防盗混淆(SecurityWorker)
- 在线音乐制作工具
- 在线图片编辑工具(Squoosh)
- 原生应用移植(AutoCAD)
- 前端应用构建框架(Yew)
- 前端组件库(Blazor)
- 物理引擎(Ammo.js)
- 浏览器外
- 物联网设备Wasm微内核
- 编译器代码编译目标
- 云技术应用