HTML是超文本标记语言（Hyper Text Markup Language）,一种纯文本类型的语言，用来设计网页的标记语言，用该语言编写的文件以.html或者.htm为后缀，由浏览器解释执行，在HTML的页面上可以嵌套脚本语言编写程序段，如JavaScript

HTML标签通常也被称为HTML标记，HTML元素；HTML标签是由尖括号包围的关键字，比如，HTML标签通常是成对出现的,比如，标签对中的第一个标签为开始标签，第二个标签为结束标签，开始标签和结束标签也被称为开放标签和闭合标签

HTML注释：

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们

声明：HTML由多个不同的版本，只有完全明白页面中的使用的确切HTML版本，浏览器才能完全正确的显示HTML页面，这就是的意义；

不是HTML的标签，它为浏览器提供一项信息，即HTML是用什么版本所写的

文档的头部描述了文档的各种信息和属性，包括文档的标题，在web中的位置以及和其他文档的关系等，绝大多数文档的头部包含的数据都不会真正的作为内容显示给读者

以下这些标签可用在head部分：,,,,,

**作用：**文本时网页上的重要组成部分，直接书写的文本会用浏览器默认的样式显示

**文本元素列表：**是包含在文本元素中的文本，则会被显示为元素所拥有的样式

标题是通过~标签进行定义的，目的是为了能够以醒目的方式显示，定义最大标题，定义最小标题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H0qWULYZ-1613216632726)(C:\Users\Melody\AppData\Roaming\Typora\typora-user-images\image-20210213192107880.png)]

段落是通过

标签进行定义的，

元素提供了结构化文本的一种方式，

元素对中的文本会以单独的段落显示，与前后文本换行分开，添加一段额外的垂直空白距离，作为行间距

列表是将具有相似特征或先后顺序的几行文字进行对齐排列，所有列表都是由列表类型和列表项组成

列表类型：

有序列表 ：用于列出表面上有特定次序的一些项目，其中只能包含列表项

无序列表 ：用于列出页面上没有特定次序的一些项目，也只能包含具体列表项元素

列表项：用来表示列表具体的内容

HTML分区元素：

用于元素的一些分组，常用于页面布局，块分区元素,行内分区元素

元素显示方式：

​ 块级元素：**默认情况下，块级元素独占一行，即元素前后都会自动换行，比如

,

​ 行内元素：**不会换行,与其他行内元素位于同一行

​ 元素是内联元素,可用作文本的容器，无特定的含义

​ 元素定义斜体字

​ 定义着重文字

​ 用来定义带删除线的文字

​ 用来定义带下划线的文字

​ 空格折叠：**默认情况下，HTML中的多个空格，多个换行符会压缩成单个空格，即只显示一个空格

​ 实体引用：**空格：；（小于号）:；

使用元素可以将图片添加到页面

语法：

常用属性：width,height

src指的是"source",原属性的值是图像的URL地址，但是地址值分为绝对路径和相对路径

绝对路径：文件从最高级目录下开始的完整路径，无论当前路径是什么，使用绝对路径后总能找到要连接的文件

相对路径：文件的位置是相对于当前的文件位置，包括目录名或指向一个可以从当前目录出发找到的文件

href属性：链接地址URL target属性：目标的打开方式

**锚点：**文档中某行的一个记号，用于链接到文档中的某个位置

**链接锚点：**在锚点前加 # 内容

定义锚点：内容

俩者需对应使用，前后呼应

表格是由标签来定义的，通常用来组织结构化信息，是被称作单元格的矩形框，按照从左到右，从上到下的顺序排列在一起而形成的，表格的数据保存在单元格里

​ 创建表格：**

​ 创建行：**

​ 创建列：**

**表格常用的属性：**border 边框 width/height 宽/高

​ align 对齐方式

​ padding 边框与文字之间的距离，内边距

​ cellspacing：单元格之间的距离

​ 跨行属性：rowspan 合并行 colspan 合并列

**行分组：**表格看分为3个部分，分别为：表头，表主题，表尾

表单是用于显示收集信息并提交信息到服务器，表单是一个包含表单元素的区域

俩要素：form元素，表单控件

表单是从浏览器向服务器传输数据的手段

表单元素：

定义表单使用成对的标记，表示要将此元素中所涵盖的控件中的数据传入到服务器

主要属性：

​ action：表单提交URL；method：数据提交方式；enctype：表单数据进行编码的方式

**表单控件：**由许多不同类型的控件，其是一种HTML元素，是信息输入项，包含

input元素（具有不同的外观）:文本框，密码框，单选框，按钮…

其他元素：标签，文本域，下拉选

input元素

​ 文本框

​ 密码框：

​ 主要属性：value：由访问者自由输入任何文本

**Maxlength：**限制输入的字符数

**Readonly：**设置文本控件的只读

​ 单选框:

​ 复选框：

​ 属性：value：文本，当提交form时，选中单选按钮，则发送服务器

​ Name：实现分组，一组单选框或者复选框名称必须相同

​ Check：设置选中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TbR5MTui-1613216632733)(C:\Users\Melody\AppData\Roaming\Typora\typora-user-images\image-20210213192510057.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O2MVUjfi-1613216632735)(C:\Users\Melody\AppData\Roaming\Typora\typora-user-images\image-20210213192521811.png)]

提交按钮：传送表单数据给服务器

重置按钮：清空内容，并 设为最初默认状态

普通按钮：执行客户端脚本

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U5s5lfzH-1613216632740)(C:\Users\Melody\AppData\Roaming\Typora\typora-user-images\image-20210213192540715.png)]

隐藏域：表单中包含但不希望用户所见

文件选择框：选择上传的文件

其他元素：

​ 标签：表单中的文本用于给控件设置显示名称

​ 语法：文本

​ 属性：for：设置该文本所关联的控件ID，关联后点击标签等同于点击控件

​ 文本域：多行文本框

​ 语法：

​ 属性：cols:指定文本域的列数；rows：指定文本域的行数； readonly：该文本域只读

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b1qlNISs-1613216632744)(C:\Users\Melody\AppData\Roaming\Typora\typora-user-images\image-20210213192605362.png)]

下拉选

语法：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BG5bF3xx-1613216632747)(C:\Users\Melody\AppData\Roaming\Typora\typora-user-images\image-20210213192623052.png)]

CSS是层叠样式表（Cascading Style Sheets），样式定义了如何显示HTML元素，样式通常储存在样式表中，CSS是HTML的化妆师

内联样式：定义在单个HTML元素中

内部样式表 ：定义在HTML的头元素中

外部样式表：将样式定义在外部的CSS文件中（.css）,由HTML页面引用样式表文件

内联样式：定义在HTML元素的属性style里面

css语法：只需要将分号隔开的一个或多个属性作为元素的style属性值，属性值之间用冒号（:）连接，多个属性值之间用分号（;）隔开

**内部样式表：**在HTML的元素内部添加元素

**外部样式表：**样式定义在独立的CSS文件中，一个纯文本文件，后缀为.css,该文件只包含样式规则

使用方法：①**创建外部样式表文件

②引用该样式文件

CSS规则由俩个部分构成：选择器，以及一条或多条样式声明

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-snIlbh1w-1613216632749)(C:\Users\Melody\AppData\Roaming\Typora\typora-user-images\image-20210213192800256.png)]

**CSS注释：**CSS注释以 “/*” 开始, 以 “*/” 结束,

​ /*这是个注释*/

优先级：同一个元素若存在多个CSS规则，对应冲突的声明以优先级高者为准（就近原则）

层叠性：同一个元素若存在多个CSS规则，对于不冲突的声明可以叠加

继承性：父元素的CSS声明可以被子元素继承，如字体，颜色

**元素选择器：**能通过元素名来选择CSS作用的目标

**类选择器：**能够附带class属性的元素都可以使用此样式声明，将元素的class属性设置为样式类名，可以将类选择器和元素选择器结合使用，以实现对某种元素的中不同样式的细分控制 (.class_name)

**ID选择器：**以一种独立于文档元素的方式，它仅作用于id属性的值 (#id_name)

**选择器组：**选择器声明为以逗号隔开的选择器列表，将一些相同的规则作用于多个元素

**派生选择器：**用来选择子元素

分类：后代选择器：选择某元素的后代（子孙）元素

子元素选择器：选择某元素的所有子元素

**伪类选择器：**用于设置同一个元素在不同状态下的样式

常用伪类:

​ :link向未被访问的超链接添加样式

​ :visited 向已被访问的添加样式

​ :active:向未激活的元素添加样式

​ :hover:当鼠标悬停到元素上方时，添加样式

​ :focus:当元素获取焦点时，向该元素添加样式

border：用来设置元素的边框

四边设置：border：width值 style值 color值

单边设置：border-left border-right border-top border-bottom

样式单位：%：百分比 in：英寸 cm：厘米

​ mm:毫米 pt 磅（1pt=1/72 in）

​ Px像素 1em 等于当前字体尺寸

​ Overflow：当内容溢出元素边框时

​ Visible 不裁剪内容，可显示在内容框外

​ Hidden 裁剪内容，不提供滚动机制

​ Scroll 裁剪内容，提供滚动机制

​ Auto 如溢出，提供滚动

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置

Margin - 清除边框区域。Margin没有背景颜色，它是完全透明

Border - 边框周围的填充和内容。边框是受到盒子的背景颜色影响 `

Padding - 清除内容周围的区域。会受到框中填充的背景颜色影响

Content - 盒子的内容，显示文本和图像

背景图片：

background-image：设置背景图片，默认值为none，表示背景上没有放置任何图像，如需设置，则需要起始字符附带图像的url地址

默认情况下，背景图片是在水平和垂直方向上重复出现的

​ background-repeate：可控制背景图片的平铺效果

​ repeate：在水平和垂直方向重复

​ repeate-x：在水平方向重复

​ repeate-y：在垂直方向重复

​ no repeate：仅显示一次

​ background-position：用于改变背景图片在元素中的位置

font-size：value 字体大小

font-weight：normal/bold 字体加粗

color：value 文本颜色

Text-align：left/right/center 文本排列

Line-height：value 行高

Text-indent：value 首行文本缩进

border-collapse：合并相邻的边框，设置是否将表格的边框合并为一个边框

块元素：从上到下显示，可以设置宽高 如：

,,

行内元素：从左到右显示，不能设置宽高，如：,

行内块元素：从左到右显示，可以设置宽高，,

除了默认显示效果外，可以用display属性，修改元素的显示方式

具体修改方式:

​ display：none 表示不显示该元素，释放其占用的空间

​ display：block 表示将元素的显示方式设置为块

​ display：inline 表示将元素的显示方式设置为行内元素

​ display：inline-block：表示将元素的显示方式设置为行内块元素

定义元素框对于其正常位置应该出现的位置或相对于父元素另一个元素相对于浏览器窗口本身的位置

**流定位：**页面中的块级元素从上到下依次排列，每一个块级元素都会出现在新的一行，元素框之间的垂直距离，由框的垂直外边距计算得出

内联元素：在一行中从左到右，水平排列不需要换行，使用的是水平内边距，边框和外边距调整他们的间距

**浮动定位：**将元素排除在普通流之外，将浮动元素放置在包含框的左边或者右边，浮动元素依旧包含于框之外，浮动框可以向左或者向右移动，直到外边缘碰到包含框或者另一个浮动框位为止，如需要设置框浮动在包含框的左边或者右边，可以通过float属性实现具体方向的移动

任何元素都是可以移动的 float：none/left/right

clear清除浮动所带来的影响：clear：none/left/right/both

**相对定位：**元素原本所占的空间不释放，元素框会相对于原来的位置偏移某个距离，设置垂直或者水平，让元素相对于它的起点进行移动

**绝对定位：**将元素的内容从当前定位中清除，释放空间，并使用偏移量来固定元素的位置，相对于最近的祖先元素，若偏移元素没有已定位的元素，那么它的位置就是相对于body元素的位置

​ 首先设置position属性，其值为absolute，然后使用left/right/top/bottom设置具体的偏移量

**固定定位：**将元素的内容固定在页面的某个位置，元素从普通流中完全移出，不占用页面空间，当用户将页面向下滚动时，元素看不随着移动

​ 首先设置position属性，其值为fixed，然后使用left/right/bottom/top设置具体的偏移量

**堆叠顺序：**一旦修改元素的定位方式，元素可能发生堆叠，可以使用z-index来控制有元素在框中出现的堆叠数值

​ Z-index：value 数值越大，级别越高，越显示在前

List-style-type：用于控制列表中列表项标志的一个样式

无序列表：出现在各列旁边的圆点

​ 无需列表的取值：none：无标记；disc：实心圆（默认）；circle（空心圆）；square 实心方块

有序列表：可能出现数字，字母或者其他用来排列计数

​ 有序列表的取值：none：无标记；decimal：数字；

​ lower-roman：小写罗马数字 upper-roman：大写罗马数字

​ list-style-image：使用图像替换列表项，取值为url

什么是javaScript？

嵌入在HTML中在浏览器中的脚本语言，具有与java和C语言类似的语言，一种网页的编程技术，用来向HTML页面添加交互行为，直接嵌入HTML页面，由浏览器解释执行代码，不进行预编译

​ 特点：可以使用任何文本工具编译，由浏览器内置的JavaScript引擎执行代码

​ 解析执行：事先不编译，逐行执行

​ 基于对象：内置大量线程对象

**使用：**客户端的数据计算，客户端表单合法性验证，浏览器事件触发，网页特殊显示效果制作，服务器的异常数据提交

事件定义式：在时间定义时，直接写JavaScript；

嵌入式：在使用Script标签

文件调用式:代码位于单独的(.js)文件中，html页面引用js文件，在script标签中添加文件的地址（src=“”）

解释性代码，代码错误则页面中无效果，可以打开网页的"检查""错误控制台"来查看错误

**基本语法：**由Unicode字符集编写

**注释：**单行：//注释内容 多行：/*注释内容*/

**语句：**表达式，关键字，运算符，大小写敏感，建议使用分号结尾一条语句

标识符和关键字：

标识符:不以数字开头的字母，数字，下划线和$组成

关键字：查看js手册

**变量：**使用关键字var声明变量，变量初始化使用"=="来赋值

没有初始化的变量自动取值为：undefined

变量无类型，统一使用var声明，变量所引用的数据有类型

**特殊类型：**null： 空 undefined：未定义

**内置对象：**Number：数字 String：字符串 boolean：俩个值 true/false Array数组 function：函数

**外部对象：**window：浏览器对象 document：文档对象

**自定义对象：**Object：自定义对象

String类型:

​ 由Unicode字符，数字，标点符号组成的字符序列，直接量需要一对单/双引号括起

Number类型：

​ 在JavaScript中不区分整型数值和浮点型数值，整型直接量：默认的整数直接量为十进制

Boolean类型：

​ 仅有俩个值 true/false

数据类型转换：

​ ①数据类型之间隐式转换

​ ②转换函数：

**·toString：**所有数据类型均可以转换为String类型

·parseInt（）：强制转换为整数，如不能转换则出现NaN;

·parseFloat（）：强制转换为浮点数，不能转换会出现NaN;

·**typeof：**查看当前类型，返回String/Number/boolean/object/Function/undefined

·**isNaN（）：**判断被检测表达式转换后是否不是一个数，若不是数，则为true；否则为fasle

特殊数据类型：

​ Null：程序中无值/无对象，可以给一个变量赋值为null来清除内容

​ Undefined：声明变量，单位赋值/对象属性不存在

算数运算：+，-，*，/，%，++（自增），–（自减）

关系运算：>，>=，