前端开发必修课(入门)

基础工具使用
    工具介绍
        一.DW工具
            ctrl+N（新建试图）
            ctrl+S(保存)
            F12(添加游览器以后按f12可运行项目)
        二.PS工具
            ctrl+o(打开文件目录)
                ctrl+r(新建文件)
            ctrl++(放大)，ctrl+-（缩小）
            F8（点击PS左侧矩形选框工具，F8详细参数）
                width：宽    height：高
            ctrl+r（标尺）
            抠图（使用标尺微调，在使用矩形选框工具选中后使用ctrl+c复制，新建，粘贴）
        三.HBuilder
            ul>(li>a{需要的字})*需要的数量  
    设计图
        前端工作根据UI设计图（Psd）来制作
        工作不用切图，量尺寸
Html5标准语法
    wed标准
        1.HTML（结构）
        2.CSS（样式）
        3.javascript（行为）
        *：站点主页必须以index.html命名
    Html基本语法
        1.常规标记（双标记，对儿标记）
            <标记 属性="属性值" 属性="属性值"></标记>
        2.空标记(单标记)
            <标记 属性="属性值"/>
        注意：
            1.<>中的第一个单词叫做标记，标签，元素。
            2.标记和属性用空格隔开，属性和属性用等号链接，属性值必须放在“”号内。
            3.一个标记可以没有属性也可以也有多个属性，属性与属性值不分先后顺序。
            4.空标记没有结束标签，用“/”代替。
            5.meta标签（标记、元素）由于是代码编译器自动生成，有时候会默认加/,有时候没有，咱们在实际开发中直接使用就可以。
Html5标签
    table（表格）
        tr 行，td 列
            cellspacing(单元格与单元格之间的间距)
                colspan(合并列)
            cellapdding(单元格与内容之间的空隙)
                rowspan(合并行)
        bgcolor（背景颜色）
        align（让文字对齐）
            left（左）
            right（右）
            center（中心）
        valign（让文字垂直对齐）
            top（上）
            bottom（下）
            middle（中）
        rules(添加组分隔线)
            rows：位于行之间的线条
            cols：位于列之间的线条
            all：位于行和列之间的线条
            none：没有线条
    超链接标签
        <a href="路径，CSS文件包括后缀全名称，输入网站时包括域名"/>
    插图标签
        <img src(路径)="路径，CSS文件包括后缀全名称"/>
            属性值默认为：_self; 新窗口打开:_blank;
    dl（自定义列表）
        <dl><dr></dr><dd></dd></dl>
    ol（有序列表组成）
        <ol><li></li></ol>
    ul(无序列表组成)
        <li></li>
    from(表单)
        <input type=""/>
            text（文本框）
            botten（跳转按钮）
                botten只跳转，不上传
            submit（提交按钮）
                submit是提交按钮 起到提交信息的作用
            textarea(多行文本框)
                cols(字的宽度)，rows（字的高度）
            checkbox(复选框)
                disabled=“disabled”(禁止)，checked="checked"（默认选中）
            radio(单选框)
            method（数据安全类型）
                get（从服务器上获取数据）
                post（向服务器发送数据）
            action（跳转路径）
            file（上传文件筐）multiple=“multiple”指可选多个文件
            image（文本域） src路径 可以设置高和宽 alt提示
            select
                option
        表格(table)
            1.boder-spacing:value;(单元格间距)
            2.border-collapse:collapse；（合并单元格边框线）
            3.empty-cell：show/hide（显示/隐藏）
            4.table-layout:auto/fixed
                auto：随着内容来增加宽
                fixed：固定宽度，及时内容超出宽度也不变
            5.nth-child(2n)(even)  序列选择，只选择偶数的选择符
                nth-child(2n-1)(odd)只选择奇数的选择符
            6.caption（表格标题）
        表格框（fieldset）
            1.表单字段级（fieldest disabled=“disadled”）（disadled定义空间禁止可以用）
            2.字段级标题（legend）（legend align=“left/center/right”）（legend是fieldset唯一的属性（毕竟是标题））
        数据分组
            数据行分组
                <thead></thead>
                <tbody></tbody>
                <tfoot></tfoot>
                在一个table当中只能包含一个thead，一个tfoot，但是可以包含多个tbody
    Html5命名规格
        最外框（warp）
        头部（header）
        广告条(banner）
        导航栏(nav)
        侧边导航栏(aside)
        内容(content)
        新闻栏(news)
        下拉菜单(dorpmenu)
        指南(guild)
        热点(hot)
        尾部(fonter)
BUG
    兼容BUG
        1.图片间隙
            1.设置display：block；
            2.设置float：left浮动
            3.给overflow：hidden
        2.dt，li中图片间隙
            同上
        3.双倍边距（只有IE6出现）
            1.给浮动元素设置display:inline;
        4.图片在IE中会有蓝色边框
            1.给img设置border：0；或none；
        5.默认高度
            1.给fon-size：0 但最终显示结果非预期，如设置1px，但IE下非1px
            2.设置overflow：hidden
        6.表单元素距离顶部间距不一致（大部分游览器）
            1.使用浮动 float：left
        7.按钮元素默认大小不一
            1.同一设置高和宽（a标签模拟同理）
            2.去掉边框给背景图或颜色来实现
            3.input外边套一个标签，在标签里写按钮样式，把input边框去掉
        8.百分比BUG
            1.给靠过来的元素设置声明clear:right
        9.鼠标指针BUG
            1.IE下设置cursor：hack：统一某元素鼠标指针变成小手
            注（该属性在标准游览器下无效果）
        10.子元素没设置浮动，给子元素设置margin-top父元素也会添加
        opacity(透明写法)
            opacity:0.value;(value的取值范围0.1---0.9-1)
                IE写法：filter：alpha（opacity=value）；取值范围1-100
        各大游览器写法
            （1）-webkit-  谷歌
              (2)-moz-   火狐
              (3)-ms-       IE
            (4)-o-   欧朋
        最小高度
            兼容解决{
      min-height:200px;
      height:auto !important;
     height:200px;
}
            当前浏览器识别min-height
游览器兼容
    游览器内核
        1.Trident(HSHTML)（三叉戟；三叉线；三叉鱼叉）
        2.Gecko(壁虎)
        3.presto(迅速的)
        4.webkit(safari内核，chrome内核原型，他是苹果公司自己的内核，也是苹果safari使用的内核)
        5.Blink(由Google和Opera software开发的游览器排版引擎)
    游览器内核代表作
        1.Trident
            IE，Maxthon（遨游），腾讯，Theworld世界之窗，360游览器
            此内核是IE的内核，此内核只能在windows平台，并且不开源
        2.Gecko
            Mozilla Firefox，Netscape6
            次内核的优点是跨平台可以在windows，Linux，Maros X等系统运行
        3.presto
            是Opera开发的游览器排版引擎，公认最燃速度最快的引擎，Opera已改用Google Chrome的Blink内核
        4.Webkit
            safari，chrome，傲游游览器3。是一个开源项目
        5.Blink
            由Google，Opera，Software开发的游览器排版引擎。2013年4月发布
    科普
        游览器兼容问题？
            因为各大厂家一些利益考虑，设置了各种技术壁垒。都让Css应用起来比想象中的麻烦
        Css bug
            CSS不能正常显示，称之为BUG
        Css Hack
            解决Css Bug的方法
            注（虽然是方法但非官方解决，所以降低了Css的可读性，增加了代码的负担），对某些规则或语法上没有形成支持，来隐藏或显示的样式
        Css Filter
            表示过滤器的意思，是对游览器组显示或隐藏或声明的方法，本质上和Hack一样解决Css Bug的方法

 

换成脑图 =====>文件已经上传到了CSDN