黑马程序员技术交流社区

标题: 【石家庄校区】 前端总结 [打印本页]

---

作者: 张书成    时间: 2019-6-1 14:50
标题: 【石家庄校区】 前端总结
HTML：超文本标记语言
字体标签：<font>
属性：color-颜色   size-大小(1-7)   face-字体

排版标签：
        标题标签：<h1> ~ <h6>
        段落标签：<p>
        加粗标签：<b>
        斜体标签：<i>
        下划线标签：<u>
        居中标签：<center>

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

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

列表标签：
        有序列表：<ol>
                列表项：<li>
                属性：type-(数字  字母   罗马字符)    start-起始位置
        无序列表：<ul>
                列表项：<li>
                属性：type-(实心圆、空心圆、实心框)

超链接标签：<a>
        属性：href-跳转路径    target-打开方式(_slef当前页面   _blank新窗口)

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

表单标签：
        表单标签：<form>
                属性：action-提交路径    method-提交方式(get post)
                get：提交的数据会显示到url地址栏中。数据不安全，提交的数据在请求行中
                post：提交的数据不会显示到url地址栏中。数据安全，提交的数据在请求体中
        表单项：<input>   <textarea>   <select>
                文本输入框：<input type="text"/>
                密码输入框：<input type="password"/>
                邮箱输入框：<input type="email"/>
                颜色取色框：<input type="color"/>
                文件上传框：<input type="file"/>
                图片框：<input type="image"/>
                提交按钮：<input type="submit"/>
                重置按钮：<input type="reset"/>
                隐藏域：<input type="hidden"/>
                日期框：<input type="date"/>
                单选框：<input type="radio"/>
                复选框：<input type="checkbox"/>
                按钮：<input type="button"/>
                数字框：<input type="number"/>

                文本域：<textarea>
                        属性：rows-行数   cols-列数
               
                下拉框：<select>
                        列表项：<option>

                注意：
                        1.表单项中的数据如果想被提交，必须有name属性
                        2.单选和复选，必须有相同的name属性值
                        3.单选和复选，可以有默认被选中的效果。 通过checked属性
                        4.下拉框，可以有默认被选中的效果。 通过selected属性


CSS:层叠样式表
        和HTML结合的方式：
                第一种：行内样式
                第二种：页面内样式
                第三种：外部样式
        选择器：
                基础选择器：
                        id选择器：
                                #id值{样式控制}
                        类选择器：
                                .类名{样式控制}
                        元素选择器：
                                标签名{样式控制}
                扩展选择器：
                        并集选择器：
                                元素1,元素2,...{样式控制}
                        子元素选择器：
                                父元素 子元素{样式控制}
                        父元素选择器：
                                父元素>子元素{样式控制}
                        属性选择器：
                                标签名[属性名=属性值]{样式控制}

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        重置按钮被点击。

[JavaScript] 纯文本查看 复制代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

<style>

    table{

        border: 1px solid;

        margin: auto;

        width: 500px;

    }



    td,th{

        text-align: center;

        border: 1px solid;

    }

    div{

        text-align: center;

        margin: 50px;

    }



</style>

</head>

<body>

<div>

    <input type="text" id="id" placeholder="请输入编号">

    <input type="text" id="name"  placeholder="请输入姓名">

    <input type="text" id="gender"  placeholder="请输入性别">

    <input type="button" value="添加" id="btn_add">



</div>

<table>

    <caption>学生信息表</caption>

    <tr>

        <th>编号</th>

        <th>姓名</th>

        <th>性别</th>

        <th>操作</th>

    </tr>



    <tr>

        <td>1</td>

        <td>令狐冲</td>

        <td>男</td>

        <td><a href="javascript:void(0);">删除</a></td>

    </tr>



    <tr>

        <td>2</td>

        <td>任我行</td>

        <td>男</td>

        <td><a href="javascript:void(0);">删除</a></td>

    </tr>



    <tr>

        <td>3</td>

        <td>岳不群</td>

        <td>女</td>

        <td><a href="javascript:void(0);" >删除</a></td>

    </tr>



</table>

<script>

    var add = document.getElementById("btn_add");

    add.onclick=function () {

        var id = document.getElementById("id").value;

        var name = document.getElementById("name").value;

        var gender = document.getElementById("gender").value;

        var table = document.getElementsByTagName("table")[0];

        // table.innerHTML += "<tr>\n" +

        //     "        <td>"+id+"</td>\n" +

        //     "        <td>"+name+"</td>\n" +

        //     "        <td>"+gender+"</td>\n" +

        //     "        <td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\" >删除</a></td>\n" +

        //     "    </tr>";

        table.innerHTML+="<tr>\n"+

            "<td>"+"id"+"</td>\n"+

            "<td>"+"name"+"</td>\n"+

            "<td>"+"gender"+"</td>\n"+

            "<td><a href='#' onclick='delTr(this)' ></a>"+"删除"+"</td>\n";

            "</tr>";

    }

    function delTr(obj){

        var table = obj.parentNode.parentNode.parentNode;

        var tr = obj.parentNode.parentNode;



        table.removeChild(tr);

    }

</script>

</body>

</html>

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2