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

html前端基础知识

程序员文章站 2022-04-17 19:03:29
...

html 基础知识，运用 Ement 语法生成 html 代码

  • 使用！+ TAB 或者 html:5 + TAB
    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    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.
Ement 语法符 标签属性 生成效果
. class=”” <div class=""></div>
# id=”” <div id=""></div>
div.>h2 >符， div 下增加 h2 标签 <div class=""><h2></h2></div>
.title{} {}符，生成文本内容 <div class="title">感谢老师</div>
div>p>a >符，生成父子层级关系的标签 <div><p><a href=""></a></p><div>
div+p+a +符，生成兄弟层级关系的标签 <div></div><p></p><a href=""></a>
div>p^ ^符，p 的上级 div 同级标签 <div><p></p></div><a href=""></a>
.card>ul>li*3>a *符，重复 3 次 li 标签
.card>(ul>li*3>a)+p ()为分组符
.card>ul>li>a{内容$} $符为顺序号标识符
.card>ul>li>a{内容$@n} $@n 为指定从几开始排序 如 n 为 100 即从 100 开始排
.card>ul>li>a{内容$@-n} $@-n 为指定从几开始例序排 如-100 即从 100 开始例排
a[href=””]{php 中文网} []为属性符 比较少用到此类方法，只需知道即可
  • . 生成的标签效果，默认标签是 div
  1. <div class=""></div>
  • p.title 生成带 class 属性名 title 的 p 标签
  1. <p class="title"></p>
  • div# 生成的标签效果
  1. <div id=""></div>
  • 使用{}符快速生成带文本内空的标签
  • 实例代码:.title{感谢老师}
  1. <div class="title">感谢老师</div>
  • 使用父子层级符号>生成多级标签
  • 实例代码 div>p>a
    

  1. <div>
    2. 

  2.   <p><a href=""></a></p>
    3. 

  3. </div>
    4.
  • 使用兄弟层级符号+生成多级标签
  • 实例代码 div+p+a
    

  1. <div></div>
    2. 

  2. <p></p>
    3. 

  3. <a href=""></a>
    4.
  • 使用^上级层级关系生成上级的同级标签
  • 实例代码 div>p^a
    

  1. <div>
    2. 

  2.   <p></p>
    3. 

  3. </div>
    4. 

  4. <a href=""></a>
    5.
  • 多层级分组符（）
  • 实例代码:.card>h2{购物车}+(ul>li*3>a{商品列表})+p{总计:3 件}
    

  1. <div class="card">
    2. 

  2.   <h2>购物车</h2>
    3. 

  3.   <ul>
    4. 

  4.     <li><a href="">商品列表</a></li>
    5. 

  5.     <li><a href="">商品列表</a></li>
    6. 

  6.     <li><a href="">商品列表</a></li>
    7. 

  7.   </ul>
    8. 

  8.   <p>总计:3件</p>
    9. 

  9. </div>
    10.
  • 序列号符 $ 此符号为文本内容序号符
  • 实列代码:.card>ul>li*8>a{商品列表$}
    

  1. <div class="card">
    2. 

  2.   <ul>
    3. 

  3.     <li><a href="">商品列表1</a></li>
    4. 

  4.     <li><a href="">商品列表2</a></li>
    5. 

  5.     <li><a href="">商品列表3</a></li>
    6. 

  6.     <li><a href="">商品列表4</a></li>
    7. 

  7.     <li><a href="">商品列表5</a></li>
    8. 

  8.     <li><a href="">商品列表6</a></li>
    9. 

  9.     <li><a href="">商品列表7</a></li>
    10. 

  10.     <li><a href="">商品列表8</a></li>
    11. 

  11.   </ul>
    12. 

  12. </div>
    13.
  • 序号符号$@n，其中 n 代表需要指定从几开始的数字
  • 实例代码:.card>ul>li*8>a{商品列表$@10}
    

  1. <ul>
    2. 

  2.     <li><a href="">商品列表10</a></li>
    3. 

  3.     <li><a href="">商品列表11</a></li>
    4. 

  4.     <li><a href="">商品列表12</a></li>
    5. 

  5.     <li><a href="">商品列表13</a></li>
    6. 

  6.     <li><a href="">商品列表14</a></li>
    7. 

  7.     <li><a href="">商品列表15</a></li>
    8. 

  8.     <li><a href="">商品列表16</a></li>
    9. 

  9.     <li><a href="">商品列表17</a></li>
    10. 

  10.   </ul>
    11. 

  11. </div>
    12.
  • 序号倒序排符号$@-n,其中-n 代表需要从几开始倒排
  • 实例代码:.card>ul>li*8>a{商品列表$@-10}
    

  1. <div class="card">
    2. 

  2.   <ul>
    3. 

  3.     <li><a href="">商品列表17</a></li>
    4. 

  4.     <li><a href="">商品列表16</a></li>
    5. 

  5.     <li><a href="">商品列表15</a></li>
    6. 

  6.     <li><a href="">商品列表14</a></li>
    7. 

  7.     <li><a href="">商品列表13</a></li>
    8. 

  8.     <li><a href="">商品列表12</a></li>
    9. 

  9.     <li><a href="">商品列表11</a></li>
    10. 

  10.     <li><a href="">商品列表10</a></li>
    11. 

  11.   </ul>
    12. 

  12. </div>
    13.
  • 属性符号[]
  • 实例代码:a[href=””]{php 中文网}
  1. <a href=""></a>

元素的属性

  • 1 常规属性：class、id、style
    

  1. <div class="header">感谢老师</div>
    2. 

  2. <div id="header">php.cn</div>
    3. 

  3. <div style="background-color: brown">感谢</div>
    4.
  • 2 预置属性:href、src、alt…不可修改的
    

  1. <a href="">超连接</a>
    2. 

  2. <img src="" alt="这是一张图片" />
    3. 

  3. <link rel="stylesheet" href="" />
    4.
  • 3 事件属性:前缀以 on 开头+事件如 onclick
    

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

  2. <div>
    3. 

  3.   <input type="text" oninput="this.nextElementSibling.textContent=this.value" />
    4. 

  4.   <p>实时显示数字</p>
    5. 

  5. </div>
    6.
  • 4 自定义属性:以 date-开头+自定义名称如 date-email、date-username…可自行设置名称
    

  1. <div data-email="123@qq.com">邮箱信息</div>
    2. 

  2. <button
    3. 

  3.   onclick="this.nextElementSibling.textContent=this.previousElementSibling.dataset.email"
    4. 

  4. >
    5. 

  5.   获取邮箱
    6. 

  6. </button>
    7. 

  7. <p>显示用户邮箱</p>
    8.

div+class 优势

  • 通用 pc 和移动端，开发更方便！
  • 目前主流大多数以移动端为主，如小程序、app 等
    

  1. <!-- 经典方式 -->
    2. 

  2. <div id="header">页头</div>
    3. 

  3. <div id="main">内容</div>
    4. 

  4. <div id="footer">页尾</div>
    5. 

  5. <!-- 尽量不要使用id，实现代码复用性 -->
    6. 

  6. <div class="header">页头</div>
    7. 

  7. <div class="main">内容</div>
    8. 

  8. <div class="footer">页尾</div>
    9. 

  9. <!-- html5语义化布局标签 -->
    10. 

  10. <header>页头</header>
    11. 

  11. <main>内容</main>
    12. 

  12. <footer>页尾</footer>
    13.

语义化标签缺点

  • 语义化标签有限，不能满足开发者，不如 class 实用

上一篇： 使用 electron-builder 打包 Electron 程序

下一篇： 前端html基础知识之图片/链接/列表和表单

推荐阅读