Web前端笔记1.0【Html详解，CSS详解】【Js待完善】

Sesessep2024-04-26 10:53

Web前端

html5

html5是构建web前端内容的一种语言描述方式

标签

标签分类

单标签：<input type = ''text">

双标签语法规范：<标签名> <标签名> 内容 </标签名></标签名> (可相互嵌套）

常用标签

标题标签：
------ 逐级减少，单独换行

换行标签：在需要换行文本后添加

水平线标签：在需要添加水平线的文本后添加

段落标签：

文本格式化

加粗标签：

倾斜标签：

下划线标签：

上标签：

下标签：

删除线标签：

原样输出：

复制代码
图像标签
html 复制代码 
<img src="../(返回文件上一级) ">

src中书写的是图片的来源路径：绝对路径，相对路径，网络路径

视频标签
html 复制代码 
<video src=""> </video>

在标签中加入视频属性：

controls（播放键）

loop（循环播放）

autoplay muted（自动播放+静音）

音频标签
html 复制代码 
<audio src=""> </audio>

在标签中加入音频属性：

controls（播放键）

loop（循环播放）

autoplay muted（自动播放+静音）

超链接标签
html 复制代码 
<a href="...">点击进入新的页面</a>

target = "_blank" (在新的页面打开超链接）

锚链接标签
html 复制代码 
<a href="#id"> </a>

网页内跳转，将要跳转的内容添加id，锚链接通过寻找id跳转到相应内容

表格标签
html 复制代码 
		<table width="400px"  border="2" （边框）cellspacing="0"（间距）>
			<caption>2024年下学期课表</caption>
			<tr align="center">（第一行）
				<td rowspan="2">（跨行）语文</td>
				<td>数学</td>
				<td>英语</td>
			</tr>
			<tr align="center">（第二行）
				
				<td>数学</td>
				<td>英语</td>
			</tr>
			<tr align="center">（第三行）
				<td colspan="3">（跨列）语文</td>
			</tr>
			
		</table>
列表标签

有序列表：

html 复制代码 
<ol type="">

	<li>苹果</li>

	<li>香蕉</li>

	<li>雪梨</li>

</ol>

无序列表：

html 复制代码 
<ul type="">

	<li>苹果</li>

	<li>香蕉</li>

	<li>雪梨</li>

</ul>

去除列表默认样式：

html 复制代码 
<style>
    
  li{
    list-style: none;
    list-style-type:none;
  }
    
</style>

属性

定制标签行为，每一个标签存在自身的属性，互不相通

格式：<标签名 属性名="属性值">

当属性名=属性值时可以只写属性值（disabled =="disabled" == disabled =""）

全局属性

全局属性是可以应用于HTML元素的通用属性，它们不依赖于特定的元素类型，可以在任何元素上使用

\1. class：用于为元素指定一个或多个类名，可以用于选择器和样式表中的样式定义。

\2. id：为元素指定唯一的标识符，可以用于JavaScript中的DOM操作和样式表中的样式定义。

\3. style：用于为元素指定内联样式，可以直接在元素的属性中定义CSS样式。

\4. title：用于为元素提供额外的提示信息，当用户将鼠标悬停在元素上时会显示。

\5. lang：用于指定元素内容的语言，可以帮助屏幕阅读器和搜索引擎理解页面的语义。

\6. tabindex：用于指定元素的tab键顺序，可以通过tab键在不同元素之间进行导航。

\7. accesskey：用于为元素指定一个快捷键，可以通过组合键快速访问元素。

\8. contenteditable：用于指定元素是否可编辑，可以让用户直接在网页上进行编辑操作。

\9. hidden：用于指定元素是否隐藏，隐藏的元素不会在页面中显示。

\10. draggable：用于指定元素是否可拖动，可以通过拖动操作改变元素的位置。

\11. spellcheck：用于指定元素是否启用拼写检查功能，可以帮助用户检查输入的拼写错误。

\12. translate：用于指定元素是否应该被翻译，可以帮助多语言网站进行翻译处理。

\13. dir：用于指定元素内容的文本方向，可以是从左到右（ltr）或从右到左（rtl）。

\14. draggable：用于指定元素是否可拖动，可以通过拖动操作改变元素的位置。

\15. role：用于指定元素的角色，可以帮助屏幕阅读器理解元素的用途。

骨架

shift + !

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

表单

进行数据交互的一种方式 ------ 登录，注册，搜索栏

所以表单都是在里面

  • action属性表示表单要提交到的后台程序的网址
  • method属性表示表单提交的方式，有get或post
html 复制代码 
<form action="..." method="get/post">
单行文本框（输入框）
html 复制代码 
<input type="text">

<input type="text" placeholder="请输入4-6位汉字">

<input type="text" readonly>
  • placeholder属性表示提示文本，将以浅色文字写在文本框中
  • readonly属性表示只读
密码框
html 复制代码 
<input type="password">

<input type="password" required>
单选框
html 复制代码 
<input type="radio">
	<input type="radio" name=" " value=" ">

	<input type="radio" name=" " value=" " checked>
  • name属性表明选项为一组
  • 单选按钮要有value属性值，向服务器提交的就是value值
  • 单选按钮如果加上了checked属性，表示默认被选中
多选框
html 复制代码 
<input type="checkbox" name=" "  value=" "> 
<input type="checkbox" name=" "  value=" " checked> 
<input type="checkbox" name=" "  value=" ">
  • name属性表明选项为一组
  • 单选按钮要有value属性值，向服务器提交的就是value值
  • 单选按钮如果加上了checked属性，表示默认被选中
下拉框
html 复制代码 
<select>
    <option value="alipay">支付宝</option>
    <option value="wx">微信</option>
    <option value="bank">网银</option>
</select>

<select>标签表示下拉菜单，<option>是它内部的选项

文本域
html 复制代码 
<textarea name="留言" cols="30" rows="10" maxlength="200" placeholder="请写下你的留言"></textarea>
  • rows和cols属性，用于定义多行文本框的行数和列数
按钮
html 复制代码 
<button>按钮</button>
<input type="submit">
<input type="reset">
type属性值 描述
button 普通按钮，可以简写为<button></button>
submit 提交按钮
reset 重置按钮
label
html 复制代码 
<label><input type="radio" name="sex" checked>男</label>

<input type="checkbox" name="hobby" id="火龙果"> <label for="火龙果">火龙果</label>

label标签用来将文字和单选按钮进行绑定，用户单击文字的时候也视为点击了单选按钮

CSS3(style)

CSS：Cascading Style Sheet 层叠样式表；是一组样式设置的规则，用于控制页面的外观样式

作用：页面外观美化；布局和定位

基本用法

html 复制代码 
<head>
	<style>
		选择器{
			属性名：属性值;
			属性名：属性值;
		}
	</style>
</head>
  • 选择器：要修饰的对象（东西）
  • 属性名：修饰对象的哪一个属性（样式）
  • 属性值：样式的取值

CSS应用方式

内部样式

也称为内嵌样式，在页面头部通过style定义；对当前页面中所有符合样式选择器的标签都起作用

html 复制代码 
<style>
    div{
        width: 300px;
        height:300px;
        background=color:pink;
    }
</style>
行内样式

也称为嵌入样式，使用HTML标签的style属性定义；只对设置style属性的标签起作用

外链样式
html 复制代码 
<link rel="stylesheet" href="CSS样式文件的路径">

选择器

基本选择器
标签选择器

也称为元素选择器，使用HTML标签作为选择器的名称

以标签名作为样式应用的依据

html 复制代码 
<style>
    div{
        color:blue;
   }
</style>
类选择器

使用自定义的名称，以 . 号作为前缀，然后再通过HTML标签的class属性调用类选择器

以标签的class属性作为样式应用的依据

html 复制代码 
<style>
    .box1{
        width: 100px;
        height: 100px;
        background-color: darkorange;
    }
</style>

<body>
    <div class="box1"></div>
</body>

注意事项：

  • 调用时不能添加 . 号
  • 同时调用多个类选择器时，以 空格 分隔
  • 类选择器名称不能以 数字 开头
ID选择器

使用自定义名称，以 # 作为前缀，然后通过HTML标签的id属性进行名称匹配

以标签的id属性作为样式应用的依据，一对一的关系

html 复制代码 
<style>
    #box2{
        width: 100px;
        height: 100px;
        background: color pink;
    }
</style>

<body>
    <div id="box2"></div>
</body>
通配符选择器
html 复制代码 
<style>
    *{
        color:brown;
    }
</style>
复杂选择器
复合选择器

标签选择器和类选择器、标签选择器和ID选择器，一起使用；必须同时满足两个条件才能应用样式

html 复制代码 
<style>
		/* 1.标签选择器和类选择器合起来使用----复合选择器 */
		h1.aaa{
			color:red;
		}
		/* 2.标签选择器和ID选择器合起来使用----复合选择器 */
		p#bbb{
			color:blue;
		}
</style>
组合选择器

也称为集体声明；将多个具有相同样式的选择器放在一起声明，使用逗号隔开

html 复制代码 
<style>
	/* 2.组合选择器 */
        h1,p,div,span,.ccc{
        font-size:30px;
    }
        div{
        background:violet;
    }
        .ccc{
        font-weight:bold;		
    }
</style>
嵌套选择器

在某个选择器内部再设置选择器，通过空格隔开

只有满足层次关系最里层的选择器所对应的标签才会应用样式

注意：使用 空格 时不区分父子还是后代，使用CSS3中新增的 > 时必须是父子关系才行

html 复制代码 
<style>
/* 3.嵌套选择器 */
		div p{
			color:green;
			text-decoration:underline;
		}
		div>p{
			color:green;
			text-decoration:underline;
		}
		div h3.ddd{
			color:red;
		}
	</style>
伪类选择器

根据不同的状态显示不同的样式，一般多用于 标签

四种状态：

  • :link 未访问的链接
  • :visited 已访问的链接
  • :hover 鼠标悬浮到连接上，即移动在连接上
  • :active 选定的链接，被激活
html 复制代码 
	<style>
		访问前链接颜色
	    a:link{
	        color: aliceblue;
	    }
	    访问后链接颜色
	    a:visited{
	        color: aqua;
	    }
		鼠标悬停时链接颜色
	    a:hover{
	        color: blue;
	    }
		鼠标点击时链接颜色
	    a:active{
	        color: brown;
	    }
	</style>
	<a href="#">这是一个链接</a>
	
	**需要按照以上顺序**

父子元素伪类选择器：

  • ul li:nth-child(n) ul中的第n个子元素
  • ul li:nth-child(2n+1) ul中的奇数子元素
  • ul li:first-child ul中的首个子元素
  • ul li:last-child ul中的最后子元素
html 复制代码 
<style>
    ul li:nth-child(8){
        background-color: pink;
    }
    ul li:nth-child(2n+1){
        background-color: blue;
    }
    ul li:last-child {
        background-color:red;
    }
    ul li:first-child{
        background-color: green;
    }
    ul li:nth-of-type(3){
        background-color: yellow;
    }
    
</style>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
    <li>li4</li>
    <li>li5</li>
    <li>li6</li>
    <li>li7</li>
    <li>li8</li>
    <li>li9</li>
    <li>li10</li>
</ul>
伪元素选择器

用于选择元素的特定部分或生成额外的内容

  • :selection当元素被选中时
  • :before 在元素内容的最前面添加的内容，需要配合content属性使用
  • :after 在元素内容的最后面添加的内容，需要配合content属性使用
属性选择器

作用：选择含有指定属性的元素。

语法：[属性名]{}

作用：选择含有指定属性及指定属性值的元素。

语法：[属性名=属性值]{}

html 复制代码 
属性选择器：
<style>
    input[type="password"]{
        background-color: aqua;
    }
    	属性值中包含e的
 input[type*="e"]{
        background-color: aqua;
    }
	属性值以p开头的    
 input[type^="p"]{
        background-color: aqua;
    }
	属性值以d结尾的
 input[type%="d"]{
        background-color: aqua;
    }
</style>

<body>
    <input type="text">
	<input type="password">
	<input type="email">
</body>
子代选择器

只选择自己的子代

.父代>子代

html 复制代码 
<style>
    .ul>li{
        border:5px solid pink
    }
</style>

<body>
    <ul>
        <ul>
            <li>aa</li>
            <li>bb</li>
            <li>cc</li>
        </ul>
</body>

基本属性

字体属性
html 复制代码 
<style>
    div{
        font-size:50px;
        font-weight:700;
        font-style:italic;
		font-famliy:'Courier New'
    }
</style>
  • 字体大小：font-size
  • 字体粗细：font-weight ------ 400为默认；700为加粗；normal为正常；lighter为细体；bold为粗体；bolder为特粗体
  • 字体样式：font-style：------normal为正常；italic为斜体
  • 字体系列：font-famliy------"隶书"，"微雅软黑"
文本属性
html 复制代码 
<style>
    div{
        color: aqua;
        line-height: normal;
        text-align: left;
        text-decoration: line-through;
        text-overflow: ellipsis;
        text-indent: 50px;
    }
</style>
  • 文本颜色：color
  • 行高：line-height------当行高等于height盒子高度时，文本垂直方向对齐
  • 文本对齐：text-align ------ left 左对齐；right右对齐；center 中间对齐，水平居中
  • 文本修饰：text-decoration------ line-through 删除线；underline 下划线
  • 文本溢出：text-overflow ------ clip 不显示溢出文本；ellipsls 用"..."显示溢出文本
  • 文本缩进：text-indent ------ 设置首行文本缩进
背景属性
html 复制代码 
<style>
    div{
        background-color: blue;
        background-image: url(../);
        background-repeat: no-repeat;
        background-position: top left;
        background-position: 100px 200px;
        background-size: 50%
        background-size: 1000px 500px;
        background-attachment: fixed;
    }
</style>
  • 背景颜色：background-color
  • 背景图片：background-image
  • 背景图像是否重复以及如何重复：background-repeat------ repeat-x为横向平铺；repeat-y为纵向平铺；norepeat为不平铺
  • 背景图像起始位置：background-position------ top \ left \ right \ bottom \ center； 坐标 水平（正数向右，负数向左）垂直（正数向下，负数向上）
  • 背景图片大小：background-size------ 50%（根据盒子尺寸）；1000px 500px；cover等比例缩放背景图直到将容器铺满；contain缩放背景图片以完全装入背景区
  • 背景图像是否固定或随页面滚动：background-attachment------ fixed 固定；scroll 随页面滚动

元素类型转化

块元素

独占一行，并且可以宽度、高度、对齐等属性

常见:元素有**

~

、

、
、

  • 、
  1. 、
  2. 等，其中
    标记是最典型**的块元素。
行内元素

一行可以存在多个，仅仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置高度、对齐等属性

常见的行内元素有**、、、、****** 、、 ++、 ++、 、等， 其中 标记是最典型**的行内元素。++++

行内块元素

一行可以存在多个，并且可以设置宽度、高度、对齐等属性

元素间的转化
html 复制代码 
<style>
     a{
         display: inline-block; /*将a链接转化成行内块*/
         display: block;        /*将a链接转化成块元素*/
         display: inline;       /*转化成行内元素*/
     }
</style>

使用display属性对元素的类型进行转换

  • 转化成行内元素：display：inline
  • 转化成块元素：display：block
  • 转化成行内块元素：display：inline-block

定位

静态定位（static）

静态定位是元素默认的定位方式，是各个元素在HTML文档流中的默认位置:在静态定位方式中，无法通过位置偏移属性( top、 bottom、left或right )来改变元素的位置

相对定位（relative）

相对定位相对于本元素在文档流原来出现位置的左上角进行定位，可以通过位置偏移属性改变元素的位置。虽然其移动到其他位置，但该元素仍占据原来未移动时的位置，该元素移动后会导致其覆盖其他的框元素。

html 复制代码 
   <style>
        div{
            position: relative; 
            top: 50px; /*方位 距离顶上50px*/
            right: 50px; /*距离右边50px*/
        }
        
    </style>
绝对定位（absolute）

绝对定位是脱离文档流的，不占据其原来未移动时的位置

子决父相 ------ 当父代容器是相对定位，子代容器是绝对定位时，子代会随着父代的方位移动；当父代容器没有相对定位，则子代容器绝对定位相对于浏览器

html 复制代码 
	<style>
        .father{
            position: relative;

        }
        .son{
            position: absolute; /*当子代绝对定位移动后，标准流位置不再保留*/
            top: 50%;
            left: 250px;
        }
    </style>
    <div class="father">
        <div class="son"></div>
    </div>
固定定位（fixed）

固定定位相对于浏览器可视窗口定位，不会随着页面滚动移动

html 复制代码 
<style>
        body{
            background-color: black;
        }
        div{
            position: fixed; /*固定定位后，标准流位置不再保留*/
            right: 40px;
        }
    </style>
粘性定位（sticky）

粘性定位距离方位一定距离跟随可视化窗口移动

html 复制代码 
<style>
     p{
         position: sticky;
         top:10px;
     }
</style>
<p></p>

在可视化窗口滚动到元素 top 距离小于 10px 时，元素将固定在与顶部距离 10px 的位置，直到 可视化回滚到阈值以下

定位元索的层叠次序
html 复制代码 
	<div class="father">
        <div class="son1">
        </div>
        <div class="son2">
        </div>
    </div>
    <style>
        .father{
            position: relative;
            width: 800px;
            height: 800px;
            background-color: aqua;
        }
        .son1{
            position: absolute;
            left: 90px;
            top:90px;
            width: 60px;
            height: 60px;
            background-color: blue;
            z-index: 1; /*层级，正常情况下son1被son2覆盖，z-index：1，son1反覆盖*/
        }
        .son2{
            position: absolute;
            left: 100px;
            top:100px;
            width: 60px;
            height: 60px;
            background-color: greenyellow;
        }
    </style>
    
    <div class="father">
        <div class="son1">
    
        </div>
        <div class="son2">
    
        </div>
    </div>

多个块元素形成多个层。可以使用z-index属性对这些层进行层叠设置。

z-index属性设置一个定位元素沿z轴的位置, z轴定义为垂直延伸到显示区的轴。如果为数，则离用户更近，为负数则表示离用户更远。即拥有z-index属性值大的元素放置顺序在上。

注意：元素可拥有负的z-index属性值、而且z-index仅能在绝对定位元素(例如position:absolute;)上起作用。

浮动（float）

详解

创建三个div不浮动如下：

让框1向左浮动，效果如下：

分析： 框2并没有消失，而是隐藏在框1下面。因为浮动元素会脱离原来的文档流，空间就会释放，框1释放原来的空间后，框2就会自动上去。

让框1向右浮动就可以看见框2：

如果让框2也向左浮动，效果如下：

分析：同理框3也没有消失，而是在隐藏在框1下面。

让三个框都向左浮动，效果如下：

分析：框1向左浮动直到碰到包含框，另外两个框也向左浮动，直到碰到前一个浮动框。

三个框都向左浮动，如果包含框太窄，水平排列只能容纳两个框，那么其他框向下移动，直到有足够的空间，如下所示：

如果浮动元素的高不一样，那么向下移动的时候可能会被其他浮动元素"卡住"如下所示。

属性值及说明
属性值 说明
left 向左浮动 float：left
right 向右浮动 float：right
none 默认值。元素不浮动，并会显示在其文本中出现的位置
inherit 规定应该从父元素继承float 属性的值

flex布局

轴线

flex布局中存在两根轴线：主轴和侧轴

主轴
html 复制代码 
<style>
    div{
        display:flex
        flex-direction: row
        flex-direction: row-reverse
        flex-direction: column
        flex-direction: column-reverse
    }
</style>

  • 主轴方向水平：row

  • 主轴方向水平翻转：row-reverse

  • 主轴方向垂直：column

  • 主轴方向垂直翻转：column-reverse

对齐
align-items

可以使元素在侧轴方向对齐。

html 复制代码 
<style>
    .box {
      display: flex;
      align-items: stretch;
      align-items: flex-start;
      align-items: flex-end;
      align-items: center;
    }
</style>
  • 初始值：stretch
  • 使 flex 元素按 flex 容器的顶部对齐：flex-start
  • 使flex 元素按 flex 容器的下部对齐：flex-end
  • 使flex 元素按 flex 容器的垂直居中对齐：center
justify-content

用来使元素在主轴方向上对齐

html 复制代码 
<style>
 .box {
      display: flex;
      justify-content: flex-start;
      justify-content: flex-end;
      justify-content: center;
      justify-content: space-between;
      justify-content: space-around;
      justify-content: space-evenly;
    }
</style>
  • 居中排列：center
  • 从行首起始位置开始排列：flex-start
  • 从行尾位置开始排列：flex-end
  • 均匀排列每个元素；两边贴边，中间平分：space-between
  • 均匀排列每个元素；直接平分：space-around
  • 均匀排列每个元素；间隔相同：space-evenly

溢出（overflow）

html 复制代码 
<style>
    div{
        overflow: visible;
        overflow: hidden;
        overflow: scroll;
        overflow: auto;
    }
    
</style>

  • visible：内容不能被裁减并且可能渲染到边距盒（padding）的外部

  • hidden：如果需要，内容将被裁减以适应边距（padding）盒

  • scroll：如果需要，内容将被裁减以适应边距（padding）盒，并提供滚动条

  • aut0：如果内容适应边距（padding）盒，它看起来与 visible 相同，但是仍然建立了一个新的块级格式化上下文。如果内容溢出，则浏览器提供滚动条

盒子模型

概述

HTML文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用的空间，这个模型称为盒子模型

盒子模型用四个边界描述:margin (外边距), border (边框)，padding (内边距)，content (内容区域)

盒子模型中最内部分及content 所占高度由height属性决定，内容所占宽度由width属性决定，包围内容的是padding，内边距指显示的内容与边框之间的间隔距离，并且会显示内容的背景色或背景图片，包围内边距的是边框( border)，边框以外是外边距( margin)，外边距指该盒子与其他盒子之间的间隔距离。如果设定背景色或者图像，则会应用于由内容和内边距组成的区域。

对于浏览器来说，网页其实是由多个盒子嵌套排列的结果。

消除盒子默认样式
html 复制代码 
<style>
    *{              /*通用选择器，选择所有元素*/
        margin:0;  /*外边距清0*/
        padding:0; /*内边距清0*/
        box-sizing: border-box /*让padding和border不再影响盒子大小*/
    }
</style>
内边距（padding）

盒子边框和内部内容的间距

html 复制代码 
<style>
    div{
        padding: 10px; /*padding赋一个值，默认全部内边距为该值*/
        padding-top: 10px; /*上边距*/
        padding: 10px 30px; /*上下边距：10px 左右边距：30px*/
        padding: 10px 20px 30px; /*上：10px 左右：20px 下：30px*/
        padding: 10px 20px 30px 40px; /*顺时针排列，上右下左*/
    }
</style>
外边距（margin）

盒子模型的边框与其他盒子之间的距离

html 复制代码 
<style>
    div{
        margin: 50px;
        margin-top: 50px;
        margin: 10px 30px; /*上下边距：10px 左右边距：30px*/
        margin: 10px 20px 30px; /*上：10px 左右：20px 下：30px*/
        margin: 10px 20px 30px 40px; /*顺时针排列，上右下左*/
    }
</style>
边框（border）

元素的边框( border )是围绕元素内容和内边距的一条或多条线

html 复制代码 
<style>
    div{
        border: 10px solid black;
        border-top: 3px double red;
        
    }
</style>
  • border：宽度 样式 颜色
  • border-style 设置元素所有边框的样式，或者单独为各边设置边框样式
  • border-width 用于为元素的所有边框设置宽度，或者单独为各边框设置宽度
  • border-color 设置元素的所有边框中可见部分的颜色，或为四条边分别设置颜色
  • border-bottom 用于把下边框的所有属性设置到个声明中
边框弧度（border-radius）

设置元素的外边框圆角

html 复制代码 
<style>
    div{
        border-radius: 20px;
        border-radius: 10px 20px 30px 40px; /*顺时针*/
        border-radius: 25px; /*胶囊形状：弧度是盒子高度的一半*/
    }
    div{
        border-radius: 50%; /*将正方形变成正圆*/
    }
</style>

光标（cursor）

设置光标的类型，在鼠标指针悬停在元素上时显示相应样式

html 复制代码 
<style>
    a{
         cursor: pointer; /*手指*/
         cursor: text; /*I*/
         cursor: move; /*移动十字标*/
         cursor: default; /*箭头*/
        }
</style>

轮廓（outline）

设置元素轮廓

html 复制代码 
<style>
    input:focus/*标签获取焦点时的状态（点击时）*/{
        outline-width: 100px;
        outline-color: aquamarine;
        outline-style: double;
        outline: red solid 3px;
        outline: none; 
    }
</style>

过渡（transition）

使元素从一种样式转变为另一种样式时添加效果，如渐显、渐弱、 动面快慢等

transition-property

规定设置过渡效果的CSS属性的名称

html 复制代码 
transition-property:none|all|property;
none 没有属性会获得过渡效果
all 所有属性都将获得过渡效果
property 定义应用过渡效果的CSS属性的名称列表，列表以逗号分隔

transition- duration

定完成过渡效果所花的时间(以秒或毫秒计)。默认值为0

html 复制代码 
transition-duration: time;

transition- timing-function

规定过渡效果的速度曲线，并且允许过渡效果随着时间来改变其速度

html 复制代码 
transition-timing function:linear|ease|ease-in|ease-out|ease-in-out;
属性值 说明
linear 以相同速度开始至结束的过渡效果
ease 由慢变快，然后慢速结束的过渡效果
ease-in 以慢速开始的过渡效果
ease-out 以慢速结束的过渡效果
ease-in-out 以慢速开始和结束的过渡效果

transition-delay

规定过渡效果何时开始，默认值为0，其常用单位是秒或毫秒

html 复制代码 
transition-delay:time;

transition

html 复制代码 
transition: property duration function delay;
html 复制代码 
<style type="text/css">
		.box{
			width: 200px;
			height: 200px;
			border: 1px solid #000;
			margin: 100px auto;
			background-color: red;
	
		/*部分属性定义过渡动画*/
		/*宽度用两秒过渡，背景色用一秒过渡，多个属性之间用"，"号隔开*/
		transform: width 2s,background-color 1s;
		transform: width 2s linear;   /*//匀速变化*/
		transform: width 2s linear 1s;  /* //1s表示延迟变化*/
		transform: all 2s;   /*//所有属性都过渡且效果一样*/
		/*全部属性定义过渡*/
		transition-property: all;  /*//all表示所有属性*/
		transition-duration: 2s;  /*//过渡持续时间*/
		transition-timing-function: ease-out;  /* //动画变化速度：减速*/
		transition-delay: 1s;  /*//动画延迟*/
		/*过渡属性常用的简写方式，与上面四个属性设置相同的功能相同*/
		transition: all 2s ease-in-out 1s;
	}
	.box:hover{
		width: 600px;
		background-color: blue;
	}html
	</style>

变形（transform）

操控元素发生平移、旋转、缩放和倾斜等变化

平移（translate）
html 复制代码 
<style>
	div{
	transform: translateX(100px);
    transform: translateX(50%);
    transform: translateY(100px);
    transform: translate(100px,100px); 
	}
</style>
  • translate(x,y) 沿着x轴移动，沿着y轴移动
  • translateX(n) 盒子沿着X轴方向移动，正数向右，负数向左
  • translateY(n) 盒子沿着Y轴方向移动，正数向下，负数向上
旋转（rotate）
html 复制代码 
<style>
	transform: rotateZ(30deg);
    transform: rotate(40deg);
    transform-origin: top right; /*改变原点位置；水平方向 垂直方向*/
    }
</style>
  • rotate(angle) 旋转，在参数中设置角度，默认Z轴，正数顺时针，负数逆时针
  • rotatex(angle) 绕着平面转，旋转轴是Z轴；旋转的单位时deg
缩放（scale）
html 复制代码 
<style>
	transform: scale(1.5,2); /*x轴的缩放倍数，y轴的缩放倍数*/
    transform: scale(1.2); /*同时缩放*/
    transform: scale(0.5); /*>1放大 <1缩小*/
</style>
  • scale(x,y) 缩放转换，改变元素的宽度和高度
  • scaleX(n) 缩放转换，改变元素的宽度
  • scaleY(n) 缩放转换，改变元素的高度
倾斜（skew）
html 复制代码 
<style>
 	transform: skewX(45dge);
    transform: skew(45dge,45dge);
</style>
  • skew(x-angle,y-angle) 倾斜转换，沿着X和Y轴
  • skewX(angle) 倾斜转换，沿着X轴
  • skewY(angle) 倾斜转换，沿着Y轴

动画（animation）

html 复制代码 
<style>
    @keyframes mymove{
        from{
            width: 0;
            height: 0;
            background-color: aliceblue;
        }
        to{
            width: 600px;
            height: 600px;
            background-color: aqua;
        }
    }
    @keyframes mymove2{
        0%{
            width: 0;
            height: 0;
            background-color: aliceblue;
        }
        25%{
            width: 100;
            height: 100;
            background-color:antiquewhite;
        }
        50%{
            width: 200;
            height:200;
            background-color:aqua;
        }
        75%{
            width:300;
            height:300;
            background-color:aquamarine;
        }
        100%{
            width:400;
            height:400;
            background-color:black;
        }
    }
    div{
        animation: mymove 3s;
    }
    div2{
        animation: mymove2 6s;
        animation-delay: 1s; /*动画延迟启动*/
        animation-fill-mode: forwards; /*动画结束，定格在动画最后状态*/
        animation-fill-mode: backwards; /*动画结束，定格在动画第一帧状态*/
        animation-iteration-count: infinite; /*动画无限循环*/
    }
</style>

js(javascript)

JavaScript是种基于对象和事件驱动， 具有相对安全性，并广泛用于客户端网页开发的脚本语言，主要用于为网页添加交互功能，例如校验数据、响应用户操作等，是一种动态、 弱类型、基于原型的语言，内置支持类。

js组成

一个完整的JavaScript实现由以下3个部分组成。

  • ECMAScript: ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套)S语法工业标准，描述了JavaScript语言的基本语法和基本对象。
  • 文档对象模型( DocumentObject Model, DOM ):文档对象模型是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等) 。 描述了处理网页内容的方法和接口。
  • 浏览器对象模型( Browser Object Model, BOM ):BOM是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等 。 描述了与浏览器进行交互的方法和接口。

js使用方式

内部js:写在html里面,用包住

html 复制代码 
 <script>  /*写在<body>最后*/

     
 </script>

外部js:写在.js结尾的文件中,通过引入

js输入输出语句

页面输出（document.write）

使用JavaScript向页面输出一句话

html 复制代码 
<script>
    document.write("hello world!");
</script>
控制台输出（console.log）

使用JavaScript向控制台输出一句话

html 复制代码 
<script>
    console.log("输出一条日志");//最常用
    console.info("输出一条信息");
    console.warn("输出一条警告");
    console.error("输出一条错误");
</script>
警示框输出（alert）
html 复制代码 
<style>
	alert("要输入的内容")
</style>
输入框（prompt）
html 复制代码 
<style>
	prompt("提示语")
</style>

数据类型

JavaScript数据类型分类

简单数据类型

复杂数据类型( object)

简单数据类型 说明 默认值
Number 数字型，包含整型值和浮点型值，如21、0.21 0
Boolean 布尔值类型，如true . false；等价于1和0 false
String 字符串类型，如"张三"注意咱们js里面，字符串都带引号 ""
Undefined var a；声明了变量a但是没有给值，此时a = undefined undefined
Null var a = null；声明了变量a 为空值 null
字符串的拼接

多个字符串之间可以使用＋进行拼接，其拼接方式为字符串＋任何类型=拼接之后的新字符串

html 复制代码 
<script>
    document.write("你"+"XX")
    document.write(str1+str2)
    document.write("你的名字是"+name)
    document.write(`您的用户名为${usename},您的密码为${password}`)
 </script>
判断数据类型
html 复制代码 
<script>
    console.log(typeof num1)
</script>
数据类型的转换

我们通常会实现3种方式的转换∶ 转换为字符串类型、转换为数字型、转换为布尔型

转换为字符串

方式 说明 案例
toString() 转成字符串 var num= 1; alert(num.toString());
String()强制转换 转成字将串 var num = 1; alert(String(num));
加号拼接字符串 和字符串拼接的结果都是字符串 var num = 1; alert(num+"字符串");

转换成数字型

方式 说明 案例
parselnt(string)函数 将string类型转成整数数值型 parseInt('78')
parseFloat(string)函数 将string类型转成浮点数数值型 parseFloat('78.21')
Number()强制转换函数 将string类型转换为数值型 Number('12')
js隐式转换( - * /) 利用算术运算隐式转换为数值型 '12' -0

转换成布尔型

方式 说明 案例
Boolean()函数 其他类型转成布尔值 Boolean('');

变量

定义

白话:变量就是一个装东西的盒子。

通俗:变量是用于存放数据的容器。我们通过变量名获取数据，甚至数据可以修改。

使用
声明变量 赋值

JavaScript定义的关键是var，格式如下：

html 复制代码 
var age = 10;

声明一个名称为age的变量

var是一个JS关键字，用来声明变量

age是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

给age这个变量赋值为10

同时声明多个变量

同时声明多个变量时，只需要写一个var，多个变量名之间使用英文逗号隔开。 例如：

html 复制代码 
var age = 10,name = 'zs', sex =2;
变量命名规范

  • 由字母(A-Za-z)、数字(0-9)、下划线、美元符号($ )组成；usrAge, num01,_name

  • 严格区分大小写。var app;和var App;是两个变量

  • 不能以数字开头。18age是错误的

  • 不能是关键字、保留字。例如:var、for、while

  • 变量名必须有意义(不建议拼音简写)。

  • 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName

常量

JavaScript常量分为四类:整数、浮点数、布尔值和字符串。

  • 整数常量。可以如下表示。

    ​ 十进制数: 即一般的十进制整数，前面不可以有前导0。例如:12。

    ​ 八进制数:以0为前导，表示八进制数。例如:075。

    ​ 十六进制数:以0x为前导， 表示十六进制数。例如:0x0f。

  • 浮点数常量。可以用一般的小数格式表示，也可以使用科学计数法表示。例如:3.2320323，3.0e9 。

  • 布尔型常量:布尔型常量只有两个值:true和false。

  • 字符串常量 字符串常量用单引号或双引号括起来的0个或多个字符组成，例如:"Test String", "12345"。

流程控制语句

简单理解︰流程控制就是来控制我们的代码按照什么结构顺序来执行

流程控制主要有三种结构，分别是顺序结构、分支结构和循环结构，这三种结构代表三种代码执行的顺序。

顺序结构
分支结构
条件语句
if语句

if分支

javascript 复制代码 
if(条件表达式){
    语句1;
}

if双分支

javascript 复制代码 
if(条件表达式){
    语句1;
}else{
    语句2;
}
//条件表达式结果为true，执行语句1，否则执行语句2

if-else if多分支

javascript 复制代码 
if(条件表达式1){
    语句1;
}else if(条件表达式2){
    语句2;
}else if(条件表达式3){
    语句3;  
    ......
}else{
    语句4;
}
//多分支语句就是利用多个条件来选择不同的语句执行得到不同的结果，多选1的过程
三元表达式
javascript 复制代码 
    // 三元运算符
    // 条件 ? 满足条件时执行的代码：不满足条件时执行的代码
    let age0 = 21
    age > 18 ? console.log("成年") : console.log("未成年")
   
    let a = 10, b = 20
    c = a > b ? a : b
    console.log(c)

    let num = +prompt("请输入一个数字")
    num < 10 ? "0"+num : num
    document.write(num)
switch语句
javascript 复制代码 
switch (表达式) {  //switch 转换、开关  case 小例子或者选项的意思
    case 值1: 语句块1;
        break;
    case 值2: 语句块2;
        break;
        ...... 
    case n: 语句块n;
        break;
    default: 最后的语句块;
}

switch语句首先计算表达式的值，然后根据表达式计算出的值选择与之匹配的case后面的值，并执行该case后面的语句块，直到遇到break语句为止:如果计算出的值与任何一个case后面的值都不相符，则执行default后的语句块。

switch语句和if else if 语句的区别
  • 一般情况下，它们两个语句可以相互替换
  • switch...case语句通常处理case为比较确定值的情况，而if...else...语句加灵活，常用于范因判断(大于、等于某个范园)
  • switch语句进行条件判断后直接执行到程序的条件语句，效率更高而if...else语句有几种条件，就得判断多少次。
  • 当分支比较少时，if...else语句的执行效率比switch语句高。
  • 当分支比较多时，switch语句的执行效率比较高，而且结构更清晰。
循环语句
for循环
javascript 复制代码 
for (初始化循环变量;条件表达式;修改循环控制变量的表达式){
    循环语句块;
}
while循环

while语句是当未知循环次数，并且需要先判断条件后再执行循环语句块时使用的循环语句

javascript 复制代码 
while (条件表达式){
    循环体语句块;
}

while语句中当条件表达式为true时，循环体语句块被执行，执行完该循环体语句块后，会再次执行条件表达式;如果运算结果是false,将退出该循环体;如果条件表达式开始时便为false.则循环语句块将一次也不会执行。使用break语句可以从这个循环中退出

do...while语句
javascript 复制代码 
do{ 
    循环体语句;
}while(条件表达式);

do...while语句与while语句执行的功能完全一样， 唯一的不同之处是，d...while语句先执行循环体，再进行条件判断，其循环体至少被执行一-次。 同样可以使用break语句从循环中退出。

数组

html 复制代码 
<script>
    // 数组的操作
    let arr4=[0,1,2,3,4,5]
    // 更改数组中的某个元素
    arr4[0]="00"
    // 追加元素在数组尾部
    arr4.push("aa","bb")
    // 追加元素在数组首部
    arr4.unshift("cc","dd")
    // 删除数组中的最后一个元素
    arr4.pop()
    // 删除数组中的首个元素
    arr4.shift()
    // 删除数组中的指定元素(元素下标，删除个数，(如果删除个数为0)添加元素)
    arr4.splice(2,1)
    arr4.splice(3,0,"Mortal","SPA")
</script>

函数

javascript 复制代码 
function 函数名(形参列表) {
	函数体
return 返回值;	
}
Function()构造函数
javascript 复制代码 
let 函数名= new Function(arg1, arg2, ... argN, function bady)

其中每个arg都是一个形式参数、最后一个参数是函数主体(要执行的代码),这些参数必须是字符串。

函数的调用方法如下:

javascript 复制代码 
函数名(arg1, arg2, ...,argN)
相关推荐
cwj&xyp24 分钟前
Python（二）str、list、tuple、dict、set
前端·python·算法
dlnu201525062226 分钟前
ssr实现方案
前端·javascript·ssr
古木201931 分钟前
前端面试宝典
前端·面试·职场和发展
轻口味2 小时前
命名空间与模块化概述
开发语言·前端·javascript
吉大一菜鸡2 小时前
FPGA学习（基于小梅哥Xilinx FPGA）学习笔记
笔记·学习·fpga开发
前端小小王3 小时前
React Hooks
前端·javascript·react.js
迷途小码农零零发3 小时前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀3 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
旭东怪4 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
热门推荐
01Cube-Studio：开源大模型全链路一站式中台02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀04Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07构建高效的广告投放系统：应用架构的设计与实现08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10【一文读懂】NTN（非地面网络）技术介绍