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>你好，HTML</p>
<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>2</sub>O
<br/>
<br/>
O<sup>2</sup>
<br/>
<br/>
<span>222222</span>3333333
<br/>
<br/>
<a href="https://www.w3school.com.cn/html/html_entities.asp" target="_blank">https://www.w3school.com.cn/html/html_entities.asp</a>
<br/>
<br/>
<div id="di1">层1</div>
<div id="di2">层2</div>
<div id="di3">层3</div>
<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列1</td>
<td>行2列2</td>
<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列2</td>
<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列1</td>
</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>
<!--
html页面由一对标签组成：
<html> 开始标签
</html> 结束标签
<title></title> 标签表示网页的标题
<meta> 标签可以设置编码格式，charset="UTF-8"表示标签中的属性
<br/> 标签表示换行，这个标签是个单标签，即开始和结束标签是一个，“/”放在单词后面。
<p></p> 表示一个段落
<img src=""/> 表示图片src表示图片路径，width表示宽多少像素，height表示高多少像素，Alt表示图片不能正确显式时的内容，title是鼠标放到图片上显式的文字
相对路径、绝对路径
只有六级标题<h1>~<h6>
html为解释型语言
列表标签：
有序标签：
type 表示按照那种形式排列"A a I i 1(default)"
start 表示从哪开始
<ol type="A" start="3">
<li></li>
</ol>
无序标签：
type 标签格式"disc(default) circle square"
<ul>
</ul>
<b></b> 表示加粗
<i></i> 表示斜体
<u></u> 表示下划线
<sub></sub> 下标
<sup></sup> 上标
具体查看HTML实体https://www.w3school.com.cn/html/html_entities.asp
<span></span> 不换行的块标签
<a></a> 超链接：
href 连接的地址
target _blank 新窗口打开
_self 在本窗口打开
_parent 在父层窗口打开
_top 在顶层窗口打开
<div></div> 层，会有上下的概念，之后再完善
表格
<table> 表格 属性： border 表格边框粗细 width 宽 cellspacing 单元格间距 cellpadding 单元格填充
<tr></tr> 行 属性： align="center、left、right" 居中、左、右
<th></th> 表头列
<td></td> 列 属性：colspan 合并列 rowspan 合并行
</table>
表单
<form> 表单 属性： action 表示提交到哪 method(get、post) 表示用什么发放提交
<input type="text" name=""> 文本框 name属性必须要指定，否则不会发送
<input type="password" name=""> 密码框
<input type="radio" name=""> 单选框 name属性保持一直才会有互斥的效果 checked 设置为默认值
<input type="checkbox" name=""> 复选框 name属性保持一致 服务器用数组获取
<select></select> 下拉框 <option value="5"> option是选项 value 发送给服务器的值 selected 标志默认
textare 文本域 它的value就是开始标签与结束标签的内容
<input type="submit" name=""> 提交按钮
<input type="reset" name=""> 重置那妞
<input type="button" name=""> 普通按钮
</form>
-->
<!--
<html>
<head></head>
<frameset rows="20%,*" frameborder="no">
<frame src="frames/top.html"/>
<frameset cols="15%,*">
<frame src="frames/left.html"/>
<frameset rows="80%,*">
<frame src="frames/main.html"/>
<frame src="frames/bottom.html"/>
</frameset>
</frameset>
</frameset>
</html>
-->
<!--
frameset 表示页面框架 ， 这个标签已经淘汰，了解，不需要掌握 frameborder 无边框
frame表示框架中的具体页面引用
-->
<!--
<html>
<head>
<meta charset="utf-8">
</head>
<body>
这里是demo06页面的内容！！
<iframe src="frames/top.html"/>
</body>
</html>
-->
<!--
frameset 表示页面框架 ， 这个标签已经淘汰，了解，不需要掌握
frame表示框架中的具体页面引用
iframe 在一个页面嵌入一个子页面
总结：
1.HTML是解释型的文本标记语言，不区分大小写
2.html,head,title,meta,body,br,p,hr,div,table,form,u,i,b,sup,sub, ,span,ul,ol,li,tr,td,th,h1-h6,a,input,select,textarea,img
2-1. html , head , title , meta , body , br , ul , ol , h1-h6 , a , img , , p , div , span
2-2. table tr , th , td
2-3. form(action='' , method='post') input type='text,pasword,radio,checkbox,submit,button,reset" <select> , <textarea>
-->
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>
<!-- 引用外部的CSS样式表文件 -->
<link rel="stylesheet" href="css/demo01.css">
</head>
<body>
<!--
<p><font color="red">这里是段落一</font></p>
<p><font color="red">这里是段落二</font></p>
-->
<p>这里是段落一</p>
<p>这里是段落二</p>
<p class="f20">这里是段落三</p>
<p id="p4">这里是段落四</p> <!-- id属性在整个HTML文档中，尽量保持唯一（虽然重复也不会报错） -->
<div>
<p><span style="font-size:60px;font-weight:bolder;color:yellow;">HELLO</span></p> <!-- 嵌入式样式表 -->
<span class="f32">World</span>
<p class="f32">!!!</p>
</div>
</body>
</html>
<!--
1. 为什么需要CSS
2. CSS的最基本的分类: 标签样式表、类样式表、ID样式表
3. CSS从位置上的分类：嵌入式样式表、内部样式表、外部样式表(CSS样式用文件保存，用link引用)
-->
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>
<!--
IE浏览器：实际尺寸 = width
chrome浏览器：实际尺寸= width+左右borderwidth+padding
CSS盒子模型：
1.border 边框
2.margin 间距
3.padding 填充
-->
相对定位、绝对定位
<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="div1"> </div>
<div id="div2"> </div>
-->
<div id="div3">
<div id="div4"> </div>
<div id="div5"> </div>
</div>
</body>
</html>
<!--
position: absolute -- 绝对定位 , 需要配合使用 left , top
relative -- 相对定位 , 一般会和 float , margin , padding .... 一起使用
float
-->
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>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'/></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 = "<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";
}
}
imgs/del.jpg
扫一扫
1159
到【灌水乐园】发言
