8.2知识梳理
主题:HTML超文本标记语言
- head内常见标签(了解)
- body内常见标签(重要)
- 基本标签
- 常见标签
- 特殊符号
- 列表标签(重要)
- 表格标签(重要)
- form表单标签(重要)
head内常见标签(了解)
title
style
内部可以直接书写css代码调节html样式
但是严格意义上来说不同的语言应该存放在不同的文件夹内
link
通过href参数引入外部css文件((绝对路径与相对路径))
script
内部可以直接书写js代码
也可以通过src参数引入外部的js文件(绝对路径与相对路径)
meta
定义网页源信息
参数description
定义网站的简介
参数keyword
定义用户可能搜索到的关键字 增加网页被搜索到的概率
body内常见标签(重要)
"""
html标签分为两大类
1.行内标签 b s u i
自身文本多大就占多大
2.块儿级标签 h p
标签独占一行
html标签针对标签个数也有分类
1.双标签
有头有尾<h1></h1>
2.自闭和标签
有头<hr>
"""
<!--标题系列-->
<h1>一级标题</h1>
<!--加粗 斜体 下划线 删除线-->
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<!--段落标签-->
<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标签
大文本
8.3知识梳理
- body内常见标签补充
- form表单重要参数补充
- CDN知识说明(后面还会使用)
- CSS层叠样式表(给html标签调节样式)
body内常见标签补充
div 块级标签
span 行内标签
上面两个标签主要作用于页面的前期结构布局
标签与标签直接可以互相嵌套
块级标签可以嵌套行内标签和块级标签
行内标签只能嵌套行内标签
form表单重要参数补充
input标签
value参数 可以输入数据
placeholder 参数 相当于提示信息
checked参数 针对radio和checkbox可以默认选中
select标签
option子标签
selected 可以默认选中
form标签
action参数 用来控制数据提交的地址
novalidate参数 取消浏览器校验动作
button标签
写在form里也可以发出提交
cdn内容分发网络
主要功能：用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度
"""想要使用cdn的前提是计算机必须时刻有网络"""
css层叠样式
css就是用来调节html标签样式的
# 语法
选择器 {
属性名：属性值;
}
# 注释
/*注释内容*/
# css引入方式
1.style标签内直接书写
<style></style>
2.link标签href属性引入外部css文件
<link href= ‘‘ rel=‘stylesheet‘></link>
3.在标签内部直接书写
<p style=‘color=red‘></p>
css选择器
# 基本选择器
p {
color：red;
}
.c1{
color:red;
}
#d1 {
color:red;
}
* {
}
# 组合选择器
1.后代选择器
2.儿子选择器
3.毗邻选择器
4.弟弟选择器
# 在前端中如何表达标签之间的嵌套关系
关键就看嵌套的层级
8.4知识梳理
- 组合选择器
- 属性选择器
- 分组与嵌套
- 伪类选择器
- 伪元素选择器
- 选择器优先级
- html样式调节
组合组合器
1.儿子选择器
div>p {}
2.后代选择器
div p {}
3.毗邻选择器
div+p {}
4.弟弟选择器
div~p {}
属性选择器
HTML标签除了可以有自带的属性之外还支持自定义属性
[name=‘jack‘] {color,red} 寻找属性名name为jack的标签
分组与嵌套
# 分组
p,div,h{}
# 嵌套
#d1,.c1,div{}
伪类选择器
悬浮状态
a:hover {
color;red;
}
未点击状态
a:link {}
点击状态
a:active {}
点击之后的状态
a:visited {}
# 获得焦点状态
input:focus {}
伪元素选择器
# 通过css代码给html标签添加文本内容或者修改
# 改变文本第一个字
p:first-letter {
font-size:48px;
color:red;
}
p:before {
content:‘*‘;
color:red;
}
p:after {
content:‘!‘;
color:red;
}
选择器优先级
1.相同选择器不同位置
就近原则
2.不同选择器不同位置
行内式 > id选择器 > 类选择器 > 标签选择器
# 优先级可以被打破 只要加上 !important 尽量不要使用，会打破规则
字体属性相关
1.长宽
width height
2.字体大小
font-size
3.字体颜色
color:red
color:rgb
color:#4d4d4d
# 如何取色
1.微信截图三基色取色
2.浏览器自带的取色器
文字属性
1.文字对齐
text-align：center
2.文字装饰
text-decoration：none
3.首行缩进
text-indet:32px
背景属性
1.背景色
background-color:RGB();
2.背景图片
background-image:url(‘‘);
background-repeat:no-repeat;
background-position:center
# 多个参数都是相同的前缀可以简写
background:#4d4d4d url(‘1.jpg‘) no-repeat center
8/5知识梳理
- 边框属性(重要)
- display属性(了解)
- 盒子模型(重要)
- 浮动属性(较难理解 应用很简单)
- 溢出属性
- 定位属性
- z-index属性
- 手动书写一个网页(重要)
边框属性
border-top-color
border-bottom-width
border-left-style
order-right-color
/*如果属性前缀都一样那么可以简写*/
border-left:5px solid yellow
...
终极缩写
border:5px solid yellow
/*边框如何画圆*/
border-radius:50%
display属性
display:none
用于钓鱼网站
盒子模型
margin 外边距 用来调节标签与标签之间的距离
border 边框
padding 内边距 用来调节标签与内容(文本或者标签)之间的距离
content 内容
margin:10px # 全部为10px
margin:10px 20px # 第一个控制上下 第二个控制左右
margin:10px 20px 30px # 第一个控制上 第二个控制左右 第三个控制下
margin:10px 20px 30px 40px # 上左下右 (顺时针)
# padding 同理
浮动属性
float # 页面布局肯定要用到浮动
# 浮动的标签是脱离文档流的 相当于是漂浮在半空中
浏览器针对文本是优先展示的
浮动带来的影响
浮动会导致父标签元素"塌陷"
解决办法
.clearfix:after {
content:‘‘;
display:block;
clear:both
}
哪个父标签元素塌陷了就给哪个加上一个class=clearfix
溢出属性
overflow
# 圆形头像的制作
div {
width:100px;
height:100px;
border:3px solid black;
border-radius:50%;
overflow:hidden
}
img {
width:100%;
}
定位属性
非定位态
所有标签都是默认为非定位态
相对定位
position:relative 相对于标签原来的位置做定位
绝对定位
position:absolute 相对于已经定位过的父标签做定位
小米官网购物车
# 固定定位
# position:fixed 相对于浏览器窗口做定位
是否脱离文档流
脱离文档流
浮动
绝对定位
固定定位
不脱离文档流
相对定位
# 脱离文档流:可以理解为原来的位置是否能被其他标签占用
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=‘1.jpg‘/>
</div>
<div class=‘cover‘></div>
<div class=‘modal‘>
<form action=‘‘>
<p>username:
<input name=‘username‘ type=‘text‘/>
</p>
<p>
<input type=‘password‘ name=‘pwd‘/>
</p>
<input type=‘button‘ value=‘取消‘ id=‘d1‘/>
<input type=‘submit‘ value=‘注册‘/>
</form>
</div>
</body>
</html>
书写简易博客园界面
"""
搭建网页不要着急写，先用div来画一下大致布局
给div起不同的class以便于我们写css代码，最好是有一定的区分度
"""
# 先写html代码 再写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> # 控制占几份
# 响应式布局
能够根据浏览器窗口和机器型号的不同自动调节比例