前端学习笔记（HTML/CSS）
WEB前端笔记整理
18年读大一时学习的前端设计，怼着一本书一直看，顺便做了笔记，整理了一下，发布出来，笔记内容特别乱我自己都看不懂了，但还是要发出来纪念纪念
参考书籍：《HTML5+CSS3网页设计案例教程》
一、HTML
1.1 HTML架构:
<!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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
以上是html的主要结构，一切便写在其上进行，
head内是一些预先定义修改，在其中修改，body内将直接应用。
body是其主体（身体），内容写在其中。
1.2 文字、图片、超链接
- 文字
- 段落和行的标签
<p>段落内内容</p>
- 1
段落内包含新段落则在p后加对应数字eg：
<p>
wdqwdqwdqwdqwd<br>
<p1>dasdqwdsdasda</p1>
<p1>asdasdasdasd</p1>
</p>
- 1
- 2
- 3
- 4
- 5
- 标题标签
<h1>标题</h1>
- 1
有h1 h2 h3…到六为止，代表6种标题大小，标题内可继续接标题
<h1>
标题1
<h2>标题2</h2>
</h1>
- 1
- 2
- 3
- 4
（注：字符由字符表找对应字符，空行<br> 输入多空行：br{$}*行数 ）
- 1
- 图片
标签:
<src="图片名" alt="图片未显示时名称" title="对图片的描述">
- 1
title是指鼠标悬浮在图片上时，图片显示的名称。
常用图片格式jpg、png、gif
图片位置输入两种方法
（1）C盘为根盘，找对应位置
（2）相对路径，以当前盘为根盘，来找对应位置
…/是返回上一级目录
- 超链接:对内容链接到另一个链接
- 标签链接
<a href="链接网址" target="blank">被链接对象</a>
- 1
target="blank"用来打开新网页使原网页不被覆盖
超链接的另一个用处，做书签，超链接到文本网页的自身的一个标记位置
要在需返回点设置id，超链接到该id
<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.3 音频和视频
- 音频
Audio标签
<audio src="音频名字" controls="controls">音频无法显示时界面显示的内容</audio>
- 1
Controls是音频播放控件。
Audio标签内可加载的一些属性：autoplay自动播放、loop循环、preload预加载、
preload一些数据：auto页面加载后载入整个视频、meta页面加载后只载入元数据、none页面加载后不载入视频。
- 视频
Video标签与audio基本相同，但多出几项内容：
标签内可用属性增加，width宽、height高，poster在视屏未加载好时视频界面显示一张图片让用户等待，
1.4 表格表单
- 表格
应用table标签，构建一个表格，在表格内填内容用tr/th/td
表格不对边框设置则默认为0，即无边框。
<table border="2" >
<tr>
<th>标题</th>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<th>标题</th>
<th>标题</th>
<th>标题</th>
</tr>
</table>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
实际效果
| 标题 | 内容1 | 内容2 |
|---|---|---|
| 标题 | 标题 | 标题 |
tr表示表格中一行，th、td表示在一行中个每一个单元格，th是标题，与td作用差不多，只是字体更粗，起强调作用。
合并单元格：colspan 使单元格横跨列数，rowspan 使单元格横跨行数，（注横跨后要将被横跨的单元格删除）
<table border="2">
<tr>
<th colspan="2">标题</th>
<td>内容1</td>
<td>内容2</td>
</tr>
<tr>
<th>标题</th>
<td>内容</td>
</tr>
</table>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
样式如下
| 标题 | 内容1 | 内容2 |
|---|---|---|
| 标题 | 内容 |
- 表单：收集用户数据，然后传递给服务器。
输入内容：文本、单选、多选框、下拉框。
提交：提交按钮
http：超文本传输协议，浏览器与服务器通讯。即请求加应答。
请求方式有两种：get和post形式
代码形式
<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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
Action是表单提交格式，method是提交方式post get，enctype是提交给服务器时使用什么形式提交。
Input是输入，type是输入类型，不同类型显示不同，name是指提交给服务器时数据的名称。
<textarea name="duo" cols="" rows="" wrap="" ></textarea>
- 1
上面是多行文本输入标签，可以输入一段话，cols指宽度，rows指高度，warp指输入内容大于范围时显示的内容。
size="" maxlength=""
- 1
size指输入框的长度，maxlength则是指输入的最多字符上限，仔细想想可用范围。
Value是定义一个值，相当于编号。
- 按钮
普通按钮，button，单机后按照onclick中指定脚本运行。
<input type="button" name="123" value="单机" onclick="行为脚本">
- 1
提交按钮，submit，提价给服务器。
重置按钮，reset，清楚表单中数据。
<input type="时间属性" name="time" >
- 1
Date和time属性的应用
Date 日、月、年
Month 月、年
Week 周、年
Time 时间
Datetime 时间、日、月、年
Datetime-local 时间、日、月、年（本地）
<input type="数字属性" name="time" >
- 1
填写数字属性：number、range
Number是在空格内填写数字，而range则是以滑条形式调整数字。
例子：
输入<br>
<input type="number" name="time" min="1" max="99"><br>
<input type="range" name="time" min="1" max="99">
- 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，
调节各个位置颜色代码与其相同。
<p style="border:blue dashed 12px;width:100px;height:200px" ;>边框</p>
- 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：阴影水平平移值；阴影竖直平移值；阴影模糊值；阴影颜色；
文字阴影效果。
<p style="text-shadow:4px 6px 10px black;font-size:100px;">一共四个字</p>
- 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 样式包含选择符、属性、属性值
<p style="color:red">内容</p>
- 1
P为选择符、style=color为属性、red为属性值。
1、样式分类：行内样式、内嵌样式、链接样式、导入样式
2、行内样式：在body内写入标签中
3、内嵌样式：写入head中
<style type="text/css">p{样式}</style>
- 1
Text/css是指应用的css属性，不同标准样式不同。
4、链接样式：放在head区域，链接到一个专门的样式文件，让代码分离，方便后期维护
<link rel="stylesheet" type="text/css" href="1.css"/>
- 1
Rel指链接到指定的样式表，stylesheet指样式表，type是文件类型，herf是链接文件位置，1.css是指文件名，此处涉及到相绝对（盘符）位置和相对位置的关系。
5、导入样式：@import””放在head中最前面，
<style>@import"1.css" ;@import"2.css"</style>
- 1
1.css为文件名，插入方式和上面相同，但可以导入多个文件。
优先级：行内样式>内嵌样式>链接样式>导入样式
内嵌样式中选择方式：1、标签选择 2、类选择器3、id选择器……………
1标签选择-就直接对应代码标签
2 类选择器-选择相同属性一类 例如class属性，见css笔记记载
<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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
3略
4继承选择器
<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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
在前一个基础上对其中部分标签添加其他属性
5伪类选择器
A标签的4种显示状态
<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>
- 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 选择声明
- 集体声明
<style>
h1,h2,p{color: red}
</style>
- 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（图片名）
<body style="background-image:url(正面.png)"> </body>
- 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（图片名）
<body style="background-image:url(正面.png)"> </body>
- 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 方法
| 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 轴。 |
| 函数 | 描述 |
2.8 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 转换元素的透视视图。 |
2.9 过渡效果
过渡是使过渡过程效果柔和化，使它不突兀。
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 之间的数值。 |
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：规定动画是否运行或暂停
| 属性 | 描述 | 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%；
文章来源: blog.csdn.net，作者：JeckXu666，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/qq_45396672/article/details/123024444
- 点赞
- 收藏
- 关注作者
评论（0）