文章目录
HTML 计算机代码元素
HTML 包含多个用于定义用户输入和计算机代码的元素。
HTML <kbd> 用于键盘输入
HTML <kbd> 元素用于定义键盘输入。其中的内容以浏览器的默认等宽字体显示。
示例
在文档中将一些文本定义为键盘输入：
<p>按 <kbd>Ctrl + S 保存文档</kbd></p>
结果：
按 Ctrl + S 保存文档
HTML <samp> 用于程序输出
HTML <samp> 元素用于定义计算机程序的示例输出。其中的内容以浏览器的默认等宽字体显示。
示例
将一些文本定义为文档中计算机程序的示例输出：
<p>来自我的计算机的消息：</p>
<p><samp>文件未找到。<br>按 F1 继续</samp></p>
结果：
来自我的计算机的消息：
HTML <code> 用于计算机代码
HTML <code> 元素用于定义一段计算机代码。其中的内容以浏览器的默认等宽字体显示。
示例
<code>
x = 5;
y = 6;
z = x + y;
</code>
结果
请注意，<code> 元素不保留多余的空格和换行符。
要解决此问题，您可以将 <code> 元素放在 <pre> 元素内：
示例
<pre>
<code>
x = 5;
y = 6;
z = x + y;
</code>
</pre>
HTML <var> 用于变量
HTML <var> 元素用于在编程或数学表达式中定义变量。 里面的内容通常以斜体显示。
示例
在文档中将一些文本定义为变量：
<p>三角形的面积为：1/2 x <var>b</var> x <var>h</var>，其中 <var>b</var> 是底边，<var>h</var> 是垂直高度。</p>
HTML 语义元素
语义元素 = 具有含义的元素。
什么是语义元素？
语义元素清楚地向浏览器和开发人员描述了其含义。
非语义元素示例：<div> 和 <span> - 不提供任何有关其内容的信息。
语义元素示例：<form>、<table> 和 <article> - 清楚地定义其内容。
许多网站包含以下 HTML 代码：<div id="nav"> <div class="header"> <div id="footer"> 以指示导航、页眉和页脚。
HTML 中有一些语义元素可用于定义网页的不同部分：
<article><aside><details><figcaption><figure><footer><header><main><mark><nav><section><summary><time>
HTML <section> 元素
<section> 元素定义文档中的部分。
根据 W3C 的 HTML 文档：“部分是内容的主题分组，通常带有标题。”
<section> 元素的使用示例：
- 章节
- 简介
- 新闻项目
- 联系信息
网页通常可以分为简介、内容和联系信息部分。
示例
文档中的两个部分：
<section>
<h1>WWF</h1>
<p>世界自然基金会 (WWF) 是一个致力于环境保护、研究和恢复问题的国际组织，原名世界野生动物基金会。WWF 成立于 1961 年。</p>
</section>
<section>
<h1>WWF 的熊猫标志</h1>
<p>熊猫已成为 WWF 的标志。WWF 著名的熊猫标志源自一只名叫 Chi Chi 的熊猫，它在 WWF 成立的同一年从北京动物园转移到伦敦动物园。</p>
</section>
HTML <article> 元素
<article> 元素指定独立的、自成体系的内容。
一篇文章应该本身有意义，并且应该能够独立于网站的其他部分进行分发。
<article> 元素的使用示例：
- 论坛帖子
- 博客帖子
- 用户评论
- 产品卡片
- 报纸文章
示例
三篇具有独立、自包含内容的文章：
<article>
<h2>Google Chrome</h2>
<p>Google Chrome 是 Google 开发的一款网络浏览器，于 2008 年发布。Chrome 是当今全球最受欢迎的网络浏览器！</p>
</article>
<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox 是 Mozilla 开发的一款开源网络浏览器。自 2018 年 1 月以来，Firefox 一直是第二受欢迎的网络浏览器。</p>
</article>
<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge 是 Microsoft 开发的一款网络浏览器，于 2015 年发布。Microsoft Edge 取代了 Internet Explorer。</p>
</article>
示例 2
使用 CSS 为 <article> 元素设置样式：
<html>
<head>
<style>
.all-browsers {
margin: 0;
padding: 5px;
background-color: lightgray;
}
.all-browsers > h1, .browser {
margin: 10px;
padding: 5px;
}
.browser {
background: white;
}
.browser > h2, p {
margin: 4px;
font-size: 90%;
}
</style>
</head>
<body>
<article class="all-browsers">
<h1>最受欢迎的浏览器</h1>
<article class="browser">
<h2>Google Chrome</h2>
<p>Google Chrome 是 Google 开发的一款网络浏览器，于 2008 年发布。Chrome 是当今全球最受欢迎的网络浏览器！</p>
</article>
<article class="browser">
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox 是 Mozilla 开发的一款开源网络浏览器。自 2018 年 1 月以来，Firefox 一直是第二受欢迎的网络浏览器。</p>
</article>
<article class="browser">
<h2>Microsoft Edge</h2>
<p>Microsoft Edge 是 Microsoft 开发的一款网络浏览器，于 2015 年发布。Microsoft Edge 取代了 Internet Explorer。</p>
</article>
</article>
</body>
</html>
HTML <header> 元素
<header> 元素表示介绍性内容或一组导航链接的容器。
<header> 元素通常包含：
- 一个或多个标题元素 (
<h1>-<h6>) - 徽标或图标
- 作者信息
注意：一个 HTML 文档中可以有多个<header>元素。但是，<header>不能放在<footer>、<address>或其他<header>元素中。
示例
<article> 的标题：
<article>
<header>
<h1>WWF 做什么？</h1>
<p>WWF 的使命：</p>
</header>
<p>WWF 的使命是阻止地球自然环境的恶化，
并创造人类与自然和谐相处的未来。</p>
</article>
HTML <footer> 元素
<footer> 元素定义文档或部分的页脚。
<footer> 元素通常包含：
- 作者信息
- 版权信息
- 信息
- 联系信息
- 站点地图
- 返回顶部链接
- 相关文档
一个文档中可以有多个<footer>元素。
示例
文档中的页脚部分：
<footer>
<p>作者：Hege Refsnes</p>
<p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>
HTML <nav> 元素
<nav> 元素定义一组导航链接。
请注意，并非文档的所有链接都应位于 <nav> 元素内。<nav> 元素仅适用于主要的导航链接块。
浏览器（例如残障用户的屏幕阅读器）可以使用此元素来确定是否省略此内容的初始呈现。
示例
一组导航链接：
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
HTML <aside> 元素
<aside> 元素定义了除其所在内容（如侧边栏）之外的一些内容。
<aside> 内容应与周围内容间接相关。
示例
显示除其所在内容之外的一些内容：
<p>今年夏天，我和我的家人参观了 Epcot 中心。天气很好，Epcot 很棒！我和家人一起度过了一个美好的夏天！</p>
<aside>
<h4>Epcot 中心</h4>
<p>Epcot 是华特迪士尼世界度假区的一个主题公园，拥有令人兴奋的景点、国际展馆、屡获殊荣的烟花和季节性特别活动。</p>
</aside>
示例 2
使用 CSS 为 <aside> 元素设置样式：
<html>
<head>
<style>
aside {
width: 30%;
padding-left: 15px;
margin-left: 15px;
float: right;
font-style: italic;
background-color: lightgray;
}
</style>
</head>
<body>
<p>我和家人今年夏天参观了 Epcot 中心。天气很好，Epcot 很棒！我和家人一起度过了一个美好的夏天！</p>
<aside>
<p>艾波卡特中心是华特迪士尼世界度假区的一个主题公园，拥有令人兴奋的景点、国际展馆、屡获殊荣的烟花和季节性特别活动。</p>
</aside>
<p>今年夏天，我和家人参观了艾波卡特中心。天气很好，艾波卡特很棒！我和家人一起度过了一个美好的夏天！</p>
<p>今年夏天，我和家人参观了艾波卡特中心。天气很好，艾波卡特很棒！我和家人一起度过了一个美好的夏天！</p>
</body>
</html>
HTML <figure> 和 <figcaption> 元素
<figure> 标签指定独立内容，如插图、图表、照片、代码列表等。
<figcaption> 标签定义 <figure> 元素的标题。 <figcaption> 元素可以作为 <figure> 元素的第一个或最后一个子元素。
<img> 元素定义实际图像/插图。
示例
<figure>
<img src="baidu.jpg" alt="baidu">
<figcaption>baidu</figcaption>
</figure>
总结
本文介绍了HTML 计算机代码元素和语义元素的使用，如有问题欢迎私信和评论
227
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
