JavaWeb学习笔记-01-HTML&CSS&JS
文档及资料查询网站：
https://www.w3school.com.cn/html/html_entities.asp
1. 介绍
HTML：超文本标记语言（Hyper Text Markup Language）
CSS：层叠样式表（Cascading Style Sheets）
JS：脚本语言（JavaScript）
HTML相当于骨架，CSS是皮肤，JS是动作
2. HTML
<html>
<head>
<meta charset="UTF-8">
<title>
UntifA
title>
<style type="text/css">
div{
width: 200px;
height: 200px;
position: absolute;
}
#di1{
background-color: #ABC;
left: 0px;
top: 0px;
}
#di2{
background-color: #CBA;
left: 100px;
top: 100px;
}
#di3{
background-color: #BAC;
left: 200px;
top: 200px;
}
style>
head>
<body>
Hello,World!<br/>
<p>你好，HTMLp>
<img src="imgs/girl.jpg"/>
<br/>
<br/>
<img src="D:\WorkSpace\HTML\Demo\imgs\girl.jpg" width="57" height="73" title="这是一张图片"/>
<br/>
<br/>
<img src="imgs/girl1.jpg" alt="这是一张不显式的图片"/>
<br/>
<br/>
<h1>标题一h1>
<h2>标题二h2>
<h3>标题三h3>
<h4>标题四h4>
<h5>标题五h5>
<h6>标题六h6>
<ol type="i" start="5">
<li>第一li>
<li>第二li>
<li>第三li>
ol>
<ul type="circle">
<li>张三li>
<li>李四li>
<li>王五li>
<li>宋六li>
<li>钱七li>
ul>
<b>表示加粗b>
<br/>
<br/>
<i>表示斜体i>
<br/>
<br/>
<u>表示下划线u>
<br/>
<br/>
H<sub>2sub>O
<br/>
<br/>
O<sup>2sup>
<br/>
<br/>
<span>222222span>3333333
<br/>
<br/>
<a href="https://www.w3school.com.cn/html/html_entities.asp" target="_blank">https://www.w3school.com.cn/html/html_entities.aspa>
<br/>
<br/>
<div id="di1">层1div>
<div id="di2">层2div>
<div id="di3">层3div>
<br/>
<br/>
<table border="1" width="600" cellspacing="0" cellpadding="20">
<tr>
<th>行1列1表头th>
<th>行1列2表头th>
<th>行1列3表头th>
tr>
<tr align="center">
<td rowspan="2">行2列1td>
<td>行2列2td>
<td><img src="D:\尚硅谷Java学科全套教程（总207.77GB）\1.尚硅谷全套JAVA教程--基础必备（67.32GB）\尚硅谷JavaWeb2022版全新教程\代码素材资料\Day1-HTML\代码\02.HTML\imgs\del.jpg" width="20" height="20">td>
tr>
<tr align="center">
<td>行2列2td>
<td><img src="D:\尚硅谷Java学科全套教程（总207.77GB）\1.尚硅谷全套JAVA教程--基础必备（67.32GB）\尚硅谷JavaWeb2022版全新教程\代码素材资料\Day1-HTML\代码\02.HTML\imgs\del.jpg" width="20" height="20">td>
tr>
<tr align="center">
<td colspan="3">行2列1td>
tr>
table>
<form action="Demo1.HTML" method="post">
昵称：<input type="text" name="nickname"/>
密码：<input type="password" name="password">
性别：<input type="radio" name="gender" value="male" checked="checked">男
<input type="radio" name="gender" value="female">女<br/>
爱好：
<input type="checkbox" name="hobby" value="smock" checked>抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="shalong">烫头<br/>
生肖：
<select name="star">
<option value="1">蛇option>
<option value="2">牛option>
<option value="3" selected>马option>
<option value="4">鸡option>
<option value="5">狗option>
<option value="6">猪option>
<option value="7">羊option>
select><br/>
备注：<textarea name="remark" rows="10" cols="80">textarea><br/>
<input type="submit" name="icon1" value="注 册">
<input type="reset" name="icon2" value="重置">
<input type="button" name="icon3" value="普通按钮">
form>
body>
html>
3. CSS
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
/* 被style标签包围的范围是CSS环境，可以写CSS代码 */
/* 标签样式表 */
p{
color:red;
}
/* 类样式 */
.f20{
font-size:20px;
}
/* 组合样式 */
div p{
color: blue;
}
div .f32{
font-size: 44px;
}
style>
<link rel="stylesheet" href="css/demo01.css">
head>
<body>
<p>这里是段落一p>
<p>这里是段落二p>
<p class="f20">这里是段落三p>
<p id="p4">这里是段落四p>
<div>
<p><span style="font-size:60px;font-weight:bolder;color:yellow;">HELLOspan>p>
<span class="f32">Worldspan>
<p class="f32">!!!p>
div>
body>
html>
demo01.css
/* ID样式 */
#p4{
background-color: pink;
font-size: 44px;
font-weight: bolder;
font-style: italic;
font-family: "楷体";
}
盒子模型
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#div1{
width:400px;
height:400px;
background-color:greenyellow;
/* 1. border 边框样式 */
border-width:1px; /*边框粗细*/
border-style:solid; /*边框样式：solid(实线) , dotted(点状线) ... */
border-color:blue; /*边框颜色*/
/* border:4px double blue;*/
/* border-top : 4px dotted blue;*/
}
#div2{
width:150px;
height:150px;
background-color:darkorange;
margin-top:100px;
margin-left:100px;
/*margin:100px 100px 50px 150px;*/ /* 一个值，四个方向统一；两个值：上下、左右；三个值：上、左右、下；四个值：上右下左 */
/* padding : 填充 */
padding-top:50px;
padding-left:50px;
}
#div3{
width:100px;
height:100px;
background-color:aquamarine;
/*
margin-top:50px;
margin-left:50px;
*/
}
#div4{
width:200px;
height:200px;
margin-left:100px;
background-color:greenyellow;
}
body{
margin:0;
padding:0;
}
style>
head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"> div>
div>
div>
<div id="div4"> div>
body>
html>
相对定位、绝对定位
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body{
margin:0;
padding:0;
}
#div1{
width:200px;
height:50px;
background-color:greenyellow;
/* 绝对定位 */
position:absolute;
left:100px;
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;
background-color:aqua;
float:left;
}
#div5{
width:200px;
height:50px;
background-color:olivedrab;
float:left;
}
div{
position:relative;
}
style>
head>
<body>
<div id="div3">
<div id="div4"> div>
<div id="div5"> div>
div>
body>
html>
4. Javascript
客户端的脚本语言
例子：
文件目录
demo09.html
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/demo05.css">
<script type="text/javascript" src="js/demo09.js">script>
head>
<body>
<div id="div_container">
<div id="div_fruit_list">
<table id="tbl_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>5td>
<td>20td>
<td>100td>
<td><img src="imgs/del.jpg" class="delImg"/>td>
tr>
<tr>
<td>西瓜td>
<td>3td>
<td>20td>
<td>60td>
<td><img src="imgs/del.jpg" class="delImg"/>td>
tr>
<tr>
<td>菠萝td>
<td>4td>
<td>25td>
<td>100td>
<td><img src="imgs/del.jpg" class="delImg"/>td>
tr>
<tr>
<td>榴莲td>
<td>3td>
<td>30td>
<td>90td>
<td><img src="imgs/del.jpg" class="delImg"/>td>
tr>
<tr>
<td>总计td>
<td colspan="4">999td>
tr>
table>
<hr/>
<div id="add_fruit_div">
<table id="add_fruit_tbl">
<tr>
<td class="w30">名称：td>
<td><input class="input" type='text' id='fname'/>td>
tr>
<tr>
<td>单价：td>
<td><input class="input" type='text' id='price'/>td>
tr>
<tr>
<td>数量：td>
<td><input class="input" type='text' id='fcount'/>td>
tr>
<tr>
<th colspan="2">
<input type='button' id="addBtn" class="btn" value="添加"/>
<input type='button' class="btn" value="重填"/>
th>
tr>
table>
div>
div>
div>
body>
html>
css/demo05.css
*{
color: threeddarkshadow;
}
body{
margin:0;
padding:0;
background-color:#808080;
}
div{
position:relative;
float:left;
}
#div_container{
width:80%;
height:100%;
border:0px solid blue;
margin-left:10%;
float:left;
background-color: honeydew;
border-radius:8px;
}
#div_fruit_list{
width:100%;
border:0px solid red;
}
#tbl_fruit{
width:60%;
line-height:28px;
margin-top:120px;
margin-left:20%;
}
#tbl_fruit , #tbl_fruit tr , #tbl_fruit th , #tbl_fruit td{
border:1px solid gray;
border-collapse:collapse;
text-align:center;
font-size:16px;
font-family:"黑体";
font-weight:lighter;
}
.w20{
width:20%;
}
.delImg{
width:24px;
height:24px;
}
.btn{
border:1px solid lightgray;
width:80px;
height:24px;
}
#add_fruit_div{
border: 0px solid red;
width: 20%;
margin-left: 20%;
}
#add_fruit_tbl{
width: 80%;
margin-top: 32px;
margin-left: 10%;
border-collapse: collapse;
}
#add_fruit_tbl ,#add_fruit_tbl tr ,#add_fruit_tbl td{
border: 1px solid lightgray;
text-align: center;
line-height: 28px;
}
.w30{
width: 30%;
}
.input{
border: 1px solid lightgray;
width: 80%;
margin-left: 10%;
margin-right: 10%;
padding-left: 2%;
}
js/demo09.js
function $(id) {
return document.getElementById(id);
}
window.onload=function(){
updateZJ();
//当页面加载完成，我们需要绑定各种事件
//根据id获取到表格
var fruitTbl = $("tbl_fruit");
//获取表格中的所有的行
var rows = fruitTbl.rows ;
for(var i = 1 ; i<rows.length-1 ; i++){
var tr = rows[i];
trBindEvent(tr);
}
$("addBtn").onclick=addFruit;
}
function trBindEvent(tr){
//1.绑定鼠标悬浮以及离开时设置背景颜色事件
tr.onmouseover=showBGColor;
tr.onmouseout=clearBGColor;
//获取tr这一行的所有单元格
var cells = tr.cells;
var priceTD = cells[1];
//2.绑定鼠标悬浮在单价单元格变手势的事件
priceTD.onmouseover = showHand ;
//3.绑定鼠标点击单价单元格的事件
priceTD.onclick=editPrice;
//7.绑定删除小图标的点击事件
var img = cells[4].firstChild;
if(img && img.tagName=="IMG"){
//绑定单击事件
img.onclick = delFruit ;
}
}
function addFruit() {
var fanme = $("fname").value;
var price = parseInt($("price").value);
var fcount = parseInt($("fcount").value);
var xj = price * fcount;
var fruitTbl = $("tbl_fruit");
var tr = fruitTbl.insertRow(fruitTbl.rows.length-1);
var fnameTD = tr.insertCell();
fnameTD.innerText = fanme;
var priceTD = tr.insertCell();
priceTD.innerText = price;
var fcountTD = tr.insertCell();
fcountTD.innerText = fcount;
var xjTD = tr.insertCell();
xjTD.innerText = xj
var imgTD = tr.insertCell();
imgTD.innerHTML = "
"
updateZJ();
trBindEvent(tr)
}
function delFruit(){
if(event && event.srcElement && event.srcElement.tagName=="IMG"){
//alert表示弹出一个对话框，只有确定按钮
//confirm表示弹出一个对话框，有确定和取消按钮。当点击确定，返回true，否则返回false
if(window.confirm("是否确认删除当前库存记录")){
var img = event.srcElement ;
var tr = img.parentElement.parentElement ;
var fruitTbl = $("tbl_fruit");
fruitTbl.deleteRow(tr.rowIndex);
updateZJ();
}
}
}
//当鼠标点击单价单元格时进行价格编辑
function editPrice(){
if(event && event.srcElement && event.srcElement.tagName=="TD"){
var priceTD = event.srcElement ;
//目的是判断当前priceTD有子节点，而且第一个子节点是文本节点 ， TextNode对应的是3 ElementNode对应的是1
if(priceTD.firstChild && priceTD.firstChild.nodeType==3){
//innerText 表示设置或者获取当前节点的内部文本
var oldPrice = priceTD.innerText ;
//innerHTML 表示设置当前节点的内部HTML
priceTD.innerHTML="";
// imgs/del.jpg
