CSS与JavaScript基础-优快云博客

本文链接：https://blog.youkuaiyun.com/Bigoted_/article/details/79317712

本文介绍了CSS的基本概念及其在网页设计中的应用，包括行内样式表、内嵌样式表及外部样式表的使用方法。同时，文章还讲解了JavaScript的基础知识，如变量声明、基本语法、流程控制等。

CSS：是层叠样式表用来定义网页的实现效果，将网页内容和显示样式进行分离。可以解决html代码对样式定义的重复，提高了后期样式代码的可维护性，并增强了网页的现实效果功能。----将标签属性提取出来，进行统一操作，样式。

语法规则：---依托于html

<div>：封装区域后有换行。 ----层的概念

<span>：封装区域后无换行。----小层的概念

<p>：封装区域后有换行，且上下有空行---段落标签

样式的分类：

a）行内样式表—html元素中使用style属性

各种属性，集中到style中，style样式—里面样式和样式值之间用：隔开，不同属性之间用；隔开。属性和属性值之间用=

B）内嵌样式表---在html文档头部<head>区域使用<style>元素来包含css

C）外部样式---使用外部css文件—在html外面工程下建一个css文件调用

此处外部css文件连接<linkrel=””>，js使用src=“”实现外部链接

此处<p></p>之间的内容是css文件规定的样式。

<span></span>可以在行内操作一部分内容样式

Index越大离我们越近

JavaScript:

脚本语言，又称扩展语言，是一种编程语言，控制软件应用程序，通常以文本（如ASCII）保存，只在被调用时被解释或编程

实现功能，嵌入到html中实现（用户交互，动态更改内容，数据验证）一些简单的功能，如果实现大量的功能则用服务器

使用方式：<script>标签

<script>标签将语句嵌入到html文档
<script type="text/javascript" src="路径"></script>将js源文件连接到html

方法：

构成:function 函数名(参数列表){函数体}

在js中,0代表false,非零代表true

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js1</title>



<script type="text/javascript" src="..\..\myJS\js.js"></script>


</head>
<body>
<h1>a1</h1>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>语法</title>
<!-- 常量,变量 
var:它代表所有类型,js是弱语法,由后面的值来确定前面变量的具体类型


在js当中,使用变量前,一定要先给值,再使用.否则会报undefined.因为他没有默认值
1.window是一个窗口类,在使用他的方法的时候,可以省略当前的类名
2.document:是当前的页面类,write方法是document类的一个方法,作用:会把内容写在当前的页面上
3.+号的作用:类似于java,可以实现多个字符串相连
-->
<script type="text/javascript">
	var a = 5;
	var b = 6.7;
	
	var x;
	alert("haha"+x);
	x = prompt("BigData1702竞拍班长,请出一口价:",1);//第一个参数是提示信息 ,第二个参数是默认值
	document.write("拍卖价格"+x+"<br/>");
	document.write("恭喜您,以最高价格拍得");
	
	alert("哈哈哈");


</script>
</head>
<body>


</body>
<title>js中的流程控制语句和函数</title>
<!-- 
java中的/,结果是整数
js中的/,结果是小数
 -->


</head>
<body>
	第一个数:<input id="1" type="text"  name="user" value=11 /><br/>
	第二个数:<input id="2" type="text"/><br/>
	商:<input id="3" type="text"/>
	
	<!-- onclick是一个点击事件,咱们把点击按钮触发事件的过程称为事件驱动
	调用求商函数
	 -->
	<input type="button" value="求商" onclick="div()">
</body>


<script type="text/javascript">
		a;//全局变量--可以省略var
//构成:function 函数名(参数列表){函数体}
	function div(){
		var a;//局部变量
	   //获取两个标签对象
		var input1 = document.getElementById("1");
		var input2 = document.getElementById("2");
		var input3 = document.getElementById("3");
		//获取他们的值--默认是字符串
		var num1 = input1.value;
		var num2 = input2.value;
		
		//转化成浮点型后求商
		var num3 = parseFloat(num1)/parseFloat(num2);
		
		//将值传给标签input3
		input3.value = num3;
		
		//流程控制语句
		if(1){//在js中,0代表false,非零代表true
		
		}
		
		//
		var z = 4;
		switch(z){
			case 1:{
			
			}
			break;
			case 2:
			break;
			default:
			break;
		}
	
	}


</script>
</html>

Css--JS