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版
1.HTML本人java学习目标：后端开发，这些知识前端知识的皮毛 ，基本的前端知识还是需要了解一些的。
1.1html基础标签html是解释型语言，不是编译型，所以语法有错也可以运行。浏览器是容错的。
1.称之为开始标签 称之为结束标签
2.head:网页的抬头
3.body：网页的内容4.title：网页的标题
5.meta：设计编码方式
6.
：换行
7.p：段落标签
8.：图片标签，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：层
网页的标题 hello world
(网页的内容)这里是一个段落
这里是一个段落
标题1
标题2
标题3
标题4
标题5
标题6
编程语言排行榜：编程语言排行榜：
- C
- Python
- Java
水分子：H2O 平方：22
5<10 10">>5 5≤10 10≥5
百度一下
table：表格标签
tr：行
td：列
th：表头列
table有如下属性（已淘汰，了解即可）：
wigth：宽度border：表格边框的间隙 cellspacing：单元格间cellpadding：单元格填充
tr中有一个属性：align(center,left,right)
rowspan：行合并
colspan：列合并
表格的学习
| 姓名 | 学号 | 专业 | 操作 | |
|---|---|---|---|---|
| 张三 | 001 | 计算机 | 删除 | |
| 李四 | 002 | 土木工程 | 删除 | |
| 王五 | 火星语 | 删除 | ||
| 人数 | 4 | |||
表单：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”：普通按钮
1.4frame标签表单的学习
frameset:页面框架，已淘汰，了解即可
frame：表示框架中的具体页面引用（相对或绝对路径都可以）
iframe：在一个页面嵌入一个子页面
2.CSS
2.1CSS语法CSS的主要作用是对页面进行修饰
1.CSS：最基本的分类：标签样式表，类样式表，ID样式表
2.CSS从位置上的分类：嵌入式样式表(写在标签内的)，内部样式表(style内)，外部样式表(把CSS语言单独写一个文件，在html中引用，减少代码复杂度，后缀css)
段落1
段落2
段落3
段落4
HELLO
World
!!!
2.2CSS盒子模型
CSS盒子模型：
1.border：边框
2.margin：间距
3.padding：填充
2.3CSS布局
position:absolute – 绝对定位，需要配合使用left和top
relative – 相对定位，一般会和float，margin，padding…一起使用
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代码：
名称
单价
数量
小计
操作
苹果
5
20
100
删除
西瓜
3
20
60
删除
菠萝
4
25
100
删除
榴莲
3
30
90
删除
总计
99999
3.javascript
3.1js语法快速学习
javascript:客户端的一个脚本语言，语法与java类似
js是一门弱类型语言,变量的数据类型由后面赋的值的类型决定
3.2改进之前的demo
首先在head中导入js布置文件
jsdemo布置文件：
window.onload=function(){
updateXJ();
//当页面加载完成，绑定各种事件
//根据id获取到表格
var fruitTb1=document.getElementById("tb1_fruit");
//获取表格中所有的行
var rows=fruitTb1.rows;
for(var i=0;i
//获取第一个子节点，这时里面的子节点只有一个输入框
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;iTD
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
html文件
