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:当元素滚动时触发
相关推荐
编程猪猪侠20 分钟前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞24 分钟前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路1 小时前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9491 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器
ReturnTrue8681 小时前
Vue路由状态持久化方案,优雅实现记住表单历史搜索记录!
前端·vue.js
UncleKyrie1 小时前
一个浏览器插件帮你查看Figma设计稿代码图片和转码
前端
遂心_1 小时前
深入解析前后端分离中的 /api 设计:从路由到代理的完整指南
前端·javascript·api
你听得到111 小时前
Flutter - 手搓一个日历组件,集成单日选择、日期范围选择、国际化、农历和节气显示
前端·flutter·架构
风清云淡_A1 小时前
【REACT18.x】CRA+TS+ANTD5.X封装自定义的hooks复用业务功能
前端·react.js
@大迁世界1 小时前
第7章 React性能优化核心
前端·javascript·react.js·性能优化·前端框架