Web 学习笔记： HTML 、CSS 以及 JavaScript
— HTML —
一、html 分为两部分：标签和内容
二、基本格式：
标签：由 <> 括起来，分为双标签和单标签
双标签： <标签名> …… </标签名> （开始标签、结束标签）
单标签： <标签名/>
添加属性： <标签名 属性名1=“值1” 属性名2=“值2” ……> …… </标签名>
规范：标签名小写、属性使用双引号、标签要闭合、合理嵌套。
规范不遵守浏览器不会报错，会尽量解析，大不了不显示效果
三、基本结构：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<!-- 此处可以写各种页头属性设置、CSS样式和JavaScript脚本等... -->
</head>
<body>
网页显示内容
</body>
</html>
① 文档类型声明标签
<!DOCTYPE html>
代表了使用 HTML5 标准解析，在文档首位
② html 结构
<html lang="en">
网页内容
</html>
网页是从 html 开始，html 结束
lang 代表语言标识：「en」代表英文，「zh-CN」代表中文
③ head 结构
<head>
<meta charset="UTF-8">
<title>网页标题</title>
<!-- 此处可以写各种页头属性设置、CSS样式和JavaScript脚本等... -->
</head>
对文档说明，不显示在网页内容
设置网页编码：设置字符集
<meta charset=“utf-8”/>
关键字：
<meta name=“Keywords” content=“关键字”/>
描述：
<meta name=“Description” content=“简介、描述”/>
网页标题：
<title>本网页标题</title>
导入 CSS 文件：
<link type=“text/css” rel=“stylesheet” href="**.css"/>
CSS 代码：
<style type=“text/css”>嵌入css样式代码</style>
JS 文件或代码：
<script>……</script>
……
④ body 结构
<body>
网页显示内容
</body>
网页的显示内容主题
⑤ 注释格式
<!-- 此处可以写各种页头属性设置、CSS样式和JavaScript脚本等... -->
html 的注释格式：尖括号、感叹号、双横线
四、html 常用标签
① 标题标签
提供六个等级 <h1> 到 <h6>
格式：
<h1>我是一级标题</h1>
效果：加粗、占用一行
我是一级标题
② 段落标签和换行标签
<p>分段，<br/>强制换行（单标签）
格式：
<p>我是第一段</p>
<p>我是第二段</p>
<p>我是第三…<br/>…断了</p>
效果：
我是第一段
我是第二段
我是第三…
…断了
③ 文本格式化标签
| 类型 | 标签 |
|---|---|
| 加粗 | <strong></strong>或者<b></b> |
| 倾斜 | <em><em> 或者 <i></i> |
| <del></del> 或者 <s></s> | |
| 下划线 | <ins></ins> 或者 <u></u> |
④ div 和 span 标签
分割作用、无具体意义
div 标签单独占一行
span 标签可一行多个
⑤ 图像标签
格式：键值对 key=“value”
<img src="图像URL" />
属性：
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本，图像不能显示的文字 |
| title | 文本 | 提示文本，鼠标放到图像上会显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
⑥ 超链接标签
格式：
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性作用：
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的url地址，(必须属性)当为标签应用href属性时，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。 |
可连接外部链接、内部链接、空连接和下载链接
各种网页元素也可以添加超链接
锚点链接：定位该网页到某个位置，在链接文本的href 属性中，设置属性值为「#名字」的形式，如<a href="#two">第2页</a>
⑦ 注释标签和特殊字符
注释格式：
<!-- 注释 -->
三个常用特殊字符：
空格符： 
小于符：<
大于符：>
⑧ 表格标签
基本格式：
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
<table> </table>是用于定义表格的标签
<tr> </tr>标签用于定义表格中的行，必须嵌套在<table> </table>标签中
<td></td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中
td 指表格数据( table data )，即数据单元格的内容
<th></th>表头标签：加粗居中
在表格标签中，分别用<thead>标签表格的头部区域、<tbody>标签表格的主体区域，用于划分区域
合并单元格：先确定是跨行（rowspan）还是跨列（colspan）合并，找到目标单元格，写上「合并方式=合并的单元格数量」。比如: <td colspan= “2”></td>，删除多余的单元格。
⑨ 列表标签
无序列表格式：
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
效果：
- 列表项1
- 列表项2
- 列表项3 ...
有序列表格式：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
效果：
- 列表项1
- 列表项2
- 列表项3 ...
自定义列表格式：
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
效果：
- 名词1
- 名词1解释1
- 名词1解释2
dt 和 dd 是并列关系
⑩ 表单标签
表单的组成：在HTML中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。
表单域：包含表单元素的区域，用 <form> 定义
格式：
<form action="URL" method="提交方式" name="表单域名称">
各种控件
</from>
表单元素：
（1）input 元素：输入内容，单标签
格式：
<input type="属性值" />
type 属性：
| 属性值 | 描述 |
|---|---|
| button | 定义可点击按钮（多数情况下，用于通过JavaScript 启动脚本） |
| checkbox | 定义复选框 |
| file | 定义输入字段和"浏览"按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段。该字段中的字符被掩码 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮，重置按钮会清除表单中的所有数据 |
| submit | 定义提交按钮，提交按钮会把表单数据发送到服务器 |
| text | 定义单行的输入字段，用户可在其中输入文本。默认宽度为20 个字符 |
name 属性：定义表单元素名字，单选按钮和复选框 name 要相同
value 属性：规定 input 值
checked 属性：规定默认勾选
maxlength 属性：规定最大字符数
（2）label 元素：标注，把文本文字焦点绑定到选项
格式：for 要与 id 属性一致
<label for="sex">男</label>
<input type="radio" name="sex" id="sex"/>
（3）select 元素：下拉列表
格式：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
（4）textarea 元素：文本域，定义多行文本
格式：
<textarea rows="3" cols="20">
文本内容
</textarea>
cols ：每行字符数，rows ：显示行数
五、路径，文件夹与根目录
根目录：第一层文件夹
相对路径：
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像文件位于HTML文件同一级，如<img src=“baidu.gif”/> | |
| 下一级路径 | / | 图像文件位于HTML文件下一级，如<img src=“images/baidu.gif” /> |
| 上一级路径 | …/ | 图像文件位于HTML文件上一级，如<img src="…/baidu.gif" /> |
绝对路径：是指目录下的绝对位置，直接到达目标位置。通常是从盘符开始的路径或完整的网络地址
— CSS —
一、CSS 介绍
指层叠样式表，控制 HTML 元素，从而美化网页
二、CSS 格式
基本格式：选择器{属性:值;属性:值;……}
例子：
<style>
h3{font-size:30px;color:red;}
li{color:blue;}
</style>
注释格式：
/*多行注释*/
使用 CSS 三种方式：
① 内联方式（行内样式）
② 内部方式（内嵌样式）
③ 外部导入方式（外部链入）：采用通用样式
导入 CSS 文件：<link type=“text/css” rel=“stylesheet” href="**.css"/>
优先级：就近原则（发生冲突时，采用离被修饰的内容最近的为主，无冲突则叠加）
三、CSS 常用选择器
① html 标签选择器
指用 HTML 标签名称作为选择器，按标签名称分类，
格式:
p {
color: blue;
}
② class 类选择器
给单独的一个标签设置样式
格式:
.one {
color: red;
}
.two {
font-size: 30px;
...
}
使用：
<p class="one">这是一个段落</p>
<p class="one two">这是一个段落</p>
③ id选择器
为标有特定 id 的 HTML 元素指定特定的样式。
格式:
#nav {
color: blue;
}
使用：
<p id="nav">这是一个段落</p>
④ 通配符选择器
找到文中所有的标签,并设置样式
格式：
* {
color: blue;
}
四、CSS 常用属性
字体
| 标签 | 含义 |
|---|---|
| font-family | 设置字体格式 |
| font-size | 设置字体大小 |
| font-weight | 设置字体粗细 |
| font-style | 设置字体样式 |
| color | 设置字体颜色 |
文本
| 标签 | 含义 |
|---|---|
| text-align | 设置文本对齐方式 |
| text-decoration | 设置文本装饰方式 |
| text-indent | 设置文本缩进 |
| line-height | 设置文本行高 |
背景
| 标签 | 含义 |
|---|---|
| background-color | 设置背景颜色 |
| background-image | 设置背景图片 |
| background-repeat | 设置背景平铺 |
| background-position | 设置背景位置 |
| background-size | 设置背景尺寸 |
圆角矩形
| 标签 | 含义 |
|---|---|
| border-radius | 设置圆角矩形 |
— JavaScript —
一、JavaScript 介绍
JavaScript 是一种基于原型、多范式、单线程的动态语言，并且支持面向对象、命令式和声明式（如函数式编程）风格
运行在客户端（浏览器）的编程语言
作用：网页特效、表单验证、数据交互、服务端编程
二、JavaScript 组成
– ECMAScript：规定了语法
– Web APIs：
DOM：操作文档
BOM：操作浏览器
查找 JS 资料：MDN文档
三、书写位置
内部：
直接写在 html 文件中，用 script 标签包住；script 标签写在</body>上面（按照顺序加载）
外部：
代码写在 .js 结尾的文件里，通过 script 标签引入到html页面中
<body>
<script src="XX.js">
//中间不能写内容，否则会被忽略
</script>
</body>
内联：
代码写在标签内部
<body>
<button onclick="alert('js')">按钮</button>
</body>
四、JavaScript 基本概念
字面量
在计算机科学中，字面量 (literal) 是在计算机中述 事/物
包括：数字字面量、字符串字面量、对象字面量、数组字面量
单行注释
符号：//
作用：//右边这一行的代码会被忽略
快捷键：ctrl + /
块注释
符号：/**/
作用：在/和/之间的所有内容都会被忽略
快捷键：shift + alt + a
结束符
作用：使用英文的「;」代表语句结束
实际情况：实际开发中，可写可不写，浏览器(JavaScript 引擎)可以自动推断语句的结束位置
现状：在实际开发中，越来越多的人主张，书写 JavaScript 代码时省略结束符
约定：为了风格统一，结束符要么每句都写，要么每句都不写
五、语法
输出语法
– 语法 1
document.write('要输出的内容')
作用：向 body 输出内容
注意：如果是网页标签，也会被解析成网页元素
– 语法 2
alert('要输出的内容')
作用：弹出警告对话框
– 语法 3
console.log('控制台打印')
作用：控制台输出语法，调试用
输入语法
– 语法
prompt('输入你的信息')
作用：显示对话框，给用户输入信息，获取默认为字符串类型
效果：
声明变量并赋值
– 语法
let XXX = 1
let aaa = '壹' , bbb = E //声明多个变量，但不提倡
注意：变量用「=」赋值
区别：let 和 var
var 声明特点：（不推荐 var）
可以先使用在声明（不合理）
var 声明过的变量可以重复声明（不合理）
比如变量提升、全局变量、没有块级作用域等等
声明数组
– 语法
let 数组名 = [数据a,数据b,数据c,……,数据n]
概念：
元素：每一个数据就是一个元素
下标：数据的编号，从 0 开始
长度：数组中数据的个数，通过数据的 length 属性获得,为索引号 +1
声明常量
– 语法
const PI = 3.14
注意：使用的时候必须赋值，不可重新赋值
六、数据类型
数字类型
包含整数、小数、正数、负数
JS 是弱数据类型的语言，赋值才知道什么数字类型
算术运算符：+、-、*、/、%
优先级：同级从左到右，先乘除取余后加减，有括号先括号
字符串类型
只要是由「’’」「""」「``」括起来的数据都是字符串，单双引号无区别，JS 推荐单引号
单双引号可互相交叉嵌套
输出引号用「\」转义符
字符串拼接用「+」
模板字符串
– 语法
外面用 `` 里面用 ${变量名}
let age = 24
document.write(`${age}岁，是学生`)
布尔型
字面量只有「ture」和「false」
未定义类型
声明变量未初始化，则是「undefined」
空类型
赋值的内容为空「null」
typeof 检测数据类型
两种格式
typeof x
typeof(x)
类型转换
表单和 prompt 获取的数据默认是字符串类型
隐式转换：
规则：
+ 号两边只要有一个是字符串，都会把另外一个转成字符串
除了 + 以外的算术运算符 比如 - * / 等都会把数据转成数字类型
+ 号放字符串前面如「+ ‘123’」可转换为数字类型
显示转换：
转为数字类型（大小写敏感）：
Number(‘123’)
转为数字，字符则会返回 NaN（非数字）
parseInt()
只保留整数
parseFloat()
可以保留小数
后两者常用于加减像素（如12.5px加到15.7px）
七、运算符
赋值运算符：
=、+=、-=、*=、/=、%=
自增运算符：++
自减运算符：–
前置自增自减单独使用没有区别
使用时：前置自增（减）先自加（减）再使用，后置自增（减）先使用后自加（减）
后置自增使用多
比较运算符
>：左边是否大于右边
<：左边是否小于右边
>=：左边是否大于或等于右边
<=：左边是否小于或等于右边
==：左右两边值是否相等
===：左右两边是否类型和值都相等
!=：左右两边是否相等
!==:左右两边是否不全等
结果是布尔类型，返回 true 或 false
字符串比较 ASCII 码
涉及 NaN 都是 「false」
小数尽量不要直接比较（精度问题，转化为整数比较）
逻辑运算符
与（&&）：一假则假
或（||）：一真则真
非（!）：取反
优先级
| 优先级 | 运算符 | 顺序 |
|---|---|---|
| 1 | 小括号 | （） |
| 2 | 一元运算符 | ++ – ! |
| 3 | 算数运算符 | 先 * / % 后 + - |
| 4 | 关系运算符 | > >= < <= |
| 5 | 相等运算符 | == != === !== |
| 6 | 逻辑运算符 | 先 && 后 || |
| 7 | 赋值运算符 | = |
| 8 | 逗号运算符 | , |
八、语句
表达式：可以被求值的结果
语句：可以执行的代码，不一定有值
三大结构
顺序结构、分支结构、循环结构
分支语句包含：if 分支语句、三元运算符、switch 语句
if 分支语句 – 单分支结构
用于范围判断
– 语法
非「0」为真，非「’’」（空字符串）为真
if (条件){
条件为ture时要执行的代码
}
if 分支语句 – 双分支结构
– 语法
if (条件){
语句 1
} else {
语句 2
}
if 分支语句 – 多分支结构
– 语法
if (条件 1){
语句 1
}else if (条件 2){
语句 2
}else if(条件 3){
语句 3
}else{
语句 4
}
三元运算符
– 语法
条件 ? 满足时执行的语句 : 不满足时执行的语句
一般用来取值，代替 if
switch 语句
– 语法
switch(数据){
case 值 1:
语句 1
break
case 值 2:
语句 2
break
default:
语句 n
break
}
用于值比较固定
找到 case 对应的全等的值并执行代码，无则执行 default
switch case 语句一般用于等值判断，不适合于区间判断
switch case 一般需要配合 break 关键字使用，没有 break 会造成 case 穿透
while 循环
– 语法
while (循环条件){
重复执行的代码（循环体）
}
循环三要素：
变量起始值
终止条件
变量变化量（自增自减）
let i = 1
while (i <= 3) {
document.write('我会循环三次<br>')
i++
}
for 循环
– 语法
for (变量起始值;终止条件;变量变化量){
//循环体
}
循环嵌套
for (外部申明循环次数的变量;循环条件;变化值){
for (内部申明循环次数的变量;循环条件;变化值){
//循环体
}
}
循环退出
continue：结束本次循环，开始下一循环
用于跳过某一项
break：退出循环
用于找到某一值后退出
分支较少用 if……else 语句，分支较多用 switch 语句
九、数组
数组是一种可以按照顺序保存数据的数据类型
– 声明语法
let 数组名 = [数据1,数据2,数据3,……]
数组是按照顺序保存，每个数据有自己的编号（又叫索引和下标），第一位从「0」开始
– 取值语法
数组名[下标]
//例
let names = ['张三','李四','王五','赵六']
names[0] //张三
names[1] //李四
概念
元素：每一个数据就是一个元素
下标：数据的编号，从 0 开始
长度：数组中数据的个数，通过数据的 length 属性获得,为索引号 +1
遍历数组
for (let i = 0; i < 数组名.length; i++){
数组名[i]
}
数组修改
数组名[下标] = 新值
数组新增
数组名.push(新元素1,新元素2)
将一个或多个元素添加到数组的末尾，并返回该数组的新长度
数组名.unshift(新元素1,新元素2)
将一个或多个元素追加到数组的开头，并返回该数组的新长度
数组删除
数组名.pop()
删除最后一个元素，并返回该元素的值
数组名.splice(起始位置，删除几个元素)
start 起始位置：指定修改的开始位置（从 0 开始计数）
deleteCount：删除几个元素（可选，不填默认删到最后）
十、函数
– 声明语法
function 函数名(参数列表){
函数体
}
函数命名
– 和变量命名规则一致
– 可采用小驼峰命名法：
- 第一个单词始终以小写字母开始。
- 从第二个单词开始，之后的每个单词的首字母都采用大写字母。
例如，变量名myFirstName和小函数sayHi符合小驼峰命名法的标准
– 前缀应用动词
– 约定：
| 动词 | 含义 |
|---|---|
| can | 判断是否可执行某个动作 |
| has | 判断是否含有某个值 |
| is | 判断是否为某个值 |
| get | 获取某个值 |
| set | 设置某个值 |
| load | 加载某些数据 |
函数调用
函数名()
函数传参
定义
function 函数名(参数1,参数2,……){
函数体
}
其中参数1 参数2为形式参数
使用
函数名(10,20)
其中10 20为实际参数
尽量保持形参和实参个数一致
函数返回值
return 数据
可以没有，无则返回 undefined
return 的数据不要换行写
作用域
名字可用性的代码范围，分为局部作用域（for 语句、函数内部）和全局作用域
如果函数内部，变量没有声明直接赋值，也当全局变量看（不推荐）
访问原则：是代码就有作用域，调用函数时查找声明顺序：先局部，在全局
匿名函数
函数表达式：（认识为主）
//函数声明
let fn = function (){
console.log('我是函数表达式')
}
//函数调用
fn()
立即执行函数：避免全局变量的污染（注意必须分号）
//方式 1
(function(){
console.log(11)
})();
//方式 2
(function(){
console.log(11)
}());
逻辑中断
&& 和 || 判断成立则中断
false && age++ //一假则假，假则 age++ 不执行，返回左侧「false」
10 || age++ //一真则真，真则 age++ 不执行，返回左侧真值「10」
11 && 22 //都是真，则返回最后一个真值「22」
11 || 22 //返回第一个真值「11」
