ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

跟小甲鱼学Web开发笔记07

2021-10-14 10:30:17  阅读:158  来源: 互联网

标签:Web 07 效果 甲鱼 元素 语义 del 加粗 com


跟小甲鱼学Web开发笔记07

格式化大作战

加粗效果

strong元素

strong元素可以使字体加粗,更加显眼,当想要突出某些重要的文本内容,就可以使用到。
举个栗子:

    <p>雄性激素虽然对男人来说是利大于弊的,不过却也是一把双刃剑,过高的雄性激素会增加心血管疾病和糖尿病的患发率,它会影响糖和脂肪的正常代谢,导致肥胖、高血压等,促使心血管疾病和糖尿病的发生。更糟糕的是,如果雄性激素分泌过于旺盛,人体的背部、胸部,特别是面部、头顶部就会分泌出过多的油脂,这不仅会导致皮肤问题,还会使头顶的毛孔被油脂所堵塞,头发的营养供应发生障碍,最终导致逐渐脱发而最后成为<strong>秃顶</strong>。</p>

效果图:
在这里插入图片描述

b元素

而让字体加粗,b元素可以做到,只不过b元素没有语义,strong元素有重要的语义~
例子:

<p>b元素也能使得文本<b>变粗</b>,但它没有强调的语义。</p>

效果:
在这里插入图片描述

斜体效果

em元素

em元素表示强调的语义,通常是以斜体的形式呈现。
举个栗子:

<p>学习编程中最重要的是<em>练习</em>!只有<em>练习</em>才是最好的导师!!

效果:
在这里插入图片描述

i元素

同上,i元素也是斜体的效果,不过它没有附带任何的强调语义。
举个栗子:

<p>i元素也可以让内容<i>倾斜</i>,只不过它没有附带任何表示强调的语义。</p>

效果:
在这里插入图片描述

使用css代替b和i元素

没有无缘无故的加粗,也没有无缘无故倾斜,如果要强调的文本,肯定是非常重要的,不过不推荐使用b和i元素,更推荐使用css样式表来实现。

<style type="text/css">
        .bold {font-weight: bolder;}
        .italic {font-style: italic;}
    </style>
<p class="bold">这里的内容都加粗会比较好看!</p>
<p class="italic">这里的内容还是倾斜的好……</p>

效果:
在这里插入图片描述

久的不去新的不来

小甲鱼的网页改变拉,那我们应该表示这种“久的不去,新的不来”的情况呢?当然是,del元素和ins元素。

del和ins元素

del元素有删除的语义,ins有插入的语义。
举个栗子:

<p>鱼C论坛的域名从 <del>bbs.fishc.com</del> 变成 <ins>fishc.com.cn</ins>,官网从 <del>www.fishc.com</del> 变成 <ins>ilovefishc.com</ins></p>

效果:
在这里插入图片描述

s元素

s元素的效果和del元素一样,都是删除线,不过两者不能混用,因为s元素语义定义那些表示不在正确的内容。
举个栗子:

<p>表示不再正确的内容要用 s 元素而不是 <s>del</s> 元素。</p>

效果:
在这里插入图片描述

u元素

u元素的样式也是一条下划线,它定义的是拼写错误的单词,或者汉字中的专用名词。
代码:

<p>鱼C的官方主页不是 <u>i love fishc.com</u>,是 <a href="https://ilovefishc.com">ilovefishc.com</a> 才对。</p>

效果:
在这里插入图片描述

mark元素

mark元素起到标记文本的作用。
代码:

<p><mark>可乐</mark>、<mark>雪碧</mark>、<mark>柠檬茶</mark>,请问客官喝点啥?</p>

效果:
在这里插入图片描述

sup和sub元素

sup元素和sub元素分别起到上标文本和下标文本效果,比如数学公式和化学方程式。
例子:

<p>E = MC<sup>2</sup></p>
<p>Mg + ZnSO<sub>4</sub> = MgSO<sub>4</sub> + Zn</p>

效果:
在这里插入图片描述

small元素

small元素作用,使得指定文本变小。
代码:

<p>细节不重要,反正就是送福利啦!!</p>
<p>……</p>
<p><small>本活动最终解释权归XXX所有</small></p>

效果:
在这里插入图片描述

标签:Web,07,效果,甲鱼,元素,语义,del,加粗,com
来源: https://blog.csdn.net/a392544151/article/details/120757569

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有