前端web的学习

前端的学习

HTML的基本标签

p 段落标签 h1 h2相当于一级标签，二级标签

br 换行 strong 加粗==b

hr 水平线标签 &nbsp空格

span 无语义标签 img src图片标签 width宽 height高 单位px像素可以用%

alt提示信息（例如图片不存在则显示alt信息）

a href 超链接 target -black在新窗口打开 self本窗口打开

title提示信息，告诉我们这个是干嘛的

align 水平对齐方式 center居中 size水平线的高度

ul无序列表 ol type定义从哪里开始有序列表 li是里面的一个容器，容纳属性

表格的基本结构

table表格 tr行 td代表单元格

border边框1px width宽

caption代表表格的标题

bordercolor边框颜色

cellspacing表格之间的距离

cellpadding表格里面的内容之间距离

表格行和列的属性

height高 align水平对齐方式 （左中右）valign（上中下）

bgcolor背景颜色

colspan跨列

rowspan跨行

iframe框架

是一个框架，我们在这个框架里面设置属性，例如宽和高。

scrolling滚动条 src引入 name给框架起名，target引用name的框架名字

from标签：

多行文本textarea

下拉框select option value

按钮button

充值reset 提交按钮submit

单选按钮radio checkbox复选框

邮箱：

搜索条

div和span

div块级容器

span行级容器 块包含行内元素

datalist一般用于搜索和list进行绑定

视频：

音频

绘画----一般配合js

css

css注入方式

行内样式 标签里面style属性

内部样式表

style text/css

外部样式表

link href=“” rel=“stylesheet”

导入式

import url

css是以键值对出现的

注释是/* */

font-family是表示字体的规划，例如宋体什么的

元素选择器包括id # class . 和元素选择器

div+css*

backgrond-attachment:fixed;背景不会随着滚动玩儿滚动

overflow：hidden内容溢出就影藏

overflow：auto就滚动overflow：scroll就滚动

text-align文本属性

下划线隐藏text-decoration：none

overline上划线 underline下划线

认识盒子

包括浮动定位

内容：content 内边距：padding

边框：border 外边距：margin

border-style：solid边框的线条

border-bottom:1px dashed black下边框

dash代表的是虚线

外边距

margin：value

单边设置：margin-left、right。bottom。top

margin：0 anto表示居中的意思

value用百分笔等

内边距

padding-top/right/bottom/left:value

内容与边框之间的距离

当外边距合并是按较大的边距来设置当前的边距

display

display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。

none：隐藏属性

div块元素的默认属性是block块

span的默认属性是inline行

inline-block指定对象为内联块元素==类似于float：left左浮动

table-cell指定作为表格单元格

div>div:nth-child(2)表示div下面得第二个div

flex-grow为1 ***

min-width最小宽度可缩放的最小宽度

align-items：center表示水平的位置

浮动

float：left、right

position定位

absolute绝对定位的元素 加上定位的位置例如高和左边距left top

             绝对就不占用空间，相对于整个浏览器

fixed固定定位 ，打个比方就是你平常所见的广告，是固定的。

relative相对定位 自恋型（按照自己原来的位置来进行偏移

static静态的，不设置定位，忽略加上的左和高top和left

      一般用于去除定位。

居中

子元素居中 例如div下面还有一个div让他居中

display：table-cell

vertical-algin:midle父类的

margin：0 auto子类的

实际运用

隐藏标签属性例如ul==list-style: none;

隐藏链接的下划线text-decoration: none;

隐藏属性display：none

border-radius:50px圆角是图形变得好看

.dao ul li a:hover{

color: #EF473A;

}表示点击就变换颜色

margin：0 anto表示盒子居中的意思

字与字h1-之间的间距 letter-spacing:1px

border-bottom:1px dashed black下边框第一个像素，，，然后虚线还是实现，，然后颜色

solid定义是实现

放大镜&#xe6e4

line-height: 50px;div中间的所有属性都居中

圆角

border—radius设置一个值就代表四个角都是这个像素

按左上右下 右上左下

渐变

线性渐变background：linear-gradient（direction，color-stop1，color-stop2。。。）

默认direction从上往下 自定义渐变方向

径向渐变background：radial-gradient（center，shape，size，start-color，last-color）

动画

animation通过关键帧控制动画的每一步

@keyframes name{

from|0%{

开始样式

}

中间可以有多个{}

to|100%{

结束样式

}

}

多列

column-count分几列：3

column-gap列间距:30px

column-rule列分割线的样式：2px solid red；