删除线

没有特定含义

有序列表（双）

内嵌

的属性type:1(1,2,3），a(a,b,c)，A(A,B,C)，i(i,ii,iii)，I(I,II,III）

无序列表（双）

嵌套

type属性:disc默认实心圆，circle空心圆，square小方块,none不显示

表格（双）

行

行内单元格，从左到右

快速生成：table>tr*2>td*3{批量内容}

水平合并：单元格6与7

垂直合并：rowspan

水平合并保留左边删除右边，垂直合并保留上删除下

Form表单(双）

action服务器地址，name表单名称

表单元素

输入框

文本域:type="text"

密码框:type="password"

提交按钮:type="submit" value="登录“

按钮

块级元素与内联元素





div容器标签（双）

相当于分组了

添加备注



↑标准与h5新规定标签的容器对比

h5新标签

头部

导航

文章中的节，如章节，页眉页脚

侧边栏

脚部

代表独立的，完整的内容块，如一篇完整的帖子，文章，用户

CSS

选择器、样式

CSS的引入

内部方式：在

中加入，里面写样式。可控制全部同类型标签

内联方式：在例如

的

中加入style"属性"。可控制单个标签

外部样式：(单)

让多个网页链接同一个样式表，便于多个网页。

选择器一

全局选择器：*{}

通常用于网站初始化，优先级最低。可以被其他样式顶替。

元素选择器：所有的标签都可以是（eg:p\b\div\a\img{})

指定页面上所有同一类型标签。

类选择器：“.”针对标签使用

eg:

你好

.one{...}

同一个标签可使用多个类选择器，用空格隔开。eg:class="classone size1"

选择器二

null选择器:null=""，null是唯一的,只能在html中使用一次。css用#name来定义。

eg:#name{}

hello

合并选择器：css定义时可以把两套一样的标签写在一起(eg:p,h3{})

选择器优先级：行内样式＞ID＞类(class)＞元素(p/div/...)

字体属性

颜色color:red/十六进制(#0000ff)/rgb/rgba;

字体大小font-size:40px（谷歌浏览器最小字体为12px);

粗细font-weight:normal/bold/bolder/lighter/100-900(默认400，700等同于bold);

字体样式font-style:斜体italic/normal;

字体font-family:"Microsoft YaHei";

CSS背景属性

null,height

background-color背景颜色

background-image背景图片:url("1.jp");

~-position背景图片位置



~-repeat设置背景图片如何填充:repeat默认,repeat-x只水平方向平铺，repeat-y只垂直,no-repeat不平铺

~-size背景图片大小属性:length（第一个值设置宽度，第二个高度，不设置第二个会auto，eg:1,1）,cover覆盖，contain适合（不完全填充）

CSS文本属性

位置text-align:left|right|center

修饰text-decoration:underline下划线|overline上划线|line-through删除线

大小写text-transform:captialize全部单词开头大写|uppercase全部大写|lowercase全部小写

首行缩进text-indent:30px;

css表格属性

边框：

table{

boarder:<边框大小> <边框类型solnull实线> <颜色>;

}

上述方法会设置外边框，如果想设置内线选择器加tr。

折叠边框（让表格双线变为单线)：选table:border-collapse:collapse;

设置宽高：选择器为table:宽null:500px;，高height:300px;

文字水平对齐：注意选择器为td：text-align:left（默认）|center|right;

文字垂直对齐：vertical-align:top|center（默认）|bottom

间距（留白）：选择器为td:padding:20px;

表格背景：选择器为td:background-color:#十六进制;

字体颜色:color:十六进制;

后代选择器

选择所有被E元素包含的F元素,用空格表示

E F{}

子代选择器

选择所有作为E元素的直接子元素F，对更深一层的元素不起作用，用>表示

E>F {}

相邻兄弟选择器

选择紧跟E元素后的F元素，用+表示，选择相邻的第一个元素，只能向下选择。

E+F {}

通用兄弟选择器

选择E元素后的所有兄弟元素F，作用于多个元素，用~隔开。

E~F {}

CSS盒子模型（Box Model）

概念：



content内容 - 内容，正常css定义

padding内边距（值的单位是px，下同）:<上下> <左右> ;

border外边框:<粗细> <类型|solnull实线> <颜色>;

margin外边距（透明） - 同padding

变形：padding-left|right|top|bottom 外边距同理。

弹性盒子模型(flex box)（里外盒子之间的位置关系）

通过设置display=flex;来定义弹性盒子

默认弹性盒子内容横向摆放

（平时不用）子元素排列：flex-direction:row左对齐|row-reverse翻转顺序且靠右对齐|column垂直上到下|column-reverse翻转且下到上;

子元素在父元素中垂直方向在哪排：justify-content:flex-start|flex-end|center;

子元素在父元素中水平方向在哪排：align-items:flex-start|flex-end|center;

【这是子盒子的定义】子元素在盒子中所占的权重比例：flex:1;

一旦设置flex，null不再生效。

eg:按比例来。比如三个元素，一个占三分之五，就在它上写个3，其他两个写2.

文档流

脱离文档流：浮动、绝对定位、固定定位

只有遇到布局问题时再脱离文档流，没遇到的时候正常写就行。

理解补充：浮动与弹性盒子不冲突。弹性盒子属于文档流，布局无法满足时脱离文档流，使用浮动等。

浮动（元素之间的位置关系）

通过float属性定义在哪个方向浮动：left向左|right向右，没有上下浮动

意思为浮动元素跑到左边或右边

理解：



用途：网页无序列表导航，float使其水平摆放，嵌套margin拉开布局。

当容器不足以横向摆放内容时，向下一层摆放。

清楚浮动

当父元素出现坍塌时，对布局不利，要清除。

父元素设置高度：若父元素高度塌陷，手动设置合适的高度。

受影响的元素添加clear属性：right|left|both

（常用）元素多高，父级盒子多高：在父级标签中增加overflow:hnullden;clear:both;

伪对象形式

定位

position属性指定了元素的定位类型：

relative 相对定位

absolute 绝对定位（脱离文档流）：与浮动有区别，绝对定位每个元素单独在一层，互不干扰

fixed 固定定位（脱离文档流）：不会随页面滚动，固定在指定位置，比如小广告。

设置定位后，可用left|top|right|bottom属性调整位置，单位px.

相对定位和绝对定位 是相对于 具有定位的 父级元素 进行位置调整。

z-index:数值：调整元素覆盖关系，数值越大越靠上

圆角：

border-radius:px或者百分比;

可单独修改每个角，但是用不到，这里不写。

阴影:

box-shadow:h-shadow v-shadow blur color

h-shadow必选，水平阴影位置

v-shadow必选，垂直阴影位置

blur可选 模糊距离

color可选 阴影颜色

透明度

opacity:0~1;

动画

可用百分比来规定变化发生的事件，或用关键词"from"和"to“，等同于0%和100%



name:动画名称

animation执行动画

animation:

timing-function值：ease逐渐变慢 linear匀速 ease-in加速 ease-out减速 ease-in-out先加速后减速

direction:normal正向 alternate偶数次正向，奇数次反向

在选择器后加上”:hover"可以使动画在鼠标滑动到上方后触发动画。eg: .name:hover{}

媒体查询

媒体查询会根据设备的大小自动识别加载不同的样式。

雪碧图

CSS Sprite也叫CSS雪碧图 允许将一个页面涉及到的所有零星图片都包含到一张大图中去。

原理：通过background-image引入背景图片，再通过background-position吧图片移动到需要的位置。

background-position:

字体图标

选用例如iconfont类似的服务，根据指引安装图标。

查看原视频

2023最新版web前端开发零基础入门html5+css3+js全套教程 | 从入门到到就业全套前端课程_前端开发_web前端_web前