前端基础-不断更新

html

html基本

 html指代超文本标记语言
 html中使用标签来定义各种效果,浏览器会对标签进行解析和补全,若不能解析,则标签无效.
 浏览器读取html文档 从上到下 从左到右解析 后加载的样式会覆盖先加载的样式
 html中使用空格/tab键/回车/换行都会体现成一个空格
 标签分为单标签和双标签
 <标签名[ / ]> : 单标签,具有特殊效果,会自动结束
 <标签名 [属性] = [属性值]> : 双标签,一般成对出现,用来包裹其他标签或内容,使用属性定义标签包裹内容的具体效果,或标记标签自身

&XXX; : 可以使用此类格式的转义符避免与特殊符号冲突

      小空格
      中空格
      大空格
 <      小于
 >      大于
 ©    公司符号
 "    引号
 &     &符号

地址

 http协议路径规则
 http://   127.0.0.1  :   5500    /day1_html/3HTML.html  ? key=value & key = value
 协议        ip地址        端口      资源地址                 参数
 http协议 默认端口80 
 https协议 默认默认端口443 
 采用默认端口可省略不写端口
 地址格式: 
 1.相对路径  
 ./当前目录 可以忽略  
 ../上级目录 不能忽略
 2.相对根路径
 从根目录路径开始
 3.绝对路径
 从协议开始拼接路径 可以访问外部网站

常用标签

排版标签

 块标签
 
换行  
分割线  

 标题标签 文本加粗且占满一行 共h1-h6六种  

 

 段落标签 文本占满一行 上下存在间距  

 
 自定义段落标签 文本占满以后 上下无间距  
 ​  行内文字标签  加粗文字  下划线文字  斜体文字  用于标记文字  ​  列表标签  
     无序列表标签  
  • 包裹一行列表
  •  
 
      有序列表标签 默认1...n 属性type值声明为A即A...Z 声明为i即I-VI  
  1. 包裹一行列表
  2.  
 
  自定义列表标签  
标题
 
内容
 

a 超链接标签

 点击a标签的内容(文本 图片...)可跳转进href属性赋值路径的页面
 一些特殊的地址
 #回到网页顶部
 ###展示为链接标签,但无跳转效果
 #id 跳转到id对应元素的位置

img 图片标签

  展示src属性值路径的图片

table 表格标签

 
 border属性值为表格标签的边框粗细(1-10)
 cellspacing属性值为单元格之间的间距
     
     表头部 用于分割表格区域拿数据
     表主体 用于分割表格区域拿数据
     表尾部 用于分割表格区域拿数据
   
     表格的一行
     
 align属性为设置对齐方向  right(默认)/left/center
 rowspan属性为设置跨行的数量 默认1
 olspan属性为设置跨列的数量 使用时必须在一个表格区域内 默认1
 
表名 最上无框居中
列头 加粗居中
行一个单元格

form 表单标签

 
  name属性设置提交表单的key值   action属性设置提交表单数据的路径   method属性设置提交格式 get/post   get传递的参数出现在url中 长度有限 可以存进地址和书签 速度快 自动将数据转为url编码发送   post传递的参数出现在请求体中 长度无限 可以发送二进制或url数据 速度慢     onsubmit可以设置是否提交表单 true提交     entcype属性设置提交编码格式   Content-Type:application/x-www-form-urlencoded 字节流   Content-Type:multipart/form-data 字符流  

input功能框标签


声明一个框 其中type属性设置框的功能

输入功能框type为: text文本输入(type标签默认)/password密码输入 
placeholder属性设置输入框提示信息 value属性输入框默认值 maxlength属性输入框最大长度
readonly属性设置框的只读 disabled=true属性禁用编辑框 且提交不传递值

选择框type为: radio单选框/cheked多选框
name属性设置选择按钮的分组 checked属性(true)设置默认选中 value设置选项提交的值

按钮框type为: submit提交按钮/reset重置按钮/button自定义按钮
value属性设置按钮上的文本 disabled属性设置按钮禁用

select下拉选择标签

textarea多行文本标签


name属性表示提交时的key
row属性声明默认的行数
cols属性声明默认的列数

for属性用于绑定id,id为点击文本时访问框的id

css

css引入方式

在style标签中编写css代码
在link标签引入css文件
在元素上使用style通用属性

css基本语法

选择器{
样式:值
多个样式之间;隔开
}

css属性

style属性中声明css样式代码

class属性用于标记元素 便于使用.class选择器筛选元素 class属性可以声明多个值并使用空格隔开

css选择器

基本选择器
标签  样式将在标签区域内生效 优先级1
.class  样式将在对应class值的元素上生效 优先级10
#id  样式在对应id值的元素上生效 优先级100
选择器:hover  鼠标悬停在选择器内时触发样式
选择器:active 鼠标点击选择器内时触发样式
* 选择页面所有元素,使样式对所有元素生效 优先级非常低

高级选择器
选择器1,选择器2  同时在多个声明的选择器上生效,多个选择器,隔开,
选择器.class选择器  在同时满具备多个选择器的元素上生效
选择器1 选择器2  在选择器1内部的选择器2中所有元素生效
选择器1>选择器2  在选择器1内部的选择器2中仅子元素生效
[标签] [属性=值]  满足对应标签中对应属性和值的元素生效

style样式

文字类

color 颜色 三原色声明方式rgb(0~255,0~255,0~255)  16进制声明方式#XXXXXX 两个字符相同时可以简写为一个
font-size 大小 单位px 
font-famliy 字体 黑体/宋体...
font-wdight 粗细 
text-decoration 线修饰 none(没有线) 删除线 下划线
text-align x对齐方式 左 中 右
vertical-align y对齐方式 上中下

背景类

background-color 背景颜色 规则同文字颜色规则
background-image : url(); 设置背景图片路径声明在url函数中 
background-repeat 背景图片重复方式  no-repeat 不重复铺图片

边框类

width 宽度 px(像素大小) %(相对于父元素的百分比) vw(相对于整个屏幕的百分比)
height 高度 px %(页面默认父元素为0,必须声明父元素高度)  vh(相对于整个屏幕的百分比)
border 边框规格  声明粗细 线条 颜色 默认为0px solid(边框线条为实线) black(颜色为黑色)

其他类

line-height 行高
list-style 列表的标题自定义样式
cursor : pointer; 光标变成手 提示用户此元素可以点击

控制元素类

opacity 0~1之间设置元素透明度
display : 元素类别
​         none 隐藏元素 且脱离文档流
​         block 设置为块元素 从上到下排列 占满一行 宽高有效
​         inline 设置为行内元素 从左到右排列 根据内容大小扩展 宽高无效
​         inline-block 设置为行内块元素(类似按钮)  从左到右排列 宽高有效

位移类

position : 定位方式
​          relative 相对定位 不脱离文档流 以元素之前所在的位置偏移
​          absolute 绝对定位 脱离文档流 以屏幕位置进行动态偏移
​          fixed    固定定位  脱离文档流 以页面位置进行偏移
​          static   默认值  不偏移 从上到下排列

必须使用在改变定位方式之后的偏移
top 正数向下偏移 负数向上偏移
left 正数向右偏移 负数向左偏移
z-index  控制层叠显示的先后顺序 默认后加载的优先显示

盒子模型

页面中元素排布时 每个元素都有一个盒子模型
根据盒子模型的相关属性 决定元素的大小 间距
盒子模型有  宽 高 边框 等共有属性 

盒子模型的属性
padding 内部填充  上/右/下/左 上下/左右  上右下左  三种方法设置 px
margin 外边距 上/右/下/左 上下/左右  上右下左  三种方法设置 px  左右可以设置为auto(块在父元素范围自动居中)
overflow : hidden 排列超过边界隐藏  scroll 超过边界出现滚动轴
float : right/left/center 浮动布局 使被float修饰的元素优先按规定的排序方式排列,其次往下排列
display : flex 让子元素使用弹性布局
justify-content:  子元素的优先布局方式 必须使用在设置弹性布局后
​                center子元素居中排列
​                space-between 子元素两端对齐
​                space-around  子元素等间隔对齐

正则

正则使用方式为  let temp =  /正则表达式/ 
使用正则验证时 temp.test(待验证字符串) 来验证是否符合正则

正则表达式的元素构成
^:用来表示正则模式的开头,可以省略,在使用字符串相关正则模式的方法时,必须省略
( ):可以省略,表示一个域段,可以使用  ,\n就代表第n个域段
[ ] : 可以省略,维护匹配的字符数据,里面填写正则的对应匹配数据 [a]匹配字符a,[a-c]匹配a-c之间的字符,多个条件直接继续写即可
{ } : 可以省略,对[ ] 中的匹配数据进行匹配次数的限制{1}匹配1次,{1,5}匹配1-5次,{5,}至少匹配5次
\ : 转义符
 . :表示任何单个字符
 +:匹配一次以上,[ a ]+,匹配字符a一次以上
\d:等价于[0-9]
\w:等价于[A-Za-z0-9 _ ]
$:用于结尾,可以省略不写,在使用字符串相关正则模式的方法时,必须省略

javascrip

引入方式

使用script标签引入 尽量在body后引入 避免加载script时未找到body中的数据
使用script标签的src属性引入js文件 此时标签体无效
直接在元素标签中使用script属性引入
在a标签中设置href属性为javascript:viod(0)时 等价于###

变量

命名规则同java 小写驼峰多单词

定义变量
var 全局变量
let 局部变量
const 常量

数据类型
number 数字类型(NaN属于数字中的特殊类型 代表不是数字)
string 字符串类型(在页面取值时都是字符串)('' "" ``可以在``中加${将变量直接插入字符串})
bollean 布尔类型(!1-> false  !0-> true)
undefined 未被定义的变量(声明未赋值时)
function 函数类型(函数名或函数引用)
object 其他类型(数组 对象 等)

运算符

与java运算符基本相同 不同如下

== 内置类型转换进行相对数据比较(0 false 1 true)(数字转字符串比较)

=== 无内置类型转换的绝对比较

控制语句

if(){} ... else if(){} ... else{}
switch(){ ... case: ... break ... default:}
while(){}
do{}while()
for( ; ; ){}
for(let x in arr){x为索引}
for(let x of arr){x为对应索引的值}

自定义函数

let [函数名1] = function [函数名2]([参数列表]){
函数名不能与变量名重复 非匿名函数的函数名1和2必须声明1个
参数不需指定数据类型 多个参数之间","隔开 
在标签属性值中传递实参时 双引套单引 不能使用斜着的''
形参数量与实参数量可以不对应 实参多时截断 形参多时undefined
函数中的变量未声明变量类型时 作用域是全局
[return] 不需指定返回值数据类型 直接返回即可
}

匿名函数可以简化为箭头函数
(参数列表)=>{
函数逻辑体
}
与匿名函数的this有所区别 箭头函数的this始终指向引用 匿名函数的this会在部分情况下找不到引用

事件

在html元素中通过给事件属性绑定函数名 来通过事件触发对应函数
事件名 = "函数名()" 格式来绑定函数

常见事件
onclick 鼠标单击
onmouseover/onmouseout 鼠标移入/移出
onfocus/onblur 获得焦点/失去焦点
onload 页面加载完毕
onkeyup/onkeydown 键盘弹起/键盘按下
onsubmit 是否提交表单 true 提交
chang 当用户更改 /