前端-xhtml+css2阶段思维导图模板_ProcessOn思维导图、流程图

Day_02

01_标签

div标签

标签定义 HTML 文档中的一个分隔区块或者一个区域部分

无语义标签，用来做网页布局的

span标签

无语义标签，用来显示文本，同行显示

class

02_css样式

文本内容对齐方式

text-align:

居中对齐

text-align: center;

向右对齐

text-align: right；

向左对齐

text-align: left;

设置该标签相对于父级标签左右居中

margin: 0 auto;

上边

top

bottom

子主题

左边

left

右边

right

首行缩进

text-indent: 1em;

设置行高

line-height: 70px;

截取边角

border-radius: 10px;

下边框

border-bottom: 1px solid red;

Day_04

CSS选择器

统配选择器

为所有的标签设置样式

*{}

标签名选择器

之间写标签名即可，为该名称对应的标签设置样式

id选择器

具有唯一性，通过#id访问该选择器对应的标签设置样式

class选择器

类选择器，同时为多个标签设置同等样式，通过.class名来访问

！important

此样式优先级最高，一次只能设置一个样式

总结：

总结：CSS选择器符合条件越广，CSS选择器的优先级更低

统配选择器* < 标签名选择器 < class类选择器 < id选择器

CSS的引入方式

头部引入

#id{}/.class{}

内部引入

外部引入

总结：

1，标签类引入方式特点：

只能为该标签设置样式

代码冗余，不利于代码复用和后期代码更新和迭代

一般结合JS使用

2.头部引用特点：

网页网络请求速度快

相对于外部引入方式，更简洁，方便查看

代码不利于多个页面复用

使用场景：高访问量的页面；（网页的首页，活动页，宣传页end）

3.外部引入的特点：

方便多个文件复用，方便后期更新维护

使用link引入之后，多次请求访问会造成服务器压力

使用场景：

整个网站，访问量不高的页面（并发量）

CSS样式的优先级

标签内引入 > 头部引入 > 外部引入

注意

一定是同种样式比较才会出现优先级

如果同时出现CSS选择器和CSS引入优先级比较，首先b比较CSS选择器的优先级，在比较CSS引入方式

Day_06

margin-top值传递解决方案

当标签设置margin-top是相对于父级标签设置时,此时父级标签没有实际的border或者padding时,margin-top就会出现值传递给父级标签以及以上层标签情况,当传递给的标签也存在margin-top值时,设置margin-top取最大值;属于BFC样式规范的一种

解决方式一:

给父级标签设置padding

解决方式二:

给父级标签设置border

解决方式三:

推荐的方式,给父级标签添加 overflow:hidden；

Day_08

怪异盒模型

IE浏览器下，对于该模式下，浏览器出了一个补丁，就是box-sizing设置盒模型的类型；

正常盒模型（标准盒模型）context-box；

实际大小 = context（width + height）+padding + border + margin

怪异盒模型 border-box；

实际大小 = content（width + height + padding + border）+ margin；

其中设置宽的widht 包含左右padding和左右border；高和思路一样

浮动

1.所有标签元素默认都显示文档流（标准流），如果元素标签设置了浮动，则元素会脱离文档流；这些元素都显示在浮动层，和文档流元素不在一个层级，它们之间的元素占位也互不影响；

2.浮动元素相对于父级标签元素左右浮动，像父级元素标签的左右靠齐；

3.浮动分为左浮动和右浮动-float：left；float：right；

4.浮动元素的特点：

不占用父级宽高

默认宽高由内容撑开；

可以设置宽高；

可以去除浏览器标签之间的间隙；

同行元素按照标签对齐；

可以相对于父级标签剩余空间充足的情况下，同行显示；

如可理解一个浮动元素的位置？

a.如果一个元素设置了浮动，没有上一个兄弟元素，则该元素标签相对与父级元素顶部左右浮动；

如果一个元素设置了浮动，有一个兄弟元素，则查看上一个兄弟元素是否是浮动元素，如果是浮动元素，则该元素和上一个兄弟元素，在同一个层级，在父级元素剩余空间充足的情况下，可以同行显示

c.如果一个元素设置了浮动，有一个兄弟元素，则查看上一个兄弟元素是否是浮动元素，如果是文档流元素（不浮动），则该元素和上一个稳定流元素的底部对齐；

如果此前浮动元素高度已经占位-高度此文档流元素，则该浮动层设置
相应位置即可）；

注意：

注意：浮动元素在同一行显示，只有等同行剩余空间不足的情况下就，才回自动换行；

使用浮动的场景

1.相对于父级而言，出现了同行两个及以上的子集元素时，子元素设置浮动；

2.一般而言，设置了浮动元素，一定要清除浮动元素造成的影响；

3.清楚横向标签之间排列留下的换行符解析出来的4px的间隙；

清除浮动造成的影响

overflow: hidden;

在浮动元素的父级标签中,添加overflow:hidden;

清除子集浮动元素造成的影响;

在浮动元素以下添加一个兄弟元素-无语义标签

clear: left;

清除以上兄弟元素左浮动造成的影响

clear: right;

清除以上兄弟元素右浮动造成的影响

clear: both;

清除以上兄弟元素左右浮动造成的影响

使用伪元素：after选择器清除

.top::after{
  content: "";
  clear: both;
  display: block;
}

Day_10

定位

1.定位（position）布局：

更加精确的布局，主要解决一些特俗的网页布局处理（视图叠加效果以及
视图的固定位置），通过left，right，top，bottom来改变标签的位置；

2.posotion有哪些值？

static 静态定位，html中的默认值，既没有定位，在文档流中布局；

relative 相对定位，相对于元素本身位置定位，

作用：为后代元素标签相对于该标签元素定位

注意：相对定位元素，没有脱离文档流；

absolute 绝对定位，会脱离文档流；

a.如果没有参照定位的元素，则对于浏览器body定位；

b.如果有参照定位元素，则距离最近的定位元素定位；（最近的非兄弟关系，府及以上查找）

fixed 固定定位

会脱离文档流，相当于浏览器窗口（pc端）定位，相对于屏幕定位（移动端），

作用：固定元素的位置；

注意：

1.一般情况下，父级元素使用相对定位，自己元素使用绝对定位；

2.脱离文档流的元素，越往后的元素视图层级越高，可以通过z-index的值来调整视图层级的位置；值越大，层级越高

3.绝对定位和固定定位元素会脱离文档流；

相对定位元素不会脱离文档流，但是可以设置z-index；

4.脱离文档流定位元素的特点：

*宽由内容撑开；

可以设置宽高；

具有视图层级，可以设置不同的视图层级；

注意：绝对定位元素距离最近的定位元素（非兄弟关系）

隐藏标签的方式

1.dispaly：none；- 隐藏

dispaly：block；-显示

特点：不占用位置（不保留标签盒模型原有位置）

2.visibility：hidden；- 隐藏

visibility：visible；- 显示

特点：占用位置（保留标签原有位置）

3.opacity：0；标签完全透明；

opacity：1；完全不透明；值范围0~1之间；

background-color：rgba（r，g，b，0）第四个值代表背景颜色完全透明

Day_11

去除无序列表标识（小圆点）

list-style-type: none;

list-style: none;

伪类

:nth-child(n)

获取选择器中对应的标签，满足n条件选择器的标签设置样式

transition: all .5s;

设置过渡属性及过渡时间单位为s秒

Day_12

table表格

行

tr

表头单元格

th

普通单元格

td

border

边框大小

cellspacing

单元格之间的间隙

cellpadding

单元格之间的内填充

rowspan

行合并

colspan

列合并

边框阴影

box-shadow: 0 0 100px 20px yellow

box-shadow: inset 0 0 100px 20px yellow

多层阴影

移动效果

transform: perspective(600px)translateZ(5px)translateY(-5px);

Day_13Day_13表单元素

表单的作用：

网页中，我们需要跟用户进行交互，收集用户资料，此时就是要用到表单。使用表单的目的就是为了收集用户信息。

form 表单标签，用来做表单元素数据提交的。--提交给后台

action 属性，用来设置表单提交的后台地址：点击提交按钮，跳转的url网址；

网址的组成：协议名（http/https）+ ip地址+端口号

method属性，用来设置网络请求的方式，有get和post两种请求方式

get的请求效率高，请求速度快，但是数据长度有显示（数据大小）

提交的参数数据拼接到url地址后面；

post请求安全性高，没有请求数据大小的限制：提交的参数数据，存储到body中，不可见；

表单元素通过name属性传值给后台，name设置字段名；

1. 表单元素 input type = text 明文输入框

placeholder 输入框设置提示语

value 输入框的默认内容

name 设置传递数据给后台的字段名

required 必填项

2.密文输入框

3.数字输入框 input type = number

step 设置数字间隔的步数大小

value 设置的默认值

min max 设置步进器允许的最小值和最大值

4.下拉列表 - 下拉框

select 通过name字段传值给后台，传递option中对应的value值

5.单选框满足以下条件

a. type = radio

b. name字段名必须保持一致

c. 通过value传值，单选框的value不能相同，因为区分传递数据给后台的不同；

6.复选框 type=checkbox

7.多行输入框<textarea name="" id="" cols="30" rows="10"></textarea>

8.文件上传 type=file

必须保证label的for和input的id保持一致

9.重置按钮 - 一键还原 type="reset"

Day_01

01_网页结构

<!DECTYPE html>

声明html的版本号

<html>

网页的相关配置部分

<head>

编码格式和网页的图片以及标题，还有外部文件的引入，网站的图标部分

设置网站的编码格式：utf-8

网站的标题

<body>

网页的主题部分

02_标签

标签的分类

双标签

有开始标签和结束标签称为双标签，也就是可以些写内容部分（开始标签和和结束标签之间）

单标签

只有一个尖括号，双标签的取反

a标签

超链接标签，用来做网页跳转的

开始标签中写的都是属性名，具有特定的功能

href 跳转的页面路径翻译为：超文本引用

target=“_blank”

保留原网页，打开新窗口

###代表无效连接

h1~h6标签

h1~h6 标题标签，一级标题到六级标题，常用的是h1~h4

p标签

段落标签，显示文本内容

em标签

斜体字

strong标签

文字加粗

ul li标签

组合标签，无序列表，li代表列项

ol li标签

有序列表

br标签

换行

hr标签

水平分隔符

转义字符

空格

特俗转义字符

< >

<<table width=100%>>

input标签

input type=text 明文输入框

QQ:<input type="text">

input type=password 隐士输入框

密码:<input type="password">

input type=button 按钮

value 按钮内容

button 按钮

03_emmet插件

标签名+tab

快速生成

标签名*n

快速生成n对标签

标签名>标签名+tab

快速创建具有父子级的标签

标签名{标签内容}+tab

标签名{标签内容$}+tab

可以自动生产递增的部分

04_图片标签

img

显示图片的标签

src

设置图片的路径

路径有相对路径和绝对路径，建议使用相对路径

如果访问图片和该html网页文件同一级别路径，则直接访问该图片名或者./图片名

如果访问图片和该html网页文件上一级别路径，则使用../

如果访问图片和该html网页文件下一级别路径，则使用/访问

alt 属性：这个图片加载失败时的提示语句

title属性

设置鼠标移入该图片上时，设置的提示语句

05_css样式

写在title和head之间

<style>

文档定义样式信息

id=“ ”

命名规范:由数字，字母，下划线组成，且数字不能作为开头；

设置css样式

#id名访问该id对应的标签;id具有唯一性

color:字体颜色

字体大小

font-size: 50px;

字体加粗

font-weight: bold;

背景颜色

background-color: aqua;

宽

width：100px；

高

height：100px；

边框

边框的宽度边框的样式边框的颜色

border: 10px solid DarkCyan ;

边框的样式

solid 实现边框

dashed 虚线边框

dotted 点状虚线

文字的对齐方式

text-align: center;

left

right

center

下划线部分

text-decoration: 内容;

去除下划线

text-decoration: none；

添加删除线

text-decoration: underline；

删除线

text-decoration: line-through；

上划线

voerline

word-break:break-all;

设置文本超出部分自动换行-数字,汉字

Day_03

标签的属性分类

*

通配选择器，为所有的标签设置样式

块属性标签-块元素

块属性标签的特点：

块属性标签独占一行

相对于父类标签而言

块属性标签默认宽度百分百

相对于父类而言

块属性标签可以设置宽高

块属性标签可以设置上下margin（间距）

块属性标签可以嵌套块属性和行属性标签

总结：

属于块属性标签的有：div，p，h1~h6，ul，li，hr，br，...

行属性标签-行属性

行属性标签的特点：

行属性标签允许同行显示

相对于父级而言

行属性标签默认宽高有内容撑开

在父级元素剩余空间不足的情况下行属性标签会自动换行

行属性标签不能设置宽高（img，input标签除外）

行元素只能嵌套行元素

总结：

属于行元素的标签：spnan，a，img，em，stong，button

特殊标签

a标签不能嵌套a标签

p标签不能嵌套块元素标签

标签之间的属性转换

转换块属性标签

display：block；

转换成行属性标签

display：inline；

转换为行内块级属性标签

display：inline-block；

既能同行显示又能调宽高

css样式

超出部分隐藏

overflow：hidden

去除边框

border：none

去除输入框处于可编辑状态时（聚焦），的边框

outline：none

自身标签移动

transform：translaY（8px）

向下移动是Y，向上移动是-Y

向右移动是X，向左移动是-X

透明度

background-color: rgba(0, 0, 0,0.1);

在父级标签中设置font-size:0;去除子级标签横向浏览器解析出来的4px间隙;

font-size：0

vertical-align: bottom;

去除图片与标签之间产生的上下间隙

overflow: auto;

auto：如果内容被修剪，则浏览器会显示滚动条可现实超出部分内容。

visible：默认值。内容不会被修剪，会呈现在元素框之外。

hideen：内容会被修剪，超出部分不可见。

scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

inherit：规定应该从父元素继承 overflow 属性的值。

伪类选择器

：hover

border-bottom: 50px solid transparent;

transparent 透明色

鼠标移入该选择器对应的标签上时，触发的样式

Day_05

盒模型

所有的标签都遵循盒模型规则

盒模型的作用：使用来页面布局的

组成部分：

content（width+height）

padding（内边距）

border（边框）

margin（外边框）

标签的宽度等于：

content的width + padding-left + padding-right + border-left + border-right；

对于外边距margin而言，块属性横向元素排列同时设置左右边距，则元素之间的间距，去两者之和；纵向排列，同时设置上下边距，则取外边距最大值；如果出现行类块级元素，不管是横向排列还是纵向排列，边距都是取两者外边距之和；

选择器

群组选择器

使用，隔开使用哦，隔开每个选择器，为符合选择器范围的所有标签设置样式，如，#A，#B{}

子代选择器

> 代表子代选择器，（只有一级）

A>B：解释：找到A选择器对应的标签的子代符合B选择器的标签设置样式

后代选择器

空格 - 代表后代选择器

A 空格 B解释：找到符合A选择器范围的标签的后代符合B选择器范围的标签设置样式

Day_07

兄弟选择器

~

相邻以下兄弟标签选择器

访问符合选择器条件的标签以下的所有兄弟元素标签（满足选择器条件）设置样式

+

相邻下一个兄弟选择器

访问符合条件的选择器的标签相邻下一个满足条件的兄弟标签设置样式

!important ；

直接单独设置该样式,优先级最高;和选择器没有关系;