首页 > 博客列表 > 前端Html知识

博主信息

博文 1

粉丝 0

访问量 504

专题推荐

更多>

Emmet语法知识

1 生成标准html文档框架

第一种是空文档上敲入 html: 5 然后按Tab键
第二种是空文档上敲入！然后回车
两种方式都可以生成标准的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>Document</title>
  </head>
  <body></body>
</html>

2 快速生成带class和ID的代码

（1）生成class
输入 P.first
回车

 <p class="first"></p>

（2）生成ID
输入 P#last
回车

<p id="last"></p>

（3）带文本内容
输入 .title{大家晚上好}
回车

<div class="title">大家晚上好</div>

3 层级关系

  输入  div>p>a

回车

     <div>
         <p><a href=""></a></p>
     </div>

4 兄弟

输入 div+p
回车

<div></div>
    <p></p>

5 向上一级

输入 div>p^a
回车

<div>
    <p></p>
</div>
    <a href=""></a>

6 重复
输入 ul>li*3>a{link}
回车

<ul>
  <li><a href="">link</a></li>
  <li><a href="">link</a></li>
  <li><a href="">link</a></li>
</ul>

7 分组
输入 .cart>h2{购物车}+(ul>li*3>a{商品})+p{总计: 3 件}
回车

<div class="cart">
  <h2>购物车</h2>
  <ul>
    <li><a href="">商品</a></li>
    <li><a href="">商品</a></li>
    <li><a href="">商品</a></li>
  </ul>
  <p>总计: 3 件</p>
</div>

8 tag[属性]

   输入 a[href="https://php.cn/"]{php中文网} 
   回车
a [href="https://php.cn/"]{php中文网}

9 序号

(1)给item加从1开始的升序编号
输入 ul.list>li.item*5>a{item$}
回车

<ul class="list">
      <li class="item"><a href="">item1</a></li>
      <li class="item"><a href="">item2</a></li>
      <li class="item"><a href="">item3</a></li>
      <li class="item"><a href="">item4</a></li>
      <li class="item"><a href="">item5</a></li>
</ul>

(2) 给item加从5开始的升序编号
输入 ul.list>li.item*5>a{item$@5}
回车

<ul class="list">
  <li class="item"><a href="">item5</a></li>
  <li class="item"><a href="">item6</a></li>
  <li class="item"><a href="">item7</a></li>
  <li class="item"><a href="">item8</a></li>
  <li class="item"><a href="">item9</a></li>
</ul> -->

(3)给item加从5开始的降序编号
输入 ul.list>li.item*5>a{item$@-1}
回车

 <ul class="list">
  <li class="item"><a href="">item5</a></li>
  <li class="item"><a href="">item4</a></li>
  <li class="item"><a href="">item3</a></li>
  <li class="item"><a href="">item2</a></li>
  <li class="item"><a href="">item1</a></li>
</ul>

(4)给class内的item标签加升序编号
输入 ul>li.item.item$*5{demo}
回车

<ul>
  <li class="item item1">demo</li>
  <li class="item item2">demo</li>
  <li class="item item3">demo</li>
  <li class="item item4">demo</li>
  <li class="item item5">demo</li>
</ul>

通过下列代码可以直接给.item3赋属性
<style>
.item3 {
background-color: red;
}
</style> —>

（5）给item加 li类标签
输入 ul.list>li.item{demo}*3
回车

<ul class="list">
  <li class="item">demo</li>
  <li class="item">demo</li>
  <li class="item">demo</li>
</ul>

（6）省略li的结果
输入 ul.list>.item{demo}*3
回车

<ul class="list">
  <li class="item">demo</li>
  <li class="item">demo</li>
  <li class="item">demo</li>

</ul>

（7）快速生成表格
输入 table>tr5>td10{xxxx}
回车

<table border="1">
      <tr>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
      </tr>
      <tr>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
      </tr>
      <tr>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
      </tr>
      <tr>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
      </tr>
      <tr>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
        <td>xxxx</td>
      </tr>
    </table>

元素的属性

通用属性 class, id, style

<div class="top">top</div>
<div id="header">header</div>
<div style="color: red">Hello</div>
1. 预置属性
  <a href="https://php.cn">php.cn</a>
  <img src="" alt="" />
  
  <link rel="stylesheet" href="" />
2. 事件属性 on + click
  <button onclick="alert('提交成功')">确定</button>
  
  <div>
  <input type="text" oninput="this.nextElementSibling.textContent = this.value" />
  <p>实时显示输入的内容</p>
  </div>
3. 自定义属性
  <div data-email="admin@php.cn">用户信息</div>
  <button onclick="this.nextElementSibling.textContent = this.previousElementSibling.dataset.email">
  获取用户邮箱
  </button>
  
  <p>这里显示用户邮箱</p>

常用的布局标签

1
尽量不要用id 尽量只用class,实现样式复用
<div class="header">header</div>
<div class="main">main</div>
<div class="footer">footer</div>

2 语义化的布局标签
<header>header</header>
<main>main</main>
<footer>footer</footer>
<article></article>
<nav></nav>
<aside></aside>

html5语义化标签的优缺点

优点: 简洁
缺点
1 目前网页90%以上是基于移动端, 所以语义化的标签是否被搜索引擎关注意兴趣不大
2 大量同名的语义化标签容易混淆，不知道谁是谁的。不如class的自定义字符串精准。

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

前端Html知识

2021-12-22 14:59:18