欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

html基础知识01

程序员文章站 2022-05-08 11:09:26
...

Ement 常见使用方式

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

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>Document</title>
    8. 

  8.   </head>
    9. 

  9.   <body></body>
    10. 

  10. </html>
    11.

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. 

  2. <p></p>
    3.

4.生成后代标签

  • 父标签>子标签

ul>li

    

  1. <ul>
    2. 

  2.   <li></li>
    3. 

  3. </ul>
    4.

5.爬升（爬上去）

  • ^爬升标签
    

  1. ul>li^div
    2. 

  2. <!-- 父标签 1>子标签^爬升标签 2 -->
    3. 

    

  1. <ul>
    2. 

  2.   <li></li>
    3. 

  3. </ul>
    4. 

  4. <div></div>
    5.

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. 

  2.   <li></li>
    3. 

  3.   <li></li>
    4. 

  4.   <li></li>
    5. 

  5. </ul>
    6.

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

  • 使用$符添加序号（1、2、3…）

ul>li*4{导航$}

    

  1. <ul>
    2. 

  2.   <li>导航1</li>
    3. 

  3.   <li>导航2</li>
    4. 

  4.   <li>导航3</li>
    5. 

  5.   <li>导航4</li>
    6. 

  6. </ul>
    7.
  • 使用@符从哪里开始排序

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

    

  1. <ul>
    2. 

  2.   <li>导航100</li>
    3. 

  3.   <li>导航101</li>
    4. 

  4.   <li>导航102</li>
    5. 

  5.   <li>导航103</li>
    6. 

  6. </ul>
    7.

10.使用（）给标签分组

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

    

  1. <div>
    2. 

  2.   <header>
    3. 

  3.     <ul>
    4. 

  4.       <li></li>
    5. 

  5.       <li></li>
    6. 

  6.     </ul>
    7. 

  7.   </header>
    8. 

  8.   <span></span>
    9. 

  9. </div>
    10.

更多请参考Ement 文档

元素四类属性

    

  1. <!-- 1. 通用属性 class, id, style -->
    2. 

  2. <div class="top">top</div>
    3. 

  3. <div id="header">header</div>
    4. 

  4. <div style="color: red">Hello</div>
    5. 

    6. 

  6. <!-- 2. 预置属性 -->
    7. 

  7. <a href="https://php.cn">php.cn</a>
    8. 

  8. <img src="" alt="" />
    9. 

  9. <link rel="stylesheet" href="" />
    10. 

    11. 

  11. <!-- 3. 事件属性 on + click-->
    12. 

  12. <button onclick="alert('提交成功')">确定</button>
    13. 

    14. 

  14. <!-- 4. 自定义属性 -->
    15. 

  15. <div data-email="admin@php.cn">用户信息</div>
    16.

布局标签

    

  1. <div class="header">header</div>
    2. 

  2. <div class="main">main</div>
    3. 

  3. <div class="footer">footer</div>
    4. 

    

  1. <!-- html5 语义化的布局标签 -->
    2. 

  2. <header>header</header>
    3. 

  3. <main>main</main>
    4. 

  4. <footer>footer</footer>
    5. 

  5. <!-- 1. 目前项目90%以上是基于移动端, 不依赖搜索引擎/seo  -->
    6. 

  6. <!-- 2. 语义化的标签数量是有限的,不如class的自定义字符串再精准 -->
    7.

上一篇： 一些小的细节点以及基础知识（学习准备）

下一篇： css基础知识

推荐阅读