文章目录
- 一、HTML 常用标签
- 二、javascript 脚本
- 1、什么是 javascript(js)
- 2、 js变量和函数
- 3、js 弹窗处理
- 4、js 流程控制语句和 switch 结构语句应用
一、HTML 常用标签
HTML：超文本标记语言
超文本：不仅只包含文字，还有超链接、视频…这些元素
HTML与HTML5(H5)
HTML5=HTML+一些其他特殊标签 比如：canvas 画图标签
HTML结构标签对：
<html>
<head>
<title>我的个人页面</title>
</head>
<body>
<!‐‐段落标签‐‐>
<p>
<font size="6" color="blue" ><b><i>自我介绍</i></b></font>
</p>
姓名：hc<br/>
专业：计算机软件<br/>
图片:<br/><img src="hc2.png"></img><br/>
<a href="https://wwww.baidu.com" target="_black" >查看更多</a>
<!‐‐‐分隔线‐‐‐>
<hr width="100%" size="1" color="red"/>
<!‐‐常用标签：表格 ‐‐>
<table border="1" width="300px" height="300px">
<!‐‐行标签‐‐>
<tr>
<!‐‐列标签‐‐>
<td colspan="2">1</td>
<td rowspan="3">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
</tr>
</table>
<!‐‐常用标签：表单 数据提交‐‐>
<form action="url地址" method="">
<!‐‐提交的方式：post/get get:url传递参数 post通过表单传参 post方式更加安全‐
‐>
<!‐‐文本框 密码框 按钮 复选框 单选框‐‐>
用户名:<input type="text"></input><br/>
密码:<input type="password"></input><br/>
<!‐‐单选框‐‐>
性别：<input type="radio" name="xb" >男</input> <input type="radio"
name="xb">女</input><br/>
<!‐‐复选框 ‐‐>
爱好：<input type="checkbox" >学习</input> <input type="checkbox"
>money</input> <input type="checkbox" >小姐姐</input> <br/>
上传作业:<input type="file" >学习</input>
计算机语言:
<select>
<option>java</option>
<option>Python</option>
<option>php</option>
</select> <br/>
文本域：
<textarea cols="25" rows="10"></textarea> <br/>
普通按钮：
<input type="button" value="打卡学习" ></input><br/>
特殊按钮（提交按钮）:
<input type="submit" value="提交"></input><br/>
特殊按钮（重置按钮）:
<input type="reset" value="重置"></input><br/>
</form>
</body>
</html>
前端页面布局：div table frame 框架
基于frame来进行页面设计：
<html>
<frameset rows="30%,*">
<frame src="mypage.html" ></frame>
<frameset cols="50%,50%">
<frame src="https://taobao.com"></frame>
<frame src="https://www.baidu.com/"></frame>
</frameset>
</frameset>
</html>
二、javascript 脚本
用户交互：必须懂明白javascript脚本
1、什么是 javascript(js)
javascript:前端脚本语言，实现用户的交互
网页端执行js脚本两种方式：
- 内嵌式
- 外部导入
2、 js变量和函数
<html>
<head>
<title>网页的标题</title>
<script language="javascript">
document.write("执行外部js脚本"+"<br/>")
<!--变量-->
var a=10;
var name="xingyao";
var c= true;
document.write(a+"<br/>");
document.write(name+"<br/>");
document.write(c+"<br/>");
<!--javascript函数-->
function zt1(){
<!--函数体语句-->
var value1="正在学习<<Python基础>>";
document.getElementById("result").value=value1;
}
function zt2(){
<!--函数体语句-->
var value2="正在学习<<接口自动化测试>>";
document.getElementById("result").value=value2;
}
function zt3(){
<!--函数体语句-->
var value3="正在学习<<web自动化测试>>";
document.getElementById("result").value=value3;
}
function zt8(){
<!--函数体语句-->
document.getElementById("result").value=name;
}
function abc(){
alert("操作成功！！");
}
function con(){
var res=confirm("请问需要删除此商品？");
if (res==true){
alert("删除");
}
}
function pro(){
var res=prompt("请输入需要删除的商品的编号");
alert(res);
}
function jiesuan(){
var paymoney;
<!--int类型转化 parseInt-->
var price=parseInt(document.getElementById('danjian').value);
var count=parseInt(document.getElementById('shuliang').value);
var paytype=document.getElementById('fangshi').value;
<!-- isNaN 表示不是一个数字 !isNaN()判断参数是数字-->
if (!isNaN(price) && !isNaN(count)){
<!--计算支付金额-->
<!--选择不同的支付方式，计算方式不一样-->
switch(paytype){
case "9":
case "8":
case "7":
case "6":
paymoney=price*count*parseInt(paytype)/10;
break;
default:
alert("请选择支付方式！！！");
}
<!--计算支付金额显示在结算金额输入框 -->
document.getElementById('jsje').value=paymoney+"元";
}
else{
alert("Q币单价及Q币的数量必须是数字！！！");
}
}
</script>
</head>
<body>
<hr color="red" size="2" width="100%">
<form>
<input type="button" value="专题一" onclick="zt1()"></input><br/>
<input type="button" value="专题二" onclick="zt2()" ></input><br/>
<input type="button" value="专题三" onclick="zt3()"></input><br/>
.....<br/>
<input type="button" value="专题八" onclick="zt8()"></input><br/>
当前学习阶段:<input type="text" id="result" value="Python基础"></input><br/>
<hr color="red" size="2" width="100%">
<input type="button" value="alert弹窗" onclick="abc()"></input><br/>
<input type="button" value="confirm弹窗" onclick="con()"></input><br/>
<input type="button" value="prompt弹窗" onclick="pro()"></input><br/>
</form>
<hr color="red" size="2" width="100%">
<form>
支付方式:
<select id="fangshi">
<option value="9">现金支付(9折)</option>
<option value="8">支付宝支付（8折）</option>
<option value="7"> 微信支付（7折）</option>
<option value="6">京东支付（6折）</option>
</select><br/>
Q币单价：<input type="text" id="danjian"></input><br/>
购买数量：<input type="text" id="shuliang"></input><input type="button" value="结算" onclick="jiesuan()"></input><br/>
结算金额：<input type="text" id="jsje" ></input>
</form>
</body>
</html>
3、js 弹窗处理
网页的弹窗有三种
- 提示弹窗
- 包含确定和取消的弹窗
- 包含确定和取消的弹窗+用户输入
4、js 流程控制语句和 switch 结构语句应用
- if/else 语句进行控制
if(条件){
}
else{
} - if/else 嵌套
if(条件){
if(条件){
}
else{
}
}
else{
if(条件){
}
else{
}
} - switch语句
switch(变量){
case 常量1：
js代码；
break；
case 常量2:
js代码；
break；
case 常量3:
js代码；
break；
…
default:
js代码
break；
}
