这节课学习——网页中对文本修饰的常用标签看百度新闻首页,左侧新闻列表中的文章标题,有的标题加粗,这样文本加粗效果,除了使用前面学到的标题标签实现之外,还可以使用 b 标签 和 strong 标签来实现,它们的语法格式都遵循双标签的语法。
b 是 bold 的缩写 表示粗体,标签的语法是: 文本, 标签里面放置待修饰的文本。strong 标签的语法是:文本 里面放置待修饰的文本。
打开编辑器,新建一个 bold.html 页面,补全基本代码,在 body里面书写三个标签 首先写一个字母b,配合tab自动补全双标签。 再输入单词 strong, 配合tab键补全双标签, 分别向 b 和 strong 标签内部, 添加文本, 这是b标签,这是 strong 标签。 最后再书写一个p标签,写入 这是p标签。 保存文件。
用浏览器打开页, b 标签和 strong 标签里的文本都变粗了b 和 strong 标签都可以实现文本加粗,有什么区别, b标签仅仅是为了加粗显示文本, strong标签语义化更强, 表示该文本比较重要, 提醒读者注意, 盲人朋友使用阅读设备阅读网页内容时, strong会重读, b不会。
这是一个新闻热点的页面,能够迅速识别出,新闻来源,光明网三个字, 因为它倾斜了。
文本倾斜效果使用 i 标签和 em 标签来实现 i 标签是 italic [ɪˈtælɪk] 的缩写 表示倾斜 em是emphasize [ˈemfəsaɪz] 的缩写 表示强调,它们都是双标签。i 标签的语法是: 文本标签里面放置待修饰的文本。em 标签的语法是: 文本 标签里面放置待修饰的文本。
回到编辑器, 新建 italic.html 页面,补全基本代码, 在body里面书写一个字母 i配合tab键补全代码, 同时输入em, 配合tab键自动补全代码, 分别向两个标签内添加文本。 我倾斜了, 光明网。
用浏览器打开页面 文本倾斜的效果实现了
i 和 em 标签都可以实现文本倾斜 ,但 i 标签仅仅为了让字体显示斜体, 没有强调的语义, em 标签不仅能让字体显示斜体,还可以加强语气,它可以让百度等搜索引擎的爬虫爬取我们的页面时,特别收录 em 中的文本,以便别人从百度中搜索em里包含的关键字时,让我们的页面优先曝光。再看一个页面案例, 这里提到猪肉价格有所下降,在图片下方,猪肉的原价格被添加了一条删除线,这样的效果该如何实现呢?
删除线效果应用 s 和 del 标签来实现 s 是 strike [straɪk] 的缩写 del 是 delete [dɪˈliːt] 的缩写 都表示删除的意思 这两个标签都是双标签s 标签的语法是:<s>文本</s>标签里面放置待修饰的文本。del 标签的语法是: 文本 标签里面放置待修饰的文本。
回到编辑器,新建 delete.html 页面,补全基本代码,在body里面书写两个标签 s 和del,在相应的标签里面放置文本,这是 s 标签,这是 del 标签。
用浏览器打开页面,文本删除线的效果实现了。
s 和 del 标签都可以实现删除线效果,HTML5已经不支持 s 标签了,建议使用 del 。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。