（尚硅谷）JavaWeb新版教程02-CCS-JS
文章目录
- 一、CSS
-
- 1、CSS 使用的三种方式
-
- 1.1 嵌入式样式表
- 1.2 内部样式表
- 1.3 外部样式表
- 2、CSS 的基础语法
-
- 2.1 标签选择器
- 2.2 ID 选择器
- 2.3 类选择器
- 2.4 组合样式
- 2.5 CSS 基本语法代码示例
- 2.6 网页展示
- 3、CSS 盒子模型
-
- 3.1 三个基本的属性
- 3.2 代码示例
- 3.3 网页展示
- 4、CSS 布局
-
- 4.1 基本属性
- 4.2 代码示例
- 4.3 网页展示
- 4.4 相对位置百分比高度宽度设置代码示例
- 4.5 网页展示
- 二、JavaScript
-
- 1、特性
- 2、JavaScript 代码嵌入方式
-
- 2.1 HTML文档内
- 2.2 引入外部 JavaScript 文档
- 3、一些内置函数
-
- 3.1 弹出警告框
- 3.2 弹出确认框
- 4、DOM 技术
-
- 4.1 事件的注册
- 4.2 常用的事件
- 4.3 静态注册代码示例和网页展示
- 4.4 动态注册代码示例和网页展示
- 4.5 DOM 补充说明（图源旧版 JavaWeb 教程）
- 4.6 课上用到的一些常用的属性
一、CSS
CSS：为了页面显示的美观
关于 CSS 的详细使用可以参考这个手册，CSS 参考手册，特别全，有点像翻译过来的 api 文档。
1、CSS 使用的三种方式
1.1 嵌入式样式表
-
在每个 html 标签内设置的，仅对当前标签开始和结束范围内的各种字体，块高等有效。
-
使用时是嵌入到一个 html 标签的开始标签中，作为一个属性，用 style 来定义：
代码举例：
<p><span style="font-size:60px;font-weight:bolder;color:yellow;">HELLOspan>p>
1.2 内部样式表
-
在 head 标签内设置，对当前页面有效。
-
使用时用一对 style 标签*包起来的，嵌套在 head 标签内：
代码举例：
<head>
<meta charset="utf-8">
<style type="text/css">
/* 被style标签包围的范围是CSS环境，可以写CSS代码（内部样式表） */
/* 标签样式表 */
p {
color: red;
}
style>
head>
1.3 外部样式表
-
引入外部CSS样式文件，放置在 head 标签内，对当前页面有效。
-
使用时用 link 标签，既不是单标签也不是双标签，没有结束标识符 / ，其中设置 rel、type 属性（固定格式，不可更改，表示链接的是一个样式表），还有 herf 属性（链接的文件的路径）:
代码举例：
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/demo01.css">
head>
2、CSS 的基础语法
- CSS样式由选择器和声明组成，而声明又由属性和值组成；
- 属性和值之间用冒号隔开；
- 多条声明之间用分号隔开；
- 使用/* … */声明注释。
2.1 标签选择器
- 直接定义一个标签，内部设置想要的样式；
- 使用时在 CSS 代码中直接写标签名，一个大括号，里面设置想要的属性。
代码举例：
/* 标签样式表 */
p {
color: red;
}
body {
margin: 0;
padding: 0;
background-color: #808080;
}
div {
position: relative;
float: left;
}
2.2 ID 选择器
- 每一个标签的 ID 各不相同，不能定义相同的 ID 名字，也就是说，这个 ID 选择器里面设置的样式，只适用于该标签作用范围内（虽然不唯一也不会报错，但是尽量唯一）；
- 使用时用 # 加 ID 名字的方式来定义，并用一对大括号括起来，里面设置想要的属性。
代码举例：
/* ID样式 */
#p4{
background-color:pink;
font-size:24px;
font-weight:bolder;
font-style:italic;
font-family:"华文彩云";
}
2.3 类选择器
- 不同的标签可以类名相同，这里可以设置一些通用样式
- 使用时用 . 加 类名 的方式来定义，并用大括号括起来。
代码举例：
/* 类样式 */
.f20 {
font-size: 20px;
}
2.4 组合样式
- 当我想定义的某两个或者更多个标签块的样式是相同的时候，我可以选择定义一个组合样式，上面的选择器可以任意组合
代码举例：
/* 组合样式 */
div p{
color:blue;
}
div .f32{
font-size:32px;
font-family:"黑体";
}
2.5 CSS 基本语法代码示例
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
/* 被style标签包围的范围是CSS环境，可以写CSS代码（内部样式表） */
/* 标签样式表 */
p {
color: red;
}
/* 类样式 */
.f20 {
font-size: 20px;
}
style>
<link rel="stylesheet" href="css/demo01.css">
head>
<body>
<p>这里是段落一p>
<p>这里是段落二p>
<p class="f20">这里是段落三p>
<p id="p4">这里是段落四p>
<div>
<p><span style="font-size:60px;font-weight:bolder;color:yellow;">HELLOspan>p>
<span class="f32">Worldspan>
<p class="f32">!!!p>
div>
body>
html>
其中的 demo01.css 文件：
/* ID样式 */
#p4{
background-color:pink;
font-size:24px;
font-weight:bolder;
font-style:italic;
font-family:"华文彩云";
}
/* 组合样式 */
div p{
color:blue;
}
div .f32{
font-size:32px;
font-family:"黑体";
}
2.6 网页展示
注意：
- 当嵌套使用的内层标签和外层标签都对同一个属性进行了设置，比如说字体大小 font-size ，那么显示的是内层标签定义的那个大小，就近原则。
3、CSS 盒子模型
3.1 三个基本的属性
-
盒子模型中包括三个主要的属性，具体使用要设置什么样式可以从 api 文档中进行查找，使用时定义在对应的选择器中就可以了。
- border 边框：可以设置边框粗细、样式、颜色等
- margin 间距：距离四周多大间距
- padding 填充：左边有一块儿地方被占用了
-
其中，单独的定义一个 margin:100px 100px 50px 150px; 后面设置一堆大小表示：一个值，四个方向统一；两个值：上下、左右；三个值：上、左右、下；四个值：上右下左（顺时针赋值）。
-
后面设置的相同属性会覆盖前面的设置。
-
实际尺寸= width+ 左右borderwidth + padding
3.2 代码示例
这里想设置很多嵌套的正方形，用 div 换行标记快来实现。
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#div1{
width:400px;
height:400px;
background-color:greenyellow;
/* 1. border 边框样式 */
border-width:1px; /*边框粗细*/
border-style:solid; /*边框样式：solid(实线) , dotted(点状线) ... */
border-color:blue; /*边框颜色*/
/* border:4px double blue;*/
border-top : 4px dotted blue;
}
#div2{
width:150px;
height:150px;
background-color:darkorange;
margin-top:100px;
margin-left:100px;
/* 2. margin:100px 100px 50px 150px;*/ /* 一个值，四个方向统一；两个值：上下、左右；三个值：上、左右、下；四个值：上右下左 */
/* 3. padding : 填充 */
padding-top:50px;
padding-left:50px;
}
#div3{
width:100px;
height:100px;
background-color:aquamarine;
/*
margin-top:50px;
margin-left:50px;
*/
}
#div4{
width:200px;
height:200px;
margin-left:100px;
background-color:greenyellow;
}
body{
margin:0;
padding:0;
}
style>
head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"> div>
div>
div>
<div id="div4"> div>
body>
html>
3.3 网页展示
4、CSS 布局
4.1 基本属性
- 布局的基本属性是 position 属性和 float 属性
- absolute – 绝对定位 , 需要配合使用 left , top 属性，表示距离页面左边上边多远距离
- relative – 相对定位 , 一般会和 float（相对父容器左边还是右边浮动） , margin , padding 等属性一起使用
4.2 代码示例
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body{
margin:0;
padding:0;
}
#div1{
width:200px;
height:50px;
background-color:greenyellow;
/* 绝对定位 */
position:absolute;
left:100px; /*距离左边上边多远距离*/
top:100px;
}
#div2{
width:200px;
height:50px;
background-color:pink;
position:relative;
float:left;
margin-left:20px;
}
style>
head>
<body>
<div id="div1"> div>
<div id="div2"> div>
body>
html>
4.3 网页展示
4.4 相对位置百分比高度宽度设置代码示例
想要的效果是，每个盒子中间没有间隙，且和网页边界也没有间隙，从这里可以看出来定义的百分比是相对于整个网页来说的，而不是剩余的网页行列来说的。
定义了 float 之后，除了这个盒子占据的长宽之外，这个盒子该行后面的列也可以被其他盒子所使用。
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body{
margin:0;
padding:0;
background-color:#808080;
}
div{
position:relative;
}
#div_top{
background-color: orange;
height:20%;
}
#div_left{
background-color: greenyellow;
height:80%;
width:15%;
float:left;
}
#div_main{
background-color: whitesmoke;
height:70%;
float:left;
width:85%;
}
#div_bottom{
background-color: sandybrown;
height:10%;
width:85%;
float:left;
}
#div_container{
width:80%;
height:100%;
border:0px solid blue;
margin-left:10%;
float:left;
}
style>
head>
<body>
<div id="div_container">
<div id="div_top">div_topdiv>
<div id="div_left">div_leftdiv>
<div id="div_main">div_maindiv>
<div id="div_bottom">div_bottomdiv>
div>
body>
html>
4.5 网页展示
二、JavaScript
这里笔记是新版的笔记，但是这部分讲解去看了旧版的视频，二倍速+快进，大概一个小时就看完了吧。
1、特性
-
脚本语言
JavaScript是一种解释型的脚本语言。不同于C、C++、Java等语言先编译后执行, JavaScript不会产生编译出来的字节码文件，而是在程序的运行过程中对源文件逐行进行解释。 -
基于对象
JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。但是面向对象的三大特性：『封装』、『继承』、『多态』中，JavaScript能够实现封装，可以模拟继承，不支持多态，所以它不是一门面向对象的编程语言。 -
弱类型
JavaScript中也有明确的数据类型，但是声明一个变量后它可以接收任何类型的数据，并且会在程序执行过程中根据上下文自动转换类型。 -
事件驱动
JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。 -
跨平台性
JavaScript脚本语言不依赖于操作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言。目前JavaScript已被大多数的浏览器所支持。
2、JavaScript 代码嵌入方式
2.1 HTML文档内
-
JavaScript 代码要写在 script 标签内
-
script 标签可以写在文档内的任意位置
-
为了能够方便查询或操作HTML标签（元素）script标签可以写在body标签后面
2.2 引入外部 JavaScript 文档
- 在 script 标签内通过 src 属性指定外部 xxx.js 文件的路径即可。但是要注意以下两点：
- 引用外部 JavaScript 文件的 script 标签里面不能写 JavaScript 代码，也就是如果还想写，就在下面再定义一组 script 标签，然后里面再写代码，此时按照定义标签的先后顺序来执行
- script 标签不能写成单标签，其中的 type 属性固定不可更改
3、一些内置函数
3.1 弹出警告框
- 直接在 JS 文件中写 alert(“警告框内容”); 就可以弹出一个警告框
- 只有一个确定按钮
代码示例：
alert("HELLO");
网页展示：
3.2 弹出确认框
- 使用时写 confirm(“确认框内容”); 就可以弹出一个确认框
- 用户点击『确定』返回 true ，点击『取消』返回 false
代码示例：
var result = confirm("老板，你真的不加个钟吗？");
if(result) {
console.log("老板点了确定，表示要加钟");
}else{
console.log("老板点了确定，表示不加钟");
}
网页展示：
点击确定之后：
点击取消之后：
4、DOM 技术
关于 DOM 技术的介绍的概念、具体概念、各种操作可以看一下这篇文章，第四节 DOM，这是尚硅谷给的官方笔记，上课老师没讲的可以通过这个来加深理解。
4.1 事件的注册
什么是事件的注册（绑定）？
- 其实就是告诉浏览器，当事件响应之后要执行哪些代码，叫做事件注册或事件绑定。
（1）静态注册
通过 html 标签的事件属性直接赋予事件响应后的代码，这种方式我们叫静态注册。
（2）动态注册
是指先通过 JS 代码得到标签的 DOM 对象，然后再通过 DOM 对象.事件名 = function(){ } 这种形式赋予事件响应后的代码，叫做动态响应。
- 获取标签对象
- 标签对象.事件名 = function(){ 想要执行的代码 }
4.2 常用的事件
4.3 静态注册代码示例和网页展示
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>检验事件的动态注册和静态注册title>
<script type="text/javascript">
// onload事件的方法
// 可以直接写在body标签里面，但是由于代码有很多，可读性会变差，所以写在 js 文件中封装成一个函数
function onLoadFun() {
alert("静态注册onload事件，所有代码");
}
script>
head>
<body onload="onLoadFun();">
body>
html>
注意：静态注册可以直接写在 body 标签里面，但是由于代码有很多，可读性会变差，所以写在 js 文件中封装成一个函数。
4.4 动态注册代码示例和网页展示
固定写法：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件的动态注册title>
<script type="text/javascript">
// onload事件动态注册，是固定写法
// 1. 获取标签对象
// 2. 标签对象.事件名 = function(){ 想要执行的代码 }
window.onload = function () {
alert("动态注册onload事件，所有代码");
}
script>
head>
<body>
body>
html>
4.5 DOM 补充说明（图源旧版 JavaWeb 教程）
注意：
- 获取到的元素节点如果是一个集合的话，就和数组一样的，集合中都是 DOM 对象，集合中元素顺序，是他们在 html 页面上从上到下的顺序，也就是代码从上到下的顺序。
- 使用的时候用 对象[i].属性名 来获取或者修改就可以了。
4.6 课上用到的一些常用的属性
鼠标悬浮：onmouseover
鼠标离开：onmouseout
鼠标点击：onclick
失去焦点：onblur