HTML、CSS、JS知识点汇总

关鸠鸠鸠

已于 2022-10-21 11:00:44 修改

阅读量174

点赞数

分类专栏：前端学习文章标签： html 前端 css

于 2022-09-26 17:01:50 首次发布

本文链接：https://blog.csdn.net/rain_lili/article/details/126826124

版权

前端学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

基础知识

1、www :万维网（英语：World Wide Web）

2、同步异步

◼同步：顺序处理，等待在服务器返回结果前处于阻塞状态,如表单的POST、GET
◼异步：并行处理，在服务器没返回结果之前，还可以执行其他操作，如AJAX

3、HTML：超文本标记语言（HyperText Markup Language）

4、CSS：（Cascading Style Sheets）层叠样式表

5、JS：行为

一、HTML

1、快捷键创建HTML【！+tab】

2、HTML界面讲解

<!-- !DOCTYPE指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令 -->
<!DOCTYPE html>
<!-- <html lang="en">lang表示语言,en表示英文,可以去掉 -->
<html>

<head>
  <!-- charset="UTF-8"告知浏览器此页面属于什么字符编码格式 -->
  <!--gb2312：代表国家标准第2312条，其中是不包含繁体的 
      gbk：国家标准扩展版（增加了繁体，包含所有亚洲字符集）
      unicode：万国码
      utf-8：unicode的升级版 -->
  <meta charset="UTF-8">
  <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge">浏览器渲染模式 -->
  <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0">
  viewport标记，用于指定用户是否可以缩放Web页面，并对相关的选项进行设定。
  width 和height 指令分别指定视区的逻辑宽度和高度。它们的值可以是以像素为单位的数字，
  也可以是一个特殊的标记符号。
  device-width即表示，视区宽度应为设备的屏幕宽度。
  device-height即表示设备的屏幕高度。
  initial-scale用于设置Web页面的初始缩放比例。
  默认的初始缩放比例值因智能手机浏览器的不同而有所差异，通常情况下，设备会在浏览器中呈现出整个Web页面。
  设为1.0则显示未经缩放的Web页面。
  maximum-scale和minimum-scale用于设置用户对于Web页面缩放比例的限制。
  值的范围为0.25~10.0之间user-scalable指定用户是否可以缩放视区，即缩放Web页面的视图。
  值为yes时允许用户进行缩放，值为no时不允许缩放 -->

  <title>Document</title>
  <!-- 标题 -->
</head>

<body>

</body>

</html>

3、HTML标签

太多了，不建议记，了解一些常用的就好，
可以保存一个速查网站，
菜鸟教程HTML标签速查

一般两种写法
<button/>
<button><button/>

4、class 和 id

class 属性可以多用 class=" " （引号里面可以填入多个class属性）
id 属性只能单独设置 id=" "（只能填写一个，多个无效）

5、区块元素

大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
实例: h1,p ,ul, table,div
内联元素在显示时通常不会以新行开始。
实例: b, td, a, img,span

5、HTML脚本

就是<script>
如果浏览器不支持或者禁用脚本，可用<noscript>

6、HTML5的特性

（1）新增header等标签，新的特殊内容元素，比如 article、footer、header、nav、section
在这里插入图片描述
（2）用于媒介回放的 video 和 audio 元素
（3）用于绘画的 canvas 元素

对本地离线存储的更好的支持

新的表单控件，比如 calendar、date、time、email、url、search

7、POST和GET异同

POST和GET都是HTTP请求的基本方法
GET的表单数据在页面地址栏中是可见的，而POST是不可见的
GET 编码格式只能用ASCII码，POST没有限制
GET一般有长度限制2048

二、HTTP

URL：统一资源定位符
HTTP Hypertext Transfer Protocol（超文本传输协议）

三、CSS

CSS样式引入

内联样式- 在HTML元素中使用"style" 属性

<p style="color:blue;margin-left:20px;">这是一个段落。</p>

内部样式表 -在HTML文档头部 head 区域使用style 元素来包含CSS

<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

外部引用 - 使用外部 CSS 文件
外部引用更好

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

其他速记

注意css中的1px并不等于设备的1px

四、JavaScript

1、DOM 文档对象模型

2、js变量

var let const

数据类型

（1）Number :不区分整数和浮点数，【js除法会得到小数】
（2）String字符串
（3）布尔值
（4）数组[]
（5）对象键值对{}
（6）NaN:无法计算结果
（7）Infinity :无限大，超过了Number的最大值
（8）null: 空
（9）undefined:未定义，变量已定义未赋值

数据类型转换

（1）转为字符串

var x=1
//1、
x.toString()
//2、强制转型
String(x)
//3、与字符串拼接自动转型
var y=x+'学号'

（2）转为数字型

1、parseInt("556")
2、parseFloat("12.3")
3、Number("112")
4、隐式转换：'10'-2

（3）数组转为对象？

（4）对象转为数组？

数组常用操作

（1）indexOf 获取元素在数组中的位置，若不存在返回-1;
（2）slice 数组切片返回新数组
（3）push 数组末尾添加元素
（4）pop 删除数组最后一个元素
（5）arr.unshift(‘a’, ‘b’) 把[‘a’,‘b’]放在arr数组头部
（6）arr.shift() 删除头部第一个元素
（7）arr.splice(1, 3, ‘xxx’) 删除[1,3]元素，并在1中间插入’xxx’
（8）concat合并数组