JavaWeb 笔记 01

第一章前端开发

提前声明：本文章仅作个人学习记录，不涉及商业用途。

内容记录于学习途中, 没有按分类进行总结, 可能存在错误或不完整之处。

一、总览

视频地址

在线讲义地址

1. 待学习内容：

HTML / CSS / JS
Vue + Ajax.

2. 实战内容：

Vue + ElementPlus
Vue3 案例

二、具体内容

1. HTML

标签 <img...>, 属性 <...src="">

2. CSS

语句中的 <...style=""> 属性。

前端官方文档MDN

3. 网页制作

<html>
  <!-- 网页头部，放置浏览器配置与 CSS -->
  <head>
    <title>HTML 快速入门</title>
  </head>

  <!-- 网页主体，放置用户界面 -->
  <body>
    <h1>hello, html</h1>
    <img src="img/1.jpg" />
  </body>
</html>

4. HTML 语法特点

不区分大小写。
单双引号均可。
语法结构松散。

三、VS Code 配置

插件

01 Chinese (Simplified) Language Pack
02 HTML CSS Support
03 JavaScript (ES6) code snippets
04 Mithril Emmet
05 Path Intellisense
06 Vue 3 Snippets
07 Auto Close Tag
08 Auto Rename Tag
09 open in browser
10 Live Server
11 Vue - Official
12 File Utils
13 IntelliJ IDEA Keybindings
14 TRAE AI: Coding Assistant (formerly MarsCode AI)
15 TONGYI Lingma

第二章 HTML CSS 常见标签样式

一、HTML 标签

1. 标题标签

<h1>: 最高层级标题
<h2>, <h3>, <h4>, <h5>, <h6>

2. 超链接标签 `<a>`

<a href="" target="_blank">点击跳转</a>

属性	描述	示例
`href`	指定链接目标URL	`https://www.cctv.com/`
`target`	指定链接打开方式	`_blank`（新窗口）、`_self`（当前窗口）

3. 视频标签

<video src="..." controls></video>

属性	描述	示例	备注
`src`	指定视频文件路径	`video/1.mp4`
`controls`	添加视频控制条	`controls`
`autoplay`	自动播放视频	`autoplay`
`width`	指定视频宽度	`width="300"`	只设置宽度时，高度会自动按比例缩放
`height`	指定视频高度	`height="200"`

4. 图片标签

<img src="..." alt="...">

属性	分类	描述	示例
`src`	绝对磁盘路径	图片文件的完整路径	`/img/1.jpg`
`src`	绝对网络路径	图片文件的完整URL	`https://www.cctv.com/img/1.jpg`
`src`	当前相对路径	图片文件相对于当前HTML文件的路径	`./img/1.jpg`
`src`	父级相对路径	图片文件相对于父级HTML文件的路径	`../img/1.jpg`
`alt`	替代文本	图片加载失败时显示的文本	`<img src="..." alt="图片加载失败">`
`width`	指定图片宽度	`<img src="..." width="300">`	只设置宽度时，高度会自动按比例缩放
`height`	指定图片高度	`<img src="..." height="300">`	只设置高度时，宽度会自动按比例缩放

5. 正文样式

属性	作用	属性说明
`<b>`/`<strong>`	加粗文本	`<strong>`强调重要性
`<i>`/`<em>`	斜体文本	`<em>`强调语气
`<u>`/`<ins>`	下划线文本	`<u>`表示非正文注释，`<ins>`表示插入
`<s>`/`<del>`	删除线文本	`<s>`表示不再准确的内容，`<del>`表示已删除的内容

字符实体	属性说明
` `	空格
`<`	小于号
`>`	大于号

二、CSS 常见样式

1. 引入方式

引入方式	示例
行内样式	`<h1 style="color: red;"></h1>`
内联样式	`<style> h1 { color: red; } </style>`
外部样式	`<link rel="stylesheet" href="css/style.css">`

2. 颜色表示

style {
  color: red;
}

颜色表示法	示例
关键字颜色	`red`, `blue`, `green`
RGB颜色	`rgb(255, 0, 0)`
RGB颜色（透明度）	`rgba(255, 0, 0, 0.5)`
十六进制颜色	`#ff0000`

3. 盒子模型

div {
  width: 100px;
  height: 100px;
  background-color: red;
  padding: 10px 10px 10px 10px; /* 上 右 下 左 */
  border: 1px solid black; /* 上下左右 */
  margin: 20px 20px; /* 上下 左右 */
  /* 单独设置 */
  /* margin-top: 10px; */
}

组成	组成元素
内容	content
内边距	padding
边框	border
外边距	margin

无语义容器标签 `<div>` 和 `<span>`

`<div>`	`<span>`
独占一行	一行多个
宽度默认是父元素，高度由内容决定	宽度高度都由内容决定
可以设置宽高	不可以设置宽高

三、选择器

选择器	写法	示例	说明
标签选择器	`标签名称 {...}`	`h1 {...}`	选择所有标签为 `h1` 的元素
类选择器	`.类名称 {...}`	`.container {...}`	选择所有类名为 `container` 的标签
ID 选择器	`#ID名称 {...}`	`#header {...}`	选择所有 ID 属性为 `header` 的标签
属性选择器	`[属性名] {...}`	`input [type] {...}`	选择所有有 type 属性的 `input` 标签
属性选择器	`[属性名=属性值] {...}`	`input [type="text"] {...}`	选择所有 type 属性值为 text 的 `input` 标签
后代选择器	`元素1 元素2 {...}`	`div p {...}`	选择所有 `div` 标签下的 `p` 标签

第三章常用标签属性

一、弹性布局

div {
  display: flex;
  flex-direction: row;            // 水平排列
  justify-content: space-between; // 子项间距相等，首尾无间距
  align-items: center;            // 子项垂直居中
  flex-wrap: wrap;                // 自动换行
}

属性	取值	描述
`display`	`flex`	设置元素为弹性布局
`flex-direction`	`row`	主轴为水平向右
	`row-reverse`	主轴为水平向左
	`column`	主轴为垂直向下
	`column-reverse`	主轴为垂直向上
`justify-content`	`flex-start`	从头开始排列
	`flex-end`	从尾开始排列
	`center`	居中排列
	`space-between`	子项间距相等，首尾无间距
	`space-around`	子项间距相等，首尾有间距

二、表单组件

<form action="/save" method="post">
  <fieldset style="padding: 10px">
    <legend>用户信息登记</legend>
    <label for="username">姓名:</label>
    <input type="text" name="username" id="username" />
    <br />
    <br />
    <label for="password">密码:</label>
    <input type="password" name="password" id="password" />
    <br />
    <br />
    <button type="submit">提交保存</button>
  </fieldset>
</form>

1. 表单属性

属性	说明	实例
`action`	表单提交地址	`action="submit.php"`
`method`	表单提交方式	`method="get"`（默认值）或`method="post"`
`name`	表单数据名称, 用于服务器端接收数据	`name="username"`

2. GET 和 POST

GET	POST
将表单数据附加到 URL 中	将表单数据作为 HTTP 请求体发送
不安全	安全
携带数据有限	携带数据无限制

3. 表单项

表单项	说明
`<input>`	输入框
`<select>`	下拉框
`<textarea>`	多行文本框

`<input>` 标签

type 取值	说明
`text`	文本框
`password`	密码框
`radio`	单选框
`checkbox`	复选框
`file`	文件上传
`date/time/datetime-local`	日期/时间选择器
`hidden`	隐藏框
`submit/reset/button`	按钮类

`text` 文本框

用户登录用户名:

<fieldset style="padding: 10px">
  <legend>用户登录</legend>
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username" placeholder="请输入用户名" />
</fieldset>

`password` 密码框

安全设置密码:

<fieldset style="padding: 10px">
  <legend>安全设置</legend>
  <label for="pwd">密码:</label>
  <input type="password" id="pwd" name="pwd" placeholder="请输入密码" />
</fieldset>

`radio` 单选框

性别选择男女

<fieldset style="padding: 10px">
  <legend>性别选择</legend>
  <input type="radio" name="sex" id="male" value="male" />
  <label for="male">男</label>
  <input type="radio" name="sex" id="female" value="female" />
  <label for="female">女</label>
</fieldset>

`checkbox` 复选框

兴趣爱好运动音乐阅读

<fieldset style="padding: 10px">
  <legend>兴趣爱好</legend>
  <input type="checkbox" name="hobby" id="sports" value="sports" />
  <label for="sports">运动</label>
  <input type="checkbox" name="hobby" id="music" value="music" />
  <label for="music">音乐</label>
  <input type="checkbox" name="hobby" id="reading" value="reading" />
  <label for="reading">阅读</label>
</fieldset>

`file` 文件上传

附件上传上传头像:

<fieldset style="padding: 10px">
  <legend>附件上传</legend>
  <label for="avatar">上传头像:</label>
  <input type="file" id="avatar" name="avatar" />
</fieldset>

日期与时间选择器

时间预约日期:

时间:

日期时间:

<fieldset style="padding: 10px">
  <legend>时间预约</legend>
  <label for="d">日期:</label>
  <input type="date" id="d" />
  <br />
  <br />
  <label for="t">时间:</label>
  <input type="time" id="t" />
  <br />
  <br />
  <label for="dt">日期时间:</label>
  <input type="datetime-local" id="dt" />
</fieldset>

`hidden` 隐藏框

隐藏字段演示

下方有一个隐藏框

<fieldset style="padding: 10px">
  <legend>隐藏字段演示</legend>
  <p>下方有一个隐藏框</p>
  <input type="hidden" name="user_id" value="12345" />
</fieldset>

按钮类 (`submit`/`reset`/`button`)

操作按钮

<fieldset style="padding: 10px">
  <legend>操作按钮</legend>
  <input type="submit" value="提交保存" />
  <input type="reset" value="重置内容" />
  <input type="button" value="普通按钮" onclick="alert('Hello!')" />
</fieldset>

`<select>` 标签

学历选择学历:

<fieldset style="padding: 10px">
  <legend>学历选择</legend>
  <label for="education">学历:</label>
  <select name="education" id="education">
    <option value="primary">小学</option>
    <option value="middle">初中</option>
    <option value="high">高中</option>
    <option value="college">大学</option>
  </select>
</fieldset>

`<textarea>` 标签

个人描述描述:

<fieldset style="padding: 10px">
  <legend>个人描述</legend>
  <label for="description">描述:</label>
  <br />
  <textarea name="description" id="description" rows="4" cols="30"></textarea>
</fieldset>

4. 表格标签

标签	描述
`<table>`	定义一个表格
`<thead>`	定义表格的表头
`<tbody>`	定义表格的主体
`<tr>`	定义表格的行, 可包含多个 `<th>` 或 `<td>` 标签
`<th>`/`<td>`	`<th>` 定义表格的表头单元格
`<th>`/`<td>`	`<td>` 定义表格的内容单元格

<table>
  <thead>
    <tr>
      <th>标签</th>
      <th>描述</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>&lt;table&gt;</code></td>
      <td>定义一个表格</td>
    </tr>
    <tr>
      <td><code>&lt;thead&gt;</code></td>
      <td>定义表格的表头</td>
    </tr>
    <tr>
      <td><code>&lt;tbody&gt;</code></td>
      <td>定义表格的主体</td>
    </tr>
    <tr>
      <td><code>&lt;tr&gt;</code></td>
      <td>定义表格的行, 可包含多个 <code>&lt;th&gt;</code> 或 <code>&lt;td&gt;</code> 标签</td>
    </tr>
    <tr>
      <td rowspan="2"><code>&lt;th&gt;</code>/<code>&lt;td&gt;</code></td>
      <td><code>&lt;th&gt;</code> 定义表格的表头单元格</td>
    </tr>
    <tr>
      <td><code>&lt;td&gt;</code> 定义表格的内容单元格</td>
    </tr>
  </tbody>
</table>

版权与备案

未校对 HTML 页面存档

<style>
  .site-footer {
    width: 100%;
    border-top: #ddd solid 1px;
    border-radius: 5px;
    padding: 15px; /* 适当增加了内边距提升呼吸感 */
    margin: 20px auto 0; /* 顶部间距 20px，水平居中 */

    background-color: #444; /* 灰色背景 */
    color: #ffffff; /* 白色文字 */
    text-align: center; /* 居中对齐 */

    font-size: 12px;
    line-height: 1.8; /* 增加行高，防止两行文字挤在一起 */
  }

  .site-footer a {
    color: inherit; /* 继承父级白色 */
    text-decoration: none; /* 去掉下划线 */
    transition: opacity 0.3s;
  }

  .site-footer a:hover {
    opacity: 0.8; /* 悬停时稍微变透明，增加交互感 */
    text-decoration: underline; /* 悬停显示下划线 */
  }

  /* 容器类，如果需要限制最大宽度可以取消注释 */
  /* .container { max-width: 1200px; margin: 0 auto; } */
</style>

<footer class="site-footer">
  <div class="container">
    Copyright &copy; 2026
    <a href="https://github.com/fall-windl">WinterSgr</a>
    . All Rights Reserved.
    <br />
    备案号：
    <a href="https://beian.miit.gov.cn/" target="_blank">冀ICP备2024089373号</a>
  </div>
</footer>

原 Vue Footer 组件存档

<template>
  <footer>
    <div class="container">
      Copyright &copy; {{ year }}
      <a href="https://github.com/fall-windl">{{ author }}</a>
      . All Rights Reserved.
      <br />
      备案号：
      <a href="https://beian.miit.gov.cn/" target="_blank">{{ record }}</a>
    </div>
  </footer>
</template>

<script>
  export default {
    name: "FooterComponent",
  };
</script>

<script setup>
  const year = new Date().getFullYear();
  const author = "WinterSgr";
  const record = "冀ICP备2024089373号";
</script>

<style scoped>
  footer {
    width: 100%;

    border-top: #ddd solid 1px;
    border-radius: 5px;
    padding: 5px 15px;
    margin: 0 auto;
    margin-top: 20px;
    background: #f5f5f5;

    font-size: 12px;
    color: #666;

    a {
      color: inherit;
      text-decoration: none;
    }
  }
</style>

posted @ 2026-03-11 23:41 fallw 阅读(3) 评论(0) 收藏举报

刷新页面返回顶部