day02【CSS&JS入门】、HTML引入CSS、基本选择器、字体和文本属性、盒子模型、HTML引入JS、JS三种输出方式、JS变量声明、JS数据类型

本文链接：https://blog.csdn.net/qq_44845814/article/details/105423548

本文详细介绍了HTML、CSS和JavaScript的基础知识，涵盖了网页搭建、样式美化及页面交互等内容，适合前端开发初学者。

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

回顾

1. html概述
	超文本标记语言
	作用：搭建基础网页

2. html基础
	书写规范
		<html>
			<head></head>
			<body></body>
		</html>

3. html常用标签
	h1~h6：align="center"
	hr：color="#ff ff ff" width="px %"
	br：换行
	p：段落
	a：超链接，href（相对地址，绝对地址）
			./ 当前目录
			../ 上级目录
	img：图像 src（相对地址，绝对地址）
	ul ol：有序和无序列表
			li 列表项
	div和span：二个盒子标签
		div：独自占有一行
		span：内容有多少，就占用多少
	实体字符
		英文半角：&nbsp;
		中文：&emsp;
	表格
		table -- 表格
			tr -- 行
				td -- 单元格
4. html表单（重点）
	作用：1.采集用户数据、2.将数据发送给服务器
	<form action="请求服务器地址" method="post">
		<input name="" value="" type=""/>
			text
			password
			date
			radio
			checkbox
			file
			
			rest
			submit
			button
		<select name="">
			<option></option>
		</select>
		<textarea name="" cols="" rows=""></textarea>
	</form>

5. 案例：黑马旅游网注册页面

CSS&JS入门

今日目标

1. css样式（了解）

2. js入门（重点）

一 CSS概述

层叠样式表（Cascading Style Sheet）

作用：美化页面

层叠样式: 对同一个标签添加多个不同的样式,所有样式会叠加在一起展示出效果

初体验

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>css&js入门</title>

    <style>
        span{
            font-size: 50px;
            color:red;
            border: 1px solid skyblue;
        }
    </style>

</head>
<body>
<span>中国加油，武汉加油！！！</span> <br>
<span>向奋斗在一线的医护人员致敬</span> <br>
</body>
</html>

优点

1. 实现了样式和内容的分离，提高了显示效果和样式的复用性。

2. 降低耦合性，分工更加明确，CSS专门用于美化，HTML专门用于结构搭建。

二 CSS基础语法【看懂】

2.1 HTML引入CSS

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01-HTML引入CSS</title>


    <!--外部样式-->
    <link rel="stylesheet" href="../css/mycss.css">

    <!--内部样式-->
    <style type="text/css">
        h1{
            color: skyblue;
        }
    </style>

</head>
<body>
<!--
    HTML引入CSS的三种方式
        1）行内样式：所有的标签都有一个共有的属性style
            语法：<h1 style="css样式"></h1>
            作用范围：当前标签
        2）内部样式：使用style
            语法：<style type="text/css">css样式</style>
                type="text/css" 告知浏览器把解析器切换为css类型
            作用范围：当前页面
        3）外部样式：使用link标签引入外部css样式
            语法：<link rel="stylesheet"  href="外部css文件地址"/>
                rel="stylesheet" 告知浏览器我引入文件的类型是css样式表
            作用范围：所有引入的html页面

        css样式优先级：就近原则.....  浏览器的执行顺序自上而下
        style标签可以在html的任意位置,推荐放在head头部
-->
<h1 style="color: red;">行内样式</h1>
<h1>内部样式</h1>
<h1>外部样式</h1>
</body>
</html>

2.2 CSS书写规范

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02-CSS语法</title>


    <style>
        /*
            css注释内容
            css语法：
                选择器{css样式}
                css样式格式：{样式名：样式值;样式名：样式值;}
        */
        span{
            color:green;/*字体颜色*/
            font-size: 20px;/*字体大小*/
            border:1px solid skyblue;/*边框*/
        }
    </style>

</head>
<body>
<!--

-->
<span>样式名多个单词用横杠分割</span><br/>
<span>样式值多个单词用空格分割</span><br/>
<span>多个样式之间，以分号分割</span><br/>
</body>
</html>

2.3 基本选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03-基本选择器</title>

    <style>
        /*标签选择器*/
        span{
            font-size: 20px;
        }
        /*class选择器*/
        .female{
            color: pink;
        }
        .male{
            color: skyblue;
        }
        .hero{
            font-weight: bold;/*加粗*/
        }

        /*id选择器*/
        #boss{
            color: red;
        }
    </style>
</head>
<body>

<!--
    选择器：作用选定一组特有的标签
        1）标签 特点：此名称的所有标签
            语法：标签名{css样式}

        2）class（类）特点：具有分组的特性
            语法：.class{css样式}
        3）id 特点：具有唯一性
            语法：#id{css样式}

-->
<span class="female">古力娜扎</span>
<span class="female">迪丽热巴</span>
<span class="female hero">黑寡妇</span>

<span class="male hero">钢铁侠</span>
<span class="male hero">超人</span>


<span id="boss">灭霸</span>


</body>
</html>

2.4 扩展选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>04-扩展选择器</title>
    <style>
        p,span{
            font-family: 楷体; /*字体类型*/
        }

        div>span{
            color: red;
        }

        input[type="text"]{
            background-color: gold;/*背景色*/
        }

    </style>
</head>
<body>
<!--
    扩展选择器
        1）并集
            语法：选择器1,选择器2....{css样式}
        2）后代
            语法：父 子（孙子）{样式}
       3）父子
            语法：父>子{css样式}
       4）属性
            语法：选择器[属性名="属性值"]{css样式}
-->


<div>
    <span>烟幕弹</span>
    <p>
        <span id="gbl">高爆雷</span>
    </p>
</div>

<span id="jjx">急救箱</span>
<br/>
<label>姓名</label>
<input type="text" name="userName" value="Jack"/><br/>
<label>密码</label>
<input type="password" name="userPass" value="123456"/><br/>

</body>
</html>

三 CSS常用样式【了解，有个印象】

3.1 字体和文本属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>05-字体和文本属性</title>
    <style>
        /*
        渲染需求
            1.所有文字绿色
            2.所有文字大小20px
            3.所有行高40px
            4.所有字体加粗
            5.所有字体楷体
            6.第一句文字倾斜
            7.第一句隐藏下划线
        */
        div p{
            color: green;/*所有文字绿色*/
            font-size: 20px;/*所有文字大小20px*/
            line-height: 40px;/*所有行高40px*/
            font-weight: bold;/*所有字体加粗*/
            font-family: 楷体;/*所有字体楷体*/
        }
        div p a{
            font-style: italic;/*第一句文字倾斜*/
            text-decoration: none;/*第一句隐藏下划线*/
        }
    </style>

</head>
<body>
<div>
    <p>
        <a href="#"> 学习的误区：</a><br/>
        眼睛：看了一遍记住了<br/>
        耳朵：听了一遍明白了<br/>
        脑子：想了一遍搞懂了<br/>
        手：你们会个屁！^_^ <br>
    </p>
</div>
</body>
</html>

3.2 案例：公司简介

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>06-案例：公司简介</title>

    <style>
        /*标题居中*/
        h1 {
            text-align: center;
        }

        /*chrome浏览器会出现兼容性问题.....*/
        hr {
            color: #ffa500;
        }
        /*底部版权*/
        .footer{
            text-align: center;
            color: gray;
        }
    </style>
</head>
<body>

<h1>公司简介</h1>
<hr>
<p>
    &emsp;&emsp; <span style="color: red">“中关村黑马程序员训练营”</span> 是由 <span style="font-weight: bold;font-style: italic">传智播客</span> 联合中关村软件园、CSDN， 并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展， 而企业招不到优秀人才的困扰。
    目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地， 并被评为中关村软件园重点扶持人才企业。
</p>
<p>
    &emsp;&emsp;黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，
    必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说，
    黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确 保学员质量，并降低企业的用人风险。
</p>
<p>
    &emsp;&emsp;中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新， 不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。
</p>
<p>
    &emsp;&emsp;一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。
</p>
<hr>
<p class="footer">
江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2020, All Rights Reserved 苏ICP备16007882
</p>
</body>
</html>

3.3 背景属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>07-背景属性</title>

    <style>
        /*body{
            background-color: #3b1f1f;
            background-image: url("../img/girl.jpg");
            background-repeat: no-repeat;
        }*/
        body{
            background: #3b1f1f url("../img/girl.jpg") no-repeat;
        }
    </style>

</head>
<body>
<h1 style="color: white">我是标题</h1>
<!--
    背景属性
        background-color：背景色
        background-image：背景图片
            取值：url('图片地址')
       background-repeat：平铺方式
            取值：repeat（水平和垂直）、repeat-x（水平）、repeat-y（垂直）、no-repeat（不平铺）

   简写方式
        background:color image repeat;
-->
</body>
</html>

3.4 显示属性

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>08-显示属性</title>
    <style>
        span,div{
            border: 1px solid red;
        }
        span{
            display: block;/*块级元素*/
        }
        div{
            display: inline;/*行内元素*/
        }

        ul li{
            display: inline;/**/
        }
    </style>

</head>
<body>
<!--
    显示属性：display
        1）inline：将标签改为行内元素
        2）block：将标签改为块级元素
        3）none：隐藏此标签
-->

<span>内联标签span1</span>
<span>内联标签span2</span>
<span>内联标签span3</span>
<div>块级标签div1</div>
<div>块级标签div2</div>
<div style="display: none">块级标签div3</div>

<ul>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
</ul>
</body>
</html>

3.5 浮动属性

打破常规，让div也能变小（实际大小跟宽和高）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>09-浮动属性</title>
    <style>
        .box{
            width: 150px;
            height: 150px;
            border: 1px solid red;
            text-align: center;

        }

        #long{
            float: left;
        }
        #hu{
            float: right;
        }
    </style>
</head>
<body>
<!--
    浮动：float
        取值：left、right
    清除浮动：clear
        取值：both
-->
<div class="box" id="long">左青龙</div>
<div class="box" id="hu">右白虎</div>
<div style="clear: both"></div>
<div class="box">最后砍成米老鼠</div>
</body>
</html>

3.6 盒子模型

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>10-盒子模型</title>

    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 10px dashed skyblue;
            padding: 10px;
            margin: auto;
            margin-top: 20px;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<!--
    盒子模型
        1）宽和高
            width：300px
            height：300px
        2）边框
            border：宽度 类型 颜色
                类型：solid 单线、double 双线、dashed 虚线
        3）内边距
            padding-top 上
            padding-right 右
            padding-bottom 下
            padding-left 左
            简写：padding: 上右下左
        4）外边距
            margin-top 上
            margin-right 右
            margin-bottom 下
            margin-left 左
            简写：margin：上右下左
            特殊：margin:auto 水平居中

        5）盒子类型
            box-sizing：content-box（默认）  盒子大小（宽和高+内边距+边框） ，计算起来就比较麻烦
            box-sizing：border-box 盒子大小（宽和高）包含（内边距和边框），计算方法就比较简单了
-->
<div class="box">
    <img src="../img/girl.jpg" width="260px" height="260px" alt="">
</div>
</body>
</html>

四案例：黑马旅游网注册页面【作业】

需求

使用今天学习的CSS，完善昨天的黑马旅游网注册页面

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <link rel="stylesheet" href="./css/register.css">
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <img src="./img/top_banner.jpg" width="100%" alt="">
        </td>
    </tr>
    <tr>
        <td>
            <img src="./img/logo.png" width="100%" alt="">
        </td>
    </tr>
    <tr height="40px" align="center">
        <td bgcolor="#ffc900" >
            首页 &emsp;&emsp;&emsp;&emsp;&emsp;
            周边游 &emsp;&emsp;&emsp;&emsp;&emsp;
            山水游 &emsp;&emsp;&emsp;&emsp;&emsp;
            古镇游 &emsp;&emsp;&emsp;&emsp;&emsp;
            出境游 &emsp;&emsp;&emsp;&emsp;&emsp;
            国内游 &emsp;&emsp;&emsp;&emsp;&emsp;
            港澳游 &emsp;&emsp;&emsp;&emsp;&emsp;
            台湾游 &emsp;&emsp;&emsp;&emsp;&emsp;
            5A景点游 &emsp;&emsp;&emsp;&emsp;&emsp;
            全球自由行 &emsp;&emsp;&emsp;&emsp;&emsp;
        </td>
    </tr>
    <tr height="500px">
        <td >
            <div class="content">
                <div class="rg_form">
                    <div class="rg_form_left">
                        <p style="color: #ffc900;font-size: 20px">用户注册</p>
                        <p style="color: gainsboro;font-size: 20px">USER REGISTER</p>
                    </div>
                    <div class="rg_form_center">
                        <form action="#" method="post">
                            <table>
                                <tr>
                                    <td class="td_left">
                                        用户名
                                    </td>
                                    <td class="td_right">
                                        <input type="text" name="username" placeholder="请输入账号">
                                    </td>
                                </tr>
                                <tr>
                                    <td class="td_left">
                                        手机号
                                    </td>
                                    <td class="td_right">
                                        <input type="text" name="telephone" placeholder="请输入手机号">
                                    </td>
                                </tr>
                                <tr>
                                    <td class="td_left">
                                        密码
                                    </td>
                                    <td class="td_right">
                                        <input type="password" name="password" placeholder="请输入密码">
                                    </td>
                                </tr>
                                <tr>
                                    <td class="td_left">
                                        验证码
                                    </td>
                                    <td class="td_right">
                                        <input type="text" name="smsCode" placeholder="请输入验证码">
                                        <a href="#">发送手机验证码</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2" align="center">
                                        <input type="submit" value="注册">
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </div>
                    <div class="rg_form_right">
                        <p>已有账号？<a href="#" style="color: green;text-decoration: none">立即登录</a></p>
                    </div>
                </div>
            </div>

        </td>
    </tr>
    <tr>
        <td>
            <img src="./img/footer_service.png" width="100%" alt="">
        </td>
    </tr>
    <tr>
        <td bgcolor="#ffc900" height="50px" align="center">
            江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2020, All Rights Reserved 苏ICP备16007882
        </td>
    </tr>
</table>
</body>
</html>

五 JavaScript概述

作用：页面交互

JavaScript历史

**起源：**上世纪末1995年时，Netscape（网景）公司推出Navigator浏览器。发布后用的人不多，这咋整啊？这家公司就想了一个好方案，不仅在浏览器实现静态HTML，还想要有动态效果，比如：在前端处理表单验证。
**动手：**有目标就去做，网景公司大牛多，Brendan Eich（布兰登·艾奇）据说就用了10天就把JavaScript搞了出来，刚出来时叫LiveScript，为了蹭蹭当红明星Java热度，就改成JavaScript了（瞬间就火了），事实上他们两没啥关系。（北大和北大青鸟）
**竞争：**看到网景公司有了js，微软感觉不行啊，我的IE要被干掉啊，同时也感到js的前途无量，于是参考JavaScript弄了个名为JScript浏览器脚本语言。
标准： Netscape和微软竞争出现的js导致版本的不一致，随着业界的担心，JavaScript的标准化被提上议事日程。ECMA（欧洲计算机制造商协会）组织就去干这事，最后在1997年弄出了ECMAScript作为标准。这里ECMAscript和JavaScript可以看做表达的同一个东西。

JavaScript特点

js源码不需要编译，浏览器可以直接解释运行
js是弱类型语言，js变量声明不需要指明类型

JavaScript组成

组成部分	作用
ECMA Script	构成了JS核心的语法基础
BOM	Browser Object Model 浏览器对象模型，用来操作浏览器上的对象
DOM	Document Object Model 文档对象模型，用来操作网页中的元素（标签）

六 JavaScript基础语法

6.1 HTML引入JS

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>01-HTML引入JS</title>

</head>
<body>
<!--
    HTML引入js的二种方式
        1）内部脚本
            语法：<script type="text/javascript">js代码</script>
        2）外部脚本
            语法：<script src="外部js文件地址"></script>

        补充：script标签可以在页面任意位置，推荐放在body尾部... 页面顺序：css、html、js
        经验值：
            1）script标签不能自闭合
            2）如果script标签使用src属性，那么浏览器将不会解析此标签体的js代码...
-->

<script type="text/javascript">
    document.write('<h1>我是内部脚本</h1>');
</script>
<script src="../js/myjs.js">
    document.write('哈哈，这是一个错误的示范，我不会被加载.....')
</script>

</body>
</html>

6.2 JS三种输出方式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>02-JS三种输出方式</title>

</head>
<body>
<!--
JS三种输出方式
	1. 浏览器弹框输出字符
	2. 输出html内容到页面
	3. 输出到浏览器控制台
 -->
<script>
    // 1. 浏览器弹框输出字符
    alert('浏览器弹框输出字符');
    // 2. 输出html内容到页面
    document.write('输出html内容到页面')
    // 3. 输出到浏览器控制台
    console.log('输出到浏览器控制台')
</script>
</body>
</html>

6.3 JS变量声明

java是强类型语言，注重变量的定义，所以在java中定义变量类型的方式如下：

// 整型
int i = 1314;
// 浮点型
double d = 521.1314;
// 字符型
char c ='c';
// 字符串型
String str = "用心做教育";
//布尔型
boolean b = true;
// 常量
final Integer PI = 3.14;

js是弱类型语言，不注重变量的定义，所以在js中定义变量的类型方式如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>03-JS变量声明</title>

</head>
<body>

<!--
    js变量的声明
        ECMAScript6之前所有的遍历声明使用var就可以了，这个哥们天生残疾，很多缺陷，坑了不少前端好汉...
        es6之后 开始推出 let 声明变量，const 声明常量

-->


<script>
    // 字符串：String str = "用心做教育";
    let str = "用心做教育";
    console.log(str);
    // 整型：int i = 1314;
    let i = 1314;
    console.log(i);
    // 浮点型：double d = 521.1314;
    let d = 521.1314;
    console.log(d);
    // 常量：final Integer PI = 3.14;
    const  PI =3.14;
    console.log(PI);
    // 布尔：boolean b = true;
    let b = true;
    console.log(b);

    // 感知弱类型语言不注重变量的定义
    let a; // 声明变量，但未定义类型
    console.log(a); // undefined
    a='hello';
    console.log(a);
    a=123;
    console.log(a);
    a=true;
    console.log(a);
    a=new Object();
    console.log(a);
</script>
</body>
</html>

在这里插入图片描述

6.4 JS数据类型

js与java一样，数据类型也分为基本数据类型（原始数据类型）和引用数据类型

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>04-JS数据类型</title>

</head>
<body>
<!--
    基本数据类型
        1.number 数值（整型、浮点）
        2.string 字符串 （单引号、双引号） 在js中没有字符的概念，都是字符串...
        3.boolean 布尔（true、false）
        4.undefined 未定义；例如：let a;

    引用数据类型
        let obj = new Object();
        let date = new Date();

    判断变量的数据类型
        语法：typeof 变量名
-->
<script>
    let a; // 声明变量，但未定义类型
    console.log(typeof a); // undefined
    a='c';
    console.log(typeof a); // string
    a=123.321;
    console.log(typeof a); // number
    a=true;
    console.log(typeof a);//boolean
    a=new Object();
    console.log(typeof a); // object


    // 创建一个学生对象
    let stu = new Object();
    stu.id=1;
    stu.name='马尔扎哈';
    stu.age=18;
    console.log(stu);
</script>
</body>
</html>