关于HarmonyOS的学习

yiyiy111yiy

928人浏览 · 2024-08-29 17:07:19

yiyiy111yiy · 2024-08-29 17:07:19 发布

day2

一、div布局

div布局标记，能将网页划分为不同的区域。独占一行，自上而下排列

二、HTML5新增标记

网页头部标记:<header>网页头部标记</header>

导航标记：<nav>网页导航标记</nav>

网页主要内容标记（一个网页中只能有一个）：<main>网页主要内容标记</main>

网页尾部标记：<footer>网页尾部标记</footer>

块区域：<section>块区域标记</section>

侧边框：<aside>侧边栏标记</aside>

文章、新闻标记：<article>博客、文章、新闻标记</article>

图文排列： <figure>  <figcaption>标题</figcaption> <img src=""> <p>描述信息</p> </figure>

地址标记：<address>成都市武侯区</address>

时间标记（横向排列）：2024-07-31 09:52

高亮标记：震惊！....

三、css语言

1、三种样式表（css运行的环境）：内联（偶尔使用），内部（代码少时使用），外部（代码多时使用）。使用外部样式表需要在html中加上 <link rel="stylesheet" href="对应css的文件地址">将html和css连接起来；内部样式表需要加style，style的属性可以不写；内联样式表需要加上style属性，属性值内写上css代码。

2、优先级：内联是最高的；按照先后顺序，后面的会覆盖前面的。

四、css语法

1、css语法是指选择器+声明。选择器是指要设置样式的对象，声明是指属性：属性值。

2、属性和属性值之前使用冒号连接，分号结束，多个属性值之前的顺序不分先后。

3、css和html属性不能混用。

五、css常用属性

width height background-color text-align ：left | center | right | （justfiy 多行文字才能看出效果） margin（元素和元素之间的间隙，也叫外边距） padding（元素内的内容和元素之间的距离，也叫内边距） border（边框，有各种设置） /* 边框：border: 值1表示边框的宽度值2表示边框的样式（solid实线）值3表示边框颜色。如果颜色不设置默认是黑色的*/

        border: 1px solid red;
        /* border-right: 3px solid orange; */
        /*  dashed 表示虚线边框*/
        /* border-left: 3px dashed blue; */
        /* dotted 表示点（状）划线 */
        /* border-top: 5px dotted red; */
        /* double 表示双线 */
        /* border-bottom: 5px double red; */ 
        /* 边框分写形式 */
        /* 
            border-width: 5px;
            border-style: solid;
            border-color: orange; 
        */
        /* 取消边框 */
        /* border: none; */
       /* border-top: none;*/
        /*border-bottom: none;*/

line-height（行高，行高大于容器高度时，文本垂直向下；行高小于容器高度时，文本垂直向上；行高等于容器高度时，文本垂直居中。） font-size（设置元素内的文字大小） list-style:none（取消无序列表的符号） text-decoration：none（取消超链接的下划线） text-decoration：underline（下划线） text-decoration：overline（上划线） text-decoration：line-through（中划线，删除线）

六、背景属性

background-image：url（"对应图片地址"）背景图的显示规则：当背景图大于容器大小时，背景图的某些部分显示不完整当背景图小于容器大小时，背景图的会默认进行平铺当背景图等于容器大小时，背景图刚好显示下

background-color：red（背景颜色） background-repeat：no-repead（平铺属性，repeat默认；no-repeat不平铺；repeat-x横向平铺；repeat-y纵向平铺）

background-position（背景位置，数值+px；百分比； left、right、center、top、bottom；如果想要背景图在容器里面水平和垂直都居中，可以只写一个center简化）

背景图大小属性（css3新增）：值1表宽度，值2表高度 background-size：10px 20px background-size：cover （将背景图进行缩放，完全覆盖容器的区域。） background-size：contain （将背景图进行缩放，不会完全覆盖容器的区域。）

背景图缩写形式： background：值1 值2 值3...（background: orange url("./img/dog.jpg") no-repeat center center/50px 50px;）

背景图固定属性： background-attachment：scroll（背景图随网页滚动）fixed（背景图会固定）

七、margin、padding属性

1、margin（元素与元素之间的距离）： margin-top：10px（上边距） margin-right：10px（右边距） margin-bottom：10px（下边距） margin-left：10px（左边距） margin：0 auto（元素水平居中） margin后一个值表示四个方向都有；两个值表示上下和左右；三个值表示上、左右、下；四个值表示上、右、下、左。 float属性：可以将原本上下排列的元素横向排列。

2、padding（元素内的内容和元素之间的距离）： padding-top：10px（上边距） padding-right：10px（右边距） padding-bottom：10px（下边距） padding-left：10px（左边距） padding后一个值表示四个方向都有；两个值表示上下和左右；三个值表示上、左右、下；四个值表示上、右、下、左。 float属性：可以将原本上下排列的元素横向排列。

当一个容器使用了padding后，会默认将容器撑大，只需要将原容器多余的padding减去即可（设置的左右就减去width，设置的上下就减去height）。如果一个元素没有使用padding，那么就可以不用减去。

八、css选择器

1.选择器就是指要设置样式的对象，可以取一个名称。

2.类型（标记）选择器：以标记的名称来作为选择器来设置样式

    body{
        margin: 0;
    }
    div{
        width: 170px;
        height: 200px;
        background-color: orange;
        margin-left: 30px;
        padding-left: 30px;
    }
    section{
        width: 200px;
        height: 200px;
        background-color: orange;
        margin: 30px auto;
    }
    p{
        background-color: yellow;
        padding-left: 30px;
    }

1111<div>11111</div>

<section>
    <!-- 内容是标记 -->
    <p>hello，1111</p>
</section>

3.class选择器：给标记取一个名称，用来区别不同类型的标记

    .box1{
        width: 200px;
        height: 200px;
        background-color: orange;
    }
    .box2{
        width: 300px;
        height: 200px;
        background-color: hotpink;
    }
    .box3{
        width: 500px;
        height: 200px;
        background-color: skyblue;
    }

1<div class="box1">1</div> 2<div class="box2">2</div> 3<div class="box3">3</div>

一个标记可以有多个class名称

    .box1{
        width: 200px;
        height: 200px;
        background-color: orange;
    }
    .fs{
        font-size: 30px;
        color: blue;
    }

<div class="box1">1</div>
<div class="box1 fs">2</div>
<div class="box1">3</div>

4.id选择器，可以给标记取名称，用来区分不同类型的标记。（具有唯一性，同一个标记不能有多个id名称）

    #box1{
        width: 200px;
        height: 200px;
        background-color: orange;
    }
    #box2{
        width: 300px;
        height: 200px;
        background-color: hotpink;
    }
    #box3{
        width: 500px;
        height: 200px;
        background-color: skyblue;
    }
    #fs{
        font-size: 30px;
        color: red;
    }

<div id="box1">1</div>
<div id="box2 fs">2</div>
<div id="box3">3</div>

5.后代选择器，限定样式起作用的范围

    只有div下的p标记才有样式
    div p{
        color: red;
    }

    .header .content{
        width: 1000px;
        height: 100px;
        background-color: skyblue;
    }

<p>我是没有团队的</p>
<div>
    <p>我是属于div的p标记</p>
</div>

<!-- 注意点：网页开发中，如果一个名称需要多次使用的话，那么不推荐把这个名称放在布局的最外层，因为容易发生样式冲突问题 -->
<div class="header">
    <div class="content">内容区域</div>
</div>

<div class="main">
    <div class="content">我是主要内容里面的区域</div>
</div>

6.子选择器，只对子元素起作用

    .nav>li{
        list-style: none;
    }
    .nav>li>a{
        text-decoration: none;
        color: red;
    }

<ul class="nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">小米商城</a></li>
    <li>
        <a href="#">华为商城</a>
        <ul>
            <li><a href="#">产品1</a></li>
            <li><a href="#">产品2</a></li>
            <li><a href="#">产品3</a></li>
        </ul>
    </li>
    <li><a href="#">碎碎冰</a></li>
    <li><a href="#">摆龙门阵</a></li>
    <li><a href="#">瓜娃子</a></li>
    <li><a href="#">神戳戳</a></li>
</ul>

7.通用兄弟选择器和相邻兄弟选择器

    /* 通用兄弟选择器：可以把div后面所有的元素给选中，限定是p标记。注意点：可以被其他类型的标记给隔开 */
    /* div~p{
        background-color: orange;
    } */

    /* p{
        background-color: orange;
    } */

    /* 相邻兄弟选择器：可以把div后面的相邻的一个p标记选中。注意点：不能被其他类型的标记给隔开 */
    div+p{
        background-color: skyblue;
    }
<p>我曾经也是你兄弟啊！</p>
<div>张涛</div>
<p>我是11的兄弟们1</p>
<!-- 注意点：可以被其他类型的标记给隔开 -->
<!-- <h1>老大哥，背刺了11</h1> -->
<p>我是11的兄弟们2</p>
<p>我是11的兄弟们3</p>
<p>我是11的兄弟们4</p>
<p>我是11的兄弟们5</p>
<p>我是11的兄弟们6</p>

8.交集选择器，只能选中有交集的标记，限定类名或样式起作用的范围。

    div.pbox{
        background-color: skyblue;
    }
<p class="pbox">p标记1</p>
<p>p标记2</p>
<p>p标记3</p>
<p>p标记4</p>
<p>p标记5</p>
<p>p标记6</p>
<div>张来了1</div>
<div class="pbox">张来了2</div>
<div>张来了3</div>

9.通配符选择器，即是选中所有的意思，可以一次性给所有的标记设计样式。开发中一般用来做重置样式使用，把标记默认自带的一些样式给清除掉，把这种情况称之为重置样式。

    *{
        margin: 0;
        padding: 0;
    }
<p>hello，我是张的朋友</p>
<ul>
    <li>hello，我是陈，现在是过气演员！</li>
    <li>hello，我是陈，现在是过气演员！</li>
    <li>hello，我是陈，现在是过气演员！</li>
</ul>
<dl>
    <dt>张</dt>
    <dd>当红小生，嬢嬢们的最爱！笔芯~</dd>
</dl>
<h1>老大哥来了，张被虐了</h1>

九、权重

1.权重是css选择器中的特性，用来解决选择器之间的冲突问题，在css中规定用四位数来表示，不同的选择器有不同的权重。和样式表的优先级类似，权重高的会把低的给覆盖。 id选择器 0 1 0 0 class选择器 0 0 1 0 标记选择器 0 0 0 1 后代（包含）选择器为包含选择器之和通配符对权重没有贡献（没有权重就是0）内联样式表的权重是1 0 0 0 最高权重的关键字：！important

2.css层叠，当样式发生冲突时，需要一个标准来解决问题，此时权重和优先级便是用来解决问题的标准，我们便把这些规则标准称之为css层叠性

HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

HarmonyOS开发：线上问题定位

线上故障排查是开发者的"急救"能力——平时用不上，但关键时刻必须靠得住。维度评价学习难度⭐⭐⭐⭐ 需要掌握日志分析、堆栈解读、远程调试等多种技能使用频率⭐⭐⭐ 不常用但关键时刻极其重要重要程度⭐⭐⭐⭐⭐ 线上故障排查能力直接决定故障恢复时间日志是排查的第一手资料，但必须有结构、有上下文，否则就是噪音堆栈解读是核心技能，混淆后的堆栈必须反混淆才能看懂远程调试是最后手段，能通过日志定位的不要远程调试故

HarmonyOS开发者社区

HarmonyOS开发：线上监控

线上监控是应用运营的"眼睛"——没有监控，你就是在黑暗中摸索，用户出了问题你比谁都晚知道。维度评价学习难度⭐⭐⭐⭐ 监控体系搭建需要理解HiAppEvent、告警规则设计、数据采集策略使用频率⭐⭐⭐⭐⭐ 监控是持续运行的，7x24小时不间断重要程度⭐⭐⭐⭐⭐ 没有监控的应用就是"裸奔"，线上问题只能靠用户反馈崩溃监控是底线，应用上线第一天就要有告警要精准，告警太多等于没有告警，关键指标异常才告警监