第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><!--转译小于号：&lt;转译大于号：&gt--><br>5&lt10,10&gt5 <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">&nbsp;</div><div id="div2">&nbsp;</div><div id="div3"><div id="div4">&nbsp;</div><div id="div5">&nbsp;</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，否则返回falseif(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对应的是1if(priceTD.firstChild && priceTD.firstChild.nodeType==3){//innerText 表示设置或者获取当前节点的内部文本var oldPrice = priceTD.innerText ;//innerHTML 表示设置当前节点的内部HTMLpriceTD.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节点的父节点是tdvar priceTD = input.parentElement ;priceTD.innerText = newPrice ;//5. 更新当前行的小计这一个格子的值//priceTD.parentElement td的父元素是trupdateXJ(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);    --> TDif(event && event.srcElement && event.srcElement.tagName=="TD"){var td = event.srcElement ;//td.parentElement 表示获取td的父元素 -> TRvar tr = td.parentElement ;//如果想要通过js代码设置某节点的样式，则需要加上 .styletr.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%;
}

第1章 HTML第2章 CSS-JS相关推荐

精通CSS与HTML设计模式第一章（轻松搞定CSS）
精通CSS与HTML设计模式第一章(轻松搞定CSS) 精通CSS与HTML设计模式第二章(HTML设计模式) 精通CSS与HTML设计模式第三章(CSS选择符与继承) 精通CSS与HTML设计模 ...
一篇文章让你掌握HTML+CSS
JavaEE-v4.0-HTML 1 HTML入门 1.1 初识HTML 1.1.1 概述网络世界已经跟我们息息相关,当我们打开一个网站,首先映入眼帘的就是一个个华丽多彩的网页.这些网页,不仅呈现着 ...
翻译连载 | JavaScript轻量级函数式编程-第7章: 闭包vs对象 |《你不知道的JS》姊妹篇...
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
翻译连载 | JavaScript轻量级函数式编程-第 8 章：列表操作 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
翻译连载 | JavaScript轻量级函数式编程-第 8 章：列表操作 |《你不知道的JS》姊妹篇...
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
第一章：第1章 CRM核心业务介绍--概述，crm架构，公司组织结构，软件开发的生命周期，crm项目的核心业务介绍。...
第一章:第1章 CRM核心业务介绍 1. 什么是crm项目: 1,CRM(Customer Relationship Management)客户关系管理是管理企业与客户之间关系的新型管理机制.终极目标 ...
第5章　运维和发布Vue.js项目
第5章运维和发布Vue.js项目一般传统公司特别喜欢一个角色用一个人,如在生产流水线上,一个工人只负责拧螺丝,另一个工人只负责喷漆.很多软件公司也是这样,有人专门负责编写代码,有人专门负责运维.但 ...
《Kali Linux渗透测试的艺术》—8章8.7节本章总结
本节书摘来自异步社区<Kali Linux渗透测试的艺术>一书中的8章8.7节本章总结,作者[英]Lee Allen , [印尼]Tedi Heriyanto , [英]Shakeel A ...
[BUUCTF-pwn]——[第六章 CTF之PWN章]stack
[BUUCTF-pwn]--[第六章 CTF之PWN章]stack 题目地址: https://buuoj.cn/challenges#[%E7%AC%AC%E5%85%AD%E7%AB%A0%20C ...
【数据库原理及应用】经典题库附答案（14章全）——第九章：数据库安全性
[数据库原理及应用]经典题库附答案(14章全)--第一章:数据库基础知识 [数据库原理及应用]经典题库附答案(14章全)--第二章:关系数据库知识 [数据库原理及应用]经典题库附答案(14章全)--第 ...

第1章 HTML第2章 CSS-JS

第1章 HTML

1.HTML基础标签

2.HTML中的table标签

3.HTML中的表单标签

第2章 CSS-JS

1.CSS基本语法

2.CSS盒子模型

3.CSS布局

4.js基本语法

5.js事件

第1章 HTML第2章 CSS-JS相关推荐

最新文章

热门文章