前端笔记1
2021-11-11 10:44:29 0 举报AI智能生成
此阶段为HTML和CSS阶段的详细介绍。由于整理不易，开价较高，请意向者谨慎调用
作者其他创作
大纲/内容
<!DOCTYPE html>(了解)告诉游览器解析的时候使用html规范
<html lang=\"en\"> 强调编码格式为英文
head区域：主要用来页面的配置
meta标签用来描述HTML页面的属性
body: 页面的显示区域
基本骨架
标题标签
段落标签(掌握):<p> 段落是通过<p>标签来定义
换行标签(掌握):<br.>、<br/>标准写法、<br /> 三者无区别
hr标签属性:(了解会用) color:水平线颜色 width:宽度 size:高度 align:设置水平线对齐方式 取值范围:left right center
水平线
段落、换行、水平线标签
绝对路径：从根目录一直到图片所在的位置
相对路径：从当前HTML界面当前所在的位置为参考的找起.<自内向外>没有的话通过../跳出当前位置知道找到图片所在的文件夹
src：所要引用的图片的路径
alt：一般指的是当图片路径错误时提示的文本信息（规定图片的错误提示）
title：当鼠标悬停在图片上是给与的提示信息
图片标签<img>
概念：超链接可以是一个字、一个词或者一组词、还可以是一个图片用来跳转页面
href：url链接
target=\"_blank\"：在新的空白页打开
超链接标签<a>
图片、超链接标签
作用：div用于切割页面，将页面内的模块分成N个模块，本身是个盒子 主要用来装元素标签
特点：div里什么类型的标签都可以放，包括div本身
div标签
<span>标签一般用来修饰我们所需要的特殊的文本
span标签
定义：无序列表是一个项目的列表，默认使用的粗体的圆点
type属性值：disc(默认值)、circe(空心圆)、square(小方块)、none(不显示)
无序列表ul>li
定义：列表项目用数字进行标记
type属性值(了解)：1(默认类型:数字标号（1.2.3....）)、a小写字母标号(a、b、c、....)A 大写字母标号(A、B、C...)、i(小写罗马数字)、I(大写罗马数字)
有序列表ol>li
列表标签
介绍：表格在数据展示方面上表现优秀，通过与css结合，让数据更加美观整齐
特点：行、列、单元格
border：表示边框尺寸
width：table表的宽度
height：table表的高度
border-color：表示表格边框的颜色
align=\"center\"：单元格内文本居中
跨行：rowspan=\"\"
跨列：colspan=\"\"
table属性
表格标签
工作原理：表单在web页面中用来给访问者填写信息，从而能采集客户端的信息，是网页具备交互功能，当用户填写完信息时做提交操作，表单的内容便会从客户端的浏览器传送给服务器，经过服务器的处理程序后，再将客户所需的信息传送回来
action：提交的url地址
method：提交方式：get(默认)/post(安全性高)
form标签属性
value：默认的内容，当前值
placeholder：提示用户输入内容格式，他不会被form表单提交
text文本框
password密码框
属性name：单选框使用时必须设置相同的name属性
checked：默认选中，常配合单选框或复选框使用
radio单选框
checkbox复选框
重置当前表单里面的所有表单元素为默认值
reset重置按钮
当用户点击确认按钮时，表单的内容会被传送到另一个文件
submit提交按钮
没有实际功能的按钮，需要配合JS事件使用
button按钮
image图片按钮
file文件域
hidden隐藏域
表单元素input
1.lable元素用来提升用户体验度，如果在lable标签或元素内点击文本，浏览器就会自动将焦点转到和标签相关的表单控件上 2.多配合单选框和复选框使用 3.lable标签的for属性值应当和相关的表单元素id属性值相同
label标签
select标签：用来创建下拉列表
option属性：selected：默认被选中
option标签：用来创建下拉列表的选项，默认选中的下来列表是第一个option的内容
optgroup标签：常用于把相关的选项组合在一起
下拉列表标签
1.文本区域可以容纳无限量的文本内容2.可以通过cols rows来设定默认的行和列
textarea文本域标签
form表单
<a><a></a></a>：正确：（内联嵌套内联）<a><span></span></a>：正确：（内联嵌套内联）<span><div></div></span>：错误：（内联嵌套块级）
内联标签可以嵌套内联元素，不可以嵌套块状元素
<div><div></div></div>：正确：（块级嵌套块级）<div><span></span></div>：正确：（块级嵌套内联）
块元素可以嵌套块元素（不是所有块级都可以嵌套块级），或者是内联元素
<p><ol><li></li></ol></p>：错误：（特殊块级标签只能嵌套内联标签）<p><div></div></p>：错误：（特殊块级标签只能嵌套内联标签）
有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素，这几个特殊的标签是：h1~h6、p、dt
<div><h2></h2><p></p></div>：正确：（块级和块级并列一级）<div><a href=\"#\"></a><span></span></div>：正确：（内联与内联并列一级）<div><h2></h2><span></span></div>：错误：（块级和内联并列一级了）
块元素中嵌套的元素，块元素和块元素并列一级，内联元素和内联元素并列一级
块级元素和内联元素的嵌套规则
标签
HTML
行内样式：直接在标签内部设置CSS样式(实际使用时不提倡用，可以在测试时用)
内嵌样式：在head内直接<style></style>
链接式 link方式：<link src=\"css文件路径\">
导入式：<style> @import url(css文件路径); </style>
外部引用
调用方式
标签选择器:选择当前页面内的所以此类型的标签，设置统一的样式，表示的是一种“共性”(尽量少使用，因为不管标签被嵌套的多深都会被选择上)
所有的标签都可以拿来当作标签选择器
标签选择器
id在HTML页面中是唯一的标识符
id主要服务于js
在css页面中尽量减少使用id选择器
id选择器(#)
类选择器表示的是相同类名的标签统一的样式
类选择器可以“共用”，使用方法：同意标签下的两个类名用空格隔开
类选择器( . )
选中的是父类标签下的所有同类标签（儿子 孙子 重孙子 ……）
后代选择器(空格)
语法：父元素>子元素{color:red;} 表示的是从父元素开始里面的第一层子元素元素变成红色，只能传给儿子，孙子和其他堂亲都不行
子代选择器(>)
定义：当有多个相同类名的不同标签可以使用交集选择器给其中一种标签设置单独样式
语法：标签名1标签名2（中间不加任何东西）
交集选择器
定义：不同标签设置相同样式
并集选择器
交、并集选择器
语法：*{ }
通配符选择器( * )
:first-child：同级别的第一个
:last-child：同级别的最后一个
:nth-child(n)：同级别的第n个
:nth-last-child(n)：同级别的倒数第n个
序选择器
语法：标签1+标签2：解读：选择紧邻着标签1后的标签2设置样式
定义：选择紧邻着标签后的另一标签
下一个兄弟选择器(+)
:link：未访问
:visited：已访问
:hover：鼠标划过
:active：已选中
伪类选择器
:before：在标签内部前面添加
:after：在标签内部后面添加
伪对象选择器
伪类、伪对象选择器
概念：当使用不同选择器设置同一个标签统一样式时，会发生冲突需要根据选择器的优先级(权重)决定，优先级高的优先显示
权重：内联样式： 1000 Id选择器： 100 类选择器： 10 标签选择器： 1 通配符选择器： 0 元素继承的属性：没有优先级 !important 使用后指定的CSS样式优先级最高 当我们使用的选择器包含多种选择器时需要将各个选择器权重相加(ps:并集选择器除外)
选择器优先级
选择器
关键字：red yellow pink orange...
十六进制：#FFFFFF
字体颜色：color
浏览器默认字体大小16px，浏览器支持最小字体12px
1em = 16px
字体大小：font-size
normal(默认值)
bold(加粗)
字体加粗：font-weight
italic(倾斜)
字体倾斜：font-style
字体系列：font-family
字体属性：font-
居中(center)
居左(left)
居右(right)
ps：一般给块级元素进行居中
文本水平对齐方式：text-align
none(默认值)
underline(下划线)
下划线：text-decoration
也可以取负值，取负值的时候时左缩进
首行缩进：text-indent
uppercase(大写)
lowercase(小写)
capitalize(每个单词的首字母大写)
控制文本大小写：text-transform(了解)
文本属性：text-
文本垂直居中：line-height = height
文本所在的元素的默认高度是由该文本行高撑起来的，文本默认在行内垂直居中。如果修改了div的高度，仍然需要保持垂直居中的话只需要让行高＝高，文本垂直居中
行高属性：line-height
background-color(背景颜色)
背景图和img标签的区别:背景图超出元素尺寸大小的部分会被隐藏而图片超出元素尺寸的部分会直接溢出
background-image(背景图)
no-repeat：背景图在元素内不平铺
repeat-x：在水平方向上平铺
repeat-y：在垂直方向上平铺
background-repeat(背景图平铺方式)
语法：background-size:背景图宽度 背景图高度
像素：px
百分比(相对于元素的宽高)
cover：按照原图等比例缩放直至填满元素的整个内容部分
contain：按照原图等比例缩放直至填满元素垂直或水平部分
ps：如果background-size只取一个值:那么这个背景图的高度\\宽度按照原图的等比例缩放
属性值
background-size(背景图大小)
语法：background-position:水平方向的位置 垂直方向的位置
像素
百分比
方向值
属性
background-position(背景图定位)
背景属性：background-
只有text-(文本)、font-(字体属性)、color以及line-属性可以被后代继承
另外:关于盒模型/属性/定位/布局都不会被继承
属性继承性
属性：block
独占一行
可以设置宽高
默认宽度为浏览器宽度
特点
块级元素(div ul li p h1-h6等)
属性：inline
不独立成行
不能设置宽高(img和input标签比较特殊，他们属于替换元素，具备内置宽高，所以宽高可以被设置)
默认宽高是内容撑起来的
行内元素(span a input img等)
属性：inline-block
特点：既不独立成行，还能设置宽高
行内块元素
属性：none：用来隐藏元素(原位置丢失)
display属性的隐藏功能
属性：hidden：用来隐藏元素(原位置保留)
属性：none：取消隐藏元素
visibility属性的隐藏功能
CSS行内块级元素：display
概念：每一个标签都可以看做一个盒子，常用的是标准盒模型（常用）和怪异盒模型（IE）
组成部分：content(内容)+padding(内边距)+border(边框)+margin(外边距)
实际宽高 = content+padding+border+margin
定义：css边框属性允许我们指定一个元素边框的样式和颜色 配合border-top/border-right/border-bottom/border-left使用
solid(实线)
dotted(点虚线)
dashed(虚线)
double(双线)
边框宽度：width
边框颜色：color
复合写法：border:宽度 样式 颜色
边框圆角：border-radius
边框：border
定义：元素边框与元素内容之间的距离就是我们的padding，常配合：padding-top/padding-right/padding-bottom/padding-left使用
复合用法：padding:上 右 下 左：上下左右值相等的话可以只写一个值
特点：设置了padding之后会撑大该元素
内边距：padding
定义：元素周围的空间距离，即上右下左的外边距配合margin-top/margin-right/margin-bottom/margin-left使用
margin复合用法：与内边距类似
注意：当两个上下分布的盒子同时设置了外边距两者的实际距离取较大的外边距值 当两个左右分布的盒子同时设置了外边距两者的实际距离为两者外边距之和
外边距：margin
让块级元素居中前提，得设置了宽度的元素才能通过margin：auto实现水平居中
盒子居中：margin:auto
概念：版心是指主题内容所在的区域，一般在浏览器窗口水平居中
常见的宽度值：960px 980px 1000px 1200px等
版心
标准盒模型
content-box：标准盒模型
border-box：IE盒模型
定义盒子的类型：box-sizing
实际宽高 = 内容-内边距-边框-外边距
解决块级元素之间间隙问题：给父元素设置一个font-size:0;即可解决
IE(怪异)盒模型
盒模型
定义：制作页面是都必须遵循浏览器的渲染规则:自上而下 自左而右
特点：空白折叠（把空白区域折叠成一行） 高矮不齐，底部对齐
标准文档流
使元素脱离标准文档
浮动的目的
浮动认知
浮动的元素会脱离标准文档流(脱标)，浮动后的元素原位置不在保留
浮动后的元素碰到父元素的边框就会停止，碰到浮动的元素也会停止
浮动的元素不会发生重叠
浮动的元素只能左右浮动
无论块级还是行内设置浮动后都会变成行内元素(不独立成行还能设置宽高)
原理
left(左浮动)
right(右浮动)
语法：float:
给父元素设置一个重定的高度
会给父元素找到一个合适的高度
缺点：不能和定位配合使用
overflow:hidden：溢出隐藏
.clearfloat:after { content: ''; clear: both; display: block; height: 0; line-height: 0; visibility: hidden; }
为浮动元素的父元素添加
伪对象法
隔墙法：在两个浮动元素之间添加clear:both
清除浮动的影响
浮动
概念：给元素设置相对于其原来位置/父元素/浏览器窗口的位置
固定定位(position:fixed)
相对定位(position:reltive)
绝对定位(position:absolute)
定位的方式
定位认知
参考点：浏览器窗口
原位置：不再保留
配合top right bottom left 进行定位使用(top'和left的优先级高于bottom和right)
应用场景：固定导航 侧边栏
固定定位
参考点: 元素原来的位置(移动后的四个角参考点必须还是原来的四个角)
原位置：保留
配合top left right bottom使用(top left优先级高于right bottom)
应用场景：小范围浮动、配合绝对定位
相对定位
绝对定位
定位的元素定位后会覆盖没有定位的元素
如果我们没有设置z-index的话 后定位的元素会覆盖前面定位的元素
都定位的元素通过z-index的值大小来决定覆盖顺序
z-index: 的值没有单位就是一个整数默认值0
z-index: 只能给定位的元素来设置
z-index
定位
CSS
语法：元素1~元素2{}
定义：查找元素1后面所有的元素2类型元素
~选择器
a[href='sina']直接通过元素属性名找到对应的元素
a[href^='b']查找href属性以b开头的a标签
a[href*=\"i\"]href属性包含i的所有a标签
属性选择器
:nth-child(2n-1) 选择奇数
:nth-child(2n)选择偶数
结构性选择器
取四个值：左上 右上 右下 左下
取三个值：左上（右上左下） 右下
取两个值：(左上右下) (右上左下)
圆角(border-radius)
定义：向框添加一个或者多个阴影
语法：box-shadow: 水平方向上位置，垂直方向位置，阴影的模糊度，阴影尺寸(不常用)，阴影的颜色(默认黑色) 阴影类型(inset(内阴影) outset(默认 外阴影))
水平方向和垂直方向必须写，模糊、尺寸、颜色都可选则写
盒阴影(box-shadow)文字阴影(text-shadow)
translate：位移
rotate：旋转
scale：缩放
如果想要多个效果只需要写一个transform：即可，剩下的转换效果一次设置上即可
转换(transform)
过渡属性的复合写法：transition:选择要过渡的属性 过渡时间) 过渡速度变化效果 属性延迟多长时间
ease(先加速后减速)
ease-in(加速)
ease-out(减速)
ease-in-out(先加速后减速)
linear(匀速)
过度速度的变化效果属性值
过度(transition)
语法：animation:动画名 持续时间 速度变化效果 延迟时间 循环次数 播放方向 停留在结束位置
单位：阿拉伯数字
infinite(无限次循环)
循环次数
属性值：alternate(往返执行)
播放方向
forwards(停留在结束位置)
animation-play-state: paused;（hover效果内使用）
动画(animation)
返回顶部：直接给href加#：<a href=\"#\">返回顶部</a>
返回任意位置：在返回的位置取一个name=”名字”，再点击跳转的地方a标签的href=\"#加起的名字\"<a name=\"a1\">底部</a><a href=\"#a1\" >返回中心</a>
id书签：<span id=\"top\">我是头部</span> <a href=\"#top\">返回top</a>
跨页面指定位置跳转：\"需要跳转的页面的路径#跳转后页面位置的id名\"
锚点链接
CSS3
前端笔记1
0 条评论
回复 删除
下一页
