文章目录
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 计算机代码元素和语义元素的使用,如有问题欢迎私信和评论