Skip to content

Latest commit

 

History

History
841 lines (674 loc) · 19.3 KB

前端.md

File metadata and controls

841 lines (674 loc) · 19.3 KB

HTML

标签的介绍

p: 段落标签 br: 换行标签 strong:加粗 em:倾斜 del:删除线 ins:下划线

hr:水平线

div:

一个大盒子，一行一个，用来包装，方便布局。

多类名class = "name1 name2"每个类名用空格隔开

span:一个小盒子，一行多个，用于布局。

img:

src:图片路径

alt:图片显示不出来的时候用文字来显示

title:鼠标放到图片上，显示的文字

width:设置图片宽度

height:设置图片高度

border:设置图片边框

a:

href:跳转目标

href="#"表示暂时不知道开发到哪个页面，暂时顶替

如果href是给的文件、zip、exe那么会下载该文件

还可以内嵌图片或者音频，点击图片进入链接。

target:弹出方式，默认是当前页面打开_self，新窗口打开_blank

锚点链接：即跳转到当前页面的固定位置，在链接的href属性中，设置为 #名字 的形式。然后再目标位置的标签上添加一个id属性=刚才的名字。

table:

tr:定义表格的行

td:单元格//因为table没有列的概念

th:表头单元格，加粗居中显示。

align:对齐方式

border:边框

cellpadding：内容与单元格之间的空隙

cellspacing：单元格之间的空白

width:表格宽度

thead：表示第一行表头区域

tbody: 表示内容区域

rowspan:跨行合并（上下）合并后删除多余的单元格

colspan:跨列合并(左右) 合并后删除多余的单元格

ul:

ul/li无序列表

ul中可以内嵌标签

li中可以内嵌各种标签

去掉li中的小圆点用list-style:none;

ol:

ol/li 有序列表

ol中不允许再放其他标签

li中可以内嵌各种标签

dl:

dl/dt 自定义列表

dt:大哥（主干）

dd:大哥的小弟（分支）

dt和dd都可以放任何标签

form:

action:url地址提交到服务器的地址

method:表单的提交方式post or get

name:表单的名称

input:

type：

  1. text文本
  2. password密码
  3. radio 单选 要实现多选一 需要设置一个name值
  4. checkbox 定义复选框

name:为每个表单设置一个名字，方便后期我们进行处理。

value:设置传输到后台的值

checked:预加载选择哪个，针对于radio和checkbox来说

maxlength:输入最长字符个数

label:

for="名字"这里的名字要和之后的input的id相同

增加用户体验

select:

option:选项1

selected:初始选项

textarea:

当用户输入过多的时候就采用这个

路径：

目录文件夹：存放html的文件夹

根目录：目录文件夹的第一层就是根目录

相对路径：

​ 假设当前文件夹内有demo.html demo2.html-----有img文件夹内涵pic.jpg，外部有gif/gif1.gif当前所在文件夹为demo.html

  1. 同一级相对路径，demo2.html
  2. 下一级相对路径，images/pic.jpg
  3. 上一级相对路径，../gif/gif1.gif

绝对路径：针对于计算机来说的完整路径G:\uniapp\HTMLSTU\img

CSS

所有的css都应当写在head标签中，每个语句后都应当加入;号

CSS选择器，即在每个HTML的标签中加入标定，然后再CSS中选择标定。

基础选择器：标签选择器，类选择器，id选择器

  1. 标签选择器：标签名 { 属性;}
  2. 类选择器：.类名{属性;}记住一定有个点在前面
  3. id选择器：#idname {属性;} id 只允许存在唯一性。不允许重名。
  4. 通配符选择器：* {属性;} 通配符选择器选择所有的标签

CSS字体属性：字体系列、大小、粗细、文字样式（斜体）

font-family：

定义文本的字体系列。

font-size:

font-size = '20px'

定义文本字体大小

font-weight:

定义文本的粗细

font-style:

normal:正常

italic:意大利斜体

复合写法

font: italic 700 16px 'microsoft yahei'

style weight size family不可颠倒顺序，不需要设置的可以不写，但必须保留size family属性！！！

css文本属性：定义文本的外观，颜色、对齐方式、装饰、缩进、行间距

color:

文本的颜色

text-align:

文本的对齐方式

left默认左对齐

right

center

text-decrotaion:

装饰文本

none:默认没有装饰线

underline:下划线

overline:上划线

line-through:删除线

text-indent:

指定文本的第一行缩进，段首空两格

text-indent = 40px缩进40px大小

line-height:

行间距，行与行之间的距离=上间距+下间距+文本高度

line-hright = 20px

三种样式表:行内式、嵌入式、链接式

内部样式表:

在head中写入style，这个style依旧存在html中

行内式：

列入div style = "color: pink"

链接式:

创建一个css文件编写各个标签的央视

然后再html中引入,link rel="stylesheet" href="路径"

Chrome调试工具：自行百度

Emment语法：

html

生成标签直接输入标签名按tab键即可

如果想要生成多个相同标签 div *3

如果有父子级的标签 ul > li即可

兄弟级 div + p

生成带有类名或者id的，类.demo或 id #two

生成div类名是由顺序的，可以用自增$

css

每个开头缩写 w100 = width : 100px

CSS复合选择器

后代选择器：

可以选择父元素里面的子元素，写法 外层写外面 内层写后面 中间用空格

元素1 元素2 {样式;}

元素1 元素2 可以是任意基础选择器

子选择器：

选择最近一级的子元素

元素1 > 元素2 {样式;}

并集选择器：

可以选择多组标签，为他们定义相同的样式

元素1, 元素2 {样式;}表示元素1和元素2都更改样式

伪类选择器：

用于向元素添加一些特别的效果

a:link {color}这里设置未访问的链接效果

a:visited {color;}这里设置访问过的链接效果

a:hover {color;}这里设置鼠标经过的效果

a:active {color;}这里设置一直按着的时候的效果

css元素显示模式：

标签以什么样的方式来显示，例如div自己占一行，span一行好多个

HTML分为块元素和行元素

例如DIV就可以称为块元素，SPAN就称为行元素。

块元素：

h、p、div、ul、ol、li、等都成为块元素，占一行

可定义长宽高及其编剧

默认是占一整行

标签内部可以嵌入行内或者块级元素

文字类标签p、h不能放块级元素div

行内元素:

a、strong、b、em、i、del、s、ins、u、span也成为内联元素

相邻的行内元素在一行上，一行可以显示多个

默认宽度就是内容的宽度，不可重定义

行内元素只能容纳文本或者其他行内元素

行内块元素：

img、input、td同时具备块元素与行内元素的特点

与相邻行内元素、行内块元素出现在同一行，但是它们之间会有缝隙

默认宽度即内容宽度

长宽高可控

元素显示模式转换：

块元素->行元素->行内元素之间互相转换

转换为块元素：display:block;

转换行元素：display:inline;

转换成行内块元素：display:inline-block;

css背景：背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定

背景颜色：background-color

背景图片：background-image:none | url (url)

背景平铺：background-reapeat: no-repeat

背景位置：background-position: x y;

  1. 方位名词 background-position: center top;表示水平居中，竖直靠上
  2. 精确单位 background-position: 50px 20px；x=20 y=50;
  3. 混合单位 background-position: center 20px;水平居中 y=20;

背景固定：background-attachment:fixed固定 or scroll滚动默认

设置背景是否随着页面的其余部分滚动

复合写法：颜色、地址、平铺、滚动、位置

background: blakc url(xxx) no-repear fixed center top

背景色半透明：background: rgba(0,0,0,0.3)我们最后一个0.3位置负责透明度

css三大特性：

层叠性：多个样式重叠时，取最后一个样式。样式不重叠的部分不被重叠。

继承性：子标签会继承父标签的样式。

优先级：权重问题，查表。!important>行内样式>id > class > 元素

盒子模型：

网页布局的过程：

1、准备好网页的相关元素、网页元素基本都是盒子BOX

2、利用CSS设置好盒子样式，然后摆放到相应位置。

3、往盒子里装内容

组成:

border:盒子的边框

content：展示的内容

padding:内边距（控制内容和边框的距离）

margin:外边距（控制盒子与盒子之间的距离）

border:

元素的边框，边框的粗细、边框的样式、边框的颜色

border : border-width || border-style || border-color

border : 5px solid #FFFFF;

通过border-top可以设置上边框的所有样式

border-top: 5px solid #FFFFF;

border-collapse:collapse;合并相同的边框

border-radius:10px;圆角

设置盒子的阴影。

border-shadow:

  1. hshadows:水平移动阴影
  2. vshadows:竖直方向
  3. blur：边缘模糊程度
  4. spread:阴影的尺寸
  5. color:阴影的颜色
  6. inset:内阴影还是外阴影

text-shadow:

  1. 文字阴影，和盒子的阴影用法一致。

padding:

控制内容与边框的距离

padding-left:20px距离左边20

居中

padding:10px;表示上下左右都是10px;

padding:5px 10px;表示上下5 左右10;

margin:

控制盒子与盒子之间的距离

盒子居中对齐

margin: 0 auto;

如果要让标签内的行内块元素居中对齐，添加text-align:center即可

当大盒子嵌套小盒子的时候想要操作小盒子的位置可采取以下方法：

需要在大盒子上面添加边框border: 1px splid transparent

添加内边距 padding 1px;

overflow: hidden;

传统页面布局的三种方式：普通流、浮动流、定位流

标准流：

按照默认的排列方式

块状元素一行一个 div hr p h ul ol dl form table

行内元素一行多个span a i em

浮动流：

让多个块级元素排列在一行，方便布局。

纵向排列用标准流，横向排列用浮动流

  1. 浮动元素会脱离标准流（脱标）
  2. 浮动的元素一行内显示并且元素顶部对齐
  3. 浮动的元素会具有行内块元素的特性

这里的浮动指的是你对元素采取浮动操作然后它会浮动到屏幕上方。后面的标签会到它的后面。类似于浮起来的元素覆盖之后的标签。

任何元素赋予了浮动性质后都会含有行内块的特性。

浮动元素经常和标准流父级搭配使用。

即一个大盒子 内嵌许多小盒子，然后浮动这些小盒子即可。

注意点：

  1. 浮动和标准流的父元素进行匹配//也就是基准是以当前元素的父元素进行浮动排列匹配

清除浮动：

是为了方便浮动元素不改变父元素的高度，能够自动的拓展父元素。清除浮动造成的影响。

解决方案如下：

  1. 额外标签法（隔墙法）：

    1. 在浮动元素的末尾创建一个新的div或者块级标签
    2. 然后定义样式clear:both

  2. 父级添加overflow法：

    1. 给父级标签添加overflow属性，设置为hidden、auto或者scroll
    2. overflow:hidden

  3. 给父元素添加clearfix伪元素法：

    1. 原理：相当于在父标签的结尾添加了一个新的盒子

    2. .clearfix:after {
    content: "";
    displat: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

  4. 给父元素双伪元素清除浮动：

    1. 1

    2. .clearfix:before, .clearfix:after{
    content: "";
    display: table;
}
.clearfix:after {
    clear:both;
}
.clearfix {
    *zoom,:1;
}

CSS书写顺序：

  1. 布局定位属性：
  2. 自身属性：
  3. 文本属性:
  4. 其他属性：

页面布局顺序：

  1. 查看盒子分布，即测量出可视区的大小。
  2. 分析页面中的行模块、列模块。
  3. 一行中的列模块经常浮动布局，先确定列的大小之后确定列的位置。
  4. 布局结构->代码实现

导航栏：

  1. 实际开发中，我们不会直接用链接a而是用li包含链接a的做法。

CSS定位介绍：

让某些元素始终固定在屏幕上，或者让元素能够在页面中随意移动。

组成：定位=定位模式+边偏移

定位模式：用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置。通过css的position来决定。固定定位or相对定位

position:

值 语义
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位

边偏移：定位的盒子移动到最终位置。有top、bottom、left和right4个属性。

边偏移属性 实例 描述
top top: 80px 顶部偏移量，相对于其父元素的上边距离
bottom bottom:80px 顶部偏移量，相对于其父元素的上边距离
left left: 80px 顶部偏移量，相对于其父元素的上边距离
right right: 80px 顶部偏移量，相对于其父元素的上边距离

realative相对定位：

定义的坐标是基于原来该盒子所在的位置进行移动。

盒子移动之后它原来所在的位置并不会由下一个盒子进行占位。

示例代码：

.demo1 {
    position: relative;
    top: 100px;
    left: 100px;
}

上面这表示类名demo1的元素基于原来的位置距离上100px，距离左100px。

absolute绝对定位：

绝对定位是元素移动位置的时候，相对于它祖先元素来说的。

  1. 如果不存在父元素，那么定位以浏览器的坐标为基准。

  2. 如果存在父元素，但是父元素没有定位。那么定位以浏览器的坐标为基准。

  3. 如果父级进行了定位，那么就以父亲作为基准进行定位。如果它的祖先存在定位，那么以最近祖先作为基准进行定位。

  4. 绝对定位就相当于浮动且大于浮动，自己的位置会被下一个元素所占有。

如果想固定在父级的某个位置需要在父级元素中加position: relative;

fixed固定定位：

固定定位是将某个元素始终出现在屏幕的某个位置。滚动时依旧可见。

它是以浏览器的可视窗口作为参照点进行移动。与父亲没有关系。

如果要固定到某个元素中跟随，而不是跟着浏览器。

先让盒子走left50%让他走到一半。

让固定的盒子margin-left:版心宽度的一半，多走版心的一半即可实现该功能。

sticky粘性定位：

始终能让你看到，会自动随着浏览器走！注意区分fixed。

不常用

定位的叠放次序：

使用定位布局时，可能会出现盒子重叠的情况，此时可以用 z-index来控制盒子的前后次序。

z-index: 1;数字可以是正整数、负整数、0，默认是auto，数值越大，盒子约靠上。

绝对定位的水平居中算法：

left走50％ left: 50%

margin-left:-盒子宽度的一半

top:50 %

margin-top:-盒子高度的一半

布局技巧：

使用margin-left: -1px可以达到每个盒子都有一个框且重复的地方不会变粗

如果要实现鼠标选择变色，那么需要在鼠标操作过程中添加绝对定位。

文字围绕浮动元素：

要巧妙运用浮动元素不会压住文字的特性

CSS初始化：

每个网站都需要进行初始化，方便兼容多种浏览器。

HTML5新增：

header头部标签

nav导航栏标签

article内容标签

section定义文档某个区域

asider侧边栏标签

footer尾部标签

audio:

mp3、wav、ogg

其操作属性与video差不多

src:文件地址

controls:播放控件

video:

mp4、ogg

src:文件地址

controls:向用户显示播放控件

autoplay:自动播放（谷歌浏览器需要添加muted）

loop:无限循环播放

poster:加载等待的画面图片

可以引入source标签解决浏览器不兼容的问题

input:

可根据type的类型选择输入的属性值

例如email url date time month week number tel search color

file:提交文件

required:表单拥有该属性表示内容不能为空

placeholder:表单的提示信息

autofocus:页面加载完自动聚焦到表单

autocomplete:之前如果输入提交成功过，记录以前输入过的内容。

multiple:提交多个文件

CSS新增属性选择器：

属性选择器：

input[value]表示选中所有含有value的input标签

input[type="password"]选中type=password的input标签

div[class^="icon"]选中类名class以icon开头的div标签

div[class$="icon"]选中类名class以icon结尾的div标签

div[class*="icon"]选中类名class属性值中含有icon的div标签

伪类选择器：权重1

ul :first-child:选择ul中的第一个孩子。

ul :last-child:选择ul中的最后一个孩子。

ul :nth-child(4):选择ul中的第四个孩子。

ul :nth-child(even):选择ul中的第偶数个孩子。odd就是奇数

ul :nth-child(n):选择ul中的所有孩子。这里的n是从0~最后一个

所以n->2n偶数->2n+1奇数->5n...等等

nth-of-type:是根据你前面规定的标签中第几个来选择。而nth-child则是根据父元素开始向下数。

伪元素选择器：可以用css来创建新标签元素，而不需要html标签。

::before在元素内部的前面插入元素

::after在元素内部的后面插入元素

例如：

div ::before{
    content:'我';//这个一定要加
    display: none;
    width: 50px;
    ...
}

CSS3盒子模型：

原来盒子的大小=width+padding+border

现在盒子的大写可以用box-sizing: content-box;加了这个之后就不会撑大盒子了。

CSS3图片模糊处理：

filter: blur(5px)这里面可以设置数值，数值越大，图片越模糊。

CSS3宽度计算函数：

width: calc(100%-30px);表示比它的父盒子小30像素。

CSS3属性过度：

用来实现一些简单的动画。通常和hover一起使用

transition: 属性 时间 运动曲线 延迟时间;

运动曲线：linear(匀速)、ease(逐渐变慢)、ease-in(加速)、ease-out(减速)、ease-in-out(先加后减速)

div {
    width: 10px;
    transtion: width 0.5s ease 1;
    //如果想要多个属性都变化那么width -> all;
}
div:hover {
    width: 20px;
}

translate:

对元素进行移动，且不会影响其他元素的位置。

transfrom: translate(30px,30px);(x,y)这里的x是指x轴移动，y就是y轴移动。

Tips:

1、保持文字居中，原理就是让行高等于盒子的高度

  height: 40px;
  /* 保持文字居中 */
  line-height: 40px;

2、开发过程中尽量不要写全局样式标签，否则容易覆盖 3、浮动定位不会压住标准流的文字，但会压住标准流的盒子。但绝对定位会压住下面标准流的所有内容。