网页设计基础(html,css,js,JQuery)

最新推荐文章于 2024-06-05 10:08:21 发布

菜蜗牛很菜

最新推荐文章于 2024-06-05 10:08:21 发布

阅读量1.8k

点赞数 1

分类专栏：网页设计基础

本文链接：https://blog.csdn.net/weixin_45010894/article/details/102671692

版权

网页设计基础专栏收录该内容

23 篇文章 3 订阅

订阅专栏

HTML

emmet查询
 html,css学习网址
 HTML,css学习网址

Hyper Text Markup Language
超文本标记语言

html文件结构

<!DOCTYPE html>
<html>
   <meta charset="utf-8">
<head>
	<title></title>
</head>
<body>

</body>
</html>

行标签

|行标签|  |
|--|--|
|strong  |加粗  |
|em|斜体  |
|img|图片加载
|a|链接
```markup
<img src="3.jpg" alt="" width="120" height="200">

文字跳转
<a href="http://www.baidu.com" target="_blank">图片</a>
图片跳转
<a href="http://www.baidu.com"><img src="3.jpg" alt="" width="120" height="200"></a>

块标签	独占一行
p	段落
hr	划线
br	换行
h1-h6	标题
div

有序列表ol,type控制排序样式
无序列表ul

<ol  type="a">
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
    <li>有序列表</li>
</ol>

table表格

<table style="border-style: double" border="2" bgcolor="#00ffff" >
	<th colspan="2">标题行</th>
    <tr>
    
        <td>第一行第一列</td>
        <td>第一行第二列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
    </tr>
</table>

5行4列快捷键
table>tr5>td4

css

行内样式

<p style="color: cornflowerblue;font-size: 33px">

行外样式

    <style>
        /*
        css标签内使用的注释
        使用选择器来指定标签
        */
        /* *代表所有标签 */
        *{
            font-size: 77px;
            color: crimson;
        }
        p{
            font-family: Consolas;
        }
		/*空格 后代选择器*/
        div p{
            color: chartreuse;
        }
    </style>

class 可以有多个名用空格分开

<body>


<div class="test"></div>
<p class="test">1</p>
<p class="test uuu">2</p>

</body>

 <style>
    /*类选择器*/
        .test{
            color: blue;
        }

        .uuu{
            color: coral;
        }
        /*条件同时满足*/
          p.test{
            background-color: greenyellow;
        }

    </style>

id选择器

<div id="ooo">oooooooo</div>

 <style>

        /*id选择器*/
        #ooo{
            background-color: darkmagenta;
        }
    </style>

精确度:
id>class>标签

a{
    font-size: 30px;

}
/*不论中间隔几层都是后代*/
/*后代选择器*/
div a{
    font-size:40px;
}

/*子代选择器*/
div>a{
    background-color: chartreuse;
}

/*或者,*/
div,p{
    background-color: black;
}

/*属性选择器*/
input[type="text"]{
    background-color: crimson;
}

清除浮动

  .father{
            border:1px solid red;
            /*父级标签包住浮动层的标签
            浮动都是基于父标签的*/
            overflow: hidden;
        }
        .div1{
            width: 100px;
            height: 100px;
            background-color: coral;
            float: left;
            /**/
            clear: left;
            
        }

js

导入文件

<script src="test.js"></script>

数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组</title>
</head>
<body>
<script>
    //声明数组
    var arr=new Array();
    arr[0]="sfsjf";
    arr[1]=3333;

    console.log(arr);
    //查看数组的长度
    console.log(arr.length);

    var a1=["张三","李四","王五"];
    console.log(a1[1]);

    //遍历数组
    for (var i=0;i<a1.length;i++){
        console.log(a1[i]);
    }

    for (x in a1){
        //x索引下标
        console.log(x);
        //属性元素
        console.log(a1[x]);
    }

    //数组方法
    //数组倒叙
    var aq=a1.reverse();
    console.log(aq);
    //数组拼接
    var s = a1.join(",,,,");
    console.log(s);

    //合并数组
    var a3 = a1.concat(arr);
    console.log(a3);
    //返回最后一个元素并且删除
    var p = a1.pop();
    console.log(p);
    //添加元素到数组的末尾并且返回新的长度
    var l = a1.push("赵六");
    console.log(l);


    //1.
    var b=[4,0,7,9,15,0,7,5,0,3,2];

    var sum=0;
    for (x in b){
        sum+=b[x];
    }
    console.log("和为:"+sum);

    var max=0;
    for (x in b){
        if (b[x]>max){
            max=b[x];
        }
    }
    console.log("最大值为:"+max);

    var add=[];
    for (x in b){
        if (b[x]!=0){
            add.push(b[x]);
        }
    }
    console.log("不为0的数组:"+add);
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组</title>
</head>
<body>
<script>
    //声明数组
    var arr=new Array();
    arr[0]="sfsjf";
    arr[1]=3333;

    console.log(arr);
    //查看数组的长度
    console.log(arr.length);

    var a1=["张三","李四","王五"];
    console.log(a1[1]);

    //遍历数组
    for (var i=0;i<a1.length;i++){
        console.log(a1[i]);
    }

    for (x in a1){
        //x索引下标
        console.log(x);
        //属性元素
        console.log(a1[x]);
    }

    //数组方法
    //数组倒叙
    var aq=a1.reverse();
    console.log(aq);
    //数组拼接
    var s = a1.join(",,,,");
    console.log(s);

    //合并数组
    var a3 = a1.concat(arr);
    console.log(a3);
    //返回最后一个元素并且删除
    var p = a1.pop();
    console.log(p);
    //添加元素到数组的末尾并且返回新的长度
    var l = a1.push("赵六");
    console.log(l);


    //1.
    var b=[4,0,7,9,15,0,7,5,0,3,2];

    var sum=0;
    for (x in b){
        sum+=b[x];
    }
    console.log("和为:"+sum);

    var max=0;
    for (x in b){
        if (b[x]>max){
            max=b[x];
        }
    }
    console.log("最大值为:"+max);

    var add=[];
    for (x in b){
        if (b[x]!=0){
            add.push(b[x]);
        }
    }
    console.log("不为0的数组:"+add);
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom的使用</title>
</head>
<body>
<input type="text" id="idtext">

<input type="button" value="点我" onclick="f()">
<div id="div1">

</div>
<script>
    function f() {
        //点击按钮获取输入框中的内容
        //1先获取标签对象
        var e = document.getElementById("idtext");

        //获取标签的value值
        console.log(e.value);
        e.value="bb";

        var e1 = document.getElementById("div1");
        e1.innerHTML=e.value+"aa";
        e1.innerHTML="<p>"+e.value+"cc</p>";



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

函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //函数声明
    function f() {
        console.log("f");
    }


    //函数调用
    f();
    //带两个参数的函数
    function f1(a,b) {
        console.log(a+b);


    }

    // 函数赋值给一个变量,函数相当于一个值
    var a=function () {
        console.log("a");

    }

    function f2(a, m) {
        console.log("m");
    }
    //调用
    f2(3,f());
    //js没有方法重载,后声明的函数会覆盖先声明的函数

    //带返回值的函数
    function f3() {
        return 3;


    }

    //以函数为准的作用域
</script>
//函数调用

<input type="button" onclick="f()">
<input type="button" onclick="f1(1,2)">
</body>
</html>

BOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BOM</title>
</head>
<body>
<input type="button" value="警告框" onclick="f()">
<input type="button" value="确认框" onclick="f1()">
<input type="button" value="消息框" onclick="f2()">
<input type="button" value="打开新窗口" onclick="openNewWindow()">
<input type="button" value="关闭" onclick="closeWindow()">
<script>
    //BOM
    //浏览器对象模型(Browser Object Model)
    //可以操作浏览器相关功能
    //DOM
    //文档对象模型(Document Object Model)
    //访问操作HTML页面的标签
    function f() {
        alert("测试警告框");
    }

    function f1() {
        var result = confirm("确认框");
        if (result) {
            console.log("确认");
        }else{
            console.log("取消");
            f1();
        }
    }

    function f2() {
        var s = prompt("请输入密码:","123123");
        console.log(s)
        if (s=null){
            console.log("取消")

        } else{
            console.log("您输入的内容是"+s);
        }
    }
    function openNewWindow() {
        open("http://www.baidu.com","newWindow","width=400,height=400");

    }
    function closeWindow() {
        close();


    }
</script>



</body>
</html>

DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM</title>
</head>
<body>
<p>
    DOM访问所有的HTML元素
    对元素进行修改和删除
</p>
<p>
    DOM树:DOM将HTML文档表达为树结构
    节点(node)
</p>
<p>
    节点:元素节点(标签),文本节点,属性节点
</p>
<p>
    元素节点:HTML中的标签,标签的名字就是元素的名字
</p>

</body>
</html>

location

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="显示URL" onclick="f()">
<input type="button" value="跳转页面" onclick="f1()">
<input type="button" value="刷新页面" onclick="f2()">
<input type="button" value="替换页面" onclick="f3()">

<script>
    function f() {

        console.log(location);
    }
    function f1() {
        location.href="BOM2.html";
    }
    function f2() {
        //刷新页面
        location.reload();
    }
    function f3() {
        location.replace("http://www.baidu.com");
    }
</script>
</body>
</html>

标签的增删改查

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="添加元素" onclick="addElement()">
<input type="button" value="插入元素" onclick="insertElement()">
<input type="button" value="删除元素" onclick="deleteElement()">

<ul id="ulist">
    <li id="l1">1</li>
    <li id="l2">2</li>

</ul>
<script>
    function addElement() {
        //在ul中添加li 添加一行
        var l = document.createElement("li");
        l.innerHTML="add something";

        //把创建的标签加到合适的位置
        //获得目标位置的父标签
        var ul = document.getElementById("ulist");
        ul.appendChild(l);

    }
    function insertElement() {
        //添加一个新的li元素,插入到郑东问前面
        var l = document.createElement("li");
        l.innerHTML="insert something";

        var e = document.getElementById("ulist");
        var e1 = document.getElementById("l2");
        //要插入的元素, 插入的位置
        e.insertBefore(l,e1);
    }

    function deleteElement() {
        var e = document.getElementById("l1");
        e.remove();

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

标签属性的修改

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo{
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<input type="button" value="修改div" onclick="changeDiv()">
<input type="button" value="样式" onclick="changeCSS()">
<input type="button" value="删除样式" onclick="deleteCSS()">
<div id="div1">测试</div>

<script>
    function deleteCSS() {
       var div1 = document.getElementById("div1");
       div1.classList.remove("demo");
    }
    function changeCSS() {
        var div1 = document.getElementById("div1");
        div1.classList.add("demo");



    }
    function changeDiv() {
        //修改属性
        var div1 = document.getElementById("div1");

        //修改标签的内容
        div1.innerHTML="修改后的内容";
        //修改id
        div1.id="div2";
        console.log("修改测试内容");

        //修改class
        div1.className="test";
        console.log("测试修改内容")
        //在原有基础上添加新的class
        div1.classList.add("test");
        //修改name属性
        div1.setAttribute("name","哦呵呵");
        console.log("修改")

        //获取属性值
        var a = div1.getAttribute("name");
        console.log(a);

        //移除某个属性值
        div1.removeAttribute("name");

        //设置样式
        div1.style.width="100px";
        div1.style.backgroundColor="green";

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

获取元素节点的方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <div id="div1">测试</div>
</div>

<div id="div2">
    <p>第一段</p>
    <p>第二段</p>
    <p>第三段</p>
    <p>第四段</p>
    <div class="btn">1</div>
    <div class="btn">2</div>
    <div class="btn">3</div>
    <div class="btn">4</div>


</div>


<input type="radio" name="gender" value="0">男
<input type="radio" name="gender" value="0">女

<script>
    //根据id设置标签
    var e1 = document.getElementById("div1");
    e1.innerHTML="修改文本";

    //获取p标签
    var ps = document.getElementsByTagName("p");
    console.log(ps);
    for (var i = 0; i < ps.length; i++) {
        console.log(ps[i].innerHTML);
        ps[i].innerHTML="第"+(i+1)+"段";
    }

    //按照class值获取标签
    var e2 = document.getElementsByClassName("btn");
    console.log(e2);

    //按照name值获取标签
    var e4 = document.getElementsByName("gender");
    console.log(e4);

    //获取标签的父标签
    console.log(e1.parentNode);

    //获取所有子标签
    var ee = document.getElementById("div2");
    console.log(ee.children);

    var er = ee.getElementsByTagName("div");
    console.log(er);
</script>
</body>
</html>

JQuery

选择器
//id选择器

$("#div1").css("color","red");

//元素选择器

$("div").css("background","brown");

//class选择器

   $(".test").css("color","pink");

//div 下的p元素

$("div p").css("font-size","50px");

//属性选择器

   $("input[type='button']").css("background","yellow");

//伪类选择器

$(".test:first").css("border","10px black solid");

过滤器
//div 下的子div

   $("div .div3").css("border","black 10px solid");

//从上往下找find

   $("div").find(".div4").css("border","pink 10px solid");

//从下往上找parent

$("#div3").parent(".div2").css("border","200px solid red");

操作
添加删除类

//添加两个类
	$(".test").addClass("addStyle addStyle1");
	//移除一个类
    $(".test:first").removeClass("addStyle1");
    //判断是否具有某个类
    console.log($(".test:first").hasClass("addStyle1"))

 var a=$("input[type='button']");
   //隐藏
   a.hide();
   //显示
   a.show();
   //规定多长时间消失
    a.fadeOut(500);
    //淡入
    a.fadeIn(1000);

    a.slideUp(100);
    a.slideDown(100);

添加删除类,实现文字闪烁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery基础知识</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <style>
        #bar{
            background-color: black;
            width: 100px;
            height: 50px;
            padding: 45px;
            font-family: sans-serif;
        }
        #bar.active{
            color: red;

        }

    </style>
</head>
<body>

<div id="bar">点我算命</div>
<script>
    var bar=$("#bar");

   function toggle(){
       if (bar.hasClass("active")){
           bar.removeClass("active");
       } else {
           bar.addClass("active");
       }
   }
   //间隔时间
    setInterval(toggle,200);
</script>
</body>
</html>

DOM操作

   //获取内容
  $("#A").text();
  $("#A").html();//可以显示标签

  //修改内容
  $("#A").text("NO");
  $("#A").html("NO");//可以添加标签


    //追加内容
    $("#A").append('<input type="button" value="小儿子">');
    $("#A").prepend('<input type="button" value="大儿子">');

表单元素input获取内容

var a=$("#a").val();
修改值
var a=$("#a").val("aaa");

事件

 //on:当, 当点击(click)的时候,进行操作
    $("#btn").on("click",function () {
        if ($("#div2").is(":visible")) {
            $("#div2").hide();
        }else{
            $("#div2").show();
        }
    });

 //on:当, 当鼠标进入的时候,进行操作
    $("#btn").on("mouseenter",function () {
        $("#div2").css("background","red");
    });
    //on:当, 当鼠标移除的时候,进行操作
    $("#btn").on("mouseleave",function () {
        $("#div2").css("background","green");
    });

属性操作
//修改属性attribute

$("#a").attr("id","aa");

添加删除表单元素练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>发布</title>
    <script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div>
<input type="text" class="text">
<input type="button" value="发布" class="btn">

<table class="tab">
    <tr>
    <th>序号</th>
    <th>内容</th>
    <th>时间</th>
    <th>操作</th>
    </tr>
</table>
</div>
<script>
    var number=1;
    $(".btn").click(function () {
        //获取输入内容
        var text=$(".text").val();

        var time=new Date();
        //创建标签(一行四列)

        var btn=$("<input type='button' value='删除'>");
        var numTd=$("<td></td>").html(number);
        var textTd=$("<td></td>").html(text);
        var timeTd=$("<td></td>").html(time);
        var optTd=$("<td></td>").append(btn);
        var tr=$("<tr></tr>").append(numTd).append(textTd).append(timeTd).append(optTd).appendTo(".tab")
        number++;
    });

    $(".tab").on('click',"input",function () {
        $(this).parents("tr").remove();
    });

    
</script>

</body>
</html>

ajax

$(".verify").click(function () {
        $.ajax({
            url:"http://47.104.87.243:8081/isexists",
            type:"get",
            data:{
                username:$(".name1").val()
            },
            success:function (re) {
                console.log(re);
                $("div").html(re.msg);

            }
        });
    });

菜蜗牛很菜

关注

1
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
网页设计基础(html,css,js,JQuery)

HTMLHyper Text Markup Language超文本标记语言html文件结构<!DOCTYPE html><html> <meta charset="utf-8"><head> <title></title></head><body></body...
复制链接

扫一扫

专栏目录