Java开发学习-前端基础(HTML、CSS)
认识HTML
-
HTML标签
-
HTML中的嵌套
-
第一个元素
<p>HTML是一门伟大的语言!</p>
-
第二个元素
<div><p>HTML是一门伟大的语言!</p></div>
div
元素是p
元素的父元素
-
-
完整的html文档结构
-
<!DOCTYPE html>
- 作用:告知浏览器该页面的文档类型,指示浏览器使用哪个版本HTML
- 位置:第一行,在<html>之前
- 无结束标签
-
<html lang = “en”> ……</html>
- 告知浏览器自身是个HTML文档
- lang属性(语言属性):浏览器对特定语言有针对性辅助操作
-
标签属性
- 标签属性与标签名、标签属性间用空格分隔。
- 属性有,键值对与单个属性的表现形式
-
文档头部<head>…
- 网页标签标题<title>…
- 只能有一个网页标题
-
文档主体<body>
-
-
注释<!-- -->
-
MDN:Web文档,用于查询一些元素用法,效果。
文本标签
- 块状和内联标签:块状标签:<p>,<h>,<div>,会为自己的内容占据新的一行,内联标签<span>,<img>,<strong>不会
- 标题<h1>~<h6>
- 常用文本标签<p>,<strong>,<span>
- 图片标签
- src = “路径”
- alt = “描述图片的替换文本”//当url错误时生效
- 链接标签(内联标签)<a>
- href = “链接指向的网址”
- title = “链接说明信息”//鼠标停靠时显现
- target = “_self”、“_blank”、“_parent”、“_top”
- 列表
- <ul>无序列表
- <ol>有序列表
- <li>列表项
表单标签
-
form标签
- action属性:值为处理此表单信息程序所在的URL,在提交时信息会发送到此地址
- method:GET,POST,规定发送表单信息方法
-
单行文本输入框(块)
<!-- action=""则表单信息将提交到当前页面 --> <form action=""> <input type="text" /> </form>
-
placeholder = ”占位文本“
-
name=“input的名字”
-
value = “输入框的初始值”
-
不可修改的输入框“readonly”,“disable”,区别
-
属性 disabled readonly 对象 所有表单元素 input 和 textarea 作用 使文本框不能输入,当表单以 POST 或 GET 的方式提交时,使用了 disabled 的元素的值不会被传递出去 仅使文本框不能输入 外观 * 使文本框变灰 外观没有变化
-
-
多行文本输入框和密码输入框
-
多行输入框(内联)
<!-- name属性表示表单元素的名称,placeholder属性表示表单元素的占位文本 --> <textarea name="sign" rows="5" cols="30" placeholder="请输入个性签名" ></textarea>
- rows,cols,表示行数和宽度
-
密码输入框
<!-- type属性表示表单元素的类型,name属性表示表单元素的名称,placeholder属性表示表单元素的占位文本 --> <input type="password" name="password" placeholder="密码" />
-
-
单选框和复选框
-
单选框
<input type="radio" name="gender" value="male" />男 <input type="radio" name="gender" value="female" />女
-
选择的选项name相同
-
lable标签用于统一内容效果
label> <input type="radio" name="gender" value="male" />男 </label> <label> <input type="radio" name="gender" value="female" />女 </label>
//用id识别 <input id="male" type="radio" name="gender" value="male" /> <label for="male">男</label> <input id="female" type="radio" name="gender" value="female" /> <label for="female">女</label>
-
-
复选框
<label> <input type="checkbox" name="interest" value="coding" />编程 </label> <label> <input type="checkbox" name="interest" value="other" />其他 </label>
-
需要注意的是:复选框是只有2种状态的表单控件:已选中或未选
中。在只有一个复选框的情况下,它允许用户对某事说“是”或“否”,比
如同意或不同意某个条款。而只有一个单选框的情况下,用户一旦选
择了这个单选框,就不能再取消选择了,除非他刷新了网页~
-
-
选项菜单<select>和<option>
<select name="career"> <option value="default">请选择职业</option> <option value="staff">公司职员</option> <option value="freelancer">自由职业者</option> <option value="student">学生</option> <option value="other">其他</option> </select>
实现多选
<select name="career" multiple> <option value="default">请选择职业</option> <option value="staff">公司职员</option> <option value="freelancer">自由职业者</option> <option value="student">学生</option> <option value="other">其他</option> </select>
-
按钮
<button>注册</button>
属性type种类submit
-
CSS-美化文档
-
HTML内部添加样式
-
在标签中添加声明(作为属性)
style=""
-
在引号之间添加样式
-
样式由属性和值组成,用
:
隔开,用;
结尾
-
-
字体大小/字体粗细
-
字体大小
<!-- 设置字体的大小为12px --> <p style="font-size: 12px;"> 一个轻量级和模块化的前端框架,用于开发快速和强大的web接口。 </p> <!-- 设置字体的大小为24px --> <p style="font-size: 24px;"> 一个轻量级和模块化的前端框架,用于开发快速和强大的web接口。 </p>
-
字体加粗
<p style="font-weight: 200;">优课达--学的比别人好一点~</p> <p style="font-weight: lighter;">优课达--学的比别人好一点~</p> <p style="font-weight: 400;">优课达--学的比别人好一点~</p> <p style="font-weight: normal;">优课达--学的比别人好一点~</p> <p style="font-weight: 700;">优课达--学的比别人好一点~</p> <p style="font-weight: bold;">优课达--学的比别人好一点~</p>
-
-
字体颜色/文字对齐方式
- 颜色
-
- 文字对齐方式
- ·text-align:center;文字居中对齐
- ·text-align:left;文字左对齐
- ·text-align:right;文字右对齐
- 颜色
-
文字行高/字间距/字体
- 行高 >= 字体大小,为文本所在行空间的高度
line-height: 30px
- 可以改变行距
- 使文字垂直居中:设置行高等于盒子高度
- 字间距
letter-spacing:30px
- 字体
ont-family: 'Goudy Bookletter 1911', sans-serif, 'Gill Sans Extrabold';
系统选择
- 行高 >= 字体大小,为文本所在行空间的高度
CSS引入和选择器
-
CSS的三种引入方式
-
行内样式
-
内部样式:将行内样式抽离
-
外部样式
引入头部写法
<link rel="stylesheet" type="text/css" href="index.css" />
rel
属性rel
属性规定了当前文档与被链接文档之间的关系,但是rel
属性的stylesheet
值被所有浏览器支持,也就是说你只要记住一个值即可。
type
属性type
属性规定了被链接文档的 MIME(多用途互联网邮件扩展类型)类型,type
属性对应的最常见的值就是text/css
,该类型描述样式表.href
属性href
属性后跟的是要引入的链接地址
-
-
相对路径/绝对路径
- 绝对路径是硬盘真正存在的路径
- 相对路径就是相对于文件自身位置,去寻找要引入的资源文件
./
当前文件夹目录../
回到上一级文件夹目录(可叠加)- 文件夹名表示进入该文件夹
../css/index.css
-
常用选择器
-
标签选择器
<style> h3 { font-size: 25px; color: #330867; } h4 { font-size: 18px; color: #30cfd0; } p { font-size: 14px; line-height: 28px; color: #4a5252; } </style>
-
选择器的层叠性:之前写过的标签又会重新写一次,造成的结果
- 添加新效果
- 改变之前已经存在的效果
- 如果未精确选中可能因权重问题不会变化
-
类选择器:将重复特殊点的模块批量处理
.article { color: red; font-size: 14px; }
一个元素可添加多个类名
<p class="common color font-size"> common设置通用样式,color设置特殊颜色,font-size设置特殊字体大小 </p>
.common { font-size: 22px; color: #333333; letter-spacing: 8px; } .current { color: #ff6973; }
-
id选择器
在标签里定义id(独一无二)
<p id="p-item">这是一段文字</p>
使用id选择器
#p-item { font-size: 24px; font-weight: 400; }
-
-
高级选择器
-
后代选择器
p a
-----选择所有p标签内的所有a标签/* 选择id名为password的标签内部所有类名为box的元素内部的所有p标签 */ #password .box p{} /* 选择所有p标签内部的所有span标签 */ p span{} /* 选择所有p标签内部的所有类名为spanItem的标签 */ p .spanItem{}
ul li { /* 去除li标签前面的小圆点 */ list-style: none; font-size: 22px; } .first-ul li { color: rgb(212, 166, 28); } .second-ul li { color: rgb(230, 127, 122); }
补充一点:从上面这个例子可以看出一种编程思想,就是抽离,将
li
标签公有的属性抽离在ul li
选择器内,因为这个选择器选中的是所有的li
,然后再分别用.first-ul li
和.second-ul li
选择器来设置不同的属性。 -
交集选择器
a(标签名).special(类名){}
-
子选择器 选择的是儿子(最近的文本内容)
<p> <span>Span 1. 在p标签内 <span>Span 2. 在p标签的span标签内</span> </span> </p> <span>Span 3. 与p标签相邻</span>
后代选择器
span { color: black; } p span { color: orangered; }
子选择器
span { color: black; } p>span { color: orangered; }
-
并集选择器 在标签名或者类名后面用
,
隔开.box,p,h3,.phone{}
-
-
选择器的优先级
-
单个选择器的优先级:id选择器> 类选择器>标签选择器
-
文字属性的继承性:父标签的元素改变带动相应的子元素改变
-
高级选择器的优先级:选择器权重叠加(一定是选中的情况)
<ul class="ul-item"> <li> <p>文字的颜色到底是什么颜色?</p> </li> </ul>
ul li p { color: blue; } p { color: red; }
样式的确定取决于
权重+继承性
-
CSS-盒模型
-
content
div
块标签:h
、p
、ul
、li
这些块标签都是在此标签基础上改造的- div默认宽度是父元素宽度,高度为0px
width
\height
backgroud-color
-
padding内边距
-
背景颜色包含了padding和content
-
padding元素写法(上右下左)
-
.box { padding: 20px; }
-
.box { padding-top: 20px; /*上内边距*/ padding-right: 20px; /*右内边距*/ padding-bottom: 20px; /*下内边距*/ padding-left: 20px; /*左内边距*/ }
-
div{ padding:20px 20px 20px 20px; }
-
//上下一样,左右一样 div{ padding: 20px 30px; }
-
上下一样左右不一样
div{ padding: 20px 30px 20px 10px; }
-
左右一样,上下不一样
div{ padding: 30px 10px 20px; }
-
box-sizing:规定width和height指的是内容还是边界
-
-
border
-
样式
.box { /* 设置矩形大小 */ width: 200px; height: 30px; /* 设置边框线 */ border-width: 2px; border-color: grey; border-style: solid; }
-
简写
.box { border: 2px solid blue; }
-
分别设置边框
.box { /* 添加顶部border */ border-top: 1px solid black; /*添加右侧border*/ border-right: 3px solid orange; /*添加底部border*/ border-bottom: 5px dashed pink; /*添加左侧border*/ border-left: 10px dashed purple; }
-
层叠性设置边框
.box { /*设置矩形的宽*/ width: 300px; /*设置矩形的高*/ height: 300px; /*设置矩形的背景颜色*/ background-color: white; /*设置矩形的边框*/ /*统一设置矩形的所有边框样式*/ border: 2px solid black; /*重新设置一个下边框的样式来层叠掉统一设置的边框的样式*/ border-bottom: 5px solid orange; }
-
无边框
.box { border-bottom: none; }
-
圆角
.box { border-radius: 12px; }
分开设置
.box { width: 200px; height: 200px; background-color: violet; border-top-left-radius: 5px; border-top-right-radius: 10px; border-bottom-left-radius: 20px; border-bottom-right-radius: 15px; }
-
阴影
.box { width: 200px; height: 200px; border: 1px solid #c4c4c4; /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */ box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2); border-radius: 15px; }
- x 偏移量:在 x 轴上移动,向右为正
- y 偏移量:在 y 轴上移动,向下为正
- 阴影模糊半径:就是边线的清晰度
- 阴影扩散半径:就是向外伸展
- 阴影颜色:就是矩形下面那个矩形的背景色。
-
-
margin(外边距)
- 两个盒子之间margin计算:左右的两个盒子水平距离 = margin1-left + margin2-right,垂直距离 = max(margin1 - bottom, margin2-top)
- 一般设置垂直距离值两个盒子同一空间只设置一个
- 盒子左右居中:在父盒子中左右居中,前提子盒子有设置了width属性且margin:0 auto;
-
display:block/none
- block性质:独占一行、可设置宽高
- 行内元素和块元素之间转换:使用display属性
- none:使标签在网页布局中消失
-
display:inline/inline-block
-
inline不能设置宽高、可以设置padding尽量不要用此方法设置块大小,可设置左右margin不能设置上下margin
-
inline-block能同行显示的块元素
解决空白折叠现象
-
去除回车
<!-- 将div标签写在一行 --> <div class="box1"></div><div class="box2"></div>
-
给父元素添加word-spacing属性设置为负数
-
给父元素设置font-size:0px
-
-
-
定位(1)
-
position - static(默认定位)
top、left、right、bottom属性无效
-
position - relative(相对定位)
top、left、right、bottom属性先参照static布局的前提下,再不改变页面布局的前提下改变位置:相当于留有原来的盒子空间,自身根据属性抽离到另一空间
-
position - absolute(绝对定位)
会因为absolute的设置,不会在原有的层次上留空间,整个根据top、left、right、bottom属性抽离为第二图层。
偏移方式:相对于最近的非static定位的祖先元素偏移
总结下:absolute(绝对定位) 和 relation(相对定位)的区别,relation 是相对自己进行 top、left、right、bottom 进行偏移,而 absolute 是寻找最近的 非 static 的祖先节点进行偏移。
-
position-fixed
fixed 为 固定定位
固定定位和绝对定位类似,但元素的包含块为屏幕视口(viewport)
固定定位不为元素预留空间,而是通过指定元素相对于屏幕视口(viewport)的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。
定位基于viewport
-
z-index
- 默认非 static 元素的 z-index 都为 0
- z-index 越大,则越在最上面,离观察者越近
- 同样的 z-index, 在 HTML 中的元素越靠后,则越在最上面,离观察者越近
-
position-sticky:效果元素滚到顶部会黏在顶部,向下滚动是,又会恢复其在文档中的位置。
定位(2)
-
float:left\right:让元素贴着父元素的左边/右边排版。使用场景
- 想要一组元素同时靠左靠右对齐
- 使文字围绕图片
-
模态框:位于浏览器中心,有半透明背景
<!DOCTYPE html> <head> <link rel="stylesheet" type="text/css" href="./index.css" /> </head> <body> <nav class="nav"> …… </nav> <main> …… </main> <div class="mask"></div> <div class="modal"> <img src="https://style.youkeda.com/img/ykd-components/logo.png?x-oss-process=image/resize,w_800/watermark,image_d2F0ZXJtYXNrLnBuZz94LW9zcy1wcm9jZXNzPWltYWdlL3Jlc2l6ZSx3XzEwMA==,t_60,g_se,x_10,y_10" /> </div> </body>
.mask { position: fixed; /*1设置元素撑满屏幕*/ left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.7); /*2透明度颜色*/ }
.modal { background-color: #fff; /* 设置长宽 */ width: 300px; height: 150px; /* 设置圆角20px */ border-radius: 20px; } .modal > img { display: block; width: 200px; margin: 39px auto; /*1使logo始终在父元素中左右居中*/ }
元素居中
- 元素水平居中
- 行内元素:在父容器使用
text-align:center
- 块元素:在子容器上使用
margin:0 auto
- 行内元素:在父容器使用
- 元素垂直居中
- flex
- margin-top = (父元素高度 - 子元素高度) / 2
- position的方向都是以DOM元素的左上角顶点偏移
- 元素水平居中
背景
-
一般单一色调
background: red; background: #ffffff; background: rgba(200, 200, 200); background: rgba(0, 0, 0, 0.5);
-
渐变色
background:linear-gradient(to right, #95ca47,#4dc891) 背景属性 线性渐变 渐变方向 开始颜色 结束颜色
-
渐变方向使用语义化英文实现:
- to right / to left 向右/向左渐变
- to top / to bottom 向上/向下渐变
- to right bottom / to right top 向右下/向右上渐变
- to left bottom / to left top 向左下/向左上渐变
- xxxdeg xxx 范围(0 到 360) 更精确的渐变方向
-
渐变位置
MDN:https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients
-
-
背景图片
-
基础引入
{ background-image: url(url) /*url不加引号*/ }
-
没填充满容器的话,背景会repeat,需要设置background-repeat
值 描述 repeat 这是默认值。如果背景图片比容器小,将在垂直和水平方向进行重复 repeat-x 背景图片只在水平方向重复 repeat-y 背景图片只在垂直方向重复 no-repeat 背景图片将只显示一次,不重复 -
背景图片位置
background-position
值 描述 - top left
- top center
- top right
- center left
- center center
- center right
- bottom left
- bottom center
- bottom right
左侧两个元素为一组一起出现,分别代表垂直和水平布局
比如:
background-position: top left; 效果等于
background-position-x: left;
background-position-y: top;
如果只写一个关键词,那么另一个关键词默认是centerx% y% 第一个值是水平位置,第二个值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。如果只写一个值,另一个值将是 50%。xpx ypx 第一个值是水平位置,第二个值是垂直位置。
左上角是 0 0,单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果只写一个值,另一个值将是50% -
高级特性
background-size
值 描述 cover 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域。 xpx ypx 手动设置宽度和高度 x% y% 手动设置宽度和高度相对于容器的百分比 cover 就是满足图片长宽中较小的一方撑满屏幕。 contain 就是满足图片长宽中较大的一方撑满屏幕。
-
合并写法
.box { width: 350px; height: 250px; border: 1px solid #e8e8e8; font-size: 30px; font-weight: bold; color: yellowgreen; background-image: url(https://style.youkeda.com/img/ykd-components/logo.png); background-repeat: no-repeat; background-size: contain; background-position: center; } /*写成*/ .box { width: 350px; height: 250px; border: 1px solid #e8e8e8; font-size: 30px; font-weight: bold; color: yellowgreen; background: url(https://style.youkeda.com/img/ykd-components/logo.png) no-repeat center / contain; }
-
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!