Java初学者笔记-12、前端开发基础
未完待续
Web
三个组成部分:
- HTML:负责网页的结构(页面元素和内容)。
- CSS:负责网页的表现(页面元素的外观、位置等页面样式,如:颜色、大小等)。
- Javascript:负责网页的行为(交互效果)。
高级技术:
- 基于JS封装而来的高级框架——vue。
- 基于vue的桌面端组件库——Element+。
- 前后端异步交互的技术——Ajax和Axios。
HTML
HTML(HyperText Markup Language):超文本标记语言。
- HTML标签都是预定义好的。例如:
<h1>
使用展示标题,<img>
使用展示图片,<video>
使用展示视频。 - HTML代码直接在浏览器中运行,HTML标签由浏览器解析。
HTML的常用标签
<head>
:用来存放给浏览器看的信息,如:CSS样式,字符编码,网页标题。<body>
:用来存放给用户看的信息,如:文字、图片、视频。<a href="" target=""></a>
:超链接,href指定资源访问的url,target: 指定在何处打开资源链接,_self
: 默认值,在当前页面打开;_blank
: 在空白页面打开。<video src="" controls autoplay width="">
: src视频地址,controls显示播放控件,autoplay自动播放,width视频宽度,heignt视頻高度。<br>
:换行。<p>
:段落标签。<img src="">
:引入图片。<b>/<strong>
:加粗/加粗强调。<u>/<ins>
:下划线/下划线强调。<i>/<em>
:倾斜/倾斜强调。<s>/<del>
:删除/删除强调。- 实体符号:
,<
,>
。
<form>
:表单标签。
表单标签
表单:在网页中主要负责数据采集功能,如 注册、登录等数据采集。
表单项:不同类型的input元素、下拉列表、文本域等。
<input>
:定义表单项,通过type属性控制输入形式(text/password/submit/...)。<select>
:定义下拉列表。textarea
:定义文本域。
表单项的属性:name
,有这个属性的表单项才能使用submit提交。
<form>
的两个重要属性:action
:规定当提交表单时应向何处发送表单数据,URLmethod
:规定用于发送表单数据的方式。GET,POST。get是默认方法,在url后拼接提交。post在消息体中提交到服务端。
CSS
CSS (Cascading Style Sheet):层叠样式表,用于控制页面的样式(表现)。
CSS的引入方式
- 行内样式:写在标签的style属性中(配合JavaScript使用),会出现大量的代码冗余,不方便后期的维护,所以不常用。
- 内部样式:写在style标签中(可以写在页面任何位置,但通常约定写在head标签中),通过定义css选择器,让样式作用于当前页面的指定的标签上。
- 外部样式:写在一个单独的.css文件中(需要通过 1ink 标签在网页中引入),html和css实现了完全的分离,企业开发常用方式。
CSS样式选择
选择器 | 写法 | 说明 |
---|---|---|
元素选择器 | h1 {} | 选择页面上所有的<h1>标签 |
类选择器 | .cls {} | 选择页面上所有class为cls的标签 |
ID选择器 | #hid {} | 选择页面上所有id为hid的标签 |
分组选择器 | h1,h2 {} | 选择页面上所有的<h1>和<h2>标签 |
属性选择器 | input[type] {};input[type="text"] {} | 选择页面上有type属性的<input>标签;选择页面上type属性为text的<input>标签 |
后代选择器 | form input {} | 选择<form>标签内的所有 input>标签 |
- 复用样式:多个元素共享样式时使用类选择器.。
- 唯一元素:单个元素特殊样式使用ID选择器#。
- 结构清晰:通过层级选择器避免样式污染,提升代码可维护性。
颜色设置
表示方式 | Status |
---|---|
关键字 | 颜色英文单词 |
rgb表示法 | rgb(r, g, b) |
rgba表示法 | rgba(r, g, b, a) |
十六进制表示法 | #rrggbb |
CSS常用样式
/* 设置段落首行缩进 */ p { text-indent: 2em; /* 首行缩进2em */ line-height: 2; /* 行高2倍 */ } /* 设置超链接取消下划线效果 */ a { text-decoration: none; } .news-content { width:70%;/* 宽度占70% */ margin: 0 auto; /* 横向居中 */ }
盒子模型
盒子:页面中所有的元素(标签),都可以看做是一个盒子,由盒子将页面中的元素包含在一个矩形区域内,通过盒子的视角更方便的进行页面布局。
盒子模型组成:内容区域(content)、内边距区域(padding)、边框区域(border)、外边距区域(margin)。
布局标签:网页开发中,会使用 div 和 span 这两个没有语义的布局标签。
<div>
标签
- 一行只显示一个(独占一行)。
- 宽度默认是父元素的宽度,高度默认由内容撑开。
- 可以设置宽高(width、height)。
<span>
标签
- 一行可以显示多个。
- 宽度和高度默认由内容撑开。
- 不可以设置宽高(width、height)。
div { width: 200px; /* 宽度 */ height: 200px; /* 高度 */ box-sizing: border-box; /* 指定width height为盒子的高宽 */ background-color: aquamarine; /* 背景色 */ padding: 20px 20px 20px 20px; /* 内边距, 上 右 下 左 , 边距都一行, 可以简写: padding: 20px;*/ border: 10px solid red; /* 边框, 宽度 线条类型 颜色 */ margin: 30px 30px 30px 30px; /* 外边距, 上 右 下 左 , 边距都一行, 可以简写: margin: 30px; */ }
flex弹性布局
一种一维的布局模型。
通过给父容器添加flex的相关属性,来控制子元素的位置和排列方式。
属性 | 取值 | 含义 |
---|---|---|
display | flex | 使用flex布局 |
flex-direction(设置主轴) | row | 主轴方向为x轴,水平向右。(默认) |
column | 主轴方向为y轴,垂直向下。 | |
justify-content(子元素在主轴上的对齐方式) | flex-start | 从头开始排列 |
flex-end | 从尾部开始排列 | |
center | 在主轴居中对齐 | |
space-around | 平分剩余空间 | |
space-between | 先两边贴边,再平分剩余空间 |
vscode
前端常用的插件:
- Chinese (Simplified)
- HTML CSS Support:在编写样式表的时候,自动补全功能大大缩减了编写时间。
- JavaScript (ES6) code snippets:支持ES6语法提示。
- Mithril Emmet:一个能大幅度提高前端开发效率的一个工具,用于补全代码。
- Path Intellisense:路径提示。
- Vue 3 Snippets:在 Vue 2或者Vue 3开发中提供代码片段,语法高亮和格式化。
- Auto Close Tag:自动闭合HTML/XML标签。
- Auto Rename Tag:自动完成另一侧标签的同步修改。
- open in browser:支持快捷键与鼠标右键快速在浏览器中打开html文件,支持自定义打开指定的浏览器,包括:Firefox,Chrome,Opera,IE以及Safari。
- Live Server:一个具有实时加载功能的小型服务器,也就是说我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。
- Vue - Official:为 Vue 3 构建的语言支持插件。
- File Utils:创建、复制、移动、重命名文件和目录。
- IntelliJ IDEA Keybindings:可在VSCode中使用IDEA的快捷键。
一些配置
- 点击 "设置" 按钮,修改字体、背景样式等偏好设置。
- 点击右上角 "打开设置" 的图标,然后在打开的
settings.json
中增加如下配置信息。
{ "workbench.colorTheme": "Default Light+", "workbench.statusBar.visible": false, "editor.fontFamily": "'Courier New', Consolas, monospace", "editor.fontSize": 15, "editor.lineHeight": 1.8, "editor.tabSize": 2, "editor.codeActionsOnSave": { "source.fixAll": "explicit" }, "editor.minimap.enabled": true, "liveServer.settings.donotShowInfoMsg": true, "git.confirmSync": false, "terminal.integrated.defaultProfile.windows": "Command Prompt" }
本文作者:subeipo
本文链接:https://www.cnblogs.com/subeipo/p/18698410/java-chu-xue-zhe-bi-ji12-qian-duan-kai-fa-ji-chu
版权声明:本作品采用署名—非商业性使用—相同方式共享 4.0 协议许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步