HTML5语义化与DOM原理

前端成长计划：deepseek给出的前端学习计划

一、HTML5

HTML5新增的常用特性

- 新增的语义元素

- 新增的表单控件

- 新增的绘画元素-canvas

- 新增的媒介回放元素-video和audio

- 新增的API

1、新增的语义元素

如 header、nav、article、section、aside、footer等

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
 
<body>
    <header>文档的头部区域</header>
    <nav>导航链接部分</nav>
    <article>
        页面的内容区域
        <section>文档中的区段</section>
    </article>
    <aside>页面的侧边栏区域</aside>
    <footer>文档的页脚区域</footer>
</body>
 
</html>

2、新增的表单控件

如 color、date、time、email、url、number、range、search、tel、file等

<input type="color">选择颜色，拾取器</input>
<input type="date">选择日期，日历选择器</input>
<input type="time">选择时间，时间选择器</input>
<input type="email">输入邮箱地址，浏览器输入时验证</input>
<input type="durl">输入网址，浏览器输入时验证</input>
<input type="number">输入数字</input>
<input type="range">创建滑块空间，通过话筒选择一个值</input>
<input type="search">搜索框，输入时提供搜索建议</input>
<input type="tel">输入电话号码，适用移动设备</input>
<input type="file">上传文件，选择本地文件上传服务器</input>

3、新增的绘画元素-canvas

- canvas本身没有绘图能力，所有绘制工作必须在JavaScript中完成

- 使用步骤

创建canvas元素包含id、宽度和高度

JavaScript使用id寻找canvas元素

创建context元素

绘制图形

- 绘制矩形：fillRect（绘制矩形）、strokeRect（绘制边框）、clearRect（清除内容）

- 绘制路径：beginPath、moveTo、lineTo、closePath、stroke、fill

- 绘制圆弧和圆形：arc（绘制圆弧）

- 绘制文本：fillText(绘制文本)、strokeText（绘制文本边框）

设置样式和颜色

fillStyle（填充颜色）、strokeStyle（轮廓颜色）、globalAlpha（透明度）

lineWidth（线条宽度）、lineCap（末端样式）

- 变换操作

旋转：rotate(angle)

缩放：scale(xScale,yScale)

平移：translate(x,y)

转换矩形setTransform(a,b,c,d,e,f)

- 绘制图像

drawImage(image,dx,dy,dWidth,dHeight)

- 渐变模式

createLinearGradient(x0,y0,x1,y1)

createRadialGradient(x0,y0,r0,x1,y1,r1)

- 阴影效果

shadowOffsetX、shadowOffsetY、shadowBlur、shadowColor

- 交互动画

canvas.addEventListener('mousemove',function(event){

//更新动画位置

})

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
 
<body>
    //步骤一、创建canvas元素
    <canvas id="myCanvas" width="400" height="400"></canvas>
    <script>
        //步骤二、获取canvas元素
        let canvas = document.getElementById("myCanvas")
        //步骤三、创建context元素
        let ctx = canvas.getContext('2d')//或3d
        //步骤四、绘制图形
        //绘制矩形
        ctx.fillRect(10,10,100,100)//x,y,width,height
        //绘制路径
        ctx.beginPath()//开始新路径
        ctx.moveTo(50,50)//x,y 将画笔移动到指定位置
        ctx.lineTo(150,150)//x,y 从当前位置绘制一条直线到指定位置
        ctx.closePath()//闭合路径
        ctx.stroke()//绘制路径的边框
        ctx.fill()//填充路径
        //绘制圆弧和圆形
        ctx.beginPath()
        ctx.arc(100,100,50,0,Math.PI*2)//x,y,radius,startAngle,endAngle,anticlockwise
        ctx.stroke()
        ctx.fill()
        //绘制文本
        ctx.font="30px Arial"
        ctx.fillStyle="blue"
        ctx.fillText("Hello",10,50)//text,x,y
        
    </script>
</body>
 
</html>

4、新增的媒介回放元素

video视频：<videl src="a.mp4" controls width="200">不支持video标签</video>

audio音频：<audio src="b.mp3" controls>不支持audio标签</audio>

- src：文件路径

- controls：显示播放控件（播放、暂停按钮等）

- width和height：设置视频的宽高

- autoplay：自动播放

- loop：自动重播

- muted：静音播放

- poster：封面图片的路径，仅video有

5、新增的API

地理位置

拖放

localStorage和sessionStorage

localStorage.setItem(name,value)

localStorage.getItem(name)

localStorage.setItem(name)

二、DOM原理

文档对象模型，是一种平台和语言无关的接口，它允许程序和脚本动态地访问和更新HTML文档的内容、结构和样式。

1、主要特点

节点模型：文档被解析成由节点组成的属性结构，每个节点代表文档一部分，例如元素节点、属性节点、文本节点等。

层次结构：每个节点都可以有子结构，也可以有父节点和兄弟节点

事件处理：DOM允许开发者为文档中的事件（如点击、键盘输入等）添加事件处理程序

样式操作：通过DOM可以动态改变元素的样式，包括颜色、字体、尺寸等

跨平台和语言：DOM是一种独立于平台的API，可以在多种编程语言中实现，包括JavaScript，使得开发者可以在不同的浏览器和环境中使用相同的代码进行文档操作。

2、DOM的主要组成部分

文档节点：整个文档的入口点，它是树的根节点

元素节点：代表HTML文档中的元素，如<div>、<p>等

属性节点：存储元素属性，如id、class等

文本节点：存储元素或属性中的文本内容

注释节点：存储注释内容

3、DOM的节点操作

元素节点操作

document.getElementById("")//通过id获取节点

document.getElementsByTagName("")//通过标签名获取节点

document.getElementsByClassName("")//通过类名获取节点

document.getElementsByName("")//通过name属性获取节点

ele.childNodes//获取元素的所有子节点

document.createElement("tagName")//创建元素节点

fatherNode.append(childNode)//父节点中添加子节点

fatherNode.removeChild(childNode)//删除元素节点

fatherNode.replaceChild(newNode,oldNode)//替换节点

属性节点操作

node.setAttribute('attr','attrValue')//添加属性节点

node.removeAttribute("attr")//删除属性节点

node.setAttribute("attr","new")//修改属性节点

node.getAttribute("name")//获取属性节点

node.style.color="blue"

node.style.cssText="color:blue;font-size:14px"

文本节点操作

ele.textContent//获取文本内容

ele.textContent="新的文本内容"//修改文本内容

document.createTextNode('文')//创建文本节点

4、DOM的事件处理

事件监听：ele.addEventListener('click',function(event){})

阻止默认行为：event.preventDefault()

阻止事件冒泡：event.stopPropagation()

移除事件监听器：ele.removeEventListener('click',callBack)

function handleClick(event){
    console.log("单击事件")
    event.preventDefault()
    event。stopPropagation()
}    
let button = document.getElementById('myBtn')    
button.addEventListener('click',handleClick)
button.removeEventListener('click',handleClick)