1.HTML和HTML5

🍲第一部分:常用的HTML标签,和常见的概念和用法


1.基础概念

基础概念

  • 行内元素:与其他行内元素并排,不能设置宽高,默认的宽度就是文字的宽度
  • 块级元素:独占一行,不能与其他任何元素并列。能接受宽高,如果不设置宽度,那么宽度将默认变为父级的100%
  • 行内块元素:能设置宽高,与其他元素并排
  • 相互转换:display:inline(block 块级 | inline-block 行内块)

常见标签类型

  • 行内元素:a,span,textarea,select,input,b,br...
  • 块级元素:div,h1~h6,ol,ul,p,hr,form,table ...
  • 行内块元素:img...

2.HTML4.1 常用标签


<!-- div, span, h1~h6,p,hr,等标签不作展示 -->

<!-- img标签可以设置很多属性 -->
<img src="图片地址" title="文字悬停时候显示的文字" alt="图像加载失败,显示的替换文字" width="宽度" height="高度" ...>

<a href="跳转地址" target="目标窗口弹出方式">文字或者图像</a>
<!-- target: self为默认值,blank为在新窗口打开 -->

<!-- 锚点定位 -->
<!-- 1️⃣ 给a设置锚点 #idName -->
<a href="#test">跳转到目标锚点</a>
<!-- 2️⃣ 设置目标锚点 -->
<h3 id="test">目标锚点</h3>

<!-- 表格 -->
<table>
    <caption>我是表格标题</caption> 
    <thead>
        <tr>
            <th>表头1</th>
            <th>表头2</th>
            <th>表头3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>第一行1</td>
            <td>第一行2</td>
            <td>第一行3</td>
        </tr>
        <tr>
            <td>第二行1</td>
            <td>第二行2</td>
            <td>第二行3</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">备注:</td>
        </tr>
    </tfoot>
</table>

<!-- 列表(还有有序列表 和 自定义列表) -->
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>
        <div>4</div>
    </li>
</ul>

<!-- 表单 -->
<form action="提交到的url地址" method="提交方式(取值是get & post)" name="表单名称">
    <!-- input -->
    账号:<input type="text" value="请输入账号" name="username" />
    密码:<input type="password" name="password" />

    <!-- 通过相同 name 来实现 单选效果 -->
    <!-- ❣️ 备注:checked 表示默认选中,常用于单选,多选场景 -->
    性别:男 <input type="radio" name="sex" checked /> | 女 <input type="radio" name="sex" />

    <!-- 多选也是通过 name 来实现 -->
    爱好:🎧听歌 <input type="checkbox" name="like" /> | 🏀篮球 <input type="checkbox" name="like" /> | 🏊游泳 <input type="checkbox" name="like" />

    <!-- 按钮组:提交 & 重置 都需要在表单域下才能生效,默认value值是 提交 和 重置 -->
    <input type="submit" />
    <input type="reset" />
    <input type="button" value="一个纯的按钮" />

    <!-- 其他:图片提交必须包含src属性 -->
    <input type="image" src="" />
    <input type="file" />

    <label>
        账号:<input type="text" value="请输入账号" name="username" />
    </label>

    <textarea cols="每行中的字符数" rows="显示的行数">
        文本内容
    </textarea> 

    <select>
        <!-- selected 表示默认选定项 -->
        <option selected>--请选择省份--</option>
        <option>北京</option>
        <option>上海</option>
        <option>深圳</option>
    </select>
</form>

<b>粗体展示</b>
<strong>粗体展示</strong>
<i>斜体展示</i>
<em>斜体展示</em>
<s>删除线展示</s>
<del>删除线展示</del>
<u>下划线展示</u>
<ins>下划线展示</ins>



3.HTML5语义化标签的用法


🥓第二部分:Canvas

1.canvas基础操作

let canvas = document.getElementById('can')
let ctx = canvas.getContext('2d') // 这个可以理解为画笔

// 线(直线,三角形...)
ctx.moveTo(x, y)
ctx.lineTo(x, y)
ctx.arcTo(B点x, By, C点x, C点y, 弧的数值) // 直线 + 圆弧(可以做圆角矩形)

// 矩形
ctx.rect(x, y, 宽度, 高度) // 画矩形
ctx.strokeRect(x, y, 宽度, 高度) // 直接画出来了,都不用写构建路径
ctx.fillRect(x, y, 宽度, 高度) // 直接画出来了,都不用写填充路径

// 圆形(半圆,扇形,弧线,圆形)
ctx.arc(圆心x, 圆心y, 半径, 弧度, 方向)

// 贝塞尔曲线
ctx.quadraticCurveTo(x1, y1, x2, y2); // 二次贝塞尔曲线(除了起点,还需要另外两个点)
ctx.bezierCurveTo(x1, y1, x2, y2, x3, y3); // 三次贝塞尔曲线(除了起点,还需要三个点)

// 设置样式
ctx.fillStyle = 'red' // 设置填充颜色
ctx.strokeStyle = 'blue' // 设置填充颜色
ctx.lineWidth = 3 // 设置线条宽度
ctx.font = '24px 黑体'

ctx.fillText('实体文字', 文字显示的x, 文字显示的y); // 设置文字
ctx.strokeText('空心文字', 文字显示的x, 文字显示的y); // 设置文字

// 坐标平移 && 旋转 && 缩放
ctx.translate(100, 100) // 修改坐标原点(坐标平移)
ctx.rotate(Math.PI) // 旋转(单位是弧度,并且是根据坐标原点进行的旋转)
ctx.scale(x点倍数, y点倍数) // 缩放

// 保存和使用之前坐标系
ctx.save() // 保存之前坐标系(可以保存坐标系的平移数据,缩放数据,旋转数据)
ctx.restore() // 恢复之前的坐标系

// 清除画布
ctx.clearRect(x, y, 宽度, 高度) 

// 重新开启一个路径
ctx.beginPath()

ctx.closePath() // 闭合路径,针对一个路径才能闭合
ctx.stroke() // 构建路径
ctx.fill() // 构建填充路径

2.其他操作

// 填充图片(纹理的填充是以坐标系原点进行填充的)
let img = new Image()
img.src = 'https://itzkp-1253302184.cos.ap-beijing.myqcloud.com/github%E5%9B%BE%E7%89%87/notes/3.png'
img.onload = function () {
    ctx.translate(100, 100)
    ctx.fillStyle = ctx.createPattern(img, 'no-repeat')
    ctx.fillRect(0, 0, 100, 100)
}

// 线性渐变填充
let bg = ctx.createLinearGradient(100, 100, 200, 200);
bg.addColorStop(0, 'white'); // 渐变起点
bg.addColorStop(1, 'black'); // 渐变终点(当然中间也能写多个阶段的值)
ctx.fillStyle = bg
ctx.fillRect(100, 100, 100, 100)

// 辐射渐变
let bg = ctx.createRadialGradient(150, 150, 0, 180, 180, 180)
bg.addColorStop(0, 'white'); // 渐变起点
bg.addColorStop(1, 'black'); // 渐变终点(当然中间也能写多个阶段的值)
ctx.fillStyle = bg
ctx.fillRect(100, 100, 100, 100)

// 阴影
ctx.shadowColor = 'red'
ctx.shadowBlur = 10;
ctx.fillRect(100, 100, 100, 100)

// 圆角矩形
ctx.moveTo(100, 110) // y轴多了10,是一个小技巧
ctx.arcTo(100, 200, 200, 200, 10)
ctx.arcTo(200, 200, 200, 100, 10)
ctx.arcTo(200, 100, 100, 100, 10)
ctx.arcTo(100, 100, 100, 200, 10)
ctx.stroke()

更详细内容...前端体系/canvas(画布)


🥒第三部分:websocket

基础使用


let socket = new WebSocket('ws://...') // 使用的是ws协议

// socket 完全打开并准备通信时候就会调用这个处理函数
socket.onpen = function () {

}

// socket 接收服务器消息
socket.onmessage = function (e) {

}

// 使用 postMessage() 向web服务发送一个消息
socket.postMessage('Hello Server')


🌶第四部分:本地存储

localStorage:每个浏览器都为本地存储提供了5MB~10MB的空间,除非主动删除,否则是不会消失的


// 存
localStorage.setItem('key', 'value')

// 取
localStorage.getItem('key')

// 属性
localStorage.length // 告诉我们localStorage有多少数据项
localStorage.key(i) // 传入index,可以拿到对象的数据(可以和length一起,做循环遍历)

// 方法
localStorage.removeItem(key) // 根据key值,清除对应的数据项
localStorage.clear() // 会删除当前页面关联的所有数据项

sessionStorage:支持的API和上面完全相同,不同的地方在于,这个浏览器关闭之后,本地存储的数据项就会被删除


🍞第五部分:地理定位


// navigator.geolocation.getCurrentPosition(成功回调,失败回调,配置参数)

navigator.geolocation.getCurrentPosition( res => {
    console.log('成功回调:', res)
    // res.coords.latitude 纬度
    // res.coords.longitude 经度
}, err => {
    console.log('失败回调:', err)
})


🍯第六部分:HTML5视频标签(video)&& 音频标签(audio)

1.视频标签(video)

不再依赖第三方插件(Flash)

<!-- 
    controls 浏览器会提供控件,允许用户控制视频和音频的播放
    autoplay自动播放
    poster="不播放视频时候显示的海报图片"
    loop 是否循环播放
    preload 更加细粒化的控制如何加载视频
    ...
-->
<video src="播放地址" controls autoplay poster="不播放视频时候显示的海报图片"></video>

// 视频加载完成触发的回调
let video = document.getElementById('video')
video.addEventListener('ended', () => {
    // 回调触发
})

// ...

2.音频(audio元素)


🍖第七部分:Web工作线程


🍳第八部分:其他内容补充

1.Modernizer.js(检测浏览器对一个API的支持 | HTML5/CSS3检测库)

Modernizer官方网址 Modernizer官方文档

// 示例
if (Modernizr.webgl){
    console.log('浏览器支持webgl')
} else {
    console.log('浏览器不支持webgl')
}

2.SVG

3.离线Web应用

创建缓存清单文件(cache, manifest, file)

<!-- 将缓存清单文件的文件名加入到HTML标记中 -->
<html manifest="main.manifest">

CACHE MANIFEST 必须以这个开头 | CACHE表示要缓存的文件

CACHE MANIFEST
CACHE:
main.html
main.css
main.js

备注:如果在服务器上,还需要设置 AddType text/cache-manifest .manifest 这一行,用来提供正确的MIME类型


📚参考列表(致敬)