时间戳

首页 > 技术文章 > 前端技术

前端技术

cathyg 2019-12-06 17:32 原文

前端语言
html--》将页面展示出来 比做 赤裸的人
css --> 修饰html标签 让html更好看 css 对html 进行修饰
js --》 能够让页面动起来 js

 

html标签

<!DOCTYPE html>
<html lang="en">
<!--头部-->
<head>
    <!--字符集-->
    <!--自闭合标签-->
    <meta charset="UTF-8">
    <!-- 浏览器tab上的标题-->
    <!--主动闭合标签 -->
    <title>摩羯座</title>

</head>

<!--head中的内容是不被展示的，是规则也是规范-->

<!-- 身体-->
<body>
<!--标题标签-->
<!--    <h1>h1</h1>-->
<!--    <h2>h2</h2>-->
<!--    <h3>h3</h3>-->
<!--    <h4>h4</h4>-->
<!--    <h5>h5</h5>-->
<!--    <h6>h6</h6>-->
<!--    div是块级标签，无论自己有多大，都占满屏幕，伪白板标签-->
<!--    <div>这是div标签</div>-->
<!--    行内标签又叫做内联标签，自己有多大就占多大，也叫做白板标签-->
<!--    <span>这是span标签</span>-->

<!--    属性：写在标签内部的<>之间，标签名之后，属性与属性之间用空格分隔-->
<!--    <input type="text" placeholder="请输入用户名">-->
<!--    value属性是input的默认值-->
<!--    <input type="text" value="请输入用户名">-->
<!--    <input type="password">-->

<!--    跟后台交互-->
<!--        1.form表单的方式-->
<!--        2.异步提交 ajax-->
<!--    <form method="get" action="http://www.baidu.com">-->
<!--        <input type="button" value="button-登录" onclick="alert(234)">-->
<!--        <input type="submit" value="submib-注册">-->
<!--        radio单选-->
<!--        checkbox多选-->
<!--        默认选择 checked=checked-->
<!--        <span>男</span><input type="radio" name="sex">-->
<!--        <span>女</span><input type="radio" name="sex" checked="checked">-->
<!--        <span>篮球</span><input type="checkbox" checked="checked">-->
<!--        <span>足球</span><input type="checkbox" checked="checked">-->
<!--        <input type="file">-->
<!--        <input type="text" name="username" value="gonghaiting">-->
<!--        <input type="password" name="passwd"value="123456">-->
<!--        <input type="submit" value="submit-登录">-->
<!--        重置必须要和form连用才起作业-->
<!--        <input type="reset">-->
<!--    </form>-->

<!--<span>用户名</span><input type="text">-->
<!--<label for="user">用户名</label><input type="text" id="user">-->
<!--1:乒乓球 2.篮球 3.足球-->
<!--{xxx:1}-->

<!--<select name="xxxxx">-->
<!--    <option value="2">篮球</option>-->
<!--    <option value="3">足球</option>-->
<!--    <option selected="selected" value="1">乒乓球</option>-->
<!--</select>-->

<!--target="_blank" 新打开一个浏览器的tab-->
<!--<a href="http://www.baidu.com" target="_blank">跳转到百度</a>-->

<textarea name="">多行文本</textarea>
<textarea name="多行" id="2" cols="30" rows="10"></textarea>

</body>
</html>

css样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    css样式应用，有3处-->
<!--    1.标签内部通过style属性，来给标签设置css样式-->
<!--    2.head中增加style标签，在style标签内部，通过选择器为目标html配置css样式-->
<!--    3.通过编写样式表文件 xxx.css 用link引入到当前html中-->
    <style>
        #i2{
            background-color: green;
            height: 100px;
            width: 100%;
        }
        .wh {
            width: 100px;
            height: 100px;
        }
         .bc-1{
            background-color: red;
        }
        .dis-inline{
            /*由块级标签，变成行内标签*/
            display: inline;
        }
        .dis-block{
            /*行内转块*/
            display:block;
        }
        .dis-block-inline{
            /*既是块也是行内*/
            display: inline-block;
        }
        .c2{
            background-color: #0d8ddb;
            width: 100%;
            height: 48px;
            /*外边距*/
            margin-top: 0;
            /*内边距*/
            padding-top: 0;
        }
<!--    </style>-->
    <link rel="stylesheet" href="demo.css">
</head>
<body>
<!--    标签中的style属性是css的第一优先级-->
<!--    以标签为基础，由内到外，由近到远-->
<!--    <div id="i1" style="background-color: red;height: 100px;width: 100px">背景色</div>-->
<!--    <div id="i2">背景色</div>-->
<!--    <div id="i3">引入文件的css</div>-->
<!--    display-->
<!--    <div class="dis-inline bc-1">块div 变行内</div>-->

<!--    <span class="dis-block bc-1">行内转块</span>-->
<!--    行内标签必须自己有内容，无法应用宽、高、外边距、内边距-->
<!--    <span style="height: 100px;width: 100px;background-color: #0d8ddb"></span>-->
<!--    <span class="dis-block-inline wh bc-1">既是块又是行内</span>-->

    <div class="c1">
        <div class="c2"></div>
    </div>
</body>
</html>

选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    选择器-->
    <style>
        /*#i1{*/
        /*    background-color: green;*/
        /*    width: 100px;*/
        /*    height: 100px;*/
        /*}*/
        .wh{
            width: 100px;
            height: 100px;
        }
        .bc-1{
            background-color: red;
        }
        .bc-2{
            background-color: blue;
        }
        /*标签选择器*/
        div{
            background-color: green;
        }
        /*层级选择器*/
        div span{
            background-color: red;
        }
        /*#i1 span{*/

        /*}*/
        /*.c1 span{*/
        /*    */
        /*}*/
        div[dsx="nb"]{
            background-color: red;
        }
    </style>
</head>
<body>
<!--id选择器-->
<!--    <div id="i1">ID选择器</div>-->
<!--clss选择器-->
<!--    <div class="cl">class选择器</div>-->
<!--    不同颜色 相同宽高的正方形，class属性允许有多个通过空格分隔即可-->
<!--    <div class="wh bc-1"></div>-->
<!--    <div class="wh bc-2"></div>-->

<!--    所有的div都是绿色-->
<!--<div class="wh">111</div>-->

<!--    <div class="wh">-->
<!--        <span>fsdf</span>-->
<!--    </div>-->

    <div dsx="nb" class="wh"></div>
</body>
</html>

js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    导入script的位置可以在head中，也可以在body中,放在上面由于从上到下执行，
所以会卡在js这里，影响用户体验-->

</head>
<body>
    <!-- onclick点击事件-->
    <input type="text" placeholder="请输入用户名" id="username">
    <input type="text" placeholder="请输入密码" id="passwd">
    <input type="button" onclick="login()" value="登录">
    <input type="button" onclick="test()" value="测试">
    <input type="button" value="匿名函数测试" id="i1">
    <input type="button" value="作用域" onclick="test_var()">
<!--<script></script>  写js标签>-->
<!--    <script src="demo.js"></script>-->
    <script>
        function login(){
            var username = 'dsx';
            var password = '123456';
            var user = document.getElementById('username').value;
            var passwd = document.getElementById('passwd').value;
            console.log('username-->'+user);
            console.log('passwd-->'+passwd);
            //if a==b:
            //    xxxx
            if (username==user && password==passwd){
                console.log('登录成功')
            }else if(username !=user){
                console.log('用户名有错误！')
            }else if(password!=passwd){
                console.log('密码错误！')
            } else{
                alert('用户名和密码错误')
            }
            /*
            *1、获取用户名和密码value
            *2、if进行判断
            *
            *
             */
        }

        function test(){
            //var l=['奔驰','宝马','奥迪','凯迪拉克']; //声明数组
            // var l1= new Array(1,2,3,4); //第二种声明方式

            //for (var i in l){
            //   console.log(l[i])
            //}
            //for (var i=0;i<l.length;i++){
            //    console.log(l[i])
            //}

            //var m ={"name":"dsx","age":18};
            //for (var k in m ){
            //     console.log (k)
            //     console.log(m[k])
            //}
            //下面这种方法不行
            //for (var i=0;i<m.length;i++){
            //    console.log(m[i])
            //}

            // var s ='测试循环字符串';
            // for(var i in s){
            //     console.log(s[i])
            // }
            // for (var i=0;i<s.length;i++){
            //    console.log(s[i])
            // }

            // var s = document.getElementById('username').value;
            // switch(s){
            //     case 'dsx':
            //         console.log('这是大师兄');
            //         break;
            //     case 'nhy':
            //         console.log('这是牛牛');
            //         break;
            //     default:
            //         console.log('谁也不是')
            // }

            // while(xx==1){
            //     break;
            // }

        }

        // 匿名函数
        // element = document.getElementById('i1');
        // element.onclick = function () {
        //     console.log('测试匿名函数')
        // }

        // function test_var(){
        //     var name = 'dsx';
        //     console.log(name)
        // }
        // name = 'nhy';
        // age = 18;
        // function test_var1(){
        //     console.log(age)
        //     console.log(name)
        // }



    </script>
</body>
</html>

 

 

DOM --> 文档对象模型
目的：
操作页面上的任意的一个标签

如何定位标签？
getElementById
ElementsByClass
当标签没有id和class时，要用到间接定位
1、分析html 目标定位标签和当前标签的关系，缕清楚寻找路径
tmp.parentElement; // 父节点标签元素
tmp.children; //所有子标签
tmp.firstElementChild; //第一个子标签元素
tmp.lastElementChild; // 最后一个子标签元素
tmp.nextElementSibling; //下一个兄弟标签元素
tmp.previousElementSibling; //上一个兄弟标签元素

定位到后：
value
修改时，只要能够查看到就能修改
input
select

element.value = 'xx'


innerText --> 插入的永远是字符串

innerHtml --> 如果有符合标签规则的字符串，会直接变成标签。


操作属性
setAttribute(key,value): 设置属性，在标签中添加属性或自定义属性
removeAttribute(key): 删除属性，在标签中删除指定属性
操作样式表 操作的是标签的class属性 前提条件是有这个样式表
className = 'inner tmp1'
classList.add()
classList.remove()
操作style 实际操作的是标签的style属性
如果样式中含有 - 需要将-后面的第一个字母大写
element.style.xxxx = ''
创建标签
对象创建
obj=createElement('div')
obj.setAttribute()
添加到目标元素中，实际是添加子元素
先定位父元素
父元素.appendChild()

字符创建
str = '<input>'
insertAdjacentHTML(where,str)
insertAdjacentHTML('beforeBegin',str)
insertAdjacentHTML(beforeBegin,str) 错误的
beforeBegin: 插入到获取到标签的前面
afterBegin: 插入到获取到标签的子标签的前面
beforeEnd: 插入到获取到标签的子标签的后面
afterEnd: 插入到获取到标签的后面

推荐阅读