HTML、CSS、JavaScript-CSDN博客

官方网址：https://www.w3school.com.cn/index.html

HTML

HTML（Hyper Text Markup Language）：超文本标记语言，最基础的网页开发语言

超文本：用超链接将不同空间的文字，图片，音频，视频等信息组织在一起

标记语言：由标签构成的<标签>，不是编程语言，运行在浏览器上

1 .html文档 .html或者.htm

2.成对，围堵标签，自闭和标签<br/>，由浏览器解析

3.属性值由键值对构成，单引号，双引号都行

一、基础标签

1.基本标签

html：根
head：头
title：标题
body：体

<!DOCTYPE html>
<head>
    <title>HTML快速入门</title>
</head>
<body>
    <font color="red">乾坤未定，你我皆是牛马~</font>
</body>
</html>

2.文本标签

<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    <font face="楷体" size="5">字体标签</font>
    <br>
    <b>粗体文本</b>
    <br>
    <i>斜体文本</i>
    <br>
    <u>下划线</u>
    <hr>
    <center>居中文本</center>
    <p>段落文本</p>
</body>

二、图片、音频、视频标签

<img src="../staticImages/s0.png" alt="">
<!-- 支持格式：MP3、WAV、OGG -->
<audio src="../audio/心墙.mp3" controls></audio>   
<!-- 支持格式：MP4、WebM、OGG -->
<video src="../video/1.mp4" controls width="100%"></video>

三、超链接标签

<a href="https://www.baidu.com" target="_blank">百度</a>

四、列表标签

 <ol type="1"> <!-- type值可以更改 -->
        <li>有序列表项</li>
        <li>有序列表项</li>
        <li>有序列表项</li>
    </ol>
    <ul>
        <li>无序列表项</li>
        <li>无序列表项</li>
        <li>无序列表项</li>
    </ul>

五、表格标签

<table border="1" cellspacing="0">
    <tr>
        <th>标题</th>
        <th>标题</th>
        <th>标题</th>
        <th>标题</th>
    </tr>
    <tr align="center">
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
    <tr align="center">
        <td rowspan="2">合并行</td>
        <td>单元格</td>
        <td colspan="2">合并列</td>

    </tr>
    <tr align="center">

        <td>单元格</td>
        <td>单元格</td>
        <td>单元格</td>
    </tr>
</table>

六、布局标签

<div>块级元素，占满一整行</div>
<span>行内标签，只占用自己的空间，不占行</span>

七、表单标签

表单：在网页中主要负责数据采集功能，使用<form>标签定义表单

form：定义表单
- action：指定表单数据提交的URL
- method：提交方式
  - post：请求参数会在http请求协议的请求体中，参数长度无限制，安全
  - get：请求参数会拼接在URL后边，参数长度有限制4kb，不安全

表单项（元素）：不同类型的input元素、下拉列表select、文本域textarea等

input：定义表单项，可以通过type属性改变样式，控制输入形式。
- 表单项要想被提交必须指定其name属性
- type属性：
  - text：文本输入框 placeholder：指定输入框的提示
  - password：密码框
  - radio：单选框
    - 注意：实现多个单选框只选一个，需要将name属性值设置成相同，value设置不同。
  - checkbox：复选框，name相同，value不同。可以指定默认值cheked，默认选中
  - file:文件选择
  - hidden：隐藏域，可以设置隐藏数据value
  - submit：提交
  - button：普通按钮
  - image：图片提交按钮，通过src指定路径
  - color：取色器，颜色也会被提交。
  - date：日期
  - datetime-local：日期时间
  - email：邮箱
  - number：数字
label标签：指定输入项的文字描述信息。
- label的for属性一般会和input的id属性值对应。用于获取焦点
select：下拉列表
- option：列表项，属性加上name才能被提交，默认选中select
textarea：文本域
- cols：一行中的字符个数
- rows：行

<!-- 表单 -->
<form action="#" method="get">
    <input type="text" name="username" placeholder="请输入用户名"> <br>
    <input type="password" name="password" placeholder="请输入密码"> <br>
    <input type="radio" name="sex" id="male" value="male">
    	<label for="male">男</label> 
    <input type="radio" name="sex" id="female" value="female">
    	<label for="female">女</label> <br>
    <input type="checkbox" name="hobby" value="basketball">篮球
    <input type="checkbox" name="hobby" value="football">足球 <br>
    <input type="file" name="file"><br>
    <input type="image" src="../staticImages/s0.png" width="50"><br>
    <input type="hidden" name="id" value="1">
    <textarea name="content" cols="10" rows="10"></textarea><br>
    <select name="city">
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="guangzhou">广州</option>
    </select><br>
    <input type="color" /><br>
    <input type="date" /><br>
    <input type="time" /><br>
    <input type="datetime-local" /><br>
    <input type="email" value="输入邮箱地址"/><br>
    <input type="month" /><br>
    <input type="number"  /><br>
    <input type="range" /><br>
    <input type="search" /><br>
    <input type="tel" /><br>
    <input type="url" /><br>
    <input type="button" value="按钮"><br>
    <input type="reset" value="重置"><br>
    <input type="submit" value="提交">
</form>

CSS

概念：Cascading Style Sheets 层叠样式表，用于控制网页表现

层叠：多个样式可以作用在同一个html的元素上，同时生效

好处：功能强大，将内容展示和样式控制分离，解耦，让分工写作更容易，提高开发效率

一、CSS导入方式

CSS和HTML，三种结合方式

1.内联：在标签内部使用style属性，属性值是css属性键值对

<div style="color: red;">hello css</div>

2.内部：定义<style>标签，在标签内部定义css样式

<style>
    span{
        color: blue;
    }
</style>

3.外部：定义link标签，引入外部的css文件

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

二、选择器

筛选具有相似特征的元素

1.基本选择器

id选择器，优先级高
- #id名称{}
元素选择器
- 标签名称{}
类选择器
- .class{}优先级高于元素选择器

2.扩展选择器

选择所有元素
- *{}
并集选择器
- 选择器1，选择器2{}
属性选择器：选择元素名称，属性名=属性值的元素
- 语法：元素名称[属性名=“属性值”]{}
伪类选择器：选择一些元素具有的状态
- 元素:状态{}
- 如：<a>标签， a:active{}

三、css属性

字体文本

font-size：字体大小
color：文本颜色
text-algin：规定文本的水平对齐方式。
line-height：设置行高。

border 边框：border：1px solid red
尺寸：height：设置元素的高度。width：设置元素的宽度。
背景：background：所有 background-* 属性的简写属性。
盒子模型：控制布局

margin：外边距
padding：内边距
- 默认情况下内边距会影响盒子的大小
box-sizing：boder-box；让width和height是盒子最终大小
float：浮动
- 例：float:left; 左浮动

JavaScript

一门跨平台，面向对象的客户端脚本语言：运行在客户端浏览器中的。每个浏览器都有JavaScript的解析引擎，控制网页行为，使网页可交互。

脚本语言：不需要编译，直接就可以被浏览器解析执行。

功能：可以来增强用户和html页面的交互过程，可以来控制html元素，实现让页面有动态效果，增强用户体验。

JavaScript发展史：

1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单校验，命名为c–，后来更名为：ScriptEase
1995年，Netscape（网景）公司，开发了一门客户端脚本语言：LiveScript。后来，请来sun公司专家，修改LiveScript，命名：JavaScript
1996年，微软参照JavaScript开发出JScript语言
1997年，ECMA（欧洲计算机制造商协会），ECMAScript，就是所有客户端脚本语言的标准。
JavaScript = ECMAScript + JavaScript自己特有的东西（BOM+DOM）

一、ECMAScript

客户端脚本语言的标准：任何自定义参数，名称，啥的都不要起关键字！！！

基本语法

1.与html结合方式，内部JS：

定义<script></script>，标签体内容就是js代码
<script>可以定义在html的任何位置，但是会影响执行顺序。可以定义多个。

  <script>   // 严格区分大小写！
      alert("Hello World");
  </script>

2.外部JS：定义<script>，通过src属性引入外部的js文件，外部脚本不能包含<script>，<script>标签不能自闭合

  <script src="../js/a.js"></script>

1.注释

（1）单行注释：// 注释内容

（2）多行注释： /**/

<script>
    window.alert("Hello World");     //弹出警告框
    document.write("Hello World");   //写入HTML
    console.log("Hello World");      /*写入控制台*/
</script>

2.数据类型

（1）原始数据类型（基本数据类型）：

number：数字。整数/小数/NAN（not a number 一个不是数字的数字类型）
string：字符串。字符/字符串 “abc” “a” ‘abc’
boolean：true和false
null：一个对象为空的占位符
undefined：未定义，如果一个变量没有给初始化值，则会被默认赋值为undefined

（2）使用typeof运算符可以获取变量的数据类型

alert(typeof age);

3.变量

（1）规则：

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

（2）一小块存储数据的内存空间

（3）Java语言是强类型语言，而JavaScript是弱类型语言。

强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。

（4）语法：

var 变量名=变量值。
let 变量名=变量值。let定义的变量是局部变量只在当前代码块内有效，且不允许重复声名。
const 变量名=变量值。声明只读常量，一旦声明，值不能改变。

4.运算符

（1）一元运算符：只有一个运算数的运算符：++（自增），–（自减），+（正号）

（2）算术运算符：+，-，*，/，%

（3）逻辑运算符：&&，||，！

&&：与（短路）
||：或（短路）
！：非

（4）赋值运算符：=，+=，-=。。。。

（5）比较运算符：>， <， >=， <=，

类型相同：直接比较
- 字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。
类型不同：先进行类型转换，再比较
其他类型转boolean：
- 1.number：0或NAN为假，非0为真
- 2.string：除了空字符串，其他都是true
- 3.null&undefined： false
- 4.对象：所有对象都是true
其他类型转为number：
- 1.string：按照字符串的字面值，转为数字。如果字面值不是数字，转为NAN，一般使用parseInt()
- 2.boolean：0是false，1是true
注意：===（全等于）在比较之前，先判断类型，如果类型不一样，则直接返回false，否则再去比较值。

（6）三元运算符，？：

表达式？值1：值2
判断表达式的值，如果是true则取值1，如果是false则取值2

5.流程控制语句

（1）if。。。else

（2）switch：

在Java中，switch语句可以接收的数据类型：byte，int，short，char，枚举（1.5），String（1.7）
- switch（变量）：
  - case：
在js中，什么类型都可以接收。

（3）while

（4）do。。。while

（5）for

基本对象

1.Function函数对象

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

（1）创建方式：JavaScript函数通过function关键词进行定义：

function 方法名称（形式参数列表）{

方法体。

}

var 方法名=function(){

方法体

}

（2）特点：

1.方法定义时，形参的类型不用写。直接定义形参名称。因为JavaScript是弱类型语言
2.方法是一个对象，如果定义名称相同的方法，会覆盖
3.在js中，方法的调用只与方法的名称有关，和参数列表无关,即可传递任意多个参数
4.在方法声明中有一个隐藏的内置对象（数组），arguments，封装所有的实际参数

5.返回值也不需要定义类型，可以在函数内部直接使用return返回即可。

function add(a,b){

return a+b;

}

（3）调用：方法名称（实际参数列表）

2.Array数组对象

1.创建：

1.var arr = new Array(元素列表)

2.var arr = new Array(默认长度)

3.var arr = [元素列表]

2.方法

join()方法：将数组作为字符串返回。元素将由指定的分隔符分隔。默认分隔符是逗号 (,)。

push()方法：向数组末尾添加新项目，并返回新长度。

splice()方法：删除元素

提示：新的项目将被添加到数组的末尾。

注释：push() 方法会改变数组的长度。

提示：如需在数组的开头添加项目，请使用 unshift() 方法。

var arr=[1,2,3,4,5,6,7,8,9,10];
var str = arr.join();
// alert(str);
var length = arr.push(11);
// alert(arr);
alert(length);
arr.splice(1, 2); // 从索引1开始删，删2个

3.属性

length：数组长度

4.特点

1.js中，数组元素的类型是可变的。

2.js中，数组元素的长度是可变的

3.Boolean布尔对象

Boolean()函数可用于查找表达式是否为真

4.Date对象

创建：var date =new Date();
方法：
- toLocaleString(),返回当前date对象对应的时间本地字符串格式
- getTime()：获取毫秒值，返回当前日期对象描述的时间到1970年1月1日的毫秒值差。

5.Math对象

不用创建，直接使用Math.方法名();

（1）方法：

random()，0.0~1.0，含0不含1
ceil()：向上取整
floor()：向下取整
round()：四舍五入

（2）属性：PI

6.Number对象

7.String对象

定义
- var 变量名 = new String(s);
- var 变量名 = s;
属性：length，字符串长度
方法：
- charAt()：返回指定位置的字符。
- indexOf() ：检索字符串。
- trim()：去除字符串前后两端的空白字符

8.RegExp正则表达式对象

正则表达式：定义字符串的组成规则。
- 单个字符：[]
  - 如：[a],[ab],[a-zA-Z0-9]
- 特殊符号代表特殊含义的单个字符：
  - \d：单个数字字符[0-9]
  - \w：单个字符[a-zA-Z0-9]
- 量词符号：
  - ?：表示出现0次或1次
  - *：表示出现0次或多次
  - +：出现1次或多次
  - {m,n}：m <= 次数 <=n
    - m如果缺省：{,n}:最多n次
    - n如果缺省：{m,}:最少m次
- 开始结束符号：
  - ^：开始
  - &：结束
- 正则对象：
  - var reg=new RegExp(“正则表达式”)
  - var reg=/正则表达式/; 细节：双”\“转义。
- 方法：
  - test(参数)：验证指定的字符串是否符合正则表达式定义的规范
  - reg.test(参数)

9.Global全局对象

这个Global中封装的方法不需要对象就可以直接调用

方法：

decodeURL():urL解码
encode URL（）：uri编码
decodeURIComponent（）：uri组件解码
encodeURIComponent（）：uri组件编码
parseInt():将字符串转为数字
- 注意判断每一个字符是否是数字，直到不是数字位置，将前边数字部分转为number
isNaN():判断一个值是否是NaN
- NaN，参与的==比较全部都为false
eval()：函数计算或执行表示为字符串的JavaScript代码。

10.自定义对象

相当于Java中定义一个实体类，然后创建实体类的对象

格式：

var 对象名称={
	属性名称1：属性值1，
	属性名称2：属性值2，
	。。。
	函数名称：function（形参列表）{}
	。。。
};

示例：

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

二、BOM

概念：Browser Object Model 浏览器对象模型

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

1.Navigator浏览器对象，2.Window窗口对象，3.地址栏对象Location，4.历史记录对象History，5.显示器屏幕对象Screen，6.Document对象（DOM）

1.Window窗口对象

（1）创建：window，直接使用window，其中window.可以省略

（2）方法

与弹出框有关的方法：
- alert()：显示带有一段消息和一个确认按钮的警告框‘
- confirm()：显示带有一段消息以及确认按钮和取消按钮。确定返回true，取消返回false。
- prompt()：显示可提示用户输入的对话框
与打开关闭有关的方法：
- close()：关闭当前窗口，谁调用，关闭谁。
- open()：打开一个新的浏览器窗口，返回新窗口对象。
与定时器有关的方法：
- setTimeout()：在指定的时间（毫秒数）后调用函数或执行代码段，执行一次
  - 参数：
    - js代码或者function函数对象
    - 毫秒值
  - setTimeout(function(){alert(“hello”)},2000);
- clearTimeout()：清除使用setTimeout()设置的计时器
- setInterval()：以指定的时间间隔（以毫秒为单位）循环调用函数或执行代码段
  - 分析：
    
    1.在页面上使用img标签展示图片
    
    2.定义一个方法，修改图片对象的src属性
    
    3.定义一个定时器，每隔3秒调用一次方法。
- clearInterval()：清除使用setInterval()设置的计时器

（3）属性

获取其他BOM对象，history，location，navigator，screen
获取DOM对象，window.document 注意：是小写w

（4）特点

window对象不需要创建可以直接使用window调用方法。window.方法名();
window可以省略。直接就方法名（）

2.Location对象

（1）创建

window.location
location（省略window）

（2）方法

location.reload(); // 刷新

（3）属性

href：设置或返回完整的URL
location.href = “https://www.baidu.com”

3.History历史记录对象

（1）创建（获取）：

window.history
history（省略window）

（2）方法：

back() 转到会话历史记录中的上一页，与用户单击浏览器的“后退”按钮时的操作相同
forward() 转到会话历史记录的下一页，与用户单击浏览器的“前进”按钮时的操作相同
go() 从会话历史记录中加载页面，该页面由其相对于当前页面的相对位置来标识，例如上一页为-1或下一页为1

（3）属性：

length：记录历史记录的数量

三、DOM

Document Object Model 文档对象模型：将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD操作。DOM是W3C（万维网联盟）的标准，DOM定义了访问HTML和XML文档的标准。

（1）W3C DOM 标准被分为 3 个不同的部分：

核心DOM - 所有文档类型的标准模型
- Document：文档对象
- Element：元素对象
- Attribute：属性对象
- Text：文本对象
- Comment：注释对象
- Node：节点对象（其他5个的父对象）
XML DOM ：针对 XML 文档的标准模型
HTML DOM ：针对 HTML 文档的标准模型
- Image：<img>
- Button：<intput type=“button”>

（2）功能：控制HTML文档的内容。

改变HTML元素的内容
改变HTML元素的样式（CSS）
对HTML DOM事件作出反应
添加和删除HTML元素

1.事件

https://www.runoob.com/tags/ref-eventattributes.html

功能：某些组件被执行了某些操作后，去触发某些代码的执行。

绑定事件

HTML事件绑定：onclick(“方法名()”) ------单击事件
通过js获取元素对象，指定事件属性，设置一个函数。

事件操作，如：单机，双击，键盘按下了，鼠标移动了，

事件源：如：按钮，文本输入框。。。

监听器：将事件，事件源，监听器结合在一起。当事件源上发生了某个事件，则触发执行某个监听器代码。

常见事件：

点击事件：
- onclick：单击事件
- ondblclick：双击事件
焦点事件：
- onblur：失去焦点，（多用于校验用户名）
- onfocus：获得焦点
加载事件：
- onload 某个页面或图像被完成加载
鼠标事件：
- onmouseover：鼠标被移到某元素之上
- onmouseout：鼠标从某元素移开
键盘事件：
- onkeydown：某个键盘的键被按下
表单事件：
- onsubmit：当表单提交时触发该事件
选择和改变事件：

2.核心DOM模型

（1）Document：文档对象

1.创建（获取）：在HTML DOM模型中可以使用window对象获取
- window.document
- document（省略window）
2.方法：
- 获取Element对象：
  - getElementById()：根据id属性值获取元素对象。id属性值一般唯一
  - getElementsByTagName()：根据元素名称获取元素对象们，返回值是一个数组
  - getElementsByClassName（）：根据class属性值获取元素对象们，返回值是一个数组
  - getElementsByName（）：根据name属性值获取，返回Element对象数组
- 创建其他DOM对象：
  - createAttribute(）：
  - createComment(）
  - createElement(）
  - createTextNode(）

（2）Element：元素对象

获取（创建）：通过docuemnt来创建
方法：
- removeAttribute(）：删除属性
- setAttribute(）：设置属性

（3）Node：节点对象，其他5个的父对象

特点：所有DOM对象都可以被认为是一个节点
方法：
- CRUD DOM树：
  - appendChild(）：向节点的子节点列表的结尾添加新的子节点。
  - removeChild(参数) 删除（并返回）当前节点的指定子节点。
  - replaceChild(参数1，参数2) 用新节点替换一个子节点。
属性：
- parentNode 返回节点的父节点。

3.HTML DOM

https://www.w3school.com.cn/jsref/dom_obj_event.asp

标签体的获取： var div1 = document.getElementById(“demo”);
控制样式
- 使用元素的style属性来设置
- 修改样式
  
  div1.style.backgroundColor=‘red’;
  
  div1.style.width=‘200px’;
  
  div1.style.height=‘200px’;
  
  div1.style.border=‘1px solid black’;
  
  div1.style.margin=‘10px’;
  
  // font-size --> fontSize
  
  div1.style.fontSize=‘30px’;
  
  div1.style.color=‘white’;
- 提前定义好类选择器的样式，通过元素的className属性来设置class属性值。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .demoClass {
            color: blue;
        }
    </style>
</head>
<body>
    <div id="demo">Hello World</div>
</body>
<script>
    var div1 = document.getElementById("demo");
    div1.innerHTML = "Hello JavaScript";

    // div1.style.color = "red";
    // div1.style.fontSize = "20px";

    div1.className = "demoClass";
</script>