2205Web笔记
工程地址:
https://gitee.com/IvanLiuGB/t-2205-3.git
自我介绍:
刘国斌
课程介绍:
- Web前端: 学习如何开发页面
- 数据库: 学习如何对数据进行增删改查
- SpringBoot: 学习如何接收请求以及如何对请求做出响应, 包括把前端和数据库整合
HTML
- Hyper Text Markup Language: 超文本标记语言
- 超文本: 指不仅仅是纯文本还包括字体相关和多媒体相关(图片,音频,视频)
- 作用: 负责搭建页面结构和准备页面内容, 相当于盖房子(毛坯房)
- 学习HTML主要学习的就是有哪些标签,以及标签的使用方式
文本相关标签
- 内容标题h1-h6
特点: 独占一行, 字体加粗, 自带上下间距
- 段落标签p
特点: 独占一行, 自带上下间距
- 水平分割线hr
- 换行br
- 加粗b
- 斜体i
- 下划线u
- 删除线s
列表标签
- 无序列表: ul和li
- 有序列表: ol和li
- 列表嵌套: 有序列表和无序列表可以任意无限嵌套
图片标签img
- src:资源路径
- 相对路径: 访问站内资源
- 资源和页面同级目录: 直接写文件名
- 资源在页面的上级目录: ../文件名
- 资源在页面的下级目录: 文件夹名/文件名
- 绝对路径:访问站外资源时使用, 称为图片盗链, 有找不到图片的风险
- alt:当图片不能显示时显示的文本
- title: 图片标题
- width/height: 设置宽高, 两种赋值方式: 像素和百分比, 只设置宽度时高度会自动等比例缩放
超链接a
- href: 设置资源路径 和图片标签的src属性类似
- a标签包裹文本为文本超链接, 包裹图片为图片超链接
表格标签table
- 相关标签: table , caption表格标题 ,tr表示行, td表示列, th 表示表头
- 相关属性: border边框 rowspan跨行 colspan 跨列
表单form
- 作用: 获取用户输入的各种信息并提交给服务器
- 学习form表单就是学习form表单中有哪些控件.
- 相关代码:
Plain Text
<!--action设置提交地址-->
<form action="http://www.tmooc.cn">
<!--placeholder占位文本 maxlength最大字符长度
value设置初始值 readonly只读-->
用户名:<input type="text" maxlength="5" value="abc" readonly
name="username" placeholder="请输入用户名"><br>
密码:<input type="password" name="password" placeholder="请输入密码"><br>
<!--单选框的value属性必须写 否则提交的是on
checked设置默认选中-->
性别:<input type="radio" checked name="gender" value="m" id="r1">
<label for="r1">男</label>
<input type="radio" name="gender" value="w" id="r2">
<label for="r2">女</label><br>
<!--多选框和单选框的属性通用-->
兴趣爱好:<input type="checkbox" name="hobby" value="cy">抽烟
<input type="checkbox" name="hobby" value="hj">喝酒
<input type="checkbox" name="hobby" checked value="tt">烫头<br>
生日:<input type="date" name="birthday"><br>
靓照:<input type="file" name="pic"><br>
城市:
<select name="city">
<option value="bj">北京</option>
<option value="sh" selected>上海</option>
<option value="gz">广州</option>
</select><br>
<input type="submit" value="注册">
<!--重置按钮-->
<input type="reset">
<!--自定义按钮-->
<input type="button" value="自定义">
</form>
分区标签
- 分区标签可以理解为一个容器,用来装多个有相关性的标签, 对多个标签进行统一管理
- 如何对页面进行分区?
一个页面至少分为3大区: 头 体 脚 , 每个大区里面有n个小的分区
- 常见的分区标签:
- div: 块级分区标签, 特点: 独占一行
- span: 行内分区标签, 特点: 共占一行
- HTML5版本新增加的几个分区标签,作用和div一样,目的是为了提高代码可读性
- header 头
- main 主体
- footer 脚
- section 区域
- nav 导航
Plain Text
<div>头</div>
<div>体</div>
<div>脚</div>
<header></header>
<main></main>
<footer></footer>
CSS
- Cascading Style Sheet层叠样式表: 美化页面 (装修)
如何在html页面中添加CSS样式代码
- 三种引入方式:
- 内联样式: 在标签的style属性中添加样式代码, 弊端:不能复用
- 内部样式: 在head标签里面添加style标签, 标签体内写样式代码, 可以复用但是只能在当前页面复用不能多页面复用
- 外部样式: 在单独的css样式文件中写样式代码, 在html页面中通过link标签引入, 可以实现多页面复用
- 工作中外部引入方式用的多,因为可以多页面复用而且可以将html代码和CSS样式代码分离开, 学习过程中内部用的多
选择器
- 标签名选择器: 选取页面中所有同名标签
- 格式: 标签名{样式代码}
- id选择器: 当需要选择页面中某一个元素时使用
- 格式: #id{样式代码}
- 类选择器: 当需要选择页面中多个不相关的元素时,给多个元素添加相同的class,然后通过类选择器进行选择
- 格式: .class{样式代码}
- 分组选择器: 将多个选择器合并成一个选择器
- 格式: h1,#id,.class{样式代码}
- 属性选择器: 通过元素的属性选择元素
- 格式: 标签名[属性名='值']{样式代码}
- 任意元素选择器: 匹配页面中所有的元素
- 格式: *{样式代码}
- 子孙后代选择器: 通过元素和元素之间的关系选择
- 格式: body div p{样式代码}
匹配body里面的div里面的所有p包括后代p
- 子元素选择器: 通过元素和元素之间的关系选择
- 格式: body>div>p{样式代码}
匹配body里面的div里面的p子元素 不包含后代p
- 伪类选择器: 此选择的是元素的状态,包括:未访问,访问过,悬停,点击
- 格式:a:link/visited/hover/active{样式代码}
选择器练习题:
通过内部样式实现以下效果
- 把张学友改成绿色
- 把刘德华和悟空改成蓝色
- 修改取经2人和刘备的背景为黄色
- 修改密码框的背景为红色
- 给所有元素添加红色的边框
选择器练习:
- 通过内部样式实现以下效果
- 关羽绿色
- 张飞和苹果黄色
- 文本框和所有水果背景红色
- p2字体粉色
- p2和p3背景黄色
- 达内官网未访问绿色,访问过红色
悬停黄色,点击粉色
day02
颜色赋值
- 三原色: RGB Red Green Blue 红绿蓝 , 每个颜色的取值范围0-255
- 颜色赋值方式:
- 颜色单词赋值: red/yellow/pink.....
- 6位16进制赋值: #ff0000
- 3位16进制赋值: #f00
- 3位10进制赋值: rgb(255,0,0)
- 4位10进制赋值: rgba(255,0,0,0-1) a=alpha代表透明度
背景图片
- background-image:url("路径"); 设置背景图片
- background-size:100px 200px; 设置背景图片尺寸
- background-repeat:no-repeat; 设置禁止重复
- background-position: 横向 纵向; 设置背景图片位置
文本和字体相关的样式
- text-align: left/right/center; 水平对其方式
- text-decoration:overline上划线/underline下划线/line-through删除线/none去掉文本修饰; 文本修饰
- line-height:20px; 设置行高, 单行可以实现垂直居中, 多行控制行间距
- text-shadow: 颜色 x偏移值 y偏移值 浓度; 设置阴影
- font-weight: bold加粗/normal去掉加粗
- font-size:20px; 设置字体大小
- font-style:italic; 设置斜体
- font-family:xxx,xxx,xxx; 设置字体
- font:20px xxx,xxx,xxx; 设置字体大小+字体
Plain Text
1. 刘德华 宽度100 高度30
绿色背景 红色字体
横向和纵向居中
2. 苹果和香蕉 字体大小25px 斜体
3. 冰箱去掉加粗 蓝色阴影
方向是左下 浓度3
4. 洗衣机添加下划线
5. 百度去掉下划线字体加粗
字体大小20px
元素的显示方式display
- block: 块级元素的默认值, 特点: 独占一行 可以修改元素宽高. 包括: h1-h6, p,div
- inline: 行内元素的默认值,特点: 共占一行 不能修改元素宽高, 包括:span,b,i,s,u,a
- inline-block: 行内块元素的默认值,特点:共占一行,可以修改元素宽高, 包括:input,img
- 行内元素如果需要修改宽高,可以将显示方式改成块级或行内块
盒子模型
- 盒子模型由四部分样式组成, 包括: content内容,margin外边距,border边框,padding内边距
- 通过盒子模型相关样式控制元素的显示效果
- content内容:控制元素的显示尺寸
- margin外边距:控制元素的显示位置
- border边框: 控制元素的边框效果
- padding内边距: 控制元素内容的位置
盒子模型之content(内容)
- 控制元素的显示尺寸
- 相关样式: width和height
- 赋值方式:
- 像素
- 上级元素的百分比
- 行内元素不能修改元素的宽高,如果有需求必须改,则需要先把显示方式改成块级或行内块元素
盒子模型之margin(外边距)
- 作用:控制元素的显示位置
- 赋值方式:
- margin-left/right/top/bottom:10px; 给某个方向添加外边距
- margin:10px; 四个方向添加10
- margin:10px 20px; 上下10 左右20
- margin:10px 20px 30px 40px; 上右下左顺时针赋值
- 行内元素上下外边距无效
- 上下相邻彼此添加外边距取最大值, 左右相邻两者相加
- 粘连问题: 当元素的上边缘和上级元素的上边缘重叠时, 给元素添加上外边距会出现粘连问题, 给上级元素添加overflow:hidden解决
盒子模型之border(边框)
- 赋值方式:
- border:粗细 样式 颜色;
- border-left/right/top/bottom:粗细 样式 颜色;
- border-radius:10px; 设置圆角 值越大越圆
盒子模型之padding(内边距)
- 作用: 控制元素内容的位置
- 赋值方式: 类似外边距
- padding-left/right/top/bottom:10px;
- padding:10px;
- padding:10px 20px;
- padding:10px 20px 30px 40px;
- 给元素添加内边距会影响元素的宽高
CSS的三大特性
- 继承性:指元素可以继承上级元素文本和字体相关的样式, 部分标签自带效果不受继承影响, 比如超链接字体颜色
- 层叠性: 多个选择器可以选择到同一个元素, 给元素添加不同的样式则样式全部层叠生效,添加相同的样式时由优先级决定哪个生效
- 优先级: 指选择器的优先级, 作用范围越小优先级越高,
!important> id>class>标签名>继承
day03
定位方式
- 静态定位
- 相对定位
- 绝对定位
- 固定定位
- 浮动定位
静态定位
- 静态定位又称为文档流定位
- 格式: position:static; 默认的定位方式
- 特点: 元素以左上为基准, 块级元素从上往下排列, 行内元素从左向右依次排列,通过外边距控制元素的位置. 默认无法实现层叠效果
相对定位
- 格式: position:relative;
- 特点: 元素不脱离文档流(不管元素显示到什么位置仍然占着原来的位置), 通过left/right/top/bottom让元素相对于初始位置做偏移
绝对定位
- 格式:position:absolute;
- 特点:元素脱离文档流(不占原来的位置), 通过left/right/top/bottom让元素相对于窗口(默认)或某一个上级元素做偏移.
固定定位
- 格式: position:fixed;
- 特点: 元素脱离文档流,通过left/right/top/bottom让元素相对于窗口做偏移,元素会固定在窗口的某个位置.
浮动定位
- 格式:float:left/right;
- 特点: 元素脱离文档流, 从当前所在行向左或向右浮动, 当撞到上级元素或其它浮动元素时停止移动.
- 浮动元素一行装不下时会自动折行, 折行时有可能被卡主
- 当元素的所有子元素全部浮动时,自动识别的高度为0 , 后面元素会顶上来,如果元素中包含文本,文本会被挤出去, 最终导致显示异常, 通过给元素添加overflow:hidden 解决此问题
- 当需要将纵向排列的元素改成横向排列时使用浮动定位
溢出设置overflow
- visible显示(默认)
- hidden隐藏
- scroll 滚动显示
行内元素垂直对齐方式vertical-align
- top上对齐
- middle中间对齐
- bottom下对齐
- baseline基线对齐
day04
JavaScript
- 简称JS, 作用:是给页面添加动态效果
- 语言特点:
- 属于脚本语言, 不需要编译直接由浏览器解析执行
- 基于面向对象
- 弱类型语言
- 安全性强:JS语言由于是运行在客户端电脑上的语言,所以JS语言只能访问浏览器内部的数据,浏览器以外的数据是禁止访问的.
- 交互性强: 因为JS语言是嵌入到html页面中,最终执行在客户端电脑里面的,和用户近距离接触,所以交互性更强.
如何在html页面中添加JS代码
- 三种引入方式:
- 内联: 在标签的事件属性中添加JS代码, 当事件触发时执行
- 事件: 系统给提供的一些特定的时间点
- 点击事件: 当用户点击元素时触发的时间点
- 内部: 在html页面中的任何位置添加script标签,在标签里面写JS代码
- 外部: 在单独的JS文件中写JS代码,然后在html页面中通过script标签的src属性引入