StudyTonight Web 中文教程（一）

最新推荐文章于 2025-06-15 16:41:58 发布
原创 最新推荐文章于 2025-06-15 16:41:58 发布
· 689 阅读 · 17 ·
版权
License CC BY-NC-SA 4.0 / 自豪地采用谷歌翻译
文章标签：

#前端

原文：StudyTonight

协议：CC BY-NC-SA 4.0

HTML

HTML 标签 A

HTML <a>标签

原文：https://www.studytonight.com/html5-references/html-a-tag

HTML <a>标签是一个锚点，用来创建一个超链接。超链接用于将当前网页与其他网页或互联网上可用的任何其他网络资源互连。它使用href属性来指定网络资源的网址。

网络资源可以是通过网络呈现的网页、文件、图像、视频等。

默认情况下，<a>标签在浏览器中显示如下:

  • 如果链接未显示，它会带有下划线和蓝色。

  • 如果链接被访问，它会被加上下划线和紫色。

  • 如果链接是活动的，它会带有下划线和红色。

HTML <a>标签-语法和用法

<a>标签需要开始(开始)标签和结束(结束)标签。

另外，这是一个内联元素。以下是在 HTML 代码中使用锚标记的语法:

<a href="SOME-URL">
    <!-- Some content -->
</a>

虽然href属性不是强制性的，但是没有它，HTML <a>标签是没有意义的，因此我们将它作为基本语法的一部分。

HTML

下面我们有一个展示如何使用 HTML 锚标签的基本例子，提供了href属性和target属性。

HTML <a>标签属性

HTML <a>标签支持 全局属性 和 事件属性以及一些常见属性如下:

| 属性 | 描述 |
| target | 该属性用于指定链接网址的显示位置-在新浏览器选项卡中，在新浏览器窗口中，等等。可以使用该属性进行控制。 |
| href | 此属性用于指定当单击超链接时用户应该重定向到的 web 资源/文档的 URL。 |
| rel | 该属性用于指定目标文档与链接文档的关系。例如，如果目标文档有关于作者的详细信息，我们可以指定作者**，或者如果目标文档是包含有用信息的网页，我们可以指定帮助。因此，我们可以用它来指定用户应该期望从目标文档中得到什么。这是用来只是给超链接添加更多的信息**，对浏览器上的超链接视图没有效果。 |
| type | 该属性用于指定链接网址的媒体类型。 |
| hreflang | 用于表示链接资源的人类语言。 |
| id | 该属性用于在文档中创建片段标识符。 |

1.HTML

href属性中的术语 href 代表超文本引用。href属性用于设置目标资源的网址。

HTML <a>元素使用href属性来指定当用户单击超链接时要打开的目标源或文档。

在上面介绍 HTML <a>标签基本用法的例子中，我们使用了href属性。

<p>Click on <a href="https://www.studytonight.com/"> this link </a> to go to the home page of Studytonight</p>

2.HTML

<a>元素使用target属性来指定一个窗口，当单击超链接时，您希望在该窗口中打开 HTML 文档。

例如，您可以使用target属性在同一个窗口或另一个窗口中打开文档**。**

下表给出了target属性的五个值:

| 值 | 描述 |
| _blank | 在新的未命名浏览器选项卡中打开链接文档。 |
| _self | 在当前浏览器选项卡中打开链接的文档，(_self为默认值) |
| _parent | 它在父窗口中打开链接的文档 |
| _top | 在最顶端的窗口中打开链接的文档 |
| framename | 它以给定的框架名称打开链接的文档，这意味着在一个 iframe 内。 |

让我们看看<a>标签和target属性的一些用法示例。

3.HTML

该属性被<a>标签用来在文档中创建一个片段标识符。

一个片段标识符指定了一个文档中的一个特定位置 ，比如一个标题或者网页的任何特定部分。您可以使用id属性导航到网页内的不同位置。

id属性以字符串为值，该值在同一文档中必须是唯一的，但是可以在不同的文档中重用。

例如，

<h1 id="top">Page Title</h1> <!-- first define the location within the document -->

<!-- If you have this hyperlink at bottom of a webpage, when clicked it will take you to the h1 tag. -->
<a href="#top">Scroll to Top</a>

注意: 哈希(#)符号表示该值是一个片段标识符。因此，它的结论是，如果在另一个网页的网址后面添加了#符号，则跟随#(散列符号)以及定义的位置(片段标识符)的网址用于重定向到同一网页内或不同网页上的特定命名超链接，在这种情况下，我们将被重定向到新网页，并且浏览器将自动滚动到与片段标识符的值匹配的网页的指定部分。

让我们举一个代码例子，

4.HTML

HTML <a>标签中的hreflang属性用于指定点击超链接时用户将被带到的目标 HTML 文档的语言。

<html>
<body>

  <h1>The a hreflang attribute</h1>

  <p><a hreflang="en" href="https://www.studytonight.com/">StudyTonight.com</a></p>

</body>
</html>

HTML <a>标签的默认 CSS 样式

下面给出了大多数浏览器对 HTML <a>标签使用的默认 CSS 设置:

a:link, a:visited {
  color: (internal value);
  text-decoration: underline;
  cursor: auto;
}

a:link:active, a:visited:active {
  color: (internal value);
}

对 HTML <a>标签的浏览器支持

以下浏览器支持此属性:

  • Firefox 1+

  • 谷歌 Chrome 1+

  • Internet Explorer 2+

  • Apple Safari 1+

  • Opera 4+

HTML <abbr>标签

原文：https://www.studytonight.com/html5-references/html-abbr-tag

HTML <abbr>标签用于定义网页中的缩写。

HTML <abbr>标签是一个简单的标签，上面没有任何特定的样式，它是一个实用的标签，可以用来适当地显示任何文本的缩写或简短形式。它与title属性一起使用，该属性为缩写或缩写文本提供了一个全文解释，该解释添加在开始和结束<abbr>标签之间。

这个abbr标签用于向翻译系统、浏览器和搜索引擎提供有用的信息。

例如，女士是小姐的简称，同样我们可以用 ST 作为今晚学习的简称。

以下是与<abbr>标签相关的一些有用的要点:

  • <abbr> 标签仅在 <body>标签内使用。

  • title属性对于<abbr>标签是可选的，但是如果我们包含一个title属性，那么只有我们可以提供缩写的完整形式。简而言之，<abbr>标签没有title属性就没有意义。

  • 一些浏览器也对<abbr>标签应用特殊的样式，比如虚线下划线，或者将文本翻译成小写字母。

  • 这是一个内联元素。

HTML <abbr>标签-语法和用法

<abbr>标签需要开启(开始)标签和关闭(结束)标签。

其所需语法如下:

<abbr title="full form or explanation for short_form_text">
    short_form_text
</abbr>

HTML5 <abbr>标签基本示例

下面我们有一个基本的例子来看看如何使用<abbr>标签。在下面的例子中，我们没有指定标题属性，所以您会看到拥有<abbr>标签对我们的网页在视觉上没有影响。尽管它将仍然通知浏览器和搜索引擎，包含在开头和结尾<abbr>标签中的文本应该被认为是缩写，它只是任何文本的缩写。

HTML <abbr>标签属性

虽然该元素支持全局属性和事件属性，但是该标签/元素没有任何特定属性。

title属性是最重要的属性，用于定义缩写的完整形式。此外，<abbr>标签内的title属性必须提供一个人类可读的和所用缩写的完整描述。

注意: 您在 HTML 文档中使用的每个<abbr>元素都独立于所有其他元素，例如，假设您为一个元素提供了一个标题，那么它不会自动将相同的扩展文本附加到具有<abbr>标签的其他元素上。

HTML <abbr>标签的默认 CSS 样式

大多数浏览器显示这些默认的 CSS 设置:

abbr {
    display: inline;
}

HTML5 <abbr>标签的浏览器支持

以下浏览器支持此属性:

  • Firefox 1+

  • 谷歌 Chrome 1+

  • Internet Explorer 7+

  • Apple Safari 1+

  • Opera 6+

HTML <address>标签

原文：https://www.studytonight.com/html5-references/html-address-tag

HTML <address>标签用于表示与网页**、文档、版块或文章相关的联系方式**。我们不能使用<address>标签来识别任何其他上下文中的地址。

  • 当我们在<article>标签中使用<address>标签时，它代表物品所有者的联系信息。

  • 另一方面，如果我们在<body>标签中使用<address>标签，那么它代表文档的联系信息。

  • 联系信息应该是特定的上下文，如物理地址、网址、电子邮件、电话号码等。它必须与作者、组织、公司等相关。

  • 对于任意邮政地址，<address>标签不得用作样式元素。

HTML <address>标签-语法和用法

<address>标签需要开启(开始)标签和关闭(结束)标签。

其语法如下:

<address>
    CONTACT INFO.
<address>

需要记住的要点:

  • <address>标签帮助搜索引擎轻松定位联系信息，因为搜索引擎将<address>标签内的信息视为联系信息。

  • <address>标签不应用于保存除联系信息之外的任何其他信息，如文章发表时间或联系方式等。

  • 通常一个<address>标签可以放在当前部分或网站的<footer>标签内。

HTML <address>标签基本示例

下面我们有一个基本的例子来清楚地理解<address>标签:

上例中使用的 HTML <address>标签保存了今晚学习网站的办公地址。这是因为我们可以使用<address>标签在网站的页脚部分或关于我们部分保存地址。

我们再举一个例子:

在上面的例子中，我们在一个<article>元素中使用了<address>标签，它充当了该文章的联系信息。

HTML <address>标签属性

虽然此元素支持全局属性和事件属性，但它没有任何特定属性。

HTML <address>标签的默认 CSS 样式

大多数浏览器应用这些默认的 CSS 样式:

address {
    display: block;
    font-style: italic;
}

对 HTML <address>标签的浏览器支持

以下浏览器支持此属性:

  • Firefox 1+

  • 谷歌 Chrome 1+

  • Internet Explorer 2+

  • Apple Safari 1+

  • Opera 4+

HTML <article>标签

原文：https://www.studytonight.com/html5-references/html-article-tag

HTML <article>标签是一个语义元素，为网页上的内容提供含义。

它通常包含信息/内容，也就是一般的主要内容或者网页上主要内容的片段。

我们总是可以使用<div>标签来定义网页上的部分/分区，但是使用<article>标签是有益的，因为当浏览器或网络爬虫访问网页并看到<article>标签中的一部分内容时，它会立即知道该特定部分包含主要内容。

还有，这是一个块级元素。

该元素代表任何文档、网页、应用程序或网站中独立的独立内容。<article>标签是一个非常特定的元素，比** <div>元素更特定。(什么是< div >标签？)**

HTML <article>标签-语法和用法

<article>标签需要开始(开启)标签和结束(关闭)标签。

下面我们有相同的基本语法:

<article>
    <!-- Some content -->
</article>

HTML5 <article>标签基本示例

下面我们有一个基本的例子来清楚地理解<article>标签:

HTML5 <article>标签属性

虽然此元素支持全局属性和事件属性，但它没有任何特定属性。

与<article>标签一起使用的 HTML 标签

在<article>标签中，您可以使用任何其他的 HTML 标签，如段落标签、图像标签、<a>标签等，但是有一些标签被用作<article>标签中的语义标签，以定义<article>标签中有意义的信息。

1.HTML <footer>标签

它用于在<article>元素的底部提供额外的信息。

给定的代码示例向您展示了如何在<article>元素中使用<footer>元素。

<article>
    <p> Another blog post. </p>
    <footer>
        <p> Extra information is always good.</p>
    </footer>
</article>

2.HTML <time>标签

该标签用于保存<article>标签中包含的内容发布的日期和时间。

<article>
    <p>It's our first blog post</p>
    <footer>
        <p> Posted on <time datetime="2020-02-24 18:00">Aug 31</time> by Studytonight </p>
    </footer>
</article>

真实世界的应用

这个<article>标签可以用在博客、文章、评论、新闻故事、论坛帖子等。<article>标签用于表示可重用和独立的内容。在一个网页上，展示一篇像这样的文章，我们可以把所有的主体内容都包含在<article>标签中。此外，在显示文章/教程的小片段(或任何其他形式的内容)的网站主页上，可以使用<article>标签，例如在研究今晚的好奇主页上。

<article>和<section>标签的区别

虽然这两个都是语义标签，这意味着它们只是为网页的部分提供意义，但是<article>标签是仅用于内容表示或者是文章、博客文章等，而 <section>标签(什么是<部分>标签？)可以用来定义网页上不同的版块可以是侧边栏版块、页眉版块、正文版块、代码版块、联系人版块等。

我们可以在<section>标签中有一个<article>标签，其中<article>标签将保存文章的主要内容，而其他相关信息可以在同一个<section>标签中。例如，

<section>
    <article>
        <h1>It's our first blog post</h1>
        <p> Posted on <time datetime="2020-02-24 18:00">Aug 31</time> by Studytonight </p>
        <p>Studytonight is a website which provides amazing programming tutorials and articles.</p>
    </article>
    <div>Some other related content... </div>
</section>

HTML5 <article>标签的浏览器支持

以下浏览器支持此属性:

  • Firefox 4+

  • 谷歌 Chrome 6+

  • Internet Explorer 9+

  • Apple Safari 5+

  • Opera 11.1+

HTML <aside>标签

原文：https://www.studytonight.com/html5-references/html-aside-tag

HTML <aside>标签用于显示与主要内容相关的内容及其一部分，但它只是一些对网页查看者有用的附加信息。

例如，如果你的作品集有一个网页，并且你已经指定了你所有的技能，你工作过的项目，关于你的学校教育和你的家乡的信息。现在要补充这个信息，可以加几行关于你家乡的信息，和你的作品集没有直接关系，但肯定是一些附加信息，所以可以把这个保留在<aside>标签里面。

<aside>标签内的内容通常有添加到主要内容的内容。你实际上可以多加几行来简单解释一下，主要内容里面有什么。

  • <aside>标签主要包含作者信息、链接、相关内容等。

  • <aside>标签用于轻松区分主文本和附属文本。

  • 任何特定的样式都需要 CSS。

  • 还有，这是一个块级元素。

HTML <aside>标签-语法和用法

<aside>元素需要开始(开启)标签和结束(关闭)标签。

下面我们有相同的基本语法:

<aside>
    ...
</aside>

HTML <aside>标签基本示例

下面我们有一个基本的例子来清楚地理解<aside>标签:

让我们再举一个例子，给<aside>标签一些不同的样式。

HTML <aside>标签属性

虽然此元素支持全局属性和事件属性，但它没有任何特定属性。

<aside>标签和<div>标签的区别

<aside>和<div>两个元素功能相同，但含义不同:

<div>:这个标签在网站上创建一个分区或者版块。

<aside>:<aside>也在网页上创建分区或分部，但它只包含与该网页主要内容相关的内容。

HTML <aside>标签对于搜索引擎、浏览器等了解哪些内容是主要内容，哪些部分内容只是一些附加信息是很有用的。**

HTML <aside>标签的默认 CSS 样式

大多数浏览器的默认值如下所示:

aside {
    display: block;
}

对 HTML <aside>标签的浏览器支持

以下浏览器支持此属性:

  • Firefox 4+

  • 谷歌 Chrome 6+

  • Internet Explorer 9+

  • Apple Safari 5+

  • Opera 11.1+

HTML <audio>标签

原文：https://www.studytonight.com/html5-references/html-audio-tag

HTML <audio>标签用于向网页添加任何音频文件。HTML 通过提供各种多媒体标签/元素，如<audio>、<video>、<embed>和<object>，帮助您在网站上添加多媒体文件。

  • <audio>标签用于将音频内容嵌入到一个 HTML 文档中，而不需要像 Flash 播放器那样的任何附加插件。

  • <audio>标签用于在网页上显示音频文件，用户可以在浏览器本身播放。

  • <audio>标签中的src属性用于指定多媒体文件的网址。

<audio>标签支持三种文件格式，它们的 MIME 类型如下所示:

文件格式mime _ type
. MP3音频/mp3
。波形音频文件格式音频/wav
。格式音频/ogg

在<audio>元素中可能有一个或多个音频源，可以使用src属性或<source>元素来表示，浏览器将从提到的源中选择最合适的一个。

HTML <audio>标签-语法和用法

<audio>标签需要开启(开始)标签和关闭(结束)标签。

其所需语法如下:

<audio>
  ...  
</audio>

注意: 那些不支持<audio>标签的浏览器会显示<audio>标签里面的文字。

HTML <audio>标签属性

HTML <audio>标签支持全局属性和事件属性，以及下面给出的一些其他属性:

属性描述
autoplay网页一加载，就播放音频文件。
controls显示网页上的控件，如播放和暂停按钮。
loop回放音频文件
preload指定音频文件是否预加载到网页上。
src提供要播放音频文件的位置。

HTML <audio>标签基本示例

下面我们有一个基本的例子来清楚地理解

标签:

在上面的例子中，我们使用了一个audio标签来将音频文件嵌入到网页中。当您在浏览器中运行上述代码时，音频会自动开始。这个音频文件只播放一次，我们还包含了controls属性来显示播放和暂停音频的控制。要多次播放音频文件，您可以使用loop属性。

使用<source>标签

我们可以使用source标签来提供音频文件的源 URL，

<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg">
  <p>Your browser doesn't support HTML5 audio. Here is
     a <a href="myAudio.mp4">link to the audio</a> instead.</p>
</audio>

我们也可以使用多个source标签在audio标签中提供多个音频文件 URL:

<audio controls>
  <source src="myAudio.mp3" type="audio/mpeg">
  <source src="myAudio.ogg" type="audio/ogg">
  <p>Your browser doesn't support HTML5 audio. Here is
     a <a href="myAudio.mp4">link to the audio</a> instead.</p>
</audio>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传浏览器支持 HTML <audio>标签

  • Firefox 3.5+

  • 谷歌 Chrome 4+

  • Internet Explorer 9+

  • Apple Safari 4+

  • Opera 10.5+

HTML 标签 B

HTML <b>标签

原文：https://www.studytonight.com/html5-references/html-b-tag

HTML <b>标签或粗体用于使文本在网页上显示为粗体。HTML 为我们提供了一组标签/元素，这些标签/元素是用于文本格式化的或者简单来说，我们可以通过应用一些格式化特性，比如粗体、斜体等，为文本提供一些基本的样式。

现在，我们将学习<b>标签或粗体标签**。**

  • <b>标签属于物理样式元素的范畴，用于在 BOLD 中显示文本。

  • 包含在<b>标签的开始和结束标签内的文本在网络浏览器中显示为粗体。

  • 这个<b>标签可以用来突出显示网页上显示的内容的重要文本。

  • 另外，这是一个内联元素。

HTML <b> 标签-语法和用法

<b>标签需要开启(开始)标签和关闭(结束)标签。

其所需语法如下:

<b>
    text to show in bold
</b>

HTML <b>标签基本示例

下面我们有一个基本的例子来清楚地理解<b>标签:

HTML <b>标签属性

虽然此元素支持全局属性和事件属性，但它没有任何特定属性。

要记住的要点！

  • 仅在需要时使用<b>标签意味着不要过度使用<b>标签。

  • 标题可以使用<h1>…<h6>，而不是<b>标签。

  • 对于强调的文本，您可以使用<em>标签( HTML < em >标签，因为浏览器和搜索引擎对它的重视程度很高。

  • 对于一些重要的文本，您可以使用<strong>标签( HTML < strong >标签，这也将使文本加粗，同时将文本标记为重要，以便搜索引擎抓取网页。

HTML <b>标签的默认 CSS 样式

<b>标签的默认 CSS 样式或值如下所示:

b {
    font-weight: bold;
}

对 HTML <b>标签的浏览器支持

以下浏览器支持此属性:

  • Firefox 1+

  • 谷歌 Chrome 1+

  • Internet Explorer 2+

  • Apple Safari 1+

  • Opera 2.1+

HTML <base>标签

原文：https://www.studytonight.com/html5-references/html-base-tag

HTML <base>标签用于表示的一个基本网址**，该网址是 HTML 文档**中的所有网址。例如，如果我们在一个网页上有多个相同域名的网址，那么我们可以在 HTML 文档头中使用<base>标签指定基本网址，然后只需在 HTML 文档体中添加相对路径。基本网址将自动添加到网页上的所有相对网址。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 我们只能有一个基本网址，并且不应该有一个以上的基本网址。

  • 所以 HTML 任何文档只能有一个<base>标签，必须放在<head>标签里面( HTML <头>标签！)仅限。

  • 该基本网址将是我们在网页上使用<base>标签的每个网址的基础，并且它必须是该特定页面上所有网址的前缀。因此，如果我们必须在同一页面上包含不同网站的网址，我们应该小心。

HTML <base>标签-语法和用法

<base>标签是一个空标签，或者一个开放标签，这意味着它不需要任何结束或关闭标签。

以下是使用<base>标签的语法:

<!-- declaring the base URL -->
<base href="BASE_URL" />

正如您在上面的语法中看到的，就像 HTML 锚标签一样，<base>标签也使用href属性来指定网址。

HTML <base>标签属性

HTML <base>标签支持全局属性和事件属性以及一些具体的属性，如下所示:

属性描述
href要在整个文档中使用的基本网址是使用href属性指定的。
target该属性用于指定在哪里打开超链接的网址，在同一个浏览器选项卡中，在新的选项卡中，等等。

HTML <base>标签示例

下面我们有一个<base>标签的基本例子，我们用它来指定所有<a>标签的基本 URL。

在上面的例子中，我们有 4 个锚标签，前 3 个将获得添加到其中的基本网址，但是如果我们必须在网页上包含一些其他网址，在这种情况下，我们可以提供以 http://或 https://开头的完整网址，那么基本网址将不会添加到该网址中。

此外，我们使用了带有 _blank 值的target属性，默认情况下，该属性应用于该网页上的所有超链接。其他可用于target属性的值有 _self 、 _parent 、 _top 等。

我们在我们的 HTML 文档中只使用了一个<base>标签，在上面的例子中，尝试再添加一个(将考虑第一个)。

而且是推荐在<head>标签里面用<base>标签，虽然你加在<body>标签里面，还是可以的。

对 HTML <base>标签的浏览器支持

以下浏览器支持此属性:

  • Firefox 1+

  • 谷歌 Chrome 1+

  • Internet Explorer 2+

  • Apple Safari 1+

  • Opera 4+

HTML <bdi>标签

原文：https://www.studytonight.com/html5-references/html-bdi-tag

HTML <bdi>标签用在一段文本上，为了双向文本格式的目的，这段文本应该与其周围环境隔离。这是什么意思？那么，考虑一个网页，其中你有多种语言的内容，默认情况下，这些内容写在不同的方向，例如，英语和阿拉伯语。现在，将这两种语言的文本放在一个句子中可能会使浏览器感到困惑，这可能会导致文本格式不正确，一些单词(或句子的一部分)可能会显示在实际位置的前面或后面。

术语 BDI 代表双向隔离。

  • 在 HTML 中，我们使用<bdi>标签来处理文本，一般由用户提供，可以是从右向左书写的语言，也可以是与网页默认语言相反的方向。

  • 这个元素对于各种语言都很有用，比如阿拉伯语和希伯来语或者那些浏览器在不知道文本方向的情况下动态插入的语言。

HTML <bdi>标签-语法和用法

<bdi>标签需要开启(开始)标签和关闭(结束)标签。

其所需语法如下:

<bdi>
    content goes here
</bdi>

HTML <bdi>标签示例

下面的例子显示了<bdi>标签的应用。这个例子有点复杂，但它展示了这个标签在现实世界中的用途。

在下面的例子中，我们创建了一个简单的表单，让用户为我们的网站输入反馈，然后我们显示反馈。现在，用户可以来自任何国家，并可以提交任何语言的反馈。因此，为了保持我们的用户界面不变，我们可以在<bdi>标签中显示用户输入，为用户输入文本提供双向隔离。

HTML <bdi>标签属性

虽然此元素支持全局属性和事件属性，但它没有任何特定属性。

<bdi>标签和<bdo>标签的区别

在 HTML 中，<bdi>标签在 HTML5 中是新的，并且它在某种程度上类似于<bdo>标签。但是<bdi>标签和<bdo>标签有很大的区别。正如我们所知，我们在文本的跨度上使用<bdi>标签，以便将其与周围的文本隔离，而我们使用<bdo>标签来反转文本的方向。<bdo>标签多次导致错误，所以在这些情况下也要尝试使用<bdi>标签。

对 HTML <bdi>标签的浏览器支持

以下浏览器支持此属性:

  • Firefox 10+

  • 谷歌 Chrome 16+

HTML <bdo>标签

原文：https://www.studytonight.com/html5-references/html-bdo-tag

HTML <bdo>标签用于改变网页上文本的当前方向。如果您有来自世界各地的用户使用您的网站，并以他们自己的语言提交内容，您可以使用<bdo>标签为用户输入设置默认方向，但这有时会改变文本的含义或使文本不可读，因此请谨慎使用。

  • 术语<bdo>代表双向超越。

  • 每种语言都有文本可读性的默认方向；从左到右或从右到左，但是当你在网页上混合它们时，浏览器可能会困惑，如何显示文本。要克服这个问题，您可以使用<bdo>标签。

  • 该元素主要用于显示多种语言，如阿拉伯语和希伯来语，从右向左阅读，在网页上与英语并列。

  • 您可以通过将dir属性设置为 **RTL(从右向左)**或 **LTR(从左向右)**来指定文本方向。

  • 另外，这是一个内联元素。

HTML <bdo>标签-语法和用法

<bdo>元素需要开始(开始)标签和结束(结束)标签。

其所需语法如下:

<bdo> SOME TEXT </bdo>

HTML <bdo>标签基本示例

下面我们有一个理解<bdo>标签的基本例子:

HTML <bdo>标签属性

该元素只有一个属性，即dir，同时支持全局属性和事件属性。

dir 属性用于指定<bdo>标签中文本的方向。

dir 属性可以有以下值:

  • LTR: 这告诉我们，文字的可读性是从左到右的。

  • RTL: 这告诉我们，文字的可读性是从右向左的。

HTML <bdo>标签的默认 CSS 样式

bdo {
    unicode-bidi: bidi-override;
}

对 HTML <bdo>标签的浏览器支持

以下浏览器支持此属性:

  • Firefox 1+

  • 谷歌 Chrome 1+

  • Internet Explorer 5+

  • Apple Safari 1+

  • Opera 7+

HTML <blockquote>标签

原文：https://www.studytonight.com/html5-references/html-blockquote-tag

为了在网页上显示任何引用，HTML 提供了<blockquote>标签。包含在<blockquote>标签中的文本显示在一个单独的段落中，文本向右缩进略有变化**。**

  • HTML <blockquote>标签在引语前后都放置了空格，顾名思义，它主要用于在网页上显示引语以及作者姓名。

  • 这是一个块级元素。

HTML <blockquote>标签-语法和用法

<blockquote>标签需要开始(开启)标签和结束(关闭)标签。

其所需语法如下:

<blockquote>
    Your quote comes here...
</blockquote>

HTML <blockquote>标签基本示例

下面我们有一个基本的例子来理解如何使用<blockquote>标签:

HTML <blockquote>标签属性

虽然此元素支持全局属性和事件属性，但它没有任何特定属性。

在<blockquote>标签中，我们可以使用<cite>标签来提供作者的姓名或者引用的来源。在上面显示的代码示例中，我们也使用了<cite>标签。

HTML <blockquote>标签的默认 CSS 样式

以下是默认情况下应用于<blockquote>标签的默认 CSS 样式规则:

blockquote {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 40px;
    margin-right: 40px;
}

对 HTML <blockquote>标签的浏览器支持

以下浏览器支持此属性:

  • Firefox 1+

  • 谷歌 Chrome 1+

  • Internet Explorer 2+

  • Apple Safari 1+

  • Opera 2.1+

HTML <body>标签

原文：https://www.studytonight.com/html5-references/html-body-tag

HTML <body>标签用于定义 HTML 文档的正文部分。<body>标签包含文档的主要内容。<body>标签放置在关闭 <head>标签后。这是一个默认的 HTML 标记，在创建一个 HTML 文档时使用。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • <body>标签包括文本、图像、超链接、列表、段落、标题等。，以及其他可以成为 HTML 网页一部分的内容。

  • <body>标签是HTML 元素( < html >标签)的第二个直接子，仅次于<head>标签。

  • <body>标签用于显示网站的主要内容，在浏览器中访问网站的访问者可以看到。需要注意的一点是，不能在单个 HTML 文档中使用多对<body>标签。

你在浏览器窗口的网页上看到的一切都在<body>标签里面。

HTML <body>标签-语法和用法

<body>标签需要开启(开始)标签和关闭(结束)标签。

以下是使用<body>标签的语法:

<body>
    <!-- the whole webpage code comes here -->
</body>

HTML <body>标签属性

HTML <body>标签支持全局属性和事件属性，一些常见的事件属性如下:

属性描述
onafterprint它在用户打印完文档后调用一个函数。
onbeforeprint当用户请求打印文档时，它会调用一个函数。
onbeforeunload当文档即将被卸载时，它会调用一个函数。
onhashchange当当前网页的网址的散列部分改变时，它调用一个函数。比如当studytonight.com/code/html/web-beginner#1变为studytonight.com/code/html/web-beginner#2
onload当页面完成加载时，它会调用一个函数。
onfocus它用于在访问者关注当前页面时调用函数。
onunload它用于在访问者离开页面时调用一个函数。
onblur它用于在网页失去焦点时调用函数。
onerror该属性用于在网页加载失败时调用函数
onmessage它用于在文档收到消息时调用函数。
onresize它用于在调整文档大小时调用函数。
onredo它用于在用户在撤消事务历史中向前移动时调用一个函数。
onlanguagechange当首选语言改变时，此属性用于调用函数。
onstorage该属性用于在存储区域发生变化时调用函数。
onundo它用于在用户在撤消事务历史中向后移动时调用一个函数。
onoffline当互联网连接断开时，它会调用一个函数。
ononline当互联网连接恢复时，它会调用一个函数。

在 HTML 4 中还有一些其他的属性，比如rightmargin、topmargin、leftmargin、bottommargin、vlink、link、text等等。在<body>标签中可用，但是在 HTML 5 中这些已经被否决了。

HTML <body>标签基本示例

任何一个 HTML 网页的例子都有<body>标签，但是，让我们再举一个例子来看看它是如何工作的，尽管每当你写任何 HTML 代码时<body>标签总是在工作的:

HTML <body>标签的默认 CSS 样式

以下是默认情况下应用于<body>标签的默认 CSS 样式规则。这可能会因浏览器而略有变化。

body
{
    display:block;
    margin:8px;
}

对 HTML <body>标签的浏览器支持

所有浏览器都支持，不过，为了这一节，以下浏览器支持这个属性:

  • Firefox 1+

  • 谷歌 Chrome 1+

  • Internet Explorer 2+

  • Apple Safari 1+

  • Opera 2.1+

HTML <br>标签

原文：https://www.studytonight.com/html5-references/html-br-tag

HTML <br>标签用于定义 HTML 文档中的换行符。换行符只是移动到下一行，在两个不同的句子或段落或任何其他 HTML 元素或网页组件之间添加一些空间。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

需要换行符来区分网页上任何文本的不同部分。虽然<p>标签或段落标记可用于文本，但换行符标记可用于此目的，并在任何地方添加换行符。

作为一种不良做法，换行符也被很多开发者用来在任何网页组件如标题、图片等后面添加额外的空间。但是我们建议使用 CSS 保证金来达到这个目的。

有一点需要注意的是换行符并不是用来创建另一个段落，它只是打断现有的一行，以新的一行开始。所以断行只用于打断一条连续的线。

HTML **<br>**标签-语法和用法

<br>标签是一个空标签。它不需要任何结束或结束标记。

其所需语法如下:

Content here...<br/>content....

你可以把它写成
或者
两种语法都可以。第二个，即<br />在语法上是完美的，因为每个空标签应该在结束角括号>之前有一个/，以指定它的结束，因为它没有特定的结束或结束标签。

HTML <br>标签基本示例

下面我们有一个基本的例子来清楚地理解<br>标签:

HTML <br>标签属性

虽然此元素支持全局属性和事件属性，但它没有任何特定属性。

使用 style 属性，我们可以为<br>标签定义自定义样式，最常用的用例是增加或减少换行后换行所增加的空间。我们可以使用 CSS 边距来实现，例如:

br {
    margin-top: 15px;
    margin-bottom: 15px;
}

**注意:**没有为此标签添加默认 CSS 样式。

对 HTML <br>标签的浏览器支持

以下浏览器支持此属性:

  • Firefox 1+

  • 谷歌 Chrome 1+

  • Internet Explorer 2+

  • Apple Safari 1+

  • Opera 2.1+

HTML <button>标签

原文：https://www.studytonight.com/html5-references/html-button-tag

HTML <button>标签用于在网页上创建一个可点击的按钮，该按钮可用于执行某些动作或作为 HTML 表单的动作按钮。一个按钮可用于执行各种任务，如提交或重置表单的详细信息，可用于超链接等。简而言之，如果你正在构建一个网页，你想在你的网页上有一个按钮，你可以使用<button>标签。

  • <button>标签通常与<form>标签一起使用，以显示表单的控件。

  • 我们也可以使用<input>标签为 HTML 表单创建一个提交按钮，但是你不能改变按钮的外观，只能改变出现在按钮上的文本值。

  • 嵌入在按钮的开始和结束标签之间的文本、图像或任何多媒体成为按钮的内容。

  • 另外，这是一个内联元素。

  • <button>标签提供了type属性，使用该属性可以创建三种按钮控件，它们是:提交按钮、重置按钮和正常按钮。

三种按钮:

  1. 提交按钮:通过将type属性设置为提交而创建

  2. 重置按钮:通过将type属性设置为来重置

  3. 正常按钮:通过将type属性设置为按钮而创建

HTML <button>标签-语法和用法

<button>元素需要开始(开启)标签和结束(关闭)标签。

其所需语法如下:

<button>
    <!-- Some content -->
</button>

HTML <button>标签属性

HTML <button>标签支持全局属性和事件属性。与<button>标签一起使用的一些常见属性如下:

| 属性 | 描述 |
| autofocus | 允许按钮控件在页面加载后立即获得焦点。 |
| form | form 用于引用 FORM 元素的 id。 |
| formtarget | 指定加载浏览内容的目标，如新选项卡或新窗口。 |
| formnovalidate | 这指定在提交按钮控件时不需要验证表单。 |
| formmethod | 指定提交按钮控件时的方法。可能的值有:获取、发布、放置和删除。 |
| formenctype | 此属性用于指定用于向浏览器提交表单的内容类型 |
| name | 此属性指定与表单数据一起提交的按钮的名称 |
| type | 此属性用于指定按钮的类型，其值为:-提交、重置和正常。 |
| 价值 | 该属性用于定义按钮的初始值。提交表单时，该初始值将在参数中传递给服务器。 |
| autocomplete | 这个属性在上的使用是非标准的，并且是火狐特有的。 |
| disabled | 该属性表示用户不能与按钮交互。 |

HTML <button>标签基本示例

下面我们有一个基本的例子来清楚地理解<button>标签:

<button>标签的默认 CSS 样式:

没有人

对 HTML <button>标签的浏览器支持

以下浏览器支持此属性:

  • Firefox 1+

  • 谷歌 Chrome 1+

  • Internet Explorer 4+

  • Apple Safari 1+

  • Opera 5+

HTML 标签 C

HTML <canvas>标签

原文：https://www.studytonight.com/html5-references/html-canvas-tag

HTML5 中引入了 HTML <canvas>标签，使用 JavaScript 在网页上显示 2D 形状和图形。该标签允许您在网页上创建图形、游戏、图像和其他视觉效果。

默认情况下，HTML 中的

标签的宽度为300 像素**，高度为150 像素，没有任何边框或内容。我们可以使用 JavaScript 在 HTML 画布中填充一些图形、绘图或图像等视觉效果。**

<canvas>标签可用于在图像上应用各种变换，如旋转和模糊。

在开始和结束<canvas>标签之间定义的内容仅在浏览器不支持<canvas>标签时显示。****

最大尺寸的<canvas>标签是非常大，但它的确切尺寸只取决于浏览器。

还有，这是一个块级元素。

HTML <canvas>标签-语法和用法

<canvas>元素需要开始(开始)标签和结束(结束)标签。

<canvas>
    ...
</canvas>

HTML <canvas>标签属性

<canvas>标签支持全局属性和事件属性。下面给出了与该标签一起使用的一些常见属性:

| 属性 | 描述 |
| height | 该属性用于以像素为单位指定画布的高度。 |
| width | 该属性用于以像素为单位指定画布的宽度。 |
| moz-opaque | 该属性用于管理画布的半透明性 |
| id | id属性用于指定元素的唯一名称。画布元素的id属性用于获取 Javascript 中画布的引用，为其添加图形。 |
| style | style属性用于指定 CSS 样式代码。 |

HTML <canvas>标签基本示例

在本节中，我们将介绍一些<canvas>标签的例子，以帮助您理解我们如何使用它。

1.简单<canvas>标签

在下面的 HTML 代码中，我们刚刚在我们的 HTML 中使用了一个

标签，这将对网页没有视觉效果，除了<canvas>标签将占用的额外空间。

<!DOCTYPE html>
    <head>
        <title>Simple Canvas</title>
    </head>
    <body>
        <canvas id="myCanvas"></canvas>
    </body>
</html>

默认宽度为300 像素，高度为150 像素。

我们可以使用style属性为这个标签添加样式，就像添加一个边框来知道画布的边界一样。请参见下面的代码示例:

<!DOCTYPE html>
    <head>
        <title>Simple Canvas</title>
    </head>
    <body>
        <canvas id="myCanvas" style="border: solid 1px #000;"></canvas>
    </body>
</html>

如果你运行上面的代码，你会看到一个矩形，有一个黑色边框，默认宽度为300 像素，高度为150 像素。

2.带有图形的<canvas>标签(使用 JavaScript)

在本例中，我们将在画布内填充创建一个矩形，并使用fillstyle属性和fill()方法为其提供背景色，使用lineWidth和strokeStyle属性和stroke()方法添加边框。

在 JavaScript 中，我们可以使用id属性访问<canvas>标签，并向其中添加图形，我们使用canvas.getContext("2d")方法来控制画布上下文。getContext()方法可以取 2d 、 webgl 、 webgl2 等值。

3.带文本的<canvas>标签(使用 JavaScript)

在本例中，我们将学习如何在画布元素上绘制文本。

在上面的例子中，我们使用fillText()方法来提供文本，使用font属性来为文本添加一些样式。

HTML <canvas>标签的默认 CSS 样式

默认情况下，以下 CSS 样式应用于<canvas>标签。

canvas {
  height: 150px;
  width: 300px;
}

对 HTML <canvas>标签的浏览器支持

以下浏览器支持此属性:

  • Firefox 2+

  • 谷歌 Chrome 4+

  • Internet Explorer 9+

  • Apple Safari 3.1+

  • Opera 9+

HTML <caption>标签

原文：https://www.studytonight.com/html5-references/html-caption-tag

HTML <caption>标签用于为表格提供标题或题目，描述表格的内容。<caption>标签用在<table>标签内部，就在打开<table>标签之后。

标题是一个简短描述，它提供了一个关于表格的简短解释，并帮助你理解它的目的。但是一张桌子应该只有一个标题。****

例如:假设您已经创建了一个包含员工信息的表，那么您可以使用<caption>标签为它指定一个标题，如**“员工详细信息”**。

HTML **<caption>**标签-语法和用法

<caption>标签需要开始(开启)标签和结束(关闭)标签。

下面给出了相同的所需语法:

<caption>
    ...
</caption>

HTML <caption>标签基本示例

下面我们有一个使用<caption>标签的基本例子:

<table>
    <caption> Title of Table </caption>
    <tr>
        <td> Column 1 </td>
        <td> Column 2 </td>
    </tr>
    <!-- more table rows -->
</table>

现在让我们看另一个例子，表中有一些数据，

正如您在上面的代码示例中看到的，我们已经使用了标签来为表格添加标题/标题。

我们也可以使用style属性为<caption>标签添加样式。

HTML <caption>标签属性

虽然此元素支持全局属性和事件属性，但它没有任何特定属性。

HTML <caption>标签的默认 CSS 样式

caption {
    display: table-caption;
    text-align: center;
}

对 HTML <caption>标签的浏览器支持

以下浏览器支持此属性:

  • Firefox 1+

  • 谷歌 Chrome 1+

  • Internet Explorer 4+

  • Safari 1+

  • Opera 4+

HTML <col>标签

原文：https://www.studytonight.com/html5-references/html-col-tag

HTML <col>标签用于分别定义表格每一列的属性。

  • <col>标签定义在 <列组>标签内，该标签本身定义在<table>标签内。

  • <colgroup>标签中的每个<col>标签代表表格的一列。通过使用span属性，一个单独的< col >标签也可以表示多个连续的列。

  • <col>标签没有结束标记。

HTML <col>标签-语法和用法

<col>元素需要开始(开始)标记，其所需语法如下:

<col style=" " />

HTML <col>标签基本示例

下面我们有一个<col>标签的基本例子:

在上面的代码示例中，我们指定了 4 个<col>标签来设置表格的 4 列的样式。现在，让我们来看看如何使用单个<col>标签来为表格的多列设置样式。

在下面的例子中，我们有 2 个<col>标签，覆盖了表的 4 列，每个标签使用带有值 2 的span属性。

<table>
    <colgroup>
        <col span="2" style="background-color:green" />
        <col span="2" style="background-color:orange" />
    </colgroup>
    <tr>
        <th>Emp Id</th>
        <th>Emp name</th>
        <th>DOB</th>
        <th>Address</th>
    </tr>
    <tr>
        <td>001</td>
        <td>Palak</td>
        <td>08-09-1985</td>
        <td>11, Adarsh Nagar</td>       
    </tr>
</table>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

在下面的例子中，我们有 2 个覆盖表格 4 列的<col>标签，使用带有值 3 的span属性和一个不带span属性的<col>标签。

<table>
    <colgroup>
        <col span="3" style="background-color:green" />
        <col style="background-color:orange" />
    </colgroup>
    <tr>
        <th>Emp Id</th>
        <th>Emp name</th>
        <th>DOB</th>
        <th>Address</th>
    </tr>
    <tr>
        <td>001</td>
        <td>Palak</td>
        <td>08-09-1985</td>
        <td>11, Adarsh Nagar</td>       
    </tr>
</table>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

HTML <col>标签属性

虽然此元素支持全局属性和事件属性，但它没有任何特定属性。

<col>标签的主要属性是span属性，用于定义<col>标签将覆盖多少列。

HTML <col>标签的默认 CSS 样式

col
{
   display:table-column;
}

对 HTML <col>标签的浏览器支持

以下浏览器支持此属性:

  • Firefox 1+

  • 谷歌 Chrome 1+

  • Internet Explorer 4+

  • Apple Safari 1+

  • Opera 7+

HTML <colgroup>标签

原文：https://www.studytonight.com/html5-references/html-colgroup-tag

HTML <colgroup>标签用于为表格中的一组列指定字体颜色、背景颜色、边框等属性。

  • 这有助于将样式应用于多个列，而无需像 HTML <列>标签那样为每个单元格一次又一次地定义样式。

  • <colgroup>标签必须放在 <caption>标签之后、<tbody>、<thead>、<tfoot>、<tr>标签之前。

  • 您可以使用<colgroup> 标签的 span 属性来指定要应用属性的列数

HTML <colgroup>标签-语法和用法

<colgroup>元素需要开始(开始)标签和结束(结束)标签。

下面给出了相同的所需语法:

<colgroup>
.....
</colgroup>

HTML <colgroup>标签基本示例

下面我们有一个基本的例子来清楚地理解<colgroup>标签:

在上面的例子中，我们使用了span属性来覆盖使用<colgroup>标签的两列。

HTML <colgroup>标签属性

虽然此元素支持全局属性和事件属性，但它没有任何特定属性。

<colgroup>标签的主要属性是span属性。

  • span属性可以具有正整数形式的值。

  • span属性的默认值为 1。

  • 跨度的值表示柱组元素跨越或覆盖的连续柱的数量。

HTML <colgroup>标签的默认 CSS 样式

colgroup {
  display: table-column-group;
}

HTML5 <colgroup>标签的浏览器支持

以下浏览器支持此属性:

  • Firefox 1+

  • 谷歌 Chrome 1+

  • Internet Explorer 4+

  • Apple Safari 1+

  • Opera 7+

HTML <cite>标签

原文：https://www.studytonight.com/html5-references/html-cite-tag

HTML <cite>标签用来显示一个引文，它只不过是一个不同于普通文本格式的文本。引用元素中嵌入的文本通常以斜体显示。

我们使用<cite>标签和 <区块引用>标签来引用引用的作者。

  • <cite>标签表示引用。

  • 每当有人想要引用或评论某个作者时，通常需要引用。

  • 对任何创造性作品的任何引用都嵌入在<cite>标签中。

  • 另外，这是一个内联元素。

HTML <cite>标签-语法和用法

<cite>元素需要开始(开启)标签和结束(关闭)标签。其所需语法如下:

<cite>
    ...
</cite>

HTML <cite>标签基本示例

下面我们有一个使用<cite>标签的基本例子:

HTML <cite>标签属性

虽然此元素支持全局属性和事件属性，但它没有任何特定属性。

HTML <cite>标签的默认 CSS 样式

cite {
    font-style: italic;
}

对 HTML <cite>标签的浏览器支持

以下浏览器支持此属性:

  • Firefox 1+

  • 谷歌 Chrome 1+

  • Internet Explorer 2+

  • Safari 1+

  • Opera 4+

HTML <code>标签

原文：https://www.studytonight.com/html5-references/html-code-tag

HTML <code>标签用于封装编程相关术语，以便在 HTML 文档中以不同的方式显示它们。当我们创建包含编程相关或计算机相关内容的网页时，为了显示一些特定的编码术语，如一些函数名或任何变量名等，我们可以使用<code>标签。

在本教程中，您也会看到，无论我们在哪里指定了<code>标签，它的样式都是不同的，这是因为它包含在<code>标签中。

  • <code>标签用于以等宽字体显示包含的文本，如快递员。

  • 如果想让多行显示编程代码，那么可以把<code>标签放在<pre>标签里面，或者直接用<pre>标签。

  • 此外，这是一个内联元素。

HTML <code>标签-语法和用法

<code>标签需要开始(开启)标签和结束(关闭)标签。

其所需语法如下:

<code>
    some text
</code>

HTML <code>标签基本示例

下面我们有一个<code>标签的基本例子:

在上面的代码示例中，我们也为<code>标签提供了一些样式，以突出其中包含的测试。

HTML <code>标签属性

虽然此元素支持全局属性和事件属性，但它没有任何特定属性。

| 属性 | 描述 |
| class | 表示<code>标签的类名 |
| id | 表示<code>标签的唯一 id |
| style | 表示<code>标签的内嵌样式 |
| title | 表示<code>标签的标题 |

HTML <code>标签的默认 CSS 样式

大多数浏览器使用这些默认的 CSS 设置:

code {
    font-family: monospace;
}

对 HTML <code>标签的浏览器支持

以下浏览器支持此属性:

  • Firefox 1+

  • 谷歌 Chrome 1+

  • Internet Explorer 2+

  • Apple Safari 1+

  • Opera 4+

HTML 标签 D

HTML <dl>标签

原文：https://www.studytonight.com/html5-references/html-dl-tag

在 HTML <dl>标签中，术语<dl>表示描述列表。<dl>标签与<dt>标签和<dd>标签一起使用。

<dl>标签用于创建具有不同术语和定义的列表。描述列表中的术语包含在<dt>标签中，术语的描述使用<dd>标签指定。

所以

标签基本上是一个容器标签，其内容包含在<dt>和<dd>标签中。

还有，这是一个块级元素。

HTML <dl>标签-语法和用法

<dl>标签需要开始(开启)标签和结束(关闭)标签。

以下是在 HTML 代码中使用<dl>标签的语法:

<dl>
    <dt>some term</dt>
    <dd>its definition...</dd>
</dl>

HTML <dl>标签基本示例

下面我们有一个展示如何使用 HTML <dl>标签的基本例子

HTML <dl>标签属性

虽然此元素支持全局属性和事件属性，但它没有任何特定属性。

HTML <dl>标签的默认 CSS 样式

大多数浏览器使用这些默认的 CSS 设置:

dl {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
}

对 HTML <dl>标签的浏览器支持

以下浏览器支持此属性:

  • Firefox 1+

  • 谷歌 Chrome 1+

  • Internet Explorer 2+

  • Safari 1+

  • Opera 2.1+

HTML <del>标签

原文：https://www.studytonight.com/html5-references/html-del-tag

在 HTML 中，我们使用<del>标签来表示所附的文本已经从文档中删除。此标签用于显示删除的文本，显示时会在文本中划一条线。

  • <del>标签用于提供关于对文档进行的更改和更新的信息。

  • 网络浏览器将包含的文本渲染为删除线。

  • <del>标签属于逻辑样式元素的范畴。

HTML <del>标签-语法和用法

<del>标签需要开始(开启)标签和结束(关闭)标签。

以下是在 HTML 代码中使用<del>标签的语法:

<del>
    deleted text
</del>

HTML <del>标签基本示例

下面我们有一个展示如何使用 HTML <del>标签的基本例子，

HTML <del>标签属性

虽然此元素支持全局属性和事件属性，但它没有任何特定属性。

与<del>标签一起使用的一些其他重要属性如下:

1.引用:

  • 此属性用于指示删除的原因。

  • 该属性的值是 URL(通用资源定位符)，它指向描述已删除文本的其他文档。

这里有一个例子，

<p><del cite="/path/to/reason_for_deletion.html">This text has been deleted.</del></p>

2.日期时间:

  • 用于表示删除的时间。

  • 它只需要一个值，即文本被删除的日期和时间。

这里有一个例子，

<p><del datetime="2020-05-15T22:55:03Z">This text has been deleted.</del></p>

HTML <ins>标签:

当我们删除网页中的一些文本时，我们可以使用<del>标签来显示它，如果在删除的文本的位置插入了一些其他的文本，我们可以使用 < ins >标签在网页上显示它。

让我们举个例子:

<p>We no longer sell <del>ProductX</del>, instead, we now have the new <ins>ProductY</ins>.</p>

尝试使用上面代码操场中的<ins>标签，您将看到包含在<ins>标签中的文本带有下划线。

HTML <del>标签的默认 CSS 样式

del {
    text-decoration: line-through;
}

对 HTML <del>标签的浏览器支持

以下浏览器支持此属性:

  • Firefox 1+

  • 谷歌 Chrome 1+

  • Internet Explorer 4+

  • Safari 1+

  • Opera 7+

HTML <dialog>标签

原文：https://www.studytonight.com/html5-references/html-dialog-tag

在 HTML 中，我们可以使用<dialog>标签在主浏览器窗口内创建一个小的对话框或一个小窗口，轻松显示一些附加信息。

<dialog>标签可用于在网页上创建模态窗口或弹出窗口，以在其中显示某些消息或网页的某些组件。

HTML <dialog>标签-语法和用法

<dialog>元素需要开始(开启)标签和结束(关闭)标签。

以下是在 HTML 代码中使用<dialog>标签的语法:

<dialog>
   ...
</dialog>

HTML <dialog>标签基本示例

下面我们有一个展示如何使用 HTML <dialog>标签的基本例子:

HTML <dialog>标签属性

<dialog>标签支持全局属性和事件属性。

open属性:

唯一特定于<dialog>标签的属性是open，它甚至不需要任何值。默认情况下，<dialog>标签会创建一个对话框，该对话框是隐藏的，可以使用 Javascript 显示，但是当我们指定open属性时，默认情况下，该对话框在网页上是可见的。

这里有一个例子，

<dialog open>  
    <p>
        The power of subconcious mind is unlimited. 
    </p>  
</dialog>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

HTML5 <dialog>标签的浏览器支持

以下浏览器支持此属性:

  • 谷歌 Chrome - 37.0

  • 互联网浏览器- 79.0

  • Firefox - 53.0+

  • Opera - 24.0

  • Safari -不支持

HTML <details>标签

原文：https://www.studytonight.com/html5-references/html-details-tag

在 HTML 中，我们可以使用<details>标签来提供关于任何标题的附加细节或信息，或者为电子商务网站中列出的任何书籍提供文本，如作者细节，或者回答任何常见问题(常见问题)，或者创建一个带有标题和隐藏细节的时尚侧栏列表。

当我们使用<details>标签时，默认情况下，开合<details>标签内提供的文本是隐藏的。在网页上你会看到 >详情，你可以点击这个右箭头显示<details>标签中提供的文字。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

当我们使用<details>标签时，默认的可见文本是详细信息。但是我们可以使用<summary>标签(什么是总结标签)提供自定义的总结文本？)里面的<details>标签。我们在<summary>标签内提供的文本将在初始时可见，我们可以点击箭头查看更多详细信息。

由<details>标签提供的附加详细信息只能在用户动作上查看或隐藏,或者通过在<详细信息>标签中添加open属性来默认显示。

HTML <details>标签-语法和用法

<details>元素需要开始(开始)标签和结束(结束)标签。

以下是在 HTML 代码中使用细节标记的语法:

<details>
    detail text...
</details>

HTML <details>标签基本示例

让我们看一个简单的例子，我们将只使用

标签。 
<details>
    <p>This text is hidden as details,</p> 
    <p>and you can click on the arrow button to see this.</p>
</details>

您可以在<details>标签内使用任何 HTML 标签。可以是段落 < p >标签、文字格式标签、 < img >标签添加图片等。

现在让我们看看<details>标签的作用。下面我们有一个基本的例子，展示了如何使用带有<summary>标签的<details>标签:

在上面的例子中，我们使用了<summary>标签来为细节块提供一个定制的概要，当细节被隐藏时，它被显示给用户。

HTML <details>标签属性

这个元素除了一个属性open没有任何特定属性，虽然这个元素同时支持全局属性和事件属性。

open属性:

  • 如果该属性被添加到<details>标签而没有任何值，或者有任何值，那么默认情况下，详细信息文本将显示在网页上。

  • 该属性的默认值为 false 表示用户看不到细节。

这里有一个例子:

<details open>
    <summary>
        HTML &lt;details&gt; tag
    </summary>
    <p>Both DETAILS and SUMMARY elements are newly introduced in HTML5.</p>
    <p>
        Content of details element is not visible unless 
        open attribute of details being set, or user clicks 
        on the arrow control.
    </p>
</details>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

HTML <details>标签的默认 CSS 样式

details {
    display: block;
}

对 HTML <details>标签的浏览器支持

以下浏览器支持此属性:

  • 谷歌 Chrome 12+
  • Apple Safari 6+
  • Opera 15+

HTML <div>标签

原文：https://www.studytonight.com/html5-references/html-div-tag

HTML <div>标签用于将网页划分为不同的分区或部分**。<div>标签基本上充当了其他 HTML 元素的容器**。

  • <div>标签用于将网页上的 HTML 元素分组为部分。

  • 您也可以将 CSS (层叠样式表)应用于使用<div>标签分组的元素。

  • <div>标签不应该用在<p>标签里面，虽然你可以用在段落标签里面，如果在一个段落里你想把内容分成不同的部分。

  • 此外，这是一个块级元素。

要了解<div>标签交互- HTML 交互教程

<div>标签是除了display:block;之外没有自己特定样式的标签，因为它是块级元素，这意味着两个<div>标签不会内联显示，

HTML <div>标签-语法和用法

它既需要开始标签 ( <div>)也需要结束标签 ( </div>)。

以下是在 HTML 代码中使用此标记的语法:

<div>
    ...content here...
</div>

HTML <div>标签基本示例

为了理解<div>标签是如何有用的，让我们举一个例子，我们将开发一个基本的网页结构，其中我们将有一个顶部标题、一个左侧侧边栏、一个主体部分和一个页脚。我们将使用<div>标签在我们的网页上创建这些部分。

在下面的代码示例中，我们简单地使用了<div>标签来进行划分。正如您在输出中看到的，如果我们使用<div>标签而没有任何特定的样式，那么它所做的就是创建不可见的块，我们认为它就像 HTML 换行符一样，在单独的行中显示文本。

<div class="header">This is header</div>
<div class="body">
    <div class="sidebar">Sidebar</div>
    <div class="main-body">Main Body</div>
</div>
<div class="footer">This is footer</div>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

但是<div>标签是这样创建的，这样我们就可以使用 CSS 按照我们想要的样式来设计它。在下面的交互示例中，我们已经为上面的代码添加了样式。

在上面的例子中，我们可以在网页上创建的每个部分中使用更多的<div>标签。让我们看看如何做到这一点。

如上例所示，我们在主体内部使用了<div>标签。这是我们创建任何网页的方式。< div >标签是最常用的 HTML 标签之一。

<div class="main-body">
    <div id="title">Feedback Form</div>
    <div id="form-box">
        <div><input type="text" placeholder="feedback..."/></div>
        <div><input type="submit" /></div>
    </div>
</div>

如果你是初学者，不要被看到这么多

标签搞糊涂了。网页就是这样创建的。将各种 HTML 组件封装在<div>标签中是一个很好的做法。

HTML <div>标签属性

这个元素没有任何特定属性，虽然这个元素支持全局属性和事件属性。有一些常见的属性经常与<div>标签一起使用，如下所示:

| 属性 | 描述 |
| id | 它用于为<div>标签定义一个唯一 id |
| class | 它用于为<div>标签定义一个类名 |
| style | 该属性用于为<div>标签定义内嵌样式 |

HTML <div>标签的默认 CSS 样式

div {
    display: block;
}

对 HTML <div>标签的浏览器支持

以下浏览器支持此属性:

  • Firefox 1+

  • 谷歌 Chrome 1+

  • Internet Explorer 2+

  • Safari 1+

  • Opera 4+

HTML <datalist>标签

原文：https://www.studytonight.com/html5-references/html-datalist-tag

当用户在输入字段中输入某个值时，HTML <datalist>标签用于将预定义选项列表显示为向用户显示的建议。该标签启用表单上的自动完成功能；这意味着当用户开始在文本框中键入时，预定义单词的列表会被下拉以从中进行选择。

  • 我们使用<datalist>标签和<input>标签。要将数据列表元素与输入元素关联起来，我们需要为<datalist>标签提供一个id值，并为输入标签的list属性提供相同的值。

  • <option>标签( HTML <option>标签)作为<datalist>标签的子标签，用于指定要显示的选项列表。

HTML <datalist>标签-语法和用法

<datalist>标签需要开始(开启)标签和结束(关闭)标签。

以下是在 HTML 代码中使用数据列表标记的语法:

<datalist>
    <option value="..." />
    <option value="..." />
    ...
</datalist>

我们可以在 datalist 标签中使用任意多的<option>标签。

HTML <datalist>标签基本示例

在下面的代码示例中，我们有一个输入字段供用户输入他们最喜欢的汽车品牌，并且我们使用了<datalist>标签向用户提供一些默认建议。

这里需要注意的一点是，<datalist>标签用于提供一些预定义的选项类似于自动完成建议，用户可以输入一个不在数据列表选项中的值**。因此，这绝不像是选择下拉列表。**

HTML <datalist>标签属性

虽然此元素支持全局属性和事件属性，但它没有任何特定属性。

HTML <datalist>标签的默认 CSS 样式

datalist {
    display: none;
}

对 HTML <datalist>标签的浏览器支持

以下浏览器支持此属性:

  • Firefox 2+

  • 谷歌 Chrome 4+

  • Internet Explorer 9+

  • Apple Safari 3.1+

  • Opera 9+

HTML <dt>标签

原文：https://www.studytonight.com/html5-references/html-dt-tag

HTML <dt>标签用于在描述列表中添加术语，该列表是使用 < dl >标签创建的。有三个标签用于创建描述列表，它们是:

  1. <dl>标签

  2. <dt>标签

  3. <dd>标签

<dt>标签中的 dt 表示描述术语。<dt>标签始终用在<dl>标签内。为了提供<dt>标签中提供的术语描述，我们在<dt>标签后使用<dd> 标签。

还有，这是一个块级元素。

如果您想在网页上显示多个术语及其定义或描述，则必须使用描述列表、术语和描述标签来实现。

HTML <dt>标签-语法和用法

<dt>元素需要开始(开启)标签和结束(关闭)标签。

以下是在 HTML 代码中使用此标记的语法:

<dl>
    <dt>
        Term here
    </dt> 
    <dd>   
        Term description
    </dd>
</dl>

由于<dt>标签在描述列表标记<dl>中使用，因此出现了上述语法。

HTML <dt>标签基本示例

下面我们有一个展示如何使用 HTML <dt>标签的基本例子:

HTML <dt>标签属性

虽然此元素支持全局属性和事件属性，但它没有任何特定属性。

HTML <dt>标签的默认 CSS 样式

大多数浏览器使用这些默认的 CSS 设置:

dt {
    display: block;
}

对 HTML <dt>标签的浏览器支持

以下浏览器支持此属性:

  • Firefox 1+

  • 谷歌 Chrome 1+

  • Internet Explorer 2+

  • Apple Safari 1+

  • Opera 2.1+

HTML <dd>标签

原文：https://www.studytonight.com/html5-references/html-dd-tag

HTML <dd> ( 数据描述)标签用于提供使用 < dt >标签表示的术语的描述。<dd>标签和<dt>标签都用在<dl> ( HTML 描述列表)标签里面。

在<dd>标签里面可以使用换行符、添加超链接、使用段落、图像等。

HTML <dd>标签-语法和用法

<dd>标签需要开始(开启)标签和结束(关闭)标签。

以下是在 HTML 代码中使用 dd 标记的语法:

<dl>
    <dt>some term</dt>
    <dd>
        description of term
    </dd>
</dl>

<dd>标签总是与<dt>和<dl>标签一起使用。

HTML <dd>标签基本示例

下面我们有一个展示如何使用 HTML <dd>标签的基本例子:

HTML <dd>标签属性

虽然此元素支持全局属性和事件属性，但它没有任何特定属性。

HTML <dd>标签的默认 CSS 样式

大多数浏览器使用这些默认的 CSS 设置:

dd {
    display: block;
    margin-left: 40px;
}

对 HTML <dd>标签的浏览器支持

以下浏览器支持此属性:

  • Firefox 1+

  • 谷歌 Chrome 1+

  • Internet Explorer 2+

  • Safari 1+

  • Opera 2.1+

HTML <data>标签

原文：https://www.studytonight.com/html5-references/html-data-tag

在 HTML 中，每当你需要给你希望在网页上显示的一些数据分配一些自定义信息时，在这种情况下，你可以使用<data>标签。

例如，如果你有一个电子商务网站，或者你的网站上有一个商店页面，你可以在那里列出一些产品。产品有名称(很明显)和一些产品代码(像 SKU 号)，那么我们可以使用<data>标签，向网站用户显示产品名称，并且可以将产品代码添加到这个<data>标签，最终用户看不到，但是我们可以使用 JavaScript 代码来选择那个值。

<data>标签是 HTML5 中新增的**。**

HTML <data>标签-语法和用法

<data>标签需要开始(开启)标签和结束(关闭)标签。

<data value="somevalue">
    some text visible on webpage
</data>

HTML <data>标签基本示例

我们再举一个例子。如果你有一个论坛，你显示出顶级用户的名字让每个人看到。当我们在数据库中保存用户数据时，我们要么为每个用户行分配一个唯一的 id，要么分配一个唯一的用户名。我们可以使用<data>标签在网页上显示用户的名称，同时使用其value属性添加有用的用户 id 信息供我们的服务器端代码使用。

HTML <data>标签属性

该元素支持全局属性和事件属性。

value属性:

这个标签有一个特定的属性，它就是value属性。我们在上面的代码示例中也使用了这个属性。该属性用于存储不显示在网页上但在 DOM 中可用的数据，可以使用 Javascript 使用。

HTML5 <data>标签的浏览器支持

以下浏览器支持此属性:

  • 谷歌 Chrome 62.0+

  • Internet Explorer 13.0+

  • Firefox 22.0+

  • Opera 49.0+

  • Safari -不支持

HTML <dfn>标签

原文：https://www.studytonight.com/html5-references/html-dfn-tag

HTML <dfn>标签用于突出显示定义的术语，同时在网页上显示定义。

例如，如果在网页上，您想要显示一个定义，那么您可以在<dfn>标签中包含该定义的术语来突出显示它。默认情况下，它将以斜体样式出现。

  • 通过向<dfn>标签添加title属性及其对应值，将出现工具提示。当用户将鼠标悬停在所附文本上时，工具提示将显示标题属性的值。

  • 另外，这是一个内联元素。

HTML <dfn>标签-语法和用法

<dfn>元素需要开始(开始)标签和结束(结束)标签。

以下是在 HTML 代码中使用<dfn>标签的语法:

<dfn>
    some text
</dfn>

HTML <dfn>标签基本示例

下面我们有一个展示如何使用 HTML <dfn>标签的基本例子:

HTML <dfn>标签属性

虽然此元素支持全局属性和事件属性，但它没有任何特定属性。

HTML <dfn>标签的默认 CSS 样式

dfn {
    font-style: italic;
}

对 HTML <dfn>标签的浏览器支持

以下浏览器支持此属性:

  • 火狐-是的

  • 谷歌浏览器-是的

  • 互联网浏览器-是

  • 狩猎-是的

  • 歌剧-是的

HTML 标签 E

HTML <em>标签

原文：https://www.studytonight.com/html5-references/html-em-tag

HTML <em>标签用于将某些文本标记为强调文本，这意味着该文本相对于网页上的内容来说是重要的文本。这个标签通知搜索引擎抓取网页，网页上的哪些文本应该被强调或给予特殊的重要性。

在<em>标签中提供的文本被称为强调文本。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 这个强调的文字被浏览器、搜索引擎赋予了比其他内容更大的重要性。

  • 强调的文本以斜体格式显示在网络浏览器中，因此它的工作方式类似于 HTML < i >标签，但也为包含在该标签中的文本以及斜体样式提供了额外的重要性。

    外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  • 另外，这是一个内联元素。

HTML <em>标签-语法和用法

<em>标签需要开始(开启)标签和结束(关闭)标签。

下面我们有相同的基本语法:

<em>
    content here
</em>

HTML <em>标签基本示例

下面我们有一个<em>标签的基本例子:

HTML <em>标签属性

HTML <em>标签没有任何特定属性，但是支持全局属性和事件属性。

HTML <em>标签的默认 CSS 样式

em {
    font-style: italic;
}

对 HTML <em>标签的浏览器支持

以下浏览器支持此属性:

  • 火狐-是的

  • 谷歌浏览器-是的

  • Internet Explorer 2+

  • 狩猎-是的

  • Opera 2.1+

HTML <embed>标签

原文：https://www.studytonight.com/html5-references/html-embed-tag

HTML <embed>标签可用于将图像、视频、另一个网页等包含到我们的网页中。<embed>标签创建了一个容器，我们可以为它指定宽度和高度，在那个容器中，我们可以显示我们想要的任何东西，它可以是图像、视频、通过提供资源的网址的另一个网页。

<embed>标签得到了 internet explorer、Netscape Navigator、Windows 以及 Mac 平台的支持。

它使用三个强制属性，分别是:src、height和width。

HTML <embed>标签-语法和用法

<embed>元素是一个开放标签，这意味着它不需要一个结束标签。

<embed src="URL_OF_RESOURCE" height="..." width="..." />

这里src属性将提供我们想要嵌入/包含在我们的网页中的资源的网址。

HTML <embed>标签基本示例

让我们举一个简单的例子，我们将使用<embed>标签来包含图片和网页:

在上面的例子中，我们使用了<embed>标签，通过提供图像的 URL 并指定height和width属性来包含图像。在width属性中，我们提供了自动的值，即根据给定的高度自动调整宽度到保持长宽比。我们可以为width属性指定一个值，并为height属性提供值为自动。

HTML <embed>标签属性

<embed>标签支持全局属性和事件属性，具体有以下 4 个属性:

属性描述
src指定要嵌入的资源的网址。此属性是必需的。
width指定嵌入内容的宽度
height指定嵌入内容的高度
type指定嵌入内容的类型

不要不必要地使用标签

我们可以使用 < img >标签在网页中包含图像，使用 <视频>标签在我们的网页中添加视频，并包含任何其他网页作为片段，我们可以使用 < iframe >标签。<embed>标签可以用于一些特定的用例。

对 HTML <embed>标签的浏览器支持

以下浏览器支持此属性:

  • Firefox 1+

  • 谷歌 Chrome 2+

  • Internet Explorer 5.5+

  • Safari 1.3+

  • Opera 9.2+

HTML 标签 F

HTML <fieldset>标签

原文：https://www.studytonight.com/html5-references/html-fieldset-tag

HTML <fieldset>标签用于将相关的 HTML 元素分组到单个框中，方法是在分组的元素周围绘制一个边框框。

这主要用于我们在网页上创建表单时。将相关字段分组到一个表单中会以更有组织的方式显示表单字段。

假设有一个表单用于用户注册和登录过程。使用<fieldset>标签，我们可以将用于登录过程和用户注册过程的字段分组在两个单独的框中，这将使最终用户非常容易知道哪些表单字段用于登录，哪些用于注册。

这是一个块级元素。

HTML <fieldset>标签-语法和用法

<fieldset>元素需要开始(开启)标签和结束(关闭)标签。

下面给出了相同的所需语法:

<fieldset>
    some content or form fields
</fieldset>

我们没有必要只在表单域中使用<fieldset>标签。我们可以在任何地方使用它，在那里需要分组来将一组信息显示为一个。

使用<legend>标签提供标题

我们也可以在开始的<fieldset>标签之后使用<legend>标签来提供分组的标题。例如，要对登录表单字段进行分组，我们可以在<legend>标签中提供文本登录，该文本出现在边框上。

?<fieldset>
    <legend>Title Text</legend>
    some content or form fields
</fieldset>

HTML <fieldset>标签基本示例

下面我们有一个<fieldset>标签的基本例子，其中我们也使用了<legend>标签:

HTML <fieldset>标签属性

该元素支持全局属性和事件属性，以及下面给出的一些特定属性:

属性描述价值
disabled禁用文本区域或指定应禁用一组相关的表单元素有缺陷的
name指定字段集的名称文本
form指定字段集所属的一个或多个表单或引用表单的id。表单 id

HTML <fieldset>标签的默认 CSS 样式

fieldset {
    display: block;
    margin-left: 2px;
    margin-right: 2px;
    padding-top: 0.35em;
    padding-bottom: 0.625em;
    padding-left: 0.75em;
    padding-right: 0.75em;
    border: 2px groove (internal value);
}

对 HTML <fieldset>标签的浏览器支持

以下浏览器支持此属性:

  • Firefox 1+

  • 谷歌 Chrome 1+

  • Internet Explorer 4+

  • Safari 1+

  • Opera 4+

【Servlet学习笔记-1】使用Eclipse创建第一个Servlet并在html页面调用示例
软件生命周期中的攻防博弈
02-26 4610
说明：学习过程中参考了很多资料，但此文章主要在https://www.studytonight.com/servlet/creating-servlet-in-eclipse的基础上调整完成，如果侵权请联系我！Eclipse IDE is the most popular Java IDE used in the Industry. It is developed by an open sourc...
理解static关键字 In C++：第一重
漫步量化
08-14 461
Static Keyword in C++ Static is a keyword in C++ used to give special characteristics to an element. Static elements are allocated storage only once in a program lifetime in static storage area. And they have a scope till the program lifetime. Static k..
CSS 默认值
geng1025的博客
01-20 1012
下表显示了所有HTML元素的默认CSS浏览器值。
StudyTonight Web 中文教程（七）
龙哥盟
10-26 776
原文：StudyTonight 协议：CC BY-NC-SA 4.0 CSS 响应性网页设计 原文：https://www.studytonight.com/cascading-style-sheet/css-responsive-web-design 响应式网页设计是一种让网页在各种屏幕尺寸和设备(如笔记本电脑、台式机、智能手机、平板电脑等)上呈现良好的方式。任何使用响应网页设计(RWD) 创建的网站都可以根据查看环境自动调整布局和外观。 如今，响应布局成为任何网站最重要的功能，因为超过一半的互联
StudyTonight Web 中文教程（九）
龙哥盟
10-26 749
原文：StudyTonight 协议：CC BY-NC-SA 4.0 JavaScript 事件 原文：https://www.studytonight.com/javascript/javascript-events JavaScript 事件是交互式网页的构件。在 JavaScript 中，事件是指网络浏览器在浏览器屏幕上检测到任何用户移动时所检测到的动作。因此，从鼠标移动、键盘点击、悬停在任何特定的 HTML 元素上、表单提交、点击任何输入字段、从下拉列表中选择一个值，以及您在网页上所做的其他
StudyTonight Web 中文教程（八）
龙哥盟
10-26 977
JavaScript 是一种客户端基于对象的脚本语言，用于处理和验证客户端数据。JavaScript 还用于使网页的用户界面更加动态，使其对诸如鼠标移动、鼠标点击某个 HTML 元素、按钮点击等事件做出响应，使用它我们可以改善用户体验。JavaScript 是基于ECMAScript 标准的轻量级脚本语言。它在浏览器上执行，因此减少了服务器上的负载。JavaScript 还可以用来创建跨平台应用程序或 SaaS 应用程序，或者通过使用节点来创建后端服务器端应用程序。它是一种解释语言。
StudyTonight Web 中文教程（十一）
龙哥盟
10-26 840
PHP 是 web 开发中最广泛使用的服务器端脚本语言之一。像脸书、雅虎、维基百科等热门网站以及我们自己的《今夜研究》都是使用 PHP 开发的。PHP 之所以如此受欢迎，是因为它在服务器上学习、编码和部署非常简单，因此几十年来一直是初学者的首选。在本教程系列中，我们将涵盖 Php 语言从基础到高级的所有重要概念，还将为初学者分享一些现成的、有用的代码片段，以启动他们的 web 开发项目。X:跨平台，因为它支持 Windows、Mac OSX、Linux 等所有现代操作系统。A:阿帕奇网络服务器M。
StudyTonight Web 中文教程（十）
龙哥盟
10-26 810
原文：StudyTonight 协议：CC BY-NC-SA 4.0 JavaScript 用户定义的对象类型 原文：https://www.studytonight.com/javascript/javascript-userdefined-object-type 本教程涵盖了 JavaScript 中用户定义对象类型的概念。我们已经介绍了 JavaScript 对象，它是使用对象初始化器语法或对象构造器语法创建的，并且创建了一个Object类型的实例。 就像默认的对象类型一样，使用它我们可以在
StudyTonight Web 中文教程（十二）
龙哥盟
10-26 1110
面向对象编程是一种与类对象的概念以及围绕这两个概念的各种其他概念相关联的编程风格，如继承、多态、抽象、封装等。面向对象程序设计的方式是，人们在编程时应该关注一个对象，而不是过程。物体可以是我们在周围看到的任何东西。它可以是一个人(具有一些属性，如姓名、地址、DOB 等)、一把椅子(由大小、材料、成本等描述)、一所学校(由地点、学生实力、结果等描述)等。面向对象编程使编程接近现实生活，因为我们总是在处理一个对象，对它执行操作，使用它的方法和变量等。类名应该以字母开头。类名不应是保留的 PHP 关键字。
StudyTonight Web 中文教程（五）
龙哥盟
10-26 810
原文：StudyTonight 协议：CC BY-NC-SA 4.0 CSS 表单 原文：https://www.studytonight.com/cascading-style-sheet/css-forms 基本上，表格是任何网站非常重要的一部分。这是获取用户信息和处理请求的一种方式。表单为应用程序的几乎每一次使用提供了控件。借助表单控件和表单字段，我们可以请求少量和大量的信息，如用户标识和密码、计费信息、作业申请等。 CSS 中Forms的基本结构 要通过表单获取信息，首先，我们必须学会如何创
StudyTonight Web 中文教程（六）
龙哥盟
10-26 855
原文：StudyTonight 协议：CC BY-NC-SA 4.0 CSS 伪类 原文：https://www.studytonight.com/cascading-style-sheet/css-pseudoclass CSS 伪类是带有前置冒号的 CSS 特殊字符，用于向元素添加特殊效果。CSS 伪类与 CSS 选择器一起使用，为任何现有的 HTML 元素提供特殊效果。 语法 selector: pseudo-class { property: value; } 示例 :悬停用于在光标
Python库 | studytonight-zh-2022.3.20.0.tar.gz
04-15
资源分类：Python库 所属语言：Python 资源全名：studytonight-zh-2022.3.20.0.tar.gz 资源来源：官方 安装方法：https://lanzao.blog.csdn.net/article/details/101784059
100 C++ Programs with Output For Students and Professionals 无水印pdf
09-22
100 C++ Programs with Output For Students and Professionals 英文无水印pdf pdf所有页面使用FoxitReader和PDF-XChangeViewer测试都可以打开 本资源转载自网络，如有侵权，请联系上传者或csdn删除 ...
studytonight-zh-2***.*.**.*：Python库新版本发布
该资源是一个Python库文件，名为"studytonight-zh-2***.*.**.*.tar.gz"。这个库文件是一个开源资源，它的主要作用是提供给Python开发者使用，从而使得开发者在编程过程中能够更加便利地实现相关功能。 这个库文件...
小记:把react项目从web迁移到electron
iamtsfw的专栏
06-15 110
使用vite构建,包含了react react-router-dom tailwindcss mui 主副进程通讯。routemain.jsx 路由定义文件。company.jsx 示例文件。终端里:npm install。解压后使用vscode打开。然后npm run dev。home.jsx 主页文件。main.jsx 启动文件。windows系统计算机。
前端面试专栏-基础篇：6. 跨域方案全对比（CORS/JSONP/Nginx）与安全攻防
爱分享的程序员
06-13 1297
协议（Protocol）：如http、https、ftp等域名（Domain）：包括主域名和子域名端口（Port）：默认端口可以不显式写出只有当这三个要素完全相同时，才被认为是同源。以下是一些典型示例说明：（HTTP协议）（HTTPS协议）→ 不同源（主域名）（子域名）→ 不同源（完整域名）（不同顶级域名）→ 不同源（8080端口）（8081端口）→ 不同源（默认80端口）（指定8080端口）→ 不同源。
随记 minio的图片跨域问题
zqx_7的博客
06-11 272
文章摘要：开发时使用IP访问无问题，上线后因IP与域名不同源出现跨域问题。尝试通过nginx代理但误指向前端静态资源。解决方案是单独为图片访问地址配置子域名：先绑定IP，申请SSL证书（支持动态域名），然后正确配置nginx代理规则。最终可通过配置好的专属域名访问图片资源，有效解决跨域问题。整个处理过程涉及域名绑定、SSL配置和nginx代理设置三个关键步骤。（148字）
前端错误捕获
最新发布
棉花没有糖的博客
06-15 586
/ 使用try {throw new NetworkError('请求失败', res.status);showToast(`网络错误${} } // 使用 try {throw new NetworkError('请求失败' , res . status);showToast(` 网络错误 ${ error . statusCode } `);} }} } // 使用 try {throw new NetworkError('请求失败' , res . status);
v-bind 与 v-model 的区别与联系详解
weixin_51288065的博客
06-10 903
理解二者区别能避免常见错误，在表单处理、组件通信等场景做出正确选择。v-bind 构建数据通道，v-model 实现动态交互，共同构成 Vue 数据驱动的核心机制。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值