HTML & CSS设计与构建网站（第二章）

这个名字真的有十个字q
134 阅读2分钟

第二章：文本[(book)](HTML & CSS设计与构建网站 (豆瓣) (douban.com))

知识点：

  1. <ins></ins>：（HTML）==下划线==，用来显示已经插入文档中的内容。

<!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>

  1. <del></del>：删除线

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>

  1. <s></s>:删除线

<!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>

  1. <i></i>:==斜体==。

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

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

  4. <sub></sub>:==下标==，比img如,中的2。

<!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>

  1. <sup></sup>: ==上标==，比如img中的2次幂。

<!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>

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

    • 如果 元素位于 元素内，则它表示文档联系信息。

    • 如果 元素位于 元素内，则它表示文章的联系信息。

<!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>

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

<!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>

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

<!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>:标签定义一个短的引用。==浏览器经常会在这种引用的周围插入引号。==

<!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>
  1. <em></em>:斜体

二、示例文本（看着玩吧）

<!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>
avatar
文章
阅读
粉丝