HTML5+CSS3+JavaScript

Made by Ziyang CHEN, Rocky, 陈子阳

网页最主要由3部分组成：结构写到 HTML 文件中，表现写到 CSS 文件中，行为写到 JavaScript 文件中。

HTML (HyperText Markup Language): 构建网页的基础，它通过标签来定义网页的内容和结构。HTML 用来规定网页中的 **文本、图片、视频等 **内容，以及它们的 **语义和结构 (Structure)**。
CSS (Cascading Style Sheets): 控制网页样式和布局的语言。CSS 用于设置网页的 **外观样式/表现 (Presentation)**，如 文字颜色、大小、边距、背景等。CSS 可以将样式信息与网页内容分离,使得同一份内容可以使用不同的样式显示。
JavaScript: 一种脚本语言，是我们前端的核心，主要用于实现 网页的各种交互和动态效果，即 **行为 (Behavior)**。JavaScript 可以响应用户的交互,控制网页内容,使网页有丰富的动态功能。比如实现网页验证、轮播图、下拉菜单等等。

	VSCode常用的快捷键
快速复制一行	Shift + option + ⬆️/⬇️
添加多个光标	Command + option + ⬆️/⬇️

个人笔记，仅供参考 (FOR REFERENCE ONLY)

01. HTML (Hyper Text Markup Language)

<!DOCTYPE html>											<!-- 不是一个 HTML 标签, 只是文档类型声明标签 --> 
<html lang="en">										<!-- 开始标签, lang="en" 声明语言 --> 
<head>															<!-- 网页头部,用来存放给浏览器看的信息 (eg. CSS), 在浏览器不可见 --> 
    <meta charset="UTF-8">					<!-- meta: 定义网页的基本信息, UTF-8 (字符编码方式) -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
  	<!-- 视口元素, 确保页面以视口宽度进行渲染, 避免移动端浏览器上因页面过宽导致缩放 -->
    <title>Document</title>					<!-- 网页标题 --> 
</head>
  
<body>															<!-- 网页主体，用来存放给用户看的信息（如文本、图像、视频、游戏、可播放的音轨） --> 
  
</body>
</html>															<!-- 结束标签 -->

其他 <head> 内部标签	Description
<style>	定义CSS样式
<link>	链接外部CSS文件或脚本文件
<script>	定义脚本语言
<base>	定义页面所有链接的基础定位（用得很少）

1.1 段落与文字标签

标签	语义	说明
<h1>~<h6>	header	标题，一个标题独占一行。
<p>	paragraph	段落，段落和段落之间保有空隙。
<br />	break	换行，是个单标签，简单地开始新的一行
<hr>	horizontal rule	水平线
<div>	division 分割/一行一个	块元素，用来布局，<div> 一行一个的单行大标签 (大盒子)
<span>	span 跨行/一行多个	行内元素，用来布局，一行上可以放多个 <span> (小盒子)

1.2 文本格式化标签

<strong> 加粗 </strong>
<em> 倾斜 </em>						<!-- emphasized -->
<del> 删除线 </del>
<ins> 下划线 </ins>

1	`<p>My cat is <strong>very</strong> grumpy.</p> <!-- example of strong -->`

1.3 图像标签和路径

1
2
3

<img src="images/firefox-icon.png" alt="My test image" />
<!-- src 是<img>标签的必须属性，用于指定图像文件的路径和文件名 -->
<!-- 替换文字属性 alt，是图像的描述内容，用于当图像不能被用户看见时显示 -->

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本。图像不能显示时显示此文字
title	文本	提示文本。鼠标放在图像上，显示的文字
weight	像素	设置图像的宽度
height	像素	设置图像的高度
border	像素	设置图像的默认黑色的边框粗细，一般后面通过CSS指定

相对路径: 以引用文件所在位置为参考基础，而建立出的目录路径。这里简单来说，图片相对于 HTML 页面的位置

相对路径分类	符号	说明
同一级路径		图像文件位于HTML文件同一级如: <img src=”baidu.gif” />
下一级路径	/	图像文件位于HTML文件下一级如: <img src=”images/baidu.gif” />
上一级路径	../	图像文件位于HTML文件上一级如: <img src=”../baidu.gif”/>

绝对路径: 指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

1	`<img src="D:\web\img\logo.gif" /> 或完整网络地址 <img src="http://www.itcast.cn/images/logo.gif" />`

1.4 <a href=”#”>超链接标签</a>

<a> 标签用于定义超链接，作用是从一个页面到另一个页面。

<a href="目标url地址" target="目标窗口弹出方式, 默认是_self (当前窗口打开页面), _blank (新窗口打开链接)"> 文本或图像 </a>

<!-- 外部链接 -->
<a href="https://www.baidu.com/" target="_blank"> 百度</a>

<!-- 内部链接, 网站内部页面之间的相互连接 -->
<a href="index.html"> 首页</a>

<!-- 空链接, 看上去是一个链接但其实是空的, 可以没有确定链接目标时使用 -->
<a href="#"> 空链接 </a>

<!-- 下载链接, 如果 href 里面地址是一个文件或者压缩包zip, 会下载这个文件 -->
<a href="img.zip"> 下载文件 </a>

<!-- 网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接 -->
<a href="https://www.baidu.com/"> <img src="img.jpg"/> </a>

<!-- 锚点链接：点击链接，可以快速定位到页面中的某个部位，分为两步 -->
1. 在链接文本的 href 属性中，设置属性值为#名字的形式，如: <a href="#two">第二集</a>
2. 找到目标位置标签，里面添加一个id属性 = 刚才的名字，如: <h3 id ="two">第二季介绍</h3>

1.5 <table> 表格标签

表格主要用于 显示、展示数据，在表格中包含几组<tr></tr>就表示该表格为几行。

表格标题
[th] colspan, 跨列合并, 跨度列数 = 2		[th] 表头单元格	[th] 加超链接
[td] 标准单元格1	[td] 标准单元格2	[td] align="center" rowspan, 跨行合并, 跨度行数 = 2	[td] 第一个链接
[td] 标准单元格3	[td] 标准单元格4	[td] align="center" rowspan, 跨行合并, 跨度行数 = 2	[td] 第二个链接
[td] 标准单元格5	[td] 标准单元格6	[td] 标准单元格7	[td] 第三个链接

<table align="center" border="1" cellpadding="0" cellspacing="0" witdth="100" height="100">
<!-- 
<table>和</table>: 表格的开始和结束, 以下内容可以不写:
align: left(靠左), center(居中), right(靠右)
border: 边框大小 
cellpadding: 边框和数据之间空白 
cellspacing: 单元格之间空白
-->
    <caption>表格标题</caption>
  
    <!-- 表头(thead), 第一行; <tr>和</tr>: 行的开始和结束; <th>和</th>: 表头单元格标签(table head), 文字加粗居中显示 -->
    <thead>
        <tr>
            <th colspan="2">[th] colspan, 跨列合并, 跨度列数 = 2</th>		
          	<th>[th] 表头单元格</th>
          	<th>[th] 加超链接</th>
        </tr>
    </thead>
  
    <!-- 表身(tbody), 第二行和第三行; 在表格中包含几组<tr></tr>就表示该表格为几行; td>和</td>: 表格数据(table data) -->
    <tbody>
        <tr>
            <td>[td] 标准单元格1</td>
          	<td>[td] 标准单元格2</td>
            <td align="center" rowspan="2">[td] align="center" rowspan, 跨行合并, 跨度行数 = 2</td>
            <td>[td] <a href="#">第一个链接</a></td>
        </tr>
      
            <tr>
            <td>[td] 标准单元格3</td>
            <td>[td] 标准单元格4</td>
            <td>[td] <a href="#">第二个链接</a></td>
        </tr>
    </tbody>
  
    <!-- 表脚(tfoot), 最后一行 -->
    <tfoot>
        <tr>
            <td>[td] 标准单元格5</td>
            <td>[td] 标准单元格6</td>
            <td>[td] 标准单元格7</td>
            <td>[td] <a href="#">第三个链接</a></</td>
        </tr>
    </tfoot>
</table>

1.6 List label

标签名	定义	说明
<ol></ol>	有序标签	里面只能包含<li> 有顺序，<li> 里面可以包含任何标签
<ul></ul>	无序标签	里面只能包含<li> 没有顺序，<li> 里面可以包含任何标签
<dl></dl>	自定义列表	里面只能包含<dt>和<dd>。<dt>和<dd>里面可以放任何标签

<ol> 有序列表 (ordered list)

有序列表项
有序列表项
有序列表项

<ol type="填有序列表项的序号类型: 1(数字123…), a(小写英文字母abc…), A(大写英文字母ABC…), i(小写罗马数字), I; 默认是 1">
    <li>有序列表项</li>
    <li>有序列表项</li>
    <li>有序列表项</li>
</ol>

<ul> 无序列表 (unordered list)

无序列表项
无序列表项
无序列表项

<ul type="填有序列表项的序号类型: disc(实心圆"●"), circle(空心圆"○"), square(实心正方形"■"); 默认是 disc(实心圆"●")">
    <li>无序列表项</li>
    <li>无序列表项</li>
    <li>无序列表项</li>
</ul>

<dl> 定义列表 (definition list)

名词1: 添加该名词1的具体解释1; 添加该名词1的具体解释2
名词2: 添加该名词2的具体解释1; 添加该名词2的具体解释2

<dl>
    <dt>名词1</dt>
    <dd>添加该名词1的具体解释1</dd>
    <dd>添加该名词1的具体解释2</dd>
    <dt>名词2</dt>
    <dd>添加该名词2的具体解释1</dd>
    <dd>添加该名词2的具体解释2</dd>
</dl>

1.7 Four form labels

<input>标签

<input type="表单类型">

<input type=”表单类型”>	描述
button	定义可点击按钮 (多数情况下，用于通过 JavaScript 启动脚本)
checkbox	定义复选框
file	定义 “输入字段” 和 “浏览” 按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮
password	定义密码字段。该字段中的字符被掩码
radio	定义单选按钮
reset	定义重置按钮。重置按钮会清除表单中的所有数据，还原表单元素初始的默认状态
submit	定义提交按钮。提交按钮会把表单数据发送到服务器
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符

<input type="表单类型" name = "名称" value ="值" checked="checked" maxlength="20" >

其他属性	描述
name	定义 input 元素的名称，每个表单元素都有的属性值，区别不同的表单，主要给后台人员使用.
value	规定 input 元素的值，text 刚打开页面就默认显示value。其他 type 不显示，用户输入后，value会发送给后台人员.
checked	规定此 input 元素首次加载时默认就会被选中
maxlength	规定输入宇段中的字符的最大长度

name 表单元素的名字, 要求 单选按钮和复选框要有相同的name值.
checked 属性主要针对于 单选按钮和复选框，主要作用 一打开页面就要可以默认选中某个表单元素.

<form action="接收处理表单数据服务器程序的url地址" method="表单数提交方式, GET/POST" name="表单域名称"> 
		<!-- 各种表单元素控件: -->
  	Username: <input type="text" name="user" value="value=打开页面就默认显示">
		Password: <input type="password" name="password"><br>
  
<!-- 表单使用 fieldset, legend, 和 label 标签 -->
    <fieldset>
        <legend>Title</legend>
        <input type="radio" name="sex" value="male">男
        <input type="radio" name="sex" value="female">女
    
        <input type="checkbox" name="vehicle" value="Bike">我喜欢自行车
        <input type="checkbox" name="vehicle" value="Car">我喜欢小汽车
      
        <input type="reset" value="reset(重置按钮)">
  			<input type="button" value="一个按钮">
    </fieldset>
  
  	上传图片: <input type="file">
  	<input type="checkbox" name="contract" value="agree" checked="checked"> 我已同意 (checked: 主要针对于<strong>单选按钮和复选框</strong>, 默认已选中这个表单元素)
</form>

<input type="submit">

提交按钮：当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名。action 属性会对接收到的用户输入数据进行相关的处理:

假如在下面文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 html_form_action.php 文件，该页面将显示出输入的结果。实例中有一个 method 属性，它用于定义表单数据的提交方式，可以是以下值：

post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ? 作为分隔符，一般用于不敏感信息，如分页等。例如：https://www.runoob.com/?page=1，这里的 page=1 就是 get 方法提交的数据。

<form name="input" action="html_form_action.php" method="get">
  
    Username: <input type="text" name="user">
    <input type="submit" value="Submit">
  
</form>

<label></label> 标签

<label> 标签为 input 元素定义标注(标签)，用于绑定一个表单元素，当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.

<form>
    <label for="text">点击此处文字也可以输入用户名:</label>
    <input type="text" id="username">

    <input type="radio" name="sex" id="male" />
    <label for="male">男</label>

    <input type="radio" name="sex" id="female" />
    <label for="female">女</label>

</form>

<textarea> 标签 – 特大号文本框

当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 <textarea> 标签。在表单元素中，<textarea> 标签是用于定义多行文本输入的控件。使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。

<form>
    评价:
    <textarea rows="显示的行数" cols="每行中的字符数"></textarea>
</form>

<select> 和 <option> 下拉列表

有多个选项让用户选择，可以使用 <select> 标签控件定义下拉列表

<select> 中至少包含一对 <option>
在 <option> 中定义 selected ="selected" 时，当前项即为默认选中项

<form>
    <select>
        <option value="选项值" selected="selected">选择你的国家/地区</option>
        <option value="china">中国🇨🇳</option>
        <option value="japan">日本🇯🇵</option>
        <option value="hk">香港🇭🇰</option>
        <option value="us">美国🇺🇸</option>
    </select>
</form>

02. CSS (Cascading Style Sheets)

CSS 是也是一种标记语言，主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局和外观显示样式。

所有的样式，都包含在 <style> 标签内，表示是样式表。<style> 一般写到 </head> 上方。

2.1 基础选择器 (selector)

四种选择器：标签选择器、class、id 选择器和通配符选择器，以下 S 为选择器名：

元素/标签选择器 (element selector, ES)：S{...}，把某一类标签全部选择出来匹配成相应样式
类选择器(class)：.S{...}，就像衣服，一个人可以有多个衣服，同时一个衣服也可以被多个人使用。
id 选择器：#S{...}，好比人的身份证号码，是唯一的，不得重复。id 选择器一般用于页面唯一性的元素上。

Element selector [全部标签选出来]

作用：标签选择器可以把 某一类标签全部选择出来，比如所有的 <div> 标签和所有的 <span> 标签。
优点： 能快速为页面中同类型的标签统一设置样式。
缺点： 不能设计差异化样式，只能选择全部的当前标签。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Element selector</title>
  
    <style>
        p { /* selector 用于指定 CSS 样式的 HTML 标签全部选择出来进行统一设置, 不能差异化设置 */
            color: red; /* 对该对象设置的具体样式, 以 ";" 结尾 */
            background: #cccccc;
        }

        h2 {
            color: blue;
        }
    </style>
  
</head>

<body>
    <p>02. CSS 层叠样式表 (Cascading Style Sheets)</p>
    <h2>CSS 让我们的网页更加丰富多彩</h2>
</body>

</html>

.class 选择器 [公共样式放里边]

如果想要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。

类选择器口诀：样式 . 定义结构 类(class) 调用。自定义的名称，以 . 号作为前缀，然后再通过HTML标签的class属性调用类选择器。以标签的class属性作为样式应用的依据。注意事项：

HTML 调用 类选择器 时不能添加 . 号
HTML 同时调用多个类选择器时，以 空格 分隔
类选择器名称不能以 数字 开头

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>.class 选择器</title>
    <style>
        .box { /* 可以把一些标签元素相同的样式(共同的部分)放到一个类里面. */
            width: 150px;
            height: 100px;
            font-size: 30px;
        }

        .red {
            background-color: red; /* 背景颜色 */
        }

        .green {
            background-color: green;
        }
    </style>
</head>

<body>
    <ul>
        <li class="red">冰雨</li> <!-- 结构需要用 class属性 来调用 class 类的意思 -->
        <li>李香兰</li>
    </ul>
    <div class="box red">红色</div> <!-- 在标签class属性中写多个类名; 多个类名中间必须用空格分开 -->
    <div class="box green">绿色</div>
</body>

</html>

#id 选择器 [一次性调用]

HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以 # 来定义。

注意：id 属性只能在每个 HTML 文档中出现一次。
口诀：样式 # 定义，结构 id 调用，只能调用一次，别人切勿使用.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础选择器之id选择器</title>
    <style>
      #pink { /* 样式 "#" 定义 */
          color: pink;
      }
    
    </style>
</head>
<body>
    <div id="pink">迈克尔·杰克逊</div> <!-- 结构 "id" 调用，一次性的 -->
    <div>pink老师</div> <!-- 不能再使用: id="pink" -->
</body>
</html>

通配符选择器 [选择所有标签]

通配符选择器使用 * 定义，它表示选取页面中所有元素(标签)。通配符选择器不需要调用，自动就给所有的元素使用样式，特殊情况才使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>基础选择器之通配符选择器</title>
    <style>
        * {
            color: red;
        }

        /* 这里把 html  body  div  span  li 等等的标签都改为了红色 */
    </style>
</head>

<body>
    <div>我的</div>
    <span>我的</span>
    <ul>
        <li>还是我的</li>
        <h3 style="color:blue;">菜鸟教程</h3>
    </ul>
</body>

</html>

2.2 CSS 字体属性

CSS Fonts (字体) 属性用于定义 字体系列、大小、粗细、和文字样式(如斜体)

serif和sans-serif字体之间的区别, sans-serif字体被认为是比serif字体容易阅读

属性	含义
font-size	大小、尺寸（可以使用多种单位）
font-weight	粗细
font-family	字体
font-style	样式
font	简写

font-size [字体大小]

谷歌浏览器默认的文字大小为16px，不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
- inherited继承，默认从父标签继承字体大小（默认值），所有CSS属性的默认值都是inherited
- px（pixel /ˈpɪksl/ ，像素）大小是我们网页的最常用的单位
- % 百分比，相对父标签字体大小的百分比
- em 倍数，相对于父标签字体大小的倍数

<style>
    body { /* 可以给 body 指定整个页面文字的大小 */
        font-size: 16px;
    }
    h2 { /* 标题标签比较特殊,需要单独指定文字大小 */
        font-size: 16px;
    }
</style>

font-weight [字体粗细]

学会让加粗标签(比如 h 和 strong 等) 不加粗，或者其他标签加粗
实际开发时，我们更喜欢用 数字(100 - 900) 表示粗细，后面不要跟单位，**400 等同于 “normal”，而700等同于 “bold”**。
- normal 普通（默认）
- bold 粗体
- 自定义：400 = normal，700 = bold

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS字体属性之字体大小</title>
    <style>
        .bold {
            font-weight: 700; /* 等价于 bold 都是加粗的效果, font-weight: bold; */
        }

        h2 {
            font-weight: 400; /* font-weight: normal; */
        }

    </style>
</head>

<body>
    <h2>normal等价于font-weight: 400;</h2>
    <p class="bold">bold等价于font-weight: 700;</p>
</body>

</html>

font-family [文本字体系列]

各种字体之间必须使用英文状态下的逗号隔开；一般情况下，如果有空格隔开的多个单词组成的字体，加引号。
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
最常见的几个字体:body {font-family: ‘Microsoft YaHei’,tahoma,arial,’Hiragino Sans GB’; }

<style>
 h2 {
     font-family: '微软雅黑';
 }
 p {
    /* font-family: 'Microsoft YaHei', Arial, Helvetica, sans-serif; */
    font-family: 'Times New Roman', Times, serif;
 }
</style>

font-style [文本风格]

属性值/取值	作用
`font-style: normal;`	默认值，浏览器会显示标准的字体样式。
`font-style: italic;`	浏览器会显示斜体的字体样式。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS字体属性之文字样式(风格)</title>
    <style>
        p {
            font-style: italic;
        }

        em {
            /* 让倾斜的字体不倾斜   就是赶紧脉动回来 */
            font-style: normal;
        }
    </style>
</head>

<body>
    <p>变为斜体</p>
    <em>em本来应该是斜体的但因为 font-style: normal; 变为正了</em>
</body>

</html>

font: font-size font-family;

使用 font属性 时，可以把字体样式综合来写，更节约代码，但必须按下面语法格式中的顺序书写，并且各个属性间以空格隔开
不需要设置的属性可以省略(取默认值)，但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

1	`font: font-style font-weight font-size/line-height font-family; // 顺序不能改变！！`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS字体属性之复合属性</title>
    <style>
       /* 想要div文字变倾斜 加粗 字号设置为16像素 并且 是微软雅黑 */
       div {
           /* 复合属性: 简写的方式  节约代码 */
           /* font: font-style  font-weight  font-size/line-height  font-family; */
           /* font: italic 700 16px 'Microsoft yahei'; */
           font: 20px '黑体';
       }
    </style>
</head>
<body>
   <div>三生三世十里桃花,一心一意百行代码</div>
</body>
</html>

2.3 CSS 文本属性

CSS Text(文本)属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

属性	含义	说明
color	颜色	我们通常用十六进制，而且是简写形式 #fff
line-height	行高	行之间的高度，控制行与行之间的距离
text-align	水平对齐方式	取值：left、center、right
vertical-align	垂直对齐方式	取值：top、middle、bottom可以用于图片和文字的对齐方式
text-indent	首行缩进	通常我们用于段落首行缩进2个字的距离 `text-indent: 2em;`
text-decoration	文本修饰	取值：underline, overline, line-through；添加下划线 underline 取消下划线 none
text-transform	字母大小写转换	取值：lowercase、uppercase、capitalize首字母大写
letter-spacing	字符间距
word-spacing	单词间距	只对英文有效
white-space	空白的处理方式	文本超出后是否换行，取值：nowrap

color: 文本颜色

取值写法	属性值	备注
预定义的颜色值	`color: red`	颜色名称直接使用英文单词
十六进制 (开发中最常用)	`color: #cc00ff;`	特定情况下可以缩写： #FFFFFF—>#FFF 白色 #000000—>#000 黑色 #FF0000—>#F00 红色 #00FF00—>#0F0 绿色 #0000FF—>#00F 蓝色 #CCCCCC—>#CCC 灰色 #FF7300—>无法简写
RGB代码	rgb函数：rgb(red,green,blue) `color: rgb(255, 0, 255);` or `rgb(100%,0%,100%)`	rgba函数：rbga(red,green,blue,alpha), alpha设置透明度 [0,1]: [完全透明, 完全不透明] `rgba(255,0,0,1)----->纯红` `rgba(255,0,0,0.5)---->红色半透明`

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS文本外观属性之颜色</title>
    <style>
        div {
            /* color: deeppink; */
            /* color: #cc00ff; */
            color: rgb(255, 0, 255);
        }
    </style>
</head>

<body>
    <div>color有四种写法</div>
</body>

</html>

text-align: 对齐文本

属性值	解释
left	左对齐（默认值）
right	右对齐
center	居中对齐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS文本外观之文字对齐</title>
    <style>
        h1 {
            /* 本质是让h1盒子里面的文字水平居中对齐 */
            /* text-align: right; */
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>居中对齐的标题</h1>
</body>
</html>

text-decoration: 装饰文本

text-decoration 属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上划线等。

重点记住如何添加下划线 ? 如何删除下划线 ? 其余了解即可

属性值	描述
none	默认。没有装饰线（最常用）
underline	下划线。链接a 自带下划线（常用）
overline	上划线（几乎不用）
line-through	删除线（不常用）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS文本外观之装饰文本</title>
    <style>
        div {
            /* 下划线 */
            /* text-decoration: underline;   */
            /* 删除线 */
            text-decoration: line-through;
            /* 上划线 */
            text-decoration: overline;
        }

        a {
            /* 取消a默认的下划线 */
            text-decoration: none;
            color: #333;
        }
    </style>
</head>

<body>
    <div>粉红色的回忆</div>
    <a href="#">粉红色的回忆</a>
</body>

</html>

text-indent: 文本缩进

text-indent 属性用来指定文本的第一行的缩进，通常是将 段落的首行缩进。

取值可以是 px or em, 20px = 2em, em 是一个相对单位，就是当前元素(font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS文本外观之文本缩进</title>
    <style>
        p {
            font-size: 24px;
            /* text-indent: 20px; */
            /* 如果此时写了2em 则是缩进当前元素 2个文字大小的距离  */
            text-indent: 2em;
        }
    </style>
</head>

<body>
    <p>文本的第一行首行缩进 多少距离，通过设置该属性，所有元素的第一行都可以缩进一个给定的长度，甚至该长度可以是负值。</p>
</body>

</html>

line-height: 行间距

line-height 属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS文本外观之行间距</title>
    <style>
        div {
            line-height: 26px;
        }

        p {
            line-height: 25px;
        }
    </style>
</head>

<body>
    <div>中国人</div>
    <p>CSS Text(文本)属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。</p>
    <p>line-height 属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离。</p>
</body>

</html>

2.4 背景属性

属性	含义	备注
background-color	背景颜色	取值：transparent 透明
background-image	背景图片	必须使用url()方式指定图片的路径如果在css样式文件中使用相对路径，此时是相对于css文件，不是相对html文件
background-repeat	背景图片的重复方式	取值：repeat(默认)，repeat-x，repeat-y,no-repeat
background-position	背景图片的显示位置	默认背景图显示在左上角，取值：关键字：top、bottom、left、right、center 坐标：左上角为(0,0)坐标，向右为x正方向,向下为y正方向
background-attachment	背景图片是否跟随滚动	取值：scroll(默认)、fixed固定不动
background	简写	简写属性：background:background-color\|background-image\|background-repeat\|background-position 以空格隔开，书写顺序没有要求

2.5 列表属性

属性	含义	说明
list-style-type	设置列表前的标记	取值：none、disc、circle、square、decimal 此时不再区分有序列表还是无序列表，只要设置列表前的标记就可以了
list-style-image	将图像作为列表前的标记
list-style-position	设置标记的位置	取值：outside(默认)、inside
list-style	简写	简写属性：list-style: list-style-type list-style-image list-style-position 书写顺序没有要求

2.6 表格属性

border-collapse:表格中相邻的边框是否合并（折叠）为单一边框

取值：separated（默认） collapse

2.7 CSS 引入方式

按照 CSS 样式书写的位置(或者引入的方式)，CSS 样式表可以分为三大类：

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	结构样式混写	较少	控制一𠆤标签
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面
外部样式表	完全实现结构和样式相分离	需要弘入	最多，吐血推荐	控制多个页面

行内样式表 (直接写在HTML里)

1
2
3

<body>
        <p style="color: pink; font-size: 20px;">给我一个粉红的回忆</p>
</body>

内部样式表

<head>
    <style>
        div {color: pink;}
    </style>
</head>
<body>
    <div>所谓内部样式表,就是在html页面内部写样式,但是是单独写到style标签内部.</div>
</body>

外部样式表 (需另外创建一个css文件)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部样式表</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>来呀~快活呀,反正有大把时间...</div>
</body>
</html>

/* style.css, 这css文件里面只有样式没有标签 */
div {
    color:  pink;
}

2.8 Chrome 调试工具

打开 Chrome 浏览器，按下 F12 键或者右击页面空白处 -> 检查。

Ctrl+滚轮可以放大开发者工具代码大小。
左边是 HTML 元素结构，右边是 CSS 样式。
右边 CSS 样式可以改动数值(左右箭头或者直接输入)和查看颜色。
Ctrl + 0 复原浏览器大小。
如果点击元素，发现右侧没有样式引入，极有可能是类名或者样式引入错误。 6 如果有样式，但是样式前面有黄色叹号提示，则是样式属性书写错误。

03. JavaScript

JavaScript（缩写：JS）是一门完备的动态编程语言。当应用于 HTML 文档时，可为网站提供动态交互特性。由布兰登·艾克（Brendan Eich，Mozilla 项目、Mozilla 基金会和 Mozilla 公司的联合创始人）发明。JavaScript 是一种运行在客户端(浏览器)的编程语言；JavaScript 由两部分组成：

ECMAScript：规定了js基础语法核心知识 (变量、分支语句、循环语句、对象等等)。
web APIs (DOM、BOM)
- DOM：操作文档，比如对页面元素进行移动、大小、添加删除等操作
- BOM：操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

JavaScript 的应用场合极其广泛，简单到幻灯片、照片库、浮动布局和响应按钮点击，复杂到游戏、2D/3D 动画、大型数据库驱动程序等等。JavaScript 相当简洁，却非常灵活。开发者们基于 JavaScript 核心编写了大量实用工具，可以使开发工作事半功倍。其中包括：

浏览器应用程序接口（API）—— 浏览器内置的 API 提供了丰富的功能，比如：动态创建 HTML 和设置 CSS 样式、从用户的摄像头采集处理视频流、生成 3D 图像与音频样本等等。
第三方 API —— 让开发者可以在自己的站点中整合其他内容提供者（Twitter、Facebook 等）提供的功能。
第三方框架和库 —— 用来快速构建网站和应用。

以下是 HTML+CSS+JavaScript 的实例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .pink {
      background-color: pink; /* CSS */
    }
  </style>
</head>

<body>
  <button class="pink">按钮1</button> <!-- HTML -->
  <button>按钮2</button>
  <button>按钮3</button>
  <button>按钮4</button>
  <script>
    let bts = document.querySelectorAll('button') // ";" 代表一段代码的结束，一般可以省略，用 回车(enter) 替代
    for (let i = 0; i < bts.length; i++) {
      bts[i].addEventListener('click', function () {
        document.querySelector('.pink').className = ''
        this.className = 'pink'
      })
    }
  </script>
</body>

</html>

3.1 引入方式

JavaScript 程序不能独立运行，它需要被嵌入 HTML 中，然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中，有两种方式：

内部方式 - 标签引用：通过 script 标签包裹 JavaScript 代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 内联形式：通过 script 标签包裹 JavaScript 代码 -->
  <script>
    alert('嗨，欢迎来传智播学习前端技术！')
  </script>
</body>
</html>

外部形式 - 文件引用：一般将 JavaScript 代码写在独立的以 .js 结尾的文件中，然后通过 script 标签的 src 属性引入。外部 js 标签中间不要写代码，否则会被忽略：

1 2	`// demo.js document.write('嗨，欢迎来传智播学习前端技术！')`

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js">
    // 如果 script 标签使用 src 属性引入了某 .js 文件, 那么script标签中间无需写代码, 标签的代码(此处的代码)会被忽略!!!
  	alert(666);  
  </script>
</body>
</html>

3.2 Input and Output

输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用户，这便是一次输入和输出的过程。

举例说明：如按键盘上的方向键，向上/下键可以滚动页面，按向上/下键这个动作叫作输入，页面发生了滚动了这便叫输出。

Output: JavaScript 可以接收用户的输入，然后再将输入的结果输出：

document.wirte()：向页面输出一句话
alert()：向弹出窗口输出一句话，以弹窗形式展示（输出）给用户。
console.log()：向控制台输出一句话，给程序员调试使用，用户页面看不到

Input: 向 prompt() 输入任意内容会以弹窗形式出现在浏览器中，一般提示用户输入一些内容。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>我是 tab name</title>
</head>

<body>
	<h1>个人信息</h1>
  <script>
    // 1. 弹出窗口输出内容
    alert('alert(弹出窗口)');
    // 2. 输入语句
    let name = prompt('以弹窗形式出现，请输入您的名字：')
    // 3. 文档输出内容
    document.write('你的名字是: ' + name)
    // 4. 控制台打印输出 给 程序员
    console.log('在F12里显示的日志, 给程序员调试用的')
  </script>
</body>

</html>

3.3 Constant & Variable

Constant: 使用 const 声明的变量, 当某个变量永远不会改变的时候, 就可以使用 const 来声明，而不是let

Variable: 计算机存储数据的 “容器”，要声明一个变量，先输入关键字 let 或 var，然后输入合适的名称.

Constant 不允许重新赋值, 声明的时候必须赋值 (初始化)

1	`const PI = 3.14`

Variable 命名规则与规范：

不能用关键字（有特殊含义的字符，JavaScript 内置的一些英语词汇。例如:let、var、if、for等）
只能用 下划线、字母、数字、$组成，且 数字不能开头，字母严格区分大小写，如 Age 和 age 是不同的变量
遵守小驼峰命名法，第一个单词首字母小写，后面每个单词首字母大写。例: userName

<body>
  <script>
    let age = 18 // 正确
    let age1 = 18 // 正确
    let _age = 18 // 正确

    let 1age = 18; // 错误，不可以数字开头
    let $age = 18 // 正确
    let Age = 24 // 正确，它与小写的 age 是不同的变量
    let let = 18; // 错误，let 是关键字
    let int = 123 // 不推荐，int 是保留字
    
    // Declare an age variable, age = variable, 18 = number literal
    let age = 18, name = 'Rocky', isCool = true
    age = 19
    console.log(age, name)
    document.write(typeof age) // 通过 typeof 关键字检测数据类型, 结果为 number, 可以是整数、小数、正数、负数
    document.write(typeof name) // 结果为 string, 单引号(''), 双引号("")或反引号包裹的数据都叫字符串
    document.write(typeof isCool) // 结果为 boolean
    // 只声明了变量，并末赋值
    let tmp;
    document.write(typeof tmp) // 结果为 undefined, 不赋值的情况下，变量的默认值为 undefined
    
		// 在较旧的JavaScript，使用关键字 var 来声明变量，var 就是个bug，别迷恋它了，以后声明变量我们统一使用 let
    var lastname="Doe", age=30, job="carpenter" 
  </script>
</body>

变量	解释	示例
String	字符串（一串文本）：字符串的值必须用引号（单双均可，必须成对）括起来。	`let myVariable = '李雷';`
Number	数字：无需引号。	`let myVariable = 10;`
Boolean	布尔值（真 / 假）： `true`/`false` 是 JS 里的特殊关键字，无需引号。	`let myVariable = true;`
Array	数组：用于在单一引用中存储多个值的结构。	`let myVariable = [1, '李雷', '韩梅梅', 10];` 元素引用方法：`myVariable[0]`, `myVariable[1]` ……
Object	对象：JavaScript 里一切皆对象，一切皆可储存在变量里。这一点要牢记于心。	`let myVariable = document.querySelector('h1');` 以及上面所有示例都是对象。

变量是计算机存储数据的 “容器”，可以让计算机变得有记忆，通俗的理解变量就是使用【某个符号】来代表【某个具体的数值】

3.4 基本数据类型 & 类型转换

JavaScript 目前包含八种数据类型，其中可以分成两大类：

基本数据类型 (immutable)

Number (数值，包含NaN)，有 3个函数可以把其他类型的值转换为数值 (显式转换)，当转换失败时结果为 NaN（Not a Number）即不是一个数字：
- Number()：把任何数据类型的值转换为数值
- parseInt()：把字符串转换为整数值
- parseFloat()：把字符串转换为浮点数值
String (字符串)，转换为字符串：
- toString()：这是一个方法，数值、布尔值、对象和字符串值都有toString()方法。
- String()：这是一个全局函数，适用于所有数据类型

Boolean (布尔值)，可以调用 Boolean() 函数来将其他类型转换为布尔值，不同类型转换为布尔值的规则如下表：

数据类型	转换为 true 的值	转换为 false 的值
Boolean	true	false
String	非空字符串	“” (空字符串)
Number	非零数值（包括无穷值）	0、NaN
Object	任意对象	null
Undefined	无	undefined

Undefined (未定义/未初始化)

1 2	`var myName; console.log(typeof myName); // "undefined"`

Null (空对象)，null表示一个空对象指针，因此使用 typeof 操作符检测 null 值时会返回”object”
1
2
let car = null; console.log( typeof car ); // "object"
Symbol (独一无二的值，ES6 新增)，Symbol 值通过 Symbol() 函数生成。
1
2
let s = Symbol(); console.log(typeof s) // "symbol"
BigInt (大整数，能够表示超过 Number 类型大小限制的整数，ES 2020新增)

引用数据类型 (mutable)

Object（对象，Array/数组和 function/函数也属于对象的一种）可以通过创建 Object 实例来创建自己的对象

// 方式有两种
// 第一种是使用 new 操作符和 Object 构造函数：
let person = new Object(); // 创建了一个空对象
person.name = "小明"; // 往对象中添加属性
person.age = 20;

// 第二种方式是使用对象字面量表示法，能够简化对包含大量属性的对象的创建，看起来也更加一目了然：
let person = {
	name: "小明",
	age: 20
};

隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 隐式转换</title>
</head>
<body>
  <script> 
    let num = 13 // 数值
    let num2 = '2' // 字符串

    // 结果为 132
    // 原因是将数值 num 转换成了字符串，相当于 '13'
    // 然后 + 将两个字符串拼接到了一起
    console.log(num + num2)

    // 结果为 11
    // 原因是将字符串 num2 转换成了数值，相当于 2
    // 然后数值 13 减去 数值 2
    console.log(num - num2)

    let a = prompt('请输入一个数字')
    let b = prompt('请再输入一个数字')

    alert(a + b);
  </script>
</body>
</html>

3.5 模版字符串 & 字符串内置方法

模板字符串：是允许嵌入表达式的字符串（可以使用多行字符串和字符串插值功能）

${name} 和 ${age} 是模板字符串的表达式部分，它们被包含在 ${} 内部，并在运行时求值。

const username = "Rocky"
const age = 30

// 1. 第一种最基本字符串的连接
console.log("My name is" + username + ", and my age is " + age)
// 2. 模版字符串 (推荐使用, 可读性强)
const info = `my name is ${username}, and my age is ${age}`
console.log(info)

模板字符串当作 HTML 模板使用：

let header = "";
let tags = ["RUNOOB", "GOOGLE", "TAOBAO"];

let html = `<h2>${header}</h2><ul>`;
for (const x of tags) {
  html += `<li>${x}</li>`;
}

html += `</ul>`;

特殊字符

代码	输出
\‘	单引号
\“	双引号
\\	反斜杠
\n	换行
\r	回车
\t	tab(制表符)
\b	退格符
\f	换页符

1 2	`console.log("We are the so-called \"Vikings\" from the north.") // We are the so-called "Vikings" from the north.`

字符串属性

属性	描述
constructor	返回创建字符串属性的函数
length	返回字符串的长度
prototype	允许您向对象添加属性和方法

字符串方法

方法	描述
charAt()	返回指定索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
concat()	连接两个或多个字符串，返回连接后的字符串
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
localeCompare()	用本地特定的顺序来比较两个字符串
match()	找到一个或多个正则表达式的匹配
replace()	替换与正则表达式匹配的子串
search()	检索与正则表达式相匹配的值
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase()	根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLocaleUpperCase()	根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
toUpperCase()	把字符串转换为大写
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值

3.6 运算符 (operator)

算术运算符：在计算失败时，显示的结果是 NaN （not a number）

运算符作用

+ 求和

- 求差

* 求积

/ 求商

% 取模（取余数），开发中经常用于作为某个数字是否被整除
赋值运算符：对变量进行赋值的运算符，将等号右边的值赋予给左边, 要求左边必须是一个容器

运算符作用

+= 加法赋值

-+ 减法赋值

*= 乘法赋值

/= 除法赋值

%= 取余赋值
自增/自减运算符

符号作用说明

++ 自增变量自身的值加1，例如: x++

– 自减变量自身的值减1，例如: x–

比较运算符：比较两个数据大小、是否相等，根据比较结果返回一个布尔值（true / false）

运算符	作用
>	左边是否大于右边
<	左边是否小于右边
>=	左边是否大于或等于右边
<=	左边是否小于或等于右边
===	绝对等于 (左右两边是否 `type` 和 `value` 都相等)
==	左右两边`值`是否相等
!=	左右值不相等
!==	左右两边是否不全等

逻辑运算符：可以把多个布尔值放到一起运算，最终返回一个布尔值

符号	名称	日常读法	特点	口诀
&&	逻辑与	并且	符号两边有一个假的结果为假	一假则假
\|\|	逻辑或	或者	符号两边有一个真的结果为真	一真则真
!	逻辑非	取反	true变false false变true	真变假，假变真

A	B	A && B	A \|\| B	!A
false	false	false	false	true
false	true	false	true	true
true	false	false	true	false
true	true	true	true	false

3.7 条件语句

if 分支语句（重点）

<script>
   // 1. 用户输入
   let uname = prompt('请输入用户名:')
   let pwd = prompt('请输入密码:')
   // 2. 判断输出
   if (uname === 'pink' && pwd === '123456') {
     alert('恭喜登录成功')
   } else {
     alert('用户名或者密码错误')
   }
 </script>

三元运算符

// 条件 ? 表达式1 : 表达式2 
// 如果条件为真，则执行表达式1
// 如果条件为假，则执行表达式2

// 1. 用户输入 
let num = prompt('请您输入一个数字:')
// 2. 判断输出- 小于10才补0
// num = num < 10 ? 0 + num : num
num = num >= 10 ? num : 0 + num
alert(num)

switch语句

<script>
  switch (2) {
    case 1:
    console.log('您选择的是1')
    break  // 退出switch
    case 2:
    console.log('您选择的是2')
    break  // 退出switch
    case 3:
    console.log('您选择的是3')
    break  // 退出switch
    default:
    console.log('没有符合条件的')
  }
</script>

3.8 Loop

while 循环

break 中止整个循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用（提高效率）
continue 中止本次循环，一般用于排除或者跳过某一个选项的时候
while(true) 来构造 “无限循环”，需要使用 break 退出循环（常用）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>我是 tab name</title>
</head>

<body>
  <script>
    // 1. 开始循环 输入框写到 循环里面
    // 3. 准备一个总的金额
    let money = 100
    while (true) {
      let re = +prompt(`
  请您选择操作：
  1.存钱
  2.取钱
  3.查看余额
  4.退出
  `)
      // 2. 如果用户输入的 4 则退出循环， break  写到if 里面，没有写到switch里面， 因为4需要break退出循环
      if (re === 4) {
        break
      }
      // 4. 根据输入做操作
      switch (re) {
        case 1:
          // 存钱
          let cun = +prompt('请输入存款金额')
          money = money + cun
          break
        case 2:
          // 存钱
          let qu = +prompt('请输入取款金额')
          money = money - qu
          break
        case 3:
          // 存钱
          alert(`您的银行卡余额是${money}`)
          break
      }
    }
  </script>
</body>

</html>

for 循环

<script>
  // 1. 语法格式
  // for(起始值; 终止条件; 变化量) {
  //   // 要重复执行的代码
  // }

  // 2. 示例：在网页中输入标题标签
  // 起始值为 1
  // 变化量 i++
  // 终止条件 i <= 6
  for(let i = 1; i <= 6; i++) {
    document.write(`<h${i}>循环控制，即重复执行<h${i}>`)
  }
</script>

变化量和死循环，for 循环和 while 一样，如果不合理设置增量和终止条件，便会产生死循环。跳出和终止循环：

<script>
    // 1. continue 
    for (let i = 1; i <= 5; i++) {
        if (i === 3) {
            continue  // 结束本次循环，继续下一次循环
        }
        console.log(i)
    }
    // 2. break
    for (let i = 1; i <= 5; i++) {
        if (i === 3) {
            break  // 退出结束整个循环
        }
        console.log(i)
    }
</script>

循环嵌套

外层循环循环一次，里层循环循环全部

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    span {
      /* 样式css */
      display: inline-block;
      width: 100px;
      padding: 5px 10px;
      border: 1px solid pink;
      margin: 2px;
      border-radius: 5px;
      box-shadow: 2px 2px 2px rgba(255, 192, 203, .4);
      background-color: rgba(255, 192, 203, .1);
      text-align: center;
      color: hotpink;
    }
  </style>
</head>

<body>
  <h2>九九乘法表</h2>
  <script>
    for (let i = 1; i <= 9; i++) { // 外层打印几行
      for (let j = 1; j <= i; j++) { // 里层打印几个星星
        document.write(`<span> ${j} x ${i} = ${j * i} </span>`)
      }
      document.write('<br>')
    }
  </script>
</body>

</html>

Output result

3.9 数组 (Array)

一种可以按顺序保存数据的数据类型，如果有多个数据可以用数组保存起来，然后放到一个变量中，管理非常方便

使用对象创建

var arr1 = new Array() // 同类型有序数组创建：
arr[0] = 1
arr[1] = 2
arr[2] = 3

var arr2 = new Array() // 不同类型有序数组创建：
arr[0] = 1
arr[1] = "2"
arr[2] = 3

使用字面量创建

1 2	`var arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9] // 同类型有序数组创建 var arr2 = [1, "2", 3, "4", 5, "6", 7, "8", 9] // 不同类型有序数组创建`

length属性 & 遍历数组

var arr = [1, "2", 3, "4", 5, "6", 7, "8", 9]
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i])
}

操作数组：数组做为对象数据类型，不但有 length 属性可以使用，还提供了许多方法：

push 动态向数组的尾部添加一个单元
unshit 动态向数组头部添加一个单元
pop 删除最后一个单元
shift 删除第一个单元
splice 动态删除任意单元

使用以上4个方法时，都是直接在原数组上进行操作，即成功调任何一个方法，原数组都跟着发生相应的改变。并且在添加或删除单元时 length 并不会发生错乱。

<script>
  // 定义一个数组
  let arr = ['html', 'css', 'javascript']

  // 1. push 动态向数组的尾部添加一个单元
  arr.push('Nodejs')
  console.log(arr)
  arr.push('Vue')

  // 2. unshit 动态向数组头部添加一个单元
  arr.unshift('VS Code')
  console.log(arr)

  // 3. splice 动态删除任意单元
  arr.splice(2, 1) // 从索引值为2的位置开始删除1个单元
  console.log(arr)

  // 4. pop 删除最后一个单元
  arr.pop()
  console.log(arr)

  // 5. shift 删除第一个单元
  arr.shift()
  console.log(arr)
</script>

3.10 函数 (function)

声明（定义）函数时的形参没有数量限制，当有多个形参时使用 , 分隔
调用函数传递的实参要与形参的顺序一致

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 函数参数</title>
</head>
<body>

  <script>
    // 这个函数似乎没有什么价值，除非能够向不同的人打招呼
    // 这就需要借助参数来实现了
    function sayHi(name) {
      // 参数 name 可以被理解成是一个变量
      console.log(name)
      console.log('嗨~' + name)
    }

    // 调用 sayHi 函数，括号中多了 '小明'
    // 这时相当于为参数 name 赋值了
    sayHi('小明')// 结果为 小明

    // 再次调用 sayHi 函数，括号中多了 '小红'
    // 这时相当于为参数 name 赋值了
    sayHi('小红') // 结果为 小红
  </script>
</body>
</html>

形参和实参

形参：声明函数时写在函数名右边小括号里的叫形参（形式上的参数）

实参：调用函数时写在函数名右边小括号里的叫实参（实际上的参数）

形参可以理解为是在这个函数内声明的变量（比如 num1 = 10）实参可以理解为是给这个变量赋值

开发中尽量保持形参和实参个数一致

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 函数参数</title>
</head>
<body>
  <script>
    // 声明（定义）一个计算任意两数字和的函数
    // 形参 x 和 y 分别表示任意两个数字，它们是两个变量
    function count(x, y) {
      console.log(x + y);
    }
    // 调用函数，传入两个具体的数字做为实参
    // 此时 10 赋值给了形参 x
    // 此时 5  赋值给了形参 y
    count(10, 5); // 结果为 15
  </script>
</body>
</html>

返回值

函数的本质是封装（包裹），函数体内的逻辑执行完毕后，函数外部如何获得函数内部的执行结果呢？要想获得函数内部逻辑的执行结果，需要通过 return 这个关键字，将内部执行结果传递到函数外部，这个被传递到外部的结果就是返回值。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 函数返回值</title>
</head>
<body>

  <script>
    // 定义求和函数
    function count(a, b) {
      let s = a + b
      // s 即为 a + b 的结果
      // 通过 return 将 s 传递到外部
      return s
    }

    // 调用函数，如果一个函数有返回值
    // 那么可将这个返回值赋值给外部的任意变量
    let total = count(5, 12)
  </script>
</body>
</html>

总结：

在函数体中使用return 关键字能将内部的执行结果交给函数外部使用
函数内部只能出现1 次 return，并且 return 下一行代码不会再被执行，所以return 后面的数据不要换行写
return会立即结束当前函数
函数可以没有return，这种情况默认返回值为 undefined

作用域

通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

全局作用域：作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。处于全局作用域内的变量，称为全局变量。
局部作用域：作用于函数内的代码环境，就是局部作用域。因为跟函数有关系，所以也称为函数作用域。处于局部作用域内的变量称为局部变量

如果函数内部，变量没有声明，直接赋值，也当全局变量看，但是强烈不推荐

但是有一种情况，函数内部的形参可以看做是局部变量。

匿名函数

函数可以分为具名函数和匿名函数

匿名函数：没有名字的函数，无法直接使用。

// 声明
let fn = function() { 
   console.log('函数表达式')
}
// 调用
fn()

立即执行函数：

1 2	`(function(){ xxx })(); (function(){xxxx}());`

无需调用，立即执行，其实本质已经调用了

多个立即执行函数之间用分号隔开

3.11 对象

对象是 JavaScript 数据类型的一种，之前已经学习了数值类型、字符串类型、布尔类型、undefined。对象数据类型可以被理解成是一种数据集合。它由属性和方法两部分构成。

属性和访问

属性都是成对出现的，包括属性名和值，它们之间使用英文 : 分隔
多个属性之间使用英文 , 分隔
属性就是依附在对象上的变量
属性名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

// 声明一个对象类型的变量与之前声明一个数值或字符串类型的变量没有本质上的区别, 也可以用 let, 声明对象类型变量, 使用一对花括号
const info = { 
    firstname: "Rocky",
    lastname: "CHEN",
    age: 19,
    hobbies: ["music", "movies", "sports"],
    address: {
        street: "8 OI King Street",
        city: "Kowloon",
        country: "Hong Kong SAR"
    },
}

// 声明对象，并添加了若干属性后，可以使用 . 或 [] 获得对象中属性对应的值，我称之为属性访问
console.log(info) // print object in console
console.log(info.firstname, info.lastname) // Rocky CHEN
console.log(info.hobbies[1]) // movies
console.log(info.address.city) // Kowloon

const { firstname,
    lastname,
    address: { city },
} = info // 把值给单纯的取出来在访问
console.log(city) // 可以直接打印 city

info.email = "rocky@gmail.com" // 动态为对象添加属性: 添加 email 元素到 info 对象
console.log(info)

方法和调用

数据行为性的信息称为方法，如跑步、唱歌等，一般是动词性的，其本质是函数。

方法是由方法名和函数两部分构成，它们之间使用 : 分隔
多个属性之间使用英文 , 分隔
方法是依附在对象中的函数
方法名可以使用 "" 或 ''，一般情况下省略，除非名称遇到特殊符号如空格、中横线等

声明对象，并添加了若干方法后，可以使用 . 或 [] 调用对象中函数，我称之为方法调用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 对象方法</title>
</head>
<body>

  <script>
    // 方法是依附在对象上的函数
    let person = {
      name: '小红',
      age: 18,
      // 方法是由方法名和函数两部分构成，它们之间使用 : 分隔
      singing: function () {
        console.log('两只老虎，两只老虎，跑的快，跑的快...')
      },
      run: function () {
        console.log('我跑的非常快...')
      }
    }
    
    // 调用对象中 singing 方法
    person.singing()
    // 调用对象中的 run 方法
    person.run()
    
    // 动态添加方法
    person.move = function () {
      console.log('移动一点距离...')
    }

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

注：无论是属性或是方法，同一个对象中出现名称一样的，后面的会覆盖前面的。

null

null 也是 JavaScript 中数据类型的一种，通常只用它来表示不存在的对象。使用 typeof 检测类型它的类型时，结果为 object。

遍历对象：

let obj = {
    uname: 'pink'
}
for(let k in obj) {
    // k 属性名  字符串  带引号    obj.'uname'     k ===  'uname'
    // obj[k]  属性值    obj['uname']   obj[k]
}

for in 不提倡遍历数组因为 k 是字符串

3.10 JSON

JSON (JavaScript Object Notation): 一种轻量级的数据交换格式，是独立的语言，用于存储和传输数据的格式，通常用于服务端向网页传递数据。JSON 格式在语法上与创建 JavaScript 对象代码是相同的。

JSON 是 JS 对象的字符串表示法。它使用文本表示一个 JS 对象的信息，（JSON）本质是一个字符串。

1
2

var obj = {a: 'Hello', b: 'World'}; //这是一个js对象，注意js对象的键名也是可以使用引号包裹的,这里的键名就不用引号包含
var json = '{"a": "Hello", "b": "World"}'; //这是一个 JSON 字符串，本质是一个字符串

JSON（格式字符串）和 JS 对象（也可以叫JSON对象或 JSON 格式的对象）互转（JSON.parse 和 JSON.stringify）。

要实现从JSON字符串转换为JS对象，使用 JSON.parse() 方法：

1	`var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'} 一个对象`

要实现从JS对象转换为JSON字符串，使用 JSON.stringify() 方法：

1	`var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}' 一个JSON格式的字符串`

说句不严谨的话：JSON.parse() 就是字符串转 js 对象， JSON.stringify()就是 js 对象转字符串，它们前提是要 json 格式才有意义。

JSON语法支持表示3种类型的值：

简单值：字符串、数值、布尔值和null可以在JSON种出现，特殊值undefined不可以；例如，下面这个数值是有效的 JSON：

1
2

"Hello World!" // JS 字符串与 JSON 字符串的主要区别: JSON 字符串必须使用双引号 (单引号会导致语法错误)
"name":"Runoob" // 数据为 键/值 对：键/值对包括字段名称（在双引号中），后面一个冒号，然后是值

对象：第一种复杂数据类型，对象表示有序键/值对。每个值可以是简单值，也可以是复杂类型；数据由逗号分隔：JSON 对象保存在大括号内：
1
{"name":"Runoob", "url":"www.runoob.com"}
数组：第二种复杂数据类型，数组表示可以通过数值索引访问的值的有序列表。数组的值可以是任意类型，包括简单值、对象，甚至其他数组。方括号保存数组
1
2
3
4
5
"sites":[ {"name":"Runoob", "url":"www.runoob.com"}, {"name":"Google", "url":"www.google.com"}, {"name":"Taobao", "url":"www.taobao.com"} ]

对象

对象使用与 JavaScript 对象字面量略为不同的方式表示。以下是 JavaScript 中的对象字面量：

const person = {
	name: "lc",
	age: 20
};

虽然这对 JavaScript 开发者来说是标准的对象字面量，但 JSON 中的对象必须使用双引号把属性名包围起来，下面的代码与前面的代码是一样的：

const obj = {
	"name": "lc",
	"age": 20
};

而用 JSON 表示相同的对象的语法是：

{
	"name": "lc",
	"age": 20
}

与 JavaScript 对象字面量相比，JSON 主要有两处不同:

没有变量声明（JSON 中没有变量）；
最后没有分号（不需要，因为不是 JavaScript 语句）。

属性的值可以是简单值或复杂数据类型值，后者可以在对象中再嵌入对象：

{
	"name": "lc",
	"age": 20,
	"school": {
		"name": "kk",
		"location": "上海"
	}
}

数组

JSON 的第二种复杂数据类型是数组。数组在 JSON 中使用 JavaScript 的数组字面量形式表示。例如，以下是一个 JavaScript 数组：

1	`const arr = [25, "hi", true];`

在 JSON 中可以使用类似语法表示相同的数组：

1	`[25, "hi", true]`

同样，这里没有变量，也没有分号。数组和对象可以组合使用，以表示更加复杂的数据结构，比如：

[
	{ 
		 "name": "lc", 
		 "authors": [ 
			 "Nicholas C. Zakas", 
			 "Matt Frisbie" 
		 ], 
		 "edition": 4, 
		 "year": 2017 
	 },
 	{ 
		 "name": "wmj", 
		 "authors": [ 
			 "Nicholas C. Zakas"
		 ], 
		 "edition": 3, 
		 "year": 2011 
	 }
]

解析与序列化

JSON 的迅速流行并不仅仅因为其语法与 JavaScript 类似，很大程度上还因为 JSON 可以直接被解析成可用的 JavaScript 对象。

1. JSON对象

JSON对象有两个方法：

stringify()：将js序列化为JSON字符串；
parse()：将JSON解析为js值。

JSON.stringify() 把一个 JavaScript 对象序列化为一个 JSON 字符串：

const book = {
	title: "Professional JavaScript",
	authors:[
		"Nicholas C. Zakas", 
 		"Matt Frisbie"
	],
	edition: 4,
	year: 2017
};

let jsonText = JSON.stringify(book);

默认情况下，JSON.stringify()会输出不包含空格或缩进的 JSON 字符串，jsonText 的值是这样的：

1	`{"title":"Professional JavaScript","authors":["Nicholas C. Zakas","Matt Frisbie"], "edition":4,"year":2017}`

注意：在序列化 JavaScript 对象时，所有函数和原型成员都会有意地在结果中省略。此外，值为 undefined的任何属性也会被跳过。最终得到的就是所有实例属性均为有效 JSON 数据类型的表示。

JSON 字符串可以直接传给 JSON.parse()，然后得到相应的 JavaScript 值：

1 2	`let bookCopy = JSON.parse(jsonText); // bookCopy的数据格式和book一样`

注意：book 和 bookCopy 是两个完全不同的对象，没有任何关系。但是它们拥有相同的属性和值。如果给 JSON.parse()传入的 JSON 字符串无效，则会导致抛出错误。

2. 序列化选项

JSON.stringify()方法除了要序列化的对象，还可以接收两个参数。这两个参数可以用于指定其他序列化 JavaScript 对象的方式：

第一个参数是过滤器，可以是数组或函数；
第二个参数是用于缩进结果 JSON 字符串的选项。

过滤结果

如果第二个参数是一个数组，那么JSON.stringify()返回的结果只会包含该数组中列出的对象属性：

const book = { 
	title: "Professional JavaScript", 
	authors: [ 
		"Nicholas C. Zakas", 
		"Matt Frisbie" 
	], 
	edition: 4, 
	year: 2017 
};

let jsonText = JSON.stringify(book, ["title", "edition"]);

// jsonText: {"title":"Professional JavaScript","edition":4}

如果第二个参数是一个函数，则行为又有不同。提供的函数接收两个参数：属性名（key）和属性
值（value）。可以根据这个 key 决定要对相应属性执行什么操作。这个 key 始终是字符串，只是在值不属于某个键/值对时会是空字符串（注意，返回 undefined 会导致属性被忽略。）：

const book = { 
	title: "Professional JavaScript", 
	authors: [ 
		"Nicholas C. Zakas", 
		"Matt Frisbie" 
	], 
	edition: 4, 
	year: 2017 
};

let jsonText = JSON.stringify(book, (key, value) => {
    switch (key) {
        case "authors":
            return value.join(",");
        case "year":
            return 5000;
        case "edition":
            return undefined;
        default:
            return value;
    }
});

// 结果如下
{"title":"Professional JavaScript","authors":"Nicholas C. Zakas,Matt Frisbie","year":5000}

字符串缩进

JSON.stringify()方法的第三个参数控制缩进和空格。在这个参数是数值时，表示每一级缩进的空格数。

例如，每级缩进 4 个空格，可以这样：

const book = { 
	title: "Professional JavaScript", 
	authors: [ 
		"Nicholas C. Zakas", 
		"Matt Frisbie" 
	], 
	edition: 4, 
	year: 2017 
};

let jsonText = JSON.stringify(book, null, 4);
// jsonText 格式如下
{ 
    "title": "Professional JavaScript", 
    "authors": [ 
        "Nicholas C. Zakas", 
        "Matt Frisbie" 
    ], 
    "edition": 4, 
    "year": 2017 
}

3. 解析选项

JSON.parse()方法也可以接收一个额外的参数，是一个函数，该函数也接收两个参数，属性名（key）和属性值（value），另外也
需要返回值。

如果此函数返回 undefined，则结果中就会删除相应的键。如果返回了其他任何值，则该值就会成为相应键的值插入到结果中。该函数经常被用于把日期字符串转换为 Date 对象。例如：

const book = { 
	title: "Professional JavaScript", 
	authors: [ 
		"Nicholas C. Zakas", 
		"Matt Frisbie" 
	], 
	edition: 4, 
	year: 2017,
	releaseDate: new Date(2022, 4, 3)
};
let jsonText = JSON.stringify(book);
let bookCopy = JSON.parse(jsonText, (key, value) => key == "releaseDate" ? new Date(value) : value);
console.log(bookCopy.releaseDate.getFullYear()); // 2022

Intro to Programming

#HTML5+CSS3+JavaScript

HTML5+CSS3+JavaScript

http://example.com/2023/05/16/html+css+js/

Author

Rocky CHEN

Posted on

May 16, 2023

Licensed under

Midjourney Previous

AF3313 Corporate Finance Review Notes Next

运算符	作用
+	求和
-	求差
*	求积
/	求商
%	取模（取余数），开发中经常用于作为某个数字是否被整除

运算符	作用
+=	加法赋值
-+	减法赋值
*=	乘法赋值
/=	除法赋值
%=	取余赋值

符号	作用	说明
++	自增	变量自身的值加1，例如: x++
–	自减	变量自身的值减1，例如: x–