Day30
CSS
CSS常用样式
font-family:“微软雅黑” -设置字体
font-size: 50px -设置字体大小
font-style : italic-设置字体风格
font-weight:bolder -设置字体粗细
color: white-设置字体颜色
letter-spacing: 20px-设置文本内容的间隔
text-decoration :underline - 设置划线
text-align:center -设置文本对齐方式
background-color:red -设置背景颜色
border: black 5px solid -设置边框-颜色、粗细、实线
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> p{ font-family: "微软雅黑";/*设置字体*/ font-size: 50px;/*设置字体大小*/ font-style: italic;/*设置字体风格*/ font-weight: bolder;/*设置字体粗细*/ color: white;/*设置字体颜色*/ letter-spacing: 20px;/*设置文本内容的间隔*/ text-decoration: underline;/*设置划线*/ text-align: center;/*设置文本对齐方式*/ background-color: red;/*设置背景颜色*/ border: black 5px solid;/*设置边框 - 颜色、粗细、实线*/ } a{ text-decoration: none;/*设置划线*/ } a:link {color: black} /* 未访问的链接 */ a:visited {color: black} /* 已访问的链接 */ a:hover {color: dodgerblue} /* 鼠标移动到链接上 */ a:active {color: dodgerblue} /* 选定的链接 */ button{ background-image: url(../img/衣.jpg);/*设置背景图片*/ background-repeat: repeat-y;/*设置背景平铺方式*/ width: 500px; height: 500px; } </style> </head> <body> <p>初心至善</p> <a href="http://www.baidu.com">百度一下，你就知道</a> <br /> <button>普通按钮</button> </body> </html>
盒子模型
< div> < /div>
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ border: red 1px solid; width: 200px; height: 200px; /*margin: 50px; 设置上下左右外边距*/ margin-top: 50px;/*设置上外边距*/ margin-bottom: 50px;/*设置下外边距*/ margin-left: 50px;/*设置左外边距*/ margin-right: 50px;/*设置右外边距*/ padding: 50px; /*padding: 50px; 设置上下左右内边距*/ padding-top: 50px;/*设置上内边距*/ padding-bottom: 50px;/*设置下内边距*/ padding-left: 50px;/*设置左内边距*/ padding-right: 50px;/*设置右内边距*/ margin: 0 auto;/*水平居中,0表示上下外边距为0。auto表示左右外边距自动调整*/ } </style> </head> <body> <div> 初心至善 </div> </body> </html>注意：
1.内边距会把盒子撑变形
2.为了兼容IE老版本，能用外边距就用外边距
定位
position: relative-相对定位：保留原有位置，针对于原有位置进行位移
position:absolute-绝对定位：不保留原有位置，找寻父级标签，判断父级标签是否有position样式，如果有就按照父级标签位移，如果没有就继续向上找寻，直到body标签为止。
position:fixed-固定定位：将组件固定到页面的某个位置
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #manager{ border: orange 1px solid; margin-top: 80px; } #box01{ border: red 1px solid; width: 100px; height: 100px; position: absolute;/*绝对定位：不保留原有位置，找寻父级标签，判断父级标签是否有position样式，如果有就按照父级标签位移，如果没有就继续向上找寻，直到body标签为止*/ top:50px; left:50px; } #box02{ border: green 1px solid; width: 100px; height: 100px; position: relative;/*相对定位：保留原有位置，针对于原有位置进行位移*/ top: 50px; left: 50px; } #box03{ border: blue 1px solid; width: 100px; height: 100px; } </style> </head> <body> <div id="manager"> <div id="box01"></div> <div id="box02"></div> <div id="box03"></div> </div> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ position: fixed;/*固定定位：将组件固定到页面的某个位置*/ top: 50%; left: 90%; } </style> </head> <body> <a name="top"></a> <div> <a href="#top">置顶</a> </div> <a href="#new01">法治</a><!--链接到锚点的位置--> <a href="#new02">国际</a><!--链接到锚点的位置--> <a href="#new03">娱乐</a><!--链接到锚点的位置--> <a name="new01"></a><!--下锚点--> <h1>法治新闻</h1> <h1>法治新闻</h1> <h1>法治新闻</h1> <h1>法治新闻</h1> <h1>法治新闻</h1> <h1>法治新闻</h1> <h1>法治新闻</h1> <h1>法治新闻</h1> <h1>法治新闻</h1> <h1>法治新闻</h1> <h1>法治新闻</h1> <h1>法治新闻</h1> <h1>法治新闻</h1> <h1>法治新闻</h1> <h1>法治新闻</h1> <a name="new02"></a><!--下锚点--> <h1>国际新闻</h1> <h1>国际新闻</h1> <h1>国际新闻</h1> <h1>国际新闻</h1> <h1>国际新闻</h1> <h1>国际新闻</h1> <h1>国际新闻</h1> <h1>国际新闻</h1> <h1>国际新闻</h1> <h1>国际新闻</h1> <h1>国际新闻</h1> <h1>国际新闻</h1> <h1>国际新闻</h1> <h1>国际新闻</h1> <h1>国际新闻</h1> <h1>国际新闻</h1> <h1>国际新闻</h1> <h1>国际新闻</h1> <h1>国际新闻</h1> <h1>国际新闻</h1> <a name="new03"></a><!--下锚点--> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> <h1>娱乐新闻</h1> </body> </html>
浮动
浮动可以帮助我们更好进行页面排版，使原本竖着排列的盒子可以横向排列起来。
副作用：因为浮动会使元素脱离了标准的文档流，从而导致父级元素无法被撑开。
解决办法：添加空盒子
在被浮动的元素后面，添加一个空的div，并且设置一个clear类，并付给该div
.clear{clear:both;}
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #manager{ border: orange 1px solid; } #box01{ width: 50%; height: 100px; background-color: red; float: left; } #box02{ width: 50%; height: 100px; background-color: blue; float: right; } .clear{ clear: both;/*清除浮动影响 */ } </style> </head> <body> <div id="manager"> <div id="box01"></div> <div id="box02"></div> <div class="clear"></div> </div> </body> </html>注意：
clear属性的作用不是“清除”浮动元素，而是阻止元素与前面的浮动元素并排，强制将元素放到浮动元素的下方。 因此，clear并不是在“清除”浮动元素本身，而是在清除浮动元素对后续普通流元素的影响。这确保了包含它们的父容器能够正确扩展以包含所有子元素的高度。换句话说，它支撑了父容器，使父容器扩展到足以包含浮动元素。
扩展
repeat-x： 对图片在水平方向上重复
#EAF4FF：在背景图片未覆盖到的区域显示此颜色
border-radius: 5px：使得按钮的四个角都具有5像素的圆角，使按钮的外观更加柔和 。
border-radius:50%： 这条规则将图像的圆角半径设置为元素的50% ，使其变成一个圆。（ 如果图像不是正方形，那么这会使图像变成一个椭圆形。 ）
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> body{ background: url(../img/渐变色.jpg) center top repeat-x #EAF4FF; } button{ width: 100px; height: 50px; color: white; font-weight: bolder; background-color: orange; border-radius: 5px;/*圆角属性*/ box-shadow: 10px 10px 5px gainsboro;/*添加按钮阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/ text-shadow: 5px 5px 5px black;/*添加文本阴影 X轴偏移量 Y轴偏移量 阴影模糊半径*/ } img{ border-radius:50%; } </style> </head> <body> <button>普通按钮</button> <br /> <img src="../img/衣.jpg" /> </body> </html>
HTML5新特性
定义文档类型
在文件的开头总是会有一个标签
| 语言 | 文档类型声明方式 |
|---|---|
| html4 | !DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd” |
| html5 | !DOCTYPE html |
新增语义化标签
| 标签 | 描述 |
|---|---|
| header | 头部标签 |
| nav | 导航标签 |
| article | 内容标签 |
| section | 块级标签 |
| aside | 侧边栏标签 |
| footer | 尾部标签 |
<body>
<style type="text/css">
header,nav,article,aside,footer,section{
background-color: #87A442;
text-align: center;
border: black 1px solid;
border-radius:20px;
margin: 10px;
padding: 10px;
}
header{
height: 120px;
}
nav{
height: 50px;
}
article{
width: 46%;
height: 120px;
float: left;
}
aside{
width: 46%;
height: 120px;
float: right;yu
}
footer{
clear: both;
height: 120px;
}
section{
height: 70px;
}
</style>
<header>头部标签 - header</header>
<nav>导航标签 - nav</nav>
<div>
<article>内容标签 - article
<section>块级标签 - section</section>
</article>
<aside>侧边栏标签 - aside</aside>
</div>
<footer>尾部标签 - footer</footer>
</body>
新增表单内容
<form action="#" method="post">
日期选择器：<input type="date"/><br/>
时间选择器：<input type="time"/><br/>
邮箱输入框：<input type="email"/><br/>
数字输入框：<input type="number" value="50" min="10" max="100" step="5"/><br/>
URL输入框： <input type="url" list="url_list"/>
<datalist id="url_list">
<option label="W3School" value="http://www.w3school.com.cn" />
<option label="谷歌" value="http://www.google.com" />
<option label="百度一下" value="http://www.baidu.com" />
</datalist><br/>
<input type="submit" value="提交"/>
</form>
Javascript
Javascript是基于对象和事件驱动的脚本语言，主要是嵌入到HTML中，应用在客户端，动态操作网页元素，也可以作用于服务端。
特点：
交互性（表单校验，信息提示，动态数据图表，ajax异步提交，解析服务端响应数据等等）
安全性（不可以直接访问本地硬盘）
跨平台性（由浏览器解析执行，和平台无关）弱类型
变量
知识点：变量
语法：
var 变量名 = 值;<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> /** * 知识点：变量 * 语法： * var 变量名 = 值; */ var v = 100; console.log(v); v = "abc"; console.log(v); </script> </body> </html>
基本数据类型
number,string,boolean,undefined,null
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> /* * 知识点：JS基本数据类型 * 分类：number、string、boolean、undefined、null */ //number - 数值类型 var num = 100; console.log(num);//100 num = 123.123; console.log(num);//123.123 //string - 字符串类型 //注意：使用单引号或者双引号都是可以的 var str = 'abc'; console.log(str);//abc str = "abc"; console.log(str);//abc //boolean - 布尔类型 var bool = true; console.log(bool);//true bool = false; console.log(bool);//false //undefined - 无定义类型 var v; console.log(v);//undefined v = undefined; console.log(v);//undefined //null - 空类型 var v = null; console.log(v);//null </script> </body> </html>
基本数据类型的特殊点
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> //number - 数值类型的特殊点 //Infinity表示无穷大 console.log(Infinity + (-Infinity));//NaN - not a number //string - 字符串类型的特殊点 //字符串除了加是字符串拼接符，其余的都是做算数运算 var str1 = "10"; var str2 = "5"; console.log(str1 + str2);//105 console.log(str1 - str2);//5 console.log(str1 * str2);//50 console.log(str1 / str2);//2 console.log(str1 % str2);//0 //boolean - 布尔类型的特殊点 //""、0、undefined、null都表示false if(""){ console.log("true"); }else{ console.log("false"); } if(0){ console.log("true"); }else{ console.log("false"); } if(undefined){ console.log("true"); }else{ console.log("false"); } if(null){ console.log("true"); }else{ console.log("false"); } //undefined vs null var v1 = undefined; var v2 = null; console.log(typeof v1);//undefined console.log(typeof v2);//object //== vs === //==判断两个值是否相同 //===判断两个值+类型是否相同 var v3 = 100; var v4 = "100"; console.log(v3 == v4);//true console.log(v3 === v4);//false </script> </body> </html>
数组
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script type="text/javascript"> var arr = ["小亮","小宇","小丹"]; var arr1=[1,2,"123"]; //设置指定下标上的元素 arr[2] = "小蒲"; //获取指定下标上的元素 var element = arr[2]; console.log("获取指定下标上的元素：" + element); //获取元素个数 console.log("获取元素个数：" + arr.length); //添加元素 arr[3] = "小康"; arr[4] = "小航"; arr[10] = "玛卡巴卡"; //删除元素 delete arr[4]; console.log("---------------------"); //遍历数组 -- for for(var i = 0;i<arr.length;i++){ console.log(arr[i]); } console.log("---------------------"); //遍历数组 -- for-in //for-in表里有效元素的下标（undefined为无效下标） for(var index in arr){ console.log(arr[index]); } for (var index in arr1) { console.log(arr1[index]); } </script> </body> </html>注意：1.删除数组元素会将此位置留空，数组的长度不会发生变化。
2.一个数组里可以放不同类型的元素。
流程控制语句
for
<body> <script type="text/javascript"> /* * 1.求1-100之间的偶数之和 */ var sum = 0; for(var i = 1;i<=100;i++){ if(i%2==0){ sum += i; } } console.log("1~100之间偶数之和为：" + sum); </script> </body>while
<body> <script type="text/javascript"> /* * 2.我的梦想:第一个月存3000，每年递增1000，问多少个月后可以存到20万元 */ var allMoney = 0; var money = 3000; var month = 0; while(allMoney < 200000){ allMoney += money; month++; if(month%12==0){ money += 1000; } } console.log(month + "个月后存满20万"); </script>for嵌套
<body> <script type="text/javascript"> /* * 3.打印直角三角形 */ for(var i = 0;i<5;i++){ for(var j = 0;j<=i;j++){ document.write("*"); } document.write("<br/>"); } /** * 提升题： * write()和writeln()的区别 */ </script> </body>注意：1.要在页面打印，不能在控制台打印，因为会自动换行
2.换行用< br/>，writeln 在 < pre> 元素中或者 CSS 中设置 才能换行。
函数
含义：特定功能的代码块，类似于java中对于方法的定义
分类：
无参数无返回值的函数
带参数的函数
带返回值的函数<script type="text/javascript"> /* * 知识点：函数 * 含义：特定功能的代码块 * 分类： * 无参数无返回值的函数 * 带参数的函数 * 带返回值的函数 * */ //无参数无返回值的函数 function fun01(){ console.log("无参无返回值的函数"); } fun01(); //带参数的函数 //注意：参数不用写var function fun02(a,b){ console.log("带参数的函数：" + a + " -- " + b); } fun02(); fun02(10); fun02(10,20) //带返回值的函数 function fun03(){ return "带返回值的函数"; } var v = fun03(); console.log(v); //函数也是一种数据，我们可以把函数赋值给一个变量 var add = function(a,b,c){ return a+b+c; } console.log(add);//打印函数的信息 </script>注意：不写入参数会默认是undefined
函数重载？
注意：JS没有重载的概念，相同函数名会覆盖
<script type="text/javascript"> /* * 知识点：函数重载 * 注意：JS没有重载的概念，相同函数名会覆盖 */ function fun(a,b){ console.log(a+b); } function fun(a,b,c){ console.log(a+b+c); } fun(10,20) </script>注意：会返回NaN,因为参数有一个undefined。
函数递归
<script type="text/javascript"> /* * 知识点：函数递归 * * 需求：设计一个函数，传入n，求n的阶乘 */ function fun(n){ if(n != 1){ return fun(n-1)*n; }else{ return 1; } } var num = fun(5); console.log(num); </script>预定义函数
eval()
<script type="text/javascript"> console.log("将数据解析成整数：" + parseInt("123.123"));//123 console.log("将数据解析成小数：" + parseFloat("123.123"));//123.123 console.log("判断字符串是否是数字：" + isFinite("123"));//true console.log("判断字符串是否是非数字：" + isNaN("abc"));//true var str = "alert('初心至善');"; eval(str);//将字符串认为是JS代码去执行 </script>
DOM
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
HTML DOM （文档对象模型）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树。DOM 的核心概念： 通过语句获取 HTML 内容再进行操作
查找元素
通过id查找
<body> <h1 id="h1id">初心至善</h1> <script type="text/javascript"> //根据id获取元素对象 var h1 = document.getElementById("h1id"); //绑定单击事件 h1.onclick = function(){ //设置文本内容 this.innerText = "做真实的自己"; } </script> </body>通过class查找
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1 class="h1class">初心至善</h1> <h1 class="h1class">初心至善</h1> <script type="text/javascript"> //根据class获取元素对象数组 var h1 = document.getElementsByClassName("h1class")[0]; //绑定单击事件 h1.onclick = function(){ //设置文本内容 this.innerText = "做真实的自己"; } </script> </body> </html>根据标签获取
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h1>初心至善</h1> <h1>初心至善</h1> <script type="text/javascript"> //根据标签获取元素对象数组 var h1 = document.getElementsByTagName("h1")[0]; //绑定单击事件 h1.onclick = function(){ //设置文本内容 this.innerText = "做真实的自己"; } </script> </body> </html>根据name获取
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input type="text" name="xxx" value="xxx"/> <input type="text" name="xxx" value="xxx"/> <script type="text/javascript"> //根据name获取元素对象数组 var input = document.getElementsByName("xxx")[0]; //设置value属性 input.value = "用良心做教育"; /* * document表示dom树 * * 查找元素： * 通过id查找对象 * 通过class、name、标签查找对象数组 */ </script> </body> </html>
1869
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
