JavaWebDay08

最新推荐文章于 2024-06-16 15:31:20 发布

4_3_9_6

最新推荐文章于 2024-06-16 15:31:20 发布

阅读量190

点赞数

分类专栏： JavaWeb

本文链接：https://blog.csdn.net/weixin_43938622/article/details/86102101

版权

JavaWeb 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

JavaWebDay08

课程大纲

1、CSS样式
2、JavaScript 基础语法

第一章 CSS样式

1、CSS的概述

A.CSS的含义：
	"层叠样式表"

B.CSS的作用:
	a.美化HTML页面
	b.解耦合,将HTML和CSS部分分离开来,多个程序员分工协作.一个写HTML.另一个写CSS
	c.可以拓展HTML的标签的功能,例如:之前的字体大小有上限,使用CSS无上限。

C.三种静态网页技术的含义
	a.HTML : 用于写HTML标签。例如: 建房子的毛坯房就是HTML
	b.CSS  ：用于美化HTML界面。例如: 房子需要装修。
	c.JavaScript ： 用于制作特效,校验表格等效果。例如：房子的特效。智能家电，智能家居

2、CSS引入的三种方式

A.内联样式

a.作用域:
	在当前的标签上面

b.格式:
	<font style="font-size: 88px;color: #FF9900"> 你是真的不错！心有多大,字有多大 </font>

B.内部样式

a.作用域:
	在当前的HTML页面上面

b.格式:
	<head>
		<meta charset="UTF-8">
		<title>CSS入门</title>
		<style type="text/css">
			font{
				font-size: 66px;
				color: #0000FF
			}
		</style>
	</head>
	<body>
		<font style="font-size: 88px;color: #FF9900"> 你是真的不错！心有多大,字有多大 </font>
		<br><br>
		<font> 牛逼啊 </font>
		<br><br>
		<font> 我的哥就是你哥 倪歌(你哥) </font>
	</body>

C.外部样式

a.作用域: 
	只要你引入了外部样式,整个页面都可以使用.(需要在外部新建CSS文件)

b.格式:
	<!-- HTML 代码 -->
	<head>
		<meta charset="UTF-8">
		<title>CSS入门</title>
		<link rel="stylesheet" href="css/a.css">
	</head>
	<body>
		<font> 牛逼啊 </font>
		<br><br>
		<font> 我的哥就是你哥 倪歌(你哥) </font>
	</body>
	<!-- CSS 代码 -->	
	font{
		font-size: 44px;
		color: #FF0000
	}

3、三种基本的选择器

A.ID选择器
	a.含义:
		(单独针对于某个HTML标签)"在一个HTML当中id要唯一"
	b.语法: 
		#id的名称{}

B.类选择器
	a.含义:
		(设置同一个类的,可以是不同的标签类型)
	b.语法:
		.class的名称{ }

C.元素选择器(设置的是同一类的标签)
		div{}

4、常见属性

border: #FF9900 1px solid;  /*设置边框*/
height: 120px;/*设置高度*/
width: 480px;/*设置宽度*/
float: left;  /*浮动,脱离原始文档流*/
text-align:center; /*内容居中*/
line-height:80px;/*行高*/
font-size: x-large; /*字体的大小large大字体(想一想衣服的尺码) */
color: #0000FF;/*设置颜色*/

5、盒子模型

A.外边距: margin 左上右下
B.内边距: padding 左上右下
	注意事项:
		内边距会影响原始的尺寸大小
		可以设置 *{ box-sizing: border-box;}  /*忽略边框不计算*/

第二章 JavaScript 基础语法

1、JavaScript 的概述

A.Java和JavaScript的关系
	没有半毛线的关系. "雷锋"和"雷峰塔"
	
B.JavaScript的分类
	a. ECMAScript JavaScript的标准语法
	b. BOM 浏览器对象模型 Browser
	c. DOM 文档对象模型  Document

2、JavaScript和HTML结合

A.内部定义（可以写在HTML的任意位置,建议大家写在</body>的前面）
	<script>
		//简单的JavaScript语法. alert 相当于 sout
		alert("HelloWorld");
	</script>
	
B.外部引入
	<!--src里面是js文件的路径-->
	<script src="../javascript/a.js"></script>

3、注释

A.单行注释
	//这是单行注释
	
B.多行注释
	/*
		这是多行注释
	*/

4、数据类型

A.原始数据(基本数据类型)
	a. number (整数,小数,NaN not a number)
	b. string
	c. boolean
	d. null
	e. undefined 未定义
	
B.引用数据类型(对象)

5、变量的使用

A.定义方式
	var 变量名称 = 变量值;

B.了解语法(写到HTML页面当中)
	document.write("<br>");  //可以把换行符写入到HTML文件当中

C.判断数据类型的操作
	a.语法格式
		typeof(变量名称) 返回值就是数据类型
	b.注意事项
		null 的typeof函数的返回值结果是 object 类型,这是JavaScript的bug

6、一元运算符

A.运算符的种类:
	++ 自增
	-- 自减
    + （正号）
	-（负号）

B.其他数据类型转换为number的规则
	a.string字符串:
    	情况1: 字符串的字面值,都是数字,就可以转换number类型
		情况2: 字符串的字面值,不全是数字,转换出来的是 NaN (not a number)
	b.boolean类型
		true  转换为 1
		false 转换为 0
	c.null 转换:
		null 转换为 number 类型的时候是 0
	d.undefined 转换
		undefined 转换为 NaN  (not a number)

7、比较运算符

== 和 === 的区别在哪里?
a.双等比较的是 数据值 是否相等 "123"==123  true
b.三等比较的是 比较数据类型是否相等,再看数据值是否相等 "123"===123  false

8、逻辑运算符"非"！的转换

A.number: 0或NaN为false,其他为true
B.string: 空字符串""为false,其他为true
C.null和undefined: 全是false
D.对象:全部是true

4_3_9_6

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWebDay08

JavaWebDay08课程大纲1、CSS样式2、JavaScript 基础语法第一章 CSS样式1、CSS的概述A.CSS的含义： "层叠样式表"B.CSS的作用: a.美化HTML页面 b.解耦合,将HTML和CSS部分分离开来,多个程序员分工协作.一个写HTML.另一个写CSS c.可以拓展HTML的标签的功能,例如:之前的字体大小有上限,使用CSS无上限。C.三...
复制链接

扫一扫