java综合开发-前后端分离-01前端html,css
学习路线:
学习目标:
具备一定的Java基础;
掌握数据库表的设计和操作能力,基础的优化能力;
掌握主流的前后端分离的开发模式;
掌握文本开发核心知识,接口开发能力;
掌握文本开发的解决方案。
web:全球广域网,万维网(www world wide web),能够通过浏览器访问的网站。
web应用的基础架构(web架构的重要组成部分):
浏览器;
前端服务器(前端程序);
后端服务器(Java程序);
数据库服务器。
网页的组成部分:
文字,图片,音频,视频,超链接……
网页背后的本质是什么?
前端代码。
前端代码如何转换为用户看到的网页的?
通过浏览器转化(解析和渲染);
浏览器中对代码进行解析渲染的部分称为浏览器内核。
web标准:由w3c(world wide web Consortium,万维网联盟)负责制定;
网页的三个组成部分:
HTML:负责网页的结构(页面元素和内容);
CSS:负责网页的表现(外观,位置,颜色,大小);
JavaScript(简称js):负责网页的行为(交互效果)。
HTML(HyperText Markup Language):超文本标记语言。
超文本:超越了文本的限制,比普通文本更强大;
标记语言:由标签构成的语言,标签都是预定义好的。
HTML快速入门:
① 创建文本文件,后缀名改为.html;
② 编写HTML结构标签;
③ 在中填写内容。
HTML的特点:
html标签不区分大小写;
html标签一般写在之中,而且一般成对出现;
html标签属性值单双引号都可以;
html语法松散。
HTML快速入门
Hello World
css(Cascading Style Sheet):层叠样式表,用于控制页面的样式(外观,位置,颜色,大小)。
css三种引入方式:
(大 - 小)


./
当前目录,其中./
可以省略的../
上一级目录,../
不可省略作用:画出一条水平分割线。
焦点访谈:中国底气 新思想夯实大国粮仓
焦点访谈:中国底气 新思想夯实大国粮仓
h1{
color: aqua;
}
例如:#000000 ==> #000 ,#cccccc ==> #ccc
作用:用来选取需要设置样式的元素(标签)
作用的优先级:id选择器 > 类选择器 > 元素选择器
作用:组合行内元素,一行可以展示多个span标签
属性值:
去掉超链接中的下划线,和颜色定义成黑色:
属性值:
注:controls标准写法是:controls=“controls”,但在html中,如果标签的属性名和属性值一样,可以省略不写,只要一个controls
属性值:
在html中,无论输入多少个空格,只会显示一个。可以使用空格占位符: ;
。
盒子:页面中所有的元素(标签),都可以看作是一个盒子,由盒子将页面中的元素包含在一个矩形区域内,通过盒子的视角更方便的进行布局。
其中,外边距区域margin不包含在盒子里面。
div标签:
一行只显示一个(独占一行);
宽度默认是父元素的宽度,高度默认由内容撑开;
可以设置宽高(width,height)
span标签:
一行可以显示多个;
宽度和高度默认由内容撑开;
不可以设置宽和高。
查看post内容:f12-> network -> 点击提交 -> payload
表单标签
Input定义表单项标签,通过type属性控制输入形式。
text:默认值,定义单行的输入字段;
password:定义密码字段;
radio:定义单选框;
checkbox:定义复选框;
file:定义文件上传按钮;
date/time/datetime-local:定义日期/时间/日期时间;
number:定义数字输入框;
email:定义邮件输入框;
hidden:定义隐藏域;
submit/reset/button:定义提交按钮/重置按钮/可点击按钮;
select:定义下拉列表,
textarea:文本域,
label标签所包裹的任何区域都可以被选中。
前端开发官方文档:https://www.w3school.com.cn/
前端开发工具:vscode
开发注意事项:
修改完了要记得保存;
alt+B打开浏览器运行代码。
浏览器打开前端代码:
在浏览器右键:检查(打开开发者工具);
或者f12。
字体大小调整的属性:font-size,记得加上px
参与评论
手机查看
返回顶部