zoukankan      html  css  js  c++  java
  • 编写HTML和CSS几点心得

    HTML代码优化

    • 表单域用fieldset包起来,并用legend说明其用途(注意在css初始化的时候把fieldset的border设为0,把legend的display设为none)

    • 每个input标签要用label来标注文本,并为每个input设id,用for关联。
    • 为了提高搜索引擎友好性,要减少table标签使用。但是对于呈现二维数据,table却是首选,当然我们的优化方法是表格的标题用<caption></caption>包裹,表头用<thead></thead>,主体用<tbody></tbody>,尾部用<tfoot></tfoot>,表头单元格用<th>,普通单元格用<td>
    • 语义化标签注意的问题
    1. 为了提高搜索引擎的友好性,尽可能少地用无语意的div和span,对于强调或特殊的格式可以用<strong>、<em>加css
    2. 在语义不明显的地方,尽量用<p>二不用<div>
    3. 不要使用纯样式的标签如<b><font><u>,改用css

    CSS代码优化

    • 合理的站点css框架:base层:原子化、初始化;   common层:公用样式; page层:私有样式。
    • 推荐一个优秀的base层:
      /*css reset*/
      body,div,dl.dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
      table{border-collapse: collapse;border-spacing: 0;}
      fieldset,img{border: 0;}
      address,caption,city,code,dfn,em,strong,th,var{font-style: normal;font-weight: normal;}
      ol,ul{list-style: none;}
      caption,th{text-align: left;}
      h1,h2,h3,h4,h5,h6{font-size: 100%;font-weight:normal;}
      q:before,q:after{content: '';}
      abbr,acronym{border: 0;}
      
      /*文字排版*/
      .f12{font-size: 12px;}
      .f13{font-size: 13px;}
      .f14{font-size: 14px;}
      .f16{font-size: 16px;}
      .f20{font-size: 20px;}
      .fb{font-weight: bold;}
      .fn{font-weight: normal;}
      .t2{text-indent: 2em;}
      .lh150{line-height: 150%;}
      .lh180{line-height: 180%;}
      .lh200{line-height: 200%;}
      .unl{text-decoration: underline;}
      .no_unl{text-decoration: none;}
      
      /*定位*/
      .t1{text-align: left;}
      .tc{text-align: center;}
      .tr{text-align: right;}
      .bc{margin-left: auto;margin-right: auto;}
      .fl{float: left;display: inline;}
      .fr{float: right;display: inline;}
      .cb{clear: both;}
      .cl{clear: left;}
      .cr{clear: right;}
      .clearfix:after{content: '.';display: block;height: 0;clear: both;visibility: hidden;}
      .clearfix{display: inline-block;}* html
      .clearfix{height: 1%;}
      .clearfix{display: block;}
      .vm{vertical-align: middle;}
      .pr{position: relative;}
      .pa{position: absolute;}
      .abs-right{position: absolute;right: 0}
      .zoom{zoom:1;}
      .hidden{visibility: hidden;}
      .none{display: none;}
      
      /*长度高度*/
      .w10{10px;}
      .w20{20px;}
      .w30{30px;}
      .w40{40px;}
      .w50{50px;}
      .w60{60px;}
      .w70{70px;}
      .w80{80px;}
      .w90{90px;}
      .w100{100px;}
      .w200{200px;}
      .w250{250xp;}
      .w300{300px;}
      .w400{400px;}
      .w500{500px;}
      .w600{600px;}
      .w700{700px;}
      .w800{800px;}
      .w{100%;}
      .h50{height:50px;}
      .h80{height:80px;}
      .h100{height:100px;}
      .h200{height:200px;}
      .h{height:100%;}
      
      /*边距*/
      .m10{margin:10px;}
      .m15{margin:15px;}
      .m30{margin:30px;}
      .mt5{margin-top:5px;}
      .mt15{margin-top:15px;}
      .mt20{margin-top:20px;}
      .mt30{margin-top:30px;}
      .mt50{margin-top:50px;}
      .mt100{margin-top:100px;}
      .mb5{margin-bottom::5px;}
      .mb15{margin-bottom:15px;}
      .mb20{margin-bottom:20px;}
      .mb30{margin-bottom:30px;}
      .mb50{margin-bottom:50px;}
      .mb100{margin-bottom:100px;}
      .ml5{margin-left:5px;}
      .ml15{margin-left:15px;}
      .ml20{margin-left:20px;}
      .ml30{margin-left:30px;}
      .ml50{margin-left:50px;}
      .ml100{margin-left:100px;}
      .mr5{margin-right:5px;}
      .mr15{margin-right:15px;}
      .mr20{margin-right:20px;}
      .mr30{margin-right:30px;}
      .mr50{margin-right:50px;}
      .mr100{margin-right:100px;}
      .p10{padding:10px;}
      .p15{padding:15px;}
      .p30{padding:30px;}
      .pt5{padding-top:5px;}
      .pt10{padding-top:10px;}
      .pt15{padding-top:15px;}
      .pt20{padding-top:20px;}
      .pt30{padding-top:30px;}
      .pt50{padding-top:50px;}
      .pb5{padding-bottom:5px;}
      .pb10{padding-bottom:10px;}
      .pb15{padding-bottom:15px;}
      .pb20{padding-bottom:20px;}
      .pb30{padding-bottom:30px;}
      .pb50{padding-bottom:50px;}
      .pl5{padding-left:5px;}
      .pl10{padding-left:10px;}
      .pl15{padding-left:15px;}
      .pl20{padding-left:20px;}
      .pl30{padding-left:30px;}
      .pl50{padding-left:50px;}
      .pr5{padding-right:5px;}
      .pr10{padding-right:10px;}
      .pr15{padding-right:15px;}
      .pr20{padding-right:20px;}
      .pr30{padding-right:30px;}
      .pr50{padding-right:50px;}
      

        

    • 推荐使用类选择器,少用甚至不用id选择器(页面结构和样式都用类选择器,对于需要添加js功能的标签才用id选择器)
    • 对于类选择器:小项目。页面少的可以用“继承”,当对于大项目,多页面的网站,为了防止css代码爆炸式增长,推荐用“组合”。(-_-如果不懂什么是“组合”、“继承”的建议Google一下,笔者这里不做解释)
    •  选择器的命名习惯:加前缀,笔者习惯的风格是:类样式c_main_news,id样式j_main_news。不要吝啬字符,好的命名方式有利于提高代码的可读性和维护性。
    • 上下margin只用一个,如只用margin-top来布局,就不要突然引入一个margin-bottom,因为不同的浏览器会重叠。
    • 区分选择器的优先级,注意样式覆盖,这也是不用id选择器而用类选择器来定义样式的一个原因,id选择器的优先级太高,样式覆盖和重用很麻烦。为了易修改和维护,推荐使用类选择器。
  • 相关阅读:
    VirtualBox Network设置的NAT和Bridged Adapter模式区别
    Kubernetes里的ConfigMap的用途
    使用Kubernetes里的job计算圆周率后2000位
    给谷歌输入法增添自定义词组,提高输入效率
    推荐一个yaml文件转json文件的在线工具
    GCC同时使用静态库和动态库链接
    Linux后台开发常用工具
    gcc链接参数--whole-archive的作用
    rdynamic和-whole-archive
    gcc和ld 中的参数 --whole-archive 和 --no-whole-archive
  • 原文地址:https://www.cnblogs.com/Jafeney/p/3864073.html
Copyright © 2011-2022 走看看