day27_css _js
回顾
```markdown
1. html概述
超文本标记语言
作用：搭建基础网页
2. html基础
书写规范
<html>
<head></head>
<body></body>
</html>
3. html常用标签
h1~h6：align="center"
hr：color="#ff ff ff" width="px %"
br：换行
p：段落
a：超链接，href（相对地址，绝对地址）
./ 当前目录
../ 上级目录
img：图像 src（相对地址，绝对地址）
ul ol：有序和无序列表
li 列表项
div和span：二个盒子标签
div：独自占有一行
span：内容有多少，就占用多少
实体字符
英文半角：
中文： 
表格
table -- 表格
tr -- 行
td -- 单元格
4. html表单（重点）
作用：1.采集用户数据、2.将数据发送给服务器
<form action="请求服务器地址" method="post">
<input name="" value="" type=""/>
text
password
date
radio
checkbox
file
rest
submit
button
<select name="">
<option></option>
</select>
<textarea name="" cols="" rows=""></textarea>
</form>
5. 案例：黑马旅游网注册页面
```
今日内容
-
CSS样式
-
JS
CSS概述
-
概述:
CSS(Cascading Style Sheet)层叠样式表
层叠样式: 对同一个标签应用不同的样式,所有样式会叠加在一起展示出效果.
-
优点:
- 把html内容和css样式分离,
- 降低了耦合度,提高了样式复用性,而且还可以提供更强大的美化效果.
HTML引入CSS
-
HTML引入CSS三种方式(遵从就近原则)
-
行内样式: 所有的标签都有一个共有的属性 style.在标签的style属性中写样式
-
作用域 该标签
-
语法
<h1 style = "css样式"></h1>
-
-
内部(内嵌)样式: 在页面中的style标签中写样式 style标签位置理论上任意,推荐放置在head中的底部 (因为自上而下的运行所以推荐放在head中)
-
作用域 本页面
-
语法
<style type="text/css">css样式</style>type="text/css"告诉浏览器把解析器切换CSS解析器type="text/css"可以省略
-
-
外部样式: 使用link标签引入外部样式
-
作用域 所有引入的页面
-
语法: <link rel="stylesheet" hre"外部css文件地址"/>
rel = "stylesheet" 告知浏览器我引入的文件为css样式.
-
-
浏览器的执行范围是自上而下, 如果先是内部样式, 再是外部样式, 那最终会被渲染为外部样式
-
案例如下
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>CSS引入方式</title> <!-- link 的href属性指明样式文件的地址 rel属性指明外部文件是当前页面的stylesheet样式表- -> <link href="../css/外部样式.css" rel="stylesheet"/> <!-- 告诉浏览器把解析器切换CSS解析器 type="text/css"可以省略--> <style type="text/css"> h2{ color:green;/*字体颜色 绿色*/ } </style> </head> <body> <!-- CSS引入方式 有三种 1.行内 在标签的style属性中写样式 作用域 该标签 2.内部(内嵌) 在页面中的style标签中写样式 style标签位置理论上任意,推荐放置在head中的底部 作用域 本页面 3.外部 使用link标签引入外部样式 作用域 所有引入的页面 --> <h1 style="color:red;">1.行内</h1> <h2>2.内部(内嵌)</h2> <h3>3.外部 </h3> </body> </html>
CSS语法规范
-
CSS语法
选择器{CSS样式}
选择器:匹配标签
CSS样式:标签要显示的外观效果 格式 {样式名:样式值;样式名:样式值;}
样式名多个单词用短杠-分割
样式值多个单词用空格 分割 -
CSS注释
/* CSS注释*/
-
如下案例
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>24-CSS语法</title> </head> <body> <!-- CSS语法: 选择器{CSS样式} 选择器:匹配标签 CSS样式:标签要显示的外观效果 格式 {样式名:样式值;样式名:样式值;} 样式名多个单词用短杠-分割 样式值多个单词用空格 分割 CSS注释 /* CSS注释*/ --> <style> font{ color:green;/*字体绿色*/ font-size:20px;/*字体大小*/ line-height: 40px;/*行高*/ font-weight:bold;/*加粗*/ font-style:italic;/*倾斜*/ border: 1px solid skyblue;/*边框*/ } </style> <font>床前明月光</font><br/> <font>疑是地上霜</font><br/> <font>举头望明月</font><br/> <font>低头思故乡</font><br/> </body> </html>
CSS基本选择器
-
选择器的作用: 选定一组特有的标签
-
选择器分类
- 标签 根据标签匹配元素 格式 标签{}
- class(类) 根据class的值匹配元素 class属性是给标签归类添加样式 格式 .class{}
- ID 根据id值匹配元素 id属性是标签的唯一标志 #id{}
-
案例如下
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>基本选择器</title> </head> <body> <!-- CSS基本选择器: 1.标签 根据标签匹配元素 格式 标签{} 2.类 根据class的值匹配元素 class属性是给标签归类添加样式 格式 .class{} 3.ID 根据id值匹配元素 id属性是标签的唯一标志 #id{} 渲染需求: 1.所有span标签中的文字为楷体 2.所有女性(class="female")的文字为红色 3.所有英雄(class="hero")的文字大小为50px 4.Java(id="main")的字体大小为100px --> <style> span{/*所有的span标签*/ font-family:"楷体";/*楷体*/ } .female{/*所有class值中有female的标签*/ color:red;/*字体红色*/ } .hero{/*所有class值中有hero的标签*/ font-size:50px;/*字体大小*/ } #main{/*匹配id=main的一个标签*/ font-size:100px;/*字体大小*/ } </style> <span class="female">小红</span> <span class="female">小美</span> <span class="female">小娜</span> <span class="female">小丽</span> <span class="female hero">小杰</span> <span class="male hero">小王</span> <span class="male hero">小黄</span> <span class="hero">小刚</span> <span id="main">Java</span> <span id="east">JavaScript</span> </body> </html>
CSS扩展选择器
-
并集(所有的选择器都渲染为css样式)
语法: 选择器1, 选择器2,...{css样式}
-
后代(只要后代选择器变成css样式)
语法: 父选择器 后代选择器 {css样式}
-
父子
语法:父选择器>子选择器 {css样式}
-
指定某个属性的标签
E[attribute=value]{css样式} -
如下案例
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>扩展选择器</title> </head> <body> <!-- 扩展选择器 关系 E,F 并列 E F 后代 属性 E[attribute=value] --> <style type="text/css"> span,p,label{/*并列关系*/ font-family: "楷体";/*字体类型*/ } div span{/*div所有的后代span标签*/ color:red;/*字体红色*/ } input[type="text"]{/* 有type属性值等于text的input标签*/ background-color: gold;/*背景颜色 金色*/ } </style> <div> <span>地址</span> <p> <span id="gbl">爱好</span> </p> </div> <span id="cld">性别</span> <br/> <label>姓名</label> <input type="text" name="userName" value="Jack"/><br/> <label>密码</label> <input type="password" name="userPass" value="123456"/><br/> </body> </html>
CSS常用样式
字体文本
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>字体文本</title>
<style type="text/css">
div p{
color:green;/*字体绿色*/
font-size:20px;/*字体大小*/
line-height: 40px;/*行高*/
font-weight:bold;/*加粗*/
font-family:'楷体';/*字体类型楷体*/
}
div p span{
font-style: italic;/*倾斜*/
text-decoration: underline;/*文本装饰 下划线*/
}
</style>
</head>
<body>
<div>
<p>
<span>学习必经三种境界:</span><br/>
第一境界“昨夜西风凋碧树。独上高楼，望尽天涯路。”<br/>
第二境界“衣带渐宽终不悔，为伊消得人憔悴。”<br/>
第三境界“众里寻他千百度。蓦然回首，那人却在，灯火阑珊处。”<br/>
</p>
</div>
</body>
</html>
背景
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>背景属性</title>
<style type="text/css">
div{
border:1px solid lightgray;/*边框 1px 实线 浅灰色*/
box-sizing:border-box;/*边框作为盒子大小*/
width:1000px;/*宽度*/
height:250px;/*高度*/
margin:0px auto;/*外边距 上下0px 左右自动居中*/
}
#d1{
background-color: #024bd5;/*背景颜色*/
}
#d2{
background-image: url("../img/heimakangyi.jpg");/*背景图片地址*/
background-repeat: no-repeat;/*背景图片不平铺*/
background-position: top 0px right 0px;/*背景图片位置 右上角*/
background-size: auto 250px;/* 设置背景图片宽度和高度。第一个值设置宽度，第
二个值设置的高度。如果只给出一个值，第二个是设置为"atuo(自动)"*/
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
</html>
显示
显示属性
display 标签的显示方式 常用取值
inline 显示为内联标签,内联标签设置宽高不起作用,因为它的宽高是由内容撑起来的.
block 显示为块级标签 可设置width 和height
none 隐藏不显示
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>显示属性</title>
<style>
span,div{
border: 1px solid lightgray;
width: 500px;
height: 100px;
}
</style>
</head>
<body>
<!--
显示属性
display 标签的显示方式 常用取值
inline 显示为内联标签,内联标签设置宽高不起作用,因为它的宽高是由内容撑起来的.
block 显示为块级标签 可设置width 和height
none 隐藏不显示
-->
<span>内联标签1</span>
<span style="display:inline;">内联标签2</span>
<span style="display:block;">内联标签3</span>
<div>块级标签1</div>
<div style="display:none;">块级标签2</div>
<div style="display:block;">块级标签3</div>
</body>
</html>
浮动属性
打破了常规, 让div也能变小
浮动: float 取值:left right
清除浮动: clear 取值为 both
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>09-浮动属性</title>
<style>
.box{
width: 150px;
height: 150px;
border: 1px solid red;
text-align: center;
}
#long{
float: left;
}
#hu{
float: right;
}
</style>
</head>
<body>
<!--
浮动：float
取值：left、right
清除浮动：clear
取值：both
-->
<div class="box" id="long">左青龙</div>
<div class="box" id="hu">右白虎</div>
<div style="clear: both"></div>
<div class="box">最后砍成米老鼠</div>
</body>
</html>
盒子模型
-
盒子模型的组成:
-
margin (外)边距 边框之外的距离 默认透明 可以设置 上 右 下 左 的 大小 margin: auto 水平居中
-
border 边框 可以设置边框的 上 右 下 左 的 大小 类型 颜色
-
padding (内)填充 边框和内容之间的距离 默认透明 可以设置 上 右 下 左 的 大小
-
content 内容 是标签中内容放置区域
-
-
盒子类型:
- box-sizing:content-box;(默认方式, 盒子大小是 宽高+内边距+外边距)
- box-sizing:border-box; (盒子大小是不会因为设置内边距外边距而变化)
-
设置宽高width和height两种方式
-
box-sizing:content-box; 设置的是content所占的宽度和高度
-
box-sizing:border-box; 设置的是border所占的宽度和高度
-
-
案例
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>盒子模型理论</title> </head> <body> <!-- 盒子模型的组成: margin (外)边距 边框之外的距离 默认透明 可以设置 上 右 下 左 的 大小 border 边框 可以设置边框的 上 右 下 左 的 大小 类型 颜色 padding (内)填充 边框和内容之间的距离 默认透明 可以设置 上 右 下 左 的 大小 content 内容 是标签中内容放置区域 设置宽高width和height两种方式 box-sizing:content-box; 设置的是content所占的宽度和高度 box-sizing:border-box; 设置的是border所占的宽度和高度 --> <style> div{ border:10px solid red;/*边框 10px 实线 红色*/ margin:40px;/*边距 40px*/ padding:30px;/*填充 30px*/ width: 300px;/*宽度*/ height: 100px;/*高度*/ box-sizing: content-box;/*默认:content所占的宽度和高度*/ box-sizing:border-box;/*默认:border所占的宽度和高度*/ } </style> <div>我是content内容1</div> <div>我是content内容2</div> <div>我是content内容3</div> </body> </html>
JavaScript概述
js的作用
JS用于完成页面与用户的交互功能.
js特点
- JS不需要编译,由浏览器直接解释执行.
- js是弱类型语言,js变量声明不需要指明类型,不同类型的数据可以赋值给同一变量.
js的组成
ECMA Script js的基础语法
BOM(Brower Object Model) 浏览器对象模型
DOM(Document Object Model) 文档对象模型
JavaScript基础语法
HTML引入JS
-
方式一 内部脚本
- 语法:
<script type="text/javascript">js代码</script>
- 语法:
-
方式二 外部脚本
- 语法:
<script src ="外部js文件地址"></script>
- 语法:
-
注意:
- script标签可以在页面任意位置, 推荐放在body中的尾部
- script标签没有自闭和, 必须加上闭合标签
- 如果script标签使用了src属性, 浏览器将不会解析此标签体的js代码(就是说引入外部脚本, 就不要在这个标签体内写内部脚本了)
-
两种方式案例代码
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>JS两种引入方式</title> </head> <body> <!-- JS两种引入方式 JS和CSS一样都需要引入到html页面中,浏览器才会解释执行 JS有两种引入方式 1. 内嵌(内部)脚本:在script标签中写js代码, script标签推荐放置在body标签的底部,理论上和style标签一样可以放置位置任意. 2. 外部脚步: 使用script标签的src属性引入外部js文件,使用注意事项: (没有内容还不能自闭合): script标签使用了src属性以后内部的代码不再被浏览器解释执行(了解). script引入外部脚本时不能使用自闭合格式(警告!!!). --> <!--告诉浏览器把解析器切换为js解析器 type="text/javascript"可以省略--> <script type="text/javascript"> document.write("<h1>内部脚本</h1>");//向body中追加html内容 </script> <script src="../js/外部脚本.js"></script> </body> </html>
JS三种输出方式
-
浏览器弹框输出字符
-
输出html内容到页面
-
输出到浏览器控制台
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>JS三种输出方式</title> </head> <body> <!-- JS三种输出方式 1. 输出到浏览器控制台 2. 输出html内容到页面 3. 浏览器弹框输出字符 --> <script > //1. 输出到浏览器控制台 console.log("1. 输出到浏览器控制台");//开发者专用 //2. 输出html内容到页面 document.write("2. 输出html内容到页面");//向body中追加html内容 //3. 浏览器弹框输出字符 alert("3. 浏览器弹框输出字符");//阻塞执行 </script> </body> </html>
JS变量声明
ECMAScript6之前 用var声明常量
ES6之后 用let声明变量, const声明变量
IDEA开发的话需要设置JS版本
可以变化的量,变量在js中用let修饰
不可以变化的量,常量用const修饰
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS变量</title>
</head>
<body>
<!--
JS变量 是用来存放数据
es6之后变量声明使用let 常量声明使用const 他们用于替代es6的var声明方式
(了解) es5以前变量声明使用var
JS是弱类型语言(理解):
声明变量时不知道变量的类型(undefined),只有在赋值之后js变量才确定类型.
typeof(a) 或 typeof a 输出变量的类型
undefined 变量未赋值,未知类型
-->
<script >
//字符串 Java声明 String str ="张三";
let str ="张三";
console.log(str);
//整数 Java声明 int k = 5;
let k = 5;
console.log(k);
//小数 Java声明 float f = 7.5;
let f = 7.5;
console.log(f);
//常量 Java声明 final Integer PI = 3.14;
const PI = 3.14;
console.log(PI);
//演示弱类型语言
let a;//声明变量不需要指明类型
console.log(typeof a);//undefined 未赋值类型,未知类型
a = "你好";
console.log(typeof a);//string
a = 123;
console.log(typeof a);//number
a = true;
console.log(typeof a);//boolean
a = new Object();
console.log(typeof a);//object
</script>
</body>
</html>
JS的数据类型
-
常用数据类型
1. string 字符串类型(前端 单双引号都是字符串)
2. number 数字 包括整数和小数类型
3. boolean 布尔类型 值只有 true和false 两个
4. object 对象类型 空对象使用 null表示
有两种格式(了解)
Object格式 例如 new Object();
JSON格式 例如 {name:"张三",age:18}
5. undefined 变量未赋值 -
引用数据类型
只要是new出来的 都是引用数据类型
let obj = new Object();
let date = new Date(); -
判断数据类型
typeof 变量名;
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS数据类型</title>
</head>
<body>
<!--
JS数据类型
常用数据类型
1. string 字符串类型
2. number 数字 包括整数和小数类型
3. boolean 布尔类型 值只有 true和false 两个
4. object 对象类型 空对象使用 null表示
有两种格式(了解)
Object格式 例如 new Object();
JSON格式 例如 {name:"张三",age:18}
5. undefined 变量未赋值
-->
<script >
//1. string 字符串
let str = "你好";
console.log(str);
console.log(typeof str);//string
//2. number 数字
let n = 123.456;
console.log(n);
console.log(typeof n);//number
//3. boolean 布尔类型
let boo = false;
console.log(boo);
console.log(typeof boo);//boolean
//4. object 对象类型 空对象使用 null表示
let obj = null;//或 new Object();
console.log(obj);
console.log(typeof obj);//object
//5. undefined 变量未赋值
let u = undefined;
console.log(u);//值是undefined
console.log(typeof u);//类型是undefined
//Object类型
let stu = new Object();//创建一个js对象,js对象的属性想要直接加上
stu.id = 1;
stu.name = "刘一";
stu.age = 18;
console.log(stu);//{id: 1, name: "刘一", age: 18}
console.log(typeof stu);//object
// JS对象取属性值有两种方式:
//1. obj.key
console.log(stu.name);//刘一
console.log(per.name);//陈二
//2. obj["key"]
console.log(stu["name"]); //刘一 == stu.name
console.log(per["name"]);//陈二 == per.name
let b = "age";
console.log(stu[b]);//可以取不定属性的值
</script>
</body>
</html>
网友评论