文章目录

WEB前端笔记整理

一、HTML

1.1 HTML架构:

1.2 文字、图片、超链接

1.3 音频和视频

1.4 表格表单

1.5 边框美化

二、CSS

2.1 字体特效属性概览

2.2 CSS 美化

2.3 选择声明

2.4 基本选择器

2.5 美化网页菜单

2.6 图片的美化style属性内

2.3 2D Transform 方法

2.8 3D转换

2.9 过渡效果

3.0 动画效果

WEB前端笔记整理

18年读大一时学习的前端设计，怼着一本书一直看，顺便做了笔记，整理了一下，发布出来，笔记内容特别乱我自己都看不懂了，但还是要发出来纪念纪念

参考书籍：《HTML5+CSS3网页设计案例教程》

一、HTML

1.1 HTML架构:

1

2

3

4

5

6

7

8

9

10

11

以上是html的主要结构，一切便写在其上进行，

head内是一些预先定义修改，在其中修改，body内将直接应用。

body是其主体（身体），内容写在其中。

1.2 文字、图片、超链接

文字

段落和行的标签

段落内内容

1

段落内包含新段落则在p后加对应数字eg：

wdqwdqwdqwdqwd
dasdqwdsdasda asdasdasdasd

1

2

3

4

5

标题标签

标题

1

有h1 h2 h3…到六为止，代表6种标题大小，标题内可继续接标题

标题1

标题2

1

2

3

4

（注：字符由字符表找对应字符，空行
输入多空行：br{$}*行数 ）

1

图片

标签:

1

提交按钮，submit，提价给服务器。

重置按钮，reset，清楚表单中数据。

1

Date和time属性的应用

Date 日、月、年

Month 月、年

Week 周、年

Time 时间

Datetime 时间、日、月、年

Datetime-local 时间、日、月、年（本地）

1

填写数字属性：number、range

Number是在空格内填写数字，而range则是以滑条形式调整数字。

例子：

输入

1

2

3

4

5

Require=”require”该命令插入在表单标签内，则该标签必需要填写，才能上交。

表单美化在P259页。

1.5 边框美化

三个属性：宽度、样式、颜色

Border-width、border-style、border-color

Border：none无边框，dotted 点线式边框，dashed 破折线式边框，solid直线式边框，double双线式边框，groove槽线式边框，ridge脊线式边框，inset内嵌效果的边框，outset突起效果的边框，

指定调节各方位边框效果：border-top-style，border-right-style，border-left-style，border-bottom-style，

调节各个位置颜色代码与其相同。

边框

1

圆角边框：border-radius：值1/值2；两个数值分别定义，水平半径和数值半径，

只设一个值代表四分之一圆！border-radius后面接四个圆角值将依次使用到top-left，top-right，bottom-right，bottom-left。后面未设置的值默认与前面相同。

定义不同位置的圆角属性和上面相同。

二、CSS

2.1 字体特效属性概览

Font-family 字体

Font-size 字体大小

Padding-bottom…

Border-bottom …solid…padding指添加底线与文本距离，border指底线厚度，solid指固体填充颜色。

Background：url{照片名} repeat-x bottom 添加背景图片，并让其在底部沿x轴重复平铺。

Text-shadow：阴影水平平移值；阴影竖直平移值；阴影模糊值；阴影颜色；

文字阴影效果。

一共四个字

1

定义字体粗细：font-weight：100~900

四种定义：lighter细，normal 正常，bold 粗，bolder 更粗，

Font-variant：normal 保持原字体形状，比如大小写

限制文本长度，多出的给隐藏掉。

两种方式：clip隐藏部分用切割线；ellipsis隐藏部分用省略号

Font-size-adjust:none/number 强制字体尺寸相同，none表示没有，number数字

单词字体间距style=“word-spacing:normal或length”normal指正常距离，length则是设定一个值。文字间距离用letter-spacing。可以设定为负值。

文本修饰效果属性：style=“text-decoration：none/underline/overline/line-through/blink”

Underline下划线overline上划线 line-through删除线 blink闪烁

Text-transform对英文单词的处理：1、capitalize开头大写 2、uppercase 全大写3、lowercase全小写

对齐方式：text-align

Start向第一行开始对齐，end向第一行结束对齐，left左对齐，right右对齐，center居中对齐，justify两边对齐中间均匀分布，

首行缩进text-indent:加长度，表示缩进的长度

行高：line-height：加长度，可为负值 百分比表示字符长度，应用在块标签中，div

White-space空白处理，可应用在块或行元素中。（style）

Normal正常空白会被浏览器忽略 pre空白会被保留 类似

标签，nowrap文本不会换行直到遇到

标签为止，pre-wrap保留空白和换行符即enter键，pre-line不保留空白但保留换行符，inherit继承父元素属性，（嵌套）

2.2 CSS 美化

CSS 样式包含选择符、属性、属性值

内容

1

P为选择符、style=color为属性、red为属性值。

1、样式分类：行内样式、内嵌样式、链接样式、导入样式

2、行内样式：在body内写入标签中

3、内嵌样式：写入head中

1

Text/css是指应用的css属性，不同标准样式不同。

4、链接样式：放在head区域，链接到一个专门的样式文件，让代码分离，方便后期维护

1

Rel指链接到指定的样式表，stylesheet指样式表，type是文件类型，herf是链接文件位置，1.css是指文件名，此处涉及到相绝对（盘符）位置和相对位置的关系。

5、导入样式：@import””放在head中最前面，

1

1.css为文件名，插入方式和上面相同，但可以导入多个文件。

优先级：行内样式>内嵌样式>链接样式>导入样式

内嵌样式中选择方式：1、标签选择 2、类选择器3、id选择器……………

1标签选择-就直接对应代码标签

2 类选择器-选择相同属性一类 例如class属性，见css笔记记载

文字

1

2

3

4

5

6

7

8

9

10

3略

4继承选择器

1

2

3

4

5

6

7

8

9

10

11

在前一个基础上对其中部分标签添加其他属性

5伪类选择器

A标签的4种显示状态

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

Link指为访问时链接状态，visited指访问后链接状态，hover指悬浮在链接上时的状态，active指激活链接时链接的状态

状态指样式

2.3 选择声明

集体声明

1

2

3

4

5

多重套嵌声明

与继承选择器相同

css两种方法注释：

1.通过link单独链接一个css文件

2.在body内写（麻烦）

style是css用于对外观（颜色、大小、背景等）的描述

不同描述间用；

分开“=”是一级等号

“：”是在一级等号内的二级等号

{}是一个重要符号，要多想想其用处。

css注释/注释/

html注释

色彩模式rgb

r 浅深 0-255

g

b

eg：

{color：rgb（232，242，5）；} 百分比也可以，直接写名称也可以

选择器

选择器可以找到html中元素，并且将样式值传递给元素

4大类

基本选择器

组合选择器

属性

伪元素

2.4 基本选择器

1通配符选择器 * （对所有选择器）（eg、border外边框 *div{boeder:1px solid black})

2标签选择器 div (只针对标签div)

3id选择器（针对部分区域）在html需要做标记标签内写上id=“名字”，在另一处

用 #名字 来追述到标记标签，对之做特殊处理 （大小用font-size: px；来调大小）

注id具有唯一性 一个标签只有一个id，但一个id可以对多个标签。

4class选择器

eg html内

123

css内.名字{font-size:100px}

class与id不同，一个标签可以接好多个class

id class 在css中前面可以加标签名来限定范围

eg:div.名字{font-size:100px}

命名不能使用纯数字!!!

2.5 美化网页菜单

网页菜单常用块元素与列表组合

块元素：div、nav两者无区别，但方便分辨

无序列表：ul内接li

有序列表：ol内接li

自定义列表：dl dt dd依次内嵌

有序与无序列表美化通常通过，改变前面的符号或数字来美化，

详情看271，或百度，属性：list-style-type后接none则让其消失

将前面的符号或数字改变成图像：list-style-image:url(图片路径)

Padding-left设置图片与文字的距离

无序列表美化：276页

2.6 图片的美化style属性内

图片的大小：width和 height 只设定其中一个会等比例缩放，两个都设置则不会等比例缩放。

图像和文本和在一个行元素或块元素中则使用text-align文本对齐方式。单独放到其中也可以。

以上为横向对齐

纵向对齐：跟与图像在一行的元素来对齐，vertical-align

Sub与文本下标对齐，super与文本上标对齐，

Top middle bottom老三样

Length以基线为标准，可以为负数

浮动效果float：none/right右/left左

内边距padding-top padding-left padding-right padding-bottom

外边距：margin：用法和上面相同。

背景色：background-color：。。。

插入背景图片：background-image：url（图片名）

1

当背景图过小时几种重铺方法：background-repeat：repeat/repeat-x/repeat-y/no-repeat

第一个全部重铺，第二个x轴方向重铺，第三个y轴方向重铺，第四个不重铺

背景图片与文档一起滚动的问题，background-attachment：scroll/fixed

Scroll指图片与滑轮一起滚动， fixed指图片固定在可见屏幕内不动

Background-position：top，center，bottom/left，right

组合确定位置

背景图片大小：background-size：长度、宽度 只设一个则另一个默认，大小百分比，

Cover将图片缩放覆盖到适合定义区域，contain与cover差不多

加<>指代码不用输入

Background-origin：border/padding/content 背景图片显示地方定义：border指在border边框内显示，padding指在padding区域内显示，content在content区域内显示

218在看

图片包括背景图片上右下左的边距设定：margin：依次四个数值。

图片的美化style属性内

图片的大小：width和 height 只设定其中一个会等比例缩放，两个都设置则不会等比例缩放。

图像和文本和在一个行元素或块元素中则使用text-align文本对齐方式。单独放到其中也可以。

以上为横向对齐

纵向对齐：跟与图像在一行的元素来对齐，vertical-align

Sub与文本下标对齐，super与文本上标对齐，

Top middle bottom老三样

Length以基线为标准，可以为负数

浮动效果float：none/right右/left左

内边距padding-top padding-left padding-right padding-bottom

背景色：background-color：。。。

插入背景图片：background-image：url（图片名）

1

当背景图过小时几种重铺方法：background-repeat：repeat/repeat-x/repeat-y/no-repeat

第一个全部重铺，第二个x轴方向重铺，第三个y轴方向重铺，第四个不重铺

背景图片与文档一起滚动的问题，background-attachment：scroll/fixed

Scroll指图片与滑轮一起滚动， fixed指图片固定在可见屏幕内不动

Background-position：top，center，bottom/left，right

组合确定位置

背景图片大小：background-size：长度、宽度 只设一个则另一个默认，大小百分比，

Cover将图片缩放覆盖到适合定义区域，contain与cover差不多

加<>指代码不用输入

Background-origin：border/padding/content 背景图片显示地方定义：border指在border边框内显示，padding指在padding区域内显示，content在content区域内显示

218在看

图片包括背景图片上右下左的边距设定：margin：依次四个数值。

一、2D转换

Transform底下的各种属性和transition一样需要加-webkit-来在定义；

1、 Translate（x，y）；在x和y轴上移动的距离，以左边和上边为基准线。

2、 rotate(度数deg) 允许负值，旋转顺时钟旋转。

3、 skew（）根据x轴和y轴翻转给定角度。单位deg

2.3 2D Transform 方法

2.8 3D转换

2.9 过渡效果

过渡是使过渡过程效果柔和化，使它不突兀。

Transition过渡属性简写版，分四类

Transition-property：需要过渡的属性名

Transition-duration：过渡效果花费的时间

Transition-timing-function：规定过渡时间曲线，

Transition-delay：规定过渡从什么时候开始（延迟）

黄色标记的四个可以直接简写在transition的后面。

简写的顺序是：名称-持续时间-速度曲线-延迟

写完后下面要在接一个-webkit-transition重复定义上面过渡才能使用。不同浏览器webkit不同

过渡曲线分类：

3.0 动画效果

@keyframes：定义动画css样式，动画

Animation是除了animation-play-state以外所有动画属性的简写；

Animation-name：定义@keyframes的名称

Animation-duration是一个周期所花费的时间 默认0

Animation-timing-function：规定动画的速度曲线

Animation-delay：动画延迟

Animation-iteration-count：规定动画播放次数

Animation-direction：规定动画下一周期是否逆向播放，默认normal

Animation-play-state：规定动画是否运行或暂停

定义动画时，@keyframes是用来单独写定义动画，然后在需要的对象上绑定动画，使用animation：+名字+持续时间；

@keyframes中用百分比定义各个时间段，from、to表示0%到100%；

CSS HTML web前端

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。