知识总结
0802（周一）内容概要
主题:HTML超文本标记语言
- head内常见标签(了解)
- body内常见标签(重要)
- 基本标签
- 常见标签
- 特殊符号
- 列表标签(重要)
- 表格标签(重要)
- form表单标签(重要)
0802内容详细
head内常见标签(了解)
title
style
内部可以直接书写css代码调节html样式
但是严格意义上来说不同的语言应该存放在不同的文件夹内
link
通过href参数引入外部css文件((绝对路径与相对路径))
script
内部可以直接书写js代码
也可以通过src参数引入外部的js文件(绝对路径与相对路径)
meta
定义网页源信息
参数description
定义网站的简介
参数keyword
定义用户可能搜索到的关键字，增加网页被搜索到的概率
"""针对head内标签，有一个大致的认识即可，无需深究"""
body内常见标签(重要)
"""
1.为什么有些标签独占一行，有些标签不占呢?(重要)
html标签分为两大类
1.行内标签 b s u i
自身文本多大就占多大
2.块儿级标签 h p
标签独占一行
2.为什么有些标签有头有尾，有些标签就一个头(重要)
html标签针对标签个数也有分类
1.双标签
有头有尾<h1></h1>
2.自闭和标签
有头<hr>
"""
<!--标题系列-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
没有标签包裹的文本
没有标签包裹的文本
没有标签包裹的文本
<!--加粗 斜体 下划线 删除线-->
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<!--段落标签-->
<p>20岁超越30岁，40岁，50岁人的成就</p>
<p>不吃学习的苦 就要加倍吃生活的苦</p>
<p>年轻不是用来挥霍的资本，年轻是用来奋斗拼搏</p>
<!--水平线 换行-->
<hr>
<br>
特殊符号
<!--特殊符号-->
a > b
a < b
何处望神州满眼 风光北固楼天下兴亡多少事
¥人民币
©版权
®商标
&特殊&符
常见标签之a链接标签
<a href='https://www.baidu.com'>百度</a>
href参数
1.放网址点击可以直接跳转
2.锚点功能
放其他标签的id值点击就可以跳转到对应的标签位置
target参数
控制跳转页面是在当前页还是新建页
_self
_blank
标签两大重要属性(重要)
1.id值
类似于标签的身份证号码 在同一个html文件内 id值不能重复
<a id='d1'></a>
2.class值
类似于标签的群体号码 多个标签可以属于一个群体 多个标签也属于多个群体
<a class='c1'></a>
<a class='c1 c2'></a>
常见标签之img图片标签
<img src='111.jpg'/>
src参数
1.可以放网络图片的地址
2.也可以放本地图片的地址
title参数
鼠标悬浮在图片上之后可以展示的文字信息
alt参数
图片由于某些原因加载不出来的时候可以提示的文字信息
width、height参数
调节图片的长宽 默认调节一个就可以 另外一个等比例缩放
如果两个都调节那么可能会出现图片失真的情况
常见标签之列表标签
# 1.无序列表(掌握)
<ul>
<li>小李</li>
<li>小明</li>
<li>小红</li>
</ul>
"""页面上看似有规则的横向或者竖向一次排列的标签大概率都是无序列表"""
# 2.有序列表(了解)
<ol type='A'>
<li>小李</li>
<li>小明</li>
<li>小红</li>
</ol>
# 3.标题列表(了解)
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容1</dd>
<dd>内容2</dd>
</dl>
常见标签之table表格标签(重要)
<table>
<thead>
<tr> # 一个tr就代表一行
<th>序号</th> # th加粗的文本
<th>姓名</th>
<th>年龄</th>
</tr>
</thead> # 表头(字段名称)
<tbody>
<tr>
<td>1</td> # td普通文本
<td>jason</td>
<td>18</td>
</tr>
</tbody> # 表单(数据部分)
</table>
常见标签之form表单(重要)
"""该标签可以接受用户的数据并发送给后端服务器"""
获取用户数据的标签最为常见的就是input并且获取用户数据的标签最好都要有一个name属性用来表示该数据到底是用户的什么数据
input标签 # 变形金刚
type参数
text
password
date
email
radio
checkbox
file
button # 没有任何作用
reset # 重置
submit # 触发提交数据的动作
select标签
下拉选择
textarea标签
大文本
0803（周二）内容概要
-
body内常见标签补充
-
form表单重要参数补充
-
CDN知识说明(后面还会使用)
-
CSS层叠样式表(给html标签调节样式)
0803内容详细
body内常见标签补充
块儿级标签
div
行内标签
span
# 上述两个标签主要用于页面的前期结构布局
"""
标签与标签直接可以相互嵌套(理论上可以无限嵌套)
<div>
<div></div>
<a></a>
<p></p>
</div>
"""
块儿级标签可以嵌套块儿级标签和行内标签
特例:p标签虽然是块儿级标签但是它不能嵌套块儿级标签
行内标签只能嵌套行内标签
# 科普:前端不会轻易的报错(因为前端是直接跟用户打交道的 注重用户体验)
小练习
如何使用div快速布局一个网页架构?
以小米官网为例
导航条与页眉典型的div布局
span标签主要用来给文本占位
form表单重要参数补充
input标签
value参数
相当于默认值
本质:用户数据其实都是由value参数存储
# 用户在输入框中输入了jason其实就相当于value=jason
placeholder参数
相当于提示信息
针对radio和checkbox可以默认选中
checked参数
checked='checked'
# 在html中如果标签的属性名和属性值相等 那么可以简写
checked
select标签
option子标签
selected='selected' # 简写 selected 默认选中
form标签
action参数
用来控制数据提交的地址
novalidate参数
取消浏览器的校验动作
...后续重要参数爬虫课程再介绍
button标签
如果写在了form表单的内部 那么也可以出发提交动作
"""
能够触发form表单提交数据的标签有两个
<input type='submit'/>
<button></button>
"""
CDN内容分发网络
主要功能:使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率
# 有些常见的软件各大互联网都开设了免费的CDN服务
eg:前端相关CDN服务 >>> https://www.bootcdn.cn/
"""要想使用CDN的前提是你的计算机必须时刻有网络"""
CSS层叠样式表(给html标签调节样式)
"""前端永远都是你抄我我抄你 其乐融融"""
css就是用来调节html标签样式的
# 语法结构
选择器 {
属性名1:属性值1;
属性名2:属性值2;
}
# 语法注释
/*注释内容*/
# css引入方式
1.style标签内部直接书写
<style></style>
2.link标签href属性引入外部css文件
<link href='' rel='stylesheet'></link>
3.在标签内部直接书写
<p style='color:red;'></p>
"""上述三种方式最正规的是第二种引入外部css文件"""
css选择器
"""为什么不直接学习调节样式而学选择器 因为页面上相同的标签太多了"""
# 基本选择器(重要)
1.标签选择器(直接写标签名称即可)
p {
color:red;
}
2.类选择器(书写标签class属性值并在前面加点)
.c1 {
color:blue;
}
3.id选择器(书写标签id属性值并在前面加#)
#d1 {
color:black;
}
4.通用选择器(了解 指代所有的标签)
* {
color:green;
}
# 组合选择器(重要)
"""
在前端我们如何表达标签之间的嵌套关系
关键点就看嵌套的层级
<div>
<div>是外面div的儿子 内部a的父亲
<a>是外面div的儿子 外外面div的孙子</a>
</div>
<a>是外面div的儿子</a>
<p>是外面div的儿子</p>
</div>
"""
1.后代选择器
2.儿子选择器
3.毗邻选择器
4.弟弟选择器
0804（周三）内容概要
预知:偏难偏枯燥(纯知识)
- 组合选择器
- 伪类选择器
- 伪元素选择器
- 选择器优先级
- html样式调节
0804内容详细
组合选择器
1.儿子选择器(大于号)
div>p {}
2.后代选择器(空格)
div p {}
3.毗邻选择器(加号):同级别紧挨着的下一个
div+p {}
4.弟弟选择器(数字1左边的键)
div~p {}
"""上述的案例使用的都是标签选择器 其实也可以切换为任意选择器"""
小练习
#d1>p {}
找id为d1标签内部所有的儿子p
.c1 .c2 {}
找class为c1标签内部所有class为c2的后代标签
div>.c1 {}
找div标签内部class为c1的儿子标签
.c1+#d1 {}
找class为c1标签同级别紧挨着的id为d1的标签
属性选择器
"""
HTML标签除了可以有自带的属性之外还支持自定义属性
<p id='d1' class='c1' name='jason' age=18 xxx=yyy></p>
"""
# 关键性的符号就是中括号
[name] {color:red}
查找含有属性名name的标签
[name='jason'] {color:red}
查找含有属性名name并且属性值是jason的标签
p[name='jason'] {color:red}
查找含有书名name并且属性值是jason的p标签
分组与嵌套
# 分组(逗号隔开 同级别) 找p标签、div标签、span标签
p,div,span {
color:yellowgreen;
}
# 嵌套(不同的选择器可以混合使用) 找id=d1、class=c1、div标签
#d1,.c1,div {
color:yellowgreen;
}
div.c1 {} # 找class=c1的div标签
伪类选择器
# 以链接标签为例
1.未点击状态(了解)
a:link {
color:blue;
}
2.悬浮状态(掌握)
a:hover {
color:red;
}
3.点击状态(不松开)(了解)
a:active {
color:green;
}
4.点击之后的状态(了解)
a:visited {
color:pink
}
# 以input为例 获取焦点状态(聚焦) (掌握)
input:focus {}
伪元素选择器
# 通过css代码给html标签添加文本内容或者修改
# 改变文本第一个字
p:first-letter {
font-size:48px;
color:red;
}
# 在文本开头添加内容
p:before {
content:'#';
color:red;
}
# 在文本末尾添加内容
p:after {
content:'?';
color:blue;
}
"""该知识点在浮动中应用(后面讲解)"""
选择器优先级
1.相同选择器不同位置
就近原则(谁离我更近我就听谁的)
2.不同选择器不同位置
行内式(了解) > id选择器 > 类选择器 > 标签选择器
"""优先级也可以打破 需要借助于关键字"""
!important(尽量不要使用)
字体属性相关
1.长宽
width height
# 行内标签无法设置长宽 完全取决于内部文本
2.字体大小
font-size
3.字体颜色
第一种: color:red
第二种: color:#4d4d4d
第三种: color:RGB(128,128,128)
"""
如何利用常见软件取色
1.qq微信截图自带三基色取色
RGB(128,128,128)
2.利用浏览器自带的取色器取色
#4d4d4d
"""
文字属性
1.文字对齐(掌握)
text-align:center
2.文字装饰(重要)
text-decoration:none # 主要用于a标签取出自带的下划线
3.首行缩进(了解)
text-indet:32px
背景属性
1.背景色
2.背景图片background-color:RGB(255,160,0);background-image:url('111.png');background-repeat:no-repeat;background-position:center
/*如果多个参数都是相同的前缀 那么可以简写*/
background:#336699 url('111.png') no-repeat center center;
0805（周四）内容概要
主体:结束CSS
- 边框属性(重要)
- display属性(了解)
- 盒子模型(重要)
- 浮动属性(较难理解 应用很简单)
- 溢出属性
- 定位属性
- z-index属性
- 手动书写一个网页(重要)
0805内容详细
边框属性(重要)
border-left-color:green;
border-left-width:5px;
border-left-style:solid;
/*上述所有的属性名前缀都一样 所以可以简写*/
border-left:5px solid yellow
border-top-color:red;
border-top-width:10px;
border-top-style:dashed;
/*上述所有的属性名前缀都一样 所以可以简写*/
border-top:10px dashed red
border-right-color:yellow;
border-right-width:3px;
border-right-style:dotted;
/*上述所有的属性名前缀都一样 所以可以简写*/
border-top:3px dotted yellow
border-bottom-color:pink;
border-bottom-width:8px;
border-bottom-style:solid;
/*上述所有的属性名前缀都一样 所以可以简写*/
border-bottom:8px solid pink
/*终极缩写形式 上下左右全部采取一样的样式*/
border:5px solid black
/*如何画圆*/
border-radius:50%
display属性(了解)
display:none
"""
钓鱼网站
做一个与正规网站一模一样的页面(银行网站)
利用display隐藏提前写好的骗子数据
实现狸猫换太子的效果
"""
盒子模型
"""
类比学习法
盒子模型我们可以看成是快递盒
快递盒与快递盒之间的距离 外边距(margin)
快递盒的厚度 边框(border)
快递盒与内部物体之间的距离 内边距(padding)
物体的大小 内容(content)
"""
margin用来调节标签与标签之间的距离
标签与标签可以彼此独立也可以嵌套
padding用来调节标签与标签内部(文本或者标签)的距离
margin-left:20px;
margin-top:20px;
margin-right:40px;
margin-bottom:60px;
/*前缀一致 那么可以缩写*/
margin:10px # 一个参数表示上下左右
margin:20px 40px # 第一个控制上下 第二个控制左右
margin:20px 30px 40px # 第一个控制上 第二个控制左右 第三个控制下
margin:10px 20px 30px 40px # 上右下左(顺时针)
padding-left:40px;
padding-top:30px;
padding-right:40px;
padding-bottom:60px
/*前缀一模一样 也可以缩写 规律跟margin一致*/
浮动属性(重要)
float # 页面布局肯定需要用到浮动
"""浮动的元素脱离文档流 相当于漂浮在空中"""
浏览器针对文本是优先展示的(想法设法的展示出文本)
浮动带来的影响
浮动会导致父标签元素"塌陷" >>> 缺点
1.推导步骤一(不可取)
自己再写一个div撑着
2.推导步骤二(不好理解)
clear属性
clear:left、right、both # 不允许标签左侧有浮动的元素
3.终极结论(记住就可以)
.clearfix:after {
content:'';
display:block;
clear:both
}
"""
在写css代码之前先写好上述解决浮动带来塌陷的css代码
哪个父标签塌陷了就给哪个父标签加一个clearfix类属性即可
"""
溢出属性
overflow
div {
width:100px;
height:100px;
border:3px solid black;
border-radius:100%;
overflow:hidden
}
img {
width:100%;
}
# 圆形头像制作
定位属性
非定位态(静态) # 了解
所有的标签默认都是非定位状态 无法使用定位改变位置 static
相对定位 # 了解
position:relative 相对于标签原来的位置做定位
绝对定位 # 了解
position:absolute 相对于已经定位过的父标签做定位
eg:小米官网购物车
固定定位 # 掌握
position:fixed 相对于浏览器窗口做定位
是否脱离文档流
浮动 相对定位 绝对定位 固定定位
脱离文档流
浮动
绝对定位
固定定位
不脱离文档流
相对定位
# 脱离文档流:简单的理解为原来的位置是否可以被其他标签占用
0806（周五）内容概要
-
书写三层结构的模态框
-
编写简易博客园界面(重点掌握)
-
前端框架之Bootstrap(有趣重点)
带你使用CV大法快速搭建页面
0806内容详细
书写三层结构的模态框
1.最上面一层需要有一个form表单，获取用户名和密码
2.第二层就是浅黑色
3.第三层放一张图片
<!DOCTYPR html>
<html>
<head>
<title>模态框</title>
<style>
.cover {
position:fixed;
top:0px;
left:0px;
right:0px;
bottom:0px;
background-color:rgba(127,127,127,0.75);
z-index:999
}
.modal {
position:fixed;
top:50%;
left:50%;
z-index:1000;
background-color:white;
height:200px;
width:400px;
margin-top:-100px;
margin-left:-200px;
}
</style>
</head>
<body>
<div class='content'>
<img src='111.png'/>
</div>
<div class='cover'></div>
<div class='modal'>
<form action=''>
<p>username:
<input name='username' type='text'/>
</p>
<p>password:
<input name='password' type='password'/>
</p>
<input type='submit' value='注册'/>
<input type='button' value='取消'，id='d1'/>
</form>
</div>
</body>
</html>
书写简易博客园界面
"""
搭建网页不要急着写 先利用div构造页面的大致布局
eg:回想常用布局标签div以及小米官网
在使用div做页面布局的时候，由于div个数较多为了能够很好的区分
我们通常会给不同的div起不同的class属性(属性值最好能够有一定的区分度)
"""
# 1.先写html代码
# 2.再写css代码
代码参考群内文件即可
前端框架
# 前端的框架有很多，功能也参差不齐
什么是框架:别人提前帮你写好了大部分功能的工具
前端框架
页面搭建相关
Bootstrap elementui layui
功能应用相关
react Vue
# Bootstrap框架
能够让你cv快速搭建页面
# 压缩文件
bootstrap.css # 未压缩的
bootstrap.min.css # 压缩之后的
# 页面布局
<div class='container'> # 左右两边是否有留白
<div class='row'> # 一行均分12份
<div class='col-md-6 c1'></div> # 控制占几份
# 响应式布局
能够根据浏览器窗口和机器型号的不同自动调节比例
"""使用bootstrap的情况下给标签调样式 一般都是修改标签的calss值即可"""
