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

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 李志旭 初级黑马   /  2019-6-1 14:50  /  1241 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

HTML:超文本标记语言
        超文本:比普通文本更强大
        标记语言:由标签组成的
文本标签:
        文字标签:<font>
        属性:color-颜色   size-大小(1~7)   face-字体

        标题标签:<h1> ~ <h6>
        加粗标签:<b>
        斜体标签:<i>
        下划线标签:<u>
        居中标签:<center>

图片标签:<img>
属性:src-图片路径   width-宽度   height-高度  alt-图片找不到显示内容

列表标签:
        有序列表:<ol>
        属性:type-(数字、字母、罗马字符)    start-起始编号
        列表项:<li>

        无序列表:<ul>
        属性:type-(实心圆、空心圆、实心框)

超链接标签:<a>
属性:href-跳转路径    target-打开方式(_self    _blank)


块标签:
        <span>:元素在一行显示
        <div>:元素独占一行

表格标签:<table>
属性:border-边框   width-宽度   height-高度   align-显示位置(left居左  center居中   right居右)  bgcolor-背景颜色   background-背景图片
行标签:<tr>
列标签:<td>
属性:
rowspan-合并行
colspan-和并列

其他标签:
        换行标签:<br/>
        水平线标签:<hr/>
        属性:color-颜色   width-宽度  size-高度
        空格:&nbsp;
        <:&lt;
        >:&gt;

表单标签:<form>
属性:action-提交路径   method-提交方式(get   post)
get:提交的数据会显示在地址栏中。不太安全。长度有大小限制。提交的数据封装在请求行中。
post:提交的数据不会显示在地址栏中。较为安全。长度没有大小限制。提交的数据封装在请求体中。

表单项:<input>   <select>   <textarea>
        文本框:<input type="text">
        密码框:<input type="password">
        邮箱框:<input type="email">
        数字框:<input type="number">
        颜色框:<input type="color">
        文件上传框:<input type="file">
        图片提交按钮:<input type="image">
        隐藏域:<input type="hidden">
        单选框:<input type="radio">
        复选框:<input type="checkbox">
        提交按钮:<input type="submit">
        重置按钮:<input type="reset">
        日期框:<input type="date">
        普通按钮:<input type="button">

        下拉列表:<select>
        下拉列表项:<option>

        文本域:<textarea>
        行数:rows
        列数:cols

        注意事项:
                1.如果表单项想被提交,必须要嵌套在form标签中
                2.如果表单项想被提交,必须要有name属性
                3.如果是单选或复选,必须要有相同的name属性
                4.如果是单选或复选有默认值,使用checked属性
                5.如果是下拉列表有默认值,使用selected属性


CSS:层叠样式表。就是给HTML美化用的

CSS和HTML结合方式:
        1:行内样式:<标签 style="样式设置">
        2:页面内样式:在head标签中,定义一个<style></style>代码块
        3:外部文件方式:在head标签中,<link rel="stylesheet" href="css文件路径"/>

CSS选择器:
        基础选择器:
                id选择器:
                        #id属性值{
                                样式控制
                                属性名:属性值;
                                ...
                        }
                类选择器:
                        .类名{
                                样式控制
                                属性名:属性值;
                                ...
                        }
                元素选择器:
                        标签名{
                                样式控制
                                属性名:属性值;
                                ...
                        }

        扩展选择器:
                子元素选择器:
                        元素1 元素2{
                                样式控制
                                属性名:属性值;
                                ...
                        }
                父元素选择器:
                        元素1 > 元素2{
                                样式控制
                                属性名:属性值;
                                ...
                        }
                并集选择器:
                        元素1,元素2,...{
                                样式控制
                                属性名:属性值;
                                ...
                        }
                属性选择器:
                        标签名[属性名="属性值"]{
                                样式控制
                                属性名:属性值;
                                ...
                        }
                伪类选择器:
                        初始化状态:
                                元素:link{
                                        样式控制
                                        属性名:属性值;
                                        ...
                                }

                        鼠标悬浮状态:
                                元素:hover{
                                        样式控制
                                        属性名:属性值;
                                        ...
                                }

                        被使用状态:
                                元素:active{
                                        样式控制
                                        属性名:属性值;
                                        ...
                                }

                        使用后状态:
                                元素:visited{
                                        样式控制
                                        属性名:属性值;
                                        ...
                                }
JavaScript:动态效果
        和HTML结合方式:
                第一种:页面内样式
                第二种:引入外部文件
        JS核心组成部分:
                ECMAScript    BOM     DOM

ECMAScript:
        数据类型:
                原始数据类型:
                        number:数字类型
                        string:字符串
                        boolean:布尔值
                        null:空对象
                        undefined:未定义
                引用数据类型:对象
        基本对象:
                Function 方法对象
                Array
                Math
                Date
        定义变量/对象格式:var 变量/对象名 = 变量值/对象;

BOM:浏览器对象模型
        浏览器对象:navigate
        屏幕对象:screen
        窗口对象:window
                方法:
                        alert()
                        confirm()
                        propmt()

                        open()
                        close()

                        setTimeOut(参数1,参数2)   参数1:js代码  参数2:毫秒值
                        clearTimeOut()

                        setInterval(参数1,参数2)   参数1:js代码  参数2:毫秒值
                        clearInterval()
        地址栏对象:location
                方法:
                        刷新页面:reload()
                属性:
                        跳转url地址:href   
        历史记录对象:history
                方法:
                        forward()   前进
                        back()      后退
                        go()        前进或后退
                属性:
                        获取历史记录页面的个数:length

DOM:文档对象模型
        Document:
                获取方法:
                        通过id来获取指定元素对象:getElementById()
                        通过class属性来获取元素对象:getElementsByClassName()
                        通过name属性来获取元素对象:getElementsByName()
                        通过元素名来获取元素对象:getElementsByTagName()
                创建方法:
                        创建元素:createElement()
                        创建属性:createAttribute()
                        创建文本:createTextNode()
        Element:
                设置属性:setAttribute(属性名,属性值);
                删除属性:removeAttribute(属性名);

        Node:
                添加元素:appendChild()
                删除元素:removeChild()
                获取父级元素对象:parentNode;

事件:
                1. 点击事件:
                1. onclick:单击事件
                2. ondblclick:双击事件
            2. 焦点事件
                1. onblur:失去焦点。
                    * 一般用于表单验证
                2. onfocus:元素获得焦点。

            3. 加载事件:
                1. onload:一张页面或一幅图像完成加载。

            4. 鼠标事件:
                1. onmousedown        鼠标按钮被按下。
                    * 定义方法时,定义一个形参,接受event对象。
                    * event对象的button属性可以获取鼠标按钮键被点击了。
                2. onmouseup        鼠标按键被松开。
                3. onmousemove        鼠标被移动。
                4. onmouseover        鼠标移到某元素之上。
                5. onmouseout        鼠标从某元素移开。


            5. 键盘事件:
                1. onkeydown        某个键盘按键被按下。
                2. onkeyup                某个键盘按键被松开。
                3. onkeypress        某个键盘按键被按下并松开。

            6. 选择和改变
                1. onchange        文本的内容被改变。
                2. onselect        文本被选中。

            7. 表单事件:
                1. onsubmit        确认按钮被点击。
                    * 可以阻止表单的提交
                        * 方法返回false则表单被阻止提交。
                2. onreset        重置按钮被点击。

0 个回复

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