HTML学习笔记之计算机代码格式、语义元素、代码约定、字符实体、符号、URL（十）

于 2024-04-24 09:17:28 发布
阅读量472 收藏 3
点赞数 4
分类专栏： HTML 文章标签： html 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wz_1992/article/details/138074787
版权

详细资料来源地址：W3School

10、计算机代码元素

有时候我们需要展示带格式（换行、空格等）的计算机代码，我们就需要使用到计算机代码

10.1 <kbd>：定义键盘文本

  • HTML <kbd> 元素定义键盘输入
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算机代码格式</title>
</head>
<body>
<h4>键盘输入kbd</h4>
    <p>普通：File | Open</p>
    <p>使用kdb: <kbd>File | Open</kbd></p>
</body>
</html>

运行效果：
在这里插入图片描述

10.2 <samp> ：定义计算机代码示例

<h4>输入示例samp</h4>
<p>普通：</p>
<p>demo.example.com login: Apr 12 09:10:17
    Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189</p>
<p>smap</p>
<p><samp>demo.example.com login: Apr 12 09:10:17
    Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189</samp></p>

运行效果：
在这里插入图片描述

10.3 <code> ：定义计算机代码文本

  • 不保留多余的空格和折行
<h4>编程代码示例code</h4>
<p>普通：</p>
<p>var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
}</p>
<p>code:</p>
<code>var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
}</code>

运行示例：
在这里插入图片描述

10.4 <pre>:定义预格式化文本

  • 保留多余的空格和折行
<h4>编程代码示例pre(保留多余的空格和折行)</h4>
<code>
    <pre>
        var person = {
            firstName:"Bill",
            lastName:"Gates",
            age:50,
            eyeColor:"blue"
        }
    </pre>
</code>

运行效果：
在这里插入图片描述

10.5 :定义变量

<h4> 变量格式化var</h4>
<p>爱因斯坦公式：</p>
<p>普通：</p>
<p>E=mc<sup>2</sup></p>
<p>var:</p>
<p><var>E</var>=<var>m</var><var>c</var><sup>2</sup></p>

运行效果：
在这里插入图片描述

11、语义元素

语义元素清楚地向浏览器和开发者描述其意义。

非语义元素的例子：<div> 和 <span> - 无法提供关于其内容的信息。

语义元素的例子：<form> 、<table>以及 <img> - 清晰地定义其内容。

11.1 HTML5 中新的语义元素

HTML5 提供了定义页面不同部分的新语义元素：

  • <article>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

11.2 HTML5 语义元素

在这里插入图片描述

11.2.1 <section> : 定义文档中的节

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语义元素</title>
</head>

<body>
    <section>
        <h1>2024.04.22</h1>
        <p>又是学习新语言的一天</p>
    </section>
    <section>
        <h1>2024.04.23</h1>
        <p>将来回忆起这一切是否会觉得恍若昨日</p>
    </section>
</body>

</html>

运行效果：
在这里插入图片描述

11.2.1 <article> ： 规定独立的自包含内容。

文档有其自身的意义，并且可以独立于网站其他内容进行阅读。

<article> 元素的应用场景：

  • 论坛
  • 博客
  • 新闻
   <h4>独立的自包含内容article的使用</h4>
    <article>
        <h1>今年五一您准备去哪儿</h1>
        <p>自疫情过后，人们旅游欲望高涨，每逢假期旅游城市人满为患</p>
    </article>

运行效果：

在这里插入图片描述

11.2.3 <header> ：文档或节规定页眉

  • <header> 元素为文档或节规定页眉。

*<header> 元素应该被用作介绍性内容的容器。

  • 一个文档中可以有多个 <header> 元素。
 <article>
        <header>
            <h1>和谐共生｜以自然之道 养万物之生</h1>
        </header>
        <p>大江大河间，休渔禁渔养护鱼米之乡；云南雨林中，线上线下护航一路“象”北；数十年坚守，造林护林涵养水土。每一次改变，都拨动人与自然和谐共生的音符，奏响共建地球生态的进行曲。</p>
    </article>

运行效果：
在这里插入图片描述

11.2.4 <footer> ：文档或节规定页脚。

  • <footer> 元素应该提供有关其包含元素的信息。

  • 页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。

  • 您可以在一个文档中使用多个<footer> 元素。

 <h4>footer元素使用：</h4>
    <footer>
        <p>Posted by: Hege Refsnes</p>
        <p>Contact information: <a href="mailto:someone@example.com">
       someone@example.com</a>.</p>
     </footer>

运行效果：
在这里插入图片描述

11.2.5 <nav>： 导航链接集合

  • <nav> 元素旨在定义大型的导航链接块。不过，并非文档中所有链接都应该位于 <nav> 元素中！
   <h4>导航链接集合nav元素的使用：</h4>
    <nav>
        <a href="https:www.baidu.com">百度</a>
        <a href="https://blog.csdn.net/wz_1992/article/details/137823771">Visual Studio Code 使用笔记</a>
    </nav>

运行效果：
在这里插入图片描述

11.2.6 <aside>：页面主内容之外的某些内容（比如侧栏）

  • aside 内容应该与周围内容相关。
<aside>
   <h4>Epcot Center</h4>
   <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

在这里插入图片描述

11.3 HTML5 中的语义元素

在这里插入图片描述

12、样式指南和代码约定

见文档

HTML(5) 样式指南和代码约定

13、HTML 中有用的字符实体

  • 实体名称对大小写敏感！
    在这里插入图片描述

14、HTML 符号

HTML 符号

15、HTML 统一资源定位器

在这里插入图片描述
在这里插入图片描述

附件一、计算机代码格式化完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算机代码格式</title>
</head>
<body>
<h4>键盘输入kbd</h4>
    <p>普通：File | Open</p>
    <p>使用kdb: <kbd>File | Open</kbd></p>

<h4>输入示例samp</h4>
<p>普通：</p>
<p>demo.example.com login: Apr 12 09:10:17
    Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189</p>
<p>smap</p>
<p><samp>demo.example.com login: Apr 12 09:10:17
    Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189</samp></p>

<h4>编程代码示例code(不保留多余的空格和折行)</h4>
<p>普通：</p>
<p>var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
}</p>
<p>code:</p>
<code>var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
}</code>

<h4>编程代码示例pre(保留多余的空格和折行)</h4>
<code>
    <pre>
        var person = {
            firstName:"Bill",
            lastName:"Gates",
            age:50,
            eyeColor:"blue"
        }
    </pre>
</code>

<h4> 变量格式化var</h4>
<p>爱因斯坦公式：</p>
<p>普通：</p>
<p>E=mc<sup>2</sup></p>
<p>var:</p>
<p><var>E</var>=<var>m</var><var>c</var><sup>2</sup></p>
</body>
</html>

附件二、语义元素完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语义元素</title>
</head>

<body>
    <h4>节元素section的使用</h4>
    <section>
        <h1>2024.04.22</h1>
        <p>又是学习新语言的一天</p>
    </section>
    <section>
        <h1>2024.04.23</h1>
        <p>将来回忆起这一切是否会觉得恍若昨日</p>
    </section>
    <h4>独立的自包含内容article的使用</h4>
    <article>
        <h1>今年五一您准备去哪儿</h1>
        <p>自疫情过后，人们旅游欲望高涨，每逢假期旅游城市人满为患</p>
    </article>

    <h4>header元素使用：</h4>
    <article>
        <header>
            <h1>和谐共生｜以自然之道 养万物之生</h1>
        </header>
        <p>大江大河间，休渔禁渔养护鱼米之乡；云南雨林中，线上线下护航一路“象”北；数十年坚守，造林护林涵养水土。每一次改变，都拨动人与自然和谐共生的音符，奏响共建地球生态的进行曲。</p>
    </article>
    <h4>footer元素使用：</h4>
    <footer>
        <p>Posted by: Hege Refsnes</p>
        <p>Contact information: <a href="mailto:someone@example.com">
                someone@example.com</a>.</p>
    </footer>
    <h4>导航链接集合nav元素的使用：</h4>
    <nav>
        <a href="https:www.baidu.com">百度</a>
        <a href="https://blog.csdn.net/wz_1992/article/details/137823771">Visual Studio Code 使用笔记</a>
    </nav>
    <h4>页面主内容之外的某些内容（比如侧栏）aside元素的使用：</h4>
    <aside>
        <h4>Epcot Center</h4>
        <p>The Epcot Center is a theme park in Disney World, Florida.</p>
     </aside> 

</body>

</html>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值