java后端开发HTML，CSS，javaScript基础知识

最新推荐文章于 2022-04-11 21:11:01 发布

Java开发-斗灵

最新推荐文章于 2022-04-11 21:11:01 发布

阅读量741

点赞数 1

文章标签： html css javascript

本文链接：https://blog.csdn.net/ddh1314520/article/details/104794427

版权

HTML

<!-- HTML中的注释 -->
<!DOCTYPE html> <!-- HTML的版本号    无版本代表HTML5 -->
<html> <!-- HTML最外层的标签 -->
	<head> <!-- HTML头标签  里面包括大部分页面配置信息和标题 -->
	<meta charset="UTF-8"><!-- 页面的字符类型 -->
	<title>我的第一个html</title><!--页面的标题 -->
	</head>
	<body><!-- HTML的身体标签     里面放了HTML中的实际内容 -->
	<!-- 
		在HTML中   主要有两种标签
			单标签：字符集设置标签<meta charset="UTF-8" />
			双标签：根标签<html></html>
					头标签<head></head>
					标题标签<title></title>
			常用单标签：
					换行标签：<br />
					分割线<hr />
					&nbsp;一个英文空格
					&emsp;一个中文空格
			常用的双标签；
					段落标签：<p></p>  换行且有段落间距
					块标签：<div></div> 换行且无段落间距
					标记标签：<span></span>自身不含有特性  不换行也没有段落间距

					
	 -->
	 
	 <!-- 
	 		超链接标签  a标签
	 			href属性：跳转到指定页面
	 			页面中存在路径关系：
	 				1、绝对路径：以http://开始的路径    绝对路径   域名
			 			服务器路径
			 			相对路径
			 			base路径
			 			target属性：选择在当前页面显示新内容_self
			 						选择在新页面显示新内容_blank
	 				
	 				2、图片标签
						img标签  src属性  添加图片路径
								alt属性  当图片找不到时显示的内容
	 							width属性 设置图片的宽度高度，不允许加px
	 			

	 			<h3>前端的组成部分</h3>
	 			<ul> //列表标签  无序列表      
	 			        <!--  ol li
	 					有序列表 -->
	//列表标签 				<li>html</li>
	 				<li>css</li>
	 				<li>javaScript</li>
	 				<li>jquery</li>
	 			</ul>
	 
	 路径标签********重点			
	//路径标签 		<a href="http://www.baidu.com">百度一下，我不知道</a>	
	//图片标签      	<img src="img/5.jpg" alt="当图片找不到，显示内容"  width="400" height="300"/> 			
	 			
	//表格标签 	<table>
	 				<tr>
	 					<td>学号</td>
	 					<td>姓名</td>
	 					<td>班级</td>
	 					<td>课程</td>
	 					<td>分数</td>
	 				</tr>
				 //<th>  字体加粗
				 //<th width="100"> 表格加宽
	 				<tr>  
	 					<th width="100">学号</th>
	 					<th width="100">姓名</th>
	 					<th width="100">班级</th>
	 					<th width="100">课程</th>
	 					<th width="100">分数</th>
	 				</tr>
	 			</table>

	 			
	 //iframe框架标签	
	 			<iframe src="http://www.baidu.com" width="100%" height="600" ></iframe>
	 			
	 //表单标签     **********重点
		 <!-- form 标签      大部分标签需要name属性
		 		action:连接java的入口
		 		method:表单提交的方式 get post
		 		
		 		input 标签：输入标签
		 			type:
		 				text 文本行标签
		 				password 密码
		 				radio 单选框
		 				checkbox 多选框
		 				button 按钮
		 				submit 保存按钮
		 				reset 重置按钮
		 				
		 		select 标签：下拉框
		 			option 选项
		 			
		 		textarea 文本编辑器
		  -->
	 		<form action="#" method="get">
	 			用户名：<input type="text" /><br />
	 			密&emsp码：<input type="password" /><br />
	 			确认密码：<input type="password" /><br />
	 			选择性别：男<input type="radio" name="gender"/>女<input type="radio" name="gender"/>
	 			选择兴趣：java<input type="checkbox" name="hobby" />
	 					  前端<input type="checkbox" name="hobby" />
	 					  数据库<input type="checkbox" name="hobby" />
	 					  Linux<input type="checkbox" name="hobby" />
	 			选择国家：<select>
	 						<option>中国</option>
	 						<option>日本</option>
	 						<option>韩国</option>
	 					 </select>
	 			个人说明：<texttarea></texttarea><br />
	 			<input type="button" value="点击按钮" /> <input type="submit" value="提交"/> <input type="reset" value="重置" />
	 			
	 		</form>
	 		
	 		<form action="http://www.baidu.com/s" method="get">
	 			<input type="hidden" name="enc" value="utf-8" /><实际工作中会频繁使用隐藏域 避免用户看见一些信息>
	 			<input type="text" name="wd" id="" value="" />
	 			<input type="submit" value="百度一下，谁知道呢" />
	 		</form>
	 		//form标签添加表格
	 		<form action="#" method="get">
	 			<table>
	 				<tr>
	 					<td>用户名</td>
	 					<td><input type="text" name="" id="" value="" /></td>
	 				</tr>
	 				<tr>
	 					<td>密码：</td>
	 					<td><input type="password" name="" id="" value="" /></td>
	 				</tr>
	 				<tr>
	 					<td>确认密码</td>
	 					<td><input type="password" name="" id="" value="" /></td>
	 				</tr>
	 				<tr>
	 					<td>邮箱</td>
	 					<td><input type="eamil" name="" id="" value="" /></td>
	 				</tr>
	 				<tr>
	 					<td>性别：</td>
	 					<td>男<input type="radio" name="gender" id="" value="" />女<input type="radio" name="gender" id="" value="" /></td>
	 				</tr>
	 				<tr>
	 					<td>爱好：</td>
	 					<td>
	 						唱<input type="checkbox" name="hobby" />
	 						跳<input type="checkbox" name="hobby" />
	 						rap<input type="checkbox" name="hobby" />
	 						打篮球<input type="checkbox" name="hobby" />
	 					</td>
	 				</tr>
	 				<tr>
	 					<td>民族：</td>
	 					<td><select name="">
	 						<option value="">汉</option>
	 						<option value="">苗</option>
	 						<option value="">藏</option>
	 						</select>
	 					</td>
	 				</tr>
	 				<tr>
	 					<td valign="top">个人说明：</td>
	 					<td>
	 						<textarea></textarea>
	 					</td>
	 				</tr>
	 				<tr>
	 					<td><input type="reset" name="" id="" value="重置" /></td>
	 					<td><input type="submit" value="注册" /></td>
	 				</tr>
	 			
	 			</table>
	 		</form>
	</body>
	
</html>

CSS

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>
		
		<!-- 
			CSS 的固定写法
				属性名1：属性值1；
				...
				匹配所有标签    可进行样式修改
		 -->
		</title>
			<style type="text/css"> /* 在head标签内容  中添加style标签 type="text/css"   */
									/* 全部选择器   默认去掉所有标签边框  内边距和外边距 */
				div{ //选择器
					border:dashed 1px;
					width:400px;
					height:300px;
					color:blue;
					background-color:green;
					
					}
					
				div{
					border:dotted 1px;
					margin-bottom:5px;
				   	}
				p{
					border:dashed 1px;
					
					}
					
					/* 
						id选择器：
						id{
							属性名：属性值
						
						}
						只能修改指定id的标签样式
						注意：虽然id重复页面不会出现异常   但是通常情况下  不允许页面中标签id重复
					 */
					 d1{
					 	color:red;
					 }
					 
					/* 
						类选择器：.class{
									属性名：属性值;
									...
								}
						class 属性允许多个标签使用相同的clss 如果需要重复的样式 推荐使用class属性
					 */
					 .c1{
					 	color:green;
					 }
					
			</style>
			
			<!-- 外部导入CSS -->
			<link rel="stylesheet" type="text/css" href="css/style.css" />

	</head>
	<body>
		<div style="border: solid 1px; width:400px; height:300px; background-color:yellow; ">
			 我的div
		</div>
		<div id="d1">
			第一个div
		</div>
		<div>
			第二个div
		</div>
		<div>
			<p class="c1">
				我是P段落
			</p>
		</div>
	</body>
</html>

javaScript

<!DOCTYPE html>
<html>
	<head>
	
		<!-- 也可以外部引入js  如果一个script标签引入其他的js文件 name该标签中不可以编写js代码-->
		<script src="" type="text/javaScript">
			alert
		</script>
		
		<!-- 最简单的js版本的hello world! 需要编写script标签 -->
		<script type="text/javascript">
			/* system.out.println() */
			alert("Hello World!"); //弹窗
			
		</script>
		
		<script type="text/javascript">
				var i=1;
				var j=1.1;
				//字符串类型
				var c='s';
				var str="abc";
				alert(str);
				
				var b=true;
				//与java不同的是  数组使用[]
				var ary=[1,2,3,4,5];
				//可以直接创建对象
				var obj=new Object();
				
				var stu={
					id:1001,
					name:"ddh",
					age:21,
					toString:function(){
						return this.id + " "+ this.name+" "+ this.age;
					}
				};
				alert(stu);
				alert(i++);
				
				//js中的双目运算符
				+ - */ %
				//js中 赋值运算符
				= += -= *= /= %=
				//js中比较运算符
				> < >= <= != ==
				//js中== 等值运算符
				/* 只要值相等  就返回true
					在js中true==1
					      false==0
					数字和字符串可以直接比较
				*/
				
				var i=1;
				var j="1";
				var b=true;
				
				alert(i==j);
				alert(j==b);
				alert(b==i);
				alert(0==false)
				
				//声明一个变量
				var u;
				//在js中所有没有赋值的变量默认值均为undefined
				alert(u);
				//在Js中如果有任意数字与undefined值运算  结果均为NaN  Not a number
				//在js中任意数字与NaN运算   结果均为NaN
				//字符串与underfined  和 NaN的运算   均是拼接字符串操作
				var str="abc";
				alert(str+NaN);
				//alert(null == undefined);
				//null == undefined != NaN
				alert(1+null);
				
				//null值在与任意数字做运算时  都相当于0
				alert("abc"+null);
				//js中 === 等同运算符
				
				/* 
					js中数据类型 字符串值，数值，布尔值，数组，对象
					ECMAScript  有五种原始类型（primitive type）,即Undefined、Null
				*/
				alert(typeof(1));//number
				alert(typeof(NaN));//NaN  不是一个数字   但是是number类型
				alert(typeof('a'));//string
				alert(typeof([1,2,3,4,5]));//object
				var obj=new Object();
				alert(typeof(obj));//object
				alert(typeof(undefined));//undefined
				alert(typeof(null));//object
				
				/* js中的数组与java中的集合功能类似 */
				var ary=[3,1,2,5,4];
				alert(typeof(ary) + ":" + ary);
				
				for (var i = 0; i < array.length; i++) {
					for (var j = 0; j < array.length-i-1; j++) {
						if (ary[i]>ary[j+1]) {
							var temp=ary[j];
							ary[j]=ary[j+1];
							ary[j+1]=temp;
						}
					}
				}
				alert(ary);
				ary[10]=10;

				
				//js中的函数
				//声明函数
				function test(){
					alert("这是一个js中的函数");
				}
				
				//调用方法
				test();
				
				//查看方法名的类型  显示是一个function
				alert(typeof(test));
				
				//调用函数
				//js中的函数    不需要添加有无返回值  直接return即可
				//没有返回值    不写return
				//有返回值        写return
				
				//js中的形参  由于不存在其他数据类型  都是var类型  所以不需要也不允许添加其他形参的类型
				//直接写形参的变量名即可
				function add(x,y){
					return x+y;
				}
				alert(add(5,10));
				
				/* 
					js中函数可以写成匿名函数
					匿名函数要求必须被一个变量接收
					该变量就成为了函数变量
					
					函数变量名() 调用该函数
				*/
				var test=function(){
					alert("这是一个test函数");
				}
				test();
				
				/* js中的对象 */
				var obj=new Object();
				//对象中 没有改属性 则直接编写该属性名  初始化该属性
				obj.id=1001;
				obj.name="lisi";
				obj.age=18;
				
				alert(obj.id + " " + obj.name + " " + obj.age);
				obj.test=function(){
					alert("这是obj对象中的test函数");
				}
				obj.toString=function(){
					return this.id + " "+this.name+" "+this.age;
				}
				
				obj.test();//可以不在括号传参  一样输出正确结果
				
				
				！！！js中的json对象     非常重要 (实质Map集合  key-value)
				var jsonObject={
					"id" : 1001,
					"name" : "azrail",
					"age" : 18
					"toString" : function(){
						return this.id+ " "+this.name + " "+this.age;
					},
					"subObj" : {
						"id" : 1010,
						"name" : "subObj",
					}
				};
				
				//alert(jsonObject.id+ " "+ jsonObject.name+ " "+jsonObject.age);
				//alert(jsonObject);
				alert(jsonObject.subObj.id+ " "+ jsonObject.subObj.name);
				
				
				/* 
					js中所有的事件都是以on开始的
					最常用的事件：
							onclik:鼠标点击事件
							
				*/
				function testClick(){
						alert("这是一个鼠标点击事件");		
				}
				function checkUserName(){
					//1 获取username标签
					var username=document.getElementById("username");
					//2 判断username中是否输入了内容
						if(username.value! = null || username.value!= ""){
							//3 如果没有输入获取span标签
							var span=document.getElementById("usernameSpan");
							//4 在span标签中提示用户名不能为空
							span.innerHTML="用户名不能为空!";
						}else{
							//5 如果输入了值 将span的内容清空
							span.innerHTML=" ";
						}
				}
				
		</script>
		
		<meta charset="UTF-8">
		<title></title>
	</head>
	
	<body>
			<input type="button" name="" id="" value="这是一个按钮" onclick="testClick()" /><br />
			<h1>用户注册</h1>
			用户名：<input type="text" name="" id="" value="" /><br />
			密&emsp;码: <input type="password" name=" " id="" value="" />
		
	</body>
</html>

Java开发-斗灵

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
java后端开发HTML，CSS，javaScript基础知识

HTML<!DOCTYPE html> <html>  <head>  <meta charset...
复制链接

扫一扫