web前端（html-js）

时间：2020-09-16 14:33:13 阅读：55 评论：0 收藏：0 [点我收藏+]

HTML

第1章 Html简介与基本标签

由标签组成的叫做标记语言。

? 超文本标记语言

HTML（网页结构）、CSS（网页样式）、JavaScript（网页行为）。

Html学习内容：

表单标签
表格及框架
基本概念和基本标签

第2章表格及框架

标签：tr 、 th 、td 、table
特征：
1. 没有外观
2. 大小随内容而变

<table border="1px" align="center">
		<thead style="background-color: blue">
			<tr align="center">
				<th colspan="1">第一行第一列</th>
				<th>第一行第二列</th>
			</tr>
		</thead>

		<tbody style="background-color: yellow;">
			<tr>
				<td>第二行第一列</td>
				<td>第二行第二列</td>
			</tr>
			<tr>
				<td>第二行第一列</td>
				<td>第二行第二列</td>
			</tr>
		</tbody>

		<tfoot style="background-color: green;">
			<tr>
				<td>第三行第一列</td>
				<td>第三行第二列</td>
			</tr>
		</tfoot>
	</table>

跨行 colspan
跨列 rowspan

		<tr>
			<td>手机充值</td>
			<td colspan="3">办公设备、手机、耗材</td>
		</tr>
		<tr>
			<td rowspan="3">各种卡的汇总</td>
			<td>铅笔</td>
			<td>毛笔</td>
			<td>钢笔</td>
		</tr>
		<tr>
			<td>打印</td>
			<td>刻录</td>
			<td>墨盒</td>
		</tr>
		<tr>
			<td>彩笔</td>
			<td>粉笔</td>
			<td>记号笔</td>
		</tr>

第3章表单

属性：name 、 action （URL）、method（post、get 默认）
有外观，没有固定的外观（因为input中的type属性）
标签：from 向服务器发送信息，实现交互功能。
- 子标记：input
  - （默认为文本框，10个通用属性）
  - 属性： disabled 设置标记不可用

文字字段&密码域：

<td>用户名：</td>
<td><input type="text" name="username"></td>
<td>密码: </td>
<td><input type="password" name="pwd"></td>

单选按钮：

<td>   <!--加一个name属性值设置唯一值！     checked默认选项-->
    <input type="radio" name="sex" checked value="0">男<input type="radio" name="sex" value="1">女
</td>

复选框

    <input type="checkbox" name="hobby" value="book">读书
    <input type="checkbox" name="hobby" value="paobu">跑步
    <input type="checkbox" name="hobby" value="java">代码

文件

<td>文件: </td>
 <td><input type="file"> </td>

重置&提交&普通按钮：

 <td colspan="2"  align="center">
     <input type="reset" value="重置">&nbsp;
     <input type="submit" value="提交">
	 <input type="button" value="确定" onclick="alert(‘你好！‘)"></td>

图片：

 <td><input type="image" src="img/01.png" width="50px" height="50px"> </td>

隐藏域：

<td>隐藏域: </td>
<!-- 一般为数据库的主键 -->
<td><input type="hidden" value="023"> </td>

下拉框：

<td>省份:</td>
<td>
   <select size="1" onchange="alert(‘选项发生改变了‘)">
         <option value="">山东</option>
         <option value="">山西</option>
         <option value="" selected>广东</option>
         <option value="">广西</option>
         <option value="">湖南</option>
   </select>省
</td>

内容框：

 <td colspan="2">
     <textarea name="" id="" cols="30" rows="10"></textarea>
</td>

Javascript

直接嵌入Html文档中，在客户端执行的解释性脚本语言
基于对象和事件驱动并具有安全性能的脚本语言

javascript与java没有联系

加法计算器

注意：

<script?src="js/test.js"></script>
<!--?script标签?一旦链接了外部文件，script标签之前的js代码就不会再执行?-->

js用到表单时，要将js代码放到body后面，（先加载表单代码，在查找所需内容）。

2.运算符

一元运算符（++、--），二元运算符（+、-、*、/），三元运算符（）
逻辑运算符（与--&&、或--||、非--！）

//一元运算符，一个操作数
var a = 0;
var b = a++;  //先赋值后再自加
document.write("a="+a+",b="+b);  // a=1,b=0;

//三元运算符，三个操作数  ?:
var num1=10 , num2=20;
document.write("最大数:"+（num1>num2）?num1:num2);

3.弹窗（alert、confirm、prompt）

 function CloseWin(){
     if(confirm("你确定要关闭窗口吗？")){
          window.close();
     }
 }

 function GetColor(){
     var color = prompt("输入你喜欢的颜色","blue");
     alert("您喜欢的颜色为："+color);
 }

4.条件语句

if 语句、if...else 语句、switch 语句

<script>
        function add(){
            var a = Number(document.MyForm.num1.value);
            var b = Number(document.MyForm.num2.value);
            //获取
            var op = document.MyForm.op.value;
            var c = 0 ;
            switch(op){
                case "+": c = a+b; break;
                case "-": c = a-b; break;
                case "*": c = a*b; break;
                case "/": c = a/b; break;
                case "%": c = a%b; break;
                case ">": c = a>b; break;
                case "<": c = a<b; break;
                default: alert("符号选择有误");
            }
            document.MyForm.num.value=c;
        }
    </script>
</head>
<body>
    <form action="" name="MyForm">
            <input type="text" name="num1">
            <select name="op">
                <option value="+">+</option>
                <option value="-">-</option>
                <option value="*">*</option>
                <option value="/">/</option>
                <option value="%">%</option>
                <option value=""></option>
                <option value=""></option>
            </select>
            <input type="text" name="num2">
            <input type="text" name="num">
            <br>
            <input type="button" onclick="add()" value="计算结果">
    </form>
</body>

5.循环（for、while、do while）

四大部分-----初始化，条件，执行，迭代（缺一不可）

<script>
        var sum=0;
        for(var j=1;j<=100;j++){
            sum = sum + j;
        }
        document.write("打印1+2+3+4+5+6+...+100的结果："+sum+"<br>");
        document.write("<hr>");
        document.write("打印直角三角形<br>");
        /*
        1
        12
        123
        1234
        12345
        123456
        */
       for(var i=1;i<11;i++){
           for(var j=1;j<i;j++){
               document.write(j);
           }
           document.write("<br>");
       }
    </script>

技术分享图片

6.Javascript函数

内置函数
- eval函数：用于计算字符串表达式的值
- isNaN函数：用于验证参数是否为NaN（非数字）（true为字符串）

		function fn1(){
            var value = prompt("写一个表达式，我给你计算","1+1");
            var num = eval(value);
            alert(value+"="+num);
        }
        function fn2(){
            var value = prompt("写一个字符，我判断是否为数字","0");
            if(isNaN(value)){
                alert(value+"不是一个数字！");
            }else{
                alert(value+"是一个数字！");
            }
        }

7.Javascript对象简介

String对象
- 使用var语句（栈里开辟空间）
  - var newstr = "";
- 创建String对象（动态声明（堆里面开辟空间））
  - var newstr = new String(""); new后必有构造函数
属性和方法
- indexOf() 从左向右找（前--->后）
- lastindexOf() 从右向左找（后--->前）
- chartAt(4) 获取相应下标的字符
- Math.random() 随机小数
- Math.round(2.8) 四舍五入

<script>
        document.write("两秒钟刷新一次页面，图片随机变化<br>");
        //获取一个1~4的随机整数
        var i = Math.round(Math.random()*3+1);
      document.write("<img src=‘../img/0"+i+".png‘ width=‘300px‘ height=‘300px‘>");
</script>

//声明一个String对象
var str = "abcdefcg";
document.write("字符串的长度："+str.length+"<br>");
document.write("字符串的小字体："+str.small()+"<br>");
document.write("字符串的正常字体："+str+"<br>");
document.write("字符串的大字体："+str.big()+"<br>");
//如果能找到就返回相应的下标，反之，返回-1.   注意：下标从0开始；  indexOf()从左往右找。
document.write("获取“c”首次出现的位置："+str.indexOf("c",0)+"<br>");
//
document.write("获取“c”末次出现的位置："+str.lastIndexOf("c",str.length-1)+"<br>");
document.write("获取相应下标的字符："+str.charAt(2)+"<br>");
document.write("获取PI的值："+Math.PI+"<br>");
document.write("获取常量E的值："+Math.E+"<br>");
document.write("获取ln 10的值："+Math.LN10+"<br>");
document.write("获取-8的ju绝对值："+Math.abs(-8)+"<br>");
document.write("获取两个数的最大值："+Math.max(8,12)+"<br>");
document.write("获取0~1的随机小数："+Math.random()+"<br>");
document.write("获取四舍五入的值："+Math.round(2.8)+"<br>");
document.write("获取2~7的随机数："+Math.round(Math.random()*5+2)+"<br>");

![02](C:/Users/Administrator/Pictures/02.PNG)function checkEmail(){      //小案例
        var email = document.getElementById("email").value;
        if(email.length==0){
            alert("请输入邮箱名");
        }else{
            if(email.indexOf("@",0)==-1||email.indexOf(".",0)==-1){
                alert("邮箱格式不正确！");
            }else{
                alert("注册成功！");
            }
        }
    }

Date对象

技术分享图片

web前端（html-js）

原文：https://www.cnblogs.com/yaolicheng/p/13678582.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)

web前端（html-js）

HTML

第1章 Html简介与基本标签

Html学习内容：

第2章 表格及框架

第3章 表单

Javascript

加法计算器

注意：

2.运算符

3.弹窗（alert、confirm、prompt）

4.条件语句

5.循环（for、while、do while）

6.Javascript函数

7.Javascript对象简介

String对象

属性和方法

Date对象

第2章表格及框架

第3章表单