标签
| 标签名 | 作用 | 位置 |
|---|---|---|
| html | 表示是个html网页 | 文件内最外层 |
| head | html信息设置 | html内 |
| title | 标题 | head内 |
| style | 用于设置样式 | 一般在head内 |
| script | 用于设置脚本 | head或body内 |
| body | 显示网页的主题 | html内 |
| h1,h2,...,h6 | 用于显示主题字体 | body内 |
| p | 用于将内部字体显示为 段落结构 | body内 |
| br | 用于换行，html无法直接使用空格与换行 | body内 |
| b | 用于将内部字体设置为 粗体 | body内 |
| strong | 用于 强调 内容，效果与 b标签相同 | body内 |
| i | 用于将内部字体设置为 斜体 | body内 |
| em | 用于将内部字体设置为 倾斜体，效果与i标签类似 | body内 |
| s | 用于将内部字体设置为 删除线 | body内 |
| del | 用于 表示删除 内容，效果与 s标签相同 | body内 |
| u | 用于将内部字体设置为 下划线 | body内 |
| ins | 用于 强调 内容，效果与 u标签相同 | body内 |
| sup | 上标 | body内 |
| sub | 下标 | body内 |
| ul | 无序列表 type属性可以使用项前的显示效果 | body内 |
| ol | 有序列表 type属性可以使用项前的显示效果 | body内 |
| li | ul 与 ol 的列表项 | body内 |
| dt | 自定义列表 | body内 |
| dl | dt的列表项 | body内 |
| img | 用于显示图片 src 图片路径 title 鼠标悬停标签上时的文字 alt图片没显示出来时代替的文字 | body内 |
| a | 超链接 href为跳转地址 | body内 |
| table | 表示表格 border为边界 | body内 |
| tr | 表格中的一行 | table内 |
| th | 表格中的表头 | tr内 |
| td | 表格中的单元格 | tr内 |
| form | 表示表单 用于处理数据传输 method表示传输方法 action表示传输地址 | body内 |
| input | 表单元素 通过type表示不同的控件 | form内 |
| select | 表单元素 下拉框 | form内 |
| option | 下拉框元素 | select内 |
| textarea | 表单元素 可以输入大文本 | form内 |
| iframe | 表示框架，可以在一个网页内显示另一个网页 | body内 |
CSS
CSS：Cascading Style Sheets，层叠样式表
用法：在style标签中书写，或者在css文件中书写，通过link标签进行引用。
语法：
选择器{
属性1:属性值;
属性2:属性值;
属性3:属性值;
.....
}特性
继承
祖先元素中设置的部分样式子元素可以进行继承，如color font line
优先级
对于不同选择器选择同一元素时将会根据权重判断，权重越大优先级越大。
| 选择器 | 权重 |
|---|---|
| !important | 无限大 |
| 行内样式style | (1,0,0,0) |
| id选择器 | (0,1,0,0) |
| 类选择器 | (0,0,1,0) |
| 标签选择器 | (0,0,0,1) |
| 继承 | (0,0,0,0) |
不同的权重同位相加，之后比较 高位权重值大小，若高位相同则比较地位的。
若权重相同，参考下条
层叠
选择器优先级相同时，靠下面的选择器中设置的样式被优先使用。
选择器
选择器间可以进行组合
盒子模型
css中定义html的所有元素都可以抽象为一个盒子，如图：
margin: 表示模型边缘与其他模型的间距，可能会发生外边距合并的情况 位于盒子外部
border: 表示模型边缘
padding表示盒子内部元素到模型边缘的间距 位于盒子内部
context:表示盒子内部的主要内容
文档流
css中定义的元素在文档中的显示和排序方式。元素显示的基础就是文档流。根据不同元素在文档内的显示方式将元素分为：
行内元素（inline）：表现为字符串，不同行内元素可以共同在一行中，可以放入行内元素块元素中
块元素（inline）：可以调节宽高，无法放入行元素内部，且单独占据一行
行内块元素（inline）：可以调节宽高，表现类似字符块，并且可以放在行元素内部
浮动
css中元素脱离文档流的方式之一，可以使块元素拥有行内块元素的特点。通过float属性设置
| 属性值 | 说明 |
|---|---|
| none | 无浮动 |
| left | 左浮动，浮动元素向左靠，最先实现的最左 |
| right | 右浮动，浮动元素向右靠，最先实现的最右 |
由于脱离文档流，所以将会出现一些问题
高度坍塌：当父元素没有设定高度，且内部元素设置浮动时，将会时父元素的内部高度为0，为了。
元素覆盖：一个元素后的元素若设定左浮动将会覆盖前面元素。
解决这些问题需要有元素清除浮动影响。
清除浮动影响
通过clear属性将可以其他元素浮动所带来的影响。
| 属性值 | 说明 |
|---|---|
| both | 清除左右浮动的元素中对自己影响最大的影响 |
| left | 清除左浮动的元素对自己的影响 |
| right | 清除右浮动的元素对自己的影响 |
通过为元素内最后一个元素的clear设置为both清除浮动影响以解决高度坍塌问题。
通过为前元素的设置clear清除后一个浮动影响以解决元素覆盖问题。
定位
css中元素脱离文档流的方式之一，可以将元素定位到设计者自定的相对位置。
通过postion属性设置定位属性，top bottom left right 属性设置相对位置。
postion属性值如下：
| 定位属性值 | 说明 |
|---|---|
| static | 默认，文档流 |
| fixed | 固定定位，相对于浏览器窗口作为参考点 |
| relative | 相对定位，相对于自己未定位时的位置作为参考点 |
| absolute | 绝对定位，相对于已经定位的父元素作为参考点，当父元素未定位时选择html标签 |
其他定位属性：
| 定位属性 | 说明 |
|---|---|
| top | 相对于参考点向下移动 |
| right | 相对于参考点向左移动 |
| bottom | 相对于参考点向上移动 |
| left | 相对于参考点向右移动 |
javaScript
一类轻量级的脚本语言，由于其不需要编译，体量小，运行快的特点，十分适配前端网页。所以成为了主流的前端脚本语言。
导入JavaScript
1.通过script标签内直接编写js脚本，目前主流浏览器默认将script标签内的脚本语言设置为js语言。
2.通过外部编写 .js文件，再通过script标签的src属性进行引用，不过值得注意的是，引用的script标签内部将不能继续编写js脚本。
基本语法
代码结构
js脚本语句可以一行作为一个语句的结束，但可能会存在编译器判断错误的问题，也可以用" ; " 分号作为语句的结束。推荐使用后者
语句1
语句2
//或者 推荐使用后者
语句3;
语句4;变量声明
let 变量名
var 变量名
js是弱类型语言，所以变量能存放任何类型的数据。js一般情况下可以省略这步，意味着变量属于window对象.，但所有变量使用前一定要初始化，否则将会使用默认值。
常量声明
const 常量名
常量一旦初始化将不能再次更改，常量名一般需要大写
函数的声明
//格式1
function 函数名(参数){
执行语句。。
}
//格式2 匿名函数
变量 = function (参数){
执行语句。。
}
//格式3 箭头函数
变量名= (参数)=>{
执行语句。。
}数据类型
| 英文名 | 中文名 |
|---|---|
| Number | 数值 |
| BigInt | 大整型 |
| String | 字符串 |
| Boolean | 布尔型 |
| Null | 空值 |
| Undefined | 未定义 |
| Symbol | 符号 |
| Object | 对象 |
运算符号
| 算术运算符 | 说明 | 例子 |
|---|---|---|
| + | 加 | 1+1//值为2 |
| - | 减 | 1-1//值为0 |
| * | 乘 | 2*2//值为4 |
| / | 除法 | 2/2//值为1 |
| % | 取余数 | 3%2//值为1 |
| 关系运算符 | 说明 | 例子 |
|---|---|---|
| > | 大于，值1大于值2 | 1>2//返回false |
| >= | 大于等于，值1大于等于值2 | 1>=2//返回false |
| >== | 大于全等于，值1大于等于值2，且类型相同 | 1>=="2"//返回false |
| < | 小于，值1小于值2 | 1<2//返回true |
| <= | 小于等于，值1大于等于值2 | 1<=2//返回true |
| <== | 小于全等于，值1小于于等于值2，且类型相同 | 1<=="2"//返回false |
| == | 等于，值1等于值2 | 1==2//返回false |
| === | 全等于，值1等于值2，且类型相同 | 1==="1"//返回false |
| != | 不等于，值1不等于值2 | 1!="1"//返回false |
| !== | 全不等于，值1等于值2，且类型不同 | 1!=="1"//返回false |
| 逻辑运算符 | 说明 | 例子 |
|---|---|---|
| &&（&） | 与，有假出假 | true&&false//返回false |
| ||（|） | 或，有真出真 | true||false//返回true |
| ! | 非，真为假，假为真 | !true//返回false |
| 赋值运算符 | 说明 | 例子 |
|---|---|---|
| = | 赋值，将右侧的数值赋给左边 | a=b//b的值赋给a |
| 字符串连接符 | 说明 | 例子 |
|---|---|---|
| + | 连接两值为字符串，当两边有一个值为字符串时，将识别为字符串连接符 | 'a'+'b'//''ab' |
| 其他运算符 | 说明 | 例子 |
|---|---|---|
| += | 加等，左侧值加上右侧值后赋给左侧 | a+=b//a的值为a+b |
| -= | 减等，左侧值减去右侧值后赋给左侧 | a-=b//a的值为a-b |
| *= | 减等，左侧值乘上右侧值后赋给左侧 | a*=b//a的值为a*b |
| /= | 减等，左侧值除以右侧值后赋给左侧 | a/=b//a的值为a/b |
| ++ | 自加，左侧值加上1赋给左侧 | a++//a的值为a+1 |
| -- | 自减，左侧值减去1后赋给左侧 | a--//a的值为a-1 |
循环语句
| 循环结构 | 说明 | 例子 |
|---|---|---|
| while(条件){ 条件改变语句 } | while循环，当条件成立时，进行循环，滞后每次进行循环前进行一次判断 | i=10; while(i>1){ i--; } |
| do{ 条件改变语句 }while(条件); | dowhile循环，先进行一次循环，后进行判断是否循环 | i=10; do{ i--; }while(i>1); |
| for(初始变量:条件:条件改变语句) | for循环，可以自定一个属于循环的变量 | for(et i=1;i<10;i++){} |
| for( 下标 in 数组) | 循环遍历数组，根据数组长度决定循环次数，并返回下标 | for(let i in arr){ } |
判断语句
| 判断结构 | 说明 | 例子 |
|---|---|---|
| if()..else if()..else | if判断语句，从上到下判断if语句，当第一个判断为否时，进行下一个判断，当判断成功时执行判断成功后的语句，当所有if都失败时，执行else的语句 | let a=3; if(a<1){ }else if(a<2){ }else{ } |
| switch(){ case 结果1: 。 。 default: } | switch判断语句，根据结果匹配case后的结果，当匹配上时就从匹配的case后开始执行，通过break可以退出switch语句 | a=3 switch(){ case 1: break; case 2: break; case 3://从这开始执行 break; } |
对象的声明
声明格式如下：
//格式
obj1={
属性:属性值,
方法名:方法
。。。。
}
//例子
Object1={
name:'aaa',
age:18,
howOld:function(){
this.age;
}
}DOM
DOM是文档对象模型(Document Object Module)，js中将网页文档的所有节点或属性转化为对应的j、s可以操作对象，方便脚本设计者对网页进行控制。
DOM对象有以下方法和属性：
| 方法 | 说明 |
|---|---|
| document.getElementById | 通过id获取元素 |
| document.getElementsByTagName | 通过标签名获取元素 |
| document.getElementsByClassName | 通过类名获取元素 |
| document.QuerySeleter | 通过控制器获取匹配的第一个元素 |
| appendChild | 在元素内添加子元素 |
| removeChildren | 删除子元素 |
| addEventListener | 添加事件监听 |
| removeEventListener | 去除时间监听 |
| 。。。。 | 。。。。 |
| 属性 | 说明 |
|---|---|
| innerHTML | 全部信息 |
| on事件名 | 添加事件监听 |
| style | DOM对象内进行设置样式的类 |
| 。。 | 。。。。 |
BOM
BOM是浏览器对象模型(Browser Object Module)，浏览器的窗口，跳转，历史地址等都设计为了对象，方便js进行浏览器设置
| 方法 | 说明 |
|---|---|
| window.setTimeout | 设置一次性定时器，返回定时器的id |
| window.settInterval | 设置定时循环执行的定时器，返回定时器id |
| location.href | 设置页面跳转 |
JQuery
js的一个库，这个库可以让我们更方便地使用js对界面进行控制。由于是外部库，所以我们需要通过script的src属性进行引用。
语法
//创建JQuery对象
$('选择器')
//例子
$('.p')//将p类元素包装为JQuery对象JQuery将DOM对象的方法进行了简化和包装。
| 方法 | 说明 |
|---|---|
| text | 获取或设置元素内文本 |
| html | 获取或设置元素内所有内容 |
| val | 获取或设置元素内的value属性的值 |
| each | 遍历JQuery对象内包装的DOM对象 |
| on | 设置事件监听 |
| 事件名 | 设置事件监听 |
| off | 清除事件监听 |
| append | 添加元素到元素内末尾 |
| parent | 返回父元素的JQuery对象 |
| eq | 获取JQuery对象内对应下标的DOM对象并包装成JQuery对象 |
| 。。。。 | 。。。 |
需要注意的是，JQuery对象内部存放的元素是以DOM对象的形式存放，存放结构类似数组，所以我们也可以数组获取内容一样获取内部的元素。
$('.class1')[1];//获取class1类元素中第二个被选择元素的DOM对象
3316
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
