html补充笔记和CSS命名规范

【音 视频播放】audio video

        width
        src
        height
        loop //循环次数
        controls //显示播放的按钮
        autoplay //自动播放

【表格table】

        width
        height
        border //是你边框的粗细
        bordercolor //是你边框的颜色   
        tr //行
            align  水平的
                left 表格默认的
                center
                right
            valign 垂直的
                top
                middle
                bottom
        th 表头
        td //单元格
        rowspan 上下合并 colspan 左右合并
        caption 表格的标题 它是居中的
        cellpadding 内边距,是边框与其内容的距离
        cellspacing 外边距,是边框与table边框之间的间隙
        bgcolor //背景的颜色               
【特殊符号】&gt大于号     &lt小于号  <sup></sup>上标  <sub></sub>下标   <hr />水平线   
【外联css样式 】<link href="../css/nav.css"  rel=“stylesheet” type="text/css"/>
【字符集】
<meta name=“keywords” content=“” />  content 堆积关键词在content里面写 
 <meta name=“description” content=“” />  描述
 <meta http-equiv="Refresh" content=“时间;url=http://www.baidu.com”>   时间是以秒为单位的
【a标签的伪类选择器】a:link{}  a:hover{}  a:visited{}  a:active{}

【表单】

   <form action="check.php" method="post">
    <input type="text" value="用户名"/>
    <input type="password" value="密码"/>
    <input type="hidden" />
    <input type="radio" name="sex" />男
    <input type="radio" name="sex" />女   
    自我介绍:<textarea cols="2" rows="3"></textarea>
    <select>
        <option>河北</option>
        <option>河南</option>
        <option>北京</option>
    </select>
    特长:
    <input type="checkbox" checked/>读书
    <input type="checkbox" />运动
    <input type="checkbox" />打游戏
    <input type="submit" value="注册"/>   
</form>
        提交方式
【get】 是通过url传参的,相对不安全,当你传输的时候会有长度限制
【post】  通过header头传输的,相对安全,它传输的时候比get传的数据要多 


【块、行内块、行内】

    块
        div p ul ol hr h1-h6 dl
        特点:
            1、可以设置宽高(默认宽度是100%)
            2、独占一行
            3、不受空格影响               
    行内
        span em strong b i u

        特点:
            1、不支持宽高(默认的宽度是根据内容撑开的)
            2、共处一行
            3、受空格影响       
    行内块
        img input
        特点:
            1、支持宽高
            2、共处一行
            3、受空格影响           
    重点:相互转换
        display:inline //转换成行内
        display:block //转换成块
        display:inline-block; (它比较常用)
        display:none //不显示

【浮动】

    作用:放在一行
    特点:
        1、元素变成块
        2、顶对齐
        3、半脱离文档流
    王者定律
        加浮动就要给我清浮动

    清除浮动的方式
        1、给父级加overflow:hidden;

        2、给你需要清除浮动的元素的下面加上一个空白的块标签给你的空白的标签加上clear:both;

        3、.clearFix:after{display:block;content:'',clear:both;zoom:1}
            display ?? :block //变成块
            content:内容
            clear:both 两边 清除
            兼容ie低版本的浏览器的清除浮动方式
            zoom:1

        使用:
            把clearFix 加在你要清除浮动的标签 注意是类名   class=“clearFix”

    网上实现小手的图片
        cursor:pointer;

【CSS命名规范】



头:header  
内容:content/container  
尾:footer  
导航:nav  
侧栏:sidebar
栏目:column  
页面外围控制整体布局宽度:wrapper  
左右中:left right center  
登录条:loginbar  
标志:logo  
抽奖:raffle
广告:banner  
页面主体:main  
热点:hot  
新闻:news
下载:download  
子导航:subnav  
菜单:menu  
子菜单:submenu  
搜索:search  
友情链接:friendlink
页脚:footer  
版权:copyright  
滚动:scroll  
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
注册:regsiter
状态态:status
投票:vote
合作伙伴:partner

注释的写法

/* main */
内容区
/* End main */

id的命名
    容器: container
    页头:header
    内容:content/container
    页面主体:main
    页尾:footer
    导航:nav
    侧栏:sidebar
    栏目:column
    页面外围控制整体布局宽度:wrapper
    左右中:left right center



id的命名

页面结构

    容器: container
    页头:header
    内容:content/container
    页面主体:main
    页尾:footer
    导航:nav
    侧栏:sidebar
    栏目:column
    页面外围控制整体布局宽度:wrapper
    左右中:left right center

导航

    导航:nav
    主导航:mainbav
    子导航:subnav
    顶导航:topnav
    边导航:sidebar
    左导航:leftsidebar
    右导航:rightsidebar
    菜单:menu
    子菜单:submenu
    标题: title
    摘要: summary

功能
    标志:logo
    广告:banner
    登陆:login
    登录条:loginbar
    注册:regsiter
    搜索:search
    功能区:shop
    标题:title
    加入:joinus
    状态:status
    按钮:btn
    滚动:scroll
    标签页:tab
    文章列表:list
    提示信息:msg
    当前的: current
    小技巧:tips
    图标: icon
    注释:note
    指南:guild
    服务:service
    热点:hot
    新闻:news
    下载:download
    投票:vote
    合作伙伴:partner
    友情链接:link
    版权:copyright

class的命名

(1)颜色:使用颜色的名称或者16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }

(2)字体大小,直接使用"font+字体大小"作为名称,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如

.left { float:left; }

(4)标题栏样式,使用"类别+功能"的方式命名,如
.barnews { }
.barproduct { }

注意事项

    1.一律小写;
    2.尽量用英文;
    3.尽量不缩写,除非一看就明白的单词.
    主要的 master.css
    模块 module.css
    基本共用 base.css
    布局,版面 layout.css

    主题 themes.css
    专栏 columns.css
    文字 font.css
    表单 forms.css
    补丁 mend.css
    打印 print.css







  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值