前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布

文本

原创
作者头像
用户9132825
修改2021-11-01 09:51:15
4850
修改2021-11-01 09:51:15
举报
文章被收录于专栏:HTML&css读书笔记

第二章:文本(book)

知识点:

1. \<ins>\</ins>:(HTML)==下划线==,用来显示已经插入文档中的内容。

代码语言:txt
复制
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

</body>
</html>

2.\<del>\</del>:删除线

代码语言:txt
复制
RUNOOB.COM
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>

</body>
</html>

3.\<s>\</s>:删除线

代码语言:txt
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    迷你世界<s>不好玩</s>
</body>
</html>

4. \<i>\</i>:==斜体==。

5. \<cite>\</cite>:==斜体==(标签定义作品(比如书籍、歌曲、电影、电视节目、绘画、雕塑等等)的标题。)

6. \<b>\</b>:对文字进行==加粗==处理;同时提出疑问它与==<strong></strong>==的区别。

7. \<sub>\</sub>:==下标==,比
img
img
点击并拖拽以移动
点击并拖拽以移动
如,中的2。

代码语言:txt
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        CO<sub>2</sub>
    </div>
</body>
</html>

8. \<sup>\</sup>: ==上标==,比如
img
img
点击并拖拽以移动
点击并拖拽以移动
中的2次幂。

代码语言:txt
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        2<sup>2</sup>
    </div>
</body>
</html>

9. \<address> \</address>:元素中的文本通常呈现为==斜体==。大多数浏览器会在 address 元素前后添加折行。

  • 如果 <address> 元素位于 <body> 元素内,则它表示文档联系信息。
  • 如果 <address> 元素位于 <article> 元素内,则它表示文章的联系信息。
代码语言:txt
复制
<!DOCTYPE html>
<html>
<body>

<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> 
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

</body>
</html>

10. \<hr>:==一条水平线==,注意hr,br都是不成对的。

代码语言:txt
复制
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程</title> 
</head>
<body>

<h1>HTML</h1>
<p>HTML 是用于描述 web 页面的一种语言。</p>

<hr>

<h1>CSS</h1>
<p>CSS 定义如何显示 HTML 元素。</p>

</body>
</html>

11. \<abbr>\</abbr>:==(挺重要的)==就是进行缩写,只不过就是我先要在<abbr></abbr>标签里面预设一个全称,然后,再在<abbr></abbr>中间写上缩写,当鼠标悬停在缩写的地方就会显示全称。

代码语言:txt
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        这个标语<abbr title="永远滴神">yyds</abbr>是<abbr title="bilibili">B站</abbr>的一个梗
    </div>
</body>
</html>

12. \<q>\</q>:标签定义一个短的引用。<b>==浏览器经常会在这种引用的周围插入引号。==</b>

代码语言:txt
复制
<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>WWF's goal is to: 
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>

</body>
</html>

13. \<em>\</em>:斜体

二、示例文本(看着玩吧)

代码语言:txt
复制
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>MC<abbr title="永远的神">yyds</abbr></h1>
    正如Jane McGonigal所提到的,人之所以会沉迷游戏并非是游戏给予了我们放松,<i>恰恰相反</i>,大多数让人沉迷的游戏实际上是给了人一个更有效的工作。当人们开始接受游戏这样一种通过努力克服障碍的方式得到快感之后,<cite>看电视等被动式的娱乐效果实际上对比起来就微不足道了</cite>。就我所见到的,生活中持续不断地能主动地获得这种“自豪”感的方式中,游戏是门槛最低的。无论是围棋象棋跳舞唱歌,<q>都是相当需要天赋而且必须经历很长一段时间的磨练才能开始收获这种自豪感。</q>然而游戏不同,游戏的设计者会努力地调整游戏,让你即便不<em>精通</em>于此也能享受到你并不擅长的技能所带来的快乐。例如moba游戏中刚开始当你不精通技术的时候会先对战电脑,之后也会根据你的水平匹配对手和队友。

</body>
</html>

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 第二章:文本(book)
    • 知识点:
      • 1. \<ins>\</ins>:(HTML)==下划线==,用来显示已经插入文档中的内容。
      • 2.\<del>\</del>:删除线
      • 3.\<s>\</s>:删除线
      • 4. \<i>\</i>:==斜体==。
      • 5. \<cite>\</cite>:==斜体==(标签定义作品(比如书籍、歌曲、电影、电视节目、绘画、雕塑等等)的标题。)
      • 6. \<b>\</b>:对文字进行==加粗==处理;同时提出疑问它与==<strong></strong>==的区别。
      • 7. \<sub>\</sub>:==下标==,比[img][点击并拖拽以移动]如,中的2。
      • 8. \<sup>\</sup>: ==上标==,比如[img][点击并拖拽以移动]中的2次幂。
      • 9. \<address> \</address>:元素中的文本通常呈现为==斜体==。大多数浏览器会在 address 元素前后添加折行。
      • 10. \<hr>:==一条水平线==,注意hr,br都是不成对的。
      • 11. \<abbr>\</abbr>:==(挺重要的)==就是进行缩写,只不过就是我先要在<abbr></abbr>标签里面预设一个全称,然后,再在<abbr></abbr>中间写上缩写,当鼠标悬停在缩写的地方就会显示全称。
      • 12. \<q>\</q>:标签定义一个短的引用。<b>==浏览器经常会在这种引用的周围插入引号。==</b>
      • 13. \<em>\</em>:斜体
    • 二、示例文本(看着玩吧)
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档