前端：HTML & CSS & JavaScript 基础语法和常规操作,静态web

本文链接：https://blog.csdn.net/habe33/article/details/125689728

查询网站：w3school 在线教程

1. W3C标准：规定了一个网页是由三部分组成

2. HTML：超文本标记语言

2.1 结构标签+简单创建一个浏览器界面的步骤：

2.8 表单标签：数据采集，eg:登录、注册页面

3. CSS: Cascading Style Sheet（层叠样式表）

2.1 css 导入方式：即如何将css 代码和 html 代码结合

3.2 css 选择器：选取需设置样式的元素（标签）（三种）

4、JavaScript：脚本语言

4.1 JavaScript引入方式 = HTML 和 JavaScript 的结合方式

4.2 JavaScript基础语法（与 Java 类似）

4.2.1 书写语法

4.2.2 输出语句

4.2.3 变量var : 可以存放不同类型的值

4.2.4 数据类型

4.2.5 运算符

4.2.6 流程控制语句（和 Java 一样）

4.2.7 函数 = Java中的方法，通过 function 关键词进行定义

4.3 JavaScript常用对象（3类）

4.4 事件监听

4.4.1 事件绑定

4.4.2 常用的事件属性

4.5 RegExp对象:正则对象是判断指定字符串是否符合规则

4.5.1 正则对象使用

4.6.2 正则表达式

4.6 改进表单校验案例

1. W3C标准：规定了一个网页是由三部分组成

W3C是万维网联盟，这个组成是用来定义标准的。他们规定了一个网页是由三部分组成，分别是：

结构：HTML 语言，HTML定义页面的整体结构；
表现： CSS 语言，CSS是用来美化页面；
行为：JavaScript 语言，JavaScript可以使网页动起来，即操作

2. HTML：超文本标记语言

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

==HTML(HyperText Markup Language)：超文本标记语言：==

* 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容

* 标记语言：由标签构成的语言，eg:XML（自定义）， HTML（预定义的）

2.1 结构标签+简单创建一个浏览器界面的步骤：

* 新建文本文件，后缀名改为 .html

页面文件的后缀名是 .html，所以需要该后缀名

* 编写 HTML 结构标签

HTML 是由一个一个的标签组成的，但是它也用于表示结构的标签

<html>
	<head>
    	<title>浏览器页面标题名称/title>
    </head>
    <body>
        <font color='red'>内容区内容+设置字体颜色</font>
    </body>
</html>

==总结：==

* HTML 文件以.htm或.html为扩展名

* **HTML 结构标签**

* **HTML 标签不区分大小写** ： `font` = `Font`

* **HTML 标签属性值单双引皆可**：<font color="red"></font>

* **HTML 语法松散**：font 标签不加结束标签,也已成功编译运行，

推荐写全，即标签成对出现<xxx>需要呈现该效果的文字</xxx>

2.2 基础标签：与文字相关的标签

文字中的特殊字符，需要使用转义符：

2.3 图片、音频、视频标签

* img：定义图片

* src：规定显示图像的 URL（统一资源定位符）
* height：定义图像的高度
* width：定义图像的宽度

* audio：定义音频。支持的音频格式：MP3、WAV、OGG

* src：规定音频的 URL
* controls：显示播放控件

* video：定义视频。支持的音频格式：MP4, WebM、OGG

* src：规定视频的 URL
* controls：显示播放控件

<img src="../img/a.jpg" width="300" height="400">
<audio src="b.mp3" controls></audio>
<video src="c.mp4" controls width="500" height="300"></video>

src属性的设置方法：

* 绝对路径：完整路径，指的是：网络中的绝对路径。格式为：协议://ip地址:端口号/资源名称。
* 相对路径：相对位置关系，找页面和其他资源的相对路径。共同路径…+/区别路径
- ./ 表示当前路径
- ../ 表示上一级路径
- ../../ 表示上两级路径

height属性和width属性有两种设置方式：

* 像素：单位是px
* 百分比。占父标签的百分比。例如宽度设置为 50%，意思就是占它的父标签宽度的一般（50%）

2.4 超链接标签：点击实现页面跳转

 <a href="https://www.itcast.cn" target="_self">点我有惊喜</a>

a 标签属性：

href：指定访问资源的URL
target：指定打开资源的方式
- _self：默认值，在当前页面打开
- _blank：在空白页面打开

2.5 列表标签

<body>
    <ol type="A"> 
        <li>咖啡</li> 
        <li>茶</li> 
    </ol> 
    <ul type="circle"> 
        <li>咖啡</li> 
        <li>茶</li> 
    </ul> 
</body>

ol标签的 type 属性用来指定标记的标号的类型（数字、字母、罗马数字等）

ul标签的 type 属性用来指定标记的形状

2.6 表格标签

table ：定义表格（标签）

border：规定表格边框的宽度（属性）
width ：规定表格的宽度
cellspacing：规定单元格之间的空白

tr ：定义行

align：定义表格行的内容对齐方式

td ：定义单元格 <td>单元格内容<\td>

rowspan:规定单元格可横跨的行数
colspan:规定单元格可横跨的列数

th：定义表头单元格

2.7 布局标签常与CSS结合

div 标签在浏览器上会有换行的效果，显示标签内容后换行

span 标签在浏览器上没有换行效果，显示标签内容后不换行

2.8 表单标签：数据采集，eg:登录、注册页面

form 标签属性

action：规定当提交表单时向何处发送表单数据，该属性值就是URL
- 以后会将数据提交到服务端，该属性需要书写服务端的URL。而今天我们可以书写 # ，表示提交到当前页面来看效果。
method ：规定用于发送表单数据的方式
- get：默认值。如果不设置method属性则默认就是该值
  - 请求参数会拼接在URL后边
  - url的长度有限制 4KB
- post：
  - 浏览器会将数据放到http请求消息体中
  - 请求参数无限制的

表单项标签

<input>：表单项，只能输入一行文本，通过type属性控制输入形式
- <input type="text" name="username"> name属性：给获取的文本命名

<select>：定义下拉列表，<option> 定义列表项
<textarea>：文本域，可输入多行文本

3. CSS: Cascading Style Sheet（层叠样式表）

CSS用于控制网页表现：Cascading Style Sheet（层叠样式表）。

style 标签中定义的就是css代码。

2.1 css 导入方式：即如何将css 代码和 html 代码结合

1、内联样式：在标签内部使用style属性，属性值是css属性键值对（复用性差）

<div style="color: red">Hello CSS~</div>

2、内部样式：定义<style>标签，在标签内部定义css样式（可以在该页面中复用）

<style type="text/css">
      div{
          color: red;
      }
  </style>

3、外部样式：定义link标签，引入外部的css文件（可以在多个页面复用）

编写一个css文件。名为：demo.css，内容如下:

div{
      color: red;
  }

在html中引入 css 文件。

 <link rel="stylesheet"  href="demo.css">

3.2 css 选择器：选取需设置样式的元素（标签）（三种）

元素选择器
```
元素名称{color: red;}
```
id选择器
```
#id属性值{color: red;}
```
类选择器
```
.class属性值{color: red;}
```
代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: red; /*该代码表示将页面中所有的div标签的内容的颜色设置为红色*/
        }

        #name{
            color: blue;/*该代码表示将页面中所有的id属性值是 name 的标签的内容的颜色设置为蓝色*/
        }

        .cls{
            color: pink;/*该代码表示将页面中所有的class属性值是 cls 的标签的内容的颜色设置为粉色*/

        }
    </style>

</head>
<body>
    <div>div1</div>
    <div id="name">div2</div>
    <div class="cls">div3</div>
    <span class="cls">span</span>
</body>
</html>

4、JavaScript：脚本语言

JavaScript 是一门跨平台、面向对象的脚本语言，不需要编译，由浏览器直接解析并执行。

JavaScript 是用来控制网页行为的，它能使网页可交互；如改变页面内容、修改指定元素的属性值、对表单进行校验等

alert(数据) 是 JavaScript 的一个方法，作用是将参数数据以浏览器弹框的形式输出出来。

4.1 JavaScript引入方式 = HTML 和 JavaScript 的结合方式

JavaScript 引入方式（两种）：

内部脚本：将 JS代码定义在HTML页面中
- 在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间，可以在任意地方，放置任意数量的
- ```
<body>
    <script>
        alert("hello js1");
    </script>
</body>
```
外部脚本：将 JS代码定义在外部 JS文件中，然后引入到 HTML页面中
- 定义外部 js 文件。如定义名为 demo.js的文件，内容：alert("hello js");
  - 外部脚本不能包含 <script> 标签
    
    在js文件中直接写 js 代码即可，不要在 js文件中写 script 标签
- 在页面中引入外部的js文件
  - 使用 script 标签中使用 src 属性指定 js 文件的 URL 路径。
  - <script src="../js/demo.js">
  - <script> 标签不能自闭合，不能少</script>

4.2 JavaScript基础语法（与 Java 类似）

4.2.1 书写语法

区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无

如果一行上写多个语句时，必须加分号用来区分多个语句。
注释
- 单行注释：// 注释内容
- 多行注释：/* 注释内容 */
- JavaScript 没有文档注释
大括号表示代码块

4.2.2 输出语句

js 可以通过以下方式进行内容的输出，只不过不同的语句输出到的位置不同

使用 window.alert() 写入警告框：弹框效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    
<script>
    window.alert("hello js");//写入警告框
</script>
</body>
</html>

上面代码通过浏览器打开，我们可以看到如下图弹框效果

使用 document.write() 写入 HTML 输出：在页面上显示
```
 document.write("hello js 2~");//写入html页面
```
上面代码通过浏览器打开，我们可以在页面上看到 document.write(内容) 输出的内容
使用 console.log() 写入浏览器控制台：输出在控制台，浏览器界面按 F12 查看控制台
```
console.log("hello js 3");//写入浏览器的控制台
```

4.2.3 变量var : 可以存放不同类型的值

JavaScript 中用 var 关键字（variable 的缩写）来声明变量。格式 var 变量名 = 数据值;。JavaScript 是一门弱类型语言，变量可以存放不同类型的值；可以重复赋值为不同类型的值

var test = 20;
test = "张三";

js 中的变量名命名规则，和java语言基本都相同

组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
数字不能开头
建议使用驼峰命名

var 关键字

作用域：全局变量
变量可以重复定义

let 关键字（ECMAScript 6 新增）声明的变量只在所在的代码块内有效，且不允许重复声明。

const关键字（ECMAScript 6 新增），用来声明一个只读的常量。一旦声明，常量值不能改变。

4.2.4 数据类型

typeof 运算符可以获取数据类型 eg:typeof age

原始数据类型：

number：数字（整数、小数、NaN(Not a Number)）
string：字符、字符串，单双引皆
boolean：布尔。true，false
null：对象为空,数据类型为object
undefined：当声明的变量未初始化时，该变量的默认值是 undefined

4.2.5 运算符

大部分和 Java语言都是一样的，不同的是 JS 关系运算符中的 == 和 ===

一元运算符：++，–
算术运算符：+，-，*，/，%
赋值运算符：=，+=，-=…
关系运算符：>，<，>=，<=，!=，==，===…
逻辑运算符：&&，||，!
三元运算符：条件表达式 ? true_value : false_value

==和===区别

==：
1. 判断类型是否一样，如果不一样，则进行类型转换
2. 再去比较其值
===：js 中的全等于
1. 判断类型是否一样，如果不一样，直接返回false
2. 再去比较其值

代码：

var age1 = 20;
var age2 = "20";

alert(age1 == age2);// true
alert(age1 === age2);// false

类型转换

其他类型转为number
- string 转换为 number 类型：按照字符串的字面值，转为数字。如果字面值不是数字，则转为NaN
  
  将 string 转换为 number 有两种方式：建议使用 parseInt() 函数进行转换。
  - 使用 + 正号运算符：
```
var str = +"20";
alert(str + 1) //21
```
  - 使用 parseInt() 函数(方法)：
```
var str = "20";
alert(parseInt(str) + 1);
```
- boolean 转换为 number 类型：true 转为1，false转为0
```
var flag = +false;
alert(flag); // 0
```
其他类型转为boolean
- number 类型转换为 boolean 类型：0和NaN转为false，其他的数字转为true
- string 类型转换为 boolean 类型：空字符串转为false，其他的字符串转为true
- null类型转换为 boolean 类型是 false
- undefined 转换为 boolean 类型是 false
应用：//健壮性判断
if(str != null && str.length > 0) 可等价为 if(str) （自动类型转换）

4.2.6 流程控制语句（和 Java 一样）

JavaScript 中提供了和 Java 一样的流程控制语句，如下

if
switch
for
while
dowhile

4.2.7 函数 = Java中的方法，通过 function 关键词进行定义

函数（就是Java中的方法）是被设计为执行特定任务的代码块；

JavaScript 函数通过 function 关键词进行定义。

函数定义格式（两种）：

方式1

function 函数名(参数1,参数2..){
    要执行的代码
}

方式2

var 函数名 = function (参数列表){
    要执行的代码
}

注意：
形式参数不需要类型。因为JavaScript是弱类型语言
function add(a, b){
    return a + b;
}
上述函数的参数 a 和 b 不需要定义数据类型，因为在每个参数前加上 var 也没有任何意义。
返回值也不需要定义类型，可以在函数内部直接使用return返回即可

函数调用

函数调用函数：JS中，函数调用可以传递任意个数参数，按顺序接受

函数名称(实际参数列表);

eg：

let result = add(10,20);

4.3 JavaScript常用对象（3类）

基本对象

Array对象用于定义数组

//定义、赋值：
var 变量名 = new Array(元素列表); //定义数组
var 变量名 = [元素列表]; //定义数组
arr[索引] = 值;  //访问数组中的元素


//特征：
/*JavaScript 中的数组相当于 Java 中集合。数组的长度是可以变化的，
而 JavaScript 是弱类型，所以可以存储任意的类型的数据。 */
// 变长
var arr3 = [1,2,3];
arr3[10] = 10;
alert(arr3[10]); // 10
alert(arr3[9]);  //undefined
//不同类型
arr3[5] = "hello"; 
alert(arr3[5]); // hello

//属性方法
//length 属性，该数组可以动态的获取数组的长度
alert(arr3.length);
//push 函数：给数组添加元素，也就是在数组的末尾添加元素
arr3.push(10);
//splice 函数：删除元素,参数1：索引,参数2：个数
arr5.splice(0,1); //从 0 索引位置开始删除，删除一个元素

String对象

//定义，声明
var 变量名 = new String(s); 
var 变量名 = "数组"; 

//属性 length ，该属性是用于动态的获取字符串的长度

//函数 charAt()，返回指定位置的字符
//函数 IndexOf()，检索字符串
//函数 trim() ，用来去掉字符串两端的空格。

自定义对象

var 对象名称 = { 
    属性名称1:属性值1, 
    属性名称2:属性值2, 
    ..., 
    函数名称:function (形参列表){},
    ... 
};

调用属性的格式：对象名.属性名

调用函数的格式：对象名.函数名()

BOM 对象
- Browser Object Model 浏览器对象模型，将浏览器的各个组成部分封装为对象。
- * Window：浏览器窗口对象
  * Navigator：浏览器对象（很少使用）
  * Screen：屏幕对象（很少使用）
  * History：历史记录对象
  * Location：地址栏对象
- Window：浏览器窗口对象，window.alert("abc");或alert("abc")*
  * 属性
  * 函数
- History：历史记录对象
  * 使用 window.history获取，其中window. 可以省略
  * 函数
- Location：地址栏对象
  * 使用 window.location获取，其中window. 可以省略
  * 函数
DOM对象
- Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。
- 封装的对象：（核心 DOM ：针对任何结构化文档的标准模型。 XML 和 HTML 通用的标准）
  
  Document ：整个文档对象
  
  Element ：元素对象
  
  Attribute ：属性对象
  
  Text ：文本对象
  
  Comment ：注释对象
- 作用：
  
  JavaScript 通过 DOM，就能够对 HTML 进行操作了
  
  改变 HTML 元素的内容
  
  改变 HTML 元素的样式（ CSS ）
  
  对 HTML DOM 事件作出反应
  
  添加和删除 HTML 元素
- HTML 中的 Element 对象可以通过 Document 对象获取，
  Document 对象是通过 window 对象获取。
- Document 对象中提供了以下获取 Element 元素对象的函数
  
  getElementById() ：根据 id 属性值获取，返回单个 Element 对象
  
  getElementsByTagName() ：根据标签名称获取，返回 Element 对象数组
  
  getElementsByName() ：根据 name 属性值获取，返回 Element 对象数组
  
  getElementsByClassName() ：根据 class 属性值获取，返回 Element 对象数组

4.4 事件监听

事件:HTML 事件是发生在 HTML 元素上的“事情”。

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

事件监听是JavaScript 可以在事件被侦测到时执行一段逻辑代码。

4.4.1 事件绑定

JavaScript 提供了两种事件绑定方式：推荐方拾二

方式一：通过 HTML标签中的事件属性进行绑定

如下面代码，有一个按钮元素，我们是在该标签上定义 事件属性，在事件属性中绑定函数。onclick 就是 单击事件 的事件属性。onclick='on（）' 表示该点击事件绑定了一个名为 on() 的函数
```
<input type="button" onclick='on()’>
```
下面是点击事件绑定的 on() 函数
```
function on(){
	alert("我被点了");
}
```
方式二：通过 DOM 元素属性绑定

如下面代码是按钮标签，在该标签上我们并没有使用 事件属性，绑定事件的操作需要在 js 代码中实现
```
<input type="button" id="btn">
```
下面 js 代码是获取了 id='btn' 的元素对象，然后将 onclick 作为该对象的属性，并且绑定匿名函数。该函数是在事件触发后自动执行
```
document.getElementById("btn").onclick = function (){
    alert("我被点了");
}
```

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--方式1：在下面input标签上添加 onclick 属性，并绑定 on() 函数-->
    <input type="button" value="点我" onclick="on()"> <br>
    <input type="button" value="再点我" id="btn">

    <script>
        function on(){
            alert("我被点了");
        }
      	//方式2：获取 id="btn" 元素对象，通过调用 onclick 属性 绑定点击事件
        document.getElementById("btn").onclick = function (){
            alert("我被点了");
        }
    </script>
</body>
</html>

4.4.2 常用的事件属性

事件属性名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开

4.5 RegExp对象:正则对象是判断指定字符串是否符合规则

RegExp 是正则对象。正则对象是判断指定字符串是否符合规则。

4.5.1 正则对象使用

正则对象有两种创建方式：推荐使用直接量方式

直接量方式：注意不要加引号
```
var reg = /正则表达式/;
```

创建 RegExp 对象

var reg = new RegExp("正则表达式");

函数

test(str) ：判断指定字符串是否符合规则，返回 true或 false

4.6.2 正则表达式

正则表达式定义了字符串组成的规则。判断指定的字符串是否符合指定的规则，如果符合返回true，如果不符合返回false。

正则表达式常用规则如下：

^：表示开始
$：表示结束
[ ]：代表某个范围内的单个字符，比如： [0-9] 单个数字字符
.：代表任意单个字符，除了换行和行结束符
\w：代表单词字符：字母、数字、下划线()，相当于 [A-Za-z0-9]
\d：代表数字字符：相当于 [0-9]

量词：

+：至少一个
*：零个或多个
？：零个或一个
{x}：x个
{m,}：至少m个
{m,n}：至少m个，最多n个

代码演示：

// 规则：单词字符，6~12
//1,创建正则对象，对正则表达式进行封装
var reg = /^\w{6,12}$/;

var str = "abcccc";
//2,判断 str 字符串是否符合 reg 封装的正则表达式的规则
var flag = reg.test(str);
alert(flag);

4.6 改进表单校验案例

表单校验案例中的规则是我们进行一系列的判断来实现的，现在学习了正则对象后，就可以使用正则对象来改进这个案例。

<!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>

```