-
Notifications
You must be signed in to change notification settings - Fork 0
/
advanced_text.html
93 lines (79 loc) · 5.12 KB
/
advanced_text.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>高阶文字排版学习</title>
<link rel="stylesheet" href="">
</head>
<body>
<h1>高阶文字排版练习</h1>
<h2>描述列表</h2>
<dl>
<dt><dl> description list</dt>
<dd>该元素的语义为描述列表, 其子元素又有<dt>, <dd></dd>
<dt><dt> description term</dt>
<dd>描述列表中的每个描述对象的主体词汇使用这个元素闭合</dd>
<dt><dd> description description </dt>
<dd>描述列表的描述部分，他会在描述术语和描述列表描述部分产生缩进</dd>
</dl>
<h2>块引用</h2>
<p>如果一个块级内容（一个段落、多个段落、列表等）从其他地方被引用，你就应该吧<blockquote> 元素包裹起来表示， 并且在cite 属性里用URL来指向引用的资源。</p>
<p>例如上面的一大段话都是引用的某个网站上的内容，正确的显示方法应该是下面的样子</p>
<p><blockquote cite="https://developer.mozilla.org/zh-CN/docs/learn/HTML/Introduction_to_HTML/Advanced_text_formatting" style="color:blue">如果一个块级内容（一个段落、多个段落、列表等）从其他地方被引用，你就应该吧<blockquote> 元素包裹起来表示， 并且在cite 属性里用URL来指向引用的资源。</blockquote></p>
<h3>行内引用</h3>
<p>行内元素用同样的方式工作， 除了使用<q>元素。 </p>
<p>例如把上一段话变为行内引用：<q cite="https://baidu.com">行内元素用同样的方式工作， 除了使用<q>元素。 </q><br>其实也就是加了个双引号“”， 所以用于不需要分段的短引用</p>
<h2>blackquote</h2>
<p>您好！ 欢迎访问我对引用的理解！<a href="https:baidu.com" a><cite>Chen1996-1</cite></a> say
</p>
<blockquote>
<p>
<dl>
<dt>块引用</dt>
<dd>blockquote， 内有属性cite 字体变斜, blockquote元素的作用就是把一个段落、几个段落这种块级元素，缩进然后，有那种被大段引用的感觉, 嗯， 我的浏览器好像有毛病，显示不出来效果</dd>
</dl>
</p>
</blockquote>
<h2>缩略语</h2>
<dt>缩略语</dt>
<dd>这是除过引用之外另一个常见的元素<abbr>——它常被用来包裹一个缩略语或缩写， 并且提供缩写的解释（包含在title属性中）</dd>
<p>例如 <abbr title="超文本标记语言（Hyper text Markup Language">HTML</abbr> 字体下方有虚线，鼠标点取之后有提示框， 它不同于其他有title 属性的元素，这个abbr 属性具有缩略语的语义</p>
<h2>标记联系方式</h2>
<p><abbr>HTML</abbr>有个用于标记联系方式的元素——<address>. 它仅仅包含你的联系方式，如：</p>
<address>
<p>practice by Chen1996-1</p>
</address>
<h2>上标和下标</h2>
<p>当你使用日期、化学方程式、 和数学方程式时会偶尔使用上下标。 <sup> 和 <sub> 元素可以解决这样的问题</p>
<dt><sup> 和 <sub></dt>
<dd><p>咖啡因的化学方程式是 C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub></p>
<p>如果x<sup>2</sup>的值为9 那么x=3</p></dd>
<h2>展示计算机代码</h2>
<p>有大量的HTML 元素可以来标记计算机代码:
<ul>
<li><code>: 用于标记计算机通用代码</li>
<li><pre>: 用于保留空白字符（通常用于代码块）——如果您在文本中使用缩进或多余的空白， 浏览器将忽略它， 您将不会在呈现的页面上看到他 但是如果您将文本包含在<pre></pre> 标签中， 那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。</li>
<li><var>:用于标记具体变量名</li>
<li><kbd>:用与标记输入电脑的键盘（或其他类型）输入。</li>
<li><samp>:用于标记计算机程序的输出</li>
</ul>
</p>
<p>示例代码：<br>
<pre><code>const para = document.querySelector('p');
para.onclick = function() {
alert('噢，噢，噢，别点我了。');
}</code></pre>
<p>请不要使用 <code><font></code> 、 <code><center></code> 等表象元素。</p>
<p>在上述的 JavaScript 示例中，<var>para</var> 表示一个段落元素。</p>
<p>按 <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <kbd>A</kbd> 选择全部内容。</p>
<pre>$ <kbd>ping mozilla.org</kbd>
<samp>PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=40 time=158.233 ms</samp></pre>
</p>
<h2>标记时间和日期</h2>
<p>HTML 还支持将时间和日期标记为可提供机器识别的格式的<time> 元素。例如：</p>
<pre><code><time datetime="2020-02-23">2020年2月23日<time></code></pre>
<p>为什么需要这么做？因为世界上有许多中写日期的格式。但是这些不同的格式不容易被电脑识别到——假如你想自动抓取页面上所有事件的日期并将他们插入到日历中，<time>元素允许你附上清晰的、可被机器识别的时间、日期来实现这种需求。</p>
</body>
</html>