文章目录

  • 一、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 网页展示

hadoop尚硅谷笔记 尚硅谷javaweb_javascript


注意:

  • 当嵌套使用的内层标签和外层标签都对同一个属性进行了设置,比如说字体大小 font-size ,那么显示的是内层标签定义的那个大小,就近原则

3、CSS 盒子模型

3.1 三个基本的属性

  • 盒子模型中包括三个主要的属性,具体使用要设置什么样式可以从 api 文档中进行查找,使用时定义在对应的选择器中就可以了。
  1. border 边框:可以设置边框粗细、样式、颜色等
  2. margin 间距:距离四周多大间距
  3. 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 网页展示

hadoop尚硅谷笔记 尚硅谷javaweb_CSS_02

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 网页展示

hadoop尚硅谷笔记 尚硅谷javaweb_CSS_03

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 网页展示

hadoop尚硅谷笔记 尚硅谷javaweb_javascript_04

二、JavaScript

这里笔记是新版的笔记,但是这部分讲解去看了旧版的视频,二倍速+快进,大概一个小时就看完了吧。

1、特性

  1. 脚本语言
    JavaScript是一种解释型的脚本语言。不同于C、C++、Java等语言先编译后执行, JavaScript不会产生编译出来的字节码文件,而是在程序的运行过程中对源文件逐行进行解释。
  2. 基于对象
    JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。但是面向对象的三大特性:『封装』、『继承』、『多态』中,JavaScript能够实现封装,可以模拟继承,不支持多态,所以它不是一门面向对象的编程语言。
  3. 弱类型
    JavaScript中也有明确的数据类型,但是声明一个变量后它可以接收任何类型的数据,并且会在程序执行过程中根据上下文自动转换类型。
  4. 事件驱动
    JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。
  5. 跨平台性
    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");

网页展示:

hadoop尚硅谷笔记 尚硅谷javaweb_javascript_05

3.2 弹出确认框

  • 使用时写 confirm(“确认框内容”); 就可以弹出一个确认框
  • 用户点击『确定』返回 true ,点击『取消』返回 false

代码示例:

var result = confirm("老板,你真的不加个钟吗?");
if(result) {
	console.log("老板点了确定,表示要加钟");
}else{
	console.log("老板点了确定,表示不加钟");
}

网页展示:

hadoop尚硅谷笔记 尚硅谷javaweb_css_06


点击确定之后:

hadoop尚硅谷笔记 尚硅谷javaweb_javascript_07

点击取消之后:

hadoop尚硅谷笔记 尚硅谷javaweb_html_08

4、DOM 技术

关于 DOM 技术的介绍的概念、具体概念、各种操作可以看一下这篇文章,第四节 DOM,这是尚硅谷给的官方笔记,上课老师没讲的可以通过这个来加深理解。

4.1 事件的注册

什么是事件的注册(绑定)?

  • 其实就是告诉浏览器,当事件响应之后要执行哪些代码,叫做事件注册或事件绑定。

(1)静态注册
通过 html 标签的事件属性直接赋予事件响应后的代码,这种方式我们叫静态注册。

(2)动态注册
是指先通过 JS 代码得到标签的 DOM 对象,然后再通过 DOM 对象.事件名 = function(){ } 这种形式赋予事件响应后的代码,叫做动态响应。

  1. 获取标签对象
  2. 标签对象.事件名 = function(){ 想要执行的代码 }

4.2 常用的事件

hadoop尚硅谷笔记 尚硅谷javaweb_javascript_09

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 文件中封装成一个函数。

hadoop尚硅谷笔记 尚硅谷javaweb_css_10

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>

hadoop尚硅谷笔记 尚硅谷javaweb_CSS_11

4.5 DOM 补充说明(图源旧版 JavaWeb 教程)

hadoop尚硅谷笔记 尚硅谷javaweb_javascript_12


hadoop尚硅谷笔记 尚硅谷javaweb_hadoop尚硅谷笔记_13


hadoop尚硅谷笔记 尚硅谷javaweb_javascript_14


hadoop尚硅谷笔记 尚硅谷javaweb_javascript_15


注意:

  • 获取到的元素节点如果是一个集合的话,就和数组一样的,集合中都是 DOM 对象,集合中元素顺序,是他们在 html 页面上从上到下的顺序,也就是代码从上到下的顺序。
  • 使用的时候用 对象[i].属性名 来获取或者修改就可以了。

4.6 课上用到的一些常用的属性

鼠标悬浮:onmouseover
鼠标离开:onmouseout
鼠标点击:onclick
失去焦点:onblur