一、CSS
CSS：为了页面显示的美观
关于 CSS 的详细使用可以参考这个手册，CSS 参考手册，特别全，有点像翻译过来的 api 文档。
在每个 html 标签内设置的，仅对当前标签开始和结束范围内的各种字体，块高等有效。
使用时是嵌入到一个 html 标签的开始标签中，作为一个属性，用 style 来定义：
HELLO代码举例：
<p><span style="font-size:60px;font-weight:bolder;color:yellow;">HELLOspan>p>
在 head 标签内设置，对当前页面有效。
使用时用一对 style 标签*包起来的，嵌套在 head 标签内：
代码举例：
<head>
<meta charset="utf-8">
<style type="text/css">
/* 被style标签包围的范围是CSS环境，可以写CSS代码（内部样式表） */
/* 标签样式表 */
p {
color: red;
}
style>
head>
引入外部CSS样式文件，放置在 head 标签内，对当前页面有效。
使用时用 link 标签，既不是单标签也不是双标签，没有结束标识符 / ，其中设置 rel、type 属性（固定格式，不可更改，表示链接的是一个样式表），还有 herf 属性（链接的文件的路径）:
代码举例：
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/demo01.css">
head>
2.1 标签选择器 直接定义一个标签，内部设置想要的样式；使用时在 CSS 代码中直接写标签名，一个大括号，里面设置想要的属性。
代码举例：
/* 标签样式表 */
p {
color: red;
}
body {
margin: 0;
padding: 0;
background-color: #808080;
}
div {
position: relative;
float: left;
}
代码举例：
/* ID样式 */
#p4{
background-color:pink;
font-size:24px;
font-weight:bolder;
font-style:italic;
font-family:"华文彩云";
}
代码举例：
/* 类样式 */
.f20 {
font-size: 20px;
}
代码举例：
/* 组合样式 */
div p{
color:blue;
}
div .f32{
font-size:32px;
font-family:"黑体";
}
<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:"黑体";
}
注意：
盒子模型中包括三个主要的属性，具体使用要设置什么样式可以从 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>
<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>
想要的效果是，每个盒子中间没有间隙，且和网页边界也没有间隙，从这里可以看出来定义的百分比是相对于整个网页来说的，而不是剩余的网页行列来说的。
定义了 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>
这里笔记是新版的笔记，但是这部分讲解去看了旧版的视频，二倍速+快进，大概一个小时就看完了吧。
1、特性脚本语言
JavaScript是一种解释型的脚本语言。不同于C、C++、Java等语言先编译后执行, JavaScript不会产生编译出来的字节码文件，而是在程序的运行过程中对源文件逐行进行解释。
基于对象
JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。但是面向对象的三大特性：『封装』、『继承』、『多态』中，JavaScript能够实现封装，可以模拟继承，不支持多态，所以它不是一门面向对象的编程语言。
弱类型
JavaScript中也有明确的数据类型，但是声明一个变量后它可以接收任何类型的数据，并且会在程序执行过程中根据上下文自动转换类型。
事件驱动
JavaScript是一种采用事件驱动的脚本语言，它不需要经过Web服务器就可以对用户的输入做出响应。
跨平台性
JavaScript脚本语言不依赖于 *** 作系统，仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言。目前JavaScript已被大多数的浏览器所支持。
JavaScript 代码要写在 script 标签内
script 标签可以写在文档内的任意位置
为了能够方便查询或 *** 作HTML标签（元素）script标签可以写在body标签后面
2.2 引入外部 JavaScript 文档 在 script 标签内通过 src 属性指定外部 xxx.js 文件的路径即可。但是要注意以下两点： 引用外部 JavaScript 文件的 script 标签里面不能写 JavaScript 代码，也就是如果还想写，就在下面再定义一组 script 标签，然后里面再写代码，此时按照定义标签的先后顺序来执行script 标签不能写成单标签，其中的 type 属性固定不可更改 3、一些内置函数 3.1 d出警告框 直接在 JS 文件中写 alert(“警告框内容”); 就可以d出一个警告框只有一个确定按钮代码示例：
alert("HELLO");
网页展示：
代码示例：
var result = confirm("老板，你真的不加个钟吗？");
if(result) {
console.log("老板点了确定，表示要加钟");
}else{
console.log("老板点了确定，表示不加钟");
}
网页展示：
点击确定之后：
点击取消之后：
关于 DOM 技术的介绍的概念、具体概念、各种 *** 作可以看一下这篇文章，第四节 DOM，这是尚硅谷给的官方笔记，上课老师没讲的可以通过这个来加深理解。
4.1 事件的注册什么是事件的注册（绑定）？
其实就是告诉浏览器，当事件响应之后要执行哪些代码，叫做事件注册或事件绑定。（1）静态注册
通过 html 标签的事件属性直接赋予事件响应后的代码，这种方式我们叫静态注册。
（2）动态注册
是指先通过 JS 代码得到标签的 DOM 对象，然后再通过 DOM 对象.事件名 = function(){ } 这种形式赋予事件响应后的代码，叫做动态响应。
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 文件中封装成一个函数。
固定写法：
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.6 课上用到的一些常用的属性
鼠标悬浮：onmouseover
鼠标离开：onmouseout
鼠标点击：onclick
失去焦点：onblur
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）