01、前端

Web 前端

技术 说明
HTML5 标签
CSS 样式
JavaScript 网页脚本
TypeScript 本质上也是一个 JavaScript，主要做交互效果
Vue 全家桶（JavaScript 框架） React（阿里云的）
Vue Router 路由（界面与界面之间的切换就是路由）
Pinia 状态管理 / 数据共享
Axios 资源访问服务器

html5

QQ_1785547943800

常用的标签:

分类 标签 说明
分区容器 div 块级容器，布局盒子
行内容器 span 行内盒子，包裹文字局部样式
标题 h1 ~ h6 六级标题，h1 最大，h6 最小
段落 p 文本段落，自带上下间距
链接 a 超链接，跳转页面
文本样式 b、i b 文字加粗；i 文字斜体
表格 table 表格容器，搭配 tr、td 使用
图片 img 引入图片，单标签
音频 audio 播放音频文件
视频 video 播放视频文件
表单 form、input form 表单容器，input 各类输入框
有序列表 ol 数字排序列表，搭配 li
无序列表 ul 圆点无序号列表，搭配 li
列表项 li 不可单独存在需要和 ol 或则 ul 一起使用

补充：
ol、ul里面必须放 li 标签，不能直接写文字；
div 块级（独占一行），span 行内（同行显示）。

<!--  html的组成部分 ，这个部分是文档声明为html -->
<!DOCTYPE html>
<html lang="en">

<!-- 这个是头部-->

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>my new web</title>
    <!-- 此处显示的是在浏览器的标签页显示的信息-->
</head>

<body>
    <div>Hello, World</div>

    <h1>hello</h1>
    <h2>hello</h2>
    <h3>hello</h3>
    <h4>hello</h4>
    <h5>hello</h5>
    <h6>hello</h6>


    <p>这个是一个段落，这个是不会换行的，如果是纯p标签，如果使用换行</p>
    <p>
    <p>这个才是换行的</p>
    <p>换行</p>
    </p>

    <!-- 超链接-->

    <a href="https:www.baidu.com">访问百度</a>

    <!-- 文本标签 -->
    <p>网红是<b>“网络红人”</b>的简称‌，主要指因特定事件、行为或持续输出内容而在网络上走红的人。‌‌
        百科<i>谁能算网红</i>
        简单说就是‌走红于网络的人‌，他们凭借优质内容和个人魅力聚集粉丝，能对粉丝的消费习惯、生活方式甚至价值观产生影响。‌‌‌
    </p>

    <!-- 列表 -->

    <ul>
        <li>西瓜</li>
        <li>桃子</li>
        <li>香蕉</li>
    </ul>

    <ol>
        <li>西瓜</li>
        <li>桃子</li>
    </ol>
    <table border="1" cellpadding="0">
        <thead> 
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>1</td>
                <td>张三</td>
                <td>21</td>

            </tr>
        </tbody>
    </table>

    <!-- 图片-->
    <img src="./sky.jpg" width="300px" height="" alt="sky">

    <!-- 音频-->
    <audio src="" alt="这个地方是一个音频"></audio>

    <video src="" alt="这个是一个视频" poster="这个地方是放封面的地方"></video>

    <div>
        <div>
            <h1>盒子标签</h1>
        </div>
    </div>
</body>
</html>

CSS3

层叠样式表

3种写法

  • style 属性
  • style 标签
  • style 文件

文本样式

  • font-size: 字体大小
  • color ： 颜色
  • font-farmity : 字体样式

背景：

  • backgound-color : 背景颜色
  • backgroud-img : 背景图片
  • backgroud-position : 背景图片的位置

盒子模型

  • 宽高
  • 外边距
  • 内边距
  • 边框

display 显示 : block 块级元素、inline 内联元素、inline-block 内联块级

  • block : div 支持
  • inline : span 支持
  • inline-block : img 支持

定位: position ,

Relative : 相对定位

flex 布局

容器 : 外部的整个框架
内部元素 相对容器进行排列和布局

排列的方法 : row , cloumn
内容 : 缩放的策略，自动适配

posted @ 2026-08-01 16:50  黑单  阅读(3)  评论(0)    收藏  举报