HTML 基础知识

html文档结构

html 复制代码
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>
  • <!DOCTYPE html>声明文档类型为HTML5
  • <html lang="zh">定义了文档的根元素,并设置了文档的语言为中文。
  • <head>包含元信息,如字符集、标题等。
  • <meta charset="UTF-8">设置字符编码为UTF-8
  • <title>定义了浏览器标签页的标题。
  • <body>包含网页的所有可见内容。

常用标签

文本标签

  • <p> 段落
  • <h1>-<h6> 标题
  • <strong> 加粗文本
  • <em> 斜体文本
  • <a href="url">链接文本</a> 超链接
  • <img src="image.jpg" alt="描述"> 图片
  • <br> 换行
  • <hr> 水平线

列表

  • <ul> 无序列表
  • <ol> 有序列表
  • <li> 列表项

表格

  • <table> 表格
  • <tr>
  • <td> 单元格
  • <th> 表头单元格

表单

  • <form> 表单容器
  • <input> 输入组件,类型由type属性决定
  • <select> 下拉列表
  • <option> 下拉列表选项

属性

  • id 用于唯一标识元素
  • class 分类元素
  • style 内联央视,不推荐在html使用,应该使用css
  • data-* 自定义数据属性

html 元素事件

1. 鼠标事件

  • onclick:点击事件
  • ondblclick:双击元素事件
  • onmousedown:当鼠标按钮被按下时触发
  • onmouseup:当鼠标按钮被释放时触发
  • onmouseover:当鼠标指针移动到元素上时触发
  • onmousemove:当鼠标指针在元素上移动时持续触发
  • onmouseout:当鼠标指针离开元素时触发
  • onmouseenter:当鼠标进入元素时触发,不会冒泡
  • onmouseleave:当鼠标离开元素时触发,不会冒泡
  • oncontextmenu:当用户右键元素时触发

2. 键盘事件

  • onkeydown:当键盘上的键被按下时触发
  • onkeyup:当键盘上的键被释放时触发
  • onkeypress:当键盘上的键被按下并释放时触发

3. 焦点事件

  • onfocus:当元素获得焦点时触发
  • onblur:当元素失去焦点时触发

4. 表单事件

  • onchange:当表单元素的值改变时触发
  • onsubmit:当表单提交时触发
  • onreset:当表单重置时触发

5. 页面加载和卸载事件

  • onload:当页面完成加载时触发
  • onunload:当页面正在卸载时触发
  • onbeforeunload:当页面开始卸载前触发

6. 拖放事件

  • ondrag:当元素被拖动时触发
  • ondragstart:当开始拖动元素时触发
  • ondragend:当结束拖动元素时触发
  • ondragenter:当拖动元素进入目标因素时触发
  • ondragover:当拖动元素在目标元素上时持续触发
  • ondragleave:当拖动元素离开目标时触发
  • ondrop:当拖动元素被放下时触发

7. 触摸事件(对于触摸设备)

  • ontouchstart:当触摸屏幕时触发
  • ontouchmove:当手指在屏幕上移动时持续触发
  • ontouchend:当手指离开屏幕时触发

8. 其他事件

  • onresize:当窗口大小发生变化时触发
  • onscroll:当元素滚动时触发
相关推荐
专吃海绵宝宝菠萝屋的派大星7 小时前
使用Dify对接自己开发的mcp
java·服务器·前端
爱分享的阿Q7 小时前
Rust加WebAssembly前端性能革命实践指南
前端·rust·wasm
蓝黑20207 小时前
Vue的 value=“1“ 和 :value=“1“ 有什么区别
前端·javascript·vue
小李子呢02117 小时前
前端八股6---v-model双向绑定
前端·javascript·算法
He少年8 小时前
【基础知识、Skill、Rules和MCP案例介绍】
java·前端·python
史迪仔01128 小时前
[QML] QML IMage图像处理
开发语言·前端·javascript·c++·qt
AI_Claude_code8 小时前
ZLibrary访问困境方案四:利用Cloudflare Workers等边缘计算实现访问
javascript·人工智能·爬虫·python·网络爬虫·边缘计算·爬山算法
AwesomeCPA8 小时前
Miaoduo MCP 使用指南(VDI内网环境)
前端·ui·ai编程
前端大波8 小时前
前端面试通关包(2026版,完整版)
前端·面试·职场和发展
qq_433502188 小时前
Codex cli 飞书文档创建进阶实用命令 + Skill 创建&使用 小白完整教程
java·前端·飞书