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:当元素滚动时触发
相关推荐
许我半盏清茶1 分钟前
JavaScript 原型与原型链完全指南
javascript
葬送的代码人生2 分钟前
别再「Ctrl+C/V」了!Git 开发必备技能,10 分钟告别单机码农
前端·github·代码规范
xuankuxiaoyao4 分钟前
vue.js 设计与开发 ---路由
前端·javascript·vue.js
ZC跨境爬虫6 分钟前
跟着 MDN 学CSS day_6:(伪类和伪元素详解)
前端·javascript·css·数据库·ui·html
idcu7 分钟前
Lyt.js + Vite 快速开发指南
前端·typescript
暗不需求8 分钟前
玩转 React Hooks:从基础到实战,逐行解析带你彻底掌握
前端·react.js·面试
一颗小青松9 分钟前
css 文字区域根据图片形状显示,根据文字设置背景图
前端·css
阿黎梨梨10 分钟前
跟 Git 打交道的正确姿势
前端
idcu10 分钟前
深入 Lyt.js 路由系统:L6 生态系统层的核心
前端·typescript
idcu11 分钟前
用 Lyt.js 构建 Todo 应用:完整教程
前端·typescript