Ement语法
<!DOCTYPE html>
<html lang="en">
<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>Ement语法</title>
</head>
<body>
<!-- p.list .表示class-->
<p class="list">你好，这是class</p>
<!-- p#list #表示id -->
<p id="list"></p>
<!-- p.list{这里面是内容} {}内容 -->
<p class="list">这里面是内容</p>
<!-- div>p >表示层级关系 -->
<div>
<p>这是层级关系</p>
</div>
<!-- div+p +表示兄弟关系 -->
<div></div>
<p></p>
<!-- ul>li*3 *表示重复 -->
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<!-- h2{购物车}+(ul>li*3)+p ()表示分组 -->
<h2>购物车</h2>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<p></p>
<!-- div>ul>li*3.list$，$表示序号，默认从1开始，如果需要从其他数字开始，这是$@n,n表示从几开始,$@n-1表示倒序 -->
<div>
<ul>
<li class="list1"></li>
<li class="list2"></li>
<li class="list3"></li>
</ul>
</div>
</body>
</html>
元素的属性
<!DOCTYPE html>
<html lang="en">
<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>
<!-- 通用属性，ID，class，style -->
<div class="list">top</div>
<div id="list">foot</div>
<div style="font-size: 20px; color: aqua">这里是通用属性</div>
<!-- 预置属性，就是标签里自带的属性，标签不同，属性不同如：href、src….. -->
<img src="" alt="" />
<a href="www.baidu.com">百度</a>
<!-- 事件属性 on + click -->
<button onclick="alert('提交成功')">提交</button>
<div>
<input
type="text"
oninput="this.nextElementSibling.textContent = this.value"
/>
<p>实时显示输入的内容</p>
</div>
<!-- 自定义属性 -->
<div data-email="937480573@qq.com">用户邮箱</div>
<button
onclick="this.nextElementSibling.textContent = this.previousElementSibling.dataset.email"
>
获取用户邮箱
</button>
<p>获取用户邮箱</p>
</body>
</html>
常用的布局标签
<!DOCTYPE html>
<html lang="en">
<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>
<!-- 经典id传统的布局标签 尽量不要用id布局，会影响网站权重-->
<div id="head">头部</div>
<div id="foot">尾部</div>
<!-- 尽量用class布局，可以实现养生复用 -->
<div class="head">头部</div>
<div class="foot">尾部</div>
<!-- 语义化标签。这是html5才有 -->
<header>header</header>
<main>main</main>
<footer>footer</footer>
</body>
</html>