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使用,应该使用cssdata-*
自定义数据属性
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
:当元素滚动时触发