不二如是 发表于 2018-8-10 09:21:04

011 - 格式化大比拼 |【附'变天'彩蛋】

本帖最后由 不二如是 于 2021-6-4 17:37 编辑

上一集：010 - 引用大作战



在线视频：

https://www.bilibili.com/video/BV1QW411N762?p=12



课程思维导图


猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清



大原则

请记住本次课程的核心点：
https://xxx.ilovefishc.com/forum/201807/25/101206z4y7pfu4yszh676i.gif
语义与实现的分离

给人看的部分具有同样的效果，但是给机器看的部分即标签自身的含义（语义）是不一样的。

鱼油只要明白这一点，就抓住本节课中的标签要点了！



1、strong元素和b元素

从视觉效果上两个标签一样：
<strong>我被加粗了</strong>
<b>我也被加粗了</b>


但是对于机器来讲（爬虫，内核...）两个标签包含的内容是不一样的，strong元素包含的文本会被解析为重要文本。

b元素只是单纯的加粗文本而已。



就像同样两个胖子，一个是金正恩，一个是隔壁老王，天差地别的哦～



2、em元素和i元素

这对兄弟也是：
<em>我变斜了</em>
<i>我也变斜了</i>


em元素表示强调文本，i元素单纯的斜体。



3、浅尝CSS实现加粗和斜体

从更好的样式设置来讲，不推荐使用没有语义（i、b...）的标签实现效果。

官方建议，用CSS进行样式的设置：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>鱼C-零基础入门学习Web（Html5+Css3）</title>
    <style>
      .bold{
            font-weight: bold;
      }
      .italic{
            font-style: italic;
      }
    </style>
</head>
<body>
<p class="bold">我变粗了</p>
<p class="italic">我变斜了</p>
</body>
</html>


通过css属性设置，完成对指定标签的样式设置。



4、del元素和ins元素

del元素定义已被删除的文本。

ins元素定义更新和修正的文本。

小甲鱼老师提到的变天（彩蛋）猜测：


真相：
**** Hidden Message *****

代码：
<p>从今天起，鱼C论坛的域名从<del>bbs.fishc.com</del>变成<ins>fishc.com.cn</ins>，官网从<del>www.fishc.com</del>变成<ins>ilovefishc.com</ins></p>




5、s元素

s元素在 HTML 4.01 中已废弃，用来给文本加删除线。

HTML5 重定义了s元素，现在是被用来定义那些不正确的文本。

不应该用来定义替换的或者删除的文本。如果要定义替换的或者删除的文本，请使用 <del>标签。

代码：
<p>男人的臭屁：<s>男人就应该三妻四妾</s>这是不对滴～</p>


从样式上来看也是一条中画线，鱼油可能会新生郁闷。

没错，本应该废弃的东西，重新激活就会带来这种“多余”的感觉。

了解一下即可，u元素同理。



6、u元素

u元素在 HTML 4.01 中已废弃，用来为文本加下划线（会与超链接搞混）。

在H5中定义与常规文本风格不同的文本，像拼写错误的单词或者汉语中的专有名词。

代码：
<p><u>u元素</u>是一个鸡肋的元素。</p>





7、mark元素

mark元素用来定义带有记号的文本。

就像鱼油上学时用到的记号笔一样，有需要的内容，mark一下～

引用请像“鲨鱼”一样，一直游下去中的一句话。

代码：
<p>不知道该不该做的时候，去做。不知道怎么做的时候，去做。就像<mark>鲨鱼</mark>一样，想法要一直移动着才能活下去。</p>




8、sup元素和sub元素

sup元素用来上标，sub元素用来下标。

在数学表达式方面极其有用，代码：
<p>E = MC<sup>2</sup></p>
<p>Mg + ZnSO<sub>4</sub> = MgSO<sub>4</sub> + Zn</p>


没错下面的化学方程式，是一句著名的土味情话：




9、small元素

small元素定义小型文本（和旁注）。

代码：
<p>恭喜鱼油喜获BMW一辆</p>
<small>呵呵，认真你就输了</small>


稍微补充一点额外知识，有small元素，那么有木有big元素呢？

有！

但是被废弃了，因为需要修改字体大小请用CSS。



课后作业，完成了吗？

传送门



http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif

下一集：012 - 被安排的明明白白



如果有收获，别忘了评分{:10_281:} ：

http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif

这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_297:} ）

http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif



cjj735243954 发表于 2018-8-17 11:11:27

666

刹那疾风 发表于 2018-11-27 10:06:25

每次看完就来打卡

JustinZhu 发表于 2018-11-29 16:50:23

坎坎坷坷

GodChan 发表于 2018-12-19 22:40:55

1

chenzhiqing 发表于 2019-2-9 20:05:14

666

李小控 发表于 2019-2-15 16:51:16

辛苦了

李小控 发表于 2019-2-15 17:06:12

讲的真好，继续努力呀

Nevermorewin 发表于 2019-2-19 16:15:06

1

紫殇 发表于 2019-4-16 17:19:13

666666666

soonna 发表于 2019-4-18 13:44:18

课后作业，完成了吗？
传送门 ---> 鏈結消失了。
BTW，一直到26集都消失了。

讨债仔 发表于 2019-5-21 22:14:24

{:5_103:}

天地~玄黄 发表于 2019-7-16 17:47:07

xswl

Hyoga 发表于 2019-8-3 17:01:03

<del>我真帅</del>

药水哥 发表于 2019-8-28 23:58:55

66666666666666666

y22y1157201811 发表于 2019-9-8 20:23:02

真相探究awa

frihibe 发表于 2019-9-20 08:43:03

真相到底是什么

苏苏请认真学习 发表于 2019-9-29 15:32:03

打卡呗

lby2010 发表于 2019-12-11 18:51:58

努力加油，一定要学会1

weiter 发表于 2019-12-13 20:31:19

谢谢
页: [1] 2 3
查看完整版本: 011 - 格式化大比拼 |【附'变天'彩蛋】