day02【CSS&JS入门】、HTML引入CSS、基本选择器、字体和文本属性、盒子模型、HTML引入JS、JS三种输出方式、JS变量声明、JS数据类型
回顾
1. html概述
超文本标记语言
作用：搭建基础网页
2. 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：内容有多少，就占用多少
实体字符
英文半角：
中文：
表格
table -- 表格
tr -- 行
td -- 单元格
4. html表单（重点）
作用：1.采集用户数据、2.将数据发送给服务器
5. 案例：黑马旅游网注册页面
CSS&JS入门
今日目标
1. css样式（了解）
2. js入门（重点）
一 CSS概述
层叠样式表（Cascading Style Sheet）
作用：美化页面
层叠样式: 对同一个标签添加多个不同的样式,所有样式会叠加在一起展示出效果
初体验
<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
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01-HTML引入CSStitle>
<link rel="stylesheet" href="../css/mycss.css">
<style type="text/css">
h1{
color: skyblue;
}
style>
head>
<body>
<h1 style="color: red;">行内样式h1>
<h1>内部样式h1>
<h1>外部样式h1>
body>
html>
2.2 CSS书写规范
<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 基本选择器
<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>
<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 扩展选择器
<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>
<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 字体和文本属性
<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 案例：公司简介
<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>
<span style="color: red">“中关村黑马程序员训练营”span> 是由 <span style="font-weight: bold;font-style: italic">传智播客span> 联合中关村软件园、CSDN， 并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展， 而企业招不到优秀人才的困扰。
目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地， 并被评为中关村软件园重点扶持人才企业。
p>
<p>
黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”，
必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说，
黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确 保学员质量，并降低企业的用人风险。
p>
<p>
中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新， 不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。
p>
<p>
一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。
p>
<hr>
<p class="footer">
江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2020, All Rights Reserved 苏ICP备16007882
p>
body>
html>
3.3 背景属性
<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>
body>
html>
3.4 显示属性
<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>
<span>内联标签span1span>
<span>内联标签span2span>
<span>内联标签span3span>
<div>块级标签div1div>
<div>块级标签div2div>
<div style="display: none">块级标签div3div>
<ul>
<li>张三li>
<li>李四li>
<li>王五li>
ul>
body>
html>
3.5 浮动属性
- 打破常规，让div也能变小（实际大小跟 宽和高）
<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>
<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 盒子模型
<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>
<div class="box">
<img src="../img/girl.jpg" width="260px" height="260px" alt="">
div>
body>
html>
四 案例：黑马旅游网注册页面【作业】
需求
使用今天学习的CSS，完善昨天的黑马旅游网注册页面
<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" >
首页
周边游
山水游
古镇游
出境游
国内游
港澳游
台湾游
5A景点游
全球自由行
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 REGISTERp>
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
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>01-HTML引入JStitle>
head>
<body>
<script type="text/javascript">
document.write('我是内部脚本
');
script>
<script src="../js/myjs.js">
document.write('哈哈，这是一个错误的示范，我不会被加载.....')
script>
body>
html>
6.2 JS三种输出方式
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>02-JS三种输出方式title>
head>
<body>
<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中定义变量的类型方式如下：
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>03-JS变量声明title>
head>
<body>
<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一样，数据类型也分为基本数据类型（原始数据类型）和引用数据类型
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>04-JS数据类型title>
head>
<body>
<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>