前端基础

  • 1.HTML
  • 1.1html基础标签
  • 1.2table标签
  • 1.3form标签
  • 1.4frame标签
  • 2.CSS
  • 2.1CSS语法
  • 2.2CSS盒子模型
  • 2.3CSS布局
  • 2.4水果库存静态页面demo
  • 3.javascript
  • 3.1js语法快速学习
  • 3.2改进之前的demo

本人java学习目标：后端开发，这些知识前端知识的皮毛 ，基本的前端知识还是需要了解一些的。

1.HTML

html是解释型语言，不是编译型，所以语法有错也可以运行。浏览器是容错的。

1.1html基础标签

1.<html>称之为开始标签 </html>称之为结束标签

2.head:网页的抬头
3.body：网页的内容

4.title：网页的标题
5.meta：设计编码方式
6.<br/>：换行
7.p：段落标签
8.<img/>：图片标签，src：路径，width与height：大小，title：标签
9.h1-h6：标题标签
10.ol：有序列表,start：开始，type：显示类型（A,I,i,a,1）
11.ui：无序列表,type:显示类型：disc,circle,square
12.b:加粗，i：斜体，u：下划线，sub：下标，sup：上标
13.<小于，>大于，≤小于等于，≥大于等于 更多符号：https://www.runoob.com/tags/html-symbols.html 14.span：不换行的块标记
15.a：超链接
16. href：链接的地址
target:
_self：在本窗口打开 _blank：在一个新窗口打开 _parent：在父窗口打开 _top：在顶层窗口打开
17.div：层

<html>

<head>
<title>网页的标题</title>

<meta charset="GBK">
</head>

<body>
hello world<br/>(网页的内容)

<p>这里是一个段落</p>
<p>这里是一个段落</p>

<img src="图片路径" width="57" height="73" title="这是一张图片"/>

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
编程语言排行榜：
<ol type="A" start="3">
<li>C</li>
<li>Python</li>
<li>Java</li>
</ol>
编程语言排行榜：
<ul type="square"></ul>
<li>C</li>
<li>Python</li>
<li>Java</li>

<b>甜豆腐</b><u>还是</u><i>咸豆腐</i><br/>
水分子：H<sub>2</sub>O
平方：2<sup>2</sup><br/>
5<10
10">>5
5≤10
10≥5<br/>

<a href="http://www.baidu.com" target="blank">百度一下</a>

</body>

</html>

前端java ui怎么选 java前端怎么写_java


前端java ui怎么选 java前端怎么写_java_02

1.2table标签

table：表格标签
tr：行
td：列
th：表头列
table有如下属性（已淘汰，了解即可）：
wigth：宽度border：表格边框的间隙 cellspacing：单元格间cellpadding：单元格填充
tr中有一个属性：align(center,left,right)
rowspan：行合并
colspan：列合并

<html>

<head>
<title>表格的学习</title>
</head>	

<body>
    <table border="1" width="600" cellspacing="0" cellpadding="4">
	   <tr>
	      <th>姓名</th>
		  <th>学号</th>
		  <th>专业</th>
		  <th>操作</th>
	   </tr>

	   <tr align="center">
	      <td>张三</td>
		  <td>001</td>
		  <td>计算机</td>
		  <td>删除</td>
	   </tr>

	   <tr align="center">
	      <td>李四</td>
		  <td rowspan="2">002</td>
		  <td>土木工程</td>
		  <td>删除</td>
	   </tr>

	   <tr align="center">
	      <td>王五</td>
		  <td>火星语</td>
		  <td>删除</td>
	   </tr>

	   <tr align="center">
	      <td>人数</td>
		  <td colspan="4">4</td>
	   </tr>
	</table>

</body>

</html>

前端java ui怎么选 java前端怎么写_java_03

1.3form标签

表单：form
action：提交的目的地
method：提交方式（get/post）
input type="text"表示文本框，其中name属性必须指定。
input type="password"表示密码框
input type="radio"表示单选框，name属性保持一致会互斥，checked默认选中
input type="checkbox"表示复选框，name属性建议保持一致
select：下拉列表，value是发给服务器的值，selected默认选中
textarea：多行文本框
input type=“submit”：表示提交
input type=“reset”：表示重置
input type=“button”：普通按钮

<html>
<head>
   <title>表单的学习</title>
</head>

<body>
   <form action="提交目的地" method="发送方式">
      昵称：<input type="text" name="nickname"/><br/>
	  密码：<input type="password" name="pwd"><br/>
	  性别：<input type="radio" name="gender" value="male">男
	        <input type="radio" name="gender" value="female" checked>女<br/>
	  爱好：<input type="checkbox" name="hobby" value="basketball" checked>篮球
	        <input type="checkbox" name="hobby" value="football">足球
			<input type="checkbox" name="hobby" value="badminton">羽毛球<br/>
	  职业：<select name="str">
	           <option value="1">家里蹲</option>
			   <option value="2">搬砖</option>
			   <option value="3" selected>打工</option>
			   <option value="4">有钱任性</option>
			   <option value="5">美国总统</option>
	        </select><br/>
	  备注：<textarea name="remark" rows="4" cols="50"></textarea><br/>
	  <input type="submit" value="注册">
	  <input type="reset" value="重置">
	  <input type="button" value="这是一个普通按钮">
   </form>
</body>
</html>

前端java ui怎么选 java前端怎么写_前端_04

1.4frame标签

frameset:页面框架，已淘汰，了解即可
frame：表示框架中的具体页面引用（相对或绝对路径都可以）
iframe：在一个页面嵌入一个子页面

<html>
   <head></head>
   <frameset rows="20%,*" >
      <frame src="pages/top.html" />
	  <frameset cols="15%,*">
	     <frame src="pages/left.html">
		    <frameset rows="80%,*">
			   <frame src="pages/main.html" />
			   <frame src="pages/bottom.html" />
			</frameset>
	  </frameset>
   </frameset>
</html>

前端java ui怎么选 java前端怎么写_学习_05

2.CSS

CSS的主要作用是对页面进行修饰

2.1CSS语法

1.CSS：最基本的分类：标签样式表，类样式表，ID样式表
2.CSS从位置上的分类：嵌入式样式表(写在标签内的)，内部样式表(style内)，外部样式表(把CSS语言单独写一个文件，在html中引用，减少代码复杂度，后缀css)

<html>
   <head>
      <style type="text/CSS">
	     /* 被style标签包围的是CSS环境，可以写CSS代码 */

		 /*标签样式表*/
		 p{
		    color:red;
		 }

		 /*类样式*/
		 .f20{
		    font-size:20px;
		 }

		 /*ID样式，尽量唯一！*/
		 #p4{
		   background-color:pink;
		   font-size:24px;
		   font-weight:bolder;
		   font-style:italic;
		   font-family:"华文彩云"
		 }

		 /*组合样式*/
		 div p{
		    color:blue;
		 }

		 div .f32{
            font-size:32px;
			font-family:"黑体";
		 }
	  </style>
	  <link rel="stylesheet" href="外部样式表地址">
   </head>

   <body>
      <p>段落1</p>
	  <p>段落2</p>
	  <p class="f20">段落3</p>
	  <p id="p4">段落4</p>

	  <div>
	     <p><span>HELLO</span></p>
		 <span class="f32">World</span>
		 <p class="f32">!!!</p>
	  </div>
   </body>
</html>

前端java ui怎么选 java前端怎么写_java_06

2.2CSS盒子模型

CSS盒子模型：
1.border：边框
2.margin：间距
3.padding：填充

<html>
   <head>

      <style type="text/css">
	     #div1{
		    width:400px;
			height:400px;
			background-color: lightgreen;
			
			/* 边框样式*/
			/*border-width:1px;粗细
			border-style:solid;样式
			border-color:blue;颜色*/

			border: 1px solid black;
		 }

		 #div2{
		    border: 1px solid black;
		    width:200px;
			height:200px;
			background-color:darkorange;

			/*
			margin-top:100px;
			margin-left:100px;
			*/
			
			margin:100px 100px 100px 100px/*上右下左，两个值：上下、左右，一个值：上下左右*/

			/*填充,参数与margin一致*/
			padding-top:50px;
			padding-left:50px;
		 }

		 #div3{
		    border: 1px solid black;
		    width:100px;
			height:100px;
			background-color:blue;
		 }
	  </style>
   </head>
   <body>
      <div id="div1">
	    <div id="div2">
		   <div id="div3"></div>
		</div>
	  </div>
   </body>
</html>

前端java ui怎么选 java前端怎么写_前端_07

2.3CSS布局

position:absolute – 绝对定位，需要配合使用left和top
relative – 相对定位，一般会和float，margin，padding…一起使用

<html>
   <head>
      <style type="text/css">
	     /*与父容器没有间距*/
	     body{
		    margin:0;
			padding:0;
		 }
		 /*使所有的div都是相对布局*/
		 div{
		    position:relative;
		 }
	     #div1{
		    width:200px;
			height:50px;
			background-color:greenyellow;

			/* 绝对定位*/
			position:absolute;
			/*x轴*/
			left:100px;
			/*y轴*/
			top:100px;
		 }
		 #div2{
		    width:200px;
			height:50px;
			background-color:pink;

			/*相对定位*/
			position:relative;
			/*靠父容器左边*/
			float:left;
			margin-left:20px;
			}

			#div3{
			height:50px;
			background-color:darkorange;
			}

			#div4{
		    width:200px;
			height:50px;

			float:left;/*div是行级，设置向左浮动，可以让右边的空间显示别的东西*/
			background-color:aqua;
			}

			#div5{
		    width:200px;
			height:50px;

			float:left;
			background-color:olivedrab;
			}
	  </style>
   </head>

   <body>
   <!--
      <div id="div1"></div>
	  <div id="div2"></div>
   -->
	  <div id="div3">
	     <div id="div4"></div>
		 <div id="div5"></div>
	  </div>
   </body>
</html>

前端java ui怎么选 java前端怎么写_html_08

2.4水果库存静态页面demo

CSS样式表：

body{
		    margin:0;
		    padding:0;
            background-color:gray;
		 }

		 div{
		    position:relative;
		    float:left;
		 }

		 #div_container{
		    width:80%;
		    height:100%;
		    margin-left:10%;
            background-color:honeydew;
		 }
		 
         #div_fruit_list{
            margin-top:200px;
            width:100%;
         }
         
         #tb1_fruit{
            border-collapse:collapse;
            width:100%;
         }
         
         #tb1_fruit tr , #tb1_fruit th , #tb1_fruit td{
            border:1px solid gray;
            font-size:28px;
            font-family:"黑体";
            font-weight:lighter;
            text-align:center;
         }
         
         .w20{
             width:20%;
         }

html代码：

<html>
   <head>
      <link rel="stylesheet" href="css/Demo.css">
   </head>

   <body>
      <div id="div_container">
	     <div id="div_fruit_list">
		    <table id="tb1_fruit">
			   <tr>
			      <th class="w20">名称</th>
				  <th class="w20">单价</th>
				  <th class="w20">数量</th>
				  <th class="w20">小计</th>
				  <th>操作</th>
			   </tr>
			   <tr>
			      <td>苹果</td>
				  <td>5</td>
				  <td>20</td>
				  <td>100</td>
				  <td>删除</td>
			   </tr>
			    <tr>
			      <td>西瓜</td>
				  <td>3</td>
				  <td>20</td>
				  <td>60</td>
				  <td>删除</td>
			   </tr>
			    <tr>
			      <td>菠萝</td>
				  <td>4</td>
				  <td>25</td>
				  <td>100</td>
				  <td>删除</td>
			   </tr>
			    <tr>
			      <td>榴莲</td>
				  <td>3</td>
				  <td>30</td>
				  <td>90</td>
				  <td>删除</td>
			   </tr>
			   <tr>
			      <td>总计</td>
				  <td colspan="4">99999</td>
			   </tr>
			<table>
		 </div>
	  </div>
   </body>
</html>

前端java ui怎么选 java前端怎么写_前端java ui怎么选_09

3.javascript

3.1js语法快速学习

javascript:客户端的一个脚本语言，语法与java类似
js是一门弱类型语言,变量的数据类型由后面赋的值的类型决定

<html>
   <head>
      <script language="javascript">
	     //变量的定义方式
	     var str = "hello js";
		 //alert表示对话框
		 alert(typeof str);
		 var person = new Object();
		 person.pid="p001";
		 person.pname="张三"
		 alert(person.pid+" "+person.pname);

		 //js方法，无返回值，无类型
		 function hello(name){
		    return "hello to"+name;
		 }
		 //调用方法
		 hello();
		 hello(1);
		 hello("aaa");

	  </script>
   </head>

   <body>
      
   </body>
</html>

3.2改进之前的demo

首先在head中导入js布置文件

<script type=“text/javascript” src=“JS/jsdemo.js”></script>

jsdemo布置文件：

window.onload=function(){
	updateXJ();
	//当页面加载完成，绑定各种事件
	//根据id获取到表格
	var fruitTb1=document.getElementById("tb1_fruit");
	//获取表格中所有的行
	var rows=fruitTb1.rows;
	for(var i=0;i<rows.length;i++){
		var tr=rows[i];
		//绑定鼠标悬浮设置背景颜色
		tr.onmouseover=showBGColor;
		tr.onmouseout=clearBGColor;
		//获取tr这一行的所有单元格
		var cells =tr.cells;
		var priceTD=cells[1];
		//绑定单价变手势
		priceTD.onmouseover=showHand;
		//绑定鼠标点击单价单元格的事件
		priceTD.onclick=editPrice;

		//绑定删除小图标的事件
		var img = cells[4].firstChild;
		if(img && img.tagName=="IMG"){
			img.onclick=delFruit;
		}
	}
}

function delFruit(){
	//弹出一个确认的对话框
	if(window.confirm("是否删除？")){
		var del = event.srcElement;
	    var tr=del.parentElement.parentElement;
	    var fruitTb1=document.getElementById("tb1_fruit");
	    fruitTb1.deleteRow(tr.rowIndex);

	    updateZJ();
	}
}

//当鼠标点击单价单元格时进行价格编辑
function editPrice(){
	if(event && event.srcElement && event.srcElement.tagName=="TD"){
		var priceTD=event.srcElement;
		//只有里面是文本的时候才进行此操作,TextNode对应3，ElementNode对应1
		if(priceTD.firstChild&&priceTD.firstChild.nodeType==3){
			//innerText 表示设置或获取当前节点的内部文本
		var oldprice=priceTD.innerText
		//innerHTML 表示设置当前节点的内部HTML
		priceTD.innerHTML="<input type= 'text' size='4'>";
		//上一行的代码相当于：<td><input type='text' size='4'></td>
		
		//获取第一个子节点，这时里面的子节点只有一个输入框
		var input=priceTD.firstChild;
		if(input.tagName=='INPUT'){
			input.value=oldprice;
			//选中输入框内部的文本
			input.select();
			//绑定输入框失去焦点事件，即点击了别的地方，更新单价
			input.onblur=updatePrice;
			//绑定键盘摁下的事件，保证输入的是数字
			input.onkeydown=ckInput;
		}
		}
	}
}

//检验键盘摁下值的方法
function ckInput(){
	var kc = event.keyCode;
	//0-9对应48-57，删除为8，回车为13
	if(!(kc>=48&&kc<=57||kc==8||kc==13))
		event.returnValue=false;
	if(kc==13)
		//失去焦点
	    event.srcElement.blur();
}

//更新单价的功能
function updatePrice(){
	if(event && event.srcElement && event.srcElement.tagName=="INPUT"){
		var input=event.srcElement;
		var newPrice = input.value;
		//input的父结点是td
		var priceTD = input.parentElement;
		priceTD.innerText=newPrice;

		//更新当前这一行的小计,td的父元素是tr
		updateXJ(priceTD.parentElement);
	}
}

//更新指定行的小计
function updateXJ(tr){
	if(tr && tr.tagName=="TR"){
		var tds = tr.cells;
		var price = tds[1].innerText;
		var count = tds[2].innerText;

		//字符串转化为整数
		var xj = parseInt(price)*parseInt(count);
		tds[3].innerText=xj;

		//更新总计
		updateZJ();
	}
}

//更新总计
function updateZJ(){
	var table = document.getElementById("tb1_fruit");
	var rows = table.rows;
	var sum = 0;
	for(var i=1;i<rows.length-1;i++){
		var tr=rows[i];
		//把结点里的文本字符串转化为整数
		var xj=parseInt(tr.cells[3].innerText);   //NaN not a number 不是一个数字
		sum+=xj;
	}

	rows[rows.length-1].cells[1].innerText=sum;
}
//当鼠标悬浮时，显示背景颜色
function showBGColor(){
	//event:当前发生的时间
	//event.srcElement：事件源
	//alert(event.srcElement);
	//alert(event.srcElement.tagName);   -->TD
	if(event && event.srcElement && event.srcElement.tagName=="TD"){
		var td = event.srcElement;
		//获取td的父元素，即tr
		var tr = td.parentElement;
		//设置tr的背景颜色
		tr.style.backgroundColor="navy";
		//获取tr中的所有单元格
		var tds = tr.cells;
		for(var i=0;i<tds.length;i++){
			tds[i].style.color="white";
		}
	}
}

//鼠标离开时，恢复原始样式
function clearBGColor(){
	if(event && event.srcElement && event.srcElement.tagName=="TD"){
		var td = event.srcElement;
		var tr = td.parentElement;
		tr.style.backgroundColor="transparent";
		var tds = tr.cells;
		for(var i=0;i<tds.length;i++){
			tds[i].style.color="black";
		}
	}
}

//鼠标悬停时，显示手势
function showHand(){
	if(event && event.srcElement && event.srcElement.tagName=="TD"){
		var td = event.srcElement;
		//cursor:光标
		td.style.cursor="hand";
		}
}

html文件

<html>
   <head>
      <link rel="stylesheet" href="css/Demo.css">
	  <script type="text/javascript" src="JS/jsdemo01.js"></script>
   </head>

   <body>
      <div id="div_container">
	     <div id="div_fruit_list">
		    <table id="tb1_fruit">
			   <tr>
			      <th class="w20">名称</th>
				  <th class="w20">单价</th>
				  <th class="w20">数量</th>
				  <th class="w20">小计</th>
				  <th>操作</th>
			   </tr>
			   <!--鼠标悬停,鼠标离开时调用方法-->
			   <tr >
			      <td>苹果</td>
				  <td >5</td>
				  <td>20</td>
				  <td>100</td>
				  <td><img src="imgs/del.jpg" width=20px height=20px/></td>
			   </tr>
			    <tr >
			      <td>西瓜</td>
				  <td>3</td>
				  <td>20</td>
				  <td>60</td>
				  <td><img src="imgs/del.jpg" width=20px height=20px/></td>
			   </tr>
			    <tr >
			      <td>菠萝</td>
				  <td >4</td>
				  <td>25</td>
				  <td>100</td>
				  <td><img src="imgs/del.jpg" width=20px height=20px/></td>
			   </tr>
			    <tr >
			      <td>榴莲</td>
				  <td >3</td>
				  <td>30</td>
				  <td>90</td>
				  <td><img src="imgs/del.jpg" width=20px height=20px/></td>
			   </tr>
			   <tr >
			      <td>总计</td>
				  <td colspan="4">99999</td>
			   </tr>
			<table>
			<hr/>
		 </div>
	  </div>
   </body>
</html>

实际效果

1.点击单价后可以进行修改

2.修改单价后会修改小计

3.随后会修改总价

4.点击叉可以直接删除一整行

前端java ui怎么选 java前端怎么写_前端_10

前端java ui怎么选 java前端怎么写_前端_11


前端java ui怎么选 java前端怎么写_java_12


前端java ui怎么选 java前端怎么写_前端_13


前端java ui怎么选 java前端怎么写_前端java ui怎么选_14