[UI5 常用控件] 03.Icon, Avatar,Image

news2025/1/19 8:20:07

文章目录

  • 前言
  • 1. Icon
  • 2. Avatar
    • 2.1 displayShape
    • 2.2 initials
    • 2.3 backgroundColor
    • 2.4 Size
    • 2.5 fallbackIcon
    • 2.6 badgeIcon
    • 2.7 badgeValueState
    • 2.8 active
  • 3. Image

前言

本章节记录常用控件Title,Link,Label。
其路径分别是：

  • sap.m.Icon
  • sap.m.Avatar
  • sap.m.Image

1. Icon

  • 常用属性有src, class, color, press等
    在这里插入图片描述
  • View
<Panel
   headerText="Icon"
    class="sapUiLargeMargin"
>
    <HBox width="50%">
        <core:Icon
            src="sap-icon://syringe"
            class="size1"
            color="#031E48"
        >
            <core:layoutData>
                <FlexItemData growFactor="1" />
            </core:layoutData>
        </core:Icon>
        <core:Icon
            src="sap-icon://pharmacy"
            class="size2"
            color="#64E4CE"
        >
            <core:layoutData>
                <FlexItemData growFactor="2" />
            </core:layoutData>
        </core:Icon>
        <core:Icon
            src="sap-icon://electrocardiogram"
            class="size3"
            color="#E69A17"
        >
            <core:layoutData>
                <FlexItemData growFactor="3" />
            </core:layoutData>
        </core:Icon>
        <core:Icon
            src="sap-icon://doctor"
            class="size4"
            color="#1C4C98"
        >
            <core:layoutData>
                <FlexItemData growFactor="4" />
            </core:layoutData>
        </core:Icon>
        <core:Icon
            src="sap-icon://stethoscope"
            class="size5"
            color="#8875E7"
            press="handleStethoscopePress"
        >
            <core:layoutData>
                <FlexItemData growFactor="5" />
            </core:layoutData>
        </core:Icon>
    </HBox>
</Panel>

2. Avatar

2.1 displayShape

  • 显示形状（方形，圆形）
    在这里插入图片描述
  • View
<Panel
   headerText="displayShape"
    class="sapUiLargeMarginBottom"
>
    <HBox>
        <VBox alignItems="Center">
            <Avatar
                src="img/1.webp"
                displaySize="XL"
                displayShape="Square"
                showBorder="true"
                press="onPress"
            />
            <Text text="Square" />
        </VBox>
        <VBox
            alignItems="Center"
            class="sapUiLargeMarginBegin"
        >
            <Avatar
                src="img/1.webp"
                displaySize="XL"
                showBorder="true"
                press="onPress"
            />
            <Text text="默认或者Circle" />
        </VBox>
    </HBox>
</Panel>

2.2 initials

  • 显示initials文字
    在这里插入图片描述
  • View
<Panel
    headerText="显示initials： IS"
    class="sapUiLargeMarginBottom"
>
    <HBox>
        <VBox alignItems="Center">
            <Avatar
                initials="IS"
                displaySize="XL"
                displayShape="Square"
                press="onPress"
            />
            <Text text="两个字母" />
        </VBox>
        <VBox
            alignItems="Center"
            class="sapUiLargeMarginBegin"
        >
            <Avatar
                enabled="false"
                initials="PI"
                displaySize="XL"
                press="onPress"
            />
            <Text text="虚化：enabled=false" />
        </VBox>
        <VBox
            alignItems="Center"
            class="sapUiLargeMarginBegin"
        >
            <Avatar
                displaySize="XL"
                press="onPress"
                initials="ABC"
            />
            <Text text="三个字母" />
        </VBox>
    </HBox>
</Panel>

2.3 backgroundColor

  • 背景色（Transparent，TileIcon， Placeholder， Random）
  • Random会在每次渲染时随机分配颜色
    在这里插入图片描述
  • View
<Panel
   headerText="背景色： backgroundColor"
    class="sapUiLargeMarginBottom"
>
    <HBox>
        <VBox
            alignItems="Center"
            class="sapUiLargeMarginBegin"
        >
            <Avatar
                displaySize="XL"
                backgroundColor="Transparent"
                press="onPress"
            />
            <Text text="Transparent" />
        </VBox>
        <VBox
            alignItems="Center"
            class="sapUiLargeMarginBegin"
        >
            <Avatar
                initials="IS"
                displaySize="XL"
                backgroundColor="TileIcon"
                press="onPress"
            />
            <Text text="TileIcon" />
        </VBox>
        <VBox
            alignItems="Center"
            class="sapUiLargeMarginBegin"
        >
            <Avatar
                displaySize="XL"
                backgroundColor="Placeholder"
                displayShape="Square"
                press="onPress"
            />
            <Text text="Placeholder" />
        </VBox>
    </HBox>
</Panel>

2.4 Size

  • 指定大小（XL,L,M,S,XS,Custom）
    在这里插入图片描述
  • View
<Panel
  headerText="Size"
    class="sapUiLargeMarginBottom"
>
    <HBox>
        <VBox
            alignItems="Center"
            class="sapUiSmallMarginEnd"
        >
            <Avatar
                src="sap-icon://lab"
                displaySize="XL"
                backgroundColor="Accent6"
            />
            <Text
                text="XL"
                class="sapUiSmallMarginTop"
            />
        </VBox>
        <VBox
            alignItems="Center"
            class="sapUiSmallMarginEnd"
        >
            <Avatar
                src="sap-icon://lab"
                displaySize="L"
                backgroundColor="Accent7"
            />
            <Text
                text="L"
                class="sapUiSmallMarginTop"
            />
        </VBox>
        <VBox
            alignItems="Center"
            class="sapUiSmallMarginEnd"
        >
            <Avatar
                src="sap-icon://lab"
                displaySize="M"
                backgroundColor="Accent8"
            />
            <Text
                text="M"
                class="sapUiSmallMarginTop"
            />
        </VBox>
        <VBox
            alignItems="Center"
            class="sapUiSmallMarginEnd"
        >
            <Avatar
                src="sap-icon://lab"
                displaySize="S"
                backgroundColor="Accent9"
            />
            <Text
                text="S"
                class="sapUiSmallMarginTop"
            />
        </VBox>
        <VBox
            alignItems="Center"
            class="sapUiSmallMarginEnd"
        >
            <Avatar
                src="sap-icon://lab"
                displaySize="XS"
                backgroundColor="Accent10"
            />
            <Text
                text="XS"
                class="sapUiSmallMarginTop"
            />
        </VBox>
        <VBox alignItems="Center">
            <Avatar
                src="img/lamp.png"
                displaySize="Custom"
                customDisplaySize="200px"
                displayShape="Circle"
            />
            <Text
                text="displaySize=Custom， customDisplaySize=200px"
                class="sapUiSmallMarginTop"
            />
        </VBox>
    </HBox>
</Panel>

2.5 fallbackIcon

  • Avatar会根据displayShape属性有默认图标，也可以指定图标。 如果指定路径有问题将会显示initials
    在这里插入图片描述
  • View
<Panel
   headerText="图标"
    class="sapUiLargeMarginBottom"
>
    <HBox>
        <VBox
            alignItems="Center"
            class="sapUiLargeMarginEnd"
        >
            <Avatar
                displaySize="L"
                displayShape="Square"
                backgroundColor="Random"
            />
            <Text
                text="Square默认图标"
                class="sapUiSmallMarginTop"
            />
        </VBox>

        <VBox
            alignItems="Center"
            class="sapUiLargeMarginEnd"
        >
            <Avatar
                displaySize="L"
                displayShape="Circle"
                backgroundColor="Random"
            />
            <Text
                text="Circle默认图标"
                class="sapUiSmallMarginTop"
            />
        </VBox>

        <VBox
            alignItems="Center"
            class="sapUiLargeMarginEnd"
        >
            <Avatar
                displaySize="L"
                displayShape="Square"
                fallbackIcon="sap-icon://accelerated"
                backgroundColor="Random"
            />
            <Text
                text="指定图标fallbackIcon"
                class="sapUiSmallMarginTop"
            />
        </VBox>
        <VBox
            alignItems="Center"
            class="sapUiLargeMarginEnd"
        >
            <Avatar
                displaySize="L"
                initials="PB"
                src="{/test}"
                backgroundColor="Random"
            />
            <Text
                text="错误的图片路径将显示initials"
                class="sapUiSmallMarginTop"
                textAlign="Center"
            />
        </VBox>
    </HBox>
</Panel>

2.6 badgeIcon

  • badgeIcon只能在激活press属性并且在控制器里有对应function时激活
    在这里插入图片描述

  • View

<Panel
   headerText="badgeIcon"
    class="sapUiLargeMarginBottom"
>
    <HBox>
        <VBox alignItems="Center">
            <Avatar
                displaySize="M"
                backgroundColor="Accent3"
                press="onPress"
                badgeIcon="sap-icon://edit"
            />
            <Text
                textAlign="Center"
                text="edit"
                class="sapUiSmallMarginTop"
            />
        </VBox>
        <VBox
            alignItems="Center"
            class="sapUiLargeMarginBegin"
        >
            <Avatar
                displaySize="XL"
                press="onPress"
                badgeIcon="sap-icon://camera"
                badgeTooltip="Sabine Mayer"
            />
            <Text
                textAlign="Center"
                text="camera"
                class="sapUiSmallMarginTop"
            />
        </VBox>
        <VBox
            alignItems="Center"
            class="sapUiLargeMarginBegin"
        >
            <Avatar
                displaySize="XL"
                backgroundColor="Accent5"
                src="sap-icon://soccer"
                displayShape="Square"
                press="onPress"
                badgeIcon="sap-icon://edit"
            />
            <Text
                textAlign="Center"
                text="add"
                class="sapUiSmallMarginTop"
            />
        </VBox>
        <VBox
            alignItems="Center"
            class="sapUiLargeMarginBegin"
        >
            <Avatar
                src="img/lamp.png"
                displaySize="L"
                displayShape="Circle"
            >
                <detailBox>
                    <LightBox>
                        <LightBoxItem
                            imageSrc="img/lamp.png"
                            alt="灯泡"
                            title="这是灯泡"
                            subtitle="闪闪发光"
                        />
                    </LightBox>
                </detailBox>
            </Avatar>
            <Text
                textAlign="Center"
                text="LightBox事件"
                class="sapUiSmallMarginTop"
            />
        </VBox>
    </HBox>
</Panel>

2.7 badgeValueState

  • 会给badgeIcon上颜色
    在这里插入图片描述
  • View
<Panel
   headerText="badgeValueState"
    class="sapUiLargeMarginBottom"
>
    <HBox>
        <VBox
            alignItems="Center"
            class=""
        >
            <Avatar
                displaySize="M"
                imageFitType="Cover"
                badgeValueState="Warning"
                press="onPress"
                badgeIcon="sap-icon://alert"
                badgeTooltip="Sabine Mayer"
            />
            <Text
                textAlign="Center"
                text="Warning"
                class="sapUiSmallMarginTop"
            />
        </VBox>
        <VBox
            alignItems="Center"
            class="sapUiLargeMarginBegin"
        >
            <Avatar
                displaySize="M"
                imageFitType="Cover"
                badgeValueState="Information"
                press="onPress"
                badgeIcon="sap-icon://information"
                badgeTooltip="Sabine Mayer"
            />
            <Text
                textAlign="Center"
                text="information"
                class="sapUiSmallMarginTop"
            />
        </VBox>
        <VBox
            alignItems="Center"
            class="sapUiLargeMarginBegin"
        >
            <Avatar
                displaySize="M"
                imageFitType="Cover"
                badgeValueState="Success"
                press="onPress"
                badgeIcon="sap-icon://message-success"
                badgeTooltip="Sabine Mayer"
            />
            <Text
                textAlign="Center"
                text="Success"
                class="sapUiSmallMarginTop"
            />
        </VBox>
        <VBox
            alignItems="Center"
            class="sapUiLargeMarginBegin"
        >
            <Avatar
                displaySize="M"
                imageFitType="Cover"
                badgeValueState="Error"
                press="onPress"
                badgeIcon="sap-icon://message-error"
                badgeTooltip="Sabine Mayer"
            />
            <Text
                textAlign="Center"
                text="Error"
                class="sapUiSmallMarginTop"
            />
        </VBox>
    </HBox>
</Panel>

2.8 active

  • 只有绑定press事件时才能激活该属性
  • Active背景颜色和Non-Active背景颜色有差异
    在这里插入图片描述
    在这里插入图片描述
  • View
<Panel
    headerText="Active - Popover menu"
    class="sapUiLargeMarginBottom"
>
    <VBox>
        <MessageStrip
            text="Active state of Avatar is set, when the user clicks on the Avatar and the Popover menu is opened. When the menu is closed, Active state is removed."
            showIcon="false"
            showCloseButton="false"
            class="sapUiTinyMargin"
        />
        <HBox>
            
            <Avatar
                id="myAvatar"
                active="false"
                displaySize="L"
                showBorder="true"
                class="sapUiTinyMargin"
                press="onPressPopover"
            />
        </HBox>
    </VBox>
</Panel>
  • 点击事件
onPressPopover: function (oEvent) {
    var oEventSource = oEvent.getSource(),
        bActive = this.oMyAvatar.getActive();

    this.oMyAvatar.setActive(!bActive);

    if (bActive) {
        this._oPopover.close();
    } else {
        this._oPopover.openBy(oEventSource);
    }

}

3. Image

  • Image可以显示主流图片文件，也可以显示BASE64图片文件
    在这里插入图片描述
  • View
<Panel
   headerText="Image"
   class="sapUiLargeMargin"
>
   <HBox width="50%">
       <VBox
           alignItems="Center"
           class="sapUiLargeMarginBegin"
       >
           <Image
               src="img/lamp.png"
               width="150px"
           />
           <Text
               text="PNG格式"
               class="sapUiSmallMarginBottom"
           />
       </VBox>
       <VBox
           alignItems="Center"
           class="sapUiLargeMarginBegin"
       >
           <Image
               src="img/1.webp"
               width="150px"
           />
           <Text
               text="webp格式"
               class="sapUiSmallMarginBottom"
           />
       </VBox>
       <VBox
           alignItems="Center"
           class="sapUiLargeMarginBegin"
       >
           <Image src="img/sap-logo.svg" />
           <Text
               text="svg格式"
               class="sapUiSmallMarginBottom"
           />
       </VBox>
       <VBox
           alignItems="Center"
           class="sapUiLargeMarginBegin"
       >
           <Image src="{/imgurl}" />
           <Text
               text="BASE64值"
               class="sapUiSmallMarginBottom"
           />
       </VBox>
   </HBox>
</Panel>
  • 读取本地图片并转成base64
_convertImageToBase64: function (filePath) {
   return new Promise(function (resolve, reject) {
       // 创建一个XMLHttpRequest对象
       var xhr = new XMLHttpRequest();

       // 配置请求，使用GET方法获取文件
       xhr.open("GET", filePath, true);

       // 设置响应类型为blob（二进制数据）
       xhr.responseType = "blob";

       // 注册加载完成的回调函数
       xhr.onload = function () {
           if (xhr.status === 200) {
               // 读取到的文件数据
               var blob = xhr.response;

               // 创建一个FileReader对象
               var reader = new FileReader();

               // 注册读取完成的回调函数
               reader.onloadend = function () {
                   // 获取Base64编码的文件内容
                   var base64Data = reader.result;
                   resolve(base64Data);
               };

               // 读取blob数据为Base64编码
               reader.readAsDataURL(blob);
           } else {
               reject(new Error("Failed to load the image."));
           }
       };

       // 注册错误回调函数
       xhr.onerror = function () {
           reject(new Error("Failed to make the request."));
       };

       // 发送请求
       xhr.send();
   });
}
  • onInit中调用
// 调用函数将文件转换为base64编码
this._convertImageToBase64("img/2.jpg")
     .then(function (base64Data) {
         that.getView().setModel(new JSONModel({ "imgurl": base64Data }))
         
     })
     .catch(function (error) {
         console.error(error);
     });

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1416332.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

贪吃蛇项目（基于C语言和数据结构中的链表）

贪吃蛇项目（基于C语言和数据结构中的链表）

建立文件 首先先建立3个文件。 Snake.h 函数的声明 Snake.c 函数的定义 Test.c 贪吃蛇的测试 分析项目 我们分析这整个项目 建立节点 首先在我们实现游戏开始的部分之前&#xff0c;我们要先创建贪吃蛇的节点&#xff0c;再由此创建整个贪吃蛇所包含的一些信息&#…
阅读更多...
【王道数据结构】【chapter2线性表】【P44t17~t20】【统考真题】

【王道数据结构】【chapter2线性表】【P44t17~t20】【统考真题】

目录 2009年统考 2012年统考 2015年统考 2019年统考 2009年统考 #include <iostream>typedef struct node{int data;node* next; }node,*list;list Init() {list head(list) malloc(sizeof (node));head->next nullptr;head->data-1;return head; }list Buyne…
阅读更多...
机器学习 | 如何使用 Seaborn 提升数据分析效率

机器学习 | 如何使用 Seaborn 提升数据分析效率

Seaborn和Matplotlib都是Python可视化库&#xff0c;它们都可以用于创建各种类型的图表。但是&#xff0c;Seaborn 和Matplotlib在概念和设计上有一些不同。 Matplotlib虽然已经是比较优秀的绘图库了&#xff0c;但是它有个今人头疼的问题&#xff0c;那就是API使用过于复杂&am…
阅读更多...
人工智能系列：机器的进化（下）

人工智能系列：机器的进化（下）

大家好&#xff0c;接着上文的图灵机&#xff0c;继续介绍机器的进化。 1. 第一台计算机 世界上第一台电子计算机是ENIAC&#xff08;埃尼阿克&#xff09;&#xff0c;这是课本上所写的。但计算机学界对于究竟哪台是第一台电子计算机其实存在着争议&#xff0c;除了 ENIAC 以…
阅读更多...
[嵌入式软件][启蒙篇][仿真平台] STM32F103实现SPI控制OLED屏幕

[嵌入式软件][启蒙篇][仿真平台] STM32F103实现SPI控制OLED屏幕

上一篇&#xff1a; [嵌入式软件][启蒙篇][仿真平台] STM32F103实现LED、按键 [嵌入式软件][启蒙篇][仿真平台] STM32F103实现串口输出输入、ADC采集 [嵌入式软件][启蒙篇][仿真平台]STM32F103实现定时器 [嵌入式软件][启蒙篇][仿真平台] STM32F103实现IIC控制OLED屏幕 文章目…
阅读更多...
【Vue2 + ElementUI】更改el-select的自带的下拉图标为倒三角，并设置相关文字颜色和大小

【Vue2 + ElementUI】更改el-select的自带的下拉图标为倒三角，并设置相关文字颜色和大小

效果图 实现 <template><div class"search_resources"><div class"search-content"><el-select class"search-select" v-model"query.channel" placeholder"请选择" change"handleResource&q…
阅读更多...
【贪吃蛇：C语言实现】

【贪吃蛇：C语言实现】

文章目录 前言1.了解Win32API相关知识1.1什么是Win32API1.2设置控制台的大小、名称1.3控制台上的光标1.4 GetStdHandle&#xff08;获得控制台信息&#xff09;1.5 SetConsoleCursorPosition&#xff08;设置光标位置&#xff09;1.6 GetConsoleCursorInfo&#xff08;获得光标…
阅读更多...
TikTok直播对网络环境的要求是怎么样的

TikTok直播对网络环境的要求是怎么样的

TikTok直播作为一种互动性强、实时性要求高的社交媒体形式&#xff0c;对网络环境有着一系列特定的需求。了解并满足这些需求&#xff0c;对于确保用户体验、提高直播质量至关重要。本文将深入探讨TikTok直播对网络环境的要求以及如何优化网络设置以满足这些要求。 TikTok直播的…
阅读更多...
Django学习之小试牛刀

Django学习之小试牛刀

六、Django学习之小试牛刀 其他关于Python Web开发笔记&#xff1a;&#xff08;如果遇到问题可以一起交流~&#xff09; 一、Flask学习之HTML-CSDN博客 二、Flask学习之CSS-CSDN博客 【接上篇】二、Flask学习之CSS&#xff08;下篇&#xff09;-CSDN博客 三、Flask学习之B…
阅读更多...
读取一个batch的图像并且显示出来

读取一个batch的图像并且显示出来

1读取一个batch用于训练 我们在训练模型的时候&#xff0c;除了观察图像的标签和尺寸&#xff0c;最好能读取一个batch的图像显示出来&#xff0c;观察原始图像和grountruth是否对应&#xff0c;如果正确才能正式开始后续的训练。 下面以一个皮肤病分割的数据集加以演示。 2…
阅读更多...
漏洞原理SQL注入 手工注入漏洞

漏洞原理SQL注入 手工注入漏洞

漏洞原理SQL注入 手工注入漏洞 SQL 注入的前置知识 information_schema库information_schema 是mysql5.0以上版本中自带的一个数据库。tables表information_schema库中的tables表中table_schema列&#xff08;存储数据库名&#xff09;和table_name列&#xff08;存储表名&…
阅读更多...
【第六天】蓝桥杯备战

【第六天】蓝桥杯备战

题 1、明明的随机数2、特殊日期 1、明明的随机数 https://www.lanqiao.cn/problems/539/learning/ 解法&#xff1a;暴力 import java.util.Scanner; import java.util.Arrays; // 1:无需package // 2: 类名必须Main, 不可修改public class Main {public static void main…
阅读更多...
node学习过程中的终端命令

node学习过程中的终端命令

冷的哥们手真tm冷&#xff0c;打字都是僵的&#xff0c;屮 目录 一、在学习nodejs过程中用到的终端命令总结 一、在学习nodejs过程中用到的终端命令 node -v nvm install 20.11.0 nvm list nvm list available nvm on nvm -v nvm use 20.11.0 node加要运行的js文件路径 ps&a…
阅读更多...
手指伸不直，锤状指不可忽视！

手指伸不直，锤状指不可忽视！

在日常生活和工作中&#xff0c;手指很容易戳伤&#xff0c;损伤后有时出现末节手指伸不直&#xff0c;影响手指屈伸活动障碍而就诊&#xff0c;医生会说手指损伤形成锤状指。那么什么是锤状指&#xff1f; 01 什么是“锤状指畸形”&#xff1f; 锤状指是指伸肌腱止点断裂后的…
阅读更多...
确知信号的类型：能量信号与功率信号

确知信号的类型：能量信号与功率信号

通信原理第17页第一段&#xff1a; 例如&#xff0c; s ( t ) 8 s i n ( 5 t 1 ) , − ∞ < t < ∞ s(t)8sin(5t1),-\infty<t<\infty s(t)8sin(5t1),−∞<t<∞&#xff0c;就属于周期信号&#xff0c;其周期 T 0 2 π / 5 T_02\pi/5 T0​2π/5 三角函数很…
阅读更多...
Spring5深入浅出篇:Spring中ioc(控制反转)与DI(依赖注入)

Spring5深入浅出篇:Spring中ioc(控制反转)与DI(依赖注入)

Spring5深入浅出篇:Spring中ioc(控制反转)与DI(依赖注入) 反转(转移)控制(IOC Inverse of Control) 控制&#xff1a;对于成员变量赋值的控制权 反转控制&#xff1a;把对于成员变量赋值的控制权&#xff0c;从代码中反转(转移)到Spring⼯⼚和配置⽂件中完成好处&#xff1a;…
阅读更多...
docker 部署xxl-job

docker 部署xxl-job

docker 部署xxl-job XXL-JOB github地址 https://github.com/xuxueli/xxl-job XXL-JOB 文档地址 https://www.xuxueli.com/xxl-job/ XXL-JOB是一个分布式任务调度平台&#xff0c;其核心设计目标是开发迅速、学习简单、轻量级、易扩展。现已开放源代码并接入多家公司线上产品…
阅读更多...
Ubuntu apt update提示：GPG 缺少公钥解决方法

Ubuntu apt update提示：GPG 缺少公钥解决方法

Ubuntu 运行: sudo apt update #or sudo apt-get update提示&#xff1a;GPG 缺少公钥以及404 Not Found&#xff0c;如下面所示&#xff0c;有mirror.bwbot.org 和ppa.launchpadcontent.net两个源出现问题。 好多网友用后面的方法解决 真正解决&#xff1a;gpg --verify sig:…
阅读更多...
数据库ER图相关概念及其画法

数据库ER图相关概念及其画法

ER图基本概念 ER图&#xff08;Entity-Relationship Diagram&#xff09;是一种用于描述现实世界概念模型的图形化表示方法&#xff0c;通过使用图形符号和元素来表示实体、属性和它们之间的关系。在ER图中&#xff0c;实体、属性和关系分别使用不同的图形元素来表示&#xff0…
阅读更多...
【前端web入门第二天】01 html语法实现列表与表格_合并单元格

【前端web入门第二天】01 html语法实现列表与表格_合并单元格

html语法实现列表与表格 文章目录: 1.列表 1.1 无序列表1.2 有序列表1.3 定义列表 2.表格 2.1 表格基本结构2.2 表格结构标签2.3 合并单元格 写在最前,第二天学习目标: 列表 表格 表单 元素为嵌套关系 1.列表 作用:布局内容排列整齐的区域。 列表分类:无序列表、有序列表…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023