前端语言基本功能
- HTML-骨架
- CSS-皮肤
- JavaScript-肌肉
HTML
负责网站标签的搭建，通过浏览器将标签转化成元素，通过此特征，加强SEO，这就是SSR渲染的好处之一
SEO是指通过优化网站的结构、内容和技术等方面，以提高网站在搜索引擎中的排名，从而增加搜索流量和提升网站的可见性和曝光度。
语义化标签
帮助开发者更好的开发网站结构，方便SEO对于网站整理
HTML in JavaScript
特指一些能在js中操作HTML的属性，比如innerHTML,innerText
CSS
选择器
- 类选择器（class）
- 全选择器（*）
- id选择器 （id）
- 标签选择器 （body，div，h1）
- 伪类选择器 （:hover）
- 伪元素选择器 （::before）
推荐CSS参数学习网站 www.runoob.com/css/css-tut…
CSS引入方式
JavaScript
一般用于处理DOM元素，使网站“活”起来
这是一段简单的获取DOM元素，并且添加点击事件函数，实现WebSocket的功能
CSS in JavaScript
特指一些能在js中操作CSS的属性，比如setAttribute()
浏览器渲染过程
HTML5
HTML5存储
- cookie 存在服务器端，存储4kb，任何窗口都能访问，过期时间需要人工设定，需要请求时发送，
- LocalStorage 存在客户端，存储10mb，任何窗口都能访问，不会自动清除，
- SessionStorage 存在客户端，存储5mb，本次会话才能访问，退出浏览器会话时清除，
用的比较少,indexedDB
HTML5扩展API
- Audio
- Video
- Buffer
- 拖拽
- WebSocket
- SVG&Canvas
SVG是矢量的,随着可视区域变化,可扩展
Canvas是通过点阵绘制,不会随着可视区域变化
- WebGL&WebGPU
综上,我用socket.io库写了个"你画我猜"的小demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>你画我猜</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #eee;
}
</style>
</head>
<body>
<button class="color" style="border: 1px solid #000;">black</button>
<button class="color">red</button>
<button class="color">blue</button>
<button class="color">pink</button>
在线人数：<div id="text"></div>
<canvas width="900" height="700" style="background-color: #fff;"></canvas>
<button id="cls">清空</button>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket=io()
const canvas=document.querySelector('canvas')
const cls=document.querySelector('#cls')
const btn=document.querySelectorAll('.color')
const input=document.querySelector('#text')
const ctx=canvas.getContext('2d')
// 清空画布
cls.onclick=()=>{
socket.emit('clear')
ctx.clearRect(0,0,canvas.width,canvas.height)
}
const people={
num:0
}
const msg={
color:'black',
isDown:false,
}
// 选择颜色
btn.forEach(item=>{
item.onclick=()=>{
msg.color=item.innerHTML
ctx.strokeStyle=item.innerHTML
}
})
// 点击画线
canvas.onmousedown=e=>{
msg.isDown=true
msg.x=e.offsetX
msg.y=e.offsetY
socket.emit('message',msg)
document.onmousemove=ev=>{
msg.isDown=false
msg.x=ev.offsetX
msg.y=ev.offsetY
socket.emit('message',msg)
}
}
// 取消画线
canvas.onmouseup=()=>{
document.onmousemove=null
}
// 监听广播
socket.on('message',data=>{
const {isDown,x,y,color}=data
if(isDown){
ctx.beginPath()
ctx.moveTo(x,y)
}else{
ctx.lineTo(x,y)
// 填充颜色
ctx.strokeStyle=color
ctx.stroke()
}
})
// 监听清除
socket.on('clear',()=>{
ctx.clearRect(0,0,canvas.width,canvas.height)
})
// 监听颜色
socket.on('color',data=>{
ctx.strokeStyle=data
})
// 连接
socket.on('connect',()=>{
alert('连接成功')
socket.emit('login')
socket.on('login',data=>{
input.innerHTML=data
})
})
// 断开
socket.on('disconnect',()=>{
alert('离开了一名玩家')
socket.emit('disconnect')
socket.on('leave',data=>{
input.innerHTML=data
})
})
</script>
</body>
</html>
结尾
- 框架
- 课程回顾
