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:当元素滚动时触发
相关推荐
烛阴2 分钟前
Promise无法中断?教你三招优雅实现异步任务取消
前端·javascript
GUIQU.9 分钟前
【Vue】单元测试(Jest/Vue Test Utils)
前端·vue.js
暮乘白帝过重山25 分钟前
Ollama 在本地分析文件夹中的文件
前端·chrome·ollama
一只小风华~39 分钟前
Web前端开发:CSS Float(浮动)与 Positioning(定位)
前端·css·html·html5·web
前端张三42 分钟前
vue3中ref在js中为什么需要.value才能获取/修改值?
前端·javascript·vue.js
moyu8443 分钟前
前端从后端获取数据的流程与指南
前端
爱的叹息1 小时前
解决 Dart Sass 的旧 JS API 弃用警告 的详细步骤和解决方案
javascript·rust·sass
涛哥码咖1 小时前
Rule.resourceQuery(通过路径参数指定loader匹配规则)
前端·webpack
夕水2 小时前
这个提升效率宝藏级工具一定要收藏使用
前端·javascript·trae
会飞的鱼先生2 小时前
vue3 内置组件KeepAlive的使用
前端·javascript·vue.js