<!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>
相关推荐
© 2020 asciim码
人生就是一场修行
