跟小甲鱼学Web开发笔记07
跟小甲鱼学Web开发笔记07
- 格式化大作战
- 加粗效果
- strong元素
- b元素
- 斜体效果
- em元素
- i元素
- 使用css代替b和i元素
- 久的不去新的不来
- del和ins元素
- s元素
- u元素
- mark元素
- sup和sub元素
- small元素
格式化大作战
加粗效果
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相关推荐
- 小甲鱼学python学习笔记
一.序章 1.python缩进问题 if a == 0:-------- else:-------- while a = 0:-------- 2.字符串拼接与控制台输入输出 input()可从控制台 ...
- 【爬虫篇】《极客Python之效率革命》(小甲鱼) b站笔记
〇.前情提要 如果有更新了请提醒我写笔记. 然后突然想起来我冲过小甲鱼的会员,那就跟着小甲鱼学一下吧,后续如果在b站看到了补充的还会再继续写笔记. 参考: [爬虫篇]<极客Python之效率革命 ...
- Bootstrap响应式Web开发笔记01——基础入门
Bootstrap响应式Web开发笔记01--基础入门 Bootstrap响应式Web开发笔记02--移动端页面布局 Bootstrap响应式Web开发笔记03--Bootstrap栅格系统 Boot ...
- 菜鸟学WEB开发 ASP.NET 5.0 1.0
菜鸟学WEB开发 ASP.NET 5.0 1.0 在学习之初我要强调一点"微软要向跨平台开发"大举进军了,不管他能走多远,这是微软的必经之路. 一.学习流程: 创建ASP.NET ...
- 跟着小甲鱼学python怎么样_跟着小甲鱼的python视频学习,小白能够接受吗?
查看: 3709|回复: 14 跟着小甲鱼的python视频学习,小白能够接受吗? 电梯直达 发表于 2018-4-29 16:57:27 | 只看该作者 |倒序浏览 |阅读模式 马上注册,结交更多好 ...
- 智能手机Web开发笔记
智能手机版(简称M版)前端开发终于告一段落,第一次做移动端开发,没有想象中那么难搞,但是期间也遇到了各种这样那样的问题,虽然从小日记都不是自己写的,但是开发笔记还是要自己写的,不敢说让别人学习,只是仅 ...
- 【unity 保卫星城】--- 开发笔记07(追踪导弹武器)
[unity 保卫星城]--- 开发笔记 ~~ 战机武器库 ~~ 3.追踪导弹 ~~ 战机武器库 ~~ 3.追踪导弹 参考大佬的博客:https://blog.csdn.net/sdhexu/arti ...
- 微信小程序实例——天气预报开发笔记(进行中...)
★ 背景 [提示]:正在补充更新中- 首先,附上一张效果图. 之前就有关注过小程序的发展,感觉可以抽一点的时间来学习一下,通过官方文档以及提供的示例 Demo,发现兴趣挺高,不失为一个可以扩展自身技能 ...
- 哪里学php开发,哪里学web开发
在开始学习Web开发时,我建议做的第一件事就是确定明确的最终目标,并牢记其中. 也许你想改变职业生涯.也许你对应用程序有一个邪恶的想法.或许你只是想学习乐趣. 无论您的目标是什么,了解您为什么这样做都 ...
最新文章
- 基于Idea从零搭建一个最简单的vue项目
- ylbtech-LanguageSamples-PythonSample
- python画柱状图和折线图-Python读取Excel表格,并同时画折线图和柱状图的方法
- 人工智能时代的数据中心该怎么建?腾讯给出了自己的答案
- qunee for html5 api,Qunee for HTML5
- 做了6年的Java,docker端口映射无法外部访问
- qt如何创建桌面快捷方式_如何用Qt Python创建简单的桌面条形码应用
- Spring和Mybatis整合
- 【jquery】find() 方法,filter()方法和children()方法
- 正确使用招呼语、称呼语_5
- 华为一则面试题登上热搜;大众点评会员因点赞过多被处罚;Linux Kernel 5.12 发布|极客头条...
- Hibernate---简介
- 让工作效率起飞的11个神奇网站~~
- Hadoop权威指南(第三版)笔记——MapReduce
- iphone6s 10.2系统越狱及遇到的问题解决方案
- 节目源php代理_【斗鱼直播源】浏览器抓取真实直播源地址(纯前端JS PHP解析源码)...
- 手把手教你用psp手动制作背景透明的图片
- 分享个网站首页弹窗代码
- linux怎么让cpu不自动降频,Win10 CPU自动降频怎么办?Win10下让CPU不降频设置方法
- eclipse配置python环境后啷个写java类_eclipse+java+python的环境配置
热门文章
- 自学了半个月感觉一点也没学会Python,Python真的有这么难学吗
- 锂电池的六个主要参数
- NPDP产品经理小知识-创意工具(Scamper)
- python如何启动excel_如何用python打开excel
- Objective-C中强项和弱项之间的差异
- java 遍历map key_java 遍历Map的四种方式
- java 遍历map并比较值_Java遍历Map,List的不同方法,并比较其性能
- java遍历map的几种方式
- 阿里王坚与AWS首席科学家对话实录!
- 基于javaweb仿京东商城管理系统的设计与实现(含论文和程序源码及数据库文件)