HTML+CSS+JavaScript

最新推荐文章于 2024-08-10 10:42:27 发布
最新推荐文章于 2024-08-10 10:42:27 发布
阅读量497 收藏 1
点赞数
分类专栏： JavaWeb 文章标签： 前端 html5 css javascript Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JeromeTCHao/article/details/129024145
版权

什么是HTML？

HTML（超文本标记语言）是一门语言，所有网页都是用HTML语言编写出来的

超文本：

超越了文本的限制，可以定义图片，音频视频

标记语言：

由标签构成的语言

HTML运行在浏览器上，HTML标签由浏览器解析

HTML标签都是预定好的，列如：使用<img>展示图片

W3C标准：

网页主要由三部分组成

结构：HTML

表现：CSS

行为：JavaScript

HTML快速入门

<html>
<head>
     <title> html快速入门</title>
        </head>
<body>
   乾坤未定，你我皆是牛马
</body>

</html>
<html>
<head>
     <title> html快速入门</title>
        </head>
<body>
  <font color = "red">乾坤未定，你我皆是牛马 </font> 乾坤未定，你我皆是牛马
</body>

</html>

总结：

  1. HTML文件以.htm或.html为扩展名

  1. HTML结构标签

<html> 定义HTML文档

<head>定义关于文档的信息

<title>定义文档的标题

<body>定义文档的主体

  1. HTML标签不区分大小写

  1. HTML标签属性值 单双引皆可

  1. HTML语法松散

基础标签：

<!--html标识-->
<!DOCTYPE html>
<html lang="en">
<head>
<!--  页面字符集-->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>我是标题</h1>
<h2>我是标题</h2>
<h3>我是标题</h3>
<h4>我是标题</h4>
<h5>我是标题</h5>
<h6>我是标题</h6>

<hr>
<!--
    html 表示颜色
    1.英语单词：red，pink，blue...
    2.rgb(值1，值2，值3）值的取值范围：0-255 rgb（255，0，0）
    3.#值1#值2#值3 ：值的范围： 00~FF
-->
<font face = "楷体" size  ="5" color="#ff0000"> chenghao</font>

<hr>
CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务<br>
提供原创、优质、完整内容的专业IT技术开发社区.

<hr>
<p>
    CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务


</p>

<P>

    提供原创、优质、完整内容的专业IT技术开发社区.
</P>

<hr>

<b> CSDN是全球知名中文IT技术交流平台</b><br>
<i> CSDN是全球知名中文IT技术交流平台</i><br>
<u> CSDN是全球知名中文IT技术交流平台</u><br>


<hr>
<center>
    <b> CSDN是全球知名中文IT技术交流平台</b>
</center>
</body>
</html>

图片 音频 视频标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--资源路径:
1.绝对路径：完整路径
2.相对路径：(1)xxx/html/02-图片音频视频.html
          xxx/html/a.jpg

          ./a.jpg  a.jpg
          
          (2)xxx/html/img/a.jpg
          ./img/a.jpg
          
          (3)xxx/img/a.jpg
尺寸单位：
1.px，像素
2.百分比
-->
<img src = "a.jpg" width="200" height="400">
<audio src="b.mp3" controls></audio>
<video src = "c.mp4" controls width="400" height="500"></video>
</body>
</html>

超链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <a href = "https://www.csdn.net/" target="_blank">点我有惊喜</a>
</body>
</html>

列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ol type = "A">
    <li>咖啡</li>
    <li>缪奶</li>
    <li>茶</li>

</ol>

<ul>
    <li>咖啡</li>
    <li>牛奶</li>
    <li>茶</li>
</ul>
</body>
</html>

表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<table border="1" cellspacing="0" width="500">
    <tr>
        <th>序号</th>
        <th>品牌logo</th>
        <th>品牌名称</th>
        <th>企业名称</th>

    </tr>
    <tr align="center">
        <td>010</td>
        <td><img src="../img/三只松鼠.png" width="60" height="50"></td>
        <td>三只松鼠</td>
        <td>三只松鼠</td>
    </tr>

    <tr align="center">
        <td>009</td>
        <td><img src="../img/优衣库.png" width="60" height="50"></td>
        <td>优衣库</td>
        <td>优衣库</td>
    </tr>

    <tr align="center">
        <td>008</td>
        <td><img src="../img/小米.png" width="60" height="50"></td>
        <td>小米</td>
        <td>小米科技有限公司</td>
    </tr>


</table>
<br>
<hr>
<br>


<table border="1" cellspacing="0" width="500">
    <tr>

        <th colspan="2">品牌logo</th>
        <th>品牌名称</th>
        <th>企业名称</th>

    </tr>
    <tr align="center">
        <td>010</td>
        <td><img src="../img/三只松鼠.png" width="60" height="50"></td>
        <td>三只松鼠</td>
        <td>三只松鼠</td>
    </tr>

    <tr align="center">
        <td rowspan="2">009</td>
        <td><img src="../img/优衣库.png" width="60" height="50"></td>
        <td>优衣库</td>
        <td>优衣库</td>
    </tr>

    <tr align="center">
        <td>008</td>
        <td><img src="../img/小米.png" width="60" height="50"></td>
        <td>小米</td>
    </tr>


</table>



</body>
</html

布局标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div>我是div</div>
<div>我是div</div>
<span>我是span</span>
<span>我是span</span>
</body>
</html>

表单标签

表单项标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form action="#" method="post">
    <input type="hidden" name="id" value="123">



    <label for="username">用户名：</label>
    <input type="text" name="username" id="username"><br>

    <label for="password">密码：</label>
    <input type="password" name="password" id="password"><br>

    性别：
    <input type="radio" name="gender" value="1" id="male"> <label for="male">男</label>
    <input type="radio" name="gender" value="2" id="female"> <label for="female">女</label>
    <br>

    爱好：
    <input type="checkbox" name="hobby" value="1"> 旅游
    <input type="checkbox" name="hobby" value="2"> 电影
    <input type="checkbox" name="hobby" value="3"> 游戏
    <br>

    头像：
    <input type="file"><br>

    城市:
    <select name="city">
        <option>北京</option>
        <option value="shanghai">上海</option>
        <option>广州</option>
    </select>
    <br>

    个人描述：
    <textarea cols="20" rows="5" name="desc"></textarea>
    <br>
    <br>
    <input type="submit" value="免费注册">
    <input type="reset" value="重置">
    <input type="button" value="一个按钮">


</form>


</body>
</html>

什么是CSS？

CSS（层叠样式表）是一门语言，用于控制网页表现

W3C标准：

网页主要由三部分组成

结构：HTML

表现：CSS

行为：JavaScript

CSS入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: red;
        }
    </style>
</head>
<body>

<div>Hello CSS~</div>

</body>
</html>

CSS导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            color: red;
        }
    </style>


    <link href="../css/demo.css" rel="stylesheet">
</head>
<body>

    <div style="color: red">hello css</div>

    <span>hello css </span>


    <p>hello css</p>
</body>
</html>
p{
    color: red;

}

CSS选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        div{
            color: red;
        }

        #name{
            color: blue;
        }

        .cls{
            color: pink;
        }
    </style>


</head>
<body>

<div>div1</div>
<div id="name">div2</div>
<div class="cls">div3</div>

<span class="cls">span</span>

</body>
</html>

什么是JavaScript？

JavaScript（简称：JSP）是一门跨平台，面向对象的脚本语言（不用编译，直接运行），用来控制网页行为的，他能使网页可交互

W3C标准：

网页主要由三部分组成

结构：HTML

表现：CSS

行为：JavaScript

JavaScript和Java是完全不同的语言，不论是概念还是设计，但基础语法相似。

JavaScript引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>



</head>
<body>





<!--<script>
    alert("hello js1");
</script>-->

<script src="../js/demo.js"></script>
</body>
</html>

demo.js

alert("hello js");

语法

输出语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<script>
    window.alert("hello js~");//写入警告框

    document.write("hello js 2~");//写入html页面

    console.log("hello js 3");//写入浏览器的控制台
</script>
</body>
</html>

变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<script>

 /*   var test = 20;
    test = "张三";

    alert(test);*/

    /*
        var:
            1. 作用域：全局变量
            2. 变量可以重复定义


     */


    {
        let age = 30;
        let age2 = 20;
        //var age = 20;

    }
    alert(age);

    const PI = 3.14;
    //PI = 3;

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

数据类型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script>
    // number
    // var age = 20;
    // var price = 99.8;
    // alert(typeof age);
    // alert(typeof price);

    //string
    // var ch = 'a';
    // var name = '张三';
    // var addr = "北京";
    //
    // alert(typeof ch);
    // alert(typeof name);
    // alert(typeof addr);
    //
    // //boolean
    // var flag = true;
    // var flag2 = false;
    //
    // alert(typeof flag);
    // alert(typeof flag2);
    //
    // //null
    // var obj = null;
    //
    // alert(typeof obj);//object
    //
    // //undefined
    var a ;
    alert(typeof a);

</script>

</body>
</html>

运算符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script>
    /*
        ==:
            1. 判断类型是否一样，如果不一样，则进行类型转换
            2. 再去比较其值

        ===:全等于
            1. 判断类型是否一样，如果不一样，直接返回false
            2. 再去比较其值

     */
    var age1 = 20;
    var age2 = "20";

    // alert(age1 == age2);// true
    // alert(age1 === age2);// false

    /*
        类型转换：
            * 其他类型转为number：
                1. string: 按照字符串的字面值，转为数字.如果字面值不是数字，则转为NaN。一般使用parseInt
                2. boolean: true 转为1，false转为0

            * 其他类型转为boolean：
                1. number:0和NaN转为false，其他的数字转为true
                2. string:空字符串转为false，其他的字符串转为true
                3. null:false
                4. undefined:false


     */
    // var str = +"20";
    /*var str = "20";
    alert(parseInt(str) + 1);*/

/*
    var flag = +false;
    alert(flag);*/

    // var flag = 3;
    // var flag = "";
 /*   var flag = undefined;

    if(flag){
        alert("转为true");
    }else {
        alert("转为false");
    }*/





    var str = "abc";












    //健壮性判断
    //if(str != null && str.length > 0){
    if(str){
        alert("转为true");
    }else {
        alert("转为false");
    }



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

流程控制语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
/*
    //1. if
    var count = 3;
    if (count == 3) {
        alert(count);
    }*/

/*

    //2. switch
    var num = 3;
    switch (num) {
        case 1: {
            alert("星期一");
            break;
        }

        case 2: {
            alert("星期二");
            break;
        }

        case 3: {
            alert("星期三");
            break;
        }

        case 4: {
            alert("星期四");
            break;
        }

        case 5: {
            alert("星期五");
            break;
        }

        case 6: {
            alert("星期六");
            break;
        }

        case 7: {
            alert("星期日");
            break;
        }


        default: {
            alert("输入的星期有误");
            break;
        }
    }
*/


    // 3. for
/*

    var sum = 0;
    for (let i = 1; i <= 100; i++) {
        sum += i;
    }
    alert(sum);
*/

/*
    // 4. while

    var sum = 0;
    var i = 1;
    while (i <= 100) {
        sum += i;
        i++;
    }
    alert(sum);*/


    // 5. do...while

    var sum = 0;
    var i = 1;
    do {
        sum += i;
        i++;
    }
    while (i <= 100);
    alert(sum);


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

函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
   /*function add(a,b){
       return a + b;
   }


   var result = add(1,2);

   alert(result);*/

   var add = function (a,b){
       return a + b;
   }

   var result = add(1,2);

   var result1 = add(1,2,3);
   // alert(result1)

   var result2 = add(1);
   alert(result2);

   //alert(result);

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

Array

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<script>
    // 方式一
    var arr = new Array(1,2,3);

    // alert(arr);

    // 方式二
    var arr2 = [1,2,3];
    //alert(arr2);

    // 访问
    arr2[0] = 10;
    //alert(arr2)


    // 特点：JavaScript数组相当于Java中集合。变长变类型

    // 变长
    var arr3 = [1,2,3];
    arr3[10] = 10;
    //alert(arr3[10]);
    //alert(arr3[9]);

    // 变类型
    arr3[5] = "hello";
    //alert(arr3[5]);
    //alert(arr3);


    // 属性：length：数组中元素的个数
    var arr4 = [1,2,3];
/*
    for (let i = 0; i < arr4.length; i++) {
        alert(arr4[i]);
    }*/

    // 方法：
    // push:添加方法
    var arr5 = [1,2,3];
   /* arr5.push(10);
    alert(arr5);*/

    // splice:删除元素
    arr5.splice(0,1);
    alert(arr5);

</script>

</body>
</html>

String

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script>
    //方式一
    var str1 = new String("abc");
    //方式二
    var str2 = "abc";
    var str3 = 'abc';


    //length
    // alert(str3.length);

    // trim():去除字符串前后两端的空白字符

    var str4 = '  abc   ';

    alert(1 + str4.trim() + 1);

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

自定义对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script>


    var person = {
        name : "zhangsan",
        age : 23,
        eat: function (){
            alert("干饭~");
        }

    };


    alert(person.name);
    alert(person.age);

    person.eat();



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

BOM

Window

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>



<script>

    // alert
    // window.alert("abc");
    // alert("bbb");

    // confirm，点击确定按钮，返回true，点击取消按钮，返回false
    /*var flag = confirm("确认删除？");

    //alert(flag);

    if(flag){
        //删除逻辑
    }*/


    // 定时器

    /*
        setTimeout(function,毫秒值): 在一定的时间间隔后执行一个function，只执行一次

        setInterval(function,毫秒值):在一定的时间间隔后执行一个function，循环执行
     */

    /*setTimeout(function (){
        alert("hehe");
    },3000);*/

    setInterval(function (){
        alert("hehe");
    },2000);

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

定时器案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript演示</title>
</head>
<body>



<input type="button" onclick="on()" value="开灯">
<img id="myImage" border="0" src="../imgs/off.gif" style="text-align:center;">
<input type="button" onclick="off()" value="关灯">


<script>

    function on(){
        document.getElementById('myImage').src='../imgs/on.gif';
    }

    function off(){
        document.getElementById('myImage').src='../imgs/off.gif'
    }
    var x = 0;

    // 根据一个变化的数字，产生固定个数的值； 2  x % 2     3   x % 3
    //定时器
    setInterval(function (){

        if(x % 2 == 0){
            on();
        }else {
            off();
        }

        x ++;

    },1000);

</script>

</body>
</html>

History

Location

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
/*

    alert("要跳转了");
    location.href = "https://www.baidu.com";

*/


    //3秒跳转到首页

    document.write("3秒跳转到首页...");
    setTimeout(function (){
        location.href = "https://www.baidu.com"
    },3000);

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

DOM

获取Element

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img id="light" src="../imgs/off.gif"> <br>

<div class="cls">传智教育</div>   <br>
<div class="cls">黑马程序员</div> <br>

<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>

<script>
    //1. getElementById：根据id属性值获取，返回一个Element对象
    var img = document.getElementById("light");
    // alert(img);
    img.src = "../imgs/on.gif";

    //2. getElementsByTagName：根据标签名称获取，返回Element对象数组
    var divs = document.getElementsByTagName("div");
    /*
        style:设置元素css样式
        innerHTML：设置元素内容
    */

    for (let i = 0; i < divs.length; i++) {
        //divs[i].style.color = 'red';
        divs[i].innerHTML = "呵呵";
    }

    //3. getElementsByName：根据name属性值获取，返回Element对象数组
    var hobbys = document.getElementsByName("hobby");
    for (let i = 0; i < hobbys.length; i++) {
        //alert(hobbys[i]);
        hobbys[i].checked = true;
    }

    //4. getElementsByClassName：根据class属性值获取，返回Element对象数组

    var clss = document.getElementsByClassName("cls");
    /*for (let i = 0; i < clss.length; i++) {
        alert(clss[i]);

    }*/



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

事件监听

事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="点我" onclick="on()"> <br>
<input type="button" value="再点我" id="btn">


<script>

    function on(){
        alert("我被点了");
    }


    document.getElementById("btn").onclick = function (){
        alert("我被点了");
    }


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

常见事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<form id="register" action="#" >
    <input type="text" name="username" />

    <input type="submit" value="提交">
</form>

<script>
    document.getElementById("register").onsubmit = function (){
        //onsubmit 返回true，则表单会被提交，返回false，则表单不提交
        return true;
    }



</script>

</body>
</html>

案例：表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎注册</title>
    <link href="../css/register.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="#">登录</a>
    </div>
    <form id="reg-form" action="#" method="get">

        <table>

            <tr>
                <td>用户名</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
                </td>

            </tr>

            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
                </td>
            </tr>


            <tr>
                <td>手机号</td>
                <td class="inputs"><input name="tel" type="text" id="tel">
                    <br>
                    <span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
                </td>
            </tr>

        </table>

        <div class="buttons">
            <input value="注 册" type="submit" id="reg_btn">
        </div>
        <br class="clear">
    </form>

</div>


<script>

    //1. 验证用户名是否符合规则
    //1.1 获取用户名的输入框
    var usernameInput = document.getElementById("username");

    //1.2 绑定onblur事件 失去焦点
    usernameInput.onblur = checkUsername;

    function checkUsername() {
        //1.3 获取用户输入的用户名
        var username = usernameInput.value.trim();

        //1.4 判断用户名是否符合规则：长度 6~12,单词字符组成
        var reg = /^\w{6,12}$/;
        var flag = reg.test(username);

        //var flag = username.length >= 6 && username.length <= 12;
        if (flag) {
            //符合规则
            document.getElementById("username_err").style.display = 'none';
        } else {
            //不合符规则
            document.getElementById("username_err").style.display = '';
        }

        return flag;
    }


    //1. 验证密码是否符合规则
    //1.1 获取密码的输入框
    var passwordInput = document.getElementById("password");

    //1.2 绑定onblur事件 失去焦点
    passwordInput.onblur = checkPassword;

    function checkPassword() {
        //1.3 获取用户输入的密码
        var password = passwordInput.value.trim();

        //1.4 判断密码是否符合规则：长度 6~12
        var reg = /^\w{6,12}$/;
        var flag = reg.test(password);

        //var flag = password.length >= 6 && password.length <= 12;
        if (flag) {
            //符合规则
            document.getElementById("password_err").style.display = 'none';
        } else {
            //不合符规则
            document.getElementById("password_err").style.display = '';
        }

        return flag;
    }


    //1. 验证手机号是否符合规则
    //1.1 获取手机号的输入框
    var telInput = document.getElementById("tel");

    //1.2 绑定onblur事件 失去焦点
    telInput.onblur = checkTel;

    function checkTel() {
        //1.3 获取用户输入的手机号
        var tel = telInput.value.trim();

        //1.4 判断手机号是否符合规则：长度 11，数字组成，第一位是1

        //var flag = tel.length == 11;
        var reg = /^[1]\d{10}$/;
        var flag = reg.test(tel);
        if (flag) {
            //符合规则
            document.getElementById("tel_err").style.display = 'none';
        } else {
            //不合符规则
            document.getElementById("tel_err").style.display = '';
        }

        return flag;
    }


    //1. 获取表单对象
    var regForm = document.getElementById("reg-form");

    //2. 绑定onsubmit 事件
    regForm.onsubmit = function () {
        //挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false

        var flag = checkUsername() && checkPassword() && checkTel();

        return flag;
    }

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

正则表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

    // 规则：单词字符，6~12

    var reg = /^\w{6,12}$/;

    var str = "abcccc";

    var flag = reg.test(str);
    alert(flag);
</script>
</body>
</html>

TianChenghao.
关注
专栏目录
HTML+CSS+JAVAscript手册
10-14
HTML+CSS+JAVAscript手册,非常详细，学习HTML必备工具
《html+css+javascript 网页制作案例教程》源代码
04-02
《HTML+CSS+JavaScript 网页制作案例教程》是一本深入浅出的前端开发教材，旨在帮助读者掌握网页设计的基础知识和技能。这个压缩包包含的源代码是书中各个实例的实现，提供了丰富的实践材料，使学习者能够通过实际...
HTML+CSS+JavaScript(JS)
weixin_30304375的博客
12-05 176
html基本标签，标签也叫标记就是命令 格式： 单标签：<标签名> 或 <标签名 /> 双标签：<标签名></标签名> 2.1 结构标签(文件标签) <html><html>:根标签 <head> <title></title>:页面的标题 ...
快速入门 HTML + CSS + JS （附带简单案例）
最新发布
SoyMilk的博客
08-10 725
HTML是网页内容的标准标记语言，用于定义网页的结构和内容。它由一系列的元素（elements）组成，这些元素可以包含文本、图片、链接以及其他媒体内容。 CSS用于设置HTML元素的样式和布局，它不是编程语言，而是一种样式表语言，用于描述HTML文档的呈现方式。 JavaScript是一种脚本语言，通常用于网页上实现交互功能，也可以用于服务器端（如Node.js）。
html+CSS+JavaScript
qq_39484718的博客
10-21 302
HTML 基本标签 <!DOCTYPE html> <hml lang="en"> <head> <meta charset="UTF-8"> <title>这是title</title> <a>这是a标签</a> <title>1234asdadadad</title> <!-- -------------------------li
基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip
09-25
基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip 基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip 基于HTML+CSS+JavaScript完成简单的网页制作源码+项目报告.zip 基于HTML+CSS+JavaScript...
HTML+CSS+JavaScript编程入门指南
12-30
下载文件是HTML+CSS+JavaScript编程入门指南这本书的示例代码，全书分HTML，CSS与JavaScript三个部分，然后结合三个部分用项目说明应用方法。各部分的代码展示了三种语言的使用方法，可以搭配webstorp执行
web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码
12-10
web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页源码 web期末大作业 基于HTML+CSS+JavaScript实现的仿京东商城首页登录页...
HTML+CSS+JavaScript网页制作案例教程（第2版）-教学大纲.zip
07-06
《HTML+CSS+JavaScript网页制作案例教程（第2版）》是一本全面涵盖网页制作基础知识与实践技巧的教材。此教学大纲旨在引导学生系统学习网页设计的核心技术，通过理论讲解和实际案例，使学习者掌握网页开发的基本流程...
网页设计与制作(HTML+CSS+JavaScript)
01-30
网页设计与制作(HTML+CSS+JavaScript)，资源总大小：786.6MB，欢迎下载
html+css+javascript代码
05-24
html+css+javascript一些基本知识
web前端开发（html+css+javascript）
07-15
web前端开发（html+css+javascript）视频教程
html javascript js css
05-03
网页制作中隐藏域的妙用 在网页制作中,我们知道有一个input ="hidden"的属性，顾名思义它就是隐藏在网页中的的一个元素，并不在网页中显示出来。 那么它的作用是什么呢．作过cgi，asp，php，jsp等的朋友都知道有些时候我们要给用户一信息，让他在提交表单时提交上来以确定用户身份，如sessionkey，等等．当然这些东西也能用cookie实现，但使用隐藏域就简单的多了．而且不会有浏览器不支持，用户禁用cookie的烦恼。
HTML+CSS+Javascript
Rihaong' Blog
03-12 239
目录 一、综概 二、零碎知识点 三、 DOM的相关知识 一、综概 HTML CSS Javascript HTML（超文本标记语言）：对网页中文本、图片、声音等内容进行描述 CSS（层叠样式表）：主要设置HTML的外观显示样式 DOM（文档对象模型）：用于处理可扩展性标记语言的标准编程接口 Javascript：为网页添加各种各样的动态功能 二、零碎知识点 单选...
HTML +CSS +JavaScript（一）
lk990908的博客
08-22 198
HTML : 常用标签的使用方法： HTML是什么？ 超文本标记语言 是一种用来设计网页的语言，其文件以.htm .html为后缀 由浏览器解释执行，生成响应的界面 标题标签<hn> <h1>一号标题</h1> <h2>二号标题</h2> 12345<br/> //br 单标签 换行 ...
尚学堂HTML+CSS+JavaScript基础教程详解
“HTML+CSS+JavaScript教程 - 尚学堂手把手教学” 本教程涵盖了HTML、CSS和JavaScript的基础知识，由知名教育机构尚学堂提供。HTML是WEB的第一语言，全称为HyperText Markup Language，是一种用于创建网页的标准...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值