ement常用语法
id,class >,+ () * {} [attr] $,$@n
元素属性
1.通用属性class,id,style…
2.预置属性src,href,alt
3.事件属性onclick,onkeydown,onload
4.自定义属性data-index.data-user-name
布局标签
经典div+class
<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div>
html5
语义化的布局标签
<header>header</header>
<main>main</main>
<footer>footer</footer>
优点：简介
缺点：
目前项目90%以上是基于移动端，不依赖或不在乎搜索引擎/seo
语义化标签数量有限，不如class的自定义字符串再精准
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>元素属性</title>
</head>
<body>
<!-- 1通用属性 -->
<div class="top">top</div>
<div id="header">header</div>
<div style="color: red">Hello</div>
<!-- 2.预置属性 -->
<a href="https://php.cn">php.cn</a>
<img src="" alt="" />
<link rel="stylesheet" href="" />
<!-- 3.事件属性 -->
<button onclick="alert('提交成功')">确定</button>
<div>
<input type="text" oninput="this.nextElementSibling.textContent = this.value" />
<p>实时显示输入的内容</p>
</div>
<!-- 4.自定义属性 -->
<div data-emial="admin@php.cn">用户信息</div>
<button oninput="this.nextElementSibling.textContent = this.previousElementSibling.dataset.email">
获取用户邮箱
</button>
<p>这里显示用户邮箱</p>
</body>
</html>