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

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 嗨。 初级黑马   /  2018-1-17 15:53  /  833 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

【石家庄校区】总结第三波


什么是HTML
        怎么学好HTML: 学会预定好的标签
        HTML:Hyper Text MArkup Language ----超文本标记语言。
                标记语言:指的是通过一组标签的形式描述事物的一门语言。
                超文本:比普通的文本更强大。
        HTLM:的作用
                HTML是用来制作页面(静态页面)。
        HTML的使用
                HTML文件的创建
                一个HTML文件,扩展名是.html或者.htm结尾
        HTML的结构标签


                <html></html>---跟标签:
                        <head></head>---头标签  
                                <结构标签<title></title>
                        <body></body>---体标签
                                <font></font>--字体标签
                               
                               
                                        font的属性
                                                color        颜色
                                                        英文单词设置:black,ren,green,blue..
                                                        使用16进制数设置:#FFFFFF
                                                size        字体大小 1~7
                                                face        字体
        HTML的排版标签
                标题标签:h标签<h1>...<h6>
                段落标签:p
                粗体标签:b
                斜体标签:i
                下划线        :u
                居中显示:center
                换行                br               
                分割线                hr       
                原声标签        pre
        HTML的图片标签<img>
                属性
                        图片的来源:src
                        图片的宽度:width
                        图片的高度:height
                        找不到图片显示的内容: alt
                图片的引入到的路径问题
                        路径:相对路径       
                                        如果引入的图片和html文件在同一级路径,
                                                直接写文件名或者./文件名
                                        如果在上一级就要写../文件名
        HTML的列表表签
                有序列表
                        <ol>
                                <li></li>
                        </ol>
                                有        type属性
                                        strat属性 表示从哪里开始,只针对数字有效
                无序列表
                        <ul>
                                <li></li>
                        </ul>
                                有type属性
                                display:
                                        inline:显示在一行
        HTML的超链接标签<a>
                属性:
                        href:连接的路径
                        target:打开的方式
                                _sekf:在自身打开
                                _blank:在新窗口打开
                                _parent:多个窗口占用整个界面
               
        HTML的表格标签
                <table>-------表格
                        <tr>------行   
                                <td>--列
                                </td>
                        </tr>
                </table>
                        属性:
                                Width : 表格宽度
                                Height:表格高度
                                Border:表格边框
                                Align :表格的位置
                                bgcolor:背景颜色
                                backgroud:背景图片
                <td>的属性:
                        colspan:列合并数
                        rowpan:行合并数
        HTML的表单标签<form>
                属性:
                        action:提交路径,默认提交当前页面
                        method:提交方式,get和post
                                区别:
                                        get                数据会显示到地址栏  提交有大小限制
                                        post        数据不会显示到地址栏
                表单元素:
                        <input type="下面">
                                test:                文本输入框
                                password:        密码输入框
                                        属性:
                                                name 表单元素的名称,必须有name属性,然后后台才能接收
                                                value:文本框默认值
                                                size:文本框的显示长度
                                                maxlength:文本框输入的最大长度
                                                readonly:只读文本
                                                radio:                单选按钮       
                                                checkbox:        复选按钮
                                                        属性:       
                                                                name:表单元素的名称.必须有name属性,然后后台才可以接收数据
                                                                value:单选按钮默认值
                                                                checked:单选按钮默认被选中
                                                               
                                                button:        普通按钮,没有任何功能
                                                submit:        提交按钮
                                                reset:                重置按钮
                                                file:                文件上传的表单项
                                                hidden:        隐藏字段
                                                image:                图片按钮
                                        HTML5扩展表单标签:
                                                email:                检测是否为邮箱模式
                                                date:                小日历
                                                number:        检测是否为数字
                                                color:                输入颜色
                        <select>:                下拉列表
                                属性:
                                        option:添加选项
                                        value: 选项的值
                                        selected:默认选中
                                       
                        <textarea>:                文本域
                                属性:
                                        cols:列数
                                        rows:行数
        HTML框架标签<frameset>与body标签冲突 二选一
                属性:       
                        rows:横切
                        clos:竖切
                使用<frame>标签,frame代表切分的每个部分
               
        特殊字符的标签
                空格 &n


DIV
CSS:多层样式表

        【HTML的块标签】
                <div></div>                :默认一个div独占一行.
                <span></span>        :默认在同一行.
        HTML相当于网站的骨架!CSS对股价进行美化!
        【CSS的基本语法】
                CSS的基本语法通常包含两个部分:一个是选择器,一个声明.
                选择器{属性:属性值;属性:属性值...}

        【CSS的引入的方式】
                行内样式:直接在HTML的元素上使用style属性设置CSS.
                        <h1 style="color:red;font-size:200px ;">标题</h1>

                页面内样式:在HTML的<head>标签中使用<style>标签设置CSS.
                        <style>
                                h1{
                                        color:blue;  
                                        font-size: 40px;
                                }
                        </style>

                外部样式:单独定一个.css的文件.在HTML中引入该CSS文件.  
                        <link href="../../css/demo1.css" rel="stylesheet" type="text/css" />

                常用属性:
                        color:颜色
                        border:边框
                                solid 实线
                        float:浮动
                                left:向左浮动
                                right:向右浮动
                                none:
                        clear:清除浮动
                       
                        margin: 0 auto; 设置边距    auto 系统设置
                        line-height: 60px;        行高默认字体有多高就是多高,默认从左上角开始书写,如果把行高设置成和行高一样的话,字体就从行高中间开始写
                        盒子模型:
                                padding:内边距---》设置内容距离自己边框的边距
                                margin:外边距---》用来设定该元素举例其他元素的距离
        【CSS的定位】
                position属性设置定位:
                        relative:相对定位
                        absolute:绝对定位
                        使用另外两个属性:left,top
                        如何让子控件居中
                                相对父空间50% margin减去子控件大小的一半
                cellspacing: 表格上下间距
                               
        【CSS的选择器】
                元素选择器:
                        div{
                                border:1px solid blue;
                                width:40px;
                                height:45px;
                        }
                ID选择器: 给标签添加id属性 id不重复,js经常用
                        #d1{
                                border:2px solid red;
                        }
                类选择器:给表签添加class属性 可以重复,css经常用
                        .divClass{
                                border:2px solid yellow;
                        }
                属性选择器:
                        input[type="text"]{各种属性}
                后代选择器:
                        div span查找的是所有div中的所有的span
                子元素选择器
                        div span 只能查找第一层的span
                并列选择器
                        input[type="text"],input[type="password"]{各种属性}
        【伪类】
                text-decoration:超链接的样式
                link        :未访问
                visited        :访问过之后
                hover        :鼠标放在上面
                active        :鼠标点击但不放开的时候
       
        visibility和display的区别
                visibility:        前者消失了,但是位置还占着
                display:        后者也消失了,位置也没有占着了
JavaScript:
        JS的用途:
                使页面更加丰富,使页面动起来
        JS基本语法
                区分大小写
                var+名+内容
        数据类型:
                原始类型:
                        undefind:        未定义类型
                        boolean:        布尔类型
                        number:        数字类型
                        string:        字符或字符串
                        null:                空
                引用类型:
                        对象类型,对象类型的默认值是null
        JS运算符
                与JAVA基本一样
                === 全等于,判断类型和值
        JS的通常开发的步骤
                JS通常都由一个事件触发
                触发一个函数,定义一个函数
                获得操作对象的控制权t
                修改要操作的对象的属性或值
               
                定义函数:
                        function函数名称(){
                        //函数体
                        }
                        window.onioad=function(){
                       
                        }
               
                       
        JS的引入方式
                两种
                1.页面内直接编写JS代码,JS代码需要使用<script></script>
                2.创建一个.js的文件使用<script src="ad.js"></script>
        常用方法:
                document:        获得操作对象的控制权
                alert;                弹窗
                match (“正则表达式”):校验正则表达式
                zhengze.text():                校验正则表达式
                document.getElementById("username").value:获取值
                document.getElementById("username").innerHTML=xxx:插入数据
       

BOM对象
        Window
                alert():弹出对话框
                setInterval():每隔多少毫秒去执行某个表达式
                setTimeout():隔多久执行一次表达式
                clearInterval():清除定时
                cleartimeout():        清除定时
                confirm():                弹出一个确认窗口
                prompt():                弹出一个可输入的对话框
                open():                打开一个新的窗口
        Navigator
        Screen
        History
        【JS的输出】
                document.getElementById(“”).innerHTML="HTML的代码";
                document.write("");
        【JS的事件】
                onfocus:        获得焦点
                onblur:                失去焦点
                onsubmit:        提交的时候
                onclick:        单击
                ondblclick:双击
                onsubmit:提交按钮被点击
                        根据checkFrom返回值来判断是否提交
                onmouserover
                onmouseout
                onload:        某个页面或图像完全加载后触发
                onchange:下拉列表改变事件
                键盘事件
                onkeydown
                onkeyup
                onkeypress
                鼠标操作事件
                onmousemover
                onmouseout
                onmouseover
        【JS中的DOM对象】
                DOM:Document Object Model:文档对象模型
                将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子
                DOM的使用
                        直到document,element,attribute中的属性和方法
                        Document的常用方法
                                获得元素:
                                        document.getElementById():                通过ID获取元素
                                        document.getElementsByName():        通过name属性获得元素
                                        document.getElementsByTagName():        通过标签获得元素
                                创建元素:
                                        document.createElement():创建元素
                                        document.createTextNode(): 创建文本
                                添加节点:
                                        element.appendChild():在最后添加一个节点
                                        element.insertBefore():在某个元素之前插入
                                删除节点
                                        element.removeChild():删除元素
        【JS Functions】
                解码:
                        decodeURL();
                        decodeYRIComponent();
                编码:
                        encodeURL();
                        encodeURIComponent();
                eval函数:
                        将一段内容当成是JS的代码执行
                                var sss="alert(aaaa)"
                parseFloat()解析一个字符串返回一个浮点数
                parseInt() 解析一个字符串并返回一个整数





0 个回复

您需要登录后才可以回帖 登录 | 加入黑马