aboutsummaryrefslogtreecommitdiff
path: root/files/zh-cn/web/html/inline_elements
diff options
context:
space:
mode:
authorPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
committerPeter Bengtsson <mail@peterbe.com>2020-12-08 14:40:17 -0500
commit33058f2b292b3a581333bdfb21b8f671898c5060 (patch)
tree51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/web/html/inline_elements
parent8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff)
downloadtranslated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2
translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip
initial commit
Diffstat (limited to 'files/zh-cn/web/html/inline_elements')
-rw-r--r--files/zh-cn/web/html/inline_elements/index.html53
1 files changed, 53 insertions, 0 deletions
diff --git a/files/zh-cn/web/html/inline_elements/index.html b/files/zh-cn/web/html/inline_elements/index.html
new file mode 100644
index 0000000000..928fd1a6f3
--- /dev/null
+++ b/files/zh-cn/web/html/inline_elements/index.html
@@ -0,0 +1,53 @@
+---
+title: 行内元素
+slug: Web/HTML/Inline_elements
+tags:
+ - HTML
+ - 'HTML:元素参考'
+ - HTML:元素参考
+ - 初学者
+translation_of: Web/HTML/Inline_elements
+---
+<h2 id="Summary" name="Summary">摘要</h2>
+
+<p>HTML (超文本标记语言) 元素大多数都是行内元素或<a href="/zh-CN/docs/Web/HTML/Block-level_elements">块级元素</a>。一个行内元素只占据它对应标签的边框所包含的空间。下面这个例子说明了行内元素的作用范围:</p>
+
+<h2 id="Inline_example" name="Inline_example">行内元素示例</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html notranslate">&lt;p&gt;This &lt;span&gt;span&lt;/span&gt; is an inline element; its background has been colored to display both the beginning and end of the inline element's influence&lt;/p&gt;</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush: css notranslate">span { background-color: #8ABB55; }
+</pre>
+
+<p>{{ EmbedLiveSample('Inline_example') }}</p>
+
+<h2 id="行内元素与块级元素对比">行内元素与块级元素对比</h2>
+
+<dl>
+ <dt>内容</dt>
+ <dd>一般情况下,行内元素只能包含数据和其他行内元素。</dd>
+ <dd>而块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。</dd>
+ <dt>格式</dt>
+ <dd>默认情况下,行内元素不会以新行开始,而块级元素会新起一行。</dd>
+</dl>
+
+<h2 id="Elements" name="Elements">行内元素列表</h2>
+
+<p>下面的元素都是行内元素:</p>
+
+<ul id="inline-elements">
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/b" title="zh-CN/HTML/Element/b">b</a>, <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/big" title="zh-CN/HTML/Element/big">big</a>, <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/i">i</a>, <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/small" title="zh-CN/HTML/Element/small">small</a>, <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/tt" title="zh-CN/HTML/Element/tt">tt</a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/abbr" title="zh-CN/HTML/Element/abbr">abbr</a>, <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/acronym" title="zh-CN/HTML/Element/acronym">acronym</a>, <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/cite" title="zh-CN/HTML/Element/cite">cite</a>, <a href="/zh-CN/docs/Web/HTML/Element/code" title="zh-CN/HTML/Element/code">code</a>, <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/dfn" title="zh-CN/HTML/Element/dfn">dfn</a>, <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/em" title="zh-CN/HTML/Element/em">em</a>, <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/kbd" title="zh-CN/HTML/Element/kbd">kbd</a>, <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/strong" title="zh-CN/HTML/Element/strong">strong</a>, <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/samp" title="zh-CN/HTML/Element/samp">samp</a>, <a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/var" title="zh-CN/HTML/Element/var">var</a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/a" title="zh-CN/HTML/Element/a">a</a>, <a href="/zh-CN/docs/Web/HTML/Element/bdo" title="zh-CN/HTML/Element/bdo">bdo</a>, <a href="/zh-CN/docs/Web/HTML/Element/br" title="zh-CN/HTML/Element/br">br</a>, <a href="/zh-CN/docs/Web/HTML/Element/Img" title="zh-CN/HTML/Element/Img">img</a>, <a href="/zh-CN/docs/Web/HTML/Element/map" title="zh-CN/HTML/Element/map">map</a>, <a href="/zh-CN/docs/Web/HTML/Element/object" title="zh-CN/HTML/Element/object">object</a>, <a href="/zh-CN/docs/Web/HTML/Element/q" title="zh-CN/HTML/Element/q">q</a>, <a href="/zh-CN/docs/Web/HTML/Element/Script" title="zh-CN/HTML/Element/Script">script</a>, <a href="/zh-CN/docs/Web/HTML/Element/span" title="zh-CN/HTML/Element/span">span</a>, <a href="/zh-CN/docs/Web/HTML/Element/sub" title="zh-CN/HTML/Element/sub">sub</a>, <a href="/zh-CN/docs/Web/HTML/Element/sup" title="zh-CN/HTML/Element/sup">sup</a></li>
+ <li><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button" title="zh-CN/HTML/Element/button">button</a>, <a href="/zh-CN/docs/Web/HTML/Element/Input" title="zh-CN/HTML/Element/Input">input</a>, <a href="/zh-CN/docs/Web/HTML/Element/label" title="zh-CN/HTML/Element/label">label</a>, <a href="/zh-CN/docs/Web/HTML/Element/select" title="zh-CN/HTML/Element/select">select</a>, <a href="/zh-CN/docs/Web/HTML/Element/textarea" title="zh-CN/HTML/Element/textarea">textarea</a></li>
+</ul>
+
+<h2 id="See_also" name="See_also">另请参阅</h2>
+
+<ul>
+ <li><a href="/zh-CN/docs/Web/HTML/Block-level_elements" title="zh-CN/HTML/Block-level_elements">块级元素</a></li>
+</ul>