一周内容回顾
8/2周一内容概要
- head内常见标签
- body内常见标签
- 基本标签
- 常见标签
- 特殊符号
- 列表标签
- 表格标签
- form表单标签
内容详细
head内常见标签
title
style
内部可以直接书写css代码调节html样式
但是严格来说不同语言应存放在不同的文件夹内
link
通过href参数引入外部css文件
script
内部可以直接书写js代码
也可以通过src参数引入外部的js文件
meta
定义网页源信息
1.参数description
定义网站的简介
2.参数keyword
定义用户可能搜索到的关键字 增加网页被搜索到底的概率
body内常见标签
#前提
html标签分为两大类
1.行内标签 (b s u i)
自身文本多大就占多大
2.块儿级标签 (h p)
标签独占一行
html标签针对标签个数也有分类
1.双标签
有头有尾<h1></h1>
2.自闭和标签
有头<hr>
#<!--标题系列-->
<h1>一级标题</h1>
<h2>二级标题</h2>
#<!--加粗 斜体 下划线 删除线-->
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
#<!--段落标签-->
<p>xxx111</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=‘123.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属性用来表示该数据到底是用户的什么数据
type参数
text
password
date
email
radio
checkbox
file
button # 没有任何作用
reset # 重置
submit # 触发提交数据的动作
#select标签
下拉选择
#textarea标签
大文本
8/3周二内容概要
- body内常见标签补充
- form表单重要参数补充
- CDN知识说明
- CSS层叠样式表
- CSS选择器
内容详细
body内常见标签补充
1.块儿级标签 div
2.行内标签 span
# 上述两个标签主要用于页面的前期结构布局
"""
标签与标签直接可以相互嵌套
eg:
<div>
<div></div>
<a></a>
<p></p>
</div>
"""
块儿级标签可以嵌套块儿级标签和行内标签
特例:p标签虽然是块儿级标签但是它不能嵌套块儿级标签
而行内标签只能嵌套行内标签
form表单重要参数补充
input标签
1.value参数 #相当于默认值
本质:用户数据其实都是由value参数存储
2.placeholder参数 #相当于提示信息
针对radio和checkbox可以默认选中
3.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层叠样式表
"""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选择器
# 基本选择器
1.标签选择器(直接写标签名称即可)
p {
color:red;
}
2.类选择器(书写标签class属性值并在前面加点)
.c1 {
color:blue;
}
3.id选择器(书写标签id属性值并在前面加#)
#d1 {
color:black;
}
4.通用选择器(指代所有的标签)
* {
color:green;
}
# 组合选择器
1.后代选择器
2.儿子选择器
3.毗邻选择器
4.弟弟选择器
8/4周三内容概要
- 组合选择器
- 伪类选择器
- 伪元素选择器
- 选择器优先级
- html样式调节
内容详细
组合选择器
1.儿子选择器(大于号)
div>p {}
2.后代选择器(空格)
div p {}
3.毗邻选择器(加号):同级别紧挨着的下一个
div+p {}
4.弟弟选择器(数字1左边的键)
div~p {}
属性选择器
#前提
HTML标签除了可以有自带的属性之外还支持自定义属性
eg:
<p id=‘d1‘ class=‘c1‘ name=‘小明‘ age=20 xxx=yyy></p>
# 关键性的符号就是中括号
[name] {color:red}
查找含有属性名name的标签
[name=‘jason‘] {color:red}
查找含有属性名name并且属性值是jason的标签
p[name=‘jason‘] {color:red}
查找含有书名name并且属性值是jason的p标签
分组与嵌套
1.分组(逗号隔开 同级别)
#找p标签、div标签、span标签
p,div,span {
color:yellowgreen;
}
2.嵌套(不同的选择器可以混合使用)
#找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选择器 > 类选择器 > 标签选择器
"""优先级也可以打破 需要借助于关键字"""
eg:!important
字体属性相关
1.长宽
width
height
#行内标签无法设置长宽 完全取决于内部文本
2.字体大小
font-size
2.字体颜色
color:red
color:#xxxxxx
color:RGB(0,0,0)
#取色
1.借助微信/QQ截图自带的三基色取色
2.利用浏览器自带的取色器取色
文字属性
1.文字对齐
text-align:center
2.文字装饰
text-decoration:none
3.首行缩进
text-indet:32px
背景属性
#背景色
#背景图片
引入方式:
1.background-color:RGB(0,0,0);
2.background-image:url(‘111.png‘);
位置方式：
background-repeat:no-repeat;
background-position:center
#如果多个参数都是相同的前缀
那么可以简写为background:#xxxxxx url(‘111.png‘) no-repeat center;
8/5周四内容概要
- 边框属性
- display属性
- 盒子模型
- 浮动属性
- 浮动带来的影响
- 溢出属性
- 定位属性
- z-index属性
- 脱离文档流
内容详细
边框属性
border-left-color:yellow;
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
eg:
钓鱼网站
盒子模型
1.外边距(margin)
2.边框(border)
3.内边距(padding)
4.内容(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参数
eg:
div {
width:100px;
height:100px;
border:3px solid black;
border-radius:100%;
overflow:hidden
}
img {
width:100%;
}
定位属性
1.非定位态(静态)
所有的标签默认都是非定位状态 无法使用定位改变位置 #static
2.相对定位
position:relative #相对于标签原来的位置做定位
3.绝对定位
position:absolute #相对于已经定位过的父标签做定位
eg:小米官网购物车
4.固定定位
position:fixed #相对于浏览器窗口做定位
是否脱离文档流
#脱离文档流:
通俗来说就是原来的位置是否可以被其他标签占用
脱离文档流
1.浮动
2.绝对定位
3.固定定位
不脱离文档流
相对定位
8/6周五内容概要
- 三层结构的模态框
- 编写简易博客园界面
- 前端框架之Bootstrap
内容详细
三层结构的模态框
#考题：
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构造页面的大致布局
在使用div做页面布局的时候 由于div个数较多为了能够很好的区分
我们通常会给不同的div起不同的class属性(属性值最好能够有一定的区分度)
"""
# 1.先写html代码
# 2.再写css代码
前端框架
1.页面搭建相关
Bootstrap elementui layui
2.功能应用相关
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值即可"""