本文详细介绍了HTML、CSS和JavaScript的基础知识，包括HTML的各种标签、CSS的样式规则以及JavaScript的基本语法和表单操作。示例涵盖了表格创建、页面布局以及事件处理，展示了如何使用这些技术来构建和美化网页内容。
第1章 HTML
*HTML：超文本标记语言，决定页面上显示什么内容（html是解释型语言，不是编译型，浏览器是容错的）
*CSS：决定页面上内容的美观程度
*JavaScript：页面特效
1.HTML基础标签
<!--
html页面由一对标签组成：<html></html>
<html>为开始标签
</html>为结束标签
-->
<html>
<head><!--网页头-->
<title>我的网页</title><!--网页名-->
<meta charset="UTF-8"><!--编码方式-->
</head>
<body><!--网页体-->
hello world!
<br><!--换行-->
my name is qiaqia!
<p><!--段落标签，段落之间自动换行-->
这是第一个段落
</p>
<p>
这是第二个段落
</p>
<!--图片标签，
内置src属性,写入图片地址
width属性，写入图片宽；height属性，写入图片高
alt属性，写入提示文字-->
<img src="imgs/girl.jpg" width="104" height="146" alt="这是一张图片">
<h1>这是一级标题</h1><!--一级标题-->
<h2>这是二级标题</h2><!--二级标题-->
<h6>这是6级标题</h6><!--6级标题-->
<!--列表标签-->
水果列表：
<ol type="A" start="3"><!--有序列表-->
<!--type=“A”表示以大写字母为序号，start=“3”表示从C开始-->
<!--可选type有：A、a、I、i、1（默认）-->
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
<li>猕猴桃</li>
<li>火龙果</li>
</ol>
动物列表：
<ul type="square"><!--无序列表-->
<!--type=“square”表示方块，可选type有：disc、circle、square-->
<li>狗</li>
<li>猫</li>
<li>熊</li>
<li>猪</li>
<li>兔子</li>
</ul>
<!--u标签表示下划线，i标签表示斜体，b标签表示加粗，标签可以嵌套-->
<h3><u>你</u><i>喜欢</i>吃<b>苹果</b>还是吃<b>香蕉</b>？</h3>
<!--上标和下标标签-->
3<sup>2</sup>=9；氧气的化学式：O<sub>2</sub>
<!--转译小于号：<转译大于号：>-->
<br>5<10,10>5 <br>
<!--块标签-->
<span>
猴子
</span>爱吃香蕉
<!--超链接标签-->
<!--href属性表示连接的地址；target属性表示打开的窗口-->
<!--可选target有：self、blank、parent、top-->
<a href="http://www.baidu.com" target="blank">百度一下</a>
<!--层标签-->
<div></div>
</body>
</html>
2.HTML中的table标签
<html>
<head>
<title>表格标签的学习</title>
<meta charset="UTF-8">
</head>
<body>
<table border="1" width="400" height="200" cellspacing="0" cellpadding="10"><!--一张表-->
<!--border属性设置表格边框的粗细;
width、height属性设置表格宽高
cellspacing属性设置单元格之间空间，0表示无空隙
cellpadding属性设置内容与表格间的间隙-->
<tr align="center"><!--一行-->
<!--align属性表示对齐方式-->
<th>姓名</th><!--表头-->
<th>门派</th>
<th>绝技</th>
<th>内功值</th>
</tr>
<tr align="center"><!--一行-->
<td>乔峰</td><!--一行里的一个小单元-->
<td>丐帮</td>
<td>少林长拳</td>
<td>5000</td>
</tr>
<tr align="center"><!--一行-->
<td>虚竹</td><!--一行里的一个小单元-->
<td>灵鹫宫</td>
<td>北冥神功</td>
<td>15000</td>
</tr>
<tr align="center"><!--一行-->
<td>扫地僧</td><!--一行里的一个小单元-->
<td>少林寺</td>
<td>七十二绝技</td>
<td>未知</td>
</tr>
</table>
<hr><!--横线-->
<table border="1" width="400" height="200" cellspacing="0" cellpadding="10"><!--一张表-->
<tr align="center">
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
<tr align="center">
<td>苹果</td>
<td rowspan="2">5</td>
<!--rowspan属性表示跨行合并，rowspan=“2”表示跨两行合并-->
<td>20</td>
<td>100</td>
<td><img src="imgs/del.jpg" width="35" height="35"></td>
</tr>
<tr align="center">
<td>菠萝</td>
<td>15</td>
<td>45</td>
<td><img src="imgs/del.jpg" width="35" height="35"></td>
</tr>
<tr align="center">
<td>西瓜</td>
<td>6</td>
<td>6</td>
<td>36</td>
<td><img src="imgs/del.jpg" width="35" height="35"></td>
</tr>
<tr align="center">
<td>总计</td>
<td colspan="4">181</td><!--colspan属性表示跨列合并-->
</tr>
</table>
</body>
</html>
3.HTML中的表单标签
<html>
<head>
<title>表单学习</title>
<meta charset="UTF-8">
</head>
<body>
<form action="chapter1_demo01.html" method="post"><!--表单-->
<!--action属性表示提交后发送到的位置;method属性表示发送方式-->
昵称：
<input type="text" name="nicheng"><br>
<!--input表示输入标签，其中，type属性表示输入的类型；name属性用于发送数据给服务器（必须要有）-->
密码：
<input type="password" name="mima"><br>
<!--password类型用于密码输入-->
性别：
<input type="radio" name="xingbie" value="nan" checked>男
<input type="radio" name="xingbie" value="nv">女<br>
<!--radio类型表示单选框,value属性用于标记所选内容,checked表示设为默认选项-->
爱好：
<input type="checkbox" name="aihao" value="lanqiu" checked>篮球
<input type="checkbox" name="aihao" value="changge">唱歌
<input type="checkbox" name="aihao" value="paobu">跑步
<input type="checkbox" name="aihao" value="dushu">读书<br>
<!--checkbox类型表示复选框-->
星座：
<select name="xingzuo">
<option value="baiyang">白羊座</option>
<option value="shuangzi">双子座</option>
<option value="tianxie">天蝎座</option>
<option value="shizi">狮子座</option>
<option value="jinniu" selected>金牛座</option>
</select><br>
<!--select表示下拉框标签；option表示下拉选项；selected表示默认选项-->
备注：
<textarea name="beizhu" rows="4" cols="50"></textarea><br>
<!--textarea表示文本框标签，rows属性表示文本框行数；cols属性表示允许写入字数-->
<input type="submit" value="注册">
<!--submit类型表示提交-->
<input type="reset" value="重置">
<input type="button" value="普通按钮"
</form>
</body>
</html>
第2章 CSS-JS
1.CSS基本语法
<html>
<head>
<title>CSS学习</title>
<meta charset="UTF-8">
<!--被style标签包围的是CSS环境，写入CSS代码-->
<style type="text/css">
/*标签样式*/
p{
color:red;
}
/*类样式*/
.row2{
font-size:40px;
}
/*id样式*/
#p4{
background-color:pink;
font-size:20px;
}
/*组合样式，表示div内部的p标签的样式*/
div p{
color:blue;
}
</style>
<!--引入外部的样式-->
<link rel="stylesheet" href="css/demo01.css">
</head>
<body>
内部样式表：
<p>这是第一个段落</p>
<p class="row2">这是第二个段落</p>
<p>这是第三个段落</p>
<p id="p4">这是第四个段落</p>
<div>
<p><span>hello</span></p>
<span>word</span>
<p>!!!</p>
</div>
<br>
嵌入式样式表：
<p><span style="font-size:60;color:green;background-color:pink;">taotao<span></p>
外部样式表：
<div class="out_css_test">测试使用外部样式</div>
</body>
</html>2.CSS盒子模型
<html>
<head>
<title>CSS盒子模型</title>
<meta charset="UTF-8">
<style type="text/css">
#div1{
width: 400px;
height: 400px;
background-color:rgb(72, 105, 41);
/*边框样式*/
border-width: 1px;/*边框粗细*/
border-color: aqua;/*边框颜色*/
border-style: solid;/*边框样式*/
border-top: 4px solid black/*上边框*/
}
#div2{
width: 200px;
height: 200px;
background-color: rgb(163, 199, 231);
/*把这个div放在外层div的中心*/
margin: 100px;
overflow: hidden;/*解决margin-top失效*/
}
#div3{
width: 100px;
height: 100px;
background-color: rgb(5, 163, 110);
/*当前默认位置是在它的父容器左上位置*/
/*让div3也居中*/
margin: 50px;
/*填充*/
padding-top: 40px;
padding-left: 40px;
box-sizing: border-box;/*解决盒子变形*/
}
#div4{
width: 20px;
height: 20px;
background-color: brown;
/*位置由div3填充*/
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
<div id="div3">
<div id="div4"></div>
</div>
</div>
</div>
</body>
</html>3.CSS布局
<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;/*左浮动，边距为20px*/
margin-left:20px;
margin-top: 450px;
}
#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="div1"> </div>
<div id="div2"> </div>
<div id="div3">
<div id="div4"> </div>
<div id="div5"> </div>
</div>
</body>
</html>
4.js基本语法
*javascript：客户端的一个脚本语言
*js是一门弱类型语言，变量的数据类型由后面所赋值的类型决定
<html>
<head>
<meta charset="utf-8">
<script>
var str="hello world";//变量定义
alert(typeof str)
var person=new Object();//new对象
person.id="001";
person.name="张柏芝";
alert(person.id+":"+person.name)
function hello(name){//方法
return "hello,"+name;
}
hello();//方法调用
hello("李雷");
hello("李雷","韩梅梅");
</script>
</head>
<body>
</body>
</html>
5.js事件
<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>5</td>
<td>20</td>
<td>100</td>
<td><img src="imgs/del.jpg" class="delImg"/></td>
</tr>
<tr>
<td>西瓜</td>
<td>3</td>
<td>20</td>
<td>60</td>
<td><img src="imgs/del.jpg" class="delImg"/></td>
</tr>
<tr>
<td>菠萝</td>
<td>4</td>
<td>25</td>
<td>100</td>
<td><img src="imgs/del.jpg" class="delImg"/></td>
</tr>
<tr>
<td>榴莲</td>
<td>3</td>
<td>30</td>
<td>90</td>
<td><img src="imgs/del.jpg" class="delImg"/></td>
</tr>
<tr>
<td>总计</td>
<td colspan="4">999</td>
</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' value="apple"/></td>
</tr>
<tr>
<td>单价：</td>
<td><input class="input" type='text' id='price' value="5"/></td>
</tr>
<tr>
<td>数量：</td>
<td><input class="input" type='text' id='fcount' value="100"/></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>
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 fname = $("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 = fname ;
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 = "<img src='imgs/del.jpg' class='delImg'/>";
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="<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();
//4.绑定输入框失去焦点事件 , 失去焦点，更新单价
input.onblur=updatePrice ;
//8.在输入框上绑定键盘摁下的事件，此处我需要保证用户输入的是数字
input.onkeydown=ckInput;
}
}
}
}
//检验键盘摁下的值的方法
function ckInput(){
var kc = event.keyCode ;
// 0 ~ 9 : 48~57
//backspace : 8
//enter : 13
//console.log(kc);
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 ;
//5. 更新当前行的小计这一个格子的值
//priceTD.parentElement 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 ;
//innerText获取到的值的类型是字符串类型，因此需要类型转换，才能进行数学运算
var xj = parseInt(price) * parseInt(count);
tds[3].innerText = xj ;
//6. 更新总计
updateZJ();
}
}
//更新总计
function updateZJ(){
var fruitTbl = $("tbl_fruit");
var rows = fruitTbl.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 = sum + xj ;
}
rows[rows.length-1].cells[1].innerText = sum ;
}
//当鼠标悬浮时，显示背景颜色
function showBGColor(){
//event : 当前发生的事件
//event.srcElement : 事件源
//alert(event.srcElement);
//alert(event.srcElement.tagName); --> TD
if(event && event.srcElement && event.srcElement.tagName=="TD"){
var td = event.srcElement ;
//td.parentElement 表示获取td的父元素 -> TR
var tr = td.parentElement ;
//如果想要通过js代码设置某节点的样式，则需要加上 .style
tr.style.backgroundColor = "navy" ;
//tr.cells表示获取这个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="threeddarkshadow";
}
}
}
//当鼠标悬浮在单价单元格时，显示手势
function showHand(){
if(event && event.srcElement && event.srcElement.tagName=="TD"){
var td = event.srcElement ;
//cursor : 光标
td.style.cursor="hand";
}
}*{
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:40%;
margin-left:30%;
}
#add_fruit_tbl {
margin-top:32px;
width:80%;
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{
padding-left:4px;
border:1px solid lightgray;
width:90%;
}
扫一扫
771
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
