【前端的开幕】

愛睡覺.

已于 2023-08-14 17:13:14 修改

阅读量65

点赞数

文章标签：前端 chrome

于 2023-07-31 18:07:24 首次发布

本文链接：https://blog.csdn.net/weixin_72430442/article/details/131673956

版权

HTML5 基础

HTML简介

HyperTextMarkupLanguage）是一种超文本标记语言.
- “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
HTML不是一种编程语言；
HTML5是HTML的最新版本

HTML结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

基础标签

加粗： < b>< /b>;< strong>< /strong>

<b>热爱学习</b>

倾斜：< i>< /i>;< em>< /em>

<i>热爱学习</i>

删除线: < del>< /del>

iphone14pro max 原价：<del>13000</del>

下划线: < ins>< /ins>

现价：<ins>99</ins>包邮

上标: < sub>< /sub>

孙泽凡<sub>2</sub>=范树琛<sup>2</sup>

下标： < sup>< /sup>

孙泽凡<sub>2</sub>=范树琛<sup>2</sup>

缩写： < abbr title=“”>< /abbr>

<abbr 	title="热爱学习">范树琛</abbr>

标记：< mark>< /mark>

<mark>享受生活可以得到什么？？？</mark>

文本： < span>< /span>

   <span>会得到什么呢？</span>

标题： h1-h6

<h1>好好学习，好好休息</h1>
   	<h2>好好学习，好好休息</h2>
   	<h3>好好学习，好好休息</h3>
   	<h4>好好学习，好好休息</h4>
   	<h5>好好学习，好好休息</h5>
   	<h6>好好学习，好好休息</h6>

换行: < br />

<p>这个世界从来不缺乏机遇，而是缺少抓住机遇的手。<br />
   	如果有想法就要赶紧付出行动，别担心失败或者困难重重
   	，只有在不停地实践与追求中，你才能超越自我，
   	创造属于自己的辉煌！</p>

字体标签： < font > </ font>

<font color="aqua" size="5" ><b>热爱学习</b> 	</font>

段落标签：< p>< /p>

<p>这个世界从来不缺乏机遇，而是缺少抓住机遇的手。<br />
   	如果有想法就要赶紧付出行动，别担心失败或者困难重重
   	，只有在不停地实践与追求中，你才能超越自我，
   	创造属于自己的辉煌！</p>

常用标签

路径

相对路径：相对于某一个文件进行引入的，那么就相当于是兄弟关系，如果是在文件的内部引入中那么就是子文件
绝对路径：就是从盘符开始，是文件的真正的一个所在位置Window对斜线进行了处理，所以/和\都能够引入成功，但是网络地址只能写斜线。

图片标签

img>
属性：
src引入图片地址
alt替换文本
title提示信息
width宽height高

<img src="file:///C:/Users/dell/Desktop/美照/微信图片_20230717090518.jpg" width=" 100" height="80" />

链接标签

< a href=“url”>< /a>
属性：
href地址、
target目标位置
target属性值：
_blank:新窗口打开
_top:顶级窗口打开

	
	<a href="https://www.runoob.com/ "  target="_blank">>html5,从这里开始！！！</a><br />

标签的作用

打开外部文件

<a href="https://www.runoob.com/">html5,从这里开始！！！</a>

打开内部文件

<a href="21560219 范树琛.html">跳转到本地页面</a>

打开一张图片

<a href="./img/1.ico">logo</a>

书写简单的javascript（）

	<a href="javascript:alert('换个身法')">你敢点吗</a><br />

锚点
- 创建锚点
- 引用锚点

<a name="top"></a>
		<a id="top01"></a>
	<a href="#top">回头</a>

滚动标签

< marquee>滚动字幕</ marquee>
属性：
direction：方向（left、right）
behavior：滚动方式（scroll、slide、alternate）
scrollamount：速度，值是正数默认为6
scrolldelay：时间，值是正数默认为0。单位毫秒
οnmοuseοver=“stop()”：鼠标悬浮停止移动
οnmοuseοut=“start()”：鼠标离开开始移动

<marquee behavior="scroll" direction="right" scrollamount="8" scrolldelay="5"  onmouseover="stop()" onmouseout="start()">	 
iphone14pro max 原价：<del>13000</del> 现价：<ins>99</ins>包邮 <br /></marquee>

水平线

< hr/>
属性：
width:长度（px|%）
align：水平位置(left左|center中|right右）
color：线的颜色
size：粗细（px）

<hr width="5000" size="5" color="cadetblue" align="left" />

媒体

我们可以使用< video>和< audio>标签来显示视频和音频
多媒体元素也拥有带有不同扩展名的文件格式，比如.swf、.wmv、.mp3以及.mp4。

<video src="./215602+范树琛+落日来相依.mp4" controls width="300px" height="350px"></video><br />
<audio src="寻水的鱼%20许飞.mp3" controls>歌曲</audio>

HTML中的表

列表

有序列表

< ol type=””(序号的样式) start=”10” reversed(倒序) >
< li></ li>
< /ol>

无序列表

< ul type=”squire”(序号的样式disc 实心圆、circle 心圆、square实心方框) >
< li>< /li>
< /ul>

自定义

< dl>
< dd></ dd>
< /dl>

表格

表格由< table>标签来定义。每个表格均有若干行（由< tr>标签定义），每行被分割为若干单元格（由< td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

<table border=”1px”(线宽)  width=“”style="text-align:center（文字居中）;cellspacing="10px”（属性-定义表格单元格之间的空间）cellpadding="20px（属性-表示单元格边框与单元格内容之间的距离）>
<caption>标题</caption>
<tr>(行)
<th>表头</th>
   <td colspan=“2”（合并单元格‘列’）><img src= (加图片)></td>（列）
   <td></td>（列）
</tr>
<tr>(行)
   <td rowspan=”2”(合并单元格’行’) style="background-image:（背景照片）></td>（列）
   <td></td>（列）
</tr>
<tr>(行)
   <td></td>（列）
</tr>
</table>

表单

表单：HTML 表单用于收集不同类型的用户输入
通过 < input type=“text”> 标签来设定，当用户要在表单中键入
字母、数字等内容时，就会用到文本域

<label for="user">邮箱:</label><input type="text" name="" id="user" /><br />
<label for="paw">密码:</label><input type="password"（注意:密码字段字符不会明文显示，而是以星号或圆点替代） name="" id="paw"><br />

单选按钮（Radio Buttons）

性别:<input type="radio" name="sex" id="">女<input type="radio"name="sex" id="">男<br />

复选框（Checkboxes）

爱好：<input type="checkbox" name="hobby" id="" />敲代码
					<input type="checkbox" name="hobby" id="" />敲三遍
					<input type="checkbox" name="hobby" id="" />看海绵宝宝<br />

提交按钮 (Submit Button)

<input type="submit"  value="提交"/>

下拉选框

<select name="" id="">
						<option value="">欣知开发22部</option>
						<option value="">欣知开发21部</option>
						<option value="">欣知开发20部</option>
						<option value="">欣知开发19部</option>
						<option value="">欣知开发18部</option>
					</select><br>

文本域

<textarea name="" id=" cols="30” (宽)rows="10"（高）style="resize:none;（禁止拉伸）></textarea

点击拖拉

<input type="range" name="points" min='e”max="100".id=">

框架

整合框架

不能放在body里
< frameset cols=“50%,*” >
< frame src=“1.html” />
< frame src=“2.html” />
< /frameset>

内联框架

< iframe src=“” width=“500” height=“600"scrolling=”"(规定是否在框架中显示滚动条)name = “add”>< /iframe>
先给内联创建一个名字
< a href =”” target=add> < /a>

CSS

Html 和css 结构样式分离，写法上html 属性和属性值用=拼接，css属性和属性值用：拼接

层叠样式表

层叠：同一个元素使用了不同的样式表，所有的样式进行叠加就叫做层叠
冲突：同一个元素设置相同的属性会造成冲突，遵循就近原则选择属性值
继承：在子父关系中，文本样式可以被继承，布局样式不可继承（块级子元素可以继承父的宽，行级不行）

写法一：内联样式——标签开端里style

<p style="color: #8A2BE2; background-color: #BDB76B;">人生是什么？？？？？？？？？？？？？</p>

写法二：内部样式——< head>< style>< /style>(标签)< head>

	<style>
	p{
		font-size: 8;
		color: #BA55D3;
	}
	</style>

写法三：外部样式——< link>（优先） @import url(‘./class1.css’);

<link rel="stylesheet" href="./0802.css" />


</style >
		@import url("./0802.css");
	</style>

引入外部样式表的方法Link与@inport的区别

	@import	Link
从属关系区别	是CSS提供的语法规则，只有带入样式表的作用	是HTML提供的标签，不仅可以加载CSS文件，还可以定义链接属性
加载顺序区别	加载页面时，@import引入的样式表在页面加载完毕后被加载	同时加载

颜色表示

颜色（color background-color）
1.用英文单词
2.16进制
3.Rgb（0-255，0-255，0-255）
4.Rgba（0-255，0-255，0-255，0-1【透明度】）

选择器

标签选择器
全局选择器（*）

*{
	margin: 0;
	padding: 0;
}

class 选择器（可以多个相同）

/* .W {
		color: aqua;
	} */
	<li class="W">33333</li>

id #（只能单个）

/* #q {
		background-color: antiquewhite;
	} */ 
	<li id="q">11111</li>

群组选择器（，）

b,a{
		background-color: aquamarine;
	}
	<b>孙泽凡</b><br>
		<a href="https://baijiahao.baidu.com/">个人介绍</a>

层次选择器

子代选择器（>）

/* ul>li{
		color: palevioletred;
	} */
	<ul class="qq">
	<li class="W">33333</li>
	<li id="q">11111</li>

后代选择器（空格）

/* .qq li{
		font: "黑体";
		font-size: 8;
		color: brown;
	} */
	<ul class="qq">
	<li class="W">33333</li>

相邻兄弟（+）

/* .ss+p{
		background-color: blue;
	} */
	<a href="" class="ss">好好学习</a>
		<p style="color: #8A2BE2; background-color: #BDB76B;">人生是什么？？？？？？？？？？？？？</p>

通用兄弟（~）

/* .qq>li~a{
		background-color: coral;
	} */
	<ul class="qq">
			
			<a href="">怎样好好学习</a>
		</ul>

伪类选择器
ui 伪类 a标签使用

默认link

	.c+a:link{background-color: salmon;}

访问过 visited

.c+a:visited{background-color: mediumorchid;}

鼠标悬浮hover

.c+a:hover{background-color: darkkhaki;}

鼠标按下 active

.c+a:active{background-color: blueviolet;}

结构伪类 nth-child

	ul li:nth-child(3){background-color:deeppink ;}

CSS样式

css文字样式（可以被继承）

font-size：（文字大小）
font-weight：bold（文字粗细）
font-style:italic;(文字倾斜)
font-family：“”；（文字字体）
引用外部字体：@font-face

body div{
font-size: 30px;
font-weight: bold;
font-style: italic;
font-family: sun;
font-variant: small-caps;
}
@font-face {
font-family: sun;
src: ur1(./wesley _ .ttf);
}

文本样式

文本阴影：text-shadow：；（水平阴影竖直阴影模糊度颜色）
文本颜色：color：；
文本样式：text-decoration: ;（可以叠加）
【下划线: underline
删除线: line-througt
上划线: overline
无装饰: none】
text-transform: ；
【文本大小写 (针对英文段落)
小写: lowercase
大写: uppercase
只针对首字母大写:capitalize】
文本缩进： text-indent: 2em;（值=只在p标签）
文本对齐：text-align：；
【center 居中
right 右对齐
justify 两端对齐】
文本行高：line-height：；（一般用来做竖直位置上居中效果）
强制换行： word-wrap: break-word;可能产生留白
overflow:设置文本溢出效果 direction:设置文本方向
word-warp:允许对长的不可分割的单词进行分割转换至下-行
white-space: nowrap; 文本不换行
word-break…等等
强制分割 word-break: break-all;
letter-spacing:字之间的间距
word-spacing:定义词间距(针对英文)

CSS背景

background-image: url(./img/1.jpg);
background-repeat: no-repeat; （背景照片不重复）
background-position:center;（背景定位）
background-attachment; fixed;（背景固定）
background-size：；
【cover=100%：背景覆盖完全，照片可能不完全展示
contain：照片宽或者高一边完全覆盖，图片展示完整
】
background-origin 规定背景图片的定位区域。
【padding-box 背景图像相对与内边距框来定位
border-box 背景图像相对于边框盒来定位。
content-box 背景图像相对于内容框来定位。】
background-clip:（背景裁剪）

CSS边框

border：（线宽线样式颜色）

dashed: 虚线边框
dotted: 点线边框
double: 双线边框
groove: 3D凹槽边框
ridge: 3D凸槽边框
inset: 3D内嵌边框
outset: 3D外嵌边框
none: 无边框
hidden:隐藏边框

.box1{
width: 100px;
height: 100px;
border: 1px groove  black;
 border-width:200px;
 border-top-color: transparent;
 border-left-color: transparent;
 border-bottom-color:transparent;
 border-style: solid;
 border-right-color:green;

transparent（透明色）
盒阴影box-shadow: 2px 2px 3px gray;

div:hover{
		box-shadow:  12px 30px 20px 3px gray;transition: 0.3s;
	}

CSS盒模型

元素的尺寸

height 设置元素的高度。属性值：auto：默认。/px、cm 等
单位定义高度。/百分比
欣知大数据—孙也
width 设置元素的宽度属性值：auto：默认。/px、cm 等单
位定义高度。/百分比

padding

属性：元素的内边距
padding-top 属性设置元素的上内边距（空间）。
padding-right 属性设置元素右内边距（空白）。
padding-bottom 属性设置元素的下内边距（底部空白）。
padding-left 属性设置元素左内边距（空白）。
padding 属性接受长度值或百分比值，但不允许使用负值。

1个参数代表上下左右的数据
2个参数第一个代表上下第二个代表左右的数据
3个参数第一个代表上第二个代表左右第三个参数代表下的数据
4个参数上右下左

border

属性：元素的边框，是围绕元素内容和内边距的一条或多条线。
border-width
border-style
solid 定义实线。/dotted 定义点状边框/double
定义双线… o border-color

margin

margin-top 属性设置元素的上外边距（空间）。
margin-right 属性设置元素外内边距（空白）。
margin-bottom 属性设置元素的下外边距（底部空白）。
margin-left 属性设置元素左外边距（空白）。
margin 属性接受长度值或百分比值，允许使用负值。

外边距居中条件：一定要有宽：使用margin：0px auto；【行级先变块级：display：block；】

两种盒子模型

标准盒模型 div宽=内容的宽
怪异盒模型 div宽=内容宽+border+padding
（box-sizing:border-box;）

css其他属性

1.opacity: 选明度设定

rgba 带透明度的颜色 transparent 透明色 opacity： 0-1；

2.鼠标的样式 cursor:

box1: hover{ opacity: 0;（鼠标悬浮消失） cursor: pointer; （鼠标悬浮变手） }

3.溢出的处理

overflow：hidden；（超出盒子内容消失） scroll；（超出盒子内容可滚动查看） auto；同上

4.display ：none（隐藏）
display： block（显示）
在这里插入图片描述

5.浮动 float

上左右下布局顺序文档流：包含元的素布局宽高背景颜色等等文本流：包含文字元素内容左浮动不脱离文本流脱离文档流右浮动
即脱离文本流右脱离文档流

6.浮动带来的问题

对自身影响都脱离文档流对兄弟改变了布局，对父级造成了坍塌清楚浮动： 给父容器设置高（不推荐）
在使用了浮动元素之后添加一个空的块级元素（clear：borth；）

after 伪类清浮动（在浮动元素的父级清除浮动）

在父容器上添加溢出隐藏属性 overflow: hidden;

定位

定位机制

CSS 有三种基本的定位机制:普通流、:浮动和绝对定位。除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在
(X)HTML 中的位置决定。（普通流顺序：上左右下）

定位

position：static；（默认按照普通流顺序排列）

相对定位(position:relative)
【当无偏移量时：原来位置不变
根据原自身位置定位当有偏移量时：position:relative； top:100px; left: 200px; 既不脱离文档流也不脱离文本流。】

绝对定位(position:absolute)

【当无偏移量时：原来位置不变

当有偏移量时：position: absolute;
top:90px; 既脱离文档流也脱离文本流】
父级没定位根据窗口定位

父级有定位根据父级定位

固定定位(position:fixed)

【当无偏移量时：原来位置不变
当有偏移量时 position: fixed; top:10px；
永远根据窗口定位既脱离文档流也脱离文本流
】

粘性定位（position：sticky）

position：sticky； top：10px；
当没达到偏移量是相对定位，原来位置不变
当达到偏移量是固定定位：

z-index 设置元素的堆受顺序。

【要求元素必须要使用了定位】

CSS渐变和动画

渐变

线性渐变：background-image: linear-gradient(red，green）红色渐变绿色；
- 【默认渐变方向从上到下，（to right，red，green）改变渐变方向自左到右
- （to right botto,，red，green）左上到右下
- （60deg，red，green ）角度；可以多种颜色可以设置颜色占的百分比（像素）】
重复性渐变：background-image: repeating-linear-gradient
径向渐变： background: radial-gradient
- background: radial-gradient(circle,red ,blue, orange）（正圆）
- background: radial-gradient( circle at top,red ,blue,orange)（圆心在顶部）
- background:orange；
- background: repeatingfradial-gradient( circle 50px,red ,orange（重复）

动画效果-变形

transform: 2D变形
- 位移：translate：transform（x轴，y轴）
- 缩放：transform: scale（0.5）
- 旋转：transform:rotate（90deg）(默认以中心旋转)
- transform-origin: right bottom;（更改旋转中心为右下角）
- 倾斜：transform: skew（）
transform: 3D变形
- translate3d(x,y,z) 定义 3D 转换。
- translateY(y) 定义转换，只是用 Y 轴的值。
- translateX(x) 定义转换，只是用 X 轴的值。
- translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
动画效果-过度
- 过渡动画:transition: 0.3s;
- 过渡动画的属性:
- transition-property规定应用过渡的 CSS属性的名称。
- transition-timing-function 规定过渡效果的时间曲线。默认是ease"

动画效果-关键动画

.@keyframes 设定动画规则。
- name 必须定义动画的名称
- 0-100%/from…to… 必须，动画时长的百分比
- ,需要变化的 CSS 样式属性。必须

布局

表格布局

大盒子定义为表格
里面的子元素变为单元格
display：table-cell（单元格）；

浮动

先给大盒子定义宽高，再给三个子元素左中右进行左浮水平排列再设置三个子元素的内容和占比清除浮动

定位

【固定布局，使用标准px单位
流式布局，使用百分比】
先给大盒子定义宽高相对定位，三个子元素设置宽高背景色绝对定位（依据大盒子）设置距离顶部和左边距离

多列布局

段落设置缩进行高，给标题设置居中和背景色
内容定义为section

弹性布局

Flex

Flex 也叫弹性布局是一种非常流行的 web 页面快速布局解决方案Flex 也可以实现子元素在父元素中自动伸缩，特别适合移动端布局
display:flex ;(定义在父盒子里)

【默认主轴方向是x轴，起始线是左边开始 flex-direction：改变主轴方向 row x轴为主轴；colum y轴为主轴；
row-reverse x轴为主轴起始线从右边开始；colum-reverse y轴为主轴起始线从下开始；
flex-wrap(适用于父类容器上)设置或检索伸缩盒对象的子元素超出父容器时是否换行. wrap
对超出父元素的子元素进行换行（如果没有将会对子元素压缩）综合属性： flex-flow：{将flex-direction
flex-wrap 元素结合 } justify-content (适用于父类容器上) 设置或检索弹性盒子元素在主轴方向上的对齐方式
flex-start : 弹性盒子元素将向行起始位置对产 flex-end: 弹性盒子元素将向行结束位置对齐 center:
弹性盒子元素将向行中间位置对齐 space-between:弹性盒子元素会平均地分布在父里
space-around：将除子元素的空间等比例分成子元素的两倍并分布在每子元素的两边分布 space-evenly：平均分配剩余空间
align-items (适用于父类容器上) 设置或检索弹性盒子元素在侧轴方向上的对齐方式

align-self)设置或检索子元素自身在侧轴方向上的对产方式

】先给子盒子定义了基础属性

再给父盒子定义了 display：flex；以及宽高