A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

guduzhilang35

初级黑马

  • 黑马币:

  • 帖子:

  • 精华:

© guduzhilang35 初级黑马   /  2017-11-19 10:03  /  837 人查看  /  2 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 小石姐姐 于 2017-11-20 14:46 编辑

Day-01HTML
        概述:超文本标记语言
                标记语言:通过一组标签来描述事物的一门语言
                超文本:比普通文本更强大.
        作用:
                用来制作页面(静态页面).展示网页数据
        使用:
                创建:一个HTML文件,扩展名是.html或者.htm
        结构标签
                根标签:<html></html>
                        <head> 头标签
                                <title></title>
                                <meta>charset='UTF-8'</meta>
                        <body> 体标签
                                
                字体标签
                        <font>:
                        <font>文字</font>
                                标签属性:<标签 属性名="属性值" 属性名="属性值"></标签>
                                        color属性:颜色
                                        size属性:字体的大小(只能1-7)
                                        face属性:方法体宋体.楷体...
                        <br/>换行标签
                        <hr/>横线标签
                        <pre/>复制保持原样
                排版标签
                        标题标签<h>:1-6
                        段落标签<p>
                        粗体标签<b>
                        斜体标签<i>
                        下划线标签<u>
                        居中标签<center>
                        
        图片标签*
                图片标签:<img>
                        属性:src :来源
                                width: 宽度
                                height:高度
                                alt :图片找不到显示的内容
                图片引用的路径问题:
                        路径:
                                相对路径:同级直接写文件名或者./文件名
                                        上级路径:../上两级目录:../../下一级目录:下级名称/图片名
                        代码调试:右键检查 点击elements 选中元素 右键add         
               
        网站列表页面的显示
                列表标签:
                        有序列表:<ol>
                                                <li></li>
                                        </ol>
                        无序列表:<ul>
                                                <li></li>
                                        </ul>
                超连接标签:
                        <a>标签:
                                href:要连接的路径
                                target:打开方式:
                                        _self:(默认)在本窗口
                                        _blank:新打开一个窗口
                                       
                        注意:ul style='list-style:none'去除小圆点
        
        表格标签:
                <table>
                        <tr>:行
                                <td></td>:列
                        </tr>
                </table>
                属性:
                width  :表格宽度
                Height :高度
                Border :边框
                Align: :表格水平位置
                        left
                        center
                        right
               
                <td>的属性
                        colspan:跨列合并
                        rowspan:跨行合并
               
        表单标签(重点):
                <form action='' method='get'>
                        标签里属性:
                                action属性:提交的路径
                                method属性:请求的方式,提交方式get和post,默认get
                                        get方式和post方式的区别(面试题):
                                                get:数据会显示到地址栏中,get方式提交的有大小限制
                                                post:数据不会显示到地址栏中,相对安全,提交没有大小限制
                </form>
                表单元素:
                        <input type='text'> 文本框
                                常用属性:
                                        *name:表单元素的名称,必须有name属性,然后后台才可以接收数据
                                        *value:文本框的默认值
                                        size:文本框的长度
                                        maxlength:文本框输入的最大长度
                                        readonly:只读文本框
                        <input type='password'> 密码框
                                同文本框属性
                        <input type='radio'> 单选按钮
                                常用属性:
                                        *name:表单元素的名称,必须有name属性,然后后台才可以接收数据
                                        *value:单选按钮的默认值
                                        checked:单选按钮默认被选中
                        <input type='checkbox'> 复选按钮,复选框
                                同一组选择属性必须有name属性
                        <input type='button'> 普通按钮.没有任何功能按钮
                        <input type='submit'> 提交按钮
                        <input type='reset'> 重置按钮
                        <input type='file'>        文件上传的表单项
                        <input type='hidden'> 隐藏字段        
               
                        <select> 下拉列表
                                里面是<option></option>
                                默认被选中时selected
                        <textarea> 文本域

Day-02 CSS
        框架标签:
                <frameset></frameset>与body标签冲突,有frameset就没有body
                属性:
                        rows 横切
                        cols 纵切
                        使用<frame>标签,frame代表每个切割部分
        
        特殊字符标签:
                空格:
                < : <
                > : >
               
        *常用标签:<div> <span> <ul> <a> <i>:icon图标
                        
        HTML里面的块标签:
                <div>   :默认一个div独占一行
                <span>        :默认同一行
        *块级元素和行内元素
                块级元素:<div> 独占一行,可以修改高度和宽度
                行内元素:<span><i><u>..不独占一行,不可以修改高度和宽度
        *table和div 的比较:
                div更加灵活并且解析加载速度快
               
        CSS:层叠样式表,用于美化html
                基本语法:选择器,一条或多条声明
                        选择器{属性:属性值 属性:属性值}
        
        *CSS引入方式:
                1.行内样式:直接在html的元素上使用style的属性
                        <h1 style="color=red ; font.size=40px;"></h1>
                        只有某个标签自己使用
                2.页面内部样式:在html的<head>标签里使用标注css样式
                        h1{color=red ; font.size=40px;}
                        同一个html中多个标签共用这个样式
                3.外部样式:单独定义一个.css文件,在html中引入该文件
                        多个html中使用相同的样式
                        h1{color=red ; font.size=40px;}
        
        CSS的选择器:
                元素选择器:比较常用,直接使用标签
                        h1{color=red ; font.size=40px;}
                ID选择器:
                        #ID号{属性:属性值;}
                类选择器:
                        一次选择多个同一类的
                        .divclass-任意定义的{}
                        需要使用css的元素中,class="divclass";
               
                *选择器的优先级:ID选择器>类选择器>标签选择器
               
        *CSS的浮动
                使用float属性完成div的浮动
                float的属性取值:
                        left
                        right
                        none
                清除浮动clear属性
                        .clear{
                                clear:both;
                        }
        总结:为什么要使用浮动?
                        为了让某些标签(块级元素 div Li)横着显示
                如何使用浮动? float:left
                如何清除浮动?
                        浮动完成后清除浮动
                        一种:clear:both
                        另一种:给浮动元素的父元素添加一个样式 clearfix
        css中的继承问题
                在css中宽度可以继承,高度不可以继承
                浮动后的div和HTML没有关系,不能继承html的高度
                浮动后的元素不会继承宽度的
        
        注意:css中高度和宽度没有默认值.需要加上.px.        
                让div居中 margin:0 auto;
                calc(70% - 2px)可以完成百分百和像素相减,减号两边有空格
               
        子孙元素选择器(会找后代所有的)
                div span 查找的是所有的div中所有的span元素
        子元素选择器(只会找儿子辈)
                Div> span找这个div中第一层的span元素
        属性选择器
                input [type="text"]{
                        backgrond-color:red ;
                }
        
        CSS的样式
                背景background
                文本         
                字体 font
               
        边距               
                CSS内边距(盒子内的泡沫值)
                        padding
                        
                边框
                        border
                        
                外边距{盒子间的距离}
                        margin
               
        CSS中的灵位
                position
                        relative:相对定位
                        absolute:绝对定位
                                使用另外两个属性:left top
               
        总结:盒模型
                        外边距:盒子与盒子的距离 margin
                        内边距:padding
                        宽度计算方式: padding -left +padding-right+border-left+border-right+content
                定位
                        position
                                relative:相对定位
                                absolute:绝对定位,相对于body的
                                使用的时候记住:子绝父相
               
                                fixed:制作广告的时候使用
               
                伪类
                        link
                        visited
                        hover
                        active
                        顺序不能乱,href属性中必须有值
Day-03 JavaScript
        JavaScript:在浏览器端运行的脚本语言
                组成:ECMAScript:js的基本语法
                         BOM:浏览器数据模型
                         DOM:文档数据模型
                用途:使页面更加丰富,使页面动起来
        
        JS的基本语法:
                1.区分大小写
                2.弱变量类型的语言(与java语言不同)
                        定义所有变量都是var,根据后面的数据来定型
                                var i=3;
                                var s="abc";
                3.注释和java相同
                4.变量命名和java相同
                5数据类型
                        原始类型:五类
                                undefinded:未定义
                                boolean:布尔
                                number:数字类型
                                string:字符或字符串
                                null:空
                        引用类型:
                                对象类型:对象类型默认值为null.
                6.运算符:与java基本一致
                        有一个不同=== 全等于.数据类型和值一致才为true
                7.语句:基本与java一致
                总结:
                        定义变量: var 变量名=值;
                        变量名:局部变量(定义在方法内部的变量)我们以_开头
                        给变量赋予默认的值
                                如果是基本类型 var num= undefinded
                                如果是引用类型 var person= null;
                        在控制台打印变量 console.log(变量名);
                        定义对象 var person ={
                                                                        name:'张三',
                                                                        age:14,
                                                                        gender:"女"
                                                                }
                        定义方法(函数)  function 方法名(){}-无参
                                                        function 方法名(name,id){}-有参
                                                        function ()        {}         匿名方法,当作为方法的实际参数时使用
                        方法的调用        方法名();
                        在控制台打印变量 console.log(变量名);
                                在方法内,alert("弹出内容");
        JavaScript的通常开发步骤:
                JS通常都由一个事件触发.
                触发一个函数,定义一个函数
                获得操作对象的控制权
                修改要操作的对象的属性或值
               
                常用事件:onclick,ondblclick,onmouseover,onmouseout-(onmouseenter onmouseleave),onload,
                onload 在html加载完所有标签后,
                (placeholder 提示语)
        JavaScript的引入方式:
                一种:页面内直接编写JS代码,使用script标签
                二中:将JS的代码写入一个JS的文件:<script src="地址" />
               
        html的window对象
                setInterval("JS代码",毫秒值);每隔多少毫米执行一次表达式
                        setInterval("chang()",5000);
                        开发中使用匿名对象:setInterval(function load(){ console.log(1},1000);
                setTimeout():隔多少毫米执行一个该表达式
                        同上
        
        CSS的显示和隐藏
                1.display:隐藏后不占位
                        block 显示
                        none  隐藏
                2.visbility:隐藏后占位
                        visible:显示
                        hidden:隐藏
               
        window的方法
                alert()
                setInterval()
                setTimeout()
                clearInterval()
                clearTimeout()
                confirm() --弹出确认窗口
                prompt() --可输入的对话框
                open() --打开一个新的窗口

Day-04
JS的输出
        document.getElementById('').innerHTML="HTML的代码"-覆盖之前的东西
        document.write("")-重写整个页面,开发中不建议使用
JS的事件
        onfocus  :获得焦点
        onblur         :失去焦点
        onsubmit :提交的时候
        
        onchange :下拉列表改变事件
        键盘事件
                onkeydonwn
                onkeyup
                onkeypress
        鼠标操作事件
                onmousemove
                onmouseout
                onmouseover
                onmousedown
                onmouseup
               
表格各行换色
        
DOM对象
        DOM:文档对象模型
        将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子
        DOM的使用
                知道document,element,attriibute中的属性和方法
               
        常用的操作:
                获得元素
                        document.getElementById()
                        document.getElementsByName()
                        document.getElementsByTagName()
                创建元素
                        document.createElement()
                        document.createTextNode()
                添加节点
                        element.appendChild()
                        element.insertBefore()
                删除节点
                        element.removeChild()

day-05
JQuery(重点)
        第一学CSS
        第二个学Jquery: 多表关联 xml读取
        
        JQuery是一个JS的框架(JS的类库)--工具类.
        JS常用的框架
                JQuery,ExtJS
        
        JS和JQ对象的转换
                JS-->JQ d1-->$(d1)
                JQ-->JS d2-->$(d2)[0]
        
        JQ的效果操作
                show();
                        使用一;JQ对象.show();
                        使用二:JQ对象.show("slow");
                        使用三:JQ对象.show("毫秒值");
                        使用三:JQ对象.show("毫秒值",function (){});
                hide():如show()
               
                slideDown slideUp,滑动 如show()
                fadeIn() fadeOut(),淡入淡出如show()
        
        JQ的选择器
                基本选择器
                        ID选择器
                                用法:$("#id")
                        类选择器
                                用法:$(".类名")
                        元素选择器
                                用法:$("元素名称")
                        通配符选择器
                                用法:$("*")
                        并列选择器
                                用法:$("选择器,选择器,选择器...")
               
                层级选择器
                        后代选择器
                                用法:$("div span")
                        子元素选择器
                                用法:$("div >span")
                        下一个元素:+ --查找同辈下一个元素        
                        兄弟元素:~ --查找同辈后面所有的元素
                总结:JQ对象实际上是DOM数组,我们操作JQ对象,实际上就是操作里面每一个元素
                        只有被$符包裹起来的才是JQ对象
                        JQ与DOM对象的转换
                                jQuery=>DOM : $("div")[0]
                                DOM=>jQuery: $(DOM对象)
               
                基本过滤选择器
                        :first 查找第一个
                        :last 查找最后一个
                        :odd 查找序号为奇数的元素
                        :even 查找序号为偶数的元素
                        :eq() * 等于
                        :contains() 包含所有内容
        
                属性选择器
                        [属性名称='属性名']
                        
                表单选择器
                        checked
                        
        JQ对属性的操作方法
                attr();
                        使用方法一:$("").attr("src")
                        使用方法二:$("").attr("src"."test.jpg")
                        使用方法一:$("").attr("src":"test.jpg","width":"100")               
                removeAtrr
               
                prop();
                        使用方法一:$("").prop("src")
                        使用方法二:$("").prop("src"."test.jpg")
                        使用方法一:$("").prop("src":"test.jpg","width":"100
                总结:
                        attr:自定义属性
                        prop:非自定义属性
                        
        JQ的操作DOM
                append : A.append(B)在原有基础上添加
                appendTo:B.appendTo(A)
               
                $().each.(function(index,element)){
               
                });

day-06
JQ常用的事件
        事件切换:
                toggle(); --单击事件的切换
                hover(); --进行事件的切换
        
        JQ的查找
                find("选择器") :查找
                parent()
                children()
        


               

2 个回复

倒序浏览
666{:8_469:}
回复 使用道具 举报
继续努力哦
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马