在本实验中,你将学习如何使用 HTML <span> 标签来创建内联文本样式,并增强网页内容的视觉呈现。本实验的重点是理解 span 标签的用途、创建基本的 HTML 文档结构,以及为特定文本片段应用自定义的内联样式。
通过一个逐步演进的实践示例,你将探索如何使用 span 标签来定位和样式化小部分文本,而不会破坏文档的流式布局。在本实验结束时,你将能够使用 HTML span 元素应用自定义文本颜色、背景以及其他内联样式技术,从而在你的网页中提供更具动态性和视觉吸引力的文本格式。我们将在此实验中逐步构建一个 HTML 文件,逐步添加更多功能和样式。
Skills Graph
%%%%{init: {'theme':'neutral'}}%%%%
flowchart RL
html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"])
html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"])
html(("`HTML`")) -.-> html/LayoutandSectioningGroup(["`Layout and Sectioning`"])
html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"])
html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`")
html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`")
html/TextContentandFormattingGroup -.-> html/text_dir("`Text Direction`")
html/LayoutandSectioningGroup -.-> html/doc_flow("`Document Flow Understanding`")
html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`")
subgraph Lab Skills
html/basic_elems -.-> lab-451038{{"`使用 HTML 中的 span 标签创建内联文本样式`"}}
html/text_head -.-> lab-451038{{"`使用 HTML 中的 span 标签创建内联文本样式`"}}
html/text_dir -.-> lab-451038{{"`使用 HTML 中的 span 标签创建内联文本样式`"}}
html/doc_flow -.-> lab-451038{{"`使用 HTML 中的 span 标签创建内联文本样式`"}}
html/inter_elems -.-> lab-451038{{"`使用 HTML 中的 span 标签创建内联文本样式`"}}
end
让我们创建一个简单的 HTML 文件来演示 <span> 标签的使用。打开 WebIDE,在 ~/project 目录中创建一个名为 styling-example.html 的新文件。这个文件将成为本实验后续内容的画布。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Span Tag Styling</title>
</head>
<body>
<p>This is a normal line of text.</p>
<p>This line contains a <span>special</span> word.</p>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Span Tag Styling</title>
</head>
<body>
<p>This is a normal line of text.</p>
<p>
This line contains a <span style="font-weight: bold;">special</span> word.
</p>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Span Tag Styling</title>
</head>
<body>
<p>This is a normal line of text.</p>
<p>
This line contains a
<span
style="font-weight: bold; font-style: italic; text-decoration: underline;"
>special</span
>
word.
</p>
</body>
</html>
现在让我们改变文本的颜色及其背景。在这一步中,你将学习如何在 <span> 标签的 style 属性中使用 color 和 background-color CSS 属性。
打开 styling-example.html 并再次修改 <span> 标签:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Span Tag Styling</title>
</head>
<body>
<p>This is a normal line of text.</p>
<p>
This line contains a
<span
style="font-weight: bold; font-style: italic; text-decoration: underline; color: blue; background-color: lightyellow;"
>special</span
>
word.
</p>
</body>
</html>
We use cookies for a number of reasons, such as keeping the website reliable and secure, to improve your experience on our website and to see how you interact with it. By accepting, you agree to our use of such cookies. Privacy Policy