今日内容概要
- body内常见标签补充
- form表单重要参数补充
- CDN知识说明(后面还会使用)
- CSS层叠样式表(给html标签调节样式)
今日内容详细
body内常见标签补充
块儿级标签
div
行内标签
span
# 上述两个标签主要用于页面的前期结构布局
"""
标签与标签直接可以相互嵌套(理论上可以无限嵌套)
<div>
<div></div>
<a></a>
<p></p>
</div>
"""
块儿级标签可以嵌套块儿级标签和行内标签
特例:p标签虽然是块儿级标签但是他不能嵌套块儿级标签
行内标签只能嵌套行内标签
# 科普:前端不会轻易的报错(因为前端是直接跟用户打交道的 注重用户体验)
导航条和页眉类型的用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内容分发网络
"""据统计,超过80%的互联网用户会重复访问20%的信息资源,这一现状给缓存技术的应用提供了先决条件。为减少网络中冗余数据的重复传输,CDN技术应运而生。通过CDN将广域传输转为本地或就近访问,解决了因分布、带宽、服务器性能带来的访问延迟问题。CDN,即内容分发网络,是指将源站内容分发至最接近用户的节点服务器,使用户可就近取得所需内容,提高用户访问的响应速度和成功率。"""
主要功能:使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率
# 有些常见的软件各大互联网都开设了免费的CDN服务
"""要想使用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属性值并在前面加点)
.c {
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.弟弟选择器
"""