html css js_html css js 前端入门-CSDN博客

本文链接：https://blog.csdn.net/KDSWG/article/details/133689508

前端

HTML5

HTML5简介和基础骨架

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

HTML5介绍

HTML5是用来描述网页的一种语言，被称为超文本标记语言。用HTML5编写的文件，后缀以.html结尾

HTML是一种标记语言，标记语言是一套标记标签。标签是由尖括号包围的关键字，例如：<html>

标签有两种表现形式：

双标签，例如：<html></html>
单标签，例如：<img>

HTML5的DOCTYPE声明

DOCTYPE是document type (文档类型) 的缩写。<!DOCTYPE html >是H5的声明位于文档的最前面，处于标签之前。
他是网页必备的组成部分，避免浏览器的

<!DOCTYPE html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

html标签

定义 HTML 文档，这个元素我们浏览器看到后就明白这是个HTML文档了，所以你的其它元素要包裹在它里面，标签限定了文档的开始点和结束点。

<!DOCTYPE html>
<html>
</html>

head标签

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

<!DOCTYPE html>
<html>
    <head>
    </head>
</html>

body标签

body 元素定义文档的主体。

body 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等。）

它会直接在页面中显示出来，也就是用户可以直观看到的内容

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        我会显示在浏览器中
    </body>
</html>

title标签

可定义文档的标题。
它显示在浏览器窗口的标题栏或状态栏上。
<title> 标签是 <head> 标签中唯一必须要求包含的东西，就是说写head一定要写title
<title>的增加有利于SEO优化

SEO是搜索引擎优化的英文缩写。通过对网站内容调整，满足搜索引擎的排名需求

<!DOCTYPE html>
<html>
    <head>
        <title>第一个页面</title>
    </head>
    <body>
        我会显示在浏览器中
    </body>
</html>

meta标签

meta标签用来描述一个HTML网页文档的属性，关键词等，例如：charset="utf-8"是说当前使用的是utf-8编码格式，在开发中我们经常会看到utf-8，或是gbk，这些都是编码格式，通常使用utf-8。

标签	描述
`<em>`	定义着重文字
`<b>`	定义粗体文本
`<i>`	定义斜体字
`<strong>`	定义加重语气
`<del>`	定义删除字
`<span>`	元素没有特定的含义

<table border="1" width="500px" height="200px">
    <tr>
        <td colspan="3">单元格1单元格2单元格3</td>
        <td>单元格4</td>
        <td>单元格5</td>
    </tr>
    <tr>
        <td rowspan="2">单元格6-11</td>
        <td>单元格7</td>
        <td rowspan="3">单元格81318</td>
        <td colspan="2" rowspan="2">单元格9101415</td>
    </tr>
    <tr>
        <td>单元格12</td>
    </tr>
    <tr>
        <td>单元格16</td>
        <td>单元格17</td>
        <td>单元格19</td>
        <td>单元格20</td>
    </tr>
</table>

Form表单

表单在 Web 网页中用来给用户填写信息，从而能采用户信息，使网页具有交互的功能。

所有的用户输入内容的地方都用表单来写，如登录注册、搜索框

表单是由容器和控件组成的,一个表单一般应该包含用户填写信息的输入框,按钮等，这些输入框,按钮叫做控件,表单就是容器,它能够容纳各种各样的控件

<form action="url" method="get|post" name="myform"></form>

表单元素

一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮

表单标签
表单域
表单按钮

<form>
    <input type="text">
    <input type="submit">
</form>

表单元素

文本框

文本域通过<input type="text"> 标签来设定，当用户要在表单中键入字母、数字等内容时，就会用到文本域

<form>
    First name: <input type="text" name="firstname">
    <br>
    Last name: <input type="text" name="lastname">
</form>

密码框

密码字段通过标签<input type="password"> 来定义

<form>    Password: <input type="password" name="pwd"></form>

温馨提示

密码字段字符不会明文显示，而是以星号或圆点替代

提交按钮

当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理

<form name="input" action="url" method="get">
    Username: <input type="text" name="user">
    <input type="submit" value="Submit">
</form>

块元素与行内元素（内联元素）

HTML5出现之前，经常把元素按照块级元素和内联元素来区分。在HTML5中，元素不再按照这种⽅式来区分，而是按照内容模型来区分，分为元数据型(metadata content)、区块型(sectioning content)、标题型(heading content)、文档流型(flow content)、语句型(phrasing content)、内嵌型(embedded content)、交互型 (interactive content)。元素不属于任何⼀个类别，被称为穿透的，元素可能属于不止⼀个类别，称为混合的

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

详细参考地址：https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Content_categories

虽然到了HTML5的版本，元素分类更细致了，但是这对初学者并不友好,所以我们仍然按照块元素和内联元素做区分，这对我们的布局起到了至关重要的作用

内联元素和块级元素的区别

块级元素	内联元素
块元素会在页面中独占一行（自上向下垂直排列）	行内元素不会独占页面中的一行，只占自身的大小
可以设置width，height属性	行内元素设置width，height属性无效
⼀般块级元素可以包含行内元素和其他块级元素	⼀般内联元素包含内联元素不包含块级元素

常见块级元素

div、form、h1~h6、hr、p、table、ul、等

常见内联元素(行内元素)

a、b、em、i、span、strong等

行内块级元素（特点：不换行、能够识别宽高）

button、img、input等

HTML5新增标签

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定

在HTML5出现之前，我们一般采用DIV+CSS布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清晰，而且不利于搜索引擎爬虫对我们页面的爬取。为了解决上述缺点，HTML5新增了很多新的语义化标签

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

H5新标签

<header></header> 头部
<nav></nav> 导航
<section></section>定义文档中的节,比如章节、页眉、页脚
<aside></aside> 侧边栏
<footer></footer> 脚部
<article></article> 代表一个独立的、完整的相关内容块,例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等

css

ccs简介

CSS概念

CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表

CSS文件后缀名为.css

CSS用于HTML文档中元素样式的定义

为什么需要CSS

使用css的唯一目的就是让网页具有美观一致的页面

语法

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

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

选择器通常是您需要改变样式的 HTML 元素

每条声明由一个属性和一个值组成

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开

<style>
    h1{
        color: blue;
        font-size: 12px;
    }
</style>

CSS的引入方式

内联样式（行内样式）

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性

温馨提示

缺乏整体性和规划性，不利于维护，维护成本高

<p style="background: orange; font-size: 24px;">CSS<p>

内部样式

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表

温馨提示

单个页面内的CSS代码具有统一性和规划性，便于维护，但是在多个页面之间容易混乱

<head>
    <style> 
       h1 { 
           background: red; 
       } 
    </style>
</head>

外部样式（推荐）

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部

选择器

选择器一

CSS语法规则由两个主要的部分构成：选择器，以及一条或多条声明（样式）

全局选择器

可以与任何元素匹配，优先级最低，一般做样式初始化

*{
     margin: 0;
     padding: 0;
 }

元素选择器

HTML文档中的元素，p、b、div、a、img、body等。

标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“共性”，无法描述某一个元素的“个性”

p{
    font-size:14px;
}

再比如说，我想让“学完前端，继续学Java”这句话中的“前端”两个变为红色字体，那么我可以用<span>标签把“前端”这两个字围起来，然后给<span>标签加一个标签选择器

<p>学完了<span>前端</span>，继续学Java</p>
span{
	color: red;
}

温馨提示

所有的标签，都可以是选择器。比如ul、li、label、dt、dl、input、div等
无论这个标签藏的多深，一定能够被选择上
选择的所有，而不是一个

类选择器

规定用圆点 . 来定义，针对你想要的所有标签使用

优点

灵活

<h2 class="oneclass">你好</h2>
/*定义类选择器*/
.oneclass{
	width:800px;
}

class属性的特点

类选择器可以被多种标签使用
类名不能以数字开头
同一个标签可以使用多个类选择器。用空格隔开

<h3 class="classone  classtwo">我是一个h3啊</h3>

<h3 class="teshu" class="zhongyao">我是一个h3啊</h3>  // 错误

ID选择器

针对某一个特定的标签来使用，只能使用一次。css中的ID选择器以 # 来定义

<h2 id="mytitle">你好</h2>
#mytitle{
    border:3px dashed green;
}

特别强调

ID是唯一的
ID不能以数字开头

合并选择器

语法：选择器1,选择器2,...{ }

作用：提取共同的样式，减少重复代码

.header, .footer{
    height:300px;
}

选择器的优先级

CSS中,权重用数字衡量

元素选择器的权重为: 1

class选择器的权重为: 10

id选择器的权重为: 100

内联样式的权重为: 1000

优先级从高到低: 行内样式 > ID选择器 > 类选择器 > 元素选择器

属性

字体属性

CSS字体属性定义字体，颜色、大小，加粗，文字样式

color

规定文本的颜色

div{ color:red;}
div{ color:#ff0000;}
div{ color:rgb(255,0,0);}
div{ color:rgba(255,0,0,.5);}

font-size

设置文本的大小

能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

温馨提示

chrome浏览器接受最小字体是12px

font-weight

设置文本的粗细

值	描述
bold	定义粗体字符
bolder	定义更粗的字符
lighter	定义更细的字符
100~900	定义由细到粗 400等同默认，而700等同于bold

H1 {font-weight:normal;}
div{font-weight:bold;}
p{font-weight:900;}

font-style

指定文本的字体样式

值	描述
normal	默认值
italic	定义斜体字

font-family

font-family属性指定一个元素的字体

温馨提示

每个值用逗号分开

如果字体名称包含空格，它必须加上引号

font-family:"Microsoft YaHei","Simsun","SimHei";

背景属性

CSS背景属性主要有以下几个

属性	描述
background-color	设置背景颜色
background-image	设置背景图片
background-position	设置背景图片显示位置
background-repeat	设置背景图片如何填充
background-size	设置背景图片大小属性

background-color属性

该属性设置背景颜色

<div class="box"></div>
.box{
    width: 300px;
    height: 300px;
    background-color: palevioletred;
}

background-image属性

设置元素的背景图像

元素的背景是元素的总大小，包括填充和边界（不包括外边距）。默认情况下background-image属性放置在元素的左上角，如果图像不够大的话会在垂直和水平方向平铺图像，如果图像大小超过元素大小从图像的左上角显示元素大小的那部分

<div class="box"></div>
.box{
    width: 600px;
    height: 600px;
    background-image: url("images/img1.jpg");
}

background-repeat属性

该属性设置如何平铺背景图像

值	说明
repeat	默认值
repeat-x	只向水平方向平铺
repeat-y	只向垂直方向平铺
no-repeat	不平铺

.box{
    width: 600px;
    height: 600px;
    background-color: #fcc;
    background-image: url("images/img1.jpg");
    background-repeat: no-repeat;
}

background-size属性

该属性设置背景图像的大小

值	说明
length	设置背景图片的宽度和高度，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto
percentage	计算相对位置区域的百分比，第一个值宽度，第二个值高度，如果只是设置一个，第二个值auto
cover	保持图片纵横比并将图片缩放成完全覆盖背景区域的最小大小
contain	保持图片纵横比并将图像缩放成适合背景定位区域的最大大小

.box{
    width: 600px;
    height: 600px;
    background-image: url("images/img1.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

background-position属性

该属性设置背景图像的起始位置，其默认值是：0% 0%

值	说明
left top	左上角
left center	左中
left bottom	左下
right top	右上角
right center	右中
right bottom	右下
center top	中上
center center	中中
center bottom	中下
x% y%	第一个值是水平位置，第二个值是垂直位置，左上角是0% 0%，右下角是100% 100% 。如果只指定了一个值，其他值默认是50%。默认是0% 0%
xpos ypos	单位是像素

.box{
    width: 600px;
    height: 600px;
    background-color: #fcc;
    background-image: url("images/img1.jpg");
    background-repeat: no-repeat;
    background-position: center;
}

文本属性

text-align

指定元素文本的水平对齐方式

值	描述
left	文本居左排列，默认值
right	把文本排列到右边
center	把文本排列到中间

h1 {text-align:center}
h2 {text-align:left}
h3 {text-align:right}

text-decoration

text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线等

值	描述
underline	定义下划线
overline	定义上划线
line-through	定义删除线

h1 {text-decoration:overline} 
h2 {text-decoration:line-through} 
h3 {text-decoration:underline}

text-transform

text-transform 属性控制文本的大小写

值	描述
captialize	定义每个单词开头大写
uppercase	定义全部大写字母
lowercase	定义全部小写字母

h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}

text-indent

text-indent 属性规定文本块中首行文本的缩进

p{
	text-indent:50px;
}

温馨提示

负值是允许的。如果值是负数，将第一行左缩进

表格属性

使用 CSS 可以使 HTML 表格更美观

表格边框

指定CSS表格边框，使用border属性

table, td { 
    border: 1px solid black; 
}

折叠边框

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开

table { border-collapse:collapse; }
table,td { border: 1px solid black; }

表格宽度和高度

width和height属性定义表格的宽度和高度

table { width:100%; } 
td { height:50px; }

表格文字对齐

表格中的文本对齐和垂直对齐属性

text-align属性设置水平对齐方式，向左，右，或中心

td { text-align:right; }

垂直对齐属性设置垂直对齐

td { height:50px; vertical-align:bottom; }

表格填充

如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性

td { padding:15px; }

表格颜色

下面的例子指定边框的颜色，和th元素的文本和背景颜色

table, td, th { border:1px solid green; } 
td { background-color:green; color:white; }

关系选择器

关系选择器分类

后代选择器
子代选择器
相邻兄弟选择器
通用兄弟选择器

后代选择器

定义

选择所有被E元素包含的F元素，中间用空格隔开

语法

E F{}

<ul>
     <li>宝马</li>
     <li>奔驰</li>
</ul>
 <ol>
     <li>奥迪</li>
</ol>

ul li{
    color:green;
}

子代选择器

定义

选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示

语法

E>F{}

<div> 
    <a href="#">子元素1</a>
    <p> <a href="#">孙元素</a> </p>
    <a href="#">子元素2</a>
</div>

div>a{
    color:red
}

相邻兄弟选择器

定义

选择紧跟E元素后的F元素，用加号表示，选择相邻的第一个兄弟元素，只能向下选择

语法

E+F{}

<h1>h1元素</h1> 
<p>第一个元素</p> 
<p>第二个元素</p>

h1+p{
    color:red;
}

通用兄弟选择器

定义

选择E元素之后的所有兄弟元素F，作用于多个元素，用~隔开，只能向下选择

语法

E~F{}

<h1>h1元素</h1>
<p>第一个元素</p>
<p>第二个元素</p>

h1~p{
    color:red;
}

CSS 盒子模型(Box Model)

概念

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：

外边距（margin），边框（border），内边距（padding），和实际内容（content）

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Margin(外边距) - 清除边框外的区域，外边距是透明的（两个值：第一个值上下，第二个值左右）
Border(边框) - 围绕在内边距和内容外的边框
Padding(内边距) - 清除内容周围的区域（两个值：第一个值上下，第二个值左右）
Content(内容) - 盒子的内容，显示文本和图像

如果把盒子模型看作是一个生活中的快递，那么内容部分等同于你买的实物，内边距等同于快递盒子中的泡沫，边框等同于快递盒子，外边距等同于两个快递盒子之间的距离

弹性盒模型（flex box）

定义

弹性盒子是 CSS3 的一种新的布局模式

CSS3 弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间

CSS3弹性盒内容

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成

弹性容器通过设置 display 属性的值为 flex 将其定义为弹性容器

弹性容器内包含了一个或多个弹性子元素

温馨提示

display 属性

display:flex;开启弹性盒

display:flex;属性设置后子元素默认水平排列

flex-direction属性

定义

flex-direction 属性指定了弹性子元素在父容器中的位置

语法

flex-direction: row | row-reverse | column | column-reverse

row：横向从左到右排列（左对齐），默认的排列方式
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面
column：纵向排列
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面

.flex-container {
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

justify-content 属性

定义

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐

语法

justify-content: flex-start | flex-end | center

flex-start 弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放
flex-end 弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放
center 弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）

.flex-container {
    display: flex;
    justify-content: center;
    width: 400px;
    height: 250px;
    background-color: lightgrey;
}

align-items 属性

定义

align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式

语法

align-items: flex-start | flex-end | center

flex-start 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界
flex-end 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界
center 弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）

子元素上的属性

flex

flex 根据弹性盒子元素所设置的扩展因子作为比率来分配剩余空间

默认为0，即如果存在剩余空间，也不放大

如果只有一个子元素设置，那么按扩展因子转化的百分比对其分配剩余空间。0.1即10%，1即100%，超出按100%

<div class="flex-container">
    <div class="flex-item1">flex item 1</div>
    <div class="flex-item2">flex item 2</div>
    <div class="flex-item3">flex item 3</div> 
</div>
<style>
	.flex-container {
        display: flex;
        width: 400px;
        height: 250px;
        background-color: gold;
    }
    .flex-item1 {
        height: 150px;
        background-color: red;
        flex: 1;
    }
    .flex-item2 {
        height: 150px;
        background-color: green;
        flex: 2;
    }
    .flex-item3 {
        height: 150px;
        background-color: blue;
        flex: 1;
    }
</style>

文档流

文档流是文档中可显示对象在排列时所占用的位置/空间

例如：块元素自上而下摆放，内联元素，从左到右摆放

标准流里面的限制非常多，导致很多页面效果无法实现

高矮不齐，底边对齐
空白折叠现象
1. 无论多少个空格、换行、tab，都会折叠为一个空格
2. 如果我们想让img标签之间没有空隙，必须紧密连接

文档流产生的问题

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<span>我是文本内容</span>
<img src="1.jpg" alt="">

img{
    width: 200px;
}

空格折叠

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<span>我是文本       内容</span>
<img src="1.jpg" alt="">

img{
    width: 200px;
}

元素无空隙

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<span>我是文本内容</span>
<img src="1.jpg" alt=""><img src="1.jpg" alt="">

img{
    width: 200px;
}

如果我们现在就要并排顶部对齐，那该怎么办呢？办法是：移民！脱离标准流！

脱离文档流

使⼀个元素脱离标准文档流有三种方式

浮动
绝对定位
固定定位

浮动

浮动的定义

float 属性定义元素在哪个方向浮动，任何元素都可以浮动。

值	描述
left	元素向左浮动
right	元素向右浮动

浮动的原理

浮动以后使元素脱离了文档流
浮动只有左右浮动，没有上下浮动

元素向左浮动

脱离文档流之后，元素相当于在页面上面增加一个浮层来放置内容。此时可以理解为有两层页面，一层是底层的原页面，一层是脱离文档流的上层页面，所以会出现折叠现象

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<div class="box"></div>
<div class="container"></div>

.container{
    width: 200px;
    height: 200px;
    background-color: #81c784;
}

.box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
}

元素向右浮动

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<div class="box"></div>
<div class="container"></div>

.container{
    width: 200px;
    height: 200px;
    background-color: #81c784;
}
.box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: right;
}

所有元素向左浮动

当所有元素同时浮动的时候，会变成水平摆放，向左或者向右

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

.box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 0 5px;
}

当容器不足时

当容器不足以横向摆放内容时候，会在下一行摆放

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

.container{
    width: 250px;
    height: 300px;
    border: 1px solid red;
}
.box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 5px;
}

清除浮动

浮动副作用

当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动，

浮动元素会造成父元素高度塌陷
后续元素会受到影响

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

.container{
    border: 1px solid red;
}
.box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 5px;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="nav"></div>

.box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 5px;
}
.nav{
    width: 100px;
    height: 100px;
    background-color: red;
}

清除浮动

当父元素出现塌陷的时候，对布局是不利的，所以我们必须清除副作用

解决方案有很多种

父元素设置高度
受影响的元素增加clear属性
overflow清除浮动
伪对象方式

父元素设置高度

如果父元素高度塌陷，可以给父元素设置高度，撑开元素本身大小

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>

.container{
    height: 300px;
    width: 350px;
    border: 1px solid red;
}
.box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 5px;
}

overflow清除浮动

如果有父级塌陷，并且同级元素也收到了影响，可以使用overflow清除浮动

这种情况下，父布局不能设置高度

父级标签的样式里面加: overflow:hidden;clear: both;

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<div class="nav"></div>

.container{
    width: 350px;
    border: 1px solid red;
    overflow: hidden;
    clear: both;
}
.box{
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 5px;
}
.nav{
    width: 100px;
    height: 100px;
    background-color: red;
}

伪对象方式

如果有父级塌陷，并且同级元素也收到了影响，还可以使用伪对象方式处理

为父标签添加伪类after,设置空的内容，并且使用clear:both;

这种情况下，父布局不能设置高度

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
</div>
<div class="nav"></div>

.container {
    width: 350px;
    border: 1px solid red;
}
.container::after {
    content: "";
    display: block;
    clear: both;
}
.box {
    width: 100px;
    height: 100px;
    background-color: #fff176;
    float: left;
    margin: 5px;
}
.nav {
    width: 100px;
    height: 100px;
    background-color: red;
}

定位

定义

position 属性指定了元素的定位类型

值	描述
relative	相对定位
absolute	绝对定位
fixed	固定定位

相对定位

<div class="box"></div>

.box{
    width: 200px;
    height: 200px;
    background-color: red;
    position: relative;
    left: 100px;
}

绝对定位

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

.box1{
    width: 200px;
    height: 200px;
    background-color: red;
    position:absolute;
    left: 50px;
}
.box2{
    width: 300px;
    height: 300px;
    background-color: green;
}

固定定位

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

.box1{
    width: 200px;
    height: 200px;
    background-color: red;
    position:fixed;
    left: 50px;
}
.box2{
    width: 300px;
    height: 300px;
    background-color: green;
}

温馨提示

设置定位之后，相对定位和绝对定位他是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档

<div class="container">
    <div class="box"></div>
</div>

.container{
    width: 300px;
    height: 300px;
    background-color: #666;
    position: relative;
    left: 200px;
}
.box{
    width: 200px;
    height: 200px;
    background-color: red;
    position:absolute;
}

Z-index

z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

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

.box1{
    width: 200px;
    height: 200px;
    background-color: red;
    position:absolute;
    z-index: 2;
}
.box2{
    width: 300px;
    height: 300px;
    background-color: green;
    position:absolute;
    z-index: 1;
}

CSS3新特性

圆角

使用 CSS3 border-radius 属性，你可以给任何元素制作 “圆角”

border-radius 属性，可以使用以下规则：

四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角
三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
一个值：四个圆角值相同

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

div{
    margin: 10px;
}
.box1 {
    border-radius: 15px 50px 30px 5px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}
.box2 {
    border-radius: 15px 50px 30px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}
.box3 {
    border-radius: 15px 50px;
    background: #8AC007;
    padding: 20px;
    width: 200px;
    height: 150px;
}

阴影

box-shadow 向框添加一个或多个阴影。

box-shadow: h-shadow v-shadow blur color;

值	描述
h-shadow	必选，水平阴影的位置
v-shadow	必选，垂直阴影的位置
blur	可选，模糊距离
color	可选，阴影的颜色

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

<div class="box"></div>

.box {
    width: 200px;
    height: 200px;
    background-color: #8ac007;
    margin: 50px;
    box-shadow: 10px 10px green;
}

给阴影添加一个模糊效果

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

.box {
    width: 200px;
    height: 200px;
    background-color: #8ac007;
    margin: 50px;
    box-shadow: 10px 10px 5px green;
}

三个方向的阴影效果

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

.box {
    width: 200px;
    height: 200px;
    background-color: #8ac007;
    margin: 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
}

动画

动画是使元素从一种样式逐渐变化为另一种样式的效果

您可以改变任意多的样式任意多的次数

请用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%

0% 是动画的开始，100% 是动画的完成。

@keyframes创建动画

使用@keyframes规则，你可以创建动画

@keyframes name {
    from|0%{
    	css样式
    }
    percent{
    	css样式
    }
    to|100%{
    	css样式
    }
}

name：动画名称，开发人员自己命名；

percent：为百分比值，可以添加多个百分比值；

animation执行动画

animation: name duration timing-function delay iteration-count direction;

值	描述
name	设置动画的名称
duration	设置动画的持续时间
timing-function	设置动画效果的速率（如下）
delay	设置动画的开始时间（延时执行）
iteration-count	设置动画循环的次数，infinite为无限次数的循环
direction	设置动画播放的方向（如下）
animation-play-state	控制动画的播放状态：running代表播放，而paused代表停止播放

timing-function值	描述
ease	逐渐变慢（默认）
linear	匀速
ease-in	加速
ease-out	减速
ease-in-out	先加速后减速

direction值	描述
normal	默认值为normal表示向前播放
alternate	动画播放在第偶数次向前播放，第奇数次向反方向播放

切换背景颜色

<div class="animation"></div>

.animation {
    width: 300px;
    height: 300px;
    background-color: red;
    animation: anima 5s linear 5s infinite;
}
.animation:hover {
    animation-play-state: paused;
}
@keyframes anima {
    0% {
        background-color: red;
    }
    50% {
        background-color: green;
    }
    100% {
        background-color: blueviolet;
    }
}

呼吸效果

<div class="box"></div>

.box {
    width: 500px;
    height: 400px;
    margin: 40px auto;
    background-color: #2b92d4;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
    animation: breathe 2700ms ease-in-out infinite alternate;
}
@keyframes breathe {
    0% {
        opacity: .2;
        box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1)
    }
    50% {
        opacity: .5;
        box-shadow: 0 1px 2px rgba(18, 190, 84, 0.76)
    }
    100% {
        opacity: 1;
        box-shadow: 0 1px 30px rgba(59, 255, 255, 1)
    }
}

媒体查询

媒体查询能使页面在不同在终端设备下达到不同的效果

媒体查询会根据设备的大小自动识别加载不同的样式

设置meta标签

使用设备的宽度作为视图宽度并禁止初始的缩放。在<head>标签里加入这个meta标签。

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">

参数解释

width = device-width 宽度等于当前设备的宽度
initial-scale 初始的缩放比例（默认设置为1.0）
maximum-scale 允许用户缩放到的最大比例（默认设置为1.0）
user-scalable 用户是否可以手动缩放（默认设置为no）

媒体查询语法

@media screen and (max-width: 768px) {
	/* 设备小于768px加载样式 */
    body{
        background-color: red;
    }
}
@media screen and (max-width: 992px) and (min-width: 768px) {
     /* 设备小于768px但小于992px加载样式  */
     body{
     	background-color: pink;
     }
}
@media screen and (min-width: 992px) {
	/* 设备大于992px加载样式 */
    body{
    	background-color: green;
   	}
}

雪碧图

CSS Sprite也叫CSS精灵图、CSS雪碧图，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去

优点

减少图片的字节
减少网页的http请求，从而大大的提高页面的性能

原理

通过background-image引入背景图片
通过background-position把背景图片移动到自己需要的位置

实例

<i class="icon1"></i>
<i class="icon2"></i>

.icon1 {
    display: block;
    background-image: url(1.png);
    background-position: -20px 0;
    width: 45px;
    height: 70px;
}
.icon2 {
    display: block;
    background-image: url(1.png);
    background-position: -93px -84px;
    width: 45px;
    height: 70px;
}

字体图标

我们会经常用到一些图标。但是我们在使用这些图标时，往往会遇到失真的情况，而且图片数量很多的话，页面加载就越慢。所以，我们可以使用字体图标的方式来显示图标，既解决了失真的问题，也解决了图片占用资源的问题

常用字体图标库：阿里字体图标库

优点

轻量性：加载速度快，减少http请求
灵活性：可以利用CSS设置大小颜色等
兼容性：网页字体支持所有现代浏览器，包括IE低版本

使用字体图标

注册账号并登录
选取图标或搜索图标
添加购物车
下载代码
选择font-class引用

<span class="iconfont icon-add-circle"></span>

<link rel="stylesheet" href="./css/iconfont.css">
.iconfont{
    font-size: 35px;
    color: red;
}

JavaScript

简介

JavaScript介绍JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”，指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的“脚本”。JavaScript 是一种嵌入式（embedded）语言。它本身提供的核心语法不算很多

JavaScript与ECMAScript的关系

ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

JavaScript语句、标识符

语句

JavaScript 程序的单位是行（line），也就是一行一行地执行。一般情况下，每一行就是一个语句

var num = 10;

语句以分号结尾，一个分号就表示一个语句结束

标识符

标识符（identifier）指的是用来识别各种值的合法名称。最常见的标识符就是变量名

标识符是由：字母、美元符号($)、下划线(_)和数字组成，其中数字不能开头

温馨提示

中文是合法的标识符，可以用作变量名（不推荐）

JavaScript保留关键字

以下关键字不需要强行记忆！

JavaScript有一些保留字，不能用作标识符：arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield。

变量

var num = 10;

变量的重新赋值

var num = 10;
num = 20;

变量提升

JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。

console.log(num);
var num = 10; // 结果是什么呢？

JavaScript引入到文件

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

嵌入到HTML文件中

<body>
	<script>
		var age = 20
	</script>
</body>

引入本地独立JS文件

<body>
	<script type="text/javascript" src="./itbaizhan.js">   		</script>
</body>

引入网络来源文件

<body>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js">	</script>
</body>

JavaScript注释与常见输出方式

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

JavaScript注释

源码中注释是不被引擎所解释的，它的作用是对代码进行解释。Javascript 提供两种注释的写法：一种是单行注释，用//起头；另一种是多行注释，放在/和/之间。

// 这是单行注释

/*
 这是
 多行
 注释
*/

嵌入在HTML文件中的注释

<!-- 注释 -->

温馨提示

注释的快捷键：ctrl + /

JavaScript输出方式

JavaScript有很多种输出方式，都可以让我们更直观的看到程序运行的结果

// 在浏览器中弹出一个对话框,然后把要输出的内容展示出来,alert都是把要输出的内容首先转换为字符串然后在输出的
alert("要输出的内容");

document.write("要输出的内容"); 

// 在控制台输出内容
console.log("要输出的内容");

数据类型

数据类型分类

JavaScript 语言的每一个值，都属于某一种数据类型。JavaScript 的数据类型，共有六种。（ES6 又新增了第七种 Symbol 类型的值和第八种 BigInt类型，当前课程暂不涉及）

数据类型分类

原始类型(基础类型)

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

var age = 20;
var name = "尚学堂";
var learn = true;

合成类型(复合类型)

对象：因为一个对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

var user = {
    name:"尚学堂",
    age:20,
    learn:true
}

温馨提示

至于undefined和null，一般将它们看成两个特殊值。

typeof运算符

JavaScript 有三种方法，可以确定一个值到底是什么类型。而我们现在需要接触到的就是typeof

数值返回number

typeof 123 // "number"

字符串返回string

typeof '123' // "string"

布尔值返回boolean

typeof false // "boolean"

对象返回object

typeof {} // "object"

unll和undefined的区别

null与undefined都可以表示“没有”，含义非常相似。将一个变量赋值为undefined或null，老实说，语法效果几乎没区别。既然含义与用法都差不多，为什么要同时设置两个这样的值，这不是无端增加复杂度，令初学者困扰吗？这与历史原因有关

运算符之算术运算符

加减乘除运算符

加减乘除运算符就是基本的数学运算符效果

10 + 10; // 20
100 - 10; // 90
10 * 2; //20
10 / 5; 2

余数运算符

余数运算符是比较常用的，因为在逻辑思维上寻找规律，余数运算符是很好用的

13 % 5 // 3

自增和自减运算符

自增和自减运算符，是一元运算符，只需要一个运算子。它们的作用是将运算子首先转为数值，然后加上1或者减去1

var x = 1;
var y = 1;
++x // 2
--y // 0

自增和自减运算符有一个需要注意的地方，就是放在变量之后，会先返回变量操作前的值，再进行自增/自减操作；放在变量之前，会先进行自增/自减操作，再返回变量操作后的值。

var x = 1;
var y = 1;

x++ // 1
++y // 2

var x = 10;
var y = 20;
console.log(x++ + y);// 30

运算符之赋值运算符

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

赋值运算符（Assignment Operators）用于给变量赋值

最常见的赋值运算符，当然就是等号（=）

// 将 1 赋值给变量 x
var x = 1;

// 将变量 y 的值赋值给变量 x
var x = y;

赋值运算符还可以与其他运算符结合，形成变体。下面是与算术运算符的结合

// 等同于 x = x + y
x += y

// 等同于 x = x - y
x -= y

// 等同于 x = x * y
x *= y

// 等同于 x = x / y
x /= y

// 等同于 x = x % y
x %= y

运算符之比较运算符

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

比较运算符用于比较两个值的大小，然后返回一个布尔值，表示是否满足指定的条件。

2 > 1 // true

JavaScript 一共提供了8个比较运算符。

比较运算符	描述
<	小于运算符
>	大于运算符
<=	小于或等于运算符
>=	大于或等于运算符
==	相等运算符
===	严格相等运算符
!=	不相等运算符
!==	严格不相等运算符

“”和“=”的区别

==：双等比较值

===：三等比较值和类型

运算符之布尔运算符

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

取反运算符（!）

布尔值取反

!true // false
!false // true

非布尔值取反

对于非布尔值，取反运算符会将其转为布尔值。可以这样记忆，以下六个值取反后为true，其他值都为false。

温馨提示

undefined
null
false
0
NaN
空字符串（‘’）

!undefined // true
!null // true
!0 // true
!NaN // true
!"" // true

!54 // false
!'hello' // false

且运算符（&&）

多个条件都要满足

如果一个人一直做好事，突然有一天做了一件坏事，那么人们会认为这个人很虚伪，以前说不定都是装的！对这个人不在认可

console.log(10 < 20 && 10 >5); // true

或运算符（||）

满足一个条件即可

如果一个人一直做坏事，突然有一天做了一件好事，那么人们会认为这个人其实还不错，以前也许是另有原因！对这个人突然就认可了

console.log(10 < 20 || 10 < 5); // true

条件语句之 if语句

if结构先判断一个表达式的布尔值，然后根据布尔值的真伪，执行不同的语句。所谓布尔值，指的是 JavaScript 的两个特殊值，true表示真，false表示伪。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

if语句语法规范

if (布尔值){
   语句; 
}

需要注意的是，“布尔值”往往由一个条件表达式产生的，必须放在圆括号中

var m = 3;
if (m === 3) {
    m++;
}
console.log(m); // 4

注意，if后面的表达式之中，不要混淆赋值表达式（=）、严格相等运算符（=）和相等运算符（）。尤其是赋值表达式不具有比较作用。

var x = 1;
var y = 2;
if (x = y) {
    console.log(x);
}

条件语句之 if…else

if…else基本结构

if代码块后面，还可以跟一个else代码块，表示不满足条件时，所要执行的代码。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

if (m === 3) {
  // 满足条件时，执行的语句
} else {
  // 不满足条件时，执行的语句
}

多个if…else连接

对同一个变量进行多次判断时，多个if…else语句可以连写在一起。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

if (m === 0) {
  // ...
} else if (m === 1) {
  // ...
} else if (m === 2) {
  // ...
} else {
  // ...
}

if…else嵌套

var eat = true;
var food = "猪肉炖粉条";
if (eat) {
    if (food == "双椒鱼头") {
        console.log('双椒鱼头');	
    }else{
        console.log("猪肉炖粉条");
    }
} else {
    console.log('不吃了');
}

else代码块总是与离自己最近的那个if语句配对。

条件语句之 switch

多个if…else连在一起使用的时候，可以转为使用更方便的switch结构

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

switch (fruit) {
  case "banana":
    // ...
    break;
  case "apple":
    // ...
    break;
  default:
    // ...
}

需要注意的是，每个case代码块内部的break语句不能少，否则会接下去执行下一个case代码块，而不是跳出switch结构。

var x = 1;

switch (x) {
  case 1:
    console.log('x 等于1');
  case 2:
    console.log('x 等于2');
  default:
    console.log('x 等于其他值');
}
// x等于1
// x等于2
// x等于其他值

三元运算符

JavaScript还有一个三元运算符（即该运算符需要三个运算子）?:，也可以用于逻辑判断。

(条件) ? 表达式1 : 表达式2

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

这个三元运算符可以被视为if…else…的简写形式，因此可以用于多种场合。

判断一个整数是奇数与偶数

if…else语句

var n = 100;
if (n % 2 === 0) {
  console.log("偶数");
} else {
  console.log("奇数");
}

三元运算符

var n = 100;
n % 2 === 0 ? '偶数' : '奇数'

循环语句之for

循环语句用于重复执行某个操作

for语句就是循环命令，可以指定循环的起点、终点和终止条件。它的格式如下

for (初始化表达式; 条件; 迭代因子) {
  语句
}

for语句后面的括号里面，有三个表达式。

初始化表达式（initialize）：确定循环变量的初始值，只在循环开始时执行一次。
布尔表达式（test）：每轮循环开始时，都要执行这个条件表达式，只有值为真，才继续进行循环。
迭代因子（increment）：每轮循环的最后一个操作，通常用来递增循环变量。

var x = 3;
for (var i = 0; i < x; i++) {
  console.log(i);
}

for语句的三个表达式，可以省略任何一个，也可以全部省略。

for ( ; ; ){
  console.log('Hello World');
}

温馨提示

如果三个都省略，结果就导致了一个无限循环（死循环）

for循环语句实操

循环输出1~100之间数字的和

var sum=0;
for(var i=1;i<=100;i++){
    sum+=i;
}
console.log(sum);

循环输出1000以内的奇数

for(i = 0 ; i<1000; i ++){
    if( i % 2 ==1){
        console.log( i + " ");   
    }
}

打印九九乘法表

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

for(var i = 1;i <= 9;i++){
    document.write("<br>"); 
    for(var j = 1;j <= i;j++){
        sum = i * j;
        document.write(i ,"*",j ,"=",sum," ");
    }
}

循环语句之while

While语句包括一个循环条件和一段代码块，只要条件为真，就不断循环执行代码块。

while (条件) {
  语句;
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

while例子

var i = 0;
while (i < 100) {
  console.log('i 当前为：' + i);
  i = i + 1;
}

下面的例子是一个无限循环，因为循环条件总是为真

while (true) {
  console.log('Hello, world');
}

所有for循环，都可以改写成while循环

// for
var x = 3;
for (var i = 0; i < x; i++) {
  console.log(i);
}

// while
var x = 3;
var i = 0;
while (i < x) {
  console.log(i);
  i++;
}

break 语句和 continue 语句

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

break语句和continue语句都具有跳转作用，可以让代码不按既有的顺序执行

break

break语句用于跳出代码块或循环

for (var i = 0; i < 5; i++) {
    if (i === 3){
        break;
    }
    console.log(i);
}

continue

continue语句用于立即终止本轮循环，返回循环结构的头部，开始下一轮循环

for (var i = 0; i < 5; i++) {
    if (i === 3){
        continue;
    }
    console.log(i);
}

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

字符串

字符串就是零个或多个排在一起的字符，放在单引号或双引号之中

'itbaizhan'
"itbaizhan"

单引号字符串的内部，可以使用双引号。双引号字符串的内部，可以使用单引号

'key = "value"'
"It's a long itbaizhan"

如果要在单引号字符串的内部，使用单引号，就必须在内部的单引号前面加上反斜杠，用来转义。双引号字符串内部使用双引号，也是如此

'Did she say \'Hello\'?'
// "Did she say 'Hello'?"

"Did she say \"Hello\"?"
// "Did she say "Hello"?"

温馨提示

字符串默认只能写在一行内，分成多行将会报错

如果长字符串必须分成多行，可以在每一行的尾部使用反斜杠

var longString = 'Long \
long \
string';
longString
// "Long long long string"

length 属性

length属性返回字符串的长度，该属性也是无法改变的

var s = 'itbaizhan';
s.length // 9

待续。。。。

运算符（即该运算符需要三个运算子）?:，也可以用于逻辑判断。

(条件) ? 表达式1 : 表达式2

[外链图片转存中…(img-gRTj6Vi9-1696768266910)]

这个三元运算符可以被视为if…else…的简写形式，因此可以用于多种场合。

判断一个整数是奇数与偶数

if…else语句

var n = 100;
if (n % 2 === 0) {
  console.log("偶数");
} else {
  console.log("奇数");
}

三元运算符

var n = 100;
n % 2 === 0 ? '偶数' : '奇数'

循环语句之for

循环语句用于重复执行某个操作

for语句就是循环命令，可以指定循环的起点、终点和终止条件。它的格式如下

for (初始化表达式; 条件; 迭代因子) {
  语句
}

for语句后面的括号里面，有三个表达式。

初始化表达式（initialize）：确定循环变量的初始值，只在循环开始时执行一次。
布尔表达式（test）：每轮循环开始时，都要执行这个条件表达式，只有值为真，才继续进行循环。
迭代因子（increment）：每轮循环的最后一个操作，通常用来递增循环变量。

[外链图片转存中…(img-tJqqvL1x-1696768266910)]

var x = 3;
for (var i = 0; i < x; i++) {
  console.log(i);
}

for语句的三个表达式，可以省略任何一个，也可以全部省略。

for ( ; ; ){
  console.log('Hello World');
}

温馨提示

如果三个都省略，结果就导致了一个无限循环（死循环）

for循环语句实操

循环输出1~100之间数字的和

var sum=0;
for(var i=1;i<=100;i++){
    sum+=i;
}
console.log(sum);

循环输出1000以内的奇数

for(i = 0 ; i<1000; i ++){
    if( i % 2 ==1){
        console.log( i + " ");   
    }
}

打印九九乘法表

[外链图片转存中…(img-sZXF7HYI-1696768266911)]

for(var i = 1;i <= 9;i++){
    document.write("<br>"); 
    for(var j = 1;j <= i;j++){
        sum = i * j;
        document.write(i ,"*",j ,"=",sum," ");
    }
}

循环语句之while

While语句包括一个循环条件和一段代码块，只要条件为真，就不断循环执行代码块。

while (条件) {
  语句;
}

[外链图片转存中…(img-jnpoZyAC-1696768266911)]

while例子

var i = 0;
while (i < 100) {
  console.log('i 当前为：' + i);
  i = i + 1;
}

下面的例子是一个无限循环，因为循环条件总是为真

while (true) {
  console.log('Hello, world');
}

所有for循环，都可以改写成while循环

// for
var x = 3;
for (var i = 0; i < x; i++) {
  console.log(i);
}

// while
var x = 3;
var i = 0;
while (i < x) {
  console.log(i);
  i++;
}

break 语句和 continue 语句

[外链图片转存中…(img-uZNonKwr-1696768266911)]

break语句和continue语句都具有跳转作用，可以让代码不按既有的顺序执行

break

break语句用于跳出代码块或循环

for (var i = 0; i < 5; i++) {
    if (i === 3){
        break;
    }
    console.log(i);
}

continue

continue语句用于立即终止本轮循环，返回循环结构的头部，开始下一轮循环

for (var i = 0; i < 5; i++) {
    if (i === 3){
        continue;
    }
    console.log(i);
}

[外链图片转存中…(img-GdK8Xej7-1696768266912)]

字符串

字符串就是零个或多个排在一起的字符，放在单引号或双引号之中

'itbaizhan'
"itbaizhan"

单引号字符串的内部，可以使用双引号。双引号字符串的内部，可以使用单引号

'key = "value"'
"It's a long itbaizhan"

如果要在单引号字符串的内部，使用单引号，就必须在内部的单引号前面加上反斜杠，用来转义。双引号字符串内部使用双引号，也是如此

'Did she say \'Hello\'?'
// "Did she say 'Hello'?"

"Did she say \"Hello\"?"
// "Did she say "Hello"?"

温馨提示

字符串默认只能写在一行内，分成多行将会报错

如果长字符串必须分成多行，可以在每一行的尾部使用反斜杠

var longString = 'Long \
long \
string';
longString
// "Long long long string"

length 属性

length属性返回字符串的长度，该属性也是无法改变的

var s = 'itbaizhan';
s.length // 9

待续。。。。

html css js

前端

HTML5

HTML5简介和基础骨架

HTML5介绍

HTML5的DOCTYPE声明

html标签

head标签

body标签

title标签

meta标签

标签

标签之标题

标签之段落

换行

水平线

标签之图片

图片路径详解

标签之超文本链接

超链接属性

标签之文本

列表标签之有序列表

type属性

列表标签之无序列表

type属性

标签之表格

表格展示效果

表格单元格合并

单元格合并属性

Form表单

表单元素

表单元素

文本框

密码框

提交按钮

块元素与行内元素（内联元素）

HTML5新增标签

css

ccs简介

CSS概念

为什么需要CSS

CSS的引入方式

内联样式（行内样式）

内部样式

外部样式（推荐）

选择器

选择器一

全局选择器

元素选择器

类选择器

ID选择器

合并选择器

选择器的优先级

属性

字体属性

color

font-size

font-weight

font-style

font-family

背景属性

background-color属性

background-image属性

background-repeat属性

background-size属性

background-position属性

文本属性

text-align

text-decoration

text-transform

text-indent

表格属性

表格边框

折叠边框

表格宽度和高度

表格文字对齐

表格填充

表格颜色

关系选择器

后代选择器