1.1HTML基础
1.1.1HTML简介
HTML (Hyper Text Markup Language,“超文本标记语言”)
主要作用是：通过HTML标记对网页中的文本、图片、声音等内容进行描述。
https://www.w3school.com.cn/html/index.asp
<!DOCTYPE html> <!--文档声明:必须位于第一行-->
<html lang="zw_CN"> <!--根标签-->
<head> <!--头部标签-->
<meta charset="UTF-8"> <!--指定使用 UTF-8 字符编码-->
<title>表格</title>
</head>
<body> <!--主体标签 -->
hello world
</body>
</html>
1.1.2 HTML元素标签分类
- 常规元素(双标签)
<标签名 >内容</标签名>
- 空元素(单标签)
<标签名 />
- 注释标签
<!--注释内容-->
应用注释标记方便查找、对比及理解代码。
1.2常用的HTML标签
1.2.1段落，行内和换行标签
- 段落标签和行内标签
a. 文本在一个段落中会根据浏览器窗口大小自动换行
b. 把 HTML 文档分割为若干段落
c. span标签的定义方便了通过CSS样式格式化标签内的内容。
d. 行内元素只能包含数据和其他行内元素
<p> <!--段落标签-->
使用html制作网页时
<span> <!--行内标签-->
</span>
通过br标签可以实现换行
<br />效果
</p>
-
换行标签
<br /> -
div标签
a. 块级元素可以包含行内元素和其他块级元素
<div> </div>
1.2.2文本样式标签
<font 属性=”属性值”>文本内容</font>
| 属性 | 作用 |
|---|---|
| color | 使用颜色名称或是十六进制的 #RRGGBB 格式，来设置文字的颜色 |
| face | 列出了一个或多个逗号分隔的字体名称。系统预设是均衡或等宽字 |
| size | 使用数字或相对值指定文字大小。默认值为 3。 |
我是默认的文本<br />
<font face="微软雅黑" size="4" color="green"> <br />
我是4号绿色文本，我的字体是微软雅黑 </font>
1.2.3 表格标签
<table border="1">
<tr>
<td>单元格文本</td>
</tr>
</table>
| 属性 | 作用 |
|---|---|
| border | 边框 |
| width | 设置宽 |
| height | 设置高 |
| cellspacing | 定义了表格单元和表格单元之间的空间 |
| cellpadding | 定义了表格单元的内容和边框之间的空间 |
| allgn | 对齐方式 |
1.2.4表单标签
表单主要由3部分组成，分别是 表单控件、提示信息和表单域
<1>表单域
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址 |
| method | get/post | 用于设置表单数据的提交方式 |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单 |
<2>表单控件
<input />
<input type="text" name="username" /> <!--文本输入框控件-->
| 属性值 | 作用 |
|---|---|
| button | 没有默认行为的按钮，上面显示 value 属性的值，默认为空。 |
| checkbox | 复选框，可设为选中或未选中\ |
| color | 用于指定颜色的控件\ |
| date | 输入日期的控件（年、月、日，不包括时间 ） |
| file | 让用户选择文件的控件 |
| image | 带图像的 submit 按钮,显示的图像由src 属性规定 |
| month | 输入年和月的控件，没有时区 |
| number | 输入数字的控件 |
| password | 单行的文本区域 |
| radio | 单选按钮\ |
| reset | 此按钮将表单的所有内容重置为默认值。 |
| search | 用于搜索字符串的单行文字区域 |
| submit | 提交按钮 |
| text | 单行的文本区域 ，输入中的换行会被自动去除 |
| value | 用户输入的值（提前在标签设置好就是默认值） |
| name | 告诉后端对应值的含义，后端接收到的格式： name的属性值=value的属性值 |
具体参考网页：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input
<fieldset>元素将一个HTML表单的一部分组成一组，内置了一个元素作为fieldset的标题。
<textarea rows="显示的行数" cols="每行中的字符数">
文本内容
</textarea>
1.2.5列表标签
<1>无序列表：一种没有特定顺序的列表
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ul>
type: disc 实心圆 square 小方块 circle 空心圆
<2>有序列表：一列有顺序的列表
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
......
</ol>
<3>定义列表
<dl>
<dt>小标题</dt>
<dd>小标题的解释1</dd>
<dd>小标题的解释2</dd>
</dl>
1.2.6超链接标签
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
target: "_self" 默认窗口弹出方式 , "_blank" 新窗口弹出
<!--在本页面打开链接-->
<a href="https://www.baidu.com" target="_self">百度</a><br />
1.2.7图像标签
显示图片:
| 属性 | 属性值 | 描述 |
|---|---|---|
| src | URL | 图像的路径 |
| alt | 文本 | 图像不能显示时的替换文本 |
| title | 文本 | 鼠标悬停时显示的内容 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 数字 | 设置图像边框的宽度 |
1.3 css技术
1.3.1初识css
CSS（Cascading Styel Sheets层叠样式表，也称级联样式表）
作用：用来设计网页风格。 https://www.w3school.com.cn/css/index.asp
「css格式」
选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;...}
1.3.2 css样式的引用
1.行内式 -----未实现结构与样式的分离 不推荐
<标签名style=”属性1:属性值1;属性2:属性值2;属性3:属性值3;”>
内容
</标签名>
<h1 style="font-size:20px;color:blue ">
我是标题，实现变大变色
</h1>
2.内嵌式
<head>
<style type=”text/css”>
选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;}
</style>
</head>
<head>
<style type="text/css">
h1{color:green;
font-size:48px;}
</style>
</head>
3.外链式
<head>
<link href=”css文件的路径” type=”text/css” rel=”stylesheet” />
</head>
href：定义所链接外部样式表文件的URL。
type：定义所链接文档的类型，在这里需要指定为“text/css”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。
4.导入式
<style type=”text/css”>
@import url(CSS文件路径);或@import “CSS文件路径”;
/ 在此还可以存放其他的css路径/
</style>
1.3.3 css选择器和常用属性
1.标签选择器
标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
a{color:red}
2.类选择器
.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
.yellow{color: yellow}
3.id选择器
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
#blue{color: blue}
4.通配符选择器
{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
{color: #426b8e}
5.优先级
通配符选择器 < 标签选择器 < 类选择器 < id选择器
6.常用属性
| 属性 | 功能描述 |
|---|---|
| margin | 指定对象的外边距 |
| padding | 指定对象的内边距 |
| background | 设置背景颜色,背景图片,背景图片的排列方式,是否固定背景图片和背景图片的位置 |
| font-family | 字体系列 |
| border | 边框的宽度，边框的样式和边框的颜色 |
| font | 字体样式,小型的大写字体，字体粗细,文字的大小,行高和文字的字体 |
| height | 指定对象的高度 |
| Line-height | 设置行间距 |
| color | 指定对象的颜色 |
| text-align | 指定文本的对齐方式 |
| text-decoration | 指定文本的显示样式 |
| vertical-align | 设置元素的垂直对齐方式 |
| display | 指定对象的显示形式 |
1.4 JavaScripts基础
1.4.1 JavaScripts概述
https://www.w3school.com.cn/js/index.asp
JavaScripts是Web中一种功能强大的 脚本语言 ，常用来为网页添加各式各样的动态功能，它不需要进行编译，直接嵌入在HTML页面中，就可以把静态的页面转变成支持用户交互并响应事件的动态页面。
1.组成部分
（1）核心（ECMAScript）：这一部分主要是js的基本语法。
（2）BOM[Brower Object Model( 浏览器 对象模型)]:主要是获取浏览器信息或操作浏览器的，例如：浏览器的前进与后退、浏览器弹出提示框、浏览器地址栏输入网址跳转等操作等。
（3）DOM[Document Object Model( 文档对象 模型)]:此处的文档暂且理解为html，html加载到浏览器的内存中，可以使用js的DOM技术对内存中的html节点进行修改，用户从浏览器看到的是js动态修改后的页面。（增删改查）
2.代码引入方式
(1)行内式
<input type="button" value="点击" onclick="alert('行内式')" />
(2)内嵌式
<script type="text/javascript">
//javascript代码内容
</script>
<script type="text/javascript">
alert('内嵌式')
</script>
(3)外链式
将JavaScript代码写在一个单独的文件中，一般使用“js”作为文件的扩展名，在HTML文件中使用
<script type="text/javascript" src="外部文件路径"> </script>
Js.js 文件中写入：
alert('外链式嗷')
3.数据类型
| 类型 | 含义 | 说明 |
|---|---|---|
| Number | 数值型 | 不区分整型和浮点型，不要用引号括起来 |
| String | 字符串类型 | 用单引号或双引号括起来的一个或多个字符 |
| Boolean | 布尔类型 | 只有true和false两个值 |
| Object | 对象类型 | 一组数据和功能的键值对集合 |
| Null | 空类型 | 没有任何值 |
| Undefined | 未定义类型 | 变量被创建，但未赋值时所具有的值 |
4.变量
在JavaScript中变量使用 var 关键字定义
var a = "js";
var b = 123;
var c = [1,3,6,2,"haha",null,true];
5.运算符
（1）算术运算符
| 运算符 | 描述 | 例子 |
|---|---|---|
| + | 加法 | x=y+2 |
| - | 减法 | x=y-2 |
| 乘法 | x=y 2 | |
| / | 除法 | x=y/2 |
| % | 取模（余数） | x=y%2 |
| ++ | 自增 | x=++y / x=y++ |
| – | 自减 | x=–y / x=y– |
（2）比较运算符
| 运算符 | 描述 | 比较 | 返回值 |
|---|---|---|---|
| == | 等于 | x==8 | false |
| x==5 | true | ||
| != | 不等于 | x!=8 | true |
| === | 绝对等于（值和类型均相等） | x===“5” | false |
| x===5 | true | ||
| !== | 不绝对等于（值和类型有一个不相等，或两个都不相等） | x!==“5” | true |
| x!==5 | false | ||
| > | 大于 | x>8 | false |
| < | 小于 | x<8 | true |
| >= | 大于或等于 | x>=8 | false |
| <= | 小于或等于 | x<=8 | true |
（3）逻辑运算符
| 运算符 | 描述 | 例子 |
|---|---|---|
| && | and | (x < 10 && y > 1) 为 true |
| || | or | (x5 || y5) 为 false |
| ! | not | !(x==y) 为 true |
（4）赋值运算符
| 运算符 | 例子 | 等同于 |
|---|---|---|
| = | x=y | |
| += | x+=y | x=x+y |
| -= | x-=y | x=x-y |
| = | x =y | x=x y |
| /= | x/=y | x=x/y |
| %= | x%=y | x=x%y |
（5）三元运算符
条件表达式?表达式1:表达式2
6.条件语句
(1)if 语句；
if(条件表达式){
// 要执行的代码;
}
(2)if else 语句；
if(条件表达式){
// 当表达式成立时要执行的代码
}else{
// 当表达式不成立时要执行的代码
}
(3) if else if else 语句；
if (条件表达式 1) {
// 条件表达式 1 为真时执行的代码
} else if (条件表达式 2) {
// 条件表达式 2 为真时执行的代码
}
...
else if (条件表达式N) {
// 条件表达式 N 为真时执行的代码
} else {
// 所有条件表达式都为假时要执行的代码
}
1.4.2 DOM相关知识
DOM (Document Object Model [文档对象模型 ]): 是一种与平台和语言无关的模型，用来表示 HTML 或 XML 文档。文档对象模型中定义了文档的逻辑结构，以及程序访问和操作文档的方式。
1.节点的访问
父节点对象=子节点对象.parentNode;
node对象的常用属性
| 属性 | 类型 | 描述 |
|---|---|---|
| parentNode | Node | 返回节点的父节点，没有父节点时为null |
| childNodes | NodeList | 返回节点到子节点的节点列表 |
| firstChild | Node | 返回节点的首个子节点，没有则为null |
| lastChild | Node | 返回节点的最后一个子节点，没有则为null |
2.获取文档中指定元素
1).通过元素的标签名获得元素
document.getElementsByTagName('userName')
2).通过元素的id属性获取元素
document.getElementById('userId')
3).通过**.类名**获取元素
document.getElementsByClassName('.div3')
4).通过元素的name属性获取元素
document.getElementsByName('div4')
1.4.3 BOM相关知识 ------浏览器对象模型
- BOM对象
1).window.onload()加载事件
注册方式：
(1) window.onload =function () {} 只能写一次
(2) window.addEventListener(‘load’,function(){});
2).document.DOMContentLoaded加载事件
会在DOM加载完成时触发
1.4.4 JavaScripts的使用
1.函数的定义与调用
function functionname(argument1,argument2,...){
statements;
return expression;
}
2.事件处理
用户在页面中的行为
| 类别 | 事件 | 描述 |
|---|---|---|
| 表单事件 | onchange | HTML 元素改变 |
| onsubmit | 表单被提交时触发 | |
| onreset | 表单被重置时触发 | |
| onblur | 元素失去焦点时触发 | |
| onfocus | 元素获得焦点时触发 | |
| 页面事件 | onload | 浏览器已完成页面的加载 |
3.常用对象
（1）window对象
| 属性 | 描述 |
|---|---|
| document | 对 Document 对象的只读引用。请参阅 Document 对象。 |
| history | 对 History 对象的只读引用。请参数 History 对象。 |
| location | 用于窗口或框架的 Location 对象。请参阅 Location 对象。 |
| navigator | 对 Navigator 对象的只读引用。请参数 Navigator 对象。 |
| screen | 对 Screen 对象的只读引用。请参数 Screen 对象。 |
| parent | 返回父窗口。 |
| self | 返回对当前窗口的引用。等价于 Window 属性。 |
| top | 返回最顶层的先辈窗口。 |
| innerHeight | 返回窗口的文档显示区的高度。 |
| innerWidth | 返回窗口的文档显示区的宽度。 |
| outerHeight | 返回窗口的外部高度。 |
| outerWidth | 返回窗口的外部宽度。 |
| name | 设置或返回窗口的名称。 |
| closed | 返回窗口是否已被关闭。 |
| 方法 | 描述 |
|---|---|
| open() | 打开一个新的浏览器窗口或查找一个已命名的窗口。 |
| close() | 关闭浏览器窗口。 |
| alert() | 显示带有一段消息和一个确认按钮的警告框。 |
| confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框。 |
| focus() | 把键盘焦点给予一个窗口。 |
| getComputedStyle() | 获取指定元素的 CSS 样式。 |
| print() | 打印当前窗口的内容。 |
| prompt() | 显示可提示用户输入的对话框。 |
| setTimeout() | 在指定的毫秒数后调用函数或计算表达式。 |
| clearTimeout() | 取消由 setTimeout() 方法设置的 timeout。 |
（2）Date对象
Date 对象不能直接声明，必须通过 Date() 函数定义
JavaScript 中提供了四种不同的方法来创建 Date 对象，如下所示：
var time = new Date();
var time = new Date(milliseconds);
var time = new Date(datestring);
var time = new Date(year, month, date[, hour, minute, second, millisecond]);
| 获取方法 | 说明 | 设置方法 | 说明 |
|---|---|---|---|
| getDate() | 返回日期值 (1 ~ 31) | setDate() | 设置 日期值 (1 ~ 31) |
| getDay() | 返回星期值(0-6) | setDay() | 设置星期值(0-6) |
| getMonth() | 返回月份值 (0 ~ 11) | setMonth() | 设置月份值 (0 ~ 11) |
| getFullYear() | 返回四位数年份 | setFullYear() | 设置四位数年份 |
| getHours() | 返回小时值 (0 ~ 23) | setHours() | 设置小时值 (0 ~ 23) |
| getMinutes() | 返回分钟值 (0 ~ 59) | setMinutes() | 设置分钟值 (0 ~ 59) |
| getSeconds() | 返回秒数值 (0 ~ 59) | setSeconds() | 设置秒钟值 (0 ~ 59) |
| getTime() | 返回 1970 年 1 月 1 日至今的毫秒数 | ||
| setTime() | 以毫秒设置 Date 对象 |
（3）String对象
类型：length 获取字符串的长度
| 方法 | 描述 |
|---|---|
| charAt() | 返回在指定位置的字符 |
| charCodeAt() | 返回指定字符的 Unicode 编码 |
| concat() | 拼接字符串 |
| fromCharCode() | 将字符编码转换为一个字符串 |
| indexOf() | 检索字符串，获取给定字符串在字符串对象中首次出现的位置 |
| lastIndexOf() | 获取给定字符串在字符串对象中最后出现的位置 |
| match() | 根据正则表达式匹配字符串中的字符 |
| replace() | 替换与正则表达式匹配的子字符串 |
| search() | 获取与正则表达式相匹配字符串首次出现的位置 |
| split() | 根据给定字符将字符串分割为字符串数组 |
| sub() | 把字符串显示为下标 |
| substring() | 截取字符串中两个指定的索引之间的字符 |
| toLowerCase() | 把字符串转换为小写 |
| toUpperCase() | 把字符串转换为大写 |
| toString() | 返回字符串 |
| valueOf() | 返回某个字符串对象的原始值 |