HTML
基础标签
标签作用
标签 | 作用 | 扩展 |
| html页面由一对html标签组成 | |
| 网页的标题 | |
| 设置编码格式 | < meta charset="UTF-8> |
| 换行 | 该标签是单标签 |
| 段落标签 | |
| 图片标签 | src:图片文件的路径 width、height:图片宽高 |
| 标题标签 | |
| 有序列表 | type:显示的类型(A a I i 1) start:从*开始 |
| 无需列表 | type:circle空心圆、square正方块 |
测试
<!DOCTYPE html>
<html lang="en">
<head>
<title>First website</title>
<meta charset="UTF-8">
</head>
<body>
Hello World!<br/>Hello,Sentiment!
<p>这是第一个段落</p>
<p>这是第二个段落</p>
<img src="imgs/WarmJava.jpg" width="50" height="45">
<h1>只有六级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
这是ol有序列表:
<ol type="A" start="2">
<li>Sentiemnt</li>
<li>Tana</li>
<li>Shelter</li>
</ol>
这是ul无序列表:
<ul type="disc">
<li>Sentiemnt</li>
<li>Tana</li>
<li>Shelter</li>
</ul>
</body>
</html>
效果
标签作用
标签 | 作用 | 扩展 |
| 下划线 | |
| 加粗 | |
| 斜体 | |
| 上标 | |
| 下标 | |
| 超链接 | href:连接 target: __blank 在一个新窗口打开 __self本窗口打开 |
测试
<!DOCTYPE html>
<html lang="en">
<head>
<title>First website</title>
<meta charset="UTF-8">
</head>
<body>
<u>下划线</u><br/>
<b>粗体</b><br/>
<i>斜体</i><br/>
上标<sup>2</sup><br/>
下标<sub>2</sub><br/>
5<10 版权©<br/>
<a href="" target="_blank">Sentimentのblog</a>
</body>
</html>
效果
table标签
标签 | 作用 | 扩展 |
| 表格 | border:边框线粗细 width:表格宽度 cellspacing:单元格间距 cellpadding:单元格填充 |
| 行 | align:center,left,right |
| 列 | |
| 表头列 |
测试
<!DOCTYPE html>
<html lang="en">
<head>
<title>First website</title>
<meta charset="UTF-8">
</head>
<body>
<table border="1" width="500" cellpadding="5" cellspacing="0">
<tr align="center">
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr align="center">
<td>苹果</td>
<td rowspan="2">5</td>
<td>20</td>
<td>100</td>
<td><img src="imgs/1.jpg" width="20"></td>
</tr>
<tr align="center">
<td>菠萝</td>
<td>15</td>
<td>45</td>
<td><img src="imgs/1.jpg" width="20"></td>
</tr>
<tr align="center">
<td>西瓜</td>
<td>6</td>
<td>6</td>
<td>36</td>
<td><img src="imgs/1.jpg" width="20"></td>
</tr>
<tr align="center">
<td>总计</td>
<td colspan="4">181</td>
</tr>
</table>
</body>
</html>
效果
表单标签
标签 | 作用 | 扩展 |
| 表单 | action:规定当提交表单时向何处发送表单数据。 method:请求方式 |
| 输入框 | type: text:文本框 password:密码框 radio:单选按钮通过checked设置默认值 checkbox:复选框 |
| 提交按钮 | type: submit:提交按钮 reset: 重置按钮 button:普通按钮 |
| 下拉列表 | option:下拉列表选项,select设置默认值 |
| 多行文本框 | value值就是结束标签前的内容 |
CSS
基本分类
标签样式表
/* 标签样式表*/
p{
color: red;
}
类样式表
/*类样式表*/
.f2{
font-size: 20px;
}
ID样式表
ID样式 尽量保持唯一不要重复使用
/* ID样式 尽量保持唯一不要重复使用*/
#p4{
background-color: pink;
font-size: 24px;
font-weight: bolder;
font-style: italic;
font-family:"华文中宋";
}
位置分类
嵌入式样式表
优先级下边两种样式
<p><span style="font-size: 80px;font-weight: bolder">Hi</span></p>
内部样式表
<p class="f2">这是第三段</p>
<p id="p4">这是第四段</p>
外部样式表
从外部调用样式
<link rel="stylesheet" href="css/1.css">
测试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<style type="text/css">
/*被style标签包裹的范围是CSS代码*/
/* 标签样式表*/
p{
color: red;
}
/*类样式表*/
.f2{
font-size: 20px;
}
/* ID样式 尽量保持唯一不要重复使用*/
#p4{
background-color: pink;
font-size: 24px;
font-weight: bolder;
font-style: italic;
font-family:"华文中宋";
}
/* div样式*/
div p{
color: blue;
font-size: 36px;
}
div .f23{
font-size: 32px;
font-family:"黑体";
color: green;
}
</style>
</head>
<body>
<p>这是第一段</p>
<p>这是第二段</p>
<p class="f2">这是第三段</p>
<p id="p4">这是第四段</p>
<div>
<p><span>Hi</span></p>
<span class="f23">Sentiment</span>
<p class="f23">!!!!</p>
</div>
</body>
</html>
也可以用外部样式,将style标签以及包含的内容换成<link rel="stylesheet" href="css/1.css">
外部链接即可
盒子模式
属性
border 边框
通过border属性可以对边框各属性进行设置
border-width: 4px;
border-style: solid;
border-color: blue;
可以通过一个border属性设置各属性值
border: 4px solid blue;
若只想对其中一遍设置可以用border-top/left/right//bottom
border-top: 4px solid blue;
margin 间距
通过margin属性可以对各边进行间距设置
margin-top: 100px;
margin-left: 100px;
也可以通过通过一个margin属性完成各边间距设置,默认顺时针方向设置
margin: 100px 100px 100px 100px;
padding 填充
通过padding可进行内部填充
padding-top: 50px;
padding-left: 50px;
body
浏览器左上角会留出一点间距,可以通过下边方式取消掉
body{
margin: 0;
padding: 0;
}
测试
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>demo02</title>
<style type="text/css">
#div1{
width: 400px;
height: 400px;
background-color: red;
/* border: 边框样式 */
border-width: 4px;
border-style: solid;
border-color: blue;
/*border: 5px solid blue;*/
/*border-top: 5px solid blue;*/
}
#div2{
width: 200px;
height: 200px;
background-color: pink;
margin-top: 75px;
margin-left: 75px;
/*margin: 100px 100px 100px 100px;*/
padding-top: 50px;
padding-left: 50px;
}
#div3{
width: 100px;
height: 100px;
background-color: aqua;
margin-top: 25px;
margin-left: 25px;
}
body{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
</html>
效果
CSS布局
属性
postion
absolute -- 绝对定位,需要配合left,top等使用
relative -- 相对定位,一般结合float,margin,padding使用
测试
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>demo03</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
div{
position: relative;
}
#div_top{
width: 100%;
height: 20%;
background-color: pink;
}
#div_left{
width: 15%;
height: 80%;
background-color: greenyellow;
float: left;
}
#div_main{
width: 85%;
height: 70%;
background-color: yellow;
float: left;
}
#div_bottom{
width: 85%;
height: 10%;
background-color: blue;
float: left;
}
#div{
width: 80%;
height: 100%;
border: 1px solid black;
margin-left: 10%;
float: left;
}
</style>
</head>
<body>
<div id="div">
<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>
</div>
</body>
</html>
结果
练习
效果
test.html
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/test.css">
</head>
<body>
<div id="div">
<div id="div_list">
<table id="tbl_list">
<tr>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr>
<td>苹果</td>
<td>5</td>
<td>20</td>
<td>100</td>
<td><img src="imgs/1.jpg" class="image"></td>
</tr>
<tr>
<td>西瓜</td>
<td>3</td>
<td>20</td>
<td>60</td>
<td><img src="imgs/1.jpg" class="image"></td>
</tr>
<tr>
<td>菠萝</td>
<td>4</td>
<td>25</td>
<td>100</td>
<td><img src="imgs/1.jpg" class="image"></td>
</tr>
<tr>
<td>榴莲</td>
<td>3</td>
<td>30</td>
<td>90</td>
<td><img src="imgs/1.jpg" class="image"></td>
</tr>
<tr>
<td>总计</td>
<td colspan="4">999</td>
</tr>
</table>
</div>
</div>
</body>
</html>
test.css
body{
margin: 0;
padding: 0;
background-color: honeydew;
}
div{
float: left;
position: relative;
background-color: gainsboro;
border-radius:16px
}
#div{
border: 0px black solid;
width: 80%;
height: 100%;
margin-left: 10%;
}
#div_list{
width: 100%;
height: 20%;
}
#tbl_list tr,#tbl_list th,#tbl_list td{
border: 1px solid gray;
height: 45px;
text-align: center;
font-family: 黑体;
font-size: 16px;
font-weight: lighter;
color: black;
}
#tbl_list{
width: 50%;
border-collapse: collapse;
margin-left: 25%;
margin-top: 16%;
}
.image{
width: 20px;
height: 20px;
border-radius:8px
}
JavaScript
JavaScript是一个客户端的脚本语言,它是一个弱类型语言,变量的数据类型由后面赋值类型决定。
HTML调用时需加上:
<script type="text/javascript" src="js/test.js"></script>
鼠标悬浮和离开操作
当鼠标悬浮时,显示背景颜色
function showBGColor(){
if(event && event.srcElement && event.srcElement.tagName=="TD"){
var td = event.srcElement;
//获取td的父元素 --> TR
var tr = td.parentElement;
//为节点添加样式,需要加上style
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";
}
}
}
将定义的事件加到标签上
<tr onmouseover="showBGColor()" onmouseout="clearBGColor()">
此时鼠标悬浮在单元格上时,则会高亮显示,离开后恢复原样
鼠标指到单价时,显示手势
function showHand(){
if(event && event.srcElement && event.srcElement.tagName=="TD") {
var td = event.srcElement;
td.style.cursor = "hand";
}
优化
上边方式需要逐一给单元格嵌套事件,所以下边引出了简便的方式:
window.onload=function (){
//根据id获取表格
var tbllist = document.getElementById("tbl_list");
//获取表格中的所有行
var rows = tbllist.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;
}
}
练习
实现添加、删除、计算总和等功能
HTML
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/test.css">
<script src="js/test.js">
</script>
</head>
<body>
<div id="div">
<div id="div_list">
<table id="tbl_list">
<tr>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr>
<td>苹果</td>
<td>5</td>
<td>20</td>
<td>100</td>
<td><img src="imgs/1.jpg" class="image"></td>
</tr>
<tr>
<td>西瓜</td>
<td>3</td>
<td>20</td>
<td>60</td>
<td><img src="imgs/1.jpg" class="image"></td>
</tr>
<tr>
<td>菠萝</td>
<td>4</td>
<td>25</td>
<td>100</td>
<td><img src="imgs/1.jpg" class="image"></td>
</tr>
<tr>
<td>榴莲</td>
<td>3</td>
<td>30</td>
<td>90</td>
<td><img src="imgs/1.jpg" class="image"></td>
</tr>
<tr>
<td>总计</td>
<td colspan="4">999</td>
</tr>
</table>
<hr/>
<div id="add_div" >
<table id="add_tbl">
<tr>
<td>名称:</td>
<td><input type="text" id="tname" class="input" value="apple"></td>
</tr>
<tr>
<td>单价:</td>
<td><input type="text" id="price" class="input" value="5"></td>
</tr>
<tr>
<td>数量:</td>
<td><input type="text" id="number" class="input" value="100"></td>
</tr>
<tr>
<th colspan="2"><input type="button" id="addbtn" value="添加">
<input type="button" id="reset" value="重置">
</th>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
CSS
body{
margin: 0;
padding: 0;
background-color: gainsboro;
}
div{
float: left;
position: relative;
background-color: honeydew;
}
#div{
border: 0px black solid;
width: 80%;
height: 100%;
margin-left: 10%;
}
#div_list{
width: 100%;
height: 20%;
}
#tbl_list tr,#tbl_list th,#tbl_list td{
border: 1px solid gray;
height: 45px;
text-align: center;
font-family: 黑体;
font-size: 16px;
font-weight: lighter;
color: black;
}
#tbl_list{
width: 50%;
border-collapse: collapse;
margin-left: 25%;
margin-top: 16%;
}
.image{
width: 20px;
height: 20px;
border-radius:8px
}
#add_div{
width: 30%;
border: 0px solid red;
margin-left: 35%;
}
#add_tbl{
margin-left: 10%;
margin-top: 32px;
border: 1px solid black;
width: 80%;
border-collapse: collapse;
}
#add_tbl tr,#add_tbl td,#add_tbl th{
border: 0px solid black;
text-align: center;
line-height: 28px;
}
.input{
width: 90%;
padding-left: 5px;
}
JS
function $(tr){
return document.getElementById(tr);
}
window.onload=function (){
updateZJ();
//根据id获取表格
var tbllist = $("tbl_list");
//获取表格中的所有行
var rows = tbllist.rows;
for(var i=0 ; i < rows.length-1; 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 = deltr;
}
//回车提交事务
priceTD.onkeydown=ckInput;
//点击addbtn按钮添加一行信息
$("addbtn").onclick=addlist;
}
}
//添加一行信息
function addlist(){
var tname = $("tname").value;
var price = $("price").value;
var number = $("number").value;
var xj = price*number;
var tbllist = $("tbl_list");
var tr = tbllist.insertRow(tbllist.rows.length-1);
var tnameTD = tr.insertCell();
tnameTD.innerText = tname;
var priceTD =tr.insertCell();
priceTD.innerText = price;
var numberId = tr.insertCell();
numberId.innerText = number;
var xjTD = tr.insertCell();
xjTD.innerText = xj;
var imgTD = tr.insertCell();
imgTD.innerHTML = "<img src='imgs/1.jpg' class='image'/>";
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 = deltr;
}
//回车提交事务
priceTD.onkeydown=ckInput;
updateZJ();
}
//删除行
function deltr(){
if (event && event.srcElement && event.srcElement.tagName == "IMG") {
if(window.confirm("是否确认删除当前记录")){
var img = event.srcElement;
var tr =img.parentElement.parentElement;
var tablelist = $("tbl_list");
tablelist.deleteRow(tr.rowIndex);
updateZJ();
}
}
}
//回车提交单价事务
function ckInput(){
var kc = event.keyCode;
if(!((kc>=48&&kc<=57)||kc==8 ||kc==13)){
event.returnValue=false;
}
if(kc==13){
event.srcElement.blur();
}
}
//鼠标单击单元格时进行价格编辑
function editPrice() {
if (event && event.srcElement && event.srcElement.tagName == "TD") {
var priceTD = event.srcElement;
//判断当前priceTD是否有子节点,且第一个子节点是否为文本节点,TextNode对应的是3 Element对应的是1
if (priceTD.firstChild && priceTD.firstChild.nodeType == 3) {
//innerText表示设置或获取当前节点的内部文本
var oldPrice = priceTD.innerText;
//innerHTML表示设置当前节点的内部HTML
priceTD.innerHTML = "<input type='text' size='4'/>";
var input = priceTD.firstChild;
if (input.tagName == "INPUT") {
input.value = oldPrice;
//选中输入框文本
input.select();
//绑定输入框失去焦点事件,失去焦点,更新价格
input.onblur = updatePrice;
}
}
}
}
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;
//更新当前行的小计这一格的值
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 tablelist = $("tbl_list");
var rows = tablelist.rows;
var sum=0;
for (var i=1;i<rows.length-1;i++){
var tr = rows[i];
var xj = parseInt(tr.cells[3].innerText)
sum=sum+xj;
}
rows[rows.length-1].cells[1].innerText = sum;
}
//当鼠标悬浮时,显示背景颜色
function showBGColor(){
if(event && event.srcElement && event.srcElement.tagName=="TD"){
var td = event.srcElement;
var tr = td.parentElement;
tr.style.backgroundColor = "navy";
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;
td.style.cursor = "hand";
}
}