节制,是比仁慈更高尚的品德。|

subeipo

园龄:1个月粉丝:0关注:0

📂Java
🔖Java
2025-02-04 19:45阅读: 0评论: 0推荐: 0

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>:删除/删除强调。
  • 实体符号:&nbsp;,&lt;,&gt;
  • <form>:表单标签。
表单标签

表单:在网页中主要负责数据采集功能,如 注册、登录等数据采集。
表单项:不同类型的input元素、下拉列表、文本域等。

  • <input>:定义表单项,通过type属性控制输入形式(text/password/submit/...)。
  • <select>:定义下拉列表。
  • textarea:定义文本域。
    表单项的属性:name,有这个属性的表单项才能使用submit提交。
    <form>的两个重要属性:
  • action:规定当提交表单时应向何处发送表单数据,URL
  • method:规定用于发送表单数据的方式。GET,POST。get是默认方法,在url后拼接提交。post在消息体中提交到服务端。

CSS

CSS (Cascading Style Sheet):层叠样式表,用于控制页面的样式(表现)。

CSS的引入方式

  1. 行内样式:写在标签的style属性中(配合JavaScript使用),会出现大量的代码冗余,不方便后期的维护,所以不常用。
  2. 内部样式:写在style标签中(可以写在页面任何位置,但通常约定写在head标签中),通过定义css选择器,让样式作用于当前页面的指定的标签上。
  3. 外部样式:写在一个单独的.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

前端常用的插件:

  1. Chinese (Simplified)
  2. HTML CSS Support:在编写样式表的时候,自动补全功能大大缩减了编写时间。
  3. JavaScript (ES6) code snippets:支持ES6语法提示。
  4. Mithril Emmet:一个能大幅度提高前端开发效率的一个工具,用于补全代码。
  5. Path Intellisense:路径提示。
  6. Vue 3 Snippets:在 Vue 2或者Vue 3开发中提供代码片段,语法高亮和格式化。
  7. Auto Close Tag:自动闭合HTML/XML标签。
  8. Auto Rename Tag:自动完成另一侧标签的同步修改。
  9. open in browser:支持快捷键与鼠标右键快速在浏览器中打开html文件,支持自定义打开指定的浏览器,包括:Firefox,Chrome,Opera,IE以及Safari。
  10. Live Server:一个具有实时加载功能的小型服务器,也就是说我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。
  11. Vue - Official:为 Vue 3 构建的语言支持插件。
  12. File Utils:创建、复制、移动、重命名文件和目录。
  13. IntelliJ IDEA Keybindings:可在VSCode中使用IDEA的快捷键。

一些配置

  1. 点击 "设置" 按钮,修改字体、背景样式等偏好设置。
  2. 点击右上角 "打开设置" 的图标,然后在打开的 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 协议许可协议进行许可。

posted @   subeipo  阅读(0)  评论(0编辑  收藏  举报
点击右上角即可分享
微信分享提示
评论
收藏
关注
推荐
深色
回顶
收起