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小于号  上标  下标   <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