一、 前端介绍
- HTML: 用来勾勒出页面的结构和显示的内容
- CSS: 用来美化页面的
- JavaScript:给页面添加动态的效果和内容
- jQuery:用来简化JavaScript代码的框架
二、 HTML
2.1 介绍
- Hyper Text Mark Language:超文本标记语言
- 什么是超文本:不仅仅包含文本,还包括文本的字体效果,多媒体相关(音频、视频)
- 学习html主要学习的就是有哪些标签,标签内部有哪些属性,标签和标签间的嵌套关系
- XML中的标签可以自定义,HTML中的标签是提前定义好的
2.2 创建html文件
- html是一种文本文件,新建文本文件改成html类型即可
- 或者在IDE中,新建html文件
2.3 HTML页面结构
第一个页面
内容
2.4 文本标签
- h1-h6 内容标题标签,内容独占一行 属性:align=left/right/center
- p 段落标签 内容独占一行
- hr 水平分割线
2.5 列表标签
2.5.1 无序列表
2.5.2 有序列表
- 打开冰箱门
- 把大象装进冰箱
- 关上冰箱门
2.5.3 定义列表
- 凉菜
- 大拌菜
- 花毛一体
- 拍黄瓜
- 炒菜
- 宫保鸡丁
- 木须肉
- 小炒肉
2.5.4 嵌套列表
- ol1
- ol2
- 第二层1
- 第二层2
- 第三层1
- 第三层2
- 第三层3
- 第二层3
- ol3
2.5.5 列表嵌套练习:
-
样例
image.png -
代码
- java基础
- 变量
- 数据类型
- 运算符
- 流程控制
- if
- switch
- while
- for
- java面向对象
- javaAPI
- java基础
2.6 元素(标签)的分类
- 块级元素: 独占一行
- h1-h6
- p
- hr
- 行内元素: 和其它行内元素共占一行
- 斜体:em i
- 加粗:strong b
- 下划线: u
- 删除线: del s
- 行内元素的多个空格折叠问题,当多个空格存才时只能显示一个
2.7 常见特殊字符
1. 空格 ` `
2. < `<`
3. > `>`
2.8 分区标签
分区标签自身没有显示效果,可以充当容器的作用,用于包含多个功能相关元素,可以进行元素的整体控制。
div:块级分区元素,独占一行
span:行内分区元素,和其它行内元素共占一行
-
开发页面时通常会分为三大区
头部体部脚部 -
H5标准中新增的分区标签 作用和div一样 但是更直观
头部 文章,正文
2.9 图片 img
2.9.1 格式
2.9.2 路径分为两种:
-
相对路径: 访问站内资源使用相对路径(相对于当前html页面文件路径,资源所在地方)
- 图片和页面同一目录,直接写图片名称
- 图片在页面的上级目录, ../图片名
- 图片在页面的下级目录, 文件夹名/图片名
绝对路径: 访问其它网站的资源使用绝对路径,以http开头,存在风险,如果目标图片路径发生改变则不能显示
2.9.3 常用属性:
- alt: 当图片不能正常显示的时候显示此内容
- title: 当鼠标在图片上悬停的时候显示此内容
- width/height: 设置图片的宽度和高度,可以设置像素px或百分比%,如果只设置宽度则高度等比例缩放
- 支持的图片格式: jpg/jpeg不支持透明色 png支持透明色 GIF动图
2.9.4 图片地图
- shape 形状
- coords 坐标
- href: 值为路径,可以写相对路径和绝对路径,路径可以指向页面,图片,如果指向的文件浏览器不能打开则会下载文件
2.10 超链接 a
- 格式:
显示内容
- href: 值为路径,相对路径和绝对路径,路径可以指向页面或文件(浏览器支持的格式直接浏览,不支持的格式下载)
- target="_blank",跳转页面时开启一个新的窗口显示此页面,如果不加则从当前窗口跳转
- a标签和img标签 嵌套 实现图片添加点击事件
- 锚点用法:href内填写#id,则可以点击跳转到页面中id为id的元素地方
2.11 表格标签 table tr td
-
table属性:
- border边框粗细
- cellspacing单元格与外边框的间距
- cellpadding单元格与内容的间距
- bgColor背景颜色
- width 宽度
- align 对齐方式
-
td属性:
- colspan 跨列
- rowspan 跨行
-
表格分组标签:
- thead 头分组
- tbody 体分组
- tfoot 脚分组
th:表头 和td的区别就是th里面的内容会字体加粗
caption:表格的标题 居中显示在table的正上方
2.12 表单form相关
2.12.1 表单的作用:获取用户输入的各种信息
- action:提交的地址,后台处理模块地址、名
- method:提交方式,有get和post两种
- get方式,数据直接显示在url上进行提交,速度快,安全性低;
- post方式提交后台异步提交,数据不显示,速度略慢,相对get更安全
2.12.2 常见表单相关的控件:
- 文本框
image.png
- type:类型是文本框
- size:长度
- name:提交数据时的键(key),用户输入的内容为值
- maxlength:最大字符长度
- value:设置默认值
- readonly:只读
- placeholder:占位文本-->
- 密码框
image.png
- 单选
image.png
- 单选中name相同的为一组,可以实现选中一个后同组中其他单选被弃选
- checked表示已经被选上
- 多选(复选框)
image.png
- name相同为一组,可以实现对于一个需要多个数据的业务一次提交一组数据
- checked表示已经被选上
- 下拉选
image.png
- 用于规定数据选择范围,只能从中选一个,selected表示已经被选上
- 日期选择器
image.png
- 文件选择器
image.png
- 文本域
image.png
- rows和cols表示几行几列
- 按钮
image.png
//点击会将表单内容清除
//点击会提交表单
-
隐藏域 :用于不需要用户没必要知道、看到、操作,仅仅用来存放数据提交等情况
-
标签label:给一些选项加上文字标签,更直观
-
image.png
-
- for对应谁的id就给谁加上标签
2.12.3 代码举例:
- 样例:
image.png
-
代码
三、 CSS层叠样式表单
3.1 介绍
- 用来控制网页元素的各种样式,颜色、对齐、大小、宽高、布局等等
- 网页的3个层:
- 内容层: HTML承载页面的内容
- 表示层: CSS 的作用就是给网页做化妆的,实现显示效果
- 行为层: JS 为网页添加程序行为
3.2 第一个CSS
3.3 CSS 注释
- css 中只能使用 /* */ 注释, 不能使用 // 也不能使用 ``
- 如果使用错误的注释,会造成CSS效果显示失败。
3.4 CSS的3种使用方式
-
内联式CSS:
直接写在元素的style属性中的css样式
具有最高的优先级别
-
只作用在当前元素上,不能复用的样式
哈哈哈
-
网页内嵌式:
使用
元素嵌入到页面中的CSS样式
-
作用在当前页面中的元素,可以在当前页面范围内复用
哈哈哈
-
外联式
样式保存在.css文件中
使用 元素引用到当前页面中的样式
-
可以作用在所有引用了CSS文件的网页,可以在这些网页复用
大型网站一般都使用外部式CSS
3.5 CSS 样式的优先级
- 当内联样式,内部样式,外部样式,等多个样式作用在同一个元素时候,元素最终优先采用的样式。称为样式的优先级。
- 浏览器(用户代理)默认样式优先级最低。
- 内部样式,外部样式,哪个距离元素近,哪个优先
- 内联样式优先级最高
- 内联 > 内嵌 > 外联 > 浏览器
3.6 CSS 继承特性
元素有父子嵌套关系时候,外层设置的可继承CSS属性,可以被子元素继承。
-
常见的可继承属性: 颜色,字体等
哈哈哈呵呵呵
3.7 CSS 语法
3.7.1 选择器
-
元素选择器:使用元素名选择全部的同类元素
/*将所有p标签内容颜色变红*/ p {color: red}
-
id 选择器:使用#id选择页面中唯一的一个元素
/*将id为menu的元素内容颜色变红*/ #menu {color: red}
- 网页中的ID属性应该唯一
-
类选择器:使用.class 选择一组具有相同class属性的元素
/*将所有class含error的元素内容变红*/ .error {color: red}
- 一个元素上可以使用多个class,绑定多个类选择器样式
-
派生选择器: 利用元素的层级关系选择元素,绑定样式
-
子孙后代选择
/* 选择 div 中全部的子孙p元素内容颜色变成红色 */ div p {color: red;}
-
子选择
/* 选择div下一层的p元素(不包括p中再下一级的其他p元素)颜色变为红色 */ div>p {color: #ddd}
-
-
选择器组: 为了给一组元素设置一致样式,可以使用组选择器
h1, h2, h3, h4, h5 {boder-bottom: 1px solid #ddd;} /*相当于*/ h1{boder-bottom: 1px solid #ddd;} h2{boder-bottom: 1px solid #ddd;} h3{boder-bottom: 1px solid #ddd;} h4{boder-bottom: 1px solid #ddd;} h5{boder-bottom: 1px solid #ddd;}
-
伪类选择器:用于设置元素的不同显示状态时候的效果
-
鼠标悬停:hover 用于设置鼠标停留在元素上面时候的显示效果。
hover{ color:red; }
-
-
复合使用选择器:id,类,元素,伪类等选择器可以组合使用
p.error{样式} /*选择p元素,其class属性包含 error/* p.error:hover{样式} /*选择p元素,其class属性包含 error 并且设置鼠标悬停在上方的效果/*
3.7.2 CSS 常用属性
-
关于值的单位,常用属性值:
- px 像素
- em 字体大小
- % 百分比
- 颜色字面量 red blue 等
- 16进制RGB颜色如: #48547d
-
文本相关属性
-
文字的缩进
text-indent: 2em; /* 文本缩进2个字符 */
-
设置字体大小
font-size: 12px;
-
行高
line-height: 1.6em;
-
设置文字颜色
color: #48547d;
-
块元素中的文本居中
text-align: center; /* 块元素中的文本居中 */
-
3.8 盒子模型(块状block、行内-块状inline-block元素全部起效)
3.8.1 一个元素从外到内应该具有 外边距、边框、内边距、宽高
- 宽高:元素的宽高
- 外边距:距相邻元素或上级元素的距离
- 边框: 元素的边框
-
内边距:内容距元素边框的距离
image.png
3.8.2 粘连问题
- 当元素的上边缘和上级元素的上边缘重叠时,此时给元素添加上外边距会导致上级元素联动的效果,给上级元素添加 overflow:hidden 解决。
-
案例1,没带overflow:hidden
image.png
-
-
案例2,加上overflow:hidden
image.png
3.8.3 利用盒子模型,移动元素
- 给上级元素添加内边距,移动内容;影响:【会影响上级元素的宽高】
- 给元素自身添加外边距,推荐使用这种方式,不会影响宽高
3.8.4 写法
-
margin和padding
-
一步到位法:遵守顺序:上右下左
margin:5px 10px 15px 20px /* 代表上右下左外边距分别为5px 10px 15px 20px */ /* 上下一致,左右一致时能简写为 */ margin:5px 10px /* 上下左右一致时能简写为 */ margin:5px
-
单独设置法:
margin-left:5px /* 代表左外边距分别为5px */ /* 其他方向类比即可 */
-
-
boeder,由于需要设置样式、颜色、粗细,所以略有不同
-
一步到位法:样式、颜色、粗细可写可不写
border:solid 1px red /* 代表边框为:实线,1像素粗细,红色 */
-
单独设置法:
border-left:solid 1px red /* 代表只设置左边框为:实线,1像素粗细,红色 */ /* 其他方向类比即可 */
-
补充:块状、行内-块状元素的垂直对齐方式
- 可以使用控制行高和高度一致的方式(前提,高已经确定)
- 可以控制子元素的上下外边距相同(前提,高已经确定)
3.9 行内元素inline 关于盒子模型的问题
- 设置宽高:没有效果,行内元素的宽高只受内容影响
- 设置外边距:上下没有效果,左右起效
- 设置边框:四个边框都会有效果但是左右边框占显示范围,上下边框不占显示范围
- 设置内边距:四个方向都生效,但是左右内边距会占显示范围,上下不占显示范围
补充:行内元素的垂直对齐方式
vertical-align:top/middle/bottom/baseline(默认)
3.10 相邻两个元素,左右外边距是相加,上下外边距取最大值
3.11 定位position
1、 文档流定位(静态定位):
- static,默认定位方式,如果是块级元素从上到下,如果行内元素就是从左向右。
2、 相对定位:
- relative,不会脱离文档流,上下左右的值相对于元素的初始位置
3、 绝对定位:
- absolute,脱离文档流,上下左右的值相对于窗口或祖先元素中做过非static定位的元素(一般使用relative,因为其它会导致脱离文档流,影响其它元素的显示效果)
4、 固定定位:
- fixed,脱离文档流,上下左右的值相对于窗口。
3.12 浮动
- 浮动定位:float:left/right,脱离文档流,元素可以在当前所在行内左侧或右侧浮动,当撞到父元素的边框或者另一个浮动的元素时停止
- 如果一行装不下会自动换行,换行时可能出现被卡住的现象
- 当所有子元素全部浮动,自动识别的高度为0,通过overflow:hidden解决此问题
- clear:both/left/right,两侧/左侧/右侧不允许有浮动元素(自身元素不会顶上去)
- 应用场景: 当纵向排列的元素需要改成横线排列的时候 使用浮动定位。
3.13 背景设置
设置盒子模型的 border以内部分的背景绘制效果。
- 方式
设置背景色
background-color:red
设置背景图片
background-image:url(...)
-
设置图片的重复方式
background-repeat:no-repeat不重复 background-repeat:repeat-x x方向重复 background-repeat:repeat-y y方向重复
-
设置图片的偏移位置
background-position: 5px 5px background-position-x/y
3.14 元素的显示方式
-
有3种:
- 块: div, h1 ~ h6, p 等
- 独立占有行,可以设置宽高
- 行内:span b i u label 等
- 不独立占有行,和其它文本混合在一行,不能设置宽高!
- 行内块
- 不独立占有行,和其它文本混合在一行,能够设置宽高!
- 块: div, h1 ~ h6, p 等
-
利用CSS可以更改元素的显示方式,从行内元素显示方式更改为块(行内块)元素,为了设置元素的宽高,进行布局占位。
display:block/inline/inline-block 进行切换