HTML、CSS、JS（JavaScript）前端一条龙服务

黄嘉炜Ethan

已于 2023-01-13 20:30:08 修改

阅读量537

点赞数

文章标签： html 前端 html5

于 2023-01-07 13:13:05 首次发布

本文链接：https://blog.csdn.net/Ethanhuangjiawei/article/details/128589810

版权

HTML：

HTML是一门语言，所有的网页都是用HTML这门语言编写出来的

HTML(Hyper Text Markup Language)：超文本标记语言

超文本：超越文本的限制，除了文字信息，还可以定义图片、音频、视频等内容

标记语言：由标签构成的语言

HTML运行在浏览器上，HTML标签由浏览器来解析

HTML标签都是预定义好的，例如：使用<img>展示图片

W3C标准：网页主要由三部分（三种语言）组成：

结构：HTML

表现：CSS

行为：JavaScript

HTML所有标签都在官网，点击上面的目录HTML，然后再点击左边目录HTML，然后再点击最右侧的参考书（不管是html、css、js有很多的标签需要在这上面查询）

w3school 在线教程https://www.w3school.com.cn/index.html

注意一定按照步骤：：

1.创建文本文档，并将后缀名改成.html（要先改，不然没有html语法智能提示）

2.右键打开方式选择sublime txt

3.编写html

html基本书写语法格式：

<html>

<head>
<title>
html快速入门
</title>
</head>

<body>
<font color="red">啊实打实大苏打</font>
</body>

</html>

<html>根标签，是浏览器打开之后识别为html

html快速入门为<head>标签之间编辑的内容

红色框内容为<body>标签之间编辑的内容

<font color="red">啊实打实大苏打</font>为字体改颜色（但是font已过时，因为样式由css控制）

HTML标签属性值，单双引都可以

HTML语法松散、不区分大小写

基础标签：

<h1>~<h6> 定义胞体大小，h1最大，h6最小

<font> 定义文本的字体、字体尺寸、字体颜色<font face='楷体' size=‘5’ color='#fc0cb'>xxx</font>

<b> 定义粗体文本

<i> 定义斜体文本

<u> 定义文本下划线

<center> 定义文本居中（但是center已过时，因为样式由css控制）

<p> 定义段落类似文章的段落

<br> 定义换行

<hr> 定义水平线

可以在idea中写html

新建一个java框架，即file→Project Structrue→new module→选择java框架，创建好之后，将src删除，然后右键新建一个Directory文件夹，再创建一个HTML选择HTML5就可以

#ff0066 十六进制表示rgb，00~ff，例如：#ff0000为大红色

转义字符

<&lt>：< 小于号或显示标记

<&gt>：>大于号或显示标记

<&amp>：&可以用于显示其他字符

<&quot>："引号

<&reg>：®已注册

<&copy>：©版权

<&trade>：™商标

<&nbsp>：不断行的空白

图片、音频、视频标签：

<img>：定义图片

src：文件URL

height：定义高度

width：定义宽度

<audio>：定义音频（只支持音频格式：MP3、WAV、OGG）

src：文件URL

controls：控制播放控件

<video>：定义视频（只支持视频格式：MP4、WebM、OGG）

src：文件URL

controls：控制播放控件

注意url不能用本地电脑的绝对路径，因为这个是网页，网页访问不了你的电脑路径，只能访问服务器

src注意点：

可以拉到idea的目录中，然后用相对路径打开

资源路径：

1.绝对路径：在网上右键复制链接地址

2.相对路径：相对位置关系，即相对于当前正在写的html文件的位置

情况一：同一文件夹下

xxx/html/123.html

xxx/html/a.jpg

访问方式：./a.jpg 也可以省略直接写 a.jpg

情况二：在同一文件下，但a.jpg是被存储在img文件夹下的

xxx/html/123.html

xxx/html/img/a.jpg

访问方式：./img/a.jpg

情况三：在不同文件夹下，但是同级文件夹即平级关系（如果是在其他地方呢？他的意思应该是只能在一个模块下进行访问，因为将来html写好将统一进行打包）

xxx/html/123.html

xxx/img/a.jpg

访问方式：../img/a.jpg 要返回html的上一级目录，才能搜索该目录下的所有文件夹

超链接标签：

<a>：定义超链接，用于连接到另一个资源

属性：

href：指定访问资源的url

target：指定打开资源的方式

_self：默认值，在当前页面打开（一般用于内部的跳转）

_blank：在空白页打开（一般用于外部资源的跳转）

列表标签：

有序列表（order list）：

无序列表（unorder list）：

type是设置每一行的符号，一般不用，现在都用css样式替代

表格标签：

<table>：定义表格

<tr>：定义行

<td>：定义单元格

<th>：定义表头单元格

属性值：

table：

border：定义表格边框的粗细

width：定义表格的宽度

cellspacing：让边框中间留白

tr：

align：定义表格行的内容对齐方式，一般用center

td：

rowspan：定义单元格可横跨的行数（注意是横跨行进行合并，上下）

colspan：定义单元格可横跨的列数（注意是横跨列进行合并，左右）

布局标签：

<div>：占网页的一整行

<span>：用于组合行内元素

布局一般要于css使用，后面会讲

表单标签：

注意：表单标签比较重要，因为是用来采集用户输入的数据，并传给后台服务器的作用

<form>：定义表单
<input>：定义表单项，通过typr属性控制输入形式
<label>：为表单项定义标注
<select>：定义下拉列表
<option>：定义下拉列表的列表项
<textarea>：定义文本域

<form>：定义表格

属性：

action：指定表单数据提交的url，即要提交到哪里去

表单项数据要被提交，必须指定其name属性

就像上面的代码，他是将（"uername"，用户输入的值）包装成键值对进行传输

method：指定表单提交的方式

1.get：默认值

请求参数会拼接在url即网址栏的网址字段后面

但url的长度有限制 4KB，所以尽量不要在此处展示

2.post;

请求参数会在http请求协议的请求体中

请求参数无限制

<input>的type属性：

text：默认值，定义单行的输入字段

password：定义密码字段

radio：定义单选按钮

checkbox：定义复选框

file：定义文件上传按钮

hidden：定义隐藏的输入字段（例如在编辑里，id不用用户输入，但需要传给后台进行定位，此时id为隐藏字段）

submit：定义提交按钮，点击会将数据传送给服务器

reset：定义重置按钮，点击完会将表中所有数据清楚

button：定义可点击的按钮（没有任何效果，将来是结合javaScript使用）

<form action="#" method="post">
    <input type="hidden" name="id" value="123">

    <label for="username">用户名：</label>
    <input type="text" name="username" id="username"><br>

    <label for="password">密码：</label>
    <input type="password" name="password" id="password"><br>

    性别：
    <input type="radio" name="gender" value="1" id="male"><label for="male">男</label>
    <input type="radio" name="gender" value="2" id="female"><label for="female">女</label>
    <br>

    爱好：
    <input type="checkbox" name="hobby" value="1">旅游
    <input type="checkbox" name="hobby" value="2">电影
    <input type="checkbox" name="hobby" value="3">游戏
    <br>

    头像：
    <input type="file"><br>


    城市：
    <select name="city">
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="sz">深圳</option>
    </select>

    个人描述：
    <textarea cols="20" rows="5" name="desc"></textarea><br>

    <br>
    <input type="submit" value="免费注册">
    <input type="reset" value="重置">
    <input type="button" value="一个按钮">

注意：

1.在写代码时，注意区分标签和属性，需要先写标签才能调属性

2.每一个标签都需要加name，用于上传

3.label的作用就是当用户点击的不是输入框，而是输入框前面的字段，一点击就会弹到输入框内

例如下面的代码，input需要定义id，然后用label里的for去关联

4.radio在使用中，需要注意：

注意点1：如果不用同名name，就可以多选，但是一般使用的都是要互斥的效果，即男女选其一

注意点2：若未定义值，则无论选男或女，提交后，显示的是gender：on，那会导致后台接收的时候都是on，无法进行区分，此时需要定义value（在定义checkbox标签时也是一样的问题）

5.textarea标签中，cols是增加列数，即左右增加，rows是增加行数，即上下增加

6.select标签，也需要定义value，用来区分

CSS：

用于控制网页表现得语言

CSS（Cascading Style Sheet）：层叠样式表

css导入方式，即css怎么和html结合

在体内写<div>或<span>标签，在头部里写引入方式<style>

css导入方式：

内联方式：很少用因为和html有耦合

内部样式：定义style

外部样式：定义link标签，引入外部得css文件，link标签在head头部内编写，属性值需要定义href文件位置，rel识别格式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span {
            color: firebrick;
        }

    </style>
    <style>
        div {
            color: firebrick;
        }

    </style>

    <link href="../s/cs1.css" rel="stylesheet">
</head>
<body>

<div>ssssssss</div>
<span>hhhcss</span>
<p>asd</p>

</body>
</html>

cs1.css文件内容

p{
    color: aqua;
}

css选择器：

选取需要设置样式得元素（标签）

分类：

1.元素选择器

元素名称{color：red；}

例：div{color：red；}

2.id选择器

#id属性值{color：red；}

例：#name{color：red；}

<div id="name">hello css</div>

3.类选择器

.class属性值{color：red；}

例：.cls{color：red；}

<div class="cls">hello css</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        div {
            color: firebrick;
        }

        #1{
            color: sienna;
        }
    </style>

    <style>
        .cls {
            color: aquamarine;
        }
    </style>


</head>
<body>

<div>asd</div>
<div id="1">asd</div>
<div class="cls">asd</div>

<span class="cls">asd</span>

</body>
</html>

注意点：

选择器是在<style>标签中写，且哪个选取得范围小就使用哪个，例如div标签有3个，其中一个属性为id，此时编写了一个元素选择器为红色和id选择器蓝色，id为蓝色，其他的为红色

css属性：

在w3school里看

JavaScript：

javaScript简称JS，下面统一用JS称呼

JS是一门跨平台、面向对象的脚本语言，来控制网页行为的，他能使网页可交互

什么是脚本语言，Script翻译为脚本，脚本就是弱类型语言，没有像java那么严格，加载速度快

通俗易懂的告诉你到底什么叫脚本语言？http://t.csdn.cn/qWfai

JS的引入方式：

内部脚本：将JS定义在HTML页面中

alert("hello JS"); alert作用是弹出警告框

注意：

1.在HTML文档中可以在任意地方，放置任意数量的<script>

2.一般把脚本放到<body>元素的底部，可以改善显示速度，因为js是（动态）交互，放在前面会拖慢显示

外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面中

外部文件：demo.js
alert("hello JS");

引入外部js文件：<script src="../js/demo.js"></script>

注意：

1.外部脚本不能包含<script>标签，即标签中间不能再写<script>标签

2.<script>标签不能自闭合

js基础语法：

书写语法：

1.区分大小写

2.每行结尾分号可有可无（只有这个和java不一样，其他都一样）

3.注释和java一样

4.大括号表示代码块

输出语句：

window.alert()写警告框

window.alert("hello JS")

document.write()写入HTML输出即在html的体标签里显示

document.write("hello JS")

console.log()写入浏览器控制台

console.log("hello JS")

浏览器控制台就是右键网页点击检查所弹出来的界面，快捷键F12

变量：

用var关键字（variable）来声明变量

var test = 20；

变量名声明规则和java一样：

由字母、数字、下划线_、美元符号$组成

数字不能开头

建议驼峰命名

var变量的特点：1.作用域：全局变量，就算是代码块内的也一样可以作用到，2.变量可以重复定义

ECMAScript6新增了let关键字来定义变量，用法和var类似，但特点是只有在代码块内有效，且不允许重复声明

ECMAScript6新增了const关键字，用来声明一个只读的常量，一旦声明，常量的值就不能改变

报错查询：F12控制台console

1997年称为ECMA（欧洲计算机协会）标准，规定了所有浏览器的语言必须遵守这个标准，这个脚本是基于js定义出来的，js也就是遵守了这个标准，ECMAScript6（ES6）为最新的js版本，于2015年发布

数据类型：

js中分为：原始类型和引用类型

5种原始类型：

number：数字（整数、小数、Nan（Not a Number））js是自动进行类型转换的，当在字符转换时，判断字符串为非数字时即+‘abc’，会返回NaN

string：字符、字符串、单双引皆可

boolean：布尔。true、false

null：对象为空

undefined：当声明的变量未初始化时，该变量的默认值是undefined

使用typeof运算符可以获取数据类型

alert（typeof age）；

但请注意：

var obj = null;
alert(typeof obj);

返回的不是null，而是object。这是js的原始错误，被ECMAs沿用至今

w3school→Browser Side→js→左侧目录js数据类型→拉到最下面有

ECMAScript 原始类型

可以查看这个问题的官方解释

运算符：

除了===以外的运算符，都会自动进行类型转换后再计算

===是判断类型是否一样，如果不一样，直接返回false，如果一样才会比较其值

a=1
b='33'
alert(a===b)

类型转换：

其他类型转为number数字类型

1.string：按照字符串的字面值，转为数字，如果字面值不是数字，则转为NaN

var str = +"abc";
alert（str）
（前面的+为正负数，此时为+号会判断或者转成数字，此时为abc则转为NaN，一般使用parseInt)
var str = +"20";
alert（parseInt(str) + 1）

2.boolean：true转为1，false转为0

var flag = +false；

alert（flag）；

其他类型转为boolean

1.number：0和NaN会转为false，其他的数字转为true
var flag = 0；(写3也会转为true)

if（flag）{ alert("转为true")

}else{ alert("转为false");}

2.string：空字符串转为false，其他的字符串转为true
var flag = ""；

if（flag）{ alert("转为true")

}else{ alert("转为false");}

3.null：转为false
var flag = null；

if（flag）{ alert("转为true")

}else{ alert("转为false");}

4.undefined：转为false
var flag = undefined；

if（flag）{ alert("转为true")

}else{ alert("转为false");}

类型转化的应用场景：

str = “asd”；

无需健壮性判断，即if（str != null && str.length >0 ）因为str不为null，且str有字符串

现在可以直接这样写：

if（str）{ alert("转为true")

}else{ alert("转为false");}

流程控制语句：

和java的用法一样

在使用for循环时，建议用let类型来定义i，用var是全局变量，循环外会干扰

函数：

在java里叫方法，在js里叫函数，因为js是弱类型语言，不需要写数据类型

格式一：

function 方法名（参数1，参数2）{方法体}；

例：

function method（a，b）{return a + b}；

var s = method（10，10）；

alert（s）；→最终输出为20

格式二：

var 变量名 = function（参数1，参数2）{方法体}；

例：

var method = function（a，b）{return a + b}；

var s = method（10，10，10）；

alert（s）；→最终输出为20

注意：两种方法的格式都可传入多个参数，只是方法不会接收，也就不会参与运算

JS对象：

基本对象：array对象、string对象、自定义对象

特殊对象：BOM对象、DOM对象

array对象：

格式：

var arr = new Array(1,2,3);

var arr = [1,2,3]（比较常用，java用的是大括号{ }，js用的是中括号[ ]）

索引值访问：arr[0] = 1;

特点：js数组相当于java种的集合，可变长变类型

var arr = [1,2,3];

arr[6] = 10;（可变长示例）

alert(arr);→输出为1,2,3,,,10

若输出alert（arr[5]）输出为undefined（未定义）

arr[4] = 'hello';（可变类型示例）

alert(arr);→输出为1,2,3,hello,,10

array对象的属性和方法

属性：

lengh：长度

var arr2 = [1,2,3,4,5]
for (let i = 0; i < arr2.length; i++) {
alert(arr2[i])
}

方法：

push():添加元素方法

var arr2 = [1,2,3,4,5]
arr2.push(6);
alert(arr2)

splice():删除元素方法

var arr2 = [1,2,3,4,5]
arr2.splice(0,1);
alert(arr2)

注意：splice方法的参数第一个为从哪个索引开始，第二个参数为删除几个元素

在参考书里可以查询

String对象：

格式：

var s = new String('ss');

var s = 'ss';

属性;

length:返回字符串长度

方法：

charAt()：返回在指定位置的字符

var s ='haung';
alert(s.charAt(4))→返回的是字符串索引上的字符g

indexOf()：检索字符串

var s ='haung';
alert(s.indexOf('g'))→返回的是字符串上的索引4

trim()：去除字符串前后的空白字符（这个在手册里没有，js里很多和java类似，可以尝试使用java语法）

var s =' haung ';
alert(1+s.trim()+1)→返回的是1haung1

自定义对象：

格式：

var 对象名 = {

属性名称1：属性值1，

属性名称2：属性值2，

...
函数（方法）名称：function(形参列表){语句体}

...}

红色字为声明使用的编码格式，否则在输出中文时会产生乱码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>

</head>
<body>

<script>

    var person = {
        name:'zhangsan',
        age:23,
        eat:function(){
            alert("干饭")
        }
    };

    alert(person.name);
    alert(person.age);

    person.eat();

</script>
</body>
</html>

编码格式http://t.csdn.cn/2AeTD

BOM对象：

BOM（Browser Object Model）浏览器对象模型

js将浏览器的各个组成部分封装为对象

组成：

Window：浏览器窗口对象（一个浏览器里的每个浏览器窗口）

Navigator：浏览器对象（整个浏览器）（用的比较少）

Screen：屏幕对象（用的比较少）

History：历史记录对象

Location：地址栏对象

Window：浏览器窗口对象

window.alert('abc')；window其实都可以省略

属性：获取其他BOM对象Navigator、Screen、History、Location（其实直接输入就行不用window调用）

方法：

alert（）：显示带有一段消息和一个确认按钮的警告框

confirm（）：显示带有一段消息和一个确认按钮和取消按钮的对话框（例如：删除前提示客户确认是否删除）

var b = confirm('确认删除？');
if (b){
//删除逻辑
}

setTimeout（）：按照指定的周期（以毫秒计）来调用函数或计算机表达式

setTimeout(function (){alert('hhe')},3000);

setInterval（）：在指定的毫秒数后调用函数或计算机表达式（每隔几秒重复一次，应用场景：轮播图等）

setInterval(function (){alert('gogo')},1000);

要产生不停切换的bannner图，可以考虑一个方法：

根据一个变化的数字，产生固定个数的值，x%2、x%3 ...x为不固定的值，后面的为要变化内容个数的值

var x = 0;

setInerval(

function(){

if(x%2){
on()；
x++；
}else{
off()
}}

,1000)

History：历史记录对象

back()：加载history列表种的前一个url（就是浏览器的返回）

forward()：加载history列表种的下一个url（就是浏览器的返回之前的页面）

Location：地址栏对象

href：设置或返回完整的url（转跳网址，可以应用于注册成功3秒后返回首页）

DOM对象：

Document Object Model 文档对象模型（在xml里有提过）

DOM是W3C（万维网联盟）的标准

DOM定义了访问html和xml文档的标准

W3C DOM标准被分为3个不同部分：

1.核心DOM：针对任何结构化文档的标准模型

将标记语言的各个组成部分封装成对象

Docunent：整个文档对象

Element：元素对象

Attribute：属性对象

Text：文本对象

Comment：注释对象

2.XML DOM：针对xml文档的标准模型

3.HTML DOM：针对html文档的标准模型

Image：<img>

Button：<input type=‘button’>

js通过DOM，就能够对HTML进行操作

改变HTML元素内容

改变HTML元素的样式（CSS）

对HTML DOM事件做出反应

添加和删除HTML元素

BOM是将浏览器一个界面分成各个部分，并封装成对象，DOM是将文档作为对象，可以增删改查里面的内容（DOM为核心即都可以用，DOM html 可以用来修改html的内容（这个也就是为什么里面的内容可以交互，html是定义框架，会写死，css是样式，js是可以改变html里面的内容），DOM xml是配置文件的标准）

DOM和BOM的区别http://t.csdn.cn/u63B1

获取Element对象：

可以直接使用Document对象的方法来获取

1.getElementById：根据id属性值获取，返回一个Element对象

2.getElementsByTagName：根据标签名称获取，返回Element对象数组

3.getElementsByName：根据name属性值获取，返回ELement对象数组

4.getElementsByClassName：根据class属性值获取，返回Element对象数组

代码参考：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<img id="light" src="../imgs/off.gif"> <br>

<div class="cls">传智教育</div>   <br>
<div class="cls">黑马程序员</div> <br>

<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏
<br>

<script>
    /*
    获取：使用Document对象的方法来获取
        * getElementById：根据id属性值获取，返回一个Element对象
        * getElementsByTagName：根据标签名称获取，返回Element对象数组
        * getElementsByName：根据name属性值获取，返回Element对象数组
        * getElementsByClassName：根据class属性值获取，返回Element对象数组

     */
    //1. getElementById：根据id属性值获取，返回一个Element对象
    var img = document.getElementById("light");
    // alert(img);

    //2. getElementsByTagName：根据标签名称获取，返回Element对象数组

    var divs = document.getElementsByTagName("div");
    // alert(divs.length);
   /* for (let i = 0; i < divs.length; i++) {
        alert(divs[i]);
    }*/

    //3. getElementsByName：根据name属性值获取，返回Element对象数组
    var hobbys = document.getElementsByName("hobby");
   /* for (let i = 0; i < hobbys.length; i++) {
        alert(hobbys[i]);

    }*/

    //4. getElementsByClassName：根据class属性值获取，返回Element对象数组

    var clss = document.getElementsByClassName("cls");
    for (let i = 0; i < clss.length; i++) {
        alert(clss[i]);

    }



</script>
</body>
</html>

HTML Element对象的使用：

修改图片：

HTML DOM src 属性 (w3school.com.cn)https://www.w3school.com.cn/jsref/prop_img_src.asp修改字体颜色：（打开div标签是没有自己特有的属性和方法的，只能找他的父类，html dom element对象）

比较常用的：

style：设置元素css样式

innerHTML：设置元素内容

HTML DOM Element 对象 (w3school.com.cn)https://www.w3school.com.cn/jsref/dom_obj_all.asp

修改复选款默认打开为勾选状态：

HTML DOM checked 属性 (w3school.com.cn)https://www.w3school.com.cn/jsref/prop_checkbox_checked.asp

事件监听：

事件：html事件是发生在html元素上的”事情“

例如：按钮被点击、鼠标移动到元素之上、按下键盘按键等

事件监听：js可以在事件被侦测到时执行代码

事件绑定：

方式一：（不建议使用，因为html和js语法耦合在一起了）

function on(){alert('我被点击了')}

方式二：

document.getElementById('btn').onclick = function(){'我又被点击了'}

所有的事件：

事件对象 (w3school.com.cn)https://www.w3school.com.cn/jsref/obj_events.asp

表单验证：

验证是直接在前端验证，无需再发送到服务器进行验证，减轻服务器压力

<spen>这个是没有类型的元素，可以定义id和class，比如某类东西基础色为白色，就用class，但是每个都有不同点，可以用id进行设置，spen一般搭配js或css使用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>欢迎注册</title>
<link href="../css/register.css" rel="stylesheet">
</head>
<body>

<div class="form-div">
<div class="reg-content">
<h1>欢迎注册</h1>
<span>已有帐号？</span> <a href="#">登录</a>
</div>
<form id="reg-form" action="#" method="get">

<table>

<tr>
<td>用户名</td>
<td class="inputs">
<input name="username" type="text" id="username">
<br>
<span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
</td>

</tr>

<tr>
<td>密码</td>
<td class="inputs">
<input name="password" type="password" id="password">
<br>
<span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
</td>
</tr>

<tr>
<td>手机号</td>
<td class="inputs"><input name="tel" type="text" id="tel">
<br>
<span id="tel_err" class="err_msg" style="display: none">手机号格式有误</span>
</td>
</tr>

</table>

<div class="buttons">
<input value="注册" type="submit" id="reg_btn">
</div>
<br class="clear">
</form>

</div>

<script>

//1. 验证用户名是否符合规则
//1.1 获取用户名的输入框
var usernameInput = document.getElementById("username");

//1.2 绑定onblur事件失去焦点
usernameInput.onblur = checkUsername;

function checkUsername() {
//1.3 获取用户输入的用户名
var username = usernameInput.value.trim();

//1.4 判断用户名是否符合规则：长度 6~12,单词字符组成
var reg = /^\w{6,12}$/;
var flag = reg.test(username);

//var flag = username.length >= 6 && username.length <= 12;
if (flag) {
//符合规则
document.getElementById("username_err").style.display = 'none';
} else {
//不合符规则
document.getElementById("username_err").style.display = '';
}

return flag;
}

//1. 验证密码是否符合规则
//1.1 获取密码的输入框
var passwordInput = document.getElementById("password");

//1.2 绑定onblur事件失去焦点
passwordInput.onblur = checkPassword;

function checkPassword() {
//1.3 获取用户输入的密码
var password = passwordInput.value.trim();

//1.4 判断密码是否符合规则：长度 6~12
var reg = /^\w{6,12}$/;
var flag = reg.test(password);

//var flag = password.length >= 6 && password.length <= 12;
if (flag) {
//符合规则
document.getElementById("password_err").style.display = 'none';
} else {
//不合符规则
document.getElementById("password_err").style.display = '';
}

return flag;
}

//1. 验证手机号是否符合规则
//1.1 获取手机号的输入框
var telInput = document.getElementById("tel");

//1.2 绑定onblur事件失去焦点
telInput.onblur = checkTel;

function checkTel() {
//1.3 获取用户输入的手机号
var tel = telInput.value.trim();

//1.4 判断手机号是否符合规则：长度 11，数字组成，第一位是1

//var flag = tel.length == 11;
var reg = /^[1]\d{10}$/;
var flag = reg.test(tel);
if (flag) {
//符合规则
document.getElementById("tel_err").style.display = 'none';
} else {
//不合符规则
document.getElementById("tel_err").style.display = '';
}

return flag;
}

//1. 获取表单对象
var regForm = document.getElementById("reg-form");

//2. 绑定onsubmit 事件
regForm.onsubmit = function () {
//挨个判断每一个表单项是否都符合要求，如果有一个不合符，则返回false

var flag = checkUsername() && checkPassword() && checkTel();

return flag;
}

</script>
</body>
</html>