一、HTML
1.基础标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
Hello World！ <br/>你好，换行 //换行标签
<p>这是第一个段落</p>
<p>这是第二个标签</p>
<img src="" width="50" height="50" alt="当图片显示失败时显示本文本"> //图片
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<!-- 有序列表-->
武林高手排行榜
<ol type="A">
<li>扫地僧</li>
<li>萧远山</li>
<li>慕容博</li>
</ol>
<!--无序列表-->
武林大会人员名单
<ul>
<li>乔峰</li>
<li>阿朱</li>
</ul>
你是喜欢<b>咸</b>月饼还是<i>甜</i>月<u>饼</u>
水分子的化学式：H<sub>20</sub>
5<10
<span>框框</span>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
2.基础表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签的学习</title>
</head>
<body>
<!--border边框-->
<table border="1" width="600">
<tr>
<td>姓名</td>
<td>门派</td>
</tr>
<tr>
<td>乔峰</td>
<td>丐帮</td>
</tr>
<tr>
<td>扫地僧</td>
<td>少林</td>
</tr>
<hr/>
<table border="1" cellpadding="50" cellspacing="10">
<tr>
<td>水果</td>
<td>单价</td>
<td>操作</td>
</tr>
<tr align="center">
<td>苹果</td>
<td>5</td>
<td>删除</td>
</tr>
<tr>
<td>菠萝</td>
<td>55</td>
<td>删除</td>
</tr>
</table>
</body>
</html>
3.基础表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签学习</title>
</head>
<body>
<form action="demo04.html" method="post">
<!--name属性不指定的话，不会作为参数传递-->
昵称：<input type="text" name="nickName"><br/>
密码：<input type="password" name="pwd"><br/>
性别：<input type="radio" name="gender" value="male" checked="checked">男
<input type="radio" name="nickName" value="female">女<br/>
爱好：<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" name="hobby" value="football">足球<br/>
星座：<select name="star"><br/>
<option>白羊座</option>
<option value="2" selected>金牛座</option>
<option>天蝎座</option>
</select><br/>
备注：<textarea name="remark" rows="4" clos="50"></textarea><br/>
<input type="submit" value="注册">
<input type="reset" value="重置">
<input type="button" value="普通按钮">
</form>
</body>
</html>
二、CSS
- CSS最基本的分类：标签样式表，类样式表，ID样式表
- CSS从位置上的分类：内部样式表，嵌入式样式表，外部样式表
1.基础语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 内部样式表-->
<style type="text/css">
/*标签样式*/
p{
color: red;
}
/* . 是类样式*/
.f20{
font-size: 20px;
}
</style>
<!-- 引入外部css文件-->
<link rel="stylesheet" href="style/demo01.css">
</head>
<body>
<p>这里是段落一</p>
<p>这里是段落二</p>
<p class="f20">这里是段落三</p>
<p id="bg">这里是段落四</p>
<div>
<!-- style 嵌入式样式表 -->
<p><span style="font-size: 60px;font-weight: bolder">Hello</span></p>
<span class="f32">World</span>
<p class="f32">!!</p>
</div>
</body>
</html>
2.盒子模型
- border 边框
- margin 间距
- padding 填充
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#div1{
width: 400px;
height: 400px;
background-color: bisque;
/* 1.border边框样式*/
border-width: 1px;
border-style: solid;
border-color: blue;
}
#div2{
background-color: red;
width: 200px;
height: 200px;
margin-top: 100px;
margin-left: 100px;
}
#div3{
width: 100px;
height: 100px;
background-color: darkorchid;
margin: 50px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"> </div>
</div>
</div>
</body>
</html>
3.CSS布局
- position：absolute--绝对定位，配合 left，top
：relative--相对定位，配合float，margin，padding
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
div{
position: relative;
}
#div_top{
background-color: orange;
height:20%;
}
#div_left{
background-color: green;
height:80%;
width:15%;
/*往左边挤，右边空间可以被别人占用*/
float: left;
}
#div_main{
background-color: whitesmoke;
height: 70%;
width: 85%;
float: left;
}
#div_bottom{
background-color: pink;
height: 10%;
width: 85%;
float: left;
}
</style>
</head>
<body>
<div id="div_top">div_top</div>
<div id="div_left">div_left</div>
<div id="div_main">div_main</div>
<div id="div_bottom">div_bottom</div>
</body>
</html>
表单
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style/list.css">
</head>
<body>
<div id="div_container">
<div id="div_fruit_list">
<table id="tbl_fruit">
<tr>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr>
<th>西红柿</th>
<th>5</th>
<th>2斤</th>
<th>10元</th>
<th>删除</th>
</tr>
<tr>
<th>苹果</th>
<th>15</th>
<th>2斤</th>
<th>30元</th>
<th>删除</th>
</tr>
<tr>
<th>总计</th>
<th colspan="4">999</th>
</tr>
</table>
</div>
</div>
</body>
</html>
--------CSS
body{
margin: 0;
padding: 0;
/*background-color: darkgray;*/
}
div{
position: relative;
/*float: left;*/
}
#div_container{
width: 80%;
height: 100%;
border: 1px solid blue;
margin-left: 10%;
float: left;
}
#tbl_fruit{
margin-top: 120px;
width: 100%;
}
#tbl_fruit,#tbl_fruit tr,#tbl_fruit th,#tbl_fruit td{
border: 1px solid gray;
border-collapse: collapse;
/*float: left;*/
}
三、JS
- Javascript:客户端的一个脚本语言
- js是一门弱类型语言，变量的数据类型由后面赋的值所决定
- 事件绑定可以写在html标签中，也可以写在js文件进行统一的事件绑定
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style/list.css">
<script type="text/javascript" src="js/demo01.js"></script>
</head>
<body>
<div id="div_container">
<div id="div_fruit_list">
<table id="tbl_fruit">
<tr>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr>
<th>西红柿</th>
//通过html标签绑定对象
<th onmouseover="showHand()" >5</th>
<th>2斤</th>
<th>10元</th>
<th>删除</th>
</tr>
<tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
<th>苹果</th>
<!-- <th onmouseover="showHand()">15</th>-->
<th >15</th>
<th>2斤</th>
<th>30元</th>
<th>删除</th>
</tr>
<tr>
<th>总计</th>
<th colspan="4">999</th>
</tr>
</table>
</div>
</div>
</body>
</html>
//绑定对象
window.onload=function (){
//当页面加载完成，我们需要绑定各种事件
//根据id获取到表格
var fruitTbl = window.document.getElementById("tbl_fruit")
//获取所有行
var rows = fruitTbl.rows;
for (var i = 0; i < rows.length; i++) {
var tr = rows[i];
//1.绑定鼠标悬浮事件
tr.onmouseover=showBGColor;
//获取tr这一行的所有单元
var cells = tr.cells;
var priceTh = cells[1];
//2.绑定单价手势事件
priceTh.onmouseover = showHand;
//3.点击单价单元格，可进行修改
priceTh.onclick=editPrice;
}
}
//价格编辑
function editPrice(){
var priceTh = event.srcElement;
//innerText表示设置或获取 当前节点的内部文本
var oldPrice = priceTh.innerText;
//innerHTML表示设置当前节点的内部html
priceTh.innerHTML="<input type='text'/>";
var input = priceTh.firstChild;
if (input.tagName=="INPUT"){
input.value = oldPrice;
//选中输入框内部的文本
input.select();
//4.失去焦点，更新单价
input.onblur = updatePrice;
}
}
function updatePrice(){
var input = event.srcElement;
var newPrice = input.value;
//input节点的父节点是th
var priceTh = input.parentElement;
priceTh.innerText = newPrice;
//更新当前行小计
//th的父元素是tr
updateXJ(priceTh.parentElement);
//更新总计
updateZJ();
}
function updateZJ(){
//获取tbl
var tbl = document.getElementById("tbl_fruit");
var rows = tbl.rows;
var zj = 0;
for (var i = 1; i < rows.length-1; i++) {
var tr = rows[i];
var xj = parseInt(tr.cells[3].innerText);
alert(xj)
zj = zj + xj;
}
rows[rows.length-1].cells[1].innerText =zj;
}
function updateXJ(tr){
var ths = tr.cells;
var priceTh = ths[1].innerText;
var countTh = ths[2].innerText;
var sum = parseInt(priceTh) *parseInt(countTh) ;
ths[3].innerText=sum;
}
// 当鼠标悬浮时，显示背景颜色
function showBGColor(){
//event 当前发生的事件
//event.srcElement 事件源
// event.srcElement
// alert(event.srcElement.tagName)
if (event && event.srcElement.tagName=="TH"){
var th = event.srcElement;
var tr = th.parentElement;
tr.style.backgroundColor = "RED";
var tds = tr.cells;
for (var i = 0; i < tds.length; i++) {
tds[i].style.color = "white";
}
}
}
function clearBGColor(){
if (event && event.srcElement.tagName=="TH"){
var td = event.srcElement;
var tr = td.parentElement;
tr.style.backgroundColor="transparent"
}
}
function showHand(){
var th = event.srcElement;
th.style.cursor="hand";
}
