前端基础

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

本文内容来自于b站尚硅谷的教程
尚硅谷javaweb教程2022版

本人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&lt;10
10&gt;5
5&le;10
10&ge;5<br/><a href="http://www.baidu.com" target="blank">百度一下</a></body></html>

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>

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>

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>

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>

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>

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>

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>

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对应1if(priceTD.firstChild&&priceTD.firstChild.nodeType==3){//innerText 表示设置或获取当前节点的内部文本var oldprice=priceTD.innerText//innerHTML 表示设置当前节点的内部HTMLpriceTD.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，回车为13if(!(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的父结点是tdvar priceTD = input.parentElement;priceTD.innerText=newPrice;//更新当前这一行的小计,td的父元素是trupdateXJ(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);   -->TDif(event && event.srcElement && event.srcElement.tagName=="TD"){var td = event.srcElement;//获取td的父元素，即trvar 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学习之前端基础相关推荐

Java学习07–前端基础之CSS
Java学习07–CSS基础 1.CSS介绍 1.1.发展史 css1.0 基本 css2.0 div(块)+css html与css结构分离的思想网页变简单 css2.1 浮动,定位 css3.0 ...
Java学习日记1——基础认知
Java学习日记1--基础认知学习Java阶段,如果发现不正确的描述,还请指正! 首先附上Java相关下载链接和配置教程链接 Java相关软件工具下载地址:官方下载 Java环境配置(win10配置 ...
Java学习---Day16_IO流基础篇
Java学习-Day16_IO流基础篇文件操作操作磁盘上的某一个文件或某一个文件夹,可以对他们进行创建或删除.移动.属性获取.属性设置等操作.但是,不包含读取文件的内容.拷贝文件 ps:java中 ...
Java学习笔记之基础篇
Java学习笔记之基础篇目录 Java如何体现平台的无关性? 面向对象(OO)的理解面向对象和面向过程编程的区别面向对象三大特征静态绑定和动态绑定(后期绑定) 延伸:类之间的关系组合(聚合) ...
Java学习路线-夯实基础
Java学习路线-夯实基础第一部分:网络与操作系统第二部分:数据结构与算法第三部分:Java基础第四部分:Java设计模式第五部分:数据库第六部分:Redis 第七部分:并发与多线程第八 ...
invader的java学习第一天基础篇
invader的java学习第一天基础篇一.java主要历史 ①java是Sun公司的产品,09年被Oracle公司收购. ②java语言之父:詹姆士高斯林二.jdk.jre.jvm三者关系 jd ...
invader的java学习第二天基础篇
invader的java学习第二天基础篇一.深入了解第一个Hello World程序 public class Hello World{ public static void main(String ...
JAVA学习之路--基础篇三
目录关于Java中从键盘输入的语句 nextxxx().next().nextLine()的区别语句 if和if else语句 Switch语句 for语句 while和do..while bre ...
java学习需要英文基础吗,详细说明
零基础大学生怎么学习Java?零基础大学生怎么学习Java?很多大学生在快毕业的时候,非常迷茫自己的未来职业规划和发展,不知道如何选择.希望有人可以可以帮助自己少这就和我们学习的语文和英语一样,汉语 ...

java学习之前端基础

前端基础

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学习之前端基础相关推荐

最新文章

热门文章