wed前端基础最新整理(收藏版)-CSDN博客

本文链接：https://blog.csdn.net/weixin_45846235/article/details/107898850

第一周学习总结

day0804

项目开发流程

客户端或产品确定需求----->UI设计师----->前端开发---->后端开发---->测试

web页面的组成部分

结构 HTML 表现 CSS 行为JS

HTML的语法

双标记或常规标记

<标记属性=“属性值”></标记>

单标记或者空标记

<标记属性=“属性值”>

常用标签

01.文本标题

<h1>.....</h1>
<h2>.....</h2>
<h3>.....</h3>
<h4>.....</h4>
<h5>.....</h5>
<h6>.....</h6>

02.段落

<p>...</p>

03.加粗

<b>...</b>
<strong>...</strong>

04.倾斜

<i>...</i>
<em>...</em>

05.水平线和强制换行

水平线
<hr>
强制换行
<br>

06.上标与下标

<sup></sup>    上标
<sub></sub>    下标

07.特殊符号

&nbsp; 空格  &copy; 版权© &reg; 商标®

08.列表类

<ul>
    <li>无序列表</li>
    <li>无序列表</li>
</ul>
<默认是实心圆,改变样式可以给ul添加type="square/circle/onoe/disc">
----------------------
<ol type="A" start="4">
    <li>有序列表</li>
    <li>有序列表</li>
</ol>
type类型  start开始
----------------------
<dl>
    <dt>可以是图片也可以是文字</dt>
    <dd>相关文字</dd>
</dl>

09.插入图片

<img src="图片路径" title="鼠标悬停上去的提示信息" alt="图片不显示后的提示信息"/>
----------------------------------------
绝对路径:文件真正的存在路径
相对路径:相对于自己目标文件的位置

10.超链接

<a href="路径" title="鼠标悬停上去的提示信息" target="规定在何处打开文档">内容</a>
注意:targrt有两个值 _self为默认值 _blank为新窗口打开

11.div标签

div用老划分页面区域.

day0805

12.数据表格的创建

<table>    <!-- 创建表格 -->
    <tr>   <!-- tr 表示行 -->
        <td></td>   <!-- td 表示单元格 -->
        <td></td>
    </tr>
</table>

表格的相关属性:

宽度 width
高度 height
边框 border
边框颜色 bordercolor
背景颜色 background
文字水平对齐 align=“left 或 right 或center”
文字垂直对齐 valign=“top 或 middle 或 bottom”
cellspacing=“单元格与单元格之间的距离” 必须给table
cellpadding=“单元格与内容之间的间隙” 必须给table
合并单元格属性

colspan=“所要合并的单元格的列数” 合并列 必须给td

rowspan="所要合并的单元格的行数"合并行,必须给td

HTML表单

作用:收集用户信息

表单的创建

<form action="指向给定的页面" method="get默认值/post"></form>
------------------------------------------------------
get与post的区别:
1.get是获取数据 post是传送数据
2.get在数据的传送的时候,用户可以在地址栏上看到传送的过程,post在传送的过程中用户看不到
3.get安全性比较低,post安全性高
4.get的数据量较小,post是不受限制的
5.get和post后期js操作的时候方法不一样

输入框

A.属性 type 定义输入框的类型

a)文本框 type="text“ 密码框 type=“password“

b)提交框 type=“ submit“ 和 提交按钮一样

c)按钮框 type=“button“ 单纯的按钮

d)重置框 type=“reset”清空的效果

B.属性 placeholder 描述输入字段预期值的简短的提示信息。兼容到IE8以上

C.属性 name 必须设置，否则在提交表单时，用户在其中输入的数据不会被发送给服务器

D.属性 value

CSS相关内容

定义:cascading style sheet 层叠样式表

作用:用来修饰网页

语法:选择器(选择符) {声明} 声明可以细化为{属性:属性值;属性:属性值}

CSS的引入方式

内部样式

把CSS放在HTML里面的style标签中叫做内部样式

A 首先在body里面创建想要修饰的对象例如

B 在head里面创建一个标签

C 在style标签里面正式去修饰创建的对象,在修饰的时候操作的就是CSS

想要多有div或者所有的的p进行改变语法 div{} p{} 标签选择器{}
要具体进行区分的话用class或者id

class 语法: .class名字{} .box1{} 专业术语 class选择器(类选择器){}

id 语法:#id名字{} #box1{} 专业术语 id选择器{}

两者的区别

语法上的不同 class是点 id是#号属性值的个数不同class可以有多个属性值 id只有一个属性值权重不同 class的权重是10 id的权重是100

外部样式

需要新建一个css文件,按照以前的修饰过程去修饰样式

	    <!-- 现在连接的是一个css文件，具体文件的作用 -->
		<!-- rel   relation 关联  rel是声明当前的文件是样式表 -->
		<!-- type="text/css"可以写可以不写 -->
		<link href="demo.css" rel="stylesheet" type="text/css"/>
         <!-- link也可以链接小图标，这个时候rel里面写的是icon -->  
		<!--第二种导入方式@inport -->

行内样式

CSS属性

宽度:width; 高度:heigth; 背景颜色:background-color; 字体大小 font-size

字体颜色color 外间距 margin 清除间距:margin:0; 容器水平居中 margin:0 auto;

day0806

CSS基本选择器

选择器类型	语法	使用场景	例如	权重
类型选择器(标签选择器)	标签{}	改变某个标签样式	div{} p{}	0001
class选择器(类选择器)	.class名字{}	改变某一个样式	.box{} .head{}	0010
id选择器	#id名字{}	改变某一个样式	#box{} #head{}	0100
通配符	*{}	改变所有标签的样式	*{margin: 0;}	大于0小雨1
群组选择器	选择器1,选择器2{}	优化代码	.box1,div.#head{}	群组选择器没有权重单独有

层次选择器

选择器类型	语法	使用场景	例如	权重
包含选择器(后代选择器)	父元素子元素子元素{}	改变父元素下面的所有子元素	.box .p{}	所有权重的和
子选择器	父元素>子元素>子元素{}	改变父元素下面的儿子元素的样式(不继承到孙子)	.box>p{}	所有权重的和

伪类之动态选择器

:link

可以设置初始化的样式,只能给a标签

:visited

可以设置链接访问过后的样式,只能给a标签

:hover

可以设置鼠标悬停上去之后的样式,谁都可以用:hover

:active

可以设置链接按住不动的样式,只能给a标签

:focus

实现的是点击之后获取焦点的样式,目前只能给input

伪类选择器的权重是0010

注意.box:hover{} 的权重是20 10+10

div:hover{} 的权重 1+10=11

CSS的浮动属性

使用场景

想要竖着的元素横着过去
文字环绕显示

用法

folat:left; -------靠左浮动
folat:right;------靠右浮动
folat:none;------(默认值)

CSS的解析规则

1.当权重相同的时候,后面书写的CSS覆盖前面的CSS(后来居上)(就近原则)

2.当权重不同的时候,高权重覆盖低权重

day0807

浮动引起的父元素高度塌陷

现象：在包含结构里面，如果最近的父元素没有高度，且所有的子元素都浮动了，那么最近的父元素会高度塌陷（也就是高度是0），原因是因为子元素浮动了之后就悬空不占位置了，对于父元素来说里面就空了，所以子元素就撑不开父元素了，父元素的这个现象叫做高度塌陷
解决方法：
1、给父元素设置固定高度
2、给父元素设置overflow：hidden；

CSS的清除浮动

清除浮动

属性	描述	说明
clear	clear:none;	允许有浮动对象
clear	clrae:right	不允许右边有浮动对象
clear	clear:left;	不允许左边有浮动对象
clear	clear:both;	不允许有浮动对象

清除浮动的作用:让浮动之后的元素再次竖着来

注意:清除浮动知识改变元素的排列方式,让元素排列再次变成竖向,该元素还是漂浮着,不占据文档位置.

padding(内间距)

使用的场景：页面布局需要设置间距，且这个间距对于该元素来说是里面的时候用
用法：
单独设置：
上内间距 padding-top
下内间距 padding-bottom
左内间距 padding-left
右内间距 padding-right
注意点：
padding是添加在原有盒子大小之上的，所以添加了padding之后的容器会被撑大
假如，想要用padding设置间距，又不想被撑大，可以在设置的宽度或者高度上减去添加的padding数值

整体全部添加（padding的简写）
padding：10px；表示的是4个方向同时添加10px
padding：10px 20px；
表示的是4个方向同时添加间距，但是现在上下都是10 左右都是20
padding：10px 20px 30px；
表示的是4个方向同时添加间距，但是现在上都是10 左右都是20 下是30
padding：10px 20px 30px 40px；
表示的是4个方向同时添加间距，上10 右20 下30 左40

margin(外间距)

使用场景：页面中需要设置间距，且这个间距对于该元素来说是外面的时候用
用法：
单独设置
外上间距 margin-top
外下间距 margin-bottom
外左间距 margin-left
外右间距 margin-right
margin的属性值，可以是正数可以是负数，可以是单词auto
如果属性值是auto，目前只能上下无效，左右有效
如果margin的左边和右边同时都给了auto，那么该容器的左右间距将会平均分配剩余的空间
看到的视觉效果就是该容器水平居中了

简写
margin：10px；
margin：10px 20px；
margin：10px 20px 30px；
margin：10px 20px 30px 40px；
margin不会把自己给撑大，但是padding会把自己给撑大

padding和margin的相同点和不同点
相同点：都是可以用来调整页面间距的，同时都有单独设置和简写
不同点：
margin是外间距 padding是内间距
margin的属性值可以是负数可以是auto，但是padding不可以
margin不会把自己撑大，但是padding会把自己给撑大

margin-top的问题

描述：在包含结构里面，默认的时候，如果给子元素设置了margin-top，这个时候正常的情况应该是子元素自己下来，但是浏览器的结果是子元素和父元素一起下来了。原因是因为浏览器的解析问题
解决方法：
1、给父元素添加overflow：hidden；（最常用的）
2、给父元素添加上边框border-top：1px solid（实线） blue；
3、给子元素或者父元素添加浮动

边框

简写
border:样式颜色宽度；顺序可以随便换
单独设置
border-width 边框宽度
border-color 边框颜色
border-style:solid实线或者dashed虚线dotted点状线double 双线；
边框样式
这个3属性结合写的是4条一样的边框
单边设置
border-top上边框
border-bottom 下边框
border-left
border-right
注意点：
边框是添加在盒子的外面的，所以会把盒子撑大