Web03_HTML&&CSS&&JS

于 2021-11-18 16:00:49 发布
阅读量1.8k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： java HTML CSS 文章标签： 单元测试 xml intellij-idea
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59449833/article/details/121402373
本文详细介绍HTML标记语言的基础知识，包括标签使用、图片音频视频插入、超链接与列表表格的创建等；同时涵盖CSS样式表的简介及不同导入方式，以及JavaScript的内部与外部脚本引入方法、基本语法等内容。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 一:HTML

1:快速入门

1:案例1

2:案例2

3:总结

 2:标签

1:基础标签

 2:案例(公司)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>企业简介</title>
</head>
<body>
<h1>公司简介</h1>
<hr color="yellow">


<p><font color="red">传智教育</font>(股票代码 003032)，隶属江苏传智播客教育科技股份有限公司，注册资本4亿元，是第一个实现A股IPO的教育企业，公司致力于培养高精尖数字化人才，主要培养人工智能、python+大数据开发、智能制
    造、软件、互联网、区块链等数字化专业人才及数据分析、网络营销、新媒体等数字化应用人才。公司由一批拥有10年以上开发管理经验，且来自互联网或研究机构的IT精英组成，负责研究、开发教学模式和课程内
    容。公司具有完善的课程研发体系，一直走在整个行业发展的前端，在行业内竖立起了良好的品质口碑。
</p>

<p>民族振兴靠人才，中华民族正处于伟大复兴之路上，要赢得国际竞争，需要拥有大量的科技人才，我们将肩负起民族使命，在三尺讲台诲人不倦
著书立说，为科技行业培养出大量的优秀人才，促进民族伟大复兴！我们的使命是：<b>为中华民族伟大复兴而讲课，为千万学生少走弯路而著书。</b>
</p>

<p>探索教育之路，长途漫漫。传智教育希望可以通过自己的努力，寻找出一条更符合人类自然成长规律的教育之路，建立起一个新的教育生态环境，让中国的家长和孩子们在现有的教育体系之外，再多一些选择的机会。
    因此<b>“探索教育本源，开辟教育新生态”</b>便成为了所有传智人为之奋斗的终极愿景，也是所有传智人共同努力的目标。为此，15年来，传智人不曾有一丝懈怠，相信在传智人的不懈努力下，大道不远，终在脚下。
</p>
<hr color="yellow">
<center><font size="2" color="gray">江苏传智播客教育科技股份有限公司</font> </center>
<center><font size="2" color="gray">版权所有Copyright 2006-2018©, All Rights Reserved 苏ICP备16007882</font></center>
</body>
</html>

3:图片音频视频标签

<!--在该页面找a.jpg，就需要先回到上一级目录，该级目录有img目录，进入该目录就可以找到 a.jpg图片-->
<img src="../img/a.jpg" width="300" height="400">
<!--该页面和aa.jpg 是在同一级下，所以可以直接写 图片的名称，也可以写成  ./aa.jpg-->
<img src="aa.jpg" width="300" height="400">


<audio src="b.mp3" controls></audio>
<video src="c.mp4" controls width="500" height="300"></video>

4:超链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--绝对路径-->
<a href="https://www.baidu.com" target="_self">百度1(当前页面展开)</a><br>
<a href="https://www.baidu.com" target="_blank">百度2(空白页面展开)</a><br>
<!--相对路径-->
<a href="3.图片.html" target="_self">图片</a><br>
<a href="html/测试图片.html">测试图片</a>
</body>
</html>

5:列表标签

6:表格标签

 

7:布局标签

<!--
   自己独占一行的标签: 块级标签(元素)
   默认在一行显示的:  行内标签(元素)
 -->
<div>我是div</div>
<div>我是div</div>
<span>我是span</span>
<span>我是span</span>

8:表单标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
<!--
    form:圈定一个范围,将该范围内所有的:"表单项"标签的数据提交到指定位置!!!
    action:指定提交的位置,路径写法和img的src以及a标签的href完全一样!!!\
    method(默认值get):指定提交的方式  get(参数在地址栏)/post(参数不在地址栏)
    表单项想要有意义:必须给定name属性,否则表单标签救人位是一个无效的表单项!!!
-->
<form action="4.超链接.html" method="get">
    <input type="text" name="username">
    <input type="text" name="password">
    <input type="text" name="Phone">
    <input type="text" name="address">
    <button type="submit">提交</button>
</form>

</body>
</html>

9:表单项标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="#" method="get">
    <!--文本框-->
    用户名:<input type="text" name="username"><br>
    <!--密码框-->
    密码:<input type="password" name="password"><br>
    <!--定义单选框-->
    性别:<input type="radio" name="gender" value="man">男<input name="gender" type="radio" value="woman">女<br>
    <!--复选框-->
    <input type="checkbox" name="hobby" value="basketball">篮球
    <input type="checkbox" name="hobby" value="football">足球
    <input type="checkbox" name="hobby" value="pingpang">乒乓球<br>
    <!--文件框:上传文件时用到-->
    <input type="file" name="photo"><br>
    <!--下拉框-->
    籍贯:
    <select name="address">
        <option value="henan">河南</option>
<!--        <select name="henan">-->
<!--            <option value="zhengzhou">郑州</option>-->
<!--            <option value="kaifeng">开封</option>-->
<!--            <option value="lankao">兰考</option>-->
<!--        </select>-->
        <option value="shandong">山东</option>
        <option value="shanxi">山西</option>
    </select> <br>
    <!--文本域-->
    <textarea name="desc">

    </textarea><br>

    <!--隐藏域:一般用于隐藏主键获取唯一标识用的,这些数据不允许用户修改的,但是后台需要用到的数据-->
    <input type="hidden" name="id">

    <!--按钮-->
    <button type="submit">提交</button>
    <button type="reset">重置</button>
</form>

</body>
</html>

二:CSS

1:简介

2:css导入方式

3:css选择器

4:css属性

三:JavaScript

1:简介

 2:两种引入方式

1:内部脚本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        alert("hello js1");
    </script>
</head>
<body>
    
<script>
    alert("hello js1");
</script>
    
</body>
</html>
<script>
    alert("hello js1");
</script>

2:外部脚本

 3:书写语法输出语句

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>alert("alert")</script>
<!--写到页面中-->
<script>
    document.write("write到页面")
</script>
<!--写到浏览器的控制台-->
<script>
    console.log("log到控制台")
</script>
</body>
</html>

4:变量


5:数据类型

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /*
         算数运算: = ,- , * , / , ++, --, %,  js数字相除得到是数字,除不尽的得到小数
         赋值运算: = , -= , += ......和java完全一样
         比较运算:
               基础:  (>, <,  >=, <=, !=, == ) , 如果数据类型不统一, 先统一类型再去比较
               ===: 要求类型和值都要一样才算相同!!!!
         逻辑运算:
               &&,||,!     和java一样
         三元运算
               boolean 表达式 ?  表达式1 : 表达式2
         特殊的语法:
            其他类型转数字:(以后慎用!!!!!!!!,不要这么装逼容易被打死!!!)
               string --- 数字:
                       如果纯数字的字符串会按照字面值来转 "20" --> 20
                       如果不是纯数字的会转成NAN(not a number)
               boolean --- 数字
                       true : 1
                       false : 0
               undefined,null, --- 数字
                       NAN
               对象 : 遇到很少!!!!
            其他类型转boolean(慎用, 更容易被打死!!!!!)
               string --- boolean
                    ""转成false , 其他都是true
               数字  --- boolean
                   NaN, 0 转成false
                   其他数字转成 true
               undefined,null --- boolean
                   false
               对象 ---   boolean
                   true
    */
    let aa = 10 / 3;
    alert(aa);
    let a = 20;
    let b = "20";
    alert(a == b);//true
    alert(!!"aaa");//true
    alert(!!"");//false
    alert(!!3);//true
   alert(!!new Array())//true
   alert( 5 ? 1:2); //1
   while (1){
        alert("111")
    }

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

 6:运算符

  6:流程控制语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    let a = 0.0001;
    let b = 8848;
    let count = 0;
    while (true){
        if (a < b){
            count++;
            a *= 2;
        }else{
            break
        }
    }
    alert(count);
</script>
</body>
</html>

 7:函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    //定义一个函数方法
    function method(a,b){
        return a + b;
    }
    //两个参数调用方法
    let sum = method(1,2);
    alert(sum)//3
    //多个参数调用方法
    let sum1  = method(1,2,3);
    alert(sum1)//3
    //一个参数调用方法
    let sum2 = method(1);
    alert(sum2)//NAN
/*
注意:
    1:在js中,不存在重载,方法名一样只会覆盖
    2:在js中调用只和“方法名”有关，和参数没有关系
*/
</script>
</body>
</html>

 

 

 8:对象

1:Array对象

2：String对象

四:BOM

1:windows对象

 

 2:Location

 

 五:Dom

1:简介

 2:获取 Element对象

 

 

3:事件监听 

 

1：事件绑定

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--方式1：在下面input标签上添加 onclick 属性，并绑定 on() 函数-->
    <input type="button" value="点我" onclick="on()"> <br>
    <input type="button" value="再点我" id="btn">

    <script>
        function on(){
            alert("我被点了");
        }
      	//方式2：获取 id="btn" 元素对象，通过调用 onclick 属性 绑定点击事件
        document.getElementById("btn").onclick = function (){
            alert("我被点了");
        }
    </script>
</body>
</html>

2：常见的事件

 4:表单验证

 5：正则表达式

 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值