N

Norlcayn的博客

A text-focused Halo theme

  • 首页
  • 文章
  • 默认分类
  • 关于
主页 Web前端
文章

Web前端

发表于 2026-01-15 更新于 昨天
作者 Administrator
37~48 分钟 阅读

Web标准

  • Web标准也称网页标准，由一系列的标准组成，大部分有W3C（World Wide Web Consortium，万维网联盟）负责指定
  • 三个组成部分：
  • HTML：负责网页的结构（页面元素和内容）
  • CSS：负责网页的表现（页面元素的外观、位置等页面样式，如：颜色、大小）
  • JavaScript：负责网页的行为（交互效果）

HTML

  • HTML（HyperText Markup Language）：超文本标记语言
  • 超文本：超越了文本的限制，比如普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容
  • 标记语言：由标签"<标签名>"构成的语言
    • HTML标签都是预定义好的。例如：使用

      展示标题，使用展示图片，使用展示视频

    • HTML代码直接在浏览器中运行，HTML标签由浏览器解析

CSS

  • CSS（Cascading Style Sheet）：层叠样式表，用于控制页面的样式

HTML快速入门

HTML大体分为头部和身体

中主要存放给浏览器看的信息，比如CSS样式、网页标题等

中主要存放给用户看的信息，比如文字、图片、视频等 HTML标签的特点： 1. html标签不区分大小写，**建议小写** 2. html标签的属性值使用单引号/双引号都可以 3. html语法结构松散，但建议规范书写 标题标签：

-

超链接：… - href：指定资源访问的url - traget：指定在何处打开资源链接 - \_self：默认值，在当前页面打开 - \_blank：在空白页打开 视频标签： - src：指定视频的url - controls：是否显示播放控件 - width：宽度 - height：高度 图片标签： - src：指定图片的url - width：宽度 - height：高度 | 标签 | 作用 | | --- | --- | | / | **加粗** | | / | 下斜线 | | / | *倾斜* | | / | ~~下斜线~~ | | 字符实体 | 属性/说明 | | --- | --- | |   | 空格 | | < | < | | ≷ | > | # CSS快速入门 CSS引入方式： 1. 行内样式：写在标签的style属性中（通常配合JavaScript使用） 2. 内部样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中） 3. 外部样式：写在一个单独的.css文件中（通常通过link标签在网页中引入） 颜色表示： 1. 关键字：red、green 2. rgb表示法：rgb(255, 0, 0)、rgb(134, 100, 89) 3. rbga表示法：rgba(255, 0 , 0, 0.5)、rgba(134, 100, 89, 1) 4. 十六进制：#ff0000、#cccccc、#f00 颜色属性： - color：设置文本内容的颜色 - background-color：设置背景颜色 ## CSS选择器 | 选择器 | 写法 | 示例 | 示例说明 | | --- | --- | --- | --- | | 元素选择器 | 元素名称 {…} | h1 {…} | 选择页面上所有的

标签 | | 类选择器 | .class属性值 {…} | .cls {…} | 选择页面上所有class属性为cls的标签 | | id选择器 | #id属性值 {…} | #hid {} | 选择页面上id属性为hid的标签 | | 分组选择器 | 选择器1, 选择器2 {…} | h1, h2 | 选择页面上所有的

和

标签 | | 属性选择器 | 元素名称[属性] {…} | input[type] {…} | 选择页面上有type属性的标签 | | | 元素名称[属性名=”值”] {…} | input[type=”text”] | 选择页面type属性为text的标签 | | 后代选择器 | 元素1 元素2 {…} | form input {…} | 选择
标签内的所有标签 | 优先级排行： 1. !important - 最高优先级（应避免滥用） 2. 内联样式 - style属性中的样式 3. ID选择器 - #id形式的选择器 4. 类选择器、属性选择器、伪类 - .class、[type]、:hover等 5. 元素选择器、伪元素 - h1、p、::before等 6. 通用选择器 - \* # 盒子模型 - 盒子：页面中的所有元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方标的进行页面布局 - 盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边框区域（margin） ![Snipaste_2025-08-04_12-30-56](/upload/5d0fdb51a41ac3a7.png) - 布局标签：网页开发中，会使用div和span这两个没有语义的布局标签 - 特点： - div标签： 1. 一行只显示一个（独占一行） 2. 宽度默认是父元素的宽度，高度默认由内容撑开 3. 可以设置宽高（width、height） - span标签： 1. 一行可以显示多个 2. 宽度和高度默认由内容撑开 3. 不可以设置宽高 # Flex布局 - Flex是Flexible Box的缩写，意为“弹性布局”，是一种一维的布局模型。flex布局可以为元素之间提供强大的空间分布和对齐能力 - 通过给父容器添加flex的相关属性，来控制子元素的位置和排列方式 | 属性 | 取值 | 含义 | | --- | --- | --- | | display | flex | 使用flex布局 | | flex-direction （设置主轴） | row | 主轴方向为x轴，水平向右 | | | column | 主轴方向为y轴，垂直向下 | | justify-content （子元素在主轴上的对齐方式） | flex-start | 从头开始排列 | | | flex-end | 从尾部开始排列 | | | center | 从主轴居中对齐 | | | space-around | 平分剩余空间 | | | space-between | 先两边贴边，再平分剩余空间 | # Form表单 - 表单标签： - 表单属性： - action：表单数据提交的url地址 - method：表单提交方式 - get：表单数据拼接在url后面，`?username=java`，大小受限 - post：表单数据在请求体中携带，没有大小限制 - 注意：表单项必须有name属性才可以提交 ## 表单项 - ：表单项，通过type属性控制输入形式 - `：路由链接组件，浏览器会解析成`` - ``：动态视图组件，用来渲染展示与路由路径对应的组件 ## Vue生命周期 - 生命周期：指一个对象从创建到销毁的整个过程 - 生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法 | **状态** | **阶段周期** | | --- | --- | | beforeCreate | 创建前 | | created | 创建后 | | beforeMount | 载入前 | | mounted | 挂载完成 | | beforeUpdate | 数据更新前 | | updated | 数据更新后 | | beforeUnmount | 组件销毁前 | | unmounted | 组件销毁后 | > 生命周期应用场景：在页面加载完毕时，发起异步请求，加载数据，渲染页面 # Ajax - 介绍：Asynchronous JavaScript And XML，异步的JavaScript和XML（XML：Extensible Markup Language，可扩展标记语言。本质是一种数据格式，可以用来存储复杂的数据结构） - 作用： - 数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据 - 异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分页面的技术，如：搜索联想、用户名是否可用的校验等等 ## Axios - Axios对原生的Ajax进行了封装，简化书写，快速开发 - 官网：[http://www.axios-http.cn](http://www.axios-http.cn/) - 步骤： - 引入Axios的js文件 - 使用Axios发送请求，并获取响应结果 示例： 
axios({
method: 'GET',
url: 'https://web-server.itheima.net/emps/list'
}).then((result) => {
console.log(result.data);
}).catch((err) => {
alert(err);
});
> 第一个括号内可以有以下参数： > > method：请求方式，GET/POST > > url：请求路径 > > data：请求数据（POST） > > params：发送请求时携带的url参数，如：…?key=val（GET） 或者换一种方式发送请求： 
// GET请求
axios.get(url).then((res) => {...})catch((err) => {...})

// POST请求
axios.post(url).then((res) => {...})catch((err) => {...})

前端 HTML CSS JS Vue Axios
许可协议:  CC BY 4.0
分享

相关文章

下一篇

Vue和Element Plus

 上一篇

Java IO操作

最近更新

  • Hello Halo
  • 状态机
  • 数据表设计规范
  • 缓存优化
  • 事务失效

热门标签

Halo 异常处理 Redisson 并行 Vue 并发 递归 请求限流 SpringAMQP 类加载器

目录

©2026 Norlcayn的博客. 保留部分权利。

使用 Halo 主题 Chirpy