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:当元素滚动时触发
相关推荐
掘金安东尼9 小时前
让 JavaScript 更容易「善后」的新能力
前端·javascript·面试
掘金安东尼9 小时前
用 HTMX 为 React Data Grid 加速实时更新
前端·javascript·面试
灵感__idea11 小时前
Hello 算法:众里寻她千“百度”
前端·javascript·算法
yinuo11 小时前
轻松接入大语言模型API -04
前端
袋鼠云数栈UED团队12 小时前
基于 Lexical 实现变量输入编辑器
前端·javascript·架构
cipher12 小时前
ERC-4626 通胀攻击:DeFi 金库的"捐款陷阱"
前端·后端·安全
UrbanJazzerati12 小时前
非常友好的Vue 3 生命周期详解
前端·面试
AAA阿giao12 小时前
从零构建一个现代登录页:深入解析 Tailwind CSS + Vite + Lucide React 的完整技术栈
前端·css·react.js
亦妤12 小时前
JS执行机制、作用域及作用域链
javascript
兆子龙13 小时前
像 React Hook 一样「自动触发」:用 Git Hook 拦住忘删的测试代码与其它翻车现场
前端·架构