zoukankan      html  css  js  c++  java
  • html语义化

    html语义化

    > 1.使用div进行布局 不要用div进行无意义的包裹
    > 2.span没有任何语义
    > 3.既可以使用div也可以使用P时,尽量使用p,p为分段
    > 4.不要使纯样式标签,如: b、font、u等,改用css设置
    > 5.需要强调的文本,用em(斜体,不要使用i)或strong(加粗,不要使用b)
    > 6.使用表格时,标题caption,表头thead,主体tbody,尾部tbody,表头th,单元用td
    > 7.每个input标签加上id,要求说明部分用lebel包裹起来,加上for="someid",关联起来
    > 8.使用ul和ol来表述列表
    > 9.多使用html5标签,header、nav、main、footer、article、section
    > 10.简化html,尽量使用::after和::before来增加附近内容

    //要实现   
    123<div>666</div>
    444
    //传统做法
    <p style="float:left;">123</p>
    <div style="float:left;clear:right">666</div>
    <p>444<p>
    //h5语义化做法
    <style>
       .d1{}
       .d1::before{
         content:"123",
         display: inline-block;
      }
      .d2::after{
         content:"444",
         display: block;
      }
    </style>
    <div class="d1"></div>
    //这样做的好处,简化了html结构,减少dom层的渲染时间,便于维护
    

      

    语义化布局

    <headr>
        <nav></nav>
    </headr>
    <div class="content">
        <section>1楼</section>
        <section>2楼</section>
        <section>3楼</section>
        <aside></aside>
        <address>地址</address>
    </div>
    <footer></footer>
    

      

  • 相关阅读:
    nginx之location、rewrite配置
    nio buffer
    分布式事务
    彻底剖析RMI底层源码 、手写轻量级RMI框架
    Java RMI详解
    Java提高篇——对象克隆(复制)
    序列化
    分布式通信-tcp/ip 广播
    分布式通信-tcp/ip 单播
    php 图像处理 抠图,生成背景透明png 图片
  • 原文地址:https://www.cnblogs.com/xfz1987/p/7812133.html
Copyright © 2011-2022 走看看