文章目录
- 一、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 来定义:
- <span style=“font-size:60px;font-weight:bolder;color:yellow;”>HELLO </span>
代码举例:
<p><span style="font-size:60px;font-weight:bolder;color:yellow;">HELLO</span></p><!--嵌入式样式表-->
1.2 内部样式表
- 在 head 标签内设置,对当前页面有效。
- 使用时用一对 style 标签*包起来的,嵌套在 head 标签内:
- <style type=“text/css”> 这里写CSS代码 </style>
代码举例:
<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 属性(链接的文件的路径):
- <link rel=“stylesheet” type=“text/css” href=“css/demo01.css”>
代码举例:
<head>
<meta charset="utf-8">
<!-- 引用外部的CSS样式表文件,外部样式表 -->
<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>
<!-- 引用外部的CSS样式表文件,外部样式表 -->
<link rel="stylesheet" href="css/demo01.css">
</head>
<body>
<!--
<p><font color="red">这里是段落一</font></p>
<p><font color="red">这里是段落二</font></p>
-->
<p>这里是段落一</p>
<p>这里是段落二</p>
<p class="f20">这里是段落三</p>
<p id="p4">这里是段落四</p> <!-- id属性在整个HTML文档中,尽量保持唯一(虽然重复也不会报错) -->
<div>
<p><span style="font-size:60px;font-weight:bolder;color:yellow;">HELLO</span></p><!--嵌入式样式表-->
<span class="f32">World</span>
<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_top</div>
<div id="div_left">div_left</div>
<div id="div_main">div_main</div>
<div id="div_bottom">div_bottom</div>
</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标签后面
- <script type=“text/javascript”> 这里写JS代码 </script>
2.2 引入外部 JavaScript 文档
- 在 script 标签内通过 src 属性指定外部 xxx.js 文件的路径即可。但是要注意以下两点:
- 引用外部 JavaScript 文件的 script 标签里面不能写 JavaScript 代码,也就是如果还想写,就在下面再定义一组 script 标签,然后里面再写代码,此时按照定义标签的先后顺序来执行
- script 标签不能写成单标签,其中的 type 属性固定不可更改
- <script type=“text/javascript” src=“js/demo07.js”></script>
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