Ement常用语法总结
程序员文章站
2022-05-29 12:47:47
...
今天整理了一下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>1221homework</title>
</head>
<body>
<!--1. 实例演示Ement常用语法
2. 实例演示元素四类属性
3. 实例演示布局标签,并分析div+class与 html5语义化标签的优缺点-->
<!-- 1.实例演示Ement常用语法 -->
<!-- 父子关系:> -->
<!--p>input.name{请输入姓名}-->
<p><input type="text" class="name">请输入姓名</input></p>
<!-- p>input#password{请输入密码} -->
<p><input type="password" id="password">请输入密码</input></p>
<!-- 兄弟关系:+ -->
<!-- p+button.commit{提交} -->
<p></p>
<button class="commit" onclick="alert('提交成功')">提交</button>
<!-- 向上一级:^ -->
<!-- div>img.img[src=http://img95.699pic.com/photo/50167/4554.jpg_wh300.jpg!/fh/300/quality/90]^p -->
<div><img src="http://img95.699pic.com/photo/50167/4554.jpg_wh300.jpg!/fh/300/quality/90" alt="" class="img"></div>
<p></p>
<!-- 重复:* -->
<!-- ul>li*5{demo$} -->
<ul>
<li>demo1</li>
<li>demo2</li>
<li>demo3</li>
<li>demo4</li>
<li>demo5</li>
</ul>
<!-- ul.goods>li.class$*3>a[href="https://php.cn/"]{商品$} -->
<ul class="goods">
<li class="class2"><a href="https://php.cn/">商品2</a></li>
<li class="class3"><a href="https://php.cn/">商品3</a></li>
<li class="class1"><a href="https://php.cn/">商品1</a></li>
</ul>
<br/>
<!-- ul.goods1>li.item$*5>a[href="https://php.cn/"]{课程$@1221} -->
<ul class="goods1">
<li class="item1"><a href="https://php.cn/">课程1221</a></li>
<li class="item2"><a href="https://php.cn/">课程1222</a></li>
<li class="item3"><a href="https://php.cn/">课程1223</a></li>
<li class="item4"><a href="https://php.cn/">课程1224</a></li>
<li class="item5"><a href="https://php.cn/">课程1225</a></li>
</ul>
<style>
.goods{
color:aquamarine;
background-color: rgb(196, 226, 167);
}
</style>
<!-- 画一个3*5的表格 -->
<table border="1">
<tr>
<td>AAA</td>
<td>AAA</td>
<td>AAA</td>
<td>AAA</td>
<td>AAA</td>
</tr>
<tr>
<td>AAA</td>
<td>AAA</td>
<td>AAA</td>
<td>AAA</td>
<td>AAA</td>
</tr>
<tr>
<td>AAA</td>
<td>AAA</td>
<td>AAA</td>
<td>AAA</td>
<td>AAA</td>
</tr>
</table>
<!-- 1.通用属性 id,class,style -->
<div class="class">测试class属性</div>
<div id="id">测试id属性</div>
<div style="color: brown;">测试style属性</div>
<!-- 2.预设属性: href... -->
<a href="http://php.cn/">测试a标签的预设属性</a>
<img src="http://pic171.huitu.com/pic/20211027/774808_20211027220017955070_0.jpg" alt="" class="img">测试图片的预设属性</img>
<!-- 3.事件属性:on事件(onclick等) -->
<button onclick="alert('提交成功')">提交</button>
<div>
<input type="text" oninput="this.nextElementSibling.textContent=this.value">
<p>实时显示输入内容</p>
</div>
<!-- 4.自定义属性 -->
<div data-email="my@163.com">用户信息</div>
<button onclick="this.nextElementSibling.textContent=this.previousElementSibling.dataset.email">获取用户邮箱</button>
<p>这里显示用户邮箱</p>
<!--为什么大多数程序员更喜欢使用通用标签?
1、现在大多数项目基于移动端,不依赖或不在乎搜索引擎
2、语义化标签是有限的,而用class自定义字符串去描述的属性更多样,更*一点。
3、语义化标签并没有被淘汰,可以混合使用。 -->
</body>
</html>
上一篇: 表格的使用方法及表单使用方式学习
下一篇: 细说函数与数据类型