大一时学习了一下前端设计的知识,做了笔记,整理了一下,发布出来

[TOC]

WEB前端笔记整理

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

HTML

一、HTML架构:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

</head>

<body>



</body>

</html>

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

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

body是其主体(身体),内容写在其中。

二、文字、图片、超链接

  • 文字方面
  1. 段落和行的标签
1
<p>段落内内容</p> 

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

1
2
3
4
5
<p>
wdqwdqwdqwdqwd<br>
<p1>dasdqwdsdasda</p1>
<p1>asdasdasdasd</p1>
</p>
  1. 标题标签
1
<h1>标题</h1>

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

1
2
3
4
<h1>
标题1
<h2>标题2</h2>
</h1>
1
(注:字符由字符表找对应字符,空行<br> 输入多空行:br{$}*行数 )
  • 图片

    标签:

1
<src="图片名" alt="图片未显示时名称" title="对图片的描述">

title是指鼠标悬浮在图片上时,图片显示的名称。

常用图片格式jpg、png、gif

图片位置输入两种方法

(1)C盘为根盘,找对应位置

(2)相对路径,以当前盘为根盘,来找对应位置

../是返回上一级目录

  • 超链接:对内容链接到另一个链接
  1. 标签链接
1
<a href="链接网址" target="blank">被链接对象</a>

target=”blank”用来打开新网页使原网页不被覆盖

超链接的另一个用处,做书签,超链接到文本网页的自身的一个标记位置

要在需返回点设置id,超链接到该id

1
<p id="ID名字">书签</p>
1
<a href="#ID名字">返回书签</a>
  1. 美化超链接和鼠标(style)

A:link,链接在未访问前样式

A:hover,链接在鼠标悬浮时样式

A:active,链接在点击时的样式

A:visite,链接在访问后样式

鼠标特效:style样式内cursor属性来,包含18个子属性。

Auto自动,按默认来,crosshairs十字准线 default默认鼠标 hand手型 move移动型

Help帮助型 wait等待型 text文本型 n-resize箭头朝向上 s-resize箭头朝下

w-resize朝左 e-resize右,url自定义

三、音频和视频

  1. 音频

Audio标签

1
<audio src="音频名字" controls="controls">音频无法显示时界面显示的内容</audio>

Controls是音频播放控件。

Audio标签内可加载的一些属性:autoplay自动播放、loop循环、preload预加载、

preload一些数据:auto页面加载后载入整个视频、meta页面加载后只载入元数据、none页面加载后不载入视频。

  1. 视频

Video标签与audio基本相同,但多出几项内容:

标签内可用属性增加,width宽、height高,poster在视屏未加载好时视频界面显示一张图片让用户等待,

四、表格表单

  1. 表格

应用table标签,构建一个表格,在表格内填内容用tr/th/td

表格不对边框设置则默认为0,即无边框。

1
2
3
4
5
6
7
8
9
10
11
12
<table border="2" >
<tr>
<th>标题</th>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<th>标题</th>
<th>标题</th>
<th>标题</th>
</tr>
</table>

实际效果

标题 内容1 内容2
标题 标题 标题

tr表示表格中一行,th、td表示在一行中个每一个单元格,th是标题,与td作用差不多,只是字体更粗,起强调作用。

合并单元格:colspan 使单元格横跨列数,rowspan 使单元格横跨行数,(注横跨后要将被横跨的单元格删除)

1
2
3
4
5
6
7
8
9
10
11
<table border="2">
<tr>
<th colspan="2">标题</th>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<th>标题</th>
<td>内容</td>
</tr>
</table>
标题 内容1 内容2
标题 内容
  1. 表单:收集用户数据,然后传递给服务器。

输入内容:文本、单选、多选框、下拉框。

提交:提交按钮

http:超文本传输协议,浏览器与服务器通讯。即请求加应答。

请求方式有两种:get和post形式

代码形式

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<form action="" method="" enctype="" >

​ 用户名:<input type="text" name="user" size="" maxlength=""><br><!--用户名 -->

​ 密码:<input type="password" name="pas" size="" maxlength=""><br><!-- 密码-->

​ 性别:<input type="radio" name="sex>">男

​ <input type="radio" name="sex>">女

​ <input type="radio" name="sex>">未知 <!-- 单选框--><br>



​ 兴趣:<input type="checkbox" name="xingqu" value="xq">跑步

​ <input type="checkbox" name="xingqu1" value="xq">打球

​ <input type="checkbox" name="xingqu2" value="xq">钓鱼

​ <input type="checkbox" name="xingqu3" value="xq">扁强哥<br>

​ (多选框)

​ 家乡:<select name="jx">

​ <option value="jx">安徽</option>

​ <option value="jx">上海</option>

​ <option value="jx">北京</option>

​ <option value="jx">南京</option>

​ (多选框)

​ </select><br>



​ 自我介绍<textarea name="duo" cols="" rows="" wrap="" ></textarea>

​ <input type="submit" value="上交">

​ </form>

Action是表单提交格式,method是提交方式post get,enctype是提交给服务器时使用什么形式提交。

Input是输入,type是输入类型,不同类型显示不同,name是指提交给服务器时数据的名称。

1
<textarea name="duo" cols="" rows="" wrap="" ></textarea>

上面是多行文本输入标签,可以输入一段话,cols指宽度,rows指高度,warp指输入内容大于范围时显示的内容。

1
size="" maxlength=""

size指输入框的长度,maxlength则是指输入的最多字符上限,仔细想想可用范围。

Value是定义一个值,相当于编号。

  1. 按钮

普通按钮,button,单机后按照onclick中指定脚本运行。

1
<input type="button" name="123" value="单机" onclick="行为脚本">

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

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

1
<input type="时间属性" name="time" >

Date和time属性的应用

Date 日、月、年

Month 月、年

Week 周、年

Time 时间

Datetime 时间、日、月、年

Datetime-local 时间、日、月、年(本地)

1
<input type="数字属性" name="time" >

填写数字属性:number、range

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

例子:

1
2
3
4
5
输入<br>

​ <input type="number" name="time" min="1" max="99"><br>

​ <input type="range" name="time" min="1" max="99">

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

表单美化在P259页。

五、边框美化

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

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
<p style="border:blue dashed 12px;width:100px;height:200px" ;>边框</p>

圆角边框:border-radius:值1/值2;两个数值分别定义,水平半径和数值半径,

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

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

CSS

字体特效属性概览

Font-family 字体

Font-size 字体大小

Padding-bottom…

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

Background:url{照片名} repeat-x bottom

添加背景图片,并让其在底部沿x轴重复平铺。

Text-shadow:阴影水平平移值;阴影竖直平移值;阴影模糊值;阴影颜色;

文字阴影效果。

1
<p style="text-shadow:4px 6px 10px black;font-size:100px;">一共四个字</p>

定义字体粗细: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继承父元素属性,(嵌套)

Css3美化

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

内容

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

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

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

3、内嵌样式:写入head中

1
<style type="text/css">p{样式}</style>

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

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

1
<link rel="stylesheet" type="text/css" href="1.css"/>

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

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

1
<style>@import"1.css" ;@import"2.css"</style>

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

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

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

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

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

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


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <meta http-equiv="X-UA-Compatible" content="ie=edge">


<title>Document</title>

 <style>.aa{color: aquamarine}</style>

</head>

<body>

<p class="aa">文字</p>

</body>

3略

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


<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <meta http-equiv="X-UA-Compatible" content="ie=edge">


<title>Document</title>

 <style>


h1{color: aquamarine}

h1 strong{color: red}

</style>

</head>

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

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
<head>


    <meta charset="UTF-8">


    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <meta http-equiv="X-UA-Compatible" content="ie=edge">


<title>Document</title>

 <style>


a:link{color: red}

a:visited{color: red}

a:hover{color: red}

a:active{color: red}

</style>

</head>

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

状态指样式

选择器声明

1集体声明

1
2
3
4
5
<style>

h1,h2,p{color: red}

</style>

2多重套嵌声明

与继承选择器相同

css两种方法注释:

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

2.在body内写(麻烦)

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

不同描述间用;

分开“=”是一级等号

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

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

css注释/注释/

html注释

色彩模式rgb

r 浅深 0-255

g

b

eg:

{color:rgb(232,242,5);}百分比也可以,直接写名称也可以

选择器

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

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}

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

美化网页菜单

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

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

无序列表:ul内接li

有序列表:ol内接li

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

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

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

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

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

无序列表美化:276页

图片的美化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
<body style="background-image:url(正面.png)"> </body>

当背景图过小时几种重铺方法: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
<body style="background-image:url(正面.png)"> </body>

当背景图过小时几种重铺方法: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

2D Transform 方法

matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换,沿着 X 轴移动元素。
translateY(n) 定义 2D 转换,沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换,改变元素的宽度和高度。XY为转换倍数。
scaleX(n) 定义 2D 缩放转换,改变元素的宽度。
scaleY(n) 定义 2D 缩放转换,改变元素的高度。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换,沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换,沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换,沿着 Y 轴。
函数 描述

二、3D转换

函数 描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化,仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化,仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化,仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换,通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换,通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换,通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。

三、过渡效果

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

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

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

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

Transition-timing-function:规定过渡时间曲线,

Transition-delay:规定过渡从什么时候开始(延迟)

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

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

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

过渡曲线分类:

linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

四、动画效果

@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:规定动画是否运行或暂停

属性 描述 CSS
@keyframes 规定动画。 3
animation 所有动画属性的简写属性,除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
animation-timing-function 规定动画的速度曲线。默认是 “ease”。 3
animation-delay 规定动画何时开始。默认是 0。 3
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放默认是 normal,alternate反向 3
animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。 3
animation-fill-mode 规定对象动画时间之外的状态。 3

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

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