博主信息
博文 12
粉丝 0
评论 0
访问量 9292
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
html基础知识01
sea
原创
1243人浏览过

Ement 常见使用方式

1.!或者是html:5按 tab 键快速生成 html5 模板

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Document</title>
  8. </head>
  9. <body></body>
  10. </html>

2.生成带 class 和 id 的标签

  • 标签.类名(.类名默认生成带 div 的标签)

div.header

<div class="header"></div>

  • 标签#id 名(#id 名默认生成带 div 的标签)

div#header

<div id="header"></div>

3.生成同级标签(兄弟标签)

  • 标签 1+标签 2

h2+p

  1. <h2></h2>
  2. <p></p>

4.生成后代标签

  • 父标签>子标签

ul>li

  1. <ul>
  2. <li></li>
  3. </ul>

5.爬升(爬上去)

  • ^爬升标签
  1. ul>li^div
  2. <!-- 父标签 1>子标签^爬升标签 2 -->
  1. <ul>
  2. <li></li>
  3. </ul>
  4. <div></div>

6.生成标签的时候同时创建内部的文本

  • {文本内容}

p{我是段落}

<p>我是段落</p>

7.生成标签时候加入属性

  • 标签名[属性名=“属性值”]

a[href='http://www.baidu.com']{百度}

<a href="http://www.baidu.com">百度</a>

8.重复生成功能

  • 标签名*n(生成 n 个标签)

ul>li*3

  1. <ul>
  2. <li></li>
  3. <li></li>
  4. <li></li>
  5. </ul>

9.给标签自动添加序号和排序

  • 使用$符添加序号(1、2、3…)

ul>li*4{导航$}

  1. <ul>
  2. <li>导航1</li>
  3. <li>导航2</li>
  4. <li>导航3</li>
  5. <li>导航4</li>
  6. </ul>
  • 使用@符从哪里开始排序

ul>li*4{导航$@100}

  1. <ul>
  2. <li>导航100</li>
  3. <li>导航101</li>
  4. <li>导航102</li>
  5. <li>导航103</li>
  6. </ul>

10.使用()给标签分组

div>(header>ul>li*2)+span

  1. <div>
  2. <header>
  3. <ul>
  4. <li></li>
  5. <li></li>
  6. </ul>
  7. </header>
  8. <span></span>
  9. </div>

更多请参考Ement 文档

元素四类属性

  1. <!-- 1. 通用属性 class, id, style -->
  2. <div class="top">top</div>
  3. <div id="header">header</div>
  4. <div style="color: red">Hello</div>
  5. <!-- 2. 预置属性 -->
  6. <a href="https://php.cn">php.cn</a>
  7. <img src="" alt="" />
  8. <link rel="stylesheet" href="" />
  9. <!-- 3. 事件属性 on + click-->
  10. <button onclick="alert('提交成功')">确定</button>
  11. <!-- 4. 自定义属性 -->
  12. <div data-email="admin@php.cn">用户信息</div>

布局标签

  1. <div class="header">header</div>
  2. <div class="main">main</div>
  3. <div class="footer">footer</div>
  1. <!-- html5 语义化的布局标签 -->
  2. <header>header</header>
  3. <main>main</main>
  4. <footer>footer</footer>
  5. <!-- 1. 目前项目90%以上是基于移动端, 不依赖搜索引擎/seo -->
  6. <!-- 2. 语义化的标签数量是有限的,不如class的自定义字符串再精准 -->
批改老师:PHPzPHPz

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学