标签：Web 教程示例标签元素 HTML StudyTonight CSS 属性

StudyTonight Web 中文教程（一）

原文：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>标签支持全局属性和事件属性以及一些常见属性如下:

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属性的五个值:

让我们看看<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 tag example

我们只能有一个基本网址，并且不应该有一个以上的基本网址。
所以 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 文档时使用。

HTML body tag example

<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 元素或网页组件之间添加一些空间。

HTML br Tag example

需要换行符来区分网页上任何文本的不同部分。虽然<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属性，使用该属性可以创建三种按钮控件，它们是:提交按钮、重置按钮和正常按钮。

三种按钮:

提交按钮:通过将type属性设置为提交而创建
重置按钮:通过将type属性设置为来重置
正常按钮:通过将type属性设置为按钮而创建

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

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

其所需语法如下:

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

HTML `<button>`标签属性

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

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 中的

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

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

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

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

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

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

<canvas>
    ...
</canvas>

HTML `<canvas>`标签属性

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

HTML `<canvas>`标签基本示例

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

1.简单`<canvas>`标签

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

<!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>

HTML col tag example

在下面的例子中，我们有 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 tag example

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>`标签属性

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

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>

example of HTML dialog tag

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>标签中提供的文字。

using HTML details tag

当我们使用<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>

Example of HTML details tag

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>

HTML div tag example

但是<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>标签一起使用，如下所示:

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 >标签创建的。有三个标签用于创建描述列表，它们是:

<dl>标签
<dt>标签
<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>标签中提供的文本被称为强调文本。

bold and strong, emphasized and italic HTML tags

这个强调的文字被浏览器、搜索引擎赋予了比其他内容更大的重要性。
强调的文本以斜体格式显示在网络浏览器中，因此它的工作方式类似于 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+

HTML `<footer>`标签

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

<footer>标签用于定义文档的页脚。或者用更简单的话来说，我们可以创建网页/网站的页脚。

<footer>标签在 HTML5 中是新的。<footer>标签可用于保存各种信息，如与网页或网页某一部分相关的链接和版权数据。
<footer>标签用在<body>标签内部。<footer>标签需要开始(开始)标签和结束(结束)标签。
<footer>标签是不是切片内容，因此不引入新的切片。
<footer>标签是一个结构元素，即，用于识别页面、文档、文章或部分的页脚。
还有，这是一个块级元素。

`<footer>`标签通常包含:

作者信息，
版权信息，
联系信息，
网站地图，
返回顶部链接等。

HTML `<footer>`标签-语法和用法

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

<footer>
    ..content here
</footer>

HTML `<footer>`标签基本示例

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

另一个例子:

在这个例子中，我们将向页脚添加一些链接，这通常是大多数网站的情况。

HTML `<footer>`标签属性

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

HTML `<footer>`标签的默认 CSS 设置

footer {
    display: block;
}

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

以下浏览器支持此属性:

Firefox 4+
谷歌 Chrome 6+
Internet Explorer 9+
Apple Safari 5.1+
Opera 11.1+

HTML `<figure>`标签

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

HTML5 <figure>标签用于分组或注释各种图表、图像、插图和代码片段。

这个<figure>标签是 HTML5 中新引入的。
图形可以是任何文档的插图、流程、任何图像或代码片段或任何文档。
您可以在图形元素中定义各种元素，如code、pre和img。
还有，这是一个块级元素。

HTML `<figure>`标签-语法和用法

<figure>标签需要开始(开启)标签和结束(关闭)标签。以下是所需的语法:

<figure>
    ...content here
</figure>

HTML `<figure>`标签基本示例

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

HTML `<figure>`标签属性

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

HTML `<figure>`标签的默认 CSS 设置

默认情况下，图形元素中会添加一个默认边距。

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

如果你想删除默认的边距，你可以使用 CSS 样式margin: 0 auto;，我们在上面的例子中已经演示过了。

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

以下浏览器支持此属性:

Firefox 4+
谷歌 Chrome 6+
Internet Explorer 9+
Safari 5.1+
Opera 11.1+

HTML `<figcaption>`标签

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

HTML <figcaption>标签用在 HTML 图形标签到中，为图形元素的内容提供标题。

这是 HTML5 中新引入的标签

*** <figcaption>标签也被称为图形元素的第一个也是最后一个子元素。

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

**## HTML <figcaption>标签-语法和用法

<figcaption>元素需要开始(开启)标签和结束(关闭)标签。以下是相同的语法:

<figure>
    <figcaption>
        ...
    </figcaption>
</figure>

HTML `<figcaption>`标签基本示例

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

HTML `<figcaption>`标签属性

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

HTML `<figcaption>`标签的默认 CSS 设置

figcaption {
    display: block;
}

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

以下浏览器支持此属性:

Firefox 4+
谷歌 Chrome 6+
Internet Explorer 9+
Apple Safari 5.1+
Opera 11.1+

HTML `<form>`标签

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

表单由多种不同类型的元素组成，用于接受用户输入，例如文本输入、复选框、文本区域(用于长文本)等。如果我们想在网页中创建一个表单，我们必须使用 HTML <form>标签。

在表单中，纯文本和 HTML 元素用于构建表单。
表单内部使用了各种不同的 HTML 元素，如输入文本、复选框、单选按钮，通过允许任何用户输入信息，使表单具有交互性。
开始和结束<form>标签指示浏览器关于表单的开始和结束点。
此外，这是一个块级元素。

HTML `<form>`标签-语法和用法

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

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

<form>
    ...content
</form>

HTML `<form>`标签属性

<form>标签支持全局属性和事件属性。下面给出了一些常见属性:

HTML `<form>`标签基本示例

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

<!doctype html>
<html>
    <head>
        <title>
            Example of Form tag
        </title>
    </head>
    <body>
        <p>Starting of Form</p>
        <form>
            This is our First Form
        </form>
        <p>Ending of Form</p>
    </body>
</html>

形态的开始
这是我们的第一形态
形态的结束

在上面的代码中，我们简单地使用了开始和结束<form>标签，并且添加了纯文本。这只是为了说明 HTML <form>标签也可以和简单的纯文本一起使用。但这不是它的目的。因此，让我们在表单中添加一些表单元素，以便为用户输入做好准备。

使用`action`和`method`属性:

在 HTML <form>标签中，action和method是两个最重要、最常用的属性。

<form action="somefile.php" method="GET">
    <label for="name">Name:</label>
    <input id="name" type="text" name="name"/>
    <input type="submit" value="Submit">
</form>

在上面的代码示例中，您可以看到我们添加了action属性，其值为文件名。该文件将根据您的选择接收获取或发布请求中的表单值。根据您用来处理表单值的后端编程语言，您可以接收 GET 和 POST 值，然后对这些值执行任何操作，可能会将它们保存在数据库中或更新数据库中的一些现有值。

如果将action属性留空，则表单值将被提交到当前页面(在该页面上有表单)，因此action属性的空值被解释为 SELF URL 。

HTML `<form>`示例:

让我们制作另一个表单，表单中有几个字段接受用户输入。

带有字段集、图例和标签的 HTML 表单:

在本例中，我们将向表单中添加一些元素。您可以学习更多关于使用这些标签的知识: HTML <fieldset>标签、 HTML 图例标签和 HTML <label>标签。

<form action="" method="POST">
    <fieldset>
        <legend>Gender</legend>
        <input type="radio" name="gender" value="male"> Male
        <input type="radio" name="gender" value="male"> Female
        <input type="radio" name="gender" value="male"> Others
    </fieldset>
</form>

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

以下浏览器支持此属性:

Firefox 1+
谷歌 Chrome 1+
Internet Explorer 2+
Apple Safari 1+
Opera 4+

HTML 标签 H

HTML 标题标签——`<h1>`、`<h2>`、`<h3>`、`<h4>`、`<h5>`、`<h6>`

原文：https://www.studytonight.com/html5-references/html-heading-tags

在一个 HTML 文档中为了提供不同的标题级别标题元素被使用。创建标题的不是 <标题> 标签，而是<h1>、<h2>、<h3>、<h4>、<h5>和<h6>，其中<h1>用于第一标题、<h2>用于第二标题，第二标题为<h1>子标题，以此类推。

标题元素用于为网页上显示的文本创建标题。

例如，如果你想在你的 HTML 页面上显示一篇文章，那么这篇文章是用普通的纯文本写的，而它的标题是用粗体大文本写的。在这种情况下，标题元素用于提供标题(子标题)和剩余文本之间的区别。

标题元素被定义为 < hn > ，其中 n 的范围是从 1 到 6 。

如果你想把所有的标题元素组合成一个组，那么你可以使用<hgroup> ... </hgroup> 元素，把标题标签放在开始和结束<hgroup>标签里面，这是在 HTML 中新引入的。

同样，这些是块级元素。

HTML `<hn>`标签-语法和用法

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

其所需语法如下:

<h1>.....content here ...</h1>

<h2>.....content here....</h2>

<h3>.......content here...</h3>

<h4>.....content here.....</h4>

<h5>.....content here...</h5>

<h6>.....content here.....</h6>

请再次注意这里<hn>不是标签， n 只是表示创建 6 个标题标签所使用的 6 个数字，如上例所示。

HTML `<hn>`标签基本示例:

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

在上面的代码示例中，我们还使用了<hgroup>标签将标题 4、5 和 6 组合在一起。

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

以下浏览器支持此属性:

Firefox 1+
谷歌 Chrome 1+
Internet Explorer 2+
Apple Safari 1+
Opera 4+

HTML `<hr>`标签

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

HTML <hr>标签用于表示水平规则或者用简单的话来画一条水平线，将网页上显示的内容分成几个部分。

比如你先放一个标题，再放一个段落，然后在开始下一个标题之前你要加一条横线来明确区分这两个标题，在这种情况下你可以使用 HTML <hr>标签。

横线用于在浏览器窗口上绘制横线。
用于将一个 HTML 页面分成不同的部分。
它不包含任何内容，因为它是一个空标签。
水平规则也被用作HTML 页面内容之间的分隔符。
这是一个块级元素。

HTML `<hr>`标签-语法和用法

<hr>标签不需要结束标签，因此是一个空标签。以下是相同的语法:

<hr/>
<!-- or -->
<hr>

在空的 HTML 标签中，没有必要在右尖括号前加正斜杠。

HTML `<hr>`标签属性

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

HTML `<hr>`标签基本示例

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

在上面的代码示例中，我们还展示了如何将一些样式添加到<hr>标签中以修改水平规则的外观。

HTML `<hr>`标签的默认 CSS 设置

hr {
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
}

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

以下浏览器支持此属性:

Firefox 1+
谷歌 Chrome 1+
Internet Explorer 2+
Apple Safari 1+
Opera 4+

HTML `<html>`标签

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

HTML <html>标签是网页上位于<!doctype>元素之后的第一个元素。所有其他的 HTML 标签都在开始和结束的<html>标签里面。

它也被称为根元素/主元素，需要出现在所有的 HTML 文档或网页中。
所有其他元素，如<head>、<title>、<body>、<p>、<audio>、<img>等都需要在开闭<html>标签中指定。
该元素允许浏览器识别文档类型。

HTML `<html>`标签-语法和用法

<html>标签需要开始(开启)标签和结束(关闭)标签。它所需的语法是:

<html>
    <!-- entire HTML document comes here -->
</html>

HTML `<html>`标签基本示例

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

如上例所示，<html>标签是添加了所有其他 HTML 标签的标签。

HTML `<html>`标签属性

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

`<html>`标签的默认 CSS 设置

html {
    display: block;
}

html:focus {
    outline: none;
}

对`<html>`标签的浏览器支持

以下浏览器支持此属性:

Firefox 1+
谷歌 Chrome 1+
Internet Explorer 2+
Apple Safari 1+
Opera 2.1+

HTML `<header>`标签

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

在超文本标记语言中，使用来定义超文本标记语言文档的标题部分<header>标签。

在<header>标签中，可以使用<h1>、<nav>、<ul>、<a>等其他 HTML 元素。
<header>标签是 HTML5 中新引入的。这个标签更像是一个分组标签，用于将其他标签分组在一起，这些标签用于在网页上创建标题部分。
基本上是用在一个 HTML 页面上提供介绍性内容。
还有，这是一个块级元素。

HTML `<header>`标签-语法和用法

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

<header>
    ...content here
</header>

HTML `<header>`标签基本示例

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

HTML `<header>`标签属性

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

HTML `<header>`标签的默认 CSS 设置

header {
    display: block;
}

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

以下浏览器支持此属性:

Firefox 4+
谷歌 Chrome 6+
Internet Explorer 9+
Apple Safari 5.1+
Opera 11.1+

HTML `<head>`标签

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

HTML <head>标签放置在开始<html>标签和开始<body>标签之间。

在<head>标签内，我们使用<meta>标签和其他类似标签放置元数据。这些元信息不会像 HTML 文档标题、字符集、链接、等那样显示给用户。
在<head>标签内部，我们使用<title>标签，该标签用于定义网页的标题。
我们还可以在<head>标签中使用<base>标签，该标签用于为所有相关网址提供一个基本网址。
您也可以在<head>标签中使用<style>标签为网页提供 CSS 样式。

HTML `<head>`标签-语法和用法

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

<head>
    ...
</head>

HTML `<head>`标签基本示例

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

HTML `<head>`标签属性

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

支持的其他 HTML 标记:

这些是一些 HTML 标记，用于表示用户在网页上看不到的元数据或其他网页信息，但这些是网页所必需的。

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

以下浏览器支持此属性:

Firefox 1+
谷歌 Chrome 1+
Internet Explorer 2+
Apple Safari 1+
Opera 2.1+

HTML 标签 I

HTML `<i>`标签

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

HTML i 元素用于使句子中的某些单词或术语出现在斜体样式中，这只是略微倾斜的文本。

what is italic style

这里的 i 代表斜体文字就像 b 代表粗体文字 ( HTML < b >标签)一样。
它位于物理样式元素下，用于改变网页上文本的外观。
网络浏览器以斜体样式呈现<i>元素中包含的文本。
强调标签或 HTML <em>标签是斜体标签的一个有意义的版本。
我们可以用斜体标注文本，表示其与普通文本不同。

HTML `<i>`标签-语法和用法

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

另外，这是一个内联元素。以下是相同的基本语法:

<i>
    some text
</i>

HTML `<i>`标签基本示例

下面我们有一个相同的基本例子:

HTML `<i>`标签属性

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

HTML `<i>`标签的默认 CSS 样式

i{
    font-style: italic;
}

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

以下浏览器支持此属性:

Firefox 1+
谷歌 Chrome 1+
Internet Explorer 2+
Safari 1+
Opera 2.1+

HTML `<input>`标签

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

在 HTML 中，<input>标签用于创建不同类型的输入字段，当我们必须在网页上接受用户输入时，这些字段以 HTML 形式使用。

在网页上创建表单的主要目的是获取用户输入的详细信息，为了帮助用户，我们可以使用多种不同的格式进行用户输入，如文本框、单选按钮、复选框、下拉列表等。

这些不同类型的 HTML 形式的输入字段可以使用<input>标签来创建。

对于使用不同类型的输入字段，需要设置<input>标签的type属性。

超文本标记语言输入类型:

type属性用于在 HTML 表单中创建不同类型的输入字段。HTML5 中新引入了一些类型的输入标签。我们在下面介绍了其中的大部分内容:

hidden:可以使用输入元素并将其类型设置为“隐藏”来创建隐藏字段。隐藏字段可用于将信息从一个表单传递到另一个表单，而无需强制用户重新输入信息，浏览器也不会显示该信息。
tel:输入控件的tel类型用于以表格的形式输入电话号码。默认情况下，这种类型的输入字段只接受数字作为输入，而不接受字母。
URL:输入控件的URL类型用于输入网页的有效路径。任何有效的网址都应该有:协议、域名和路径名。无论何时提交表单，都会自动验证网址的值。
datetime-local:用于以网页形式从用户处获取日期和时间的输入。用户可以根据您的时区选择日期和时间。
number和range:输入控件的number类型只允许用户输入数字。如果任何用户试图输入任何字母，那么它不会接受，并且还会给用户一条只输入数字的信息。当我们希望用户输入指定范围内的值时，使用range 类型的输入控件。
file:file类型的输入允许您选择存储在本地计算机中的文件，并在提交表单时将其发送到服务器。size、maxlength和accept是该输入类型使用的少数属性。
checkbox:复选框用于选择或取消选择表单上显示的一个或多个项目。可以通过将输入类型设置为checkbox来创建复选框。
radio:一种radio类型用于为多个选项创建单选按钮，允许用户一次选择任意一个项目。单选按钮被称为包含多个项目的列表，用户必须从中选择一个项目。
submit:只要用户点击提交按钮，表单所有字段中输入的信息就会被发送到<form>标签的action属性中指定的网址。
reset:当任何用户点击重置按钮时，所有字段的信息都会被清除并设置为默认值或空白值。可以通过将type属性设置为“重置来创建。
datetime、date、month、week、time:以日期时间、日期、月份、星期和时间的形式进行输入，可以分别使用这些带有type属性的值。
email:此类型用于从最终用户处输入有效的电子邮件地址，该地址应包含一个 @符号和一个()。)圆点。电子邮件的价值会在提交表单时自动验证。使用电子邮件的multiple属性，可以在一个字段中输入多个电子邮件地址。
password:这个表单控件是用来保护用户不想与他人分享的秘密信息的。它类似于文本框，但输入的文本不是可读形式，因为星号符号或点以字符形式显示。
text:这是最简单的输入字段形式，在其中使用可以输入纯文本。

HTML `<input>`标签-语法和用法

<input>元素是一个空标签。

此外，这是一个内联元素。其基本语法如下:

<input type=""/>

这里type属性可以具有上面列表中指定的任何值。除了类型属性之外，还有许多其他属性，我们将在下一节中列出。

HTML `<input>`标签属性

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

HTML `<input>`标签基本示例

在这个例子中，有三个输入字段，即用户名、密码和文件输入。

在上面的例子中，我们在输入字段中使用了三种不同的类型，以及三个属性，即autocomplete、maxlength和size。我们建议您使用更多类型的输入字段和属性，看看它们如何影响输入字段。

使用复选框输入字段:

现在我们将创建一个带有多个选项的简单表单，供用户以复选框的形式选择。

在上面的例子中，我们已经创建了多个复选框以及一个文本字段和一个提交按钮。

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

以下浏览器支持此属性:

Firefox 1+
谷歌 Chrome 1+
Internet Explorer 2+
Apple Safari 1+
Opera 2.1+

HTML `<img>`标签

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

使用 HTML <img>标签，我们可以在网页中插入图片。现在几乎所有的网页都有图片。

<img>标签有各种属性，分别是src、lang、dir、alt等。我们将在本教程中结合示例介绍这一点。

在<img>标签的所有属性中，只有src属性是必需的，而所有其他属性都是可选的，因为src属性将图像的路径显示为值。

这个<img>标签可以插入任何一种图像。支持的不同图像格式有: gif 、 jpeg 、 png 、 svg 等。

HTML `<img>`标签-语法和用法

<img>元素是一个空标签，这意味着它只需要一个开始标签或开始标签。

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

其语法如下:

<img src="URL_OF_IMAGE" />

在src属性中，您必须添加我们想要显示的图像的完整路径或网址。

HTML `<img>`标签属性

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

HTML `<img>`标签基本示例

下面我们有几个<img>标签的例子:

例 1:

在下面的例子中，我们显示了一个 GIF 图像，并添加了一些属性:

例 2:

以巴布亚新几内亚格式显示图像:-

HTML `<img>`标签的默认 CSS 设置

img {
  display: inline-block;
}

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

以下浏览器支持此属性:

Firefox 1+
谷歌 Chrome 1+
Internet Explorer 2+
Apple Safari 1+
Opera 2.1+

HTML `<ins>`标签

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

HTML <ins>标签用于指示已经插入到文档中的文本。

<ins>标签主要用于提供信息关于对任何网络文档或网页所做的更改或更新。
它将<ins>标签中包含的文本渲染为下划线文本。

因此，如果您的网页上有一些可用的文本信息，并且您对文本进行了一些更新，那么您可以使用<ins>标签来通知浏览器网页上的文本的某个部分是新插入或更新的。

HTML `<ins>`标签-语法和用法

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

其基本语法如下:

<ins>
    some text
</ins>

HTML `<ins>`标签基本示例

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

在上面的代码示例中，我们在通常的段落标记<p>中有一些文本，而最后一行在<ins>标签中，以显示部分文本被插入到原始文本中。

这个标签只是为了遵循正确的 HTML 用法，并且很有用，因为这样像谷歌这样的搜索引擎就可以知道网页上的文本/内容已经被更新或者插入了新的部分。例如，在任何网站的条款和条件页面或隐私政策页面上，如果添加了一些新文本，则可以使用<ins>标签。

HTML `<ins>`标签属性

这个元素没有任何特定的属性，但是它有两个经常与常用的全局属性和事件属性一起使用的属性。

与<ins>标签一起使用的两个属性是:

cite:这是用来指定一个 URL，表明文本为什么被更新或更改。
datetime:用于在文本中指定上次更新的日期和时间。日期时间的默认格式为 YYYY-MM-DDThh:mm:ssTZD

让我们举个例子:

<!doctype html>
    <head>
        <title>
            Example of The INS element
        </title>
    </head>
    <body>
        <p>HTML stands for Hypertext Markup Language.</p>
        <p>HTML is the basic building block of any webpage. It is used with CSS and Javascript to create interative web pages.</p>
        <p><ins cite="https://en.wikipedia.org/wiki/HTML5" datetime="2014-10-28T00:00:00TZD">HTML5 is the latest version of HTML</ins></p>
    </body>
</html>

HTML `<ins>`标签的默认 CSS 设置

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

ins {
    text-decoration: underline;
}

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

以下浏览器支持此属性:

Firefox 1+
谷歌 Chrome 1+
Internet Explorer 4+
Apple Safari 1+
Opera 4+

HTML `<iframe>`标签

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

HTML <iframe>标签基本上代表一个内联框架元素，用于将一个网页插入到另一个网页中。

<iframe>标签用于表示嵌套浏览上下文。
在<iframe>标签的帮助下，一个人可以很容易地将其他的 HTML 页面嵌入到当前的 HTML 页面中。
单个文档中可以有任意数量的 iframe 元素。
如上所述，<iframe>标签用于嵌套浏览上下文，在这种情况下，每个嵌入式浏览上下文都有自己的两件事:会话历史和文档。
父浏览上下文:****浏览上下文用于嵌入另一个上下文。
窗口对象:没有任何父级或最顶层浏览上下文的对象通常被称为窗口对象。

不要被浏览上下文这个术语所迷惑，它指的是当前的浏览器会话。

例如，如果您在嵌入了 iframe 的浏览器中打开一个网页，那么它就像是在当前浏览器窗口中打开了一个小浏览器窗口，显示一些其他的 web URL。下面显示的实时 HTML 示例是使用<iframe>标签在当前网页中包含另一个网页的示例。

HTML `<iframe>`标签-语法和用法

<iframe>元素需要开始(开始)标签和结束(结束)标签。所需语法如下:

<iframe src="SOME_URL"></iframe>

src属性是一个强制属性，用于指定将在 iframe 中显示的网页的网址。

HTML `<iframe>`标签属性

<iframe>标签支持全局属性和事件属性，除了一些特定属性，如下所示。

HTML `<iframe>`标签基本示例

这里我们有一个相同的基本例子:

在上面的例子中，我们使用了 src 属性来提供我们想要在 iframe 中显示的网页的 URL。另外，我们使用了width和height属性。我们建议您使用一些属性来查看它们如何影响<iframe>元素。这样你就会明白 iframe 是如何工作的。

要记住的要点:

当使用<iframe>标签在您的网站上嵌入任何其他网页时，您必须确保您嵌入的页面来自受信任的商店，并且网站允许其页面在 iframes 中使用。

如果您有一个要限制 iframe 选项的网站，根据该网站，任何人都不能在 iframe 中使用您的网站 URL，您可以在服务器上使用以下选项:

X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN

设置以上选项后，您网站的页面将不允许包含在任何其他使用<iframe>元素的网站上，只允许包含在您自己的域名上。

HTML `<iframe>`标签的默认 CSS 设置

下面给出了大多数浏览器使用的默认 CSS 设置:

iframe:focus {
    outline: none;
}

iframe[seamless] {
    display: block;
}

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

以下浏览器支持此属性:

Firefox 1+
谷歌 Chrome 1+
Internet Explorer 3+
Safari 1+
Opera 5+

HTML 标签 K

HTML `<kbd>`标签

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

HTML <kbd>标签代表键盘输入元素。该标签用于包含任何代表键盘输入的文本。

<kbd>标签属于短语标签的范畴。
此外，这是一个内联元素。
<kbd>标签表示一段内联文本，表示从键盘、语音输入或键盘的任何其他文本输入的形式的文本输入。所以如果你要在网页的任何地方写任何键盘命令，比如粘贴文本按 CTRL + V ，那么 CTRL 和 V 就是键盘输入，应该包含在<kbd>标签中。
每当一个<kbd>标签与另一个<kbd>标签嵌套时，它就代表一个实际的键。
每当<kbd>嵌套在<samp>标签中时，它表示输入已经被系统响应给用户。

HTML `<kbd>`标签-语法和用法

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

其所需语法如下:

<kbd>
    content goes here
</kbd>

HTML `<kbd>`标签基本示例

下面我们有一个基本的例子，我们在网页文本中提到键盘键的地方使用了<kbd>标签。

现在，我们将向您展示如何在<samp>标签中使用<kbd>标签。每当<kbd>标签嵌套在<samp>标签中时，它表示系统将输入反馈给用户:

HTML `<kbd>`标签属性

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

HTML `<kbd>`标签的默认 CSS 设置

<kbd>标签的默认 CSS 设置或值如下所示:

kbd {
    font-family: monospace;
}

HTML5 `<kbd>`标签的浏览器支持

以下浏览器支持此属性:

Firefox 1+
谷歌 Chrome 1+
Internet Explorer 2+
Apple Safari 1+
Opera 4+

HTML 标签 L

HTML `<li>`标签

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

HTML <li>标签表示列表项。该标签与<ul>、<ol>等一起使用。标签将列表项添加到网页上的任何 HTML 列表中。

当您想在列表中添加一个项目时，使用该标签。
在简单菜单和无序列表(<ul>标签)列表项使用项目符号显示在中，而在有序列表(<ol>标签)中，列表项使用数字或字母字符显示。我们将在下面的示例中看到这两者的外观。
另外，<li>是一个 b 锁级元素。

HTML `<li>`标签-语法和用法

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

其所需语法如下:

<li>
    List item text
</li>

HTML `<li>`标签基本示例

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

在上面的代码示例中，我们将<li>标签包含在<ul>标签中，因此在输出中我们得到了一个无序列表，其中列表项前面显示有项目符号。我们总是可以使用 CSS 以我们喜欢的任何形式来设置列表项的样式。

使用`<ol>`标签内的`<li>`标签:

<ol>
    <li>first item</li>
    <li>second item</li>
    <li>third item</li>
</ol>

HTML `<li>`标签属性

这个元素有一个有用的属性type，它还支持全局属性和事件属性。

`type`属性:

该属性用于修改列表项的类型，通过该属性我们可以修改每个列表项前面显示的项目符号的样式。

下面是使用该属性的语法:

<li type="1|a|A|i|I|disc|circle|square"> 
    List Item Text
</li>

属性值:

当<li>标签与<ol>标签一起使用时:

1: 这是默认值，用于指定列表编号应该使用 1、2、3 等数值。
a: 当我们将类型指定为‘a’时，这意味着列表的编号将使用小写字母完成，如 a、b、c 等。
A: 当我们将类型指定为“A”时，这意味着列表的编号将使用大写字母来完成，如 A、B、C 等。
i: 当我们将类型指定为“I”时，这意味着列表的编号将使用小写罗马数字完成，如 I、ii、iii 等。
I: 当我们将类型指定为“I”时，这意味着列表的编号将使用大写罗马数字完成，如 I、II、III 等。

当<li>标签与<ul>标签一起使用时:

盘:这是默认值。它会在列表项前创建一个填充的圆圈，您也可以在上面的示例中看到。
圆:该选项将创建一个未填充圆。
正方形:这将创建一个填充的正方形。

尝试在上面的实时终端中使用所有这些，看看它如何更改列表项。

HTML `<li>`标签的默认 CSS 设置

下面给出了大多数浏览器使用的默认 CSS 设置:

li {
    display: list-item;
}

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

以下浏览器支持此属性:

Firefox 1+
谷歌 Chrome 1+
Internet Explorer 2+
Safari 1+
Opera 4+

HTML `<label>`标签

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

HTML <label>标签用于向网页上的任何 HTML 元素添加标题或标签文本。

有一点很重要，Label 是不直接关联表单；虽然标签是通过表单控件与表单间接关联的。
标签控件:当标签用于标记表单控件时，它被称为标签元素的标签控件；一个输入可以关联多个标签。
无论何时点击<label>，我们都知道标签与表单控件相关联；然后，还会为关联的控件引发生成的 click 事件。
<label>标签属于内嵌元素的范畴。
标签对于屏幕阅读器用户来说是有益的，因为当他们读出标签时变得容易了。
标签对于那些在点击一个小区域(比如一个简单的复选框)时遇到问题的用户来说也是有益的；每当用户点击标签内的文本时，它就会增加点击面积。

HTML `<label>`标签-语法和用法

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

以下是相同的所需语法:

<label>
    Label Text
</label>

HTML `<label>`标签属性

<label>标签支持全局属性和事件属性，与<label>标签一起使用的一些常见属性是:

| 属性 | 描述 | 值 |
| for | 此属性用于指定标签绑定到的表单域。 | 元素 id |
| form | 该属性用于指定标签关联的<form>元素或字段。如果标签for属性和<form>字段的id属性的值相同，则表示两者都已连接。 | 表单 id |

HTML `<label>`标签基本示例

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

使用`<label>`标签内的`for`属性

<label for="username">Click Here</label>
<input type="text" id="username">

注意: 我们不应该在<label>标签里面使用标题元素，因为标题有不同的用途，而且还会引入标题的默认样式，可能会扭曲网页用户界面。

如果你想为添加到<label>标签的文本设置样式，那么你可以使用 CSS 样式规则。

使用带有`<label>`标签的 CSS 类:

下面是一个例子，我们使用了一个 CSS 类来为标签文本添加样式:

<label class="large-label" for="name">
    Your name
</label> 
<input id="name" name="name" type="text">

向上面创建的 CSS 类大标签添加样式:

.large-label {
    font-size: 34px;
    font-weight: bold;
}

这样做将增加标签文本的大小，并使其变得更加醒目。

HTML `<label>`标签的默认 CSS 设置

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

label {
    cursor: default;
}

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

以下浏览器支持此属性:

Firefox 1+
谷歌 Chrome 1+
Internet Explorer 4+
Safari 1+
Opera 4+

HTML `<link>`标签

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

在 HTML 中，如果想要建立当前文档和外部资源之间的关系，那么就使用<link>标签。

<link>标签也被称为外部资源链接元素。
<link>标签通常用于链接不同的样式表。
HTML5 中的<link>标签是一个空标记，这意味着它不包含结束标记，尽管它包含各种属性。
该标签还用于建立站点图标【favicon 样式图标和主屏幕图标)等。
我们可以在 <body>标签里面使用<link>标签，但是推荐在 <head>标签里面使用 <link>标签。
它被添加到 HTML5 中。

HTML `<link>` 标签语法和用法

<link>标签需要一个开始(开始)标签，而不是结束标签(结束)标签，因为是一个空标签。下面我们有它的基本语法。

<link href=" ">

HTML `<link>`标签属性

<link>标签支持和事件属性，一些常见属性如下。

**| 属性 | 描述 |
| 标题 | 该属性用于指定首选或备选样式表 |
| 超链接 | 该属性用于指定链接文档的网址。 |
| 能量损耗率 | 此属性用于指定链接文档与当前文档之间关系的名称。 |
| 类型 | 此属性用于指定链接 URL 的媒体类型。 |
| 元首万岁 | 这用于指示链接资源的人类语言。 |
| 大小 | 此属性用于指定资源中包含的可视媒体的图标大小。 |
| 参考政策 | 此属性用于指定获取资源时要使用的引用者。 |
| 重要 | 该属性指示资源的相对重要性。它可以是低，高，自动。 |

页面上包含样式表的示例:

<link href="abc.css" rel="stylesheet">

用于在页面上提供替代样式表的语法

您也可以使用替代样式表，其语法如下所示

<link href="default.css" rel="stylesheet" title="Default Style">
<link href="fancy.css" rel="alternate stylesheet" title="Fancy">
<link href="basic.css" rel="alternate stylesheet" title="Basic">

HTML `<link>`标签的默认 CSS 设置

下面给出了大多数浏览器使用的默认 CSS 设置。

link {
  display: none;
}

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

以下浏览器支持此属性:

Firefox 1+
谷歌 Chrome 1+
Internet Explorer 3+
Apple Safari 1+
Opera 4+

HTML `<legend>`标签

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

在 HTML 中，<legend>标签用于为其父 <fieldset>标签的内容提供标题。

基本上<legend>标签用于定义子内容的标题。
我们可以使用<legend>标签来执行各种 CSS 属性。

HTML `<legend>`标签语法和用法

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

<legend>
.....content here
</legend>

HTML5 `<legend>`标签基本示例

这里，我们有一个基本的例子来清楚地理解标签:

使用带有`<legend>`标签的各种 CSS 属性

在这里，我们使用带有 This 标签的 CSS 属性。

HTML `<legend>`标签属性

这个元素没有任何特定的属性，虽然这个元素支持全局和事件属性。

HTML `<legend>`标签的默认 CSS 设置

legend {
  display: block;
  padding-left: 2px;
  padding-right: 2px;
  border: none;
}

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

以下浏览器支持此属性:

Firefox 1+
谷歌 Chrome 1+
Internet Explorer 4+
Apple Safari 1+
Opera 4+

HTML 标签 M

HTML `<main>` 标签

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

在 HTML 中，<main> 标签用于表示文档的主要或主导内容。

<main> 标签是 HTML5 中新引入的。
这个标签通常写在<body>标签里面。
<main>标签的内容与文档的中心主题直接相关。
<main>标签的内容应该是唯一的，并且一个文档中不能有一个以上的<main>标签
<main>标签是类似一个地标；随着地标的快速识别和导航在他们的帮助下变得更加容易。
此外，这是一个块级元素。

HTML `<main>` 标签语法

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

<main>
....content here
</main>

HTML `<main>`标签基本示例

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

标签:

HTML `<main>`标签属性

这个元素没有任何特定的属性，虽然这个元素支持全局和事件属性。

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

以下浏览器支持此属性:

谷歌 Chrome 9.0
Internet Explorer 11.0
Firefox 4+
歌剧
旅行队

HTML `<map>`标签

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

在 HTML 中，<map>标签与<area> 标签的编号一起用于定义图像映射。

一张图像映射是一张带有可点击链接区域的图像。
<map>标签属于内联元素的范畴。
<map>标签基本上用于客户端图像映射。
<map>标签还需要<img >标签，以便建立图像和映射之间的关系或创建图像映射。

HTML `<map>` 标签语法

<map>标签需要开始(开启)标签和结束(关闭)标签。以下是相同的基本语法:

<map>
....content here
</map>

HTML `<map>`标签基本示例

下面我们有一个相同的基本例子:

HTML `<map>` 标签属性

这个元素没有任何特定的属性，虽然这个元素支持全局和事件属性。

`<map>`标签的其他重要属性

名称属性

此属性用于给出一个名称，以便可以引用。该属性必须具有一个非空值，并且其中没有空格。如果还指定了 id 属性，则两个属性必须具有相同的值。

HTML `<map>`标签的默认 CSS 设置

map {
  display: inline;
}

HTML5 `<map>` 标签的浏览器支持

以下浏览器支持此属性:

Firefox 1+
谷歌 Chrome 1+
Internet Explorer 2+
Apple Safari 1+
Opera 4+

HTML `<mark>`标签

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

在 HTML 中，<mark>用于突出显示或标记文本的部分，以显示文本的重要性。

建议不要使用<mark>标签来突出显示语法，而是使用< span >标签及其 CSS 属性。
<mark> 标签用于显示与用户当前活动相关的文档文本或内容。
当在<q>或<blockquote>标签内使用<mark>标签时，通常表示具有特殊意义的文本；虽然它没有标记原始文档。
<mark>标签的表现类似于你正在用荧光笔在你的书上标记你感兴趣的内容

HTML `<mark> Tag` 语法和用法

<mark>标签需要开始(开启)标签和结束(关闭)标签。其基本示例如下:

<mark>
...content here
</mark>

HTML `<mark>`标签基本示例

下面是这个标签的一个基本例子。

下面给出了使用标签来标记文章中的搜索结果

<p><mark class="match">HTML</mark> is known as Hypertext Markup Language.</P>
<p><mark class="match">HTML</mark> is used to create static web pages

HTML `<mark>` 标签属性

该属性没有特定属性，<mark>标签支持全局和事件属性。

HTML `<mark>`标签的默认 CSS 设置

mark {
  background-color: yellow;
  color: black;
}

HTML5 `<mark>`标签的浏览器支持

以下浏览器支持此属性:

Firefox 4+
谷歌 Chrome 6+
Internet Explorer 9+
Apple Safari 5+
Opera 11.1+

HTML `<meter>`标签

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

<meter>标签是 HTML5 中新引入的一个标签。

<meter> 标记用于表示已知范围内的分数值或标量值。
建议而不是使用此标签在进度条中显示进度。
在此之前始终使用 <label>标签，以获得最佳的可访问性

HTML `<meter>` 标签语法和用法

<meter>标签需要开始(开启)标签和结束(关闭)标签。其基本语法如下:

<meter>
.....content here
</meter>

HTML `<meter>` 标签属性

<meter>标签支持全局和事件属性，一些常见属性如下。

| 属性 | 描述 |
| 形式 | 该属性用于指定标签所属的表单 |
| 价值 | 该属性用于指定血糖仪的当前值。 |
| 低的 | 此属性用于指定必须视为低值的范围。 |
| 高的 | 此属性用于指定必须视为高值的范围。 |
| 最适宜的 | 此属性指示仪表的最佳值 |
| 最大 | 此属性用于指定范围的最大值 |
| 部 | 此属性用于指定范围的最小值。默认最小值为 0 |

HTML `<meter>`标签基本示例

这里，我们用<meter> 标签的一个基本例子来展示它的功能:

HTML `<meter>`标签的默认 CSS 设置

没有人

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

以下浏览器支持此属性:

Firefox 6+
谷歌 Chrome 8+
Safari 6+
Opera 11+

HTML `<meta>`标签

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

在 HTML 中，<meta> 标记用于表示元数据。

这个由<meta>标签表示的元数据不能使用像<base>,<link>,<script>,<style>和<title>这样的其他 HTML 标签来表示
<meta>标签属于空元素的范畴。
元数据不会显示在网页上，浏览器和搜索引擎使用元数据。
元数据简单来说就是关于数据的数据或者是关于数据的信息。
在 HTML 文档中，<meta>标签总是用在<head>标签内部。

HTML `<meta>`标签语法和用法

由于<meta>是一个空标签，它不需要结束标签，它只需要一个开始标签。

其基本语法如下:

<meta charset=" ">

HTML 标签属性

标签支持全局和事件属性，一些常见属性如下。

| 属性 | 描述 |
| 字符集 | 该属性用于声明网页的字符编码。它的值是字符集 |
| 名字 |

This attribute is used to define the name of metadata.
The value of the name attribute is as follows

Application _ name:-defines the name of the application running the webpage.
Author:-Used to define the author's name.
Keywords:-Contains words related to web content, Separate
referrer with commas:-Control the HTTP referrer header
attached to the request sent from the browser. Generator:-It contains the identifier of the software that generates the page.
Description:-A brief and accurate summary of the content of the webpage.

内容安全策略:-允许页面作者定义内容策略
刷新:-只有当内容属性包含正整数时，页面才应重新加载的秒数。
set-cookie:-定义页面的 cookie

HTML 标签基本示例

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

<meta charset="utf-8">

<!-- Redirect page after 3 seconds -->
<meta http-equiv="refresh" content="3;url="https://www.studytonight.com/">

定义搜索引擎关键字的语法

<meta name="keywords" content="Java,python,jQuery">

定义页面作者的语法

<meta name="author" content="Himani">

刷新文档的语法

<meta http-equiv="refresh" content="10">

// it will refresh document after every 10 seconds

HTML5 标签的浏览器支持

以下浏览器支持此属性:

Firefox 1+
谷歌 Chrome 1+
Internet Explorer 2+
Safari 1+
Opera 4+

HTML 标签 N

HTML `<nav>`标签

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

在 HTML 中，<nav> 标签用于表示具有导航链接的部分，这些链接或者是内的当前文档或者是另一个文档的。

部分导航链接有菜单、目录、索引等。
一个文档中有很多链接，没有必要把所有的链接都放在<nav> tag里面。
<nav>标签基本上是针对主要导航区块的。
一般来说，每当我们浏览一个网站时，我们都会在网站上看到许多导航链接，这些链接为访问网站的用户提供了方便，因此用户可以轻松地浏览这些链接。
<nav> 也是和 <header>一样有自己目的的节素。
<nav>元素的主要目的是提供页面的部分，该部分具有链接，通过这些链接用户可以在网站上轻松导航。
<nav> 可以在标题、<article>标签中，也可以在自己的中。
此外，<nav>标签属于块级元素的范畴

HTML `<nav>`标签语法和用法

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

<nav>
....
</nav>

HTML `<nav>`标签基本示例

下面我们有一个清晰理解

需要记住的几点

<nav>标签支持事件和全局属性。
正如我们在上一节中告诉您的那样，<nav> 元素基本上是为主/主导航块保留的。
在<nav> 元素的帮助下，创建一个导航菜单，或者有文本链接的水平菜单变得更加容易。
任何文档都可能有几个<nav>元素。例如，站点导航、页面内(用户定义页面的链接)导航

HTML `<nav>`标签属性

这个元素没有任何特定的属性，虽然这个元素支持全局和事件属性。

HTML `<nav>`标签的默认 CSS 设置

下面给出了大多数浏览器使用的默认 CSS 设置:

nav {
  display: block;
}

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

以下浏览器支持此属性:

Firefox 4+
谷歌 Chrome 6+
Internet Explorer 9+
Safari 5+
Opera 11.1+

HTML `<noscript>`标签

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

在 HTML 中，如果在浏览器中脚本关闭，或者如果不支持脚本类型，则<noscript>标签用于定义 HTML** 的一部分。**

基本上<noscript>标签是作为备用文本使用，以防你的浏览器不支持脚本。
每当要在<head>标签中使用 <noscript>标签时，在这种情况下，只有<link>、<style>和<meta>标签必须与<noscript>标签一起使用。
此外，这是一个块级元素。
虽然，这个标签可以用在<body> 标签里面，也可以用在标签里面。
内容写在 <noscript>标签的开合端内只有在浏览器不支持脚本的情况下才可见。

HTML `<noscript>` 标签语法和用法

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

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

<noscript>
....content here
</noscript>

HTML `<noscript>`标签基本示例

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

HTML `<noscript>`标签属性

这个元素没有任何特定的属性，虽然这个元素支持全局和事件属性。

HTML `<noscript>`标签的默认 CSS 设置

没有人

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

以下浏览器支持此属性:

Firefox 1+
谷歌 Chrome 1+
Internet Explorer 3+
Safari 1+
Opera 4+

HTML 标签 O

HTML `<ol>`标签

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

在 HTML 中，<ol>代表有序列表。

基本上<ol>标签用于在 HTML 网页上创建有序列表。
有序列表通常呈现为编号列表。
在有序列表中，顺序是有意义的，因此它不同于<ul> 或无序列表。
为了表示列表项，在<ol>标签内使用<li>标签
有序列表项通过编号前的显示，可以是数字、字母或罗马数字也可以是简单项目符号。
此外，这是一个块级元素。

HTML `<ol>`标签语法和用法

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

其基本语法如下:

<ol>
....content here
</ol>

HTML `<ol>`标签属性

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

1.颠倒的

<ol>标签的这个属性用于指定列表项的顺序是相反的，即从高到低。

2.类型

该属性用于指示排序类型或编号类型。

它具有以下值:

'a':表示小写字母。

'A':表示大写字母。

'i' :表示小写罗马数字。

'I' :表示大写罗马数字。

'1':表示数字，也是类型属性的默认值。

3.开始

该属性值为整数形式。

它用于指定对单个列表项进行编号的起始值。

语法: - < ol start="3">

HTML `<ol>`标签基本示例

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

示例:使用罗马数字类型

<ol type="i">
  <li>Python</li>
  <li>Java</li>
  <li>JavaScript</li>
</ol>

i. Python
ii .Java〔T2〕iii。JavaScript(JavaScript)

嵌套列表示例

<ol>
<li>Front-End</li>
<li>Back-End 
<ol type="a">
      <li>Ruby</li>
      <li>PHP</li>
      <li>.net</li>
</ol>
</li>            
<li>Frameworks</li>
</ol>

1。前端
2。后端
a .红宝石
b.PHP
c..净
3。结构

HTML `<ol>`标签的默认 CSS 设置

大多数浏览器使用<ol>标签的默认 CSS 设置，如下所示:

ol {
  display: block;
  list-style-type: decimal;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

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

以下浏览器支持此属性:

Firefox 1+
谷歌 Chrome 1+
Internet Explorer 2+
Safari 1+
Opera 4+

HTML `<output>`标签

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

在 HTML 中，<output>标签被用作容器元素。

该容器元素在站点或应用程序中用于注入任何计算的结果。
这个标签是 HTML5 中新引入的。
此外，这是一个内联元素。

HTML `<output>`标签语法和用法

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

<output>
...content here
</output>

HTML `<output>`标签属性

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

1.名字

该属性用于指示输出元素的名称。

2.形式

此属性用于指定此输出所属的表单。

3.为

当您想要指定计算结果和用于计算的元素之间的关系时，会使用 for 属性

HTML

标签基本示例

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

HTML `<output>`标签的默认 CSS 设置

大多数浏览器使用<output>标签的默认 CSS 设置，如下所示:

output {
  display: inline;
}

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

以下浏览器支持此属性:

Firefox 4+
谷歌 Chrome 10+
Safari 5.1+
Opera 11+

HTML `<optgroup>`标签

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

在 HTML 中，<optgroup>标签意味着选项的分组。

这个<optgroup>标签用于在 HTML 中的<select >标签内创建一组选项。
<optgroup>标签以其父标签的形式具有<select> 标签。

HTML `<optgroup>`标签语法和用法

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

其基本语法如下:

<optgroup>
..content here
</optgroup>

HTML `<optgroup>`标签属性

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

1.有缺陷的

此属性用于禁用下拉列表中的一组选项。

2.标签

该属性用于为一组选项提供标签。该属性是强制属性。

HTML `<optgroup>`标签基本示例

下面我们有一个相同的基本例子:

HTML `<optgroup>`标签的默认 CSS 设置

没有人

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

以下浏览器支持此属性:

Firefox 1+
谷歌 Chrome 1+
Internet Explorer 6+
Safari 1+
Opera 7+

HTML `<option>`标签

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

在 HTML 中，<option>标签用于定义包含在<select>、<optgroup>或<datalist>元素中的项目。

<option>标签是基本上用来表示弹出窗口中的菜单项，以及一个 HTML 文档中的项目列表。
<option>标签的值属性有点重要，因为它用于向服务器发送值。
<option>标签也可以在不使用属性的情况下使用。

HTML `<option>`标签语法和用法

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

其基本语法如下:

<option>
...content here
</option>

HTML `<option>`标签属性

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

1.标签

该属性用于指示用于定义选项含义的标签文本；如果没有定义标签属性，那么它的值就是该元素的文本内容。

2.价值

此属性用于指定要发送到服务器的选项的值。

3.有缺陷的

此属性用于指定禁用某个选项。它是一个布尔属性。

4.挑选

该属性的值为选中；该属性用于指示页面加载时已预先选择选项

HTML `<option>`标签基本示例

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

HTML `<option>`标签的默认 CSS 设置

没有人

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

以下浏览器支持此属性:

谷歌 Chrome 6.0+
Internet Explorer 9.0+
Firefox 4+
Opera 11.1+
Safari 5.0+

HTML `<object>`标签

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

在 HTML 中，<object>标签可以用来表示外部资源或者用来定义 HTML 文档中的嵌入对象。

外部资源可以是任意图像、任意嵌套浏览上下文，也可以是插件处理的任意资源。
该标签用于<body>标签内部。
那些不支持<object>标签的浏览器将把 <object>和 </object>里面的文本作为替代文本。
对象主要用于表单和表单的提交。
要将另一个网页嵌入到您的文档中，您也可以使用 <object>标签。
此外，这是一个内联元素。

HTML `<object>`标签语法和用法

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

其基本语法如下:

<object>
...content here
</object>

HTML `<object>`标签属性

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

1.数据

此属性用于将资源的地址指定为有效的网址。

2.形式

此属性用于指定对象所属的表单。

3.高度

4.类型

此属性用于指定由数据指定的资源的内容类型。

5.宽度

该属性用于以像素为单位指定对象的宽度。

6. 使用地图

此属性用于指定对地图元素的哈希名称引用。

HTML `<object>`标签基本示例

下面我们有一个

<html>
<head>
<title>
Object tag example
</title>
</head>
<body>
<object type="application/pdf"
    data="/media/examples/abc.pdf"
    width="250"
    height="200">
</object>
</body>
</html>

HTML `<object>`标签的默认 CSS 设置

大多数浏览器使用<object>标签的默认 CSS 设置，如下所示:

object:focus {
  outline: none;
}

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

以下浏览器支持此属性:

谷歌 Chrome 1+
Internet Explorer 3+
Safari 1+
Firefox 1+
Opera 4+

HTML 标签 P

HTML `<p>`标签

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

在 HTML 中，<p>标签代表段落。

段落通常表示为一个文本块，通过使用空行或使用首行缩进将该文本块与文本的其余部分分开
另一方面，HTML 段落被表示为相关内容的结构分组，如图像、表单等。
<p>标签边距前后得到浏览器自动添加的。
<p>标签属于块级元素的范畴。

HTML `<p>`标签语法和用法

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

<p>
...!content here
</p>

HTML `<p>`标签基本示例

下面我们有一个清楚理解

标签的基本例子

HTML `<p>`标签属性

这个<p>标签没有任何特定属性；尽管它支持全局和事件属性。

HTML

标签的默认 CSS 设置

<p>标签的默认 CSS 设置如下:

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

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

以下浏览器支持此属性:

谷歌 Chrome 1+
Internet Explorer 2+
Apple Safari 1+
Opera 2.1+
Firefox 1+

HTML `<progress>`标签

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

在 HTML 中，<progress>标签用来表示任务的进度。

为使更好的通达，建议始终在其前添加 <label> 标签。
HTML 网页中的<progress>标签用于显示一个表示任务完成的指示器或通常它会显示一个进度条。

HTML `<progress>` 标签语法和用法

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

其所需语法如下:

<progress>
....content here
</progress>

HTML `<progress>`标签属性

<progress> 标签支持全局和事件属性，一些常见属性如下。

1.最大

此属性用于指示<progress>标签指示的工作任务需要多少时间。默认情况下，max 属性的值为 1。

2.价值

此属性用于指示已完成的任务量。value 属性必须是有效的浮点数，并且必须介于 0 和 max 之间。

如果没有值，那么进度条是不确定的。

HTML `<progress>`标签基本示例

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

HTML `<progress>`标签的默认 CSS 设置

没有人

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

以下浏览器支持此属性:

Firefox 16+
谷歌 Chrome 8+
Internet Explorer 10+
Safari 6+
Opera 11+

HTML `<pre>`标签

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

在 HTML 中，<pre>标签代表预格式化文本。

它在网页上就像在一个 HTML 文件中一样。
该标签中使用的空白显示为已写。
文字写在<pre>之间，标签以固定宽度字体显示。
此外，它还是一个块级元素
建议使用 <pre>标签以防格式异常或者你想写一些电脑代码。

HTML `<pre>` 标签语法和用法

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

其所需语法如下:

<pre>
....content here
</pre>

HTML `<pre>`标签属性

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

1.关口

此属性用于包含一行应该具有的首选字符数，也称为宽度的非标准同义词。

2.宽度

此属性用于包含一行应该具有的首选字符数，这不会产生视觉效果。

3.包装

它用于指示必须发生溢出的提示

HTML `<pre>`标签基本示例

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

标签:

HTML `<pre>`标签的默认 CSS 设置

pre {
  display: block;
  font-family: monospace;
  white-space: pre;
  margin: 1em 0;
}

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

以下浏览器支持此属性:

Firefox 1+
谷歌 Chrome 1+
Internet Explorer 2+
Safari 1+
Opera 4+

HTML `<param>`标签

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

在 HTML 中，<param>标签代表参数。

所以，这个 <param>标签用来为<对象>标签定义参数。
<param>标签是一个空标签。

HTML `<param>`标签语法和用法

正如我们在上面部分告诉你的，它是一个空标签；因此，它不需要任何结束标签。

<param>标签只需要一个开始标记。其所需语法如下:

<param  attribute=" " >

HTML `<param>`标签属性

<param> 标签支持全局和事件属性，一些常见属性如下。

1.名字

该属性用于指定参数的名称。

2.价值

此属性用于指定参数的值。

注意:<参数>标签的类型和值类型属性从 HTML 中取消。

HTML `<param>`标签基本示例

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

<!DOCTYPE html>
<html>
<body>

<h1>The param tag example</h1>

<object data="abc.mp3">
<param name="autoplay" value="true">
</object>

</body>
</html>

HTML `<param>`标签的默认 CSS 设置

以下是<param> 标签的默认 CSS 设置

param {
  display: none;
}

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

以下浏览器支持此属性:

Firefox 1+
谷歌 Chrome 1+
Internet Explorer 3+
Safari 1+
Opera 5+

HTML 标签 Q

HTML `<q>`标签

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

在 HTML 中，<q>标签代表内联报价。

包含在<q>标签中的内容表示一个短内联报价。
在现代浏览器中，使用环绕文本的引号来实现。
对于没有不需要断段的短报价，建议使用标签，而对于长报价使用 <blockquote>标签。
此外，这是一个内联元素。

HTML `<q>`标签语法和用法

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

其所需语法如下:

<q>
....content here!
</q>

HTML `<q>`标签基本示例

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

HTML `<q>`标签属性

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

`<q>`标签的其他属性

引用属性是< q >标签最常用的属性，因此其描述如下:-

引用属性的值是指定源文档或引用信息的消息的网址形式。
该属性指向引用的引用。

引用属性的示例

<!DOCTYPE html> 
<html>  
    <head>  
        <title>HTML q cite Attribute</title>  
    </head>  

    <body style="text-align:center;">  

        <h1>Studytonight</h1> 

        <h2> 
            HTML <q>cite Attribute  
        </h2> 

        <p> 
            <q cite="https://www.studytonight.com/"> 
                StudyTonight 
            </q>  
            Best Place to Learn coding online 
        </p>  
    </body>  
</html>

HTML `<q>`标签的默认 CSS 设置

q {
  display: inline;
}

q:before {
  content: open-quote;
}

q:after {
  content: close-quote;
}

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

以下浏览器支持此属性:

Firefox 1+
谷歌 Chrome 1+
Internet Explorer 4+
Apple Safari 1+
Opera 4+

HTML 标签 R

HTML `<rt>`标签

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

在 HTML 中，<rt>标签代表红宝石文本。

红宝石文字是红宝石注释的重要组成部分。
使用<rt>标签指示的文本提供了东亚字体的发音和翻译。
<rt> 总是用在 <ruby> 标签内

HTML `<rt>`标签语法和用法

<rt>标签需要开始(开始)标签和结束(结束)标签。以下是<rt>标签的语法:

<ruby> 
<rt>
..content here
</rt>
</ruby>

HTML `<rt>`标签基本示例

下面我们有一个相同的基本例子:

HTML `<rt>`标签属性

这个元素没有任何特定的属性，虽然这个元素支持全局和事件属性。

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

以下浏览器支持此属性:

谷歌 Chrome 5+
Internet Explorer 5.5+
Apple Safari 5+
Opera 15+

HTML `<ruby>`标签

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

在 HTML 中，<ruby>标签用于 ruby 标注。

对于东亚字符的表示，使用红宝石注释。
由标记指示的红宝石注释是小的额外文本，这与主文本附在一起；正文标明对应字符的含义。
<ruby>标签用于另外两个标签<rt>和<rp>标签中
<ruby>标签用于内容的措辞。
<ruby>标签是 HTML5 中的一个新标签

HTML `<ruby>`标签语法和用法

<ruby>标签需要开口(开始)和闭合(结束)标签。其基本语法如下:

<ruby> 

....content here
</ruby>

HTML `<ruby>`标签基本示例

下面我们有一个显示<ruby>标签用法的基本例子:

HTML `<ruby>`标签属性

这个元素没有任何特定的属性，虽然这个元素支持全局和事件属性。

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

以下浏览器支持此属性:

谷歌 Chrome 5+
Internet Explorer 5.5+
Safari 5+
Opera 15+

HTML `<rp>`标签

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

在 HTML 中，<rp>标签被用作那些浏览器不支持 <ruby> 标签的回退括号。

有一些浏览器不支持<ruby>标签。因此，在不支持<ruby> 标签的浏览器中，通过<ruby> 标签显示包含的文本；<rp>标签用于 HTML5
<ruby> 标签充当<rt>标签的父级。

HTML `<rp>`标签语法和用法

<rp>标签需要开口(开始)和闭合(结束)标签。其语法如下:

<ruby>
<rp>
..content here
</rp>
<ruby>

HTML `<rp>`标签基本示例

下面我们有一个<rp>标签的基本例子，<ruby>标签始终是它的父标签:

<ruby>
  ? <rp>(</rp><rt>Kan</rt><rp>)</rp>
  ? <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>

HTML `<rp>`标签属性

这个元素没有任何特定的属性，虽然这个元素支持全局和事件属性。

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

以下浏览器支持此属性:

谷歌 Chrome 5+
Internet Explorer 5.5+
Safari 5+
Opera 15+

HTML 标签 S

HTML `<s>`标签

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

在 HTML 中，<s>标签用于表示删除线文本或带有一条线的文本。

用来表示无关的文字或不再准确的文字。
对于文档编辑目的使用<del> 标签代替<s>标签。
<s>标签用于内容的措辞。

HTML `<s>`标签语法和用法

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

下面给出了基本语法:

<s>
...content here
</s>

HTML `<s>` 标签基本示例

下面我们有一个<s> 标签的基本例子，它显示了它的基本用法:

HTML `<s>`标签属性

HTML <s>标签支持全局和事件属性，虽然它没有任何特定属性

HTML `<s>` 标签的默认 CSS 设置

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

s {
  text-decoration: line-through;
}

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

以下浏览器支持此属性:

Firefox 1+
谷歌 Chrome 1+
Internet Explorer 2+
Safari 1+
Opera 4+

HTML `<source>`标签

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

在 HTML 中，<source>标签用于表示文档中图片、音频或视频的多个媒体资源。

<source>标签是一个空元素。
<source>标签用于以多种格式提供相同的媒体内容，然后由不同的浏览器进一步支持。

HTML `<source>`标签语法和用法

<source>标签只需要开始(开启)标签；它不需要结束标签，因为它是一个空元素。

下面给出了基本语法:

<source src=" ">

HTML `<source>`标签属性

<source> 标签支持全局和事件属性，一些常见属性如下。

| 属性 | 描述 |
| 科学研究委员会 | 该属性以 URL 的形式指定所需的音频和视频资源 |
| 媒体 | 它仅用于图片元素。 |
| 大小 | 此属性指定一个源大小列表，用于描述源所表示的图像的最终渲染宽度 |
| 一个秘密 | 此属性用于在不同情况下指定图像的 URL |
| 类型 | 此属性用于指定资源的 MIME 类型。 |

HTML `<source>`标签基本示例

下面给出的是<source> 标签的基本示例:

<video controls>
  <source src="abc.webm" type="video/webm">
  <source src="abc.ogg" type="video/ogg"> 
  <source src="abc.mov" type="video/quicktime">
  I'm sorry; your browser doesn't support HTML5 video.
</video>

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

以下浏览器支持此属性:

Firefox 3.5+
谷歌 Chrome 4+
Internet Explorer 9+
Safari 4+
Opera 10.5+

HTML `<span>` 标签

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

在 HTML 中，<span> 标签用于对元素进行分组，以达到样式化的目的。

<span>标签也称为通用容器，用于措辞内容。
<span>标签与<div>标签非常相似；但这是有区别的，因为<div>是块级元素，而<span>是内联元素。
<span>标签本身并不用于表示任何东西。

HTML5 `<span>` 标签-语法和用法

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

下面给出了基本语法:

<span>
..content here
</span>

HTML `<span>` 标签基本示例

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

HTML `<span>`标签属性

这个 <span>标签没有任何特定属性；虽然它支持全局和事件属性。

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

以下浏览器支持此属性:

Firefox 1+
谷歌 Chrome 1+
Internet Explorer 3+
Safari 1+
Opera 4+

HTML `<select>`标签

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

在 HTML 中，<select>标签用于创建下拉列表。

<select>标签是一个内联元素。
<option>标签用在<select>标签内部，用于定义列表中应该是可用的选项。

HTML `<select>`标签语法和用法

<select>标签需要开始(开启)标签和结束(关闭)标签。下面给出的是它的基本语法:

<select>
...content here
</select>

HTML `<select>`标签属性

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

1.大小

此属性用于表示列表中一次一行可见的行数。默认情况下，大小属性的值为 0。

2.需要

它是一个布尔属性，指示必须选择一个具有非空值的选项。

3.名字

此属性用于指定控件的名称。

4.自（动）调焦装置

自动聚焦属性用于指定每当页面加载时，窗体控件都应聚焦在输入上；它也是一个布尔属性。

5.形式

此属性用于指定此下拉列表所属的表单。

6.多重

该属性用于一次选择多个选项。

7.有缺陷的

它是一个布尔属性；它用于指定用户不能与控件交互。

HTML

下面我们有一个基本的例子来展示<选择> 标签的用法:

HTML `<select>`标签的默认 CSS 设置

没有。

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

以下浏览器支持此属性:

Firefox 1+
谷歌 Chrome 1+
Internet Explorer 2+
Apple Safari 1+
Opera 4+

HTML `<summary>`标签

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

在 HTML 中，<summary>标签代表用于指定摘要的披露摘要元素。

该标签用于为<details>标签指定摘要、 标题或图例。
只要点击<summary>标签，就会打开父<details>标签打开或关闭的状态。
<summary>标签的内容可以是纯文本、标题元素也可以是段落。
<summary>标签可以作为 <details>标签的第一个孩子。

HTML `<summary>`标签语法和用法

<summary>标签需要开始(开始)标签和结束(结束)标签。下面给出了 <summary>标签的基本语法:

<summary>
...content here
</summary>

HTML `<summary>`标签基本示例

下面我们有一个基本的例子来展示<summary>标签的用法

HTML `<summary>`标签属性

此标记没有特定的属性；虽然它支持全局和事件属性。

HTML `<summary>`标签的默认 CSS 设置

以下是大多数浏览器使用的默认 CSS 设置:-

summary {
  display: block;
}

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

以下浏览器支持此属性:

谷歌 Chrome 12+
Opera 15+
Safari 6+

HTML `<samp>`标签

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

在 HTML 中，<samp>标签代表样本标签。

它用于将代表的内联文本括起来，作为计算机程序输出的样本或。
另外，它是一个短语标签。
<samp>标签的开始和结束内的内容通常以浏览器的默认等宽字体呈现。
<samp>标签属于内联元素的范畴。

HTML `<samp>`标签语法和用法

<samp>标签需要开始(开始)标签和结束(结束)标签。下面给出了<samp>标签的基本语法:

<samp>
..content here
</samp>

HTML `<samp>`标签基本示例

下面我们有一个基本的例子来展示<samp>标签的用法:

HTML `<samp>`标签属性

此标记没有特定的属性；虽然它支持全局和事件属性。

HTML `<samp>`标签的默认 CSS 设置

以下是大多数浏览器使用的默认 CSS 设置:-

samp {
  font-family: monospace;
}

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

以下浏览器支持此属性:

谷歌 Chrome 6.0+
Internet Explorer 9.0+
Firefox 4+
Opera 11.1+
Safari 5.0+

HTML `<small>`标签

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

在 HTML 中，<small>标签用于使文本字体大小小一号。

<small>标签在 HTML 中被重新用于表示小字、侧注释还包括版权和法律文本。
此外，这是一个内联元素。

HTML `<small>`标签语法和用法

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

以下是<small>标签的基本语法:

<small>
....content here
</small>

HTML `<small>`标签基本示例

下面我们有一个例子向您展示了 HTML5 中<small> 标签的基本用法:

HTML `<small>`标签属性

这个元素没有任何特定的属性，虽然这个元素支持全局和事件属性。

HTML `<small>`标签的默认 CSS 设置

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

small {
  font-size: smaller;
}

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

以下浏览器支持此属性:

谷歌 Chrome 6.0+
Internet Explorer 9.0+
Firefox 4+
Opera 11.1+
Safari 5.0+

HTML `<section>`标签

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

在 HTML5 中，如果你想把你的文档分成几个部分为了清楚的理解而不是为了这个目的<section> 标签被使用。

<section>标签用于表示文档中的独立部分；在页眉、页脚或在文档的任何其他部分。
也可以通过嵌套<section>标签在区域内创建区域。一个部分中的一个部分被称为子部分。****
<section>标签是一个语义元素，这个元素的含义是向浏览器和开发者描述的。
此外，这是一个块级元素。

HTML5 `<section>`标签-语法和用法

<section>标签需要开始(开始)标签和结束(结束)标签。<section>标签的基本语法如下:

<section>
...content here
</section>

HTML5 `<section>`标签基本示例:

下面我们有一个例子显示了部分标签的基本用法:

**### 示例:关于节内节的用法:-

在<section> tag内放置<section>标签被称为截面元素的嵌套。如果文本包含相同的字体属性，则子部分的字体大小小于节。

HTML5 `<section>`标签的默认 CSS 设置

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

section {
  display: block;
}

HTML5 `<section>`标签的浏览器支持

以下浏览器支持此属性:

谷歌 Chrome 9.0
Internet Explorer 11.0
Firefox 4+
歌剧
旅行队

HTML `<strong>`标签

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

HTML <strong>标签用于标记网页上具有强重要性的内容。就样式而言，它的工作方式类似于 HTML <b>标签，但它为这个标签内的文本增加了额外的含义，浏览器和搜索引擎认为这个标签很重要。

HTML <strong>标签属于短语标签的范畴。
开始和结束<strong>标签之间的内容总是表示比内容的其余部分更重要的文本。
<strong>标签还用于为网页文本中代表注释或警告的段落提供标签。

HTML `<strong>`标签语法和用法

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

<strong>
    important text
</strong>

HTML `<strong>`标签基本示例

下面给出了一个例子，向您展示了<strong>标签的基本用法:

HTML `<strong>`标签属性

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

HTML `<em>`标签 vs `<strong>`标签

<strong>标签用于指示网页上其他内容中更重要的文本。另一方面，<em>标签用于改变内容的含义，就像口语强调一样。

<em>和<strong>标签可以嵌套在一起，以获得更高的重要性。

HTML `<b>`标签 vs `<strong>`标签

我们通常会混淆<b>标签和<strong>标签/让我们澄清一下，<strong>标签用于表示具有强重要性或更高重要性的内容，而<b>标签用于吸引读者的注意力，而不表示文本具有更高的重要性。

所以<b>标签只是增加了样式，而<strong>标签为文本增加了意义，告知浏览器或搜索引擎所包含的文本很重要。

HTML `<strong>`标签的默认 CSS 样式

大多数浏览器使用这些默认 CSS 样式。

strong {
    font-weight: bold;
}

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

以下浏览器支持此属性:

谷歌 Chrome 9.0
Internet Explorer 11.0
Firefox 4+
歌剧
旅行队

HTML `<sub>`标签

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

在 HTML 中，<sub>标签代表下标标记。

<sub>标签用于指定内联文本，仅出于印刷原因，该文本应显示为下标****。
<sub>标签内的内容通常使用较小的文本以较低的基线呈现。
<sub>标签用于表示任何元素的化学式。
此外，这是一个内联元素。

HTML `<sub>`标签语法和用法

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

<sub>
..content here
</sub>

HTML `<sub>`标签基本示例

下面给出了一个展示 <sub> 标签用法的基本例子:

HTML `<sub>`标签属性

这个元素没有任何特定的属性，虽然这个元素支持全局和事件属性。

HTML `<sub>`标签的默认 CSS 设置

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

sub {
  vertical-align: sub;
  font-size: smaller;
}

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

以下浏览器支持此属性:

谷歌 Chrome 9.0
Internet Explorer 11.0
Firefox 4+
歌剧
旅行队

HTML `<sup>`标签

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

在 HTML 中，<sup>标签代表上标标记。

在网页中，<sup> 使用凸起的基线和较小的尺寸渲染文本。
仅出于排版原因，<sup>标签用于将内嵌文本显示为上标文本。
指数和幂的数字是最常用的上标文本。
此外，这是一个内联元素。

HTML `<sup>`标签语法和用法

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

<sup>
..content here
</sup>

HTML `<sup>`标签基本示例

下面给出了一个例子，向您展示了^{标签的基本用法:}

HTML `<sup>`标签属性

这个元素没有任何特定的属性，虽然这个元素支持全局和事件属性。

HTML `<sup>`标签的默认 CSS 设置

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

sup {
  vertical-align: super;
  font-size: smaller;
}

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

以下浏览器支持此属性:

谷歌 Chrome 9.0
Internet Explorer 11.0
Firefox 4+
歌剧
旅行队

HTML `<style>`标签

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

在 HTML 中，<style>标签包含文档的样式信息，或者是文档的部分。

<style>标签包含 CSS ，用于设置网页的样式。
<style> 标签可以用在 <head>标签内部或者 <body>标签内部；但是建议在 <head> 标签内使用，用于组织目的。
<style>标签还包括包含媒体查询的媒体属性。
任何一个 HTML 文档里面都可以有多个 <style>标签。
要在网页内链接外部样式表，请在<style>标签内使用<link>标签。

HTML `<style>`标签语法和用法

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

<style>
...content here
</style>

HTML

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

1.媒体

此属性用于定义样式应该应用于哪个媒体。该属性值是媒体查询。

2.标题

此属性用于定义替代样式表集。

3.类型

该属性是为样式定义的 MIME 类型的形式

HTML

下面给出了一个例子，展示了 HTML 中

在单个文档中使用多个 `<style>`标签

在下面给出的例子中，我们将在单个文档中使用多个

<html>
<head>
  <style>
    p {
      color: white;
      background-color: blue;
      padding: 5px;
      border: 1px solid black;
    }
  </style> 
  <style>
    p {
      color: blue;
      background-color: yellow;
    }
  </style> 
</head>
<body>
  <p>This is my paragraph.</p>
</body>
</html>

HTML `<style>`标签的默认 CSS 设置

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

style {
  display: none;
}

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

以下浏览器支持此属性:

谷歌 Chrome 9.0
Internet Explorer 11.0
Firefox 4+
歌剧
旅行队

HTML `<script>` 标签

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

在 HTML 中，<script> 标签用于嵌入一些可执行代码。

<script>标签主要用于引用 HTML 文档中的 javascript (客户端脚本)代码。它也可以和其他一些语言一起使用，比如 GLSL 着色器编程语言
如果存在 src 属性，则<script>标签必须为空。****

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

**## HTML <script>标签语法和用法

下面给出的是<script>标签的基本语法:

<script>
.....content here
</script>

HTML `<script>`标签属性

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

1.类型

该属性用于定义文档中脚本的类型。

2.文本

此属性用于设置元素的文本内容。

3.异步ˌ非同步(asynchronous)

这是一个布尔属性，表示如果可能，浏览器应该；异步加载脚本。

4.科学研究委员会

此属性用于指定外部 CSS 文件的网址。

5.推迟

这是一个布尔属性，它被设置为向浏览器指示脚本将在文档被解析后执行。

HTML `<script>` 标签基本示例

下面我们有一个

HTML `<script>`标签的默认 CSS 设置

以下是大多数浏览器使用的默认 CSS 设置:-

script {
  display: none;
}

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

以下浏览器支持此属性:

谷歌 Chrome 6.0+
Internet Explorer 9.0+
Firefox 4+
Opera 11.1+
Safari 5.0+

HTML 标签 T

HTML `<title>`标签

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

在 HTML 中，<title >标签用于定义网页应用中的网页标题。

该 title将显示在浏览器的标题栏或标签栏中。
提供给<title>标签的标题值描述了页面的目的。
<title>标签是一直用在 <head>标签里面。
这个<title>标签对搜索引擎结果有帮助。
一个文档中只能有一个<title>标签。

HTML `<title>`标签语法和用法

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

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

<title>
...content here
</title>

HTML `<title>` 标签基本示例

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

HTML `<title>`标签属性

这个元素没有任何特定的属性，虽然这个元素支持全局和事件属性。

HTML `<title>`标签的默认 CSS 设置

下面给出了大多数浏览器使用的默认 CSS 设置:

title {
  display: none;
}

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

以下浏览器支持此属性:

谷歌 Chrome 6.0+
Internet Explorer 9.0+
Firefox 4+
Opera 11.1+
Safari 5.0+

HTML `<textarea>`标签

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

在 HTML 中，对创建多行普通编辑控件使用<textarea>标签。

当您希望允许用户输入大量自由格式文本时，<textarea>标签非常有用，例如，对评论或反馈表单的评论。
<textarea>标签还接受共同形成<input> s 的几个属性，如autocomplete、autofocus、disabled、placeholder、readonly、required。
此外，这是一个内联元素。
指定 textarea 的大小；我们使用<textarea>标签的cols和rows属性。
建议使用<label>标签给文本区域添加标签。

HTML `<textarea>`标签语法和用法

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

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

<textarea>
...content here
</textarea>

HTML `<textarea>`标签属性

<textarea>标签支持全局和事件属性，一些常见属性如下。

| 属性 | 描述 |
| 名字 | 在区域标签内，名称属性用于指定控件的名称。 |
| 分钟 | 用户应输入的最小字符数(Unicode 码位)。 |
| 最大长度 | 用户应输入的最大字符数(Unicode 码位)。 |
| 关口 | 该属性用于指定 textarea 的宽度。 |
| 行 | 此属性用于指定文本区域中可见行数 |
| 包 | 此属性指示控件如何换行。可能的值有:硬、软和关 |
| 拼写检查 | 指定文本区域是否接受基础浏览器/操作系统的拼写检查；true、false 和默认值是拼写检查属性的三个值 |
| 需要 | 此属性确保它是必填字段或必须填写 |
| 只读的 | 此属性指定给定的 textarea 是只读类型 |
| 自（动）调焦装置 | 此属性指定每当网页加载时 textarea 自动获得焦点。 |
| 形式 | 该属性指定了 textarea 所属的表单 |

HTML `<textarea>`标签基本示例

下面我们有一个展示如何使用 HTML 文本区域标签的基本例子。

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

以下浏览器支持此属性:

谷歌 Chrome 6.0+
Internet Explorer 9.0+
Firefox 4+
Opera 11.1+
Safari 5.0+

HTML `<track>`标签

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

在 HTML 中，<track> 标签是作为 <video>和<audio>标签的子标签使用的。

<track> 标签允许我们指定定时轨道比如，它允许你自动处理字幕。
每当我们播放视频时，我们会在视频上看到字幕或字幕，借助这个<track>标签，这些都是可能的。
是一个空元素。

HTML `<track>`标签语法和用法

因为<track> 是空元素；所以它只需要开始标签而不需要结束标签。

以下是在 HTML 代码中使用跟踪标签的语法:

<track attribute_name=" ">

HTML 标签属性

<track>标签支持全局和事件属性，一些常见属性如下。

1.默认

默认属性用于指示应该启用该曲目，直到并且除非用户的偏好指示该曲目更重要。

2.标签

标题轨道的标签属性是用户可读的文本轨道标题，在浏览器列出可用文本轨道时使用

3.科学研究委员会

src 属性用于指定 URL，文档的来源和 URL 应该相同。

4.src lang！src lang！src lang！src lang！src lang

该属性指定轨道文本数据的语言。

5.种类

该属性用于指定文本轨道的种类。它的可能值是:-描述、标题、章节、元数据。

HTML `<track>`标签基本示例

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

<video controls width="250"
       src="/media/examples/abc.mp4">

    <track default kind="captions"
           srclang="en"
           src="/media/examples/abc.vtt"/>

    Sorry, your browser doesn't support embedded videos.
</video>

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

以下浏览器支持此属性:

谷歌 Chrome 23.0+
Internet Explorer 10.0
Firefox 31.0
Opera 12.1+
Safari 6.0

HTML `<table>`标签

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

在 HTML 中，<table>标签用于在网页上以表格格式表示数据。

对于表格格式，我们的意思是信息以二维格式呈现，由包含数据的单元格的行和列组成。
此外，它还是一个块级元素
为了定义表格的一行，使用 <tr>标签，为了定义表格单元格，使用<td> 标签。
使用表 <th>标签的提供者标题。
使用标签为表格 <caption>提供标题。

HTML `<table>`标签语法和用法

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

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

<table>
...content here
</table>

HTML `<table>`标签基本示例

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

HTML `<table>`标签属性

这个元素没有任何特定的属性，虽然这个元素支持全局和事件属性。

HTML `<table>`标签的默认 CSS 设置

table {
  display: table;
  border-collapse: separate;
  border-spacing: 2px;
  border-color: gray;
}

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

以下浏览器支持此属性:

谷歌 Chrome 6.0+
Internet Explorer 9.0+
Firefox 4+
Opera 11.1+
Safari 5.0+

HTML `<td>`标签

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

在 HTML 中，<td>代表表数据。

<td>标签定义了包含数据的表格的标准单元格。
默认情况下，开始和结束 <td>标签内的文本是左对齐的，并且是常规的。

HTML`<td>`t 语法和用法

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

以下是在 HTML 代码中使用 Syntax of tag:

<table>
<tr>
<td>
..content here
</td>
</tr>
</table>

HTML `<td>`标签属性

<td>标签支持全局和事件属性，一些常见属性如下。

1.跨列数

此属性的值是一个非负整数，表示单元格扩展了多少列。其默认值为1。

2. 行跨度

此属性的值是一个非负整数，表示单元格扩展了多少列。其默认值为1。

3.页眉

它用于指定一个或多个与单元格相关的标题单元格。

HTML `<td>`标签基本示例

下面我们有一个展示如何使用 HTML Basic examples of labels.

HTML `<td>`标签的默认 CSS 设置

td {
  display: table-cell;
  vertical-align: inherit;
}

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

以下浏览器支持此属性:

谷歌 Chrome 6.0+
Internet Explorer 9.0+
Firefox 4+
Opera 11.1+
Safari 5.0+

HTML `<th>`标签

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

在 HTML 中，<th>标签用于将一个单元格定义为一组单元格的标题。

一个 HTML 表格中有两种单元格，一种单元格作为一组单元格的标题，另一种即标准单元格包含表格的数据。****
<th>标签的开始和结束之间的文本默认为粗体居中。
<th>标签是<table>标签的子标签。

HTML `<th>`标签语法和用法

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

以下是在 HTML 代码中使用 Syntax of tag:

<table>
<th>
..content here
</th>
</table>

HTML `<th>`标签属性

<th>标签支持全局和事件属性，一些常见属性如下。

1.缩写的/缩写词

该属性用于定义单元格内容的简称。

2.跨列数

此属性的值是一个非负整数，表示单元格扩展了多少列。其默认值为1。

3. 行跨度

此属性的值是一个非负整数，表示单元格扩展了多少列。其默认值为1。

4.范围

该枚举属性定义了与头标记相关的单元格；它有值:行、列、自动、行组、列组。

5.页眉

它用于指定一个或多个与单元格相关的标题单元格。

HTML `<th>`标签基本示例

下面我们有一个展示如何使用 HTML Basic examples of labels.

HTML `<th>`标签的默认 CSS 设置

th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  text-align: center;
}

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

以下浏览器支持此属性:

谷歌 Chrome 6.0+
Internet Explorer 9.0+
Firefox 4+
Opera 11.1+
Safari 5.0+

HTML `<tr>`标签

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

在 HTML 中，<tr>标签代表表行的。

<tr>标签用于定义表格中的一行单元格。
然后可以使用<td> 标签(标准数据单元格)和<th>(标题单元格)元素的混合来建立行的单元格。
<tr>标签包含多个 <th>标签以及 <td>标签。

HTML `<tr>`标签语法和用法

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

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

<table>
<tr>
<th>
content here
</th>
</tr>
</table>

HTML `<tr>`标签基本示例

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

HTML `<tr>`标签属性

此标记没有特定的属性；尽管它支持全局和事件属性。

HTML `<tr>`标签的默认 CSS 设置

下面给出了大多数浏览器使用的默认 CSS 设置:

tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}

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

以下浏览器支持此属性:

谷歌 Chrome 6.0+
Internet Explorer 9.0+
Firefox 4+
Opera 11.1+
Safari 5.0+

HTML `<template>`标签

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

在 HTML 中，<template>标签用于保存网页上的客户端内容。

需要注意的一点是页面加载时<template> 标签内的内容不会被渲染。
为了渲染内容和使其在运行时可见****JavaScript 用于此目的。
虽然解析器在加载页面时确实处理了<template> 标签的内容，但它这样做只是为了确保这些内容有效。
模板就像一个内容片段，被存储在文档中以备后续使用。

HTML `<template>`标签语法和用法

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

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

<template>
..content here
</template>

HTML

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

注:我们要用 javascript 才能看到 <template>标签里面的内容。

HTML `<template>`标签属性

此标记没有特定的属性；虽然它支持全局和事件属性。

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

以下浏览器支持此属性:

谷歌 Chrome 6.0+
Firefox 4+
Opera 11.1+
Safari 5.0+

HTML `<tbody>`标签

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

在 HTML 中，<tbody>标签用于封装一组表行，这表明它们组成了表体。

如果一个表中有<thead>标签，那么 <tbody> 必须在 <thead>标签之后。
<tbody>是 <table>标签的孩子之一。
每当文档被打印时；<thead>和<tfoot>用于指定在多页表格的每一页上可能相同或至少非常相似的信息，而<tbody>标签的内容通常会因页而异。
<tbody>标签包含一个以上的 <tr>标签。
CSS 用于设置<tbody>标签的样式。

HTML `<tbody>`标签语法和用法

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

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

<table>
<thead>
..content here
</thead>

<tbody>
...content here
</tbody>
</table>

HTML 标签基本示例

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

`HTML <tbody>`标签属性

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

HTML `<tbody>`标签的默认 CSS 设置

下面给出了大多数浏览器使用的默认 CSS 设置。

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

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

以下浏览器支持此属性:

谷歌 Chrome 6.0+
Internet Explorer 9.0+
Firefox 4+
Opera 11.1+
Safari 5.0+

HTML `<thead>`标签

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

在 HTML 中，<thead>标签用于定义给定表格的列头。

<thead>标签与<tbody>和 <tfoot>标签一起使用。
<thead>是<table>标签的另一个子；它位于<caption> 和 <table>标签之后，<tbody>和<tfoot>标签之前。
对于的样式，必须使用<thead> CSS。

HTML `<thead>`标签语法和用法

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

以下是在 HTML 代码中使用标签的语法。

<table>
<thead>
...content here
</thead>

<tbody>
..content here
</tbody>

</table>

HTML 标签基本示例

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

HTML `<thead>`标签属性

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

HTML `<thead>`标签的默认 CSS 设置

下面给出了大多数浏览器使用的默认 CSS 设置。

thead {
  display: table-header-group;
  vertical-align: middle;
  border-color: inherit;
}

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

以下浏览器支持此属性:

谷歌 Chrome 6.0+
Internet Explorer 9.0+
Opera 11.1+
Safari 5.0+

HTML `<tfoot>`标签

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

在 HTML 中，为了将表格的页脚内容分组，使用了 <tfoot>标签。

<tfoot>标签是<表>标签的子之一，与<thead>``<tbody>标签连用的。
<tfoot>标签包含不止一个 <tr>标签。
还有，这是一个块级元素。

HTML `<tfoot>` 标签语法和用法

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

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

<table>
<table>
<thead>
...content
</thead>
<tbody>
...content
</tbody>
<tfoot>
..content
</tfoot>

HTML `<tfoot>`标签基本示例

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

`HTML` `<tfoot>`标签属性

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

HTML `<tfoot>`标签的默认 CSS 设置

下面给出了大多数浏览器使用的默认 CSS 设置:

tfoot {
  display: table-footer-group;
  vertical-align: middle;
  border-color: inherit;
}

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

以下浏览器支持此属性:

谷歌 Chrome 6.0+
Internet Explorer 9.0+
Firefox 4+
Opera 11.1+
Safari 5.0+

HTML `<time>`标签

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

在 HTML 中，<time>标签用于表示人类可读的特定时间段。

它代表以下内容之一:

时间是 24 小时制。
精确的日期
或者有效的持续时间。

由于<time>标签是用来将的日期和时间编码成机器可读的格式，这样的话，搜索引擎会对此产生更好的结果。
另外， <time>标签属于内联元素的范畴。
标签有一个重要的日期时间属性，用于将日期翻译成机器可读的格式；允许提醒等自定义功能。

HTML `<time>`标签语法和用法

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

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

<time>
..content here
</time>

HTML 标签基本示例

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

HTML `<time>`标签属性

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

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

以下浏览器支持此属性:

谷歌 Chrome 6.0+
Internet Explorer 9.0+
Firefox 4+
Opera 11.1+
Safari 5.0+

HTML 标签 U

HTML `<u>`标签

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

在 HTML 中，<u>标签代表未定义的注释元素。

<u>标签用于表示与普通文本在样式上不同的文本。该文本可以包括拼写错误的单词或任何中文复数名词。
建议在演示文稿中不要使用<u>标签来简单地为文本加下划线，也不要用它来表示本书的任何标题。
使用<u>标签创建非文本注释。

HTML `<u>`标签语法和用法

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

下面给出了相同的语法:

<u>
.....
</u>

HTML `<u>`标签基本示例

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

HTML `<u>`标签属性

虽然<u> 标签支持全局和事件属性，但它没有任何特定属性。

HTML `<u>`标签的默认 CSS 设置

下面给出了大多数浏览器使用的默认 CSS 设置:

u {
  text-decoration: underline;
}

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

以下浏览器支持此属性:

谷歌 Chrome 6.0+
Internet Explorer 9.0+
Firefox 4+
Opera 11.1+
Safari 5.0+

HTML `<ul>`标签

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

在 HTML 中，<ul>标签代表无序列表，用于在网页上创建项目符号列表。

无序列表中的列表项通常呈现为项目符号列表。
要创建一个无序列表，总是使用<li>标签和<ul>标签。
也属于块级元素的范畴。

HTML

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

下面给出了相同的基本语法:

<ul>
....
</ul>

HTML `<ul>`标签基本示例

下面我们有一个基本的例子来展示

HTML `<ul>`标签属性

这个元素没有任何特定的属性，虽然这个元素支持全局和事件属性。

HTML

<ul>标签的默认 CSS 设置或值如下所示。

ul {
  display: block;
  list-style-type: disc;
  margin-top: 1em;
  margin-bottom: 1 em;
  margin-left: 0;
  margin-right: 0;
  padding-left: 40px;
}

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

以下浏览器支持此属性:

谷歌 Chrome 9.0
Internet Explorer 11.0
Firefox 4+
歌剧
旅行队

HTML 标签 V

HTML `<var>`标签

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

在 HTML 中，<var>标签代表变量，用于在网页上显示程序的变量。

<var>标签用于在编程上下文或数学等式中的变量中表示变量。
<var>标签属于短语标签的范畴。
<var> 标签具有依赖于浏览器的行为。

HTML `<var>`标签-语法和用法

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

以下是相同的必需语法:

<var>
...content here
</var>

HTML `标签基本示例`

下面我们有一个基本的例子来展示标签的用法:

使用`<var>`标签括起两个变量的名称

<p>The variables <var>minSpeed</var> and <var>maxSpeed</var> control
   the minimum and maximum speed of the apparatus in revolutions
   per minute (RPM).</p>

HTML `<var>`标签属性

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

HTML `<var>`标签的默认 CSS 设置

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

var {
  font-style: italic;
}

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

以下浏览器支持此属性:

谷歌 Chrome 9.0
Internet Explorer 11.0
Firefox 4+
歌剧
旅行队

HTML `<video>`标签

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

HTML 通过提供各种多媒体元素，如音频、视频、嵌入和对象，帮助我们在您的网站上添加多媒体文件。

在 HTML 中，<video>标签用于在文档中嵌入视频或电影剪辑。
有三种文件格式，它们的 MIME 类型由<video>标签支持，如下所示:-

| 文件格式 | mime _ type |
| MP4 | 视频/mp4 |
| WebM | 视频/网络管理 |
| 格式 | 视频/ogg |
在不支持<视频>标签的浏览器中，打开和关闭<video></video>标签中的内容显示为后退。****
如果不指定controls属性，视频不会包含浏览器的默认控件；您可以使用 JavaScript 创建自己的自定义控件。
此外，这是一个块级元素。

HTML `<video>`标签语法和用法

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

其基本语法如下:

<video>
....content here
</video>

HTML `<video>`标签属性

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

1.减轻

此属性用于确定缓冲媒体的时间范围。

2.科学研究委员会

此属性用于指定视频的网址。

3.宽度

此属性用于设置网页上视频的宽度。

4.控制

此属性用于显示视频控件，如网页上的暂停/播放按钮。

5.高度

此属性用于指定 HTML 文档中视频的高度(以像素为单位)。

6.自动播放

自动播放是一个布尔属性；如果指定了，则视频会尽快自动开始播放，而不会停止加载数据。

7.环

它是一个布尔属性，用于重放音频文件。

8.事先装好

此属性用于指定页面加载时视频的加载方式。它有三个值:自动、元数据、无。

HTML `<video>`标签基本示例

下面我们有一个基本的例子来展示<video>标签的用法:

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

谷歌 Chrome 4.0
Internet Explorer 9.0
Firefox 3.5
歌剧迷你版 10.5

HTML 标签 W

HTML `<wbr>`标签

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

在 HTML 中，<wbr>标签代表断词机会。断字机会基本上是文本中浏览器可以随意换行的位置。

<wbr>是 HTML 中的新标签。
需要注意的重要一点是<wbr> tag 没有在行断点引入连字符。
这是一个空标签。

HTML `<wbr>`标签语法和用法

因为它是一个空标签；因此它不需要结束标记。它只需要一个开始标记。因此，其语法如下:

<wbr>   content here

HTML `<wbr>`标签基本示例

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

HTML `<wbr>`标签属性

这个元素没有任何特定的属性，虽然这个元素支持全局和事件属性。

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

以下浏览器支持此属性:

谷歌 Chrome 1.0
Internet Explorer 12.0
Firefox 3.0
歌剧 11.7
Safari 4.0

杂项

HTML 事件属性

原文：https://www.studytonight.com/html5-references/html-event-attributes

在 HTML5 中，事件属性本质上是全局的，这意味着它们与几乎所有的 HTML 标签一起使用。

任何 HTML 标签的属性只是它的一部分，可以用来给任何 HTML 标签添加更多的信息，例如，在<a>标签中，href 是用来提供文本将被超链接到的网址的属性。同样，HTML 标签可以有事件属性，用于处理那些 HTML 标签/元素的 JavaScript 事件。

HTML Event Attributes example

任何 HTML 标记都可以有多个属性。

当某些事件发生时，事件属性被应用于执行的 HTML 标签，例如，onclick``onblur``onmousehover等。
事件属性本质上是全局的但是也有一些例外，对于像<title>标签、<link>等标签，事件属性在 HTML 文档的<head>部分中是不相关的。

事件属性基本上是观察者，它们被添加到任何 HTML 标签中以观察任何特定的事件，并且当这种情况相对于为其指定了事件属性的特定 HTML 标签发生时，该属性将触发与其相关联的 Javascript 表达式的功能。

每个事件都有一个单独的事件属性。

事件属性类型

事件属性的类别很少，这些类别基于 JavaScript 支持的事件类型。这些是:

窗口事件属性
鼠标事件属性
表单事件属性
键盘事件属性
媒体事件属性

让我们逐一详细讨论上面给出的每个类别。

窗口事件属性

窗口事件是那些与窗口对象相关的事件，这些事件适用于 HTML <body>标签。

窗口事件类别下的事件属性如下所示:

键盘事件属性

键盘事件是用户与键盘交互时发生的事件。

键盘事件类别下的事件属性如下所示:

表单事件属性

表单事件是 HTML 中的那些事件，当任何用户与表单控件交互时就会发生。

表单事件类别下的事件属性如下所示:

剪贴板事件属性

剪贴板事件是那些与剪贴板修改相关的事件，如复制、剪切和粘贴。

剪贴板事件类别下的事件属性如下所示:

媒体事件属性

媒体事件是在处理嵌入在 HTML 文档中的媒体元素的事件时发生的事件，例如<audio>标签、<video>标签、<embed>标签等。

媒体事件类别下的事件属性如下:

鼠标事件属性

鼠标事件是当用户像鼠标一样与定点设备交互时发生的事件。

鼠标事件类别下的事件属性如下所示:

属性	描述
`onclick`	该属性在用户单击元素上的鼠标左键时触发。
`ondblclick`	该属性在用户双击元素时激发。
`oncontextmenu`	当用户通过右键单击元素来触发上下文菜单时，会触发此属性。
`ondrag`	当用户拖动元素时，此属性会激发。ondrag 事件在整个拖动操作中引发了火灾。
`ondragend`	当用户在拖动操作结束时释放鼠标按钮时，此属性会触发。
`ondragenter`	当用户将元素拖动到有效的放置目标时，此属性会激发。
`ondragleave`	在拖动操作过程中，当元素离开有效的放置目标时，会激发此属性。
`ondragover`	当元素被拖动到有效的放置目标上时，此属性将激发。
`ondragstart`	当用户开始拖动文本选择或选定的元素时，此属性会触发。
`ondrop`	此属性在拖放操作中释放鼠标按钮时触发，即拖放被拖动的元素时。
`onmousedown`	当鼠标按钮在元素上按下时，此属性会激发。
`onmousemove`	当用户将鼠标指针移动到某个元素上时，该属性将激发。
`onmouseout`	当用户将鼠标指针移动到元素边界之外时，此属性将激发。
`onmouseover`	当用户将鼠标指针移动到某个元素上时，该属性将激发。
`onmouseup`	当用户将鼠标放在某个元素上并释放鼠标按钮时，此属性会触发。
`onscroll`	当用户通过滚动元素的滚动条来滚动元素的内容时，会触发此属性。
`onshow`	当上下文菜单被触发到同样具有`contextmenu`属性的元素上时，该属性被触发。
`ontoggle`	当用户打开或关闭标签时，该属性触发
`onwheel`	当用户通过在元素上上下滚动鼠标滚轮来滚动元素的内容时，会触发此属性。

有了这个，我们已经列出了所有的事件属性，你可以使用你的 HTML 标签。去我们的网络游乐场试试吧。

HTML 全局属性

原文：https://www.studytonight.com/html5-references/html-global-attributes

HTML 全局属性是所有 HTML 标签/元素共有的属性。

任何 HTML 标签的属性只是它的一部分，可以用来给任何 HTML 标签添加更多的信息，例如，在<a>标签中，href 是用来提供文本将被超链接到的网址的属性。同样，HTML 标签可以有全局属性提供附加标识，像 CSS 样式类这样的信息，或者一些标准属性隐藏(隐藏 HTML 元素)语言等。

HTML global attributes example

任何 HTML 标记都可以有多个属性。

全局属性可以和所有标签一起使用；尽管在一些 HTML 标签上，它们没有任何效果。
在这些属性不相关的地方也有一些例外，一些不支持全局属性的例外标签有 <base>标签、 <script>标签、 <title>标签等。
全局属性甚至可以与未指定为 HTML 标准标签的标签一起使用；即非标准标签也允许全局属性。在文档中使用这些非标准元素表示文档不再符合html 5。

下面是一个在非标准标签中使用全局属性hidden的例子。

<foo hidden>....</foo>

这个<foo>不是 HTML5 标准标签，仍然支持hidden属性。

HTML 全局属性

有许多全局属性，下面列出了它们的描述:

1. 访问密钥

该属性用于提供一个访问键，它是一个键盘键，用作聚焦任何 HTML 元素的快捷键。

该属性由一系列以空格分隔的字符组成。

例如:

<a href="https://www.studytonight.com/code/" accesskey="h">HTML Interactive Course</a>
<a href="https://www.studytonight.com/cascading-style-sheet/" accesskey="c">CSS Tutorial</a>

现在对于不同的浏览器，有不同的使用 accesskey 属性的方式，例如在 Chrome、Safari 等中我们可以使用 ALT + accesskey 来关注 HTML 元素，在 Firefox 中我们可以使用 ALT + SHIFT + accesskey 。

对于上面的 HTML 代码，如果您按下 ALT + h ，第一个超链接文本 HTML 互动课程也会被聚焦并点击。

2.自动沉淀

该属性与input HTML 标签一起使用，以控制用户输入或编辑的文本是否自动大写以及如何大写，或者应该对输入文本应用何种形式的大写。

它还具有一些预定义值，可用于设置其行为，如下所示:

关或无:表示不大写。
字符:表示所有字符默认为大写。
单词:表示每个单词的首字母默认为大写，其他全部为小写。
on 或句子:表示一个句子的第一个字母默认为大写，其余全部为小写。

太多浏览器尚不支持此属性。

让我们举个例子:

<input type="text" autocapitalize="word" id="mytext"/>

3.班级

它表示元素类的空格分隔的列表。这是最广泛使用的全局属性之一，用于指定使用 CSS 样式类的类选择器，并使用类属性处理 JavaScript 事件。

这里有一个在 HTML 标签中使用class属性的例子:

<div class="somestyle">This is a div element.</div>
<p class="pstyle">This is a paragraph.</p>

4.内容可编辑

这用于指示内容是否应该是用户可编辑的，即使 HTML 元素不是输入类型。如果是，那么浏览器会修改它的小部件，并允许编辑 HTML 元素。

**它有两个值:True和false

true: 表示内容可编辑

false: 表示内容不可编辑

例如:

<p contenteditable="true">This is a paragraph.</p>

5.数据还是数据-*

该属性用于创建一个名为自定义数据属性的自定义属性，可以用来指定 HTML 标签中任何有用的数据。

让我们举个例子来理解它:

<p>Choose Vehicle:</p>
<select>
    <option data-vehicle-type="hatchback" value="Polo">VW Polo</option>
    <option data-vehicle-type="motorcycle" value="R15">Yamaha R15</option>
    <option data-vehicle-type="SUV" value="Polo">Hyundai Creta</option>
</select>

就像我们使用data-vehicle-type属性定义车辆类型一样，类似地，youc an 也创建任何自定义<data>标签，以前缀数据- 开始，因此它也被称为数据-* 属性。

6.目录

该属性用于指示 HTML 元素中文本的方向，如div、span、p等。

它也有一些值，如下所示:

ltr: ltr 代表从左到右的，该属性用于表示像英语那样从左到右书写的语言。****

*** rtl: rtl 代表从右到左的，这个属性用来表示像阿拉伯语那样从右到左书写的语言。****

***   **auto:** 哪个让用户代理(浏览器)决定。它使用一种基本算法，解析元素中的字符，直到找到一个具有强方向性的字符，然后将该方向性应用于整个元素。****

****让我们举个例子:

<p dir="rtl">This text will appear right to left on browser.</p>

7.可拖动的

此属性用于指示是否可以拖动元素。

它可以采用以下值:

true: 表示元素可能被拖动。
false: 表示元素不能拖动。

8. dropzone

它用于指示在拖动后放下可拖动元素时要执行的操作。

该属性的允许值如下所示:

复制:该值表示拖放将创建被拖动元素的副本。
移动:该值表示被拖动的元素将被移动到这个新位置。
链接:该值将创建到被拖动元素的链接。

9.隐藏的

hidden属性用于指示特定元素不应显示在浏览器中。这个属性可以用来隐藏任何 HTML 元素，这些元素对应用程序有一些有用的价值，但是不应该像表单的 CSRF 令牌那样显示给用户。

10.编号

id属性用于定义唯一标识符，该标识符对于整个 HTML 文档必须是唯一的。

主要目的是在链接、脚本或样式化过程中识别元素。这是最广泛使用的全局属性之一，就像class全局属性一样。

11 .输入模式

该属性用于为虚拟键盘配置的类型提供提示，虚拟键盘配置用于编辑元素的内容。

主要用于<input>标签，当标签处于contenteditable模式时使用。

12.存在

该属性用于指定标准元素应该如何像在 Javascript 中定义的注册自定义内置元素一样工作。

13.itemid

此属性用作项目的唯一全局标识符。

14 .项目属性

使用itemprop属性将属性添加到元素中。几乎每个 HTML 元素都指定了itemprop属性；其中itemprop存在于名称-值对中。

它用于构造 HTML 文档信息，并随内容指定附加元信息。

例如，

<div itemscope itemtype="http://schema.org/Student">
    <h1 itemprop="name">John Wick</h1>
    <span>Class:
        <span itemprop="section">Comp. Sci.</span>
    </span>
    <span itemprop="sex">Male</span>
    <span itemprop="rollno">CS-547-2K7</span>
</div>

15.itemref

该属性用于在文档的其他地方提供带有一些附加属性的元素 id 列表(不是itemid)，例如在一些其他的 HTML 元素中引用一些元素。

16.项目范围

该属性与itemtype属性一起工作，以指定块中包含的 HTML 是关于特定项目的。该itemscope属性创建项目，并定义与之关联的itemtype的范围；其中itemtype是描述带有属性上下文的项目的有效 URL 的形式。

17.itemtype(项目类型)

此属性用于指定词汇的 URL，该词汇将用于定义数据结构中的项属性。因此itemscope用于设置数据结构的范围，其中itemtype设置的词汇将被激活。

18.语言

该属性用于定义可编辑和不可编辑的 HTML 元素的语言。为任何 HTML 元素定义语言时，该值由两个组件组成，第一个组件用于定义语言，第二个组件用于定义子语言，例如 en-GB 用于英国英语，en-US 用于美国英语。

这里有一个例子，

<p lang="en-GB">This is British English.</p>

19.狭槽

此属性用于将阴影树中的槽分配给元素。通过创建名称属性值与插槽属性值匹配的<slot>元素，将具有slot属性的元素分配给插槽。

20.拼写检查

这用于定义可以检查元素的拼写错误。

其值如下:

true: 用于表示元素要检查拼写错误。
false: 用于表示不应对元素进行拼写错误检查。

21.风格

该属性包含隐式 CSS 样式代码，用于声明任何元素的样式规则。

虽然建议在单独的 CSS 文件中定义样式属性，但是我们可以使用style属性在 HTML 元素中指定样式规则。

style属性和<style>标签允许分别在一个 HTML 元素或一个 HTML 文档中定义 CSS 样式规则。

让我们举个例子:

<p style="color:green;">This text will be shown in green color.</p>

第 22 个定位点索引

它用于指示一个元素是否可以获得输入焦点，如果可以，它是否应该参与顺序键盘导航，如果可以，那么在哪个位置。

它具有以下值:

否定:表示元素是可聚焦的，但不能通过顺序键盘导航到达。
0: 该值表示元素可聚焦，也可通过顺序键盘导航到达。
正:表示元素应该是可聚焦的，并且可以通过连续的键盘导航到达，并且元素聚焦的顺序与 tabindex 的递增值相同

23.标题

该属性包含一个文本，该文本表示与其所属的 HTML 元素相关的任何附加信息。如果您为任何 HTML 元素指定了标题属性，当鼠标悬停在该 HTML 元素上时，您将看到该标题文本。这是一个工具提示，用于显示 HTML 页面中显示的任何信息的附加信息。

例如，

<p title="This is John Wick">Keep mouse on me to see who am I!</p>

24.翻译

它用于指示元素的属性值及其文本值是否可以翻译

它有两个值:

空字符串和是，表示元素将被翻译。
否值表示该元素将不被转换。

有了这个，我们已经列出了所有的全局属性，你可以使用你的 HTML 标签。去我们的网络游乐场试试吧。

CSS

CSS 基础

CSS 简介

原文：https://www.studytonight.com/cascading-style-sheet/introduction-to-css

注:以下教程期望读者对 HTML 有一定的基础知识。如果没有，我们强烈建议您参考这里的 HTML 课程。

假设你有一个很棒的创业想法，或者想为你的企业创建一个网站。对于有抱负的网络开发人员来说，时间和金钱可能是主要的考虑因素。幸运的是，仅仅通过掌握 HTML 和 CSS，你就可以开发出令人惊叹的网站，既节省了时间和金钱，又改善了访问者的体验。

层叠样式表(www.w3.org/Style/CSS/)提供了网页设计师多年来一直叫嚣的东西:对网站布局的更多控制。您可能已经知道，HTML 也可以用于格式化网页上的内容。例如，许多 HTML 标签支持align属性，这为文本对齐提供了简单的支持。

<h1 align = "center">BIG CENTERED TEXT!</h1>

现在，对于那些只来自 HTML 背景的人来说，知道标签的作用，align 属性在某种程度上是一个双赢的局面。然而，大多数 HTML 标签也包含像大小、颜色等属性。纯粹是表象。

考虑<blink>标签。以下标记将导致文本在 Mozilla Firefox 上闪烁:

<blink>Firefox is the King of Internet Browsers!</*blink*>

使用 HTML 进行格式化的问题是，HTML 不太擅长格式化，也不是为格式化而设计的。幸运的是，我们有更好的方式来格式化我们的网页-样式表。

以下是你应该考虑使用 CSS 来设计网站风格的 5 个原因:

Consistency

通过对 CSS 文件进行一次更改，您可以更改整个网站的外观。你的网站越大，CSS 为你节省的时间就越多。此外，使用 CSS，您网站上的所有样式都是一致的。
Bandwidth Reduction

当我们在一个 CSS 文件中单独编写样式代码时，我们在 HTML 页面中留下了纯内容，从而减小了它的大小。当一个网站被加载时，CSS 文件被加载一次，然后被浏览器缓存，对于连续的请求，只请求 HTML 页面，因此大大减少了带宽的使用。您减少的带宽需求将导致更快的加载时间，并可能削减您的网络托管成本。
Search Engines

CSS 被认为是一种干净的编码技术，这意味着搜索引擎不必费力去读取它的内容。此外，使用 CSS 会让你的网站内容多于代码——而内容对你的搜索引擎成功至关重要。
Browser Compatibility

CSS 样式表增加了您网站的适应性，并确保更多的访问者能够以您想要的方式查看您的网站。
Viewing options

另一个常见的网页设计问题是越来越需要为不同的媒体提供网站。CSS 可以通过允许相同的标记页面以不同的查看样式呈现来帮助您应对这一挑战，例如，您可以为打印或移动设备创建单独的样式表。

CSS1在 1996 年第一次标志着它的出现，CSS2很快紧随其后，做出了一些重大改进。当前版本CSS3增加了许多有用的功能。新的浏览器在性能和支持方面比旧的浏览器好得多，但是问题仍然存在。浏览器缺陷仍然存在，开发者教育和吸收滞后。

不过不用担心！我们在这里帮助您一步一步地学习设计网页的艺术。现在，在我们开始第一次看 CSS 之前，先看看下面的图片。只有 HTML，你可以构建非常基本的表单，但是添加一点 CSS，你的服务就会有一个好看得多的网页！

Introdcution to CSS

CSS 前

Introdcution to CSS

CSS 后

将 CSS 添加到 HTML 中

原文：https://www.studytonight.com/cascading-style-sheet/add-css-into-html

让我们先来看看级联样式表。您可能已经知道，所有编程语言都有自己的语法，虽然 HTML 和 CSS 并不完全是编程语言，但它们确实有自己的语法。

CSS 语法不是很麻烦。CSS 规则被定义为一个属性名后跟一个冒号，然后一个属性值后跟一个分号。单个规则以分号结束，最终规则有一个可选的分号。唷！让我们更仔细地看看这句话。

property: value; property: value;

一般来说，在 HTML 文档中添加 CSS 有三种方法，它们是:

内嵌 CSS
内部或嵌入式 CSS
外部 CSS

内嵌 CSS

内嵌 CSS 是为任何 HTML 标签提供样式的最快方式。当您想要为任何单个 HTML 标记设置样式属性时，可以使用它。要内联设置 CSS 属性，必须在开始的 HTML 标签中添加样式属性。然后，你要以属性的形式添加 CSS 属性:value对。

内嵌 CSS 的语法

<p style="background-color: yellow;">Welcome to Studytonight.</p>

示例:指定内联 CSS

在本例中，我们使用 < p > 标记创建了一个段落，然后使用内嵌 CSS 将background-color 设置为黄色。

<!DOCTYPE html>
<html>
<head>
	<title>Inline CSS</title>	
</head>
<body>
	<p style="background-color: yellow;">Welcome to Studytonight.</p>
</body>
</html>

输出:

内部或嵌入式 CSS

内联 CSS 是为任何 HTML 标记设置样式的快速有效的方法，但是它也有一些限制，例如如果您想要为两个不同的段落设置相同的样式。然后，您必须分别为每个段落添加相同的内嵌样式。为了克服这个问题，引入了嵌入式 CSS。

嵌入式 CSS 用于为多个 HTML 标签设置相同的样式属性。它在 HTML 文档中为编写 CSS 属性提供了专用空间。

要使用嵌入式或内部 CSS 设置 CSS 属性，必须先添加开合 <样式> 标签。 <样式> 标签必须放置在开合 <头部> 标签之间。所有的 CSS 样式属性都可以写在开合 <样式> 标签之间。

内部或嵌入式 CSS 的语法

<head>
	<style>
		p{ 
			background-color: yellow;
		 }
	</style>
</head>

示例:指定内部 CSS

在给定的示例中，我们使用 < h1 > 标记创建了一个标题，使用 < p > 标记创建了一个段落。然后使用内部 CSS 方法设置 CSS 样式属性。我们已经将标题的文本颜色设置为红色。对于段，我们已经将background-color 设置为黄色font-size设置为 20px 。

<!DOCTYPE html>
<html>
<head>
	<title>External or Embedded CSS</title>
	<style>
		h1{
			color: red;
		}
		p{ 
			background-color: yellow;
			font-size: 20px;
		 }
	</style>
</head>
<body>
	<h1>Studytonight</h1>
	<p>Welcome to Studytonight.</p>
</body>
</html>

输出:

外部 CSS

当 CSS 代码非常长或者开发人员不想将两个代码(HTML 和 CSS)都放在一个文件中时，就使用外部 CSS。这也将提高代码的可读性。

要创建一个外部 CSS 文件，你必须先用保存文件。css 文件扩展名。然后，您必须借助 <链接> 标签将该 CSS 文件链接到 HTML 文件。 <链接> 标签可以放置在开合 <头部> 标签之间。

示例:指定外部 CSS

在给定的示例中，我们创建了两个文件，一个是扩展名为. html 的 HTML 文件，另一个是扩展名为. css 的 CSS 文件。

External.html 档案

该文件仅由 HTML 代码组成。

<!DOCTYPE html>
<html>
<head>
	<title>External or Embedded CSS</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<h1>Studytonight</h1>
	<p>Welcome to Studytonight.</p>
</body>
</html>

style.css 文件

该文件仅由 CSS 代码组成。

h1{
	background-color: yellow;
}

p{
	color: red;
	font-size: 20px;
}

输出:

结论

在本课中，我们学习了如何在 HTML 文档中指定 CSS。有三种方法可以指定 HTML 文档中的 CSS，如下所示:

内联方法
内部或嵌入式方法
外部方法

CSS 的基本语法

原文：https://www.studytonight.com/cascading-style-sheet/css-syntax

让我们先来看看级联样式表。您可能已经知道，所有编程语言都有自己的语法，虽然 HTML 和 CSS 并不完全是编程语言，但它们确实有自己的语法。

CSS 语法不是很麻烦。CSS 规则被定义为一个属性名，后跟一个冒号，然后是一个属性值。单个规则以分号结束，最终规则有一个可选的分号。唷！让我们更仔细地看看这句话。

property-name1 : value1;  . . . property-nameN : valueN;

通过使用style属性，CSS 规则可以直接放置在大多数 HTML 标签中。例如，要设置h1标题的颜色和对齐方式，我们可以使用:

<h1 style = "color:red; text-align:center;">Hello, CSS!</h1>

CSS 的这种直接使用被称为内联样式，由于它干扰了 HTML 标签，增加了 HTML 文件的大小，并且样式没有可重用性，所以通常应该避免使用。

相反，我们可以创建一个将自己绑定到特定元素或一组元素的样式，这些元素可以根据需要进一步重用。考虑下面的例子，它显示了正确的 CSS 语法，并将其分解为各个组件。

CSS Syntax

注意:样式块中的最终声明不需要分号。但是，为了更好地度量和便于以后插入属性，请始终考虑在所有属性后使用分号。

CSS 属性名称使用多个单词时用破折号隔开，例如:font-face、line-height、font-size等。另外，一定要记住 CSS 是而不是空白敏感的，因此

h1{ 
    font-size: large; 
    text-align: center; 
    font-family: Arial
}

将呈现与相同的

h1{font-size: large; text-align: center; font-family: Arial }

另外，请注意 CSS 不区分大小写，也就是说

h1{ 
    FONT-SIZE: large; 
    text-align: CENTER; 
    FONT-FAMILY: Arial 
}

与...相同

h1{ 
    font-size: large; 
    text-align: center; 
    font-family: Arial
}

但是，在某些情况下，例如使用网址值、字体名称和某些选择器(例如:类)，大小写将被强制执行。因此，为了避免混淆和错误，最好假设 CSS 是区分大小写的。

样式表可以使用前面看到的<style>...</style>块与 HTML 一起放在同一个文档中。但是，它可以放在外部文件中，并通过包含在 HTML 文档的<head>标签中的<link>标签进行引用。考虑一个示例样式表。

使用`<style>`标签:

<style type = "text/css">
   *h1* { color: red; text-align: center; }
   *p* { line-height: 150%; }
</style>

使用`<link>`标签:

<link href = "mystyle.css" rel = "stylesheet" type = "text/css"/>

mystyle.css只包含 CSS 规则，没有 HTML 标签。

神秘. css

h1{ color: red; text-align: center; }
p{ line-height: 150%; }

在我们前进之前，应该注意的是，即使 CSS 和 HTML 一起组成了一个伟大的团队，CSS 也不同于 HTML，事实上依赖于它。CSS 不是标记的替代品，相反，它只能用来设计 HTML 的样式。

CSS 选择器

原文：https://www.studytonight.com/cascading-style-sheet/css-selectors

好吧。所以现在你已经很好地掌握了 CSS 的语法，让我们进入选择器。选择器帮助我们识别需要应用特定样式的 HTML 元素。

选择器有三种类型，即，

元素选择器
id 选择器
级选择器

本模块将帮助您理解选择器的含义以及这三种选择器的工作原理，这反过来又可以在设计大型网页时节省大量时间和精力。

为了构建一个样式表，我们需要定义选择 HTML 元素的规则，并向它们应用各种样式属性。我们已经知道元素选择器(回想一下我们给<h1>标签分配的样式)，如果你不记得了，不要担心，我们会在本教程中再次讨论它。除了元素选择器，最常见的两种选择器形式是 id 和 class 选择器。

在下面的视频中，我们已经详细解释了所有三种类型的 CSS 选择器。

元素(标签)选择器

元素选择器或标签选择器，在 HTML 标签级别工作。当我们在 CSS 文件中直接为 HTML 标签添加样式时，它被称为元素选择器。

例如:

HTML 代码

<h1>Welcome to Studytonight</h1>

CSS 代码

h1 { 
    color: red; 
}

在上面的 CSS 代码中，我们已经直接给h1标签/元素分配了样式，这种标签选择和样式的方式被称为元素选择器，因为我们直接给元素分配样式。

上面的 CSS 代码，将把 HTML 文件中所有h1标签里面的文字字体颜色，改成red。当您想要对任何元素/标签应用基本样式时，应该使用这种选择模式，例如如果您想要所有段落文本都使用 calibri 字体，您可以编写以下 CSS 规则:

p { 
    font-family: calibri; 
}

现场示例→

id 选择器

如果在所有字体设置为calibri的段落标签中，你想让一个段落在你的网页上脱颖而出，并且你想让它有不同的风格，会怎么样。你会怎么做？

HTML 中的元素可以通过在标签内部使用 id 属性来命名，以便更好地引用。考虑以下示例:

<p id="unique">CSS is fun!</p>

既然标签已经命名，我们只需要使用标签的#unique ( #后跟 id 值)就可以为其指定样式规则。

#unique {
    color: green; 
    text-align: center;
}

现场示例→

#id当您想要为特定的标签/元素设置样式时，会使用选择器。你所要做的就是，给 HTML 标签分配一个id属性，并在 CSS 文件中为它提供样式。

我们也可以通过在 CSS 文件中的#id选择器前添加标签来制作一个 id 选择器，标签/元素特定。

考虑以下风格:

p#star {
    font-family: Arial;
}

现场示例→

这将只选择其id属性设置为star的段落元素。把这个规则和我们之前看到的进行比较，

#star {
    font-family: Arial;
}

这将匹配任何带有id = "star"的元素/标签，无论是标题的段落。这可能会回答您的疑问，即多个标签是否可以具有相同的 id？是的，他们可以！但是作为标准实践，id属性应该用于设置单个元素的样式。

虽然 CSS 为您提供了一种选择元素特定 id 规则的方式，就像p#star一样，但是始终将相同的标签名与 id 选择器一起使用，然后根据元素过滤掉是不合适的。但是，如果您有一个在整个站点范围内使用的样式表，并且您在不同的文档中有不同的 id star元素，那么这样的规则确实是有意义的。为了安全起见并避免混淆，最好对元素使用唯一的 id。

类别选择器

class选择器的规则定义为.class-name，如下所示:

HTML 代码

<p class="fancy">I am fancy paragraph</p>
<h1 class="fancy">I am fancy heading</h1>
<h2 class="fancy">Mee too!</h2>

CSS 代码

.class {
    background-color: black; 
    color: white; 
    font-style: italic;
}

现场示例→

class属性用于定义特定标签或一组标签所属的类的名称。与id值不同，类值不必是唯一的，因为许多元素可以是同一类样式的成员。事实上，不同类型的元素也可以属于同一个样式类。

类规则也有一些变化。例如，将类css_demo的所有h1元素设置为黄色背景色，

h1.css_demo { background-color: yellow; }

可以使用。

要显式选择类css_demo的所有元素，也可以使用*。

*.css_demo{ background-color: yellow; }

与相同，

.css_demo{ background-color: yellow; }

虽然class和id属性为创建样式规则提供了很大的灵活性，但是还存在许多其他同等价值的标签。例如，您可能希望区别对待<p>内的所有<strong>标签，而不是出现在<p>标签外的<strong>标签。为此，您必须使用上下文选择。

这种选择是通过为要应用的规则指定标签必须嵌套的顺序来完成的，用>隔开。例如，

p > strong{
    background-color: yellow;
}

现场示例→

上述规则将应用于所有<strong>标签，在一个<p>标签内。

在一个p元素中所有出现的strong元素都将有一个 Helvetica 字体。不包含在p标签中的strong标签的其他事件将不会应用相同的规则。

注意:使用上下文选择器要小心。不需要的逗号可能会将上下文选择变成分组，反之亦然。

既然你已经习惯了选择器，让我们继续讨论 CSS 中的背景样式吧！

CSS 注释

原文：https://www.studytonight.com/cascading-style-sheet/css-comments

在代码中添加注释总是一个很好的做法，我们都必须虔诚地遵循它。

无论是一个大型应用程序还是一个简单的 HTML 网页，在任何需要的地方添加注释的习惯肯定会让你从你的开发伙伴那里得到赞赏，因为它让理解任何代码的目的变得更加容易。

CSS 中的注释

注释，有助于更好地记录我们的代码，以便以后更容易维护和更新。CSS 注释类似于 C 编程注释。/* This is a comment */

注释有助于其他人和您更好地理解您的代码，因此建议您在代码中添加注释。在样式表中，我们可以添加注释来解释特定的样式类在哪里被使用，这样阅读注释的人就可以了解样式类/id 的用途。

HTML 注释语法<!— comment -->不适用于 CSS，被忽略，但是您可以使用它们来更好地组织样式块。

<style>

p { 
    /* font-size: xx-larger; */
    font-family: Serif; 
    /*
    color: red; 
    border: 5px;
    */
} 

</style>

现场示例→

CSS 属性

CSS 背景

原文：https://www.studytonight.com/cascading-style-sheet/css-backgrounds

好了，你现在已经看到了 CSS 的语法，现在已经习惯了使用class和id选择器来编写 CSS 规则。接下来，我们现在在 CSS 中潜入背景，是时候抛弃旧的黑白主题，拥有美丽、明亮的设计了。

背景属性是最有用的属性之一，玩起来非常有趣。正如我们将很快看到的，它被用来操纵页面背景。

背景色- `background-color`

color在 CSS 世界中，可以通过以下三种方式指定:

使用有效的颜色名称，如red
使用一个 RGB 值，如rgb(255, 255, 255)
或者，通过使用颜色的 hexa 代码，如#F9F9F9(有很多网站检查颜色的 Hexa 代码，如 ColorHexa )

回到background-color，该属性设置元素的背景颜色。默认值透明允许任何底层内容通过。值inherit应用包含父元素的属性值。

background-color: color | transparent | inherit

例如，

h1 { background-color: red; }

p { background-color: orange; }

现场示例→

上例中，将所有h1标题的背景颜色设置为red，所有段落的背景颜色设置为orange。

与 CSS1 、 CSS2 、 CSS3 以及以下网页浏览器兼容，

IE 4+
Firefox 1+
Opera 4+
Safari 1+

背景图像- `background-image`

顾名思义，背景图像将图像与元素相关联。背景图像需要使用url()语法指定的源图像的网址。默认值为无。

background-image: url(image-file) | none | inherit

考虑下面的例子，这将为整个网页设置一个背景图像。

body { 
    background-image: url(tile.png) 
}

要设置背景图像，对于任何特定的元素/标签，使用class或id进行设置，

#hello { 
    background-image: url(http://www.example.com/images/hello.gif); 
}

现场示例→

url的值可以是完整的网址，也可以是相对网址。例如，如果图片存在于同一目录中，您可以简单地指定图片的名称。

与 CSS1 、 CSS2 、 CSS3 以及以下网页浏览器兼容，

IE 4+
Firefox 1+
Opera 4+
Safari 1+

注意:设置背景时要记住的一点是，一定要选择与上面文字相得益彰的背景，这样文字才会清晰可见。

重复背景- `background-repeat`

有时，您为网页选择的背景图像可能会小于页面上其他元素使用的画布空间。在这种情况下，您可能需要重复图像。此属性的值可以如下所示:

repeat -垂直和水平重复图像。这是background-repeat属性的默认值。
repeat-x -仅水平重复
repeat-y -垂直重复
no-repeat -不重复背景图像。

示例:

body{ 
    background-image: url(studytonight.png); 
    **background-repeat**: *no-repeat*; 
}

现场示例→

上面的代码将使图像studytonight.png作为网页背景，但是如果图像的大小较小，它不会完全填充网页，并且由于background-repeat属性被设置为no-repeat，因此它不会重复，留下一些没有背景的区域。

与 CSS1 、 CSS2 、 CSS3 以及以下网页浏览器兼容，

IE 4+
Firefox 1+
Opera 4+
Safari 1+

背景位置- `background-position`

默认情况下，背景图像位于网页左上角处，但我们可以更改这一点。

**此属性确定背景图像的位置。左上角背景图像的位置可以用绝对距离(以像素为单位)来指定，也可以用百分比值来指定。

在确定位置时，也可以使用命名值。横轴名称为中心、左和右。纵轴，你可能已经猜到了，顶部，中心和底部。请考虑以下示例:

body { 
    background-image: url(hello.png); 
    background-position: 100px 150px; 
}
body { 
    background-image: url(hello.png); 
    background-position: 10% 55%;
}
body { 
    background-image: url(hello.png); 
    background-position: top center; 
}

在最后一个实时示例中，通过在#study样式中添加background-position: top right;来尝试这一点。

当我们在像素或百分比中指定background-position时，我们指定 2 个值，第一个值指定距左侧的距离，第二个值指定距顶部的距离。

与 CSS1 、 CSS2 、 CSS3 以及以下网页浏览器兼容，

IE 4+
Firefox 1+
Opera 4+
Safari 1+

背景行为- `background-attachment`

此属性设置背景图像是否滚动。默认值为scroll，设置背景滚动相关内容，通常是文本。当相关内容在背景上滚动时，替代值fixed使背景静止。

值inherit应用包含父元素的属性值。

background-attachment: scroll | fixed | inherit

考虑下面的例子，

body{ 
    background-image: url (hello.png); 
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed; }

与 CSS1 、 CSS2 、 CSS3 以及以下网页浏览器兼容，

IE 4+
Firefox 1+
Opera 4+
Safari 1+

注意:这个属性经常用来创建水印效果，类似于微软推出的标签的专有属性 bgproperties。

背景属性在一起

如果我们愿意，我们可以将上述所有背景属性组合在一个属性中。

属性的顺序应该无关紧要，您没有定义的任何属性都使用它们自己的默认值。请考虑以下示例:

body { background: white url(picture.gif) repeat-y center; }

CSS 样式化文本

原文：https://www.studytonight.com/cascading-style-sheet/styling-the-text

网站最重要的部分是文本，因为这是 HTML 的构建目的，标记要在互联网上共享的文本。文本是每个网页不可分割的一部分。一个设计优秀但不可读、难看、无格式文本的网页是非常不合适的。

现在，您已经了解了 CSS 背景属性的基本知识，让我们努力在网页上拥有美观、格式良好的文本。

在本模块中，我们将不讨论字体，但我们将讨论文本的表示。

文本属性是有趣的实验，并肯定会添加到您的网页动态边缘。让我们从任何文本最基本的属性开始，颜色！

文本颜色

color属性定义文本的颜色。在 CSS1 中引入，几乎所有的网页浏览器都支持。为文本选择颜色时，一定要记住背景的颜色。

就像在background-color中一样，在这个属性中，颜色可以用以下三种形式中的任何一种来指定:

有效的颜色名称，如红色、蓝色等
HEXA 代码，和白色一样，是 #FFFFFF ，黑色是 #000000
一个 RGB 值

语法:

selector { 
    color: red;
}

现场示例→

与 CSS1 、 CSS2 、 CSS3 以及以下网页浏览器兼容，

IE 3+
Firefox 1+
Opera 3.5+
Safari 1+
Chrome 1+

文本方向

文本的 direction 属性可用于支持多种语言和同一文档。默认值为ltr，即从左到右。一些语言，如阿拉伯语、波斯语、乌尔都语等，需要从右向左的文本方向。

例如

body { 
    direction: rtl;
}

现场示例→

上面的 CSS 代码会将网页上每个文本的方向从右向左改变。

与 CSS1 、 CSS2 、 CSS3 以及以下网页浏览器兼容，

IE 5.5+版
Firefox 1+
Opera 9.2+
Safari 1.3+
铬 2+

字母间距

此属性定义文本中单词字母之间的间距。

语法:

letter-spacing: normal | length | initial | inherit;

长度可以是正值或负值。最初，属性设置为默认值，即normal。

h1{ 
    letter-spacing: 2px; 
}
h2{ 
    letter-spacing: -3px; 
}

现场示例→

与 CSS1 、 CSS2 、 CSS3 以及以下网页浏览器兼容，

IE 4+
Firefox 1+
Opera 3.5+
Safari 1+
Chrome 1+

文本对齐

啊，越熟悉text-align！此属性指定元素中文本的水平对齐方式。默认值取决于方向属性。如果方向设置为rtl，对准是正确的；如果方向设置为ltr，对准是向左的。

语法:

text-align: left | right | center | justify | inherit;

例如

#text-center { 
    text-align: center;
}

现场示例→

这与 CSS1 、 CSS2 、 CSS3 以及以下网页浏览器兼容，

IE 3+
Firefox 1+
Opera 3.5+
Safari 1+
Chrome 1+

文本缩进

此属性指定文本从保持块的第一行(左上角)开始的缩进(间距)。您可以为此属性指定负值。正如您可能猜到的那样，对于负值，文本将向左缩进，对于正值，文本将远离左侧缩进。长度可在pixel、cm、pt等中指定。您也可以为此属性指定一个百分比值。

语法:

text-indent: length;

例如

#little_towards_right { 
    text-indent: 10px;
}

现场示例→

与 CSS1 、 CSS2 、 CSS3 以及以下网页浏览器兼容，

IE 3+
Firefox 1+
Opera 3.5+
Safari 1+
Chrome 1+

文本装饰

text-decoration属性指定添加到文本中的装饰。

注意:在 CSS3 中，text-decoration属性是text-decoration-line、text-decoration-color和text-decoration-style的简写属性，但目前这在任何主要浏览器中都不受支持。

语法:

text-decoration: none | underline | overline | line-through;

例如

#underlined { 
    text-decoration: underline;
}

现场示例→

与 CSS1 、 CSS2 、 CSS3 以及以下网页浏览器兼容，

IE 3+
Firefox 1+
Opera 3.5+
Safari 1+
Chrome 1+

文本阴影

text-shadow属性为文本添加阴影。

语法:

text-shadow: h-shadow v-shadow blur-radius color | none;

h-shadow和v-shadow为强制参数。h-shadow指定实际文本与其阴影之间的水平距离，h-shadow指定文本与其阴影之间的垂直距离。

如果我们没有为blur-radius指定任何值，那么阴影是实际文本的精确副本，由于 h 形阴影和 v 形阴影而稍微移位。blur-radius让它模糊，更看重马克斯这个影子更模糊。

例如

h1{ text-shadow: 2px 2px 5px #ff0000; }

`现场示例→

与 CSS1 、 CSS2 、 CSS3 以及以下网页浏览器兼容，

IE 10+
Firefox 3.5+
Opera 9.6+
Safari 4+
Chrome 4+

注意:要给文本添加多个阴影，请添加逗号分隔的阴影列表。

您可以使用更多的文本属性。上面提到的属性是最常用的！接下来，字体！

- *`

使用 CSS 更改文本字体

原文：https://www.studytonight.com/cascading-style-sheet/css-fonts

在上一个模块中，我们讨论了文本格式。现在，你已经知道如何在 CSS 中处理背景和文本格式。让我们从字体开始。

字体为你的网页设置一个主题。字体也有助于你与你的听众建立联系。在正式网页上使用漫画无没有任何意义，可能会立即导致负面印象，而在儿童网站上，相同的字体可能看起来很有趣。

您可以使用 font 属性在一个规则中指定所有字体属性。

语法:

font: font-style font-variant font-weight font-size font-family;

您不需要包含所有属性，考虑一个例子:

p { 
    font: normal small-caps bold 18pt/22pt "Times New Roman", Courier;
}

与 CSS1 、 CSS2 、 CSS3 以及以下网页浏览器兼容，

IE 4+
Firefox 1+
Opera 6+
Safari 1+
Chrome 1+

字体系列- `font-family`

该属性定义了用于文本的字体。

语法:

font-family: font 1[, font2, ... ,fontN]

字体可以专门命名，也可以使用通用字体系列名称。当使用逗号指定多个字体名称时，将按降序读取它们，寻找第一个匹配项。并非所有的浏览器和设备都支持所有的字体，因此我们应该提供逗号分隔的字体，以便覆盖大多数设备/浏览器。五种通用字体名称是:

衬线
无衬线字体
草书
幻想
单一间隔

注意:它们可能不会在所有浏览器中以相同的方式呈现。

示例:

p{ 
    font-family: Serif; 
}

现场示例→

与 CSS1 、 CSS2 、 CSS3 以及以下网页浏览器兼容，

IE 3+
Firefox 1+
Opera 4+
Safari 1+
Chrome 1+

这个属性相当于一个<font>标签的脸属性。由于<font>标签在 HTML5 中被弃用，建议不要使用。

字体大小- `font-size`

这用于设置字体的大小。

语法:

font-size: length | percentage | Size in Words | inherit;

默认为中。长度通常在点、像素、 em 等中指定。

百分比值将字体大小设置为当前继承字体大小的百分比。

px像素值取决于设备，一般相当于 1/96 英寸。但是对于不同屏幕分辨率的设备，这个值是不同的。

另一个广泛使用的单位是em。我们试着理解一下，借助一个例子:如果把正文的font-size设置为1em，把h1标题文本的font-size设置为3em。然后无论是哪种设备，浏览器都会确保标题文本的大小始终是正文文本的 3 倍。

示例:

#fontastic{ 
    font-size: *12px*;
}
#fontastic-1{
    font-size: *1em*
}

现场示例→

与 CSS1 、 CSS2 、 CSS3 以及以下网页浏览器兼容，

IE 3+
Firefox 1+
Opera 4+
Safari 1+
Chrome 1+

字体样式和字体粗细

font-style设置字体的表现风格，而font-weight设置文本的粗细或相对粗细。

语法:

font-style: italic | normal | oblique | inherit;
font-weight: normal | bold | bolder | lighter | 100 to 900 | inherit;

现场示例→

大多数浏览器会将 100-500 解释为普通文本， 600-900 解释为粗体。相对值如较浅或较粗会根据父元素的字体粗细增加或减少。

与 CSS1 、 CSS2 、 CSS3 以及以下网页浏览器兼容，

IE 3+
Firefox 1+
Opera 4+
Safari 1+
Chrome 1+

字体变体

此属性设置指定或默认字体系列的变体。

语法:

font-variant: normal | small-caps | inherit;

现场示例→

小写值将小写文本设置为大写。小型大写形式的应用是法律或许可文件。

与 CSS1 、 CSS2 、 CSS3 以及以下网页浏览器兼容，

IE 3+
Firefox 1+
Opera 4+
Safari 1+
Chrome 1+

CSS 样式化 HTML 链接

https://www.studysouth.com/cascade-style sheet/style-link

超链接是网页的主干。它允许我们链接一组网页，使之成为一个网站。有了 CSS，你可以大大修改这些链接的外观，让你的网页更有吸引力

众所周知，HTML 中的链接是使用<a>(锚点)标签创建的。

示例:

a {
    font-size: 12px;
    color: #222222;
}

超链接可以有多种不同的样式，当然，颜色、字体系列、背景等。属性确实对链接起作用，但是它们也可以根据它们所处的状态进行样式化。

一个链接可以处于四种类型的状态:

A: Link → A normal, unaccessed link.
A: → the link that the user has visited (clicked) before.
A: Hover → When the user moves the mouse over the link.
A: Activate → the moment when the link is clicked.

在设置链接状态的样式时，需要记住几个规则。

a:hover always comes after a:link a:visited
a:active is always ranked a:hover

之后考虑下面的例子:

活例→

回想一下我们之前学过的text-decoration属性。文本装饰属性用于更改链接的外观，例如删除下划线或添加交叉线。另外，让我们回到背景属性。可以使用class和id选择器以不同的方式设置链接。所有这些属性都与<a>标签一起工作，所以请随意尝试。

styling abchor tag with CSS

小变化带大影响`cursor:pointer;`

每当我们将鼠标悬停在一个链接上，鼠标光标就会从箭头变成手形指针。你想过为什么吗？或者怎么做？使用属性cursor完成。可以取各种不同的值，其中pointer就是一个。

a:hover { 
    color: #000088; 
    **cursor**: *pointer*;
}

活生生的例子→

以下是一些常用的数值对于cursor的属性:

cursor:crosshair
cursor:help
cursor:move
cursor:progress
cursor:wait and so on.

此外，这不是强制性的，必须仅在链接上使用，这可以与任何 HTML 元素/标签一起使用。

真人示例→

将链接样式化为按钮

我们甚至可以将链接样式化为矩形按钮，悬停时改变颜色，就像下面的按钮一样:

这些是链接一旦完成margin和padding，我们将了解这是如何完成的。如果你不能阻止自己去查看像这些按钮一样的样式链接的 CSS 代码，去查看教程。

唷！到目前为止，你已经学习了所有关于选择器、背景和字体的知识。现在是时候进入 CSS 的下一个层次了。接下来是列表、表格和边框设计。继续走！下节课见！

CSS 样式化 HTML 列表

原文：https://www.studytonight.com/cascading-style-sheet/styling-lists

我们经常看到带有导航菜单的网页，以下拉方式或水平菜单的形式提供到其他页面的链接(参见上面的“今晚研究”网站导航栏)。这些菜单在结构上是列表，但风格不同。

列表也用于表示相关的数据信息，这些信息也可以被设计得更好看。

在 HTML 中，有两种类型的列表:

订购清单<ol> : 标有数字或字母的物品。
无序列表<ul>:标有项目符号的物品。

有了 CSS，你可以用自己的图片作为列表中的项目符号。CSS 列表属性允许您:

为有序列表设置不同的列表项标记。
为无序列表设置不同的列表项标记。
将图像设置为列表项标记。

使用list-style-type属性可以设置列表项标记的类型。

示例:

ul { 
    list-style-type: circle; 
}

ol { 
    list-style-type: lower-roman; 
}

现场示例→

以下关键词与list-style-type属性配合使用:

唱片
圆
平方
小数
十进制前导零
下罗马人
上罗马
下希腊语
下拉丁语
上拉丁语
亚美尼亚人
乔治亚的
下α
上α
无 -移除子弹

注:非关键字值已经包含在 CSS3 中，但几乎没有任何支持。

list-style-type 属性适用于所有列表，以及设置为显示的任何元素:列表项。列表标记的颜色将是元素的任何颜色(通过 color 属性设置)。

定位列表项标记

接下来，你需要知道如何定位你的列表。list-style-position属性允许您设置列表在网页上的位置。它接受两种价值观，inside & outside。默认值在外部。

示例:

ul{ 
    list-style-position: *inside*; 
}

现场示例→

作为列表项标记的图像

正如我们前面提到的，可以在网页上使用图像作为项目符号标记。这可以通过使用list-style-image属性来完成。您可以将其设置为无，也可以提供某个图像的网址。

ul{ 
    list-style-image: *url*('images/bullet.png');
}

现场示例→

将列表样式化到导航栏中

我们可以让列表看起来不仅仅是一个简单的列表。例如:您在当前网页顶部看到的导航栏是一个样式列表。

备选方案 1
备选方案 2
备选方案 3
备选方案 4
备选方案 5

一旦我们完成了其他基本的样式属性，我们将学习如何将列表样式化为不同类型的导航栏。

CSS 边框

原文：https://www.studytonight.com/cascading-style-sheet/css-borders

border属性是所有边框属性的简写。它定义了元素边框所有四条边的颜色、宽度和样式。

语法:

border: border-width border-style border-color

上面提到的是最常用的border属性格式来给你的 HTML 元素添加边框。就像我们对这一段做的那样。

示例:

#red-border {
    border: 1px solid red;
}

但是 border 也可以单独使用属性来实现。让我们了解这 3 个边框属性以及如何使用它们。

边框样式`border-style`

此属性用于设置元素周围的边框。支持多种边框样式，例如:

虚线
有点的
两倍
律动
隐藏的
插入物
没有人
开始
山脉
固体

这是虚线边框

这是槽边框

示例:

#dashed-border {
    border-style: dashed;
}
#dotted-border {
    border-style: dotted;
}
#groove-border {
    border-style: groove;
}

现场示例→

边框宽度`border-width`

该属性以数值或命名值设置边框宽度，命名值为细、中或粗。边框的宽度也可以使用独立属性border-width进行调整

这是一个粗虚线边框

例

#dashed-border {
    border-style: *dashed*;
    border-width: *6px*;
}

现场示例→

边框颜色`border-color:`

此属性使用颜色值设置边框的颜色。颜色值可以是六进制代码、RGB 值或有效的颜色名称。

这是一个粗的红色虚线边框

例

#dashed-border {
    border-style: dashed;
    border-width: 6px;
    border-color: red;
}

现场示例→

我们还可以在一个border-color规则中提供 4 种不同的颜色，为边框的所有 4 条边设置不同的颜色。

这是一个粗虚线的彩色边框

例

#dashed-border {
    border-style: dashed;
    border-width: 6px;
    border-color: red blue green yellow;
}

现场示例→

4 种不同的颜色值，用于顶部、右侧、底部和左侧，顺序相同。如果您提供两种不同的颜色名称，那么第一种颜色将设置为顶部和底部边框，第二种颜色将设置为左侧和右侧。去试试吧！

与 CSS1 、 CSS2 、 CSS3 以及以下网页浏览器兼容，

IE 4+
Firefox 1+
Opera 3.5+
Safari 1+
Chrome 1+

边界崩溃

此属性确定表格单元格是连接的还是分开的。

语法:

border-collapse: collapse | separate | inherit

默认值为separate，每个单元格都有一个带有一定间距的边框。如果设置为collapse，整个元素只有一个边框。

该属性主要用于样式<table>。

边框间距

此属性定义表格中单元格之间的间距。同样，该属性也用于 HTML 中的表。

语法:

border-spacing: non-negative length | inherit

如果提到一个长度，它会给出水平和垂直间距。如果明确定义了两个值，第一个值给出水平间距，而第二个值给出垂直间距。

在一侧设置边框

如上所述，我们可以使用border-style属性轻松设置元素周围的边框，使用border-width属性更改边框的厚度，并使用border-color属性为其赋予颜色。

现在，我们也可以使用这三个属性在任意一侧设置边框。我们所要做的就是在中间加上边的名字:

例如:要在底部添加边框，请使用属性border-bottom-style、border-bottom-width、border-bottom-color

我在底部有一个虚线边框

例

#dashed-border {
    border-bottom-style: dotted;
    border-bottom-width: 4px;
    border-bottom-color: blue;
}

现场示例→

同样可以用速记的方式写如下:

border-bottom: dotted 4px blue

与border-bottom类似，边框属性可以分别设置为顶部、右侧和左侧。要设置上边框，您可以使用

顶部边框(简写)
边框顶部宽度
边框-顶部样式
边框-顶部颜色

要设置右边框，您可以使用

右边框(简写)
边框-右宽度
右边框样式
右边框颜色

要设置左边框，您可以使用

左边框(速记)
边框-左宽度
左边框样式
左边框颜色

唷！那是很多属性。但是熟能生巧。接下来是桌子！祝你好运！

CSS 样式化表格

原文：https://www.studytonight.com/cascading-style-sheet/styling-tables

你对 HTML 中的表格相当熟悉(回想一下<table>标签？).表格本质上是由行和列组成的电子表格。你在网站上使用表格的频率会比你想象的要高，所以让我们了解更多关于如何用 CSS 让它们看起来漂亮的知识。在本模块中，我们将同时关注 CSS 和 HTML 部分。

大多数表的实际第一行不包含数据，它只包含列的标题。所以我们明确提到这一点不是更好吗？这可以通过使用<thead>元素来实现，这样查看器就可以正确区分列名和列数据。它可以包含多行标题信息。

注意:使用<thead>时，一定不能有<tr>是<table>元素的直接子元素。所有<tr>必须出现在<thead>、<tbody>或<tfoot>元素内。

有些表格也有页脚。考虑一家超市的打印收据，其中表格的底部用大粗体字母显示了总金额(好像你还不知道杂货有多贵！)反正<tfoot>元素是用来展示表尾信息的。现在你可能期望这个元素出现在<thead> & <body>元素之后。然而事实并非如此。<tfoot>必须在<thead>之后&之后<tbody>之前。<tfoot>用于包装指示表格页脚的表格行。

尽管标签放置异常，<tfoot>实际上在表格的底部呈现。网站上看到的大多数表格都使用颜色和线条来区分元素。边境在这种情况下至关重要。默认情况下，所有表格元素的边框默认为2px。

第 1 栏标题	第 2 栏标题
足音 1	足音 2
你好，第一栏	你好第二栏

下面是上表的 HTML 代码:

<table id="table-style-1">
    <thead>
        <tr>
            <th>Column 1 Heading</th>
            <th>Column 2 Heading</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Foot Note 1</td>
            <td>Foot Note 2</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Hello column 1</td>
            <td>Hello column 2</td>
        </tr>
    </tbody>
</table>

要指定表格边框，我们使用表格的border属性。

#table-style-1{ 
    border: 0.5px solid black; 
}

现场示例→

就像我们在上一个教程中学习的一样，边框宽度、边框样式和边框颜色。

以上示例将所述表格元素的边框修改为纯黑的0.5px。但是考虑下面的例子，

table, th, td{ border: 1px solid black; }

在上例中，由于<th>和<td>的边框不同，表格将有双边框。如果要显示单个边框，请使用border-collapse属性，如下所示。

table{ 
    border-collapse: *collapse*; 
}
table, th, td { 
    border: 1px solid black; 
}

现场示例→

继续尝试这个，看看有没有属性border-collapse的表是什么样子的。

注:若<！未指定 DOCTYPE >，边框折叠属性会在 IE8 及更早版本中产生意外结果。

文本对齐以及宽度和高度

您还可以更改表格列中的水平文本对齐方式。这是由我们已经熟悉的text-align属性完成的。

<th>元素中的数据默认为居中对齐，<td>中的数据默认为左对齐。但我们可以随时改变它们。

th{ text-align: left; }

桌子的高度和宽度也可以自定义。以下示例将表格的宽度设置为100%(覆盖整个页面宽度)，标题行的高度设置为80px。

table { 
    width: *100%*; 
}
th, td { 
    height: *40px*; 
}

现场示例→

第 1 栏标题	第 2 栏标题
足音 1	足音 2
你好，第一栏	你好第二栏

垂直文本对齐

vertical-align属性用于定义表格中文本的顶部、底部或中间对齐方式。默认情况下，这被设置为中间的。

table { 
    width: 100%; 
}
td { 
    height: 40px; 
}
th{ 
    height: 40px;
    vertical-align: bottom; 
}

第 1 栏标题	第 2 栏标题
足音 1	足音 2
你好，第一栏	你好第二栏

文本颜色和背景颜色

您可以使用属性color和背景色设置表格的文本颜色和背景颜色。也可以使用border属性指定边框颜色。

td{ 
    background-color: #EEEEEE; 
    color: blue; 
    border: 1px solid red;
}

现场示例→

第 1 栏标题	第 2 栏标题
足音 1	足音 2
你好，第一栏	你好第二栏

CSS 边距

原文：https://www.studytonight.com/cascading-style-sheet/css-margins

边距是元素周围的空白空间，用于舒适地放置元素。增加的额外空间，没有任何背景颜色，它是完全透明的。

您可以使用margin属性设置元素周围的边距。

语法:

margin: value in px, em or % | inherit

其中边距值是长度、百分比值、自动或从父元素继承。

这里有一个视频来解释所有关于margin的属性。

现场示例→

视频实录:

如果在margin属性中提供了两个值，第一个值将设置顶部和底部边距，第二个值适用于右侧和左侧边距。同样，如果为margin简写提供三个值，第一个适用于顶部边距，第二个适用于右侧和左侧边距，而第三个值适用于底部边距。请注意，未指定的边距是如何从为其反面定义的值中推断出来的。如果您想设置所有四边的值，可以按以下顺序设置:顶部、右侧、底部、左侧。

下面的示例说明了这一点:

边距:25px 50px 75px 100px

顶部的边距为 25px
右边距为 50px
底部的边距为 75px
左边距为 100 像素

边距:25px 50px 75px

顶部的边距为 25px
左右边距为 50px
底部的边距为 75px

边距:25px 50px

上下页边距:25px
左右页边距:50px

边距:50px

所有边的边距都是 50px

元素可能有默认的边距，并且这些值可能会有所不同。如果您想将所有边距重置为零，然后添加您自己的边距，您可以使用类似 *{边距:0；} 清除所有边距。还要注意，边距值可以是负的。

与 CSS1 、 CSS2 、 CSS3 以及以下网页浏览器兼容，

IE 6+
Firefox 1+
Opera 3.5+
Safari 1+
Chrome 1+

这就是利润。这很容易，对吧？让我们继续讨论定位元素。

CSS 填充

原文：https://www.studytonight.com/cascading-style-sheet/css-padding

还记得利润率吗？回想一下边距是指元素周围的空间，它给你在网页上带来舒适或紧凑的感觉和外观。边距清除元素边框之外的区域。填充与边距相似，但不相同。迷茫？继续读。

填充将清除元素边界内的区域。它在元素的边界和内容之间引入了额外的空间。就像 margin 属性一样，padding有一个简写属性，为所有四边设置填充。也可以单独设置。

语法:

padding: value1 [value2 value3 value4] | inherit

其中每个填充值或者是长度、百分比值、自动或者从父元素继承。

40px 的填充，padding:40px;表示将在元素的所有边的内容周围添加额外的空间40px。

这里有一个视频来解释所有关于padding的属性。

现场示例→

视频实录:

padding属性的整体行为类似于margin属性，边距和填充属性之间的一个主要区别是，与边距不同，填充不能取负值。

元素上可能有默认填充，这些值可能会有所不同。如果您想将所有填充重置为零，然后添加您自己的值，您可以使用类似*{ padding: 0; }的通配符规则来清除所有填充。

与 CSS1 、 CSS2 、 CSS3 以及以下网页浏览器兼容，

IE 4+
Firefox 1+
Opera 3.5+
Safari 1+
Chrome 1+

那都是关于填充的。现在你一定在想，下一步怎么办？接下来，我们将学习如何在网页上定位元素。

CSS 框模型

原文：https://www.studytonight.com/cascading-style-sheet/css-box-model

使用任何 HTML 标记创建的每个元素都是一个框。CSS 框模型将内容的边距、边框、填充和实际空间显示为不同的空间，这些空间共同构成任何元素。

如果使用 Chrome 浏览器，请按Command + Option + I(适用于 Mac OSX)和F10(适用于 Windows 操作系统)。

Now click on the Select an Element... icon, present at the top-left corner.
单击上面的图标后，现在您可以选择并单击任何您想要检查的 HTML 元素。
For example: We chose our sidebar, and immediately you can see the HTML element appear corresponding to the element selected under the Elements tab and on the right side, the CSS styling applied to that element is displayed.

如果您在样式部分向下滚动，您将在那里看到所选元素的框模型表示。

尝试将鼠标悬停在样式部分的框模型表示上，您将看到相同的内容将在实际元素上高亮显示。

什么是框模型？

框模型只不过是元素盒子的不同部分的表示。这些组件/部分包括:

内容:这是保存元素内部文本和图像的主要区域。
填充:这是元素内部内容周围的空白。
边框:这是内容和填充周围的边框。
边距:这是边框外的空白。

Select HTML element in Chrome Developers Console

元素的实际高度和宽度

当我们使用 CSS 显式指定元素的高度和宽度时，那么这个高度和宽度就是元素的内容区域。而元素实际占用的空间包括内容区域、填充、边框和边距。

#myelement {
    height:200px;
    width:200px;
    padding:10px;
    margin:10px;
    border:5px solid red;
}

现场示例→

对于上面的样式，以id作为myelement的 HTML 元素必须具有定义的200px的宽度和高度。但是这个元素实际占用的高度和宽度会有所不同，因为填充、边框和边距也是必须考虑的。

实际宽度:宽度(200px) + 左&右边框(10px + 10px) + 左右边框(5px + 5px) + 左右边框(10px + 10px) = 250px

实际高度:高度(200px) + 顶部&底部填充(10px + 10px) + 上下边框(5px + 5px) + 上下边距(10px + 10px) = 250px

盒子阴影

就像text-shadow一样，属性box-shadow用来给整个元素框添加阴影。

语法:

box-shadow: <horizontal-displacement> <vertical-displacement> <blur> <color>;

blur和color值不是强制性的。

#box-shadow {
    box-shadow: 5px 5px 5px grey;
}

现场示例→

CSS 元素定位

原文：https://www.studytonight.com/cascading-style-sheet/positioning-of-elements

元素的定位极其重要。考虑化学元素周期表(啊！)所有的元素都按照适当的顺序排列，这使得我们更容易找到这些元素，这些元素按照它们的属性和原子序数分组在一起。

好了，化学已经够了。讨论周期表的重点是位置很重要。从可用性的角度来看，你如何定位你的网页元素是非常重要的，也就是说，用户使用你的网站感觉有多舒服。

CSS 可以帮助你在网站上定位东西。position 属性用于指定元素的位置。有四种类型的位置值:

static
relative
absolute
fixed

一旦设置了position属性，则可以使用顶部、底部、左侧和右侧属性将元素定位在网页上，但是除非设置了position值，否则它们不起作用。此外，对于上面提到的每一个position值，这些值的行为也会有所不同。

静止姿势

任何页面元素的默认值都是static。静态意味着元素会像正常情况下一样适合页面。显式指定 static 是非常罕见的，并且可以用来去掉任何继承的位置值。

静态定位元素不受顶部、底部、左侧和右侧属性的影响。

div{ 
    position: static;
    border: 15px solid #6699CC;
}

现场示例→

相对位置

这个位置意味着相对于自身。将元素的位置设置为相对，但不指定任何其他属性，如顶部、底部、左侧或右侧，对元素的位置没有特别的影响。但是指定一个底部属性为，bottom: 20px;将使元素相对于其正常位置向上移动。

将位置设置为relative会使元素出现在其区域中的任何其他静态元素之上。其他内容不会被调整以适合元素留下的任何间隙。

div{ 
    position: relative; 
    border: 4px solid #6699CC; 
}

现场示例→

绝对位置

该值允许您将元素精确地放置在您想要的位置。定位属性顶部、底部、左侧和右侧用于确定准确位置。这些元素相对于最后一个父元素放置。如果没有父元素，这些元素将被设置为相对于页面本身，即它在滚动时随页面一起移动。

div{ 
    position: absolute;
    border: 15px solid #6699CC;
}

现场示例→

定位

这种类型的定位很少，但肯定有它的用途。固定位置元素相对于视口或浏览器窗口本身定位，而不是相对于父元素或其兄弟元素定位。当窗口滚动时，视口不会改变，所以当页面滚动时，一个固定位置的元素会停留在原来的位置。

这个效果其实挺酷的，但是需要好好测试一下。

div{ 
    position: fixed;
    border: 15px solid #6699CC;
}

现场示例→

你可以在浏览器屏幕的左侧看到一个固定的橙色元素，带有一个类似脸书的按钮，它是使用position:fixed属性制作的。

你好！我被固定在这里。

重叠元素

当我们如此玩转定位时，就会出现元素相互重叠的情况。那么，在重叠的情况下，哪个元素会出现在另一个元素的顶部呢？

z-index定义元素的堆叠顺序。具有较大z-index的元素将始终位于具有较低z-index的元素之上。一个元素可以有正或负的z-index值。

h1{ 
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

现场示例→

注意:如果两个定位的元素重叠而没有指定z-index，则 HTML 代码中最后定位的元素将显示在顶部。

CSS 溢出——处理额外的内容

原文：https://www.studytonight.com/cascading-style-sheet/css-overflow

有时候，元素内部的内容越多，就会导致元素外部的内容溢出。CSS overflow属性允许我们通过隐藏或者在元素中添加滚动条来处理溢出的内容。

溢出属性可以有以下值:

visible →这是默认值。在这种情况下，不会对溢出的内容采取任何操作，它在元素外部也是可见的。
hidden →在这种情况下，元素外部溢出的内容变得不可见，即被隐藏。
scroll →在这种情况下，一个滚动条被添加到元素中，因此允许它保存其中的所有内容。
auto →如果内容较少，这就像visible一样，但是当内容开始溢出到外部时，这个属性就开始像scroll一样，并给元素添加一个滚动条。

默认情况下，所有的 HTML 标签都是自动调整的，也就是说，它们可以长到无限高，并且可以容纳所有的内容。但是overflow属性的需求出现了，在固定高度元素的情况下。

CSS Overflow Example

溢出可见`overflow:visible`

这是默认值，允许内容溢出固定高度的元素。

div {
    width: 300px;
    height: 50px;
    background-color: #cccccc;
    /* setting overflow visible */
    overflow: visible;
}

现场示例→

溢出隐藏`overflow:hidden`

overflow属性的这个值通过使元素不可见来隐藏元素外部流动的额外内容。

div {
    width: 300px;
    height: 50px;
    background-color: #cccccc;
    /* setting overflow hidden */
    overflow: hidden;
}

现场示例→

溢出滚动`overflow:scroll`

当内容开始溢出时，overflow属性的这个值将滚动条引入元素。因此没有隐藏任何内容，您可以使用滚动条轻松滚动并查看完整的内容。

div {
    width: 300px;
    height: 50px;
    background-color: #cccccc;
    /* setting overflow scroll */
    overflow: scroll;
}

现场示例→

溢出自动`overflow:auto`

overflow属性的这个值作为默认的，直到内容变少，随着内容开始溢出，这就像滚动。

div {
    width: 300px;
    height: 50px;
    background-color: #cccccc;
    /* setting overflow auto */
    overflow: auto;
}

现场示例→

关于溢出的更多信息...

我们甚至可以使用overflow-x和overflow-y属性来控制水平和垂直溢出的不同溢出属性。正如您在上一个实时示例中注意到的，在添加overflow:scroll时，引入了水平和垂直滚动条。

div {
    overflow-x: hidden; /* Hide horizontal scrollbar */
    overflow-y: scroll; /* Add vertical scrollbar */
}

现场示例→

CSS 中的左右浮动

原文：https://www.studytonight.com/cascading-style-sheet/css-float

float属性用于决定哪个元素浮动，哪个不浮动。

它的值可以是left或right。具有float样式属性的元素浮动在父元素的最末端left或最末端right侧。

当应用float样式属性时，元素不像块级元素那样采用完整的宽度，而是允许其同级元素包围它。

p {
    float: left | right;
}

现场示例→

`clear`属性

每当我们在任何元素上使用float属性时，当浮动元素向左或向右移动时，它下面的元素会试图填充浮动元素清空的空间。

这种行为会扭曲你的网页设计。为了避免浮动元素下面的元素包围它，使用了clear属性。

通过将clear:right样式推送到浮动元素下面的元素，我们通知该元素，不要靠近向右浮动的元素。类似地clear:left，保持离开浮动的左侧元素。clear:both对两者都有效。

现场示例→

使用`overflow:auto`黑客

如果我们有一个父元素，里面有一个子元素。并且子元素的高度大于父元素，即子元素比父元素高。现在，如果子元素是浮动的，它会离开父元素并在它上面呈现，将父元素减小到下一个最小大小，也可以为零，使父元素消失。

现场示例→

应用程序:网页布局示例

你知道吗，我们现在可以创建一个简单网页的基本布局。一个网页，它将有一个标题，一个由侧边栏和内容部分组成的正文部分，然后在正文下面有一个页脚。

Basic webpage layout with css

转到:设置基本网页结构

or just go with the flow and click on Next, you will anyways reach there soon.

CSS 边框半径

原文：https://www.studytonight.com/cascading-style-sheet/css-border-radius

从 CSS3 开始，我们可以使用border-radius属性轻松地为任何元素提供圆角。

p {
    background-color:orange;
    padding:10px;
    /* setting border radius */
    border-radius: 4px;
}

现场示例→

`border:radius`的语法

使用属性border-radius是非常直接的，你所要做的就是用px、em或%来指定曲率，以圆角。

语法:

border-radius: top-left top-right bottom-right bottom-left

在上面的代码中，左上角将是左上角的取整值，类似的右上角将是右上角的取整值，以此类推。

我们可以跳过任何值，或者为其指定值0，以不绕过那个特定的角。我们还可以为所有的角设置不同的曲率。

p {
    background-color:orange;
    padding:10px;
    /* setting border radius */
    border-radius: 4px 8px 12px 16px;
}

现场示例→

CSS 下拉列表

原文：https://www.studytonight.com/cascading-style-sheet/css-dropdown

下拉菜单在使我们的网站具有互动性方面起着非常重要的作用。下拉菜单是包含项目列表的菜单。每当用户点击或将光标悬停在下拉按钮上时，该项目列表就会出现，用户必须从下拉列表中选择一个值。

下拉菜单提供两种状态:活动和非活动。在非活动状态下，仅显示单个列表项，而在活动状态下，下拉菜单中显示的所有项都是可见的，用户必须从中进行选择。当用户选择该值时，控件返回到非活动状态，并且只显示选定的项目。

让我们借助例子更好地理解。

示例:创建 CSS 下拉列表

在给定的示例中，我们将创建一个下拉列表。因此，我们使用<button>标签创建了一个dropdown button，并将其放置在作为父元素的<div>元素中。

对于下拉项，我们在下拉按钮后添加了另一个<div>元素。第二个<div>元素充当下拉项目的父元素。我们将使用<a>标签<a>在这个<div> 中创建下拉项目。

下拉菜单的 HTML 代码如下所示:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Dropdown</title>
	</head>
<body>
<div class="dropdown">
	<button class="dropdown_btn">Dropdown</button>
	<div class="dropdown_item">
		<a href="#">Item 1</a>
		<a href="#">Item 2</a>
		<a href="#">Item 3</a>	
	</div>
</div>
</body>
</html>

我们必须应用 CSS 代码来提供样式，并为下拉按钮及其项目提供适当的定位。

这里position: relative; 属性是为.dropdown类指定的，将dropdown items 放在dropdown button.的正下方
默认情况下隐藏的下拉项通过应用.dropdown_item 类中的所有 CSS 属性来设置样式。
当用户将光标移动到下拉按钮上时，:hover属性用于显示下拉菜单。

//CSS 代码

.dropdown_btn {
  background-color:#f25e13;
  color: white;
  padding: 16px;
  height: 55px;
  width: 160px;
  font-size: 16px;
  border: none;
  cursor: pointer;

}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown_item {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  z-index: 1;
}

.dropdown_item a {
  color: black;
  padding: 12px 16px;
  text-align: center;
  text-decoration: none;
  display: block;
}

.dropdown_item a:hover {background-color:  #f25e13;
	color: white;
}

.dropdown:hover .dropdown_item {
  display: block;
}

.dropdown:hover .dropdown_btn {
  background-color:  #f25e13;
}

输出:

CSS 中右对齐的下拉菜单

默认情况下，下拉列表的位置是左上角。因此，无论何时我们将创建一个下拉按钮，我们将不会指定位置，那么默认情况下，它将自己定位到父元素的左上角。让我们通过一个例子来学习如何在父元素的右边创建一个下拉列表。

示例:在 CSS 中创建右对齐的下拉菜单

在这个例子中，我们创建了一个右对齐的下拉列表。创建右对齐下拉按钮的步骤与上一步相同。我们刚刚又增加了一个 CSS 属性float，值为right。此属性将下拉按钮浮动到网页的右侧。

// HTML 代码

<!DOCTYPE html>
<html>
<head>
	<title>CSS Dropdown</title>
</head>
<body>
<div class="dropdown" style="float:right;">
  <button class="dropdown_btn">Right</button>
  <div class="dropdown_item" style="left:0;">
  <a href="#">Item 1</a>
  <a href="#">Item 2</a>
  <a href="#">Item 3</a>
  </div>
</div>
</body>
</html>

//CSS 代码

.dropdown_btn {
		  background-color:#f25e13;
		  color: white;
		  padding: 16px;
		  height: 55px;
		  width: 160px;
		  font-size: 16px;
		  border: none;
		  cursor: pointer;

		}

		.dropdown {
		  position: relative;
		  display: inline-block;
		}

		.dropdown_item {
		  display: none;
		  position: absolute;
		  right: 0;
		  background-color: #f9f9f9;
		  min-width: 160px;
		  z-index: 1;
		}

		.dropdown_item a {
		  color: black;
		  padding: 12px 16px;
		  text-align: center;
		  text-decoration: none;
		  display: block;
		}

		.dropdown_item a:hover {background-color:  #f25e13;
			color: white;
		}

		.dropdown:hover .dropdown_item {
		  display: block;
		}

		.dropdown:hover .dropdown_btn {
		  background-color:  #f25e13;
		}

输出:

导航栏是一个总是放在网页顶部的导航标题。导航栏由导航菜单组成，用户只需点击导航栏的菜单项，就可以访问网站的不同页面。也有可能一些菜单有它们的子菜单。因此，我们可以使用下拉菜单创建子菜单，并轻松地向任何菜单项添加类似的子菜单。

下面是 navbar 下拉列表的例子。

HTML: 在给定的示例中，我们添加了<div> 元素以及类.navbar来创建导航栏菜单。

使用<button>元素创建下拉按钮。

同样，<div>元素用作创建下拉子菜单项的容器元素。这个<div>元素也用于为下拉子菜单提供正确的对齐和定位。

CSS: 我们使用 CSS background-color 属性为navbar、nav-items和dropdown buttons提供背景颜色。通过指定 CSS padding属性来增加导航条边框和导航项目之间的空间。

.dropdown_menu类包含实际的下拉菜单。此菜单是hidden 由default和可visible当用户moves将cursor 置于下拉按钮之上。这可以通过应用:hover属性来实现。我们还指定了box-shadow属性和z-index属性，前者用于使下拉菜单看起来像卡片，后者用于将下拉菜单放在其他元素前面。

结论

在这一课中，我们学习了下拉菜单，如何使用 CSS 创建它们，以及如何向它们添加子菜单。此外，我们还有如何创建一个右对齐的下拉菜单和带有下拉菜单的导航栏。

CSS 表单

原文：https://www.studytonight.com/cascading-style-sheet/css-forms

基本上，表格是任何网站非常重要的一部分。这是获取用户信息和处理请求的一种方式。表单为应用程序的几乎每一次使用提供了控件。借助表单控件和表单字段，我们可以请求少量和大量的信息，如用户标识和密码、计费信息、作业申请等。

CSS 中`Forms`的基本结构

要通过表单获取信息，首先，我们必须学会如何创建它。语法如下

要向网页添加表单，我们必须添加<form>元素。所有的input fields和form controls都应该包裹在<form>元素中。表单元素有很多可用的属性，但最常用或最重要的是action和method.

CSS 中`Forms`的语法

<form action="url" method="post">

/* form inputs*/

</form>

CSS 表单中的`Text fields` 和`Text areas`

文本区域和文本字段用于收集用户输入的文本。该输入信息可以是文本、密码、联系号码等。

CSS 中的`Text fields`

文本字段用于从用户处收集信息。这可以通过使用<input>元素及其 **type**属性来创建，该属性描述了我们希望用户输入的信息类型。我们也可以借助name属性设置输入元素的名称

CSS 中`Text fields`的语法

<input type="text" name="first_name">

CSS 中的`Text Area`

文本区域仅用于获取基于文本的信息。可以使用<textarea> 元素创建文本区域字段。这个元素不能接受type属性，因为它只接受一种类型的值，但是它接受name属性，这意味着用户可以命名text field。

CSS 中`Text Area` 的语法

<textarea name="comment">Add your text here.</textarea>

Note:``<input>元素和<textarea>不执行相同的任务。<input>字段用于获取电子邮件、电话号码等多种文本，但不超过一行。而<textarea>元素用于获取基于长文本的信息，如描述、段落等。

CSS 表单中的`Other Inputs`和`Menus`

除了基于文本的字段，HTML 还提供了其他输入字段和菜单，如多选和下拉菜单。下面给出了一些最常用的输入和菜单元素:

CSS 表单中的`Radio Buttons`

当我们想给用户多种选择，但只想要一个回答时，使用单选按钮。单选按钮是使用<input>元素创建的，并且type属性的值必须是radio ( type="radio")。对于一个组中的所有无线电元素，name属性的value必须相同。

示例:在 CSS 表单中创建`Radio Buttons`

<input type="radio" name="studytonight" value="HTML" checked>
<input type="radio" name="studytonight" value="CSS">
<input type="radio" name="studytonight" value="Bootstrap">
<input type="radio" name="studytonight" value="JavaScript">

CSS 表单中的`Check Boxes`

复选框还用于在多个选项中选择适当的选项。复选框类似于单选按钮，但它们之间略有不同，即复选框允许用户在所有给定选项中选择多个选项，但单选按钮允许用户在所有选项中仅选择一个选项。要创建复选框，我们必须将 type 属性的值设置为 checkbox.

示例:在 CSS 表单中创建`Check Boxes`

<input type="checkbox" name="studytonight" value="HTML" checked>
<input type="checkbox" name="studytonight" value="CSS">
<input type="checkbox" name="studytonight" value="Bootstrap">
<input type="checkbox" name="studytonight" value="JavaScript">

`Drop-down`CSS 表单中的列表

当我们想要向用户提供一个长长的选择列表时，使用下拉列表。drop-down list是使用<select>和<option>元素创建的。<select>元素包装所有菜单项，每个菜单项都是使用<option>元素创建的。

示例:在 CSS 表单中创建`Drop-down`列表

<select name="tutorial">
  	<option>Select</option>
  	<option value="HTML" checked>HTML</option>
  	<option value="CSS">CSS</option>
  	<option value="JavaScript">JavaScript</option>
  	<option value="Bootstrap">Bootstrap</option>
</select>

CSS 中的其他输入

CSS 表单中的`Hidden input`

隐藏输入允许我们将数据传递给服务器，而不用让用户知道。它用于跟踪代码、密钥或其他与用户无关但对表单处理有用的信息。

要创建隐藏输入，我们必须将type属性的值设置为hidden，并为名称和value属性设置适当的值。

CSS 表单中`Hidden input`的语法

<input type="hidden" name="tracking-code" value="xyz">

CSS 表单中的`File Input`

文件输入允许用户在表单中添加附件，如文档、pdf、图像等。

要创建文件输入，我们必须将<input>元素的type 属性的值设置为file。

CSS 表单中`File Input`的语法

<input type="file" name="file">

在 CSS 中组织`Form Elements`

表单元素的更好组织增加了用户的理解，也提供了指导，如实际请求什么以及如何提供信息。这可以在标签、字段集和图例的帮助下完成。

CSS 表单中的`Label`

标签用于为表单控件提供标题。标签使用<label>元素创建。

CSS 表单中`Label`的语法

<label for="username">Username</label>

<input type="text" name="username" id="username">

CSS 表单中的`Fieldset`

Fieldset 用于对表单控件和标签进行分组，并为表单元素提供更好的组织。fieldset 是包装所有表单元素的块级元素。<fieldset>元素包括边框轮廓，可以通过应用 CSS 属性进行修改。

CSS 表单中`Fieldset`的语法

<fieldset>
  <label for="username">Username
	<input type="text" name="username" id="username">
  </label>
  <label for="Password">password
	<input type="text" name="password" id="password">
  </label>
</fieldset>

CSS 表单中的`Legend`

图例用于提供表单的标题，从而快速了解表单类型。在打开<fieldset>元素后，使用<legend>元素创建图例。

CSS 表单中`Legend` 的语法

<fieldset>
		<legend>LogIn Form</legend>
		<label for="username">Username
			<input type="text" name="username">
		</label>
		<label for="password">Password
			<input type="text" name="password">
		</label>
	</fieldset>

示例:在 CSS 中创建`login form`

下面给出了带有 CSS 样式属性的基本登录表单:

<!DOCTYPE html>
<html>
<head>
	<title>CSS Forms</title>
	<style>
		input[type=text], select {
		  width: 100%;
		  padding: 12px 20px;
		  margin: 8px 0;
		  display: inline-block;
		  border: 1px solid #ccc;
		  border-radius: 4px;
		  box-sizing: border-box;
		}

		input[type=submit] {
		  width: 100%;
		  background-color: orange;
		  color: white;
		  padding: 14px 20px;
		  margin: 8px 0;
		  border: none;
		  border-radius: 4px;
		  cursor: pointer;
		}

		input[type=submit]:hover {
		  background-color: #f2db05;
		  color: black;
		}

		div {
		  border-radius: 5px;
		  background-color: #f2f2f2;
		  padding: 20px;
		}
	</style>
	</head>
<body>
<div>
  <form action="/action_page.php">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <label for="Tutorial">Tutorials</label>
    <select id="Tutorials" name="Tutorials">
      <option value="HTML">HTML</option>
      <option value="CSS">CSS</option>
      <option value="JavaScript">JavaScript</option>
    </select>

    <input type="submit" value="Submit">
  </form>
</div>

</body>
</html>

输出:

CSS 表单中的`Styling` `Input Fields`

CSS 允许我们通过应用一些 CSS 属性来自行设置输入字段的样式，例如给出背景颜色和调整输入字段的高度和宽度，提供填充和边距等。

示例:`Styling input field`使用 CSS

在本例中，我们将 CSS 属性height设置为50px，将width设置为100%。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Forms</title>
	<style> 
		input {
		  width: 100%;
		  height: 50px;
		}
	</style>
</head>
<body>
<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
</form>

</body>
</html>

输出:

正如我们在输出图像中所看到的，输入场的height延伸到50px，它占据了整个水平空间，因为我们已经指定了width到100%。

CSS 表单中的`Padded Inputs`

CSS 提供了padding属性来增加输入到输入字段中的文本和输入字段边框之间的间距。我们可以使用 CSS margin property在多个输入字段之间添加额外的空间。

示例:CSS 中的`Padded input`字段

在这个例子中，我们设置了 CSS margin 属性，在多个输入字段之间提供一些额外的空间，设置了padding 属性，在输入字段的边框和里面的内容之间提供空间。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Forms</title>
	<style> 
		input[type=text] {
		  width: 100%;
		  padding: 10px;
		  margin-top: 20px;
		  box-sizing: border-box;
		}
	</style>
</head>
<body>
<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname">
</form>

</body>
</html>

输出:

CSS 表单中的样式`Input Borders`

我们可以通过应用多个 CSS 属性以多种方式设置输入边框的样式。我们可以根据需要改变边框的颜色和宽度。它还允许我们只更改输入边框的一侧，或者可以将角变成圆角等等。

示例:将 CSS 属性应用于`input borders`

在这个例子中，我们通过使用 CSS 速记属性border向输入字段证明边框颜色、边框宽度和边框样式来设置边框样式，并使用 CS border-radius属性使边框的角变圆。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Forms</title>
	<style> 
		input[type=text] {
		  width: 100%;
		  padding: 12px;
		  margin-top: 12px;
		  box-sizing: border-box;
		  border: 4px solid #025ea1;
		  border-radius: 10px;
		}
	</style>
</head>
<body>
<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname">
</form>

</body>
</html>

输出:

正如我们在输出图像中看到的，边框是蓝色的，角是圆形的。

在 CSS 表单中创建`colored inputs`

我们可以通过向它们证明background-color来使输入变得丰富多彩，也可以通过应用color属性来改变文本的颜色。

示例:在 CSS 中创建`colored input` `fields`

在这个例子中，我们已经指定了 CSS 属性background-color到#7ab8e6.这个属性在输入字段中添加了背景颜色。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Forms</title>
	<style> 
		input[type=text] {
		  width: 100%;
		  padding: 12px 20px;
		  margin: 8px 0;
		  box-sizing: border-box;
		  border: none;
		  background-color: #7ab8e6;

		}
	</style>
</head>
<body>
<form>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname" value="William">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname" value="Shakespear">
</form>

</body>
</html>

输出:

如我们所见，输入字段的背景颜色变为蓝色。

CSS 表单中的`Focused Inputs`

我们可以通过向输入字段提供background color或提供border-color来使输入字段集中。因此，每当用户点击输入字段时，它的背景颜色或者它的边框颜色都会变成不同的颜色。

示例:使用 CSS 创建`Focused inputs`

在给定的示例中，我们通过应用两种不同的样式创建了聚焦输入字段。在第一个输入字段中，每当用户点击该字段时，该字段的背景颜色都会变成蓝色，而在第二个输入字段中，当用户点击该字段时，其边框颜色会变成黑色且更宽。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Forms</title>
	<style> 
		input[type=email] {
		  width: 100%;
		  padding: 12px 20px;
		  margin: 8px 0;
		  box-sizing: border-box;
		  border: 2px solid black;
		  outline: none;
		}

		input[type=email]:focus {
		  background-color: #7ab8e6;
		}
		input[type=text] {
		  width: 100%;
		  padding: 12px 20px;
		  margin: 8px 0;
		  box-sizing: border-box;
		  border: 3px solid #ccc;
		  -webkit-transition: 0.5s;
		  transition: 0.5s;
		  outline: none;
		}

		input[type=text]:focus {
		  border: 4px solid black;
		}
	</style>
</head>
<body>
<form>
  <label for="userid">User Id</label>
  <input type="email" id="userid" name="userid" value="Enter email">
  <label for="pass">Password</label>
  <input type="text" id="pass" name="pass" value="Enter password">
</form>

</body>
</html>

输出:

`Inserting image/icons`进入 CSS 表单的输入字段

我们可以通过在输入中放入图标/图像来使我们的输入更时尚或更有吸引力。我们可以通过应用 CSS background-image属性来添加图标/图像，并且可以借助background-position属性来设置定位。

示例:使用 CSS 在输入字段中输入`Inserting icon`

在这个例子中，我们已经创建了一个搜索栏，并通过使用background-image 属性在其中包含了一个搜索图标。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Forms</title>
	<style> 
		input[type=text] {
		  width: 100%;
		  box-sizing: border-box;
		  border: 2px solid #ccc;
		  border-radius: 4px;
		  font-size: 16px;
		  background-color: white;
		  background-image: url('search.png');
		  background-position: 10px 10px; 
		  background-repeat: no-repeat;
		  padding: 12px 20px 12px 40px;
		}
	</style>
</head>
<body>
<form>
  <input type="text" name="search" placeholder="Search..">
</form>
</body>
</html>

输出:

CSS 表单中的`Animated Inputs`

CSS 允许我们使用 CSS transition属性设置输入字段的动画。transition属性在输入字段中添加multiple 3D effects，这使得表单或网页更具交互性。

示例:使用 CSS 创建`animated input`字段

在给定的例子中，我们使用 CSS transition property.创建了一个搜索框animate及其width ，因此，当用户点击搜索框时，它将获得整个屏幕的宽度。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Forms</title>
	<style> 
		input[type=text] {
		  width: 130px;
		  box-sizing: border-box;
		  border: 2px solid #ccc;
		  border-radius: 4px;
		  font-size: 16px;
		  background-color: white;
		  background-repeat: no-repeat;
		  padding: 12px 20px 12px 40px;
		  transition: width 0.4s ease-in-out;
		}

		input[type=text]:focus {
		  width: 100%;
		}
	</style>
</head>
<body>
<p>Animated search input:</p>
<form>
  <input type="text" name="search" placeholder="Search..">
</form>
</body>
</html>

输出:

当我们在输入域内单击时，它将展开并占据整个可用宽度。

CSS 表单中的样式`Textareas`和`menus`

我们可以通过使用 CSS 属性来修改文本区域和菜单，比如我们可以调整文本区域的大小，为菜单项提供背景颜色等等。

示例:使用 CSS 设置`textareas`的样式

在这个例子中，我们使用<select>和<option>元素创建了一个下拉列表，使用<textarea>元素创建了一个文本区域，并设置了多个 CSS 属性为它们提供样式。这些属性是background-color、border-radius、border、padding等。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Forms</title>
	<style> 
		  select {
		  width: 40%;
		  padding: 16px 20px;
		  border: none;
		  border-radius: 4px;
		  background-color: #f1f1f1;
		  }
		  textarea {
		  width: 100%;
		  height: 150px;
		  margin-top: 30px;
		  padding: 12px 20px;
		  box-sizing: border-box;
		  border: 2px solid #ccc;
		  border-radius: 4px;
		  background-color: #f8f8f8;
		  font-size: 16px;
		  resize: none;
		}
	</style>
</head>
<body>
<form>
  <select id="tutorial" name="tutorial">
  <option value="HTML">HTML</option>
  <option value="CSS">CSS</option>
  <option value="JavaScript">JavaScript</option>
  </select>
</form>
<form>
  <textarea>Enter some text...</textarea>
</form>

</body>
</html>

输出:

CSS 表单中的`Styling Input Buttons`

通过应用 CSS 属性，我们可以通过改变输入按钮的高度、宽度、颜色等来设置输入按钮的样式。

示例:`Styling the` `input buttons`使用 CSS

在给定的示例中，我们使用<button>元素和type="button"属性创建了两个按钮。我们为每个按钮设置多个 CSS 属性，如background-color提供background、、、margin、padding等中的颜色。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Forms</title>
	<style> 
		input[type=button] {
		  background-color: #1994e6;
		  border: none;
		  color: white;
		  padding: 16px 32px;
		  text-decoration: none;
		  margin: 4px 2px;
		  cursor: pointer;
		}
		input[type=submit] {
		  width: 100%;
		 background-color: #0765a3;
		  border: none;
		  color: white;
		  padding: 16px 32px;
		  text-decoration: none;
		  margin: 4px 2px;
		  cursor: pointer;
		}
	</style>
</head>
<body>
<input type="button" value="Button">
<input type="submit" value="Submit">
</body>
</html>

输出:

CSS 中的`Responsive Form`

响应表单会根据屏幕大小自动调整输入字段的高度和宽度。这里给出了一个真实的例子，在这个例子的帮助下，你可以在不同的屏幕尺寸下检查表单的布局，比如当你调整屏幕尺寸时，表单的输入元素会根据屏幕尺寸调整它们。

结论

在本课中，我们学习了表单和多表单输入。之后，我们学习了如何使用 CSS 属性来设置这些输入的样式，例如设置输入边框的样式、为输入字段指定背景颜色、使用过渡提供动画等。

CSS 的应用

CSS 自定义属性和媒体查询

原文：https://www.studytonight.com/cascading-style-sheet/css-custom-properties-and-media-queries

CSS 自定义属性本质上是动态的，这意味着它允许我们定义和重新定义自定义属性的值，甚至在媒体查询中也是如此。我们可以在@media中执行自定义属性的所有任务，我们可以在 HTML 元素中执行这些任务。

CSS 媒体查询的语法

@media screen and (max-width: 900px) {
element {
/* CSS property*/ 
}
}

示例:指定 CSS 媒体查询

在这个例子中，我们首先在:root元素中声明了一个自定义属性--font-size，并在.container类中使用它。然后，我们创建了一个@media规则，指定当浏览器的宽度为 450px 和更多时，.container类的字体大小值变为 50px 。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Custom Property and Media Query</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
		/* Variable declarations */ 
		:root {
		  --blue:#97f7ec;
		  --white: #ffffff; 
		}

		.container {
		  --font-size: 25px;
		}

		/* Styles */ 
		body {
		  background-color: var(--blue);
		}

		h2 {
		  border-bottom: 2px solid var(--blue);
		}

		.container {
		  color: var(--blue);
		  background-color: var(--white);
		  padding: 15px;
		  font-size: var(--fontsize);
		}

		@media screen and (min-width: 450px) {
		  .container {
		    --font-size: 50px;
		  }
		}
	</style>
</head>
<body>
<div class="container">
  <p>When the browser's width is less than 450px, the font-size of this div is 25px. When it is 450px or wider, set the --font-size variable value to 50px. Resize the browser window to see the effect.</p>
</div>
</body>
</html>

输出:

活生生的例子

在给定的示例中，我们在: root伪类中创建了两个自定义属性--blue和--white，在.container 类中创建了一个自定义属性( - fontsize )。然后我们指定了媒体查询所以，当浏览器width是450 px****比那个多时font-size从 15px 变成35pxbackground-color从浅绿色变成浅蓝色。

结论

在本课中，我们学习了如何在 CSS 中实现媒体查询。我们还学习了如何使用媒体查询来更改特定屏幕尺寸下的属性值。

CSS 网格布局

原文：https://www.studytonight.com/cascading-style-sheet/css-grid-layout

CSS 网格模块是专门为解决布局问题而设计的，只要我们开始创建网站，我们都一直面临这个问题。CSS 网格布局模块允许我们创建一个具有行和列的复杂且响应迅速的网格布局。以前，我们使用 CSS flexbox、框模型、表格等来创建布局。将项目排列成列和行，但是这些模块缺少很多功能，例如垂直居中。与这些 CSS 模块相比，CSS 网格布局模块克服了与网格布局相关的所有问题，并提供了一种非常简单有效的方法来设计响应性网格布局。

要创建网格布局，我们必须首先创建一个带有 CSS 属性display: grid; 的网格容器元素，然后网格容器的直接子元素自动成为网格项。

注意:在使用 CSS 网格创建网格布局时，不需要使用浮动和定位。

CSS 网格容器

CSS 网格容器是一个包装器/父元素。为了使一个元素表现得像一个网格容器，我们必须首先设置该元素的 CSS 属性display: grid | inline-grid; 。网格容器中的所有元素以及直接子元素都可以自动成为网格项目。

示例:使用 CSS 创建 CSS 网格容器

在给定的示例中，我们通过应用 CSS 属性display: grid;使用 < div > 元素创建了一个网格容器。这个网格容器也由网格项组成。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Grid Layout</title>
	<style>
		.grid-container {
		display: grid;
		grid-template-columns: auto auto auto;
		padding: 10px;
		}
		.grid-item {
		background-color: #a6e9f5;
		border: 1px solid rgba(0, 0, 0, 0.8);
		padding: 20px;
		font-size: 30px;
		text-align: center;
		}
	</style>
</head>
<body>
	<div class="grid-container">
	  <div class="grid-item">1</div>
	  <div class="grid-item">2</div>
	  <div class="grid-item">3</div>  
	  <div class="grid-item">4</div>
	  <div class="grid-item">5</div>
	  <div class="grid-item">6</div>  
	  <div class="grid-item">7</div>
	  <div class="grid-item">8</div>
	  <div class="grid-item">9</div>  
	</div>
</body>
</html>

输出:

CSS 中的网格模板属性

网格模板属性是指定网格列、行和区域的简写属性。grid-template 属性是 grid-column-的简写属性。

=行、列和区域。

CSS 网格-模板-行属性

grid-template-rows 属性用于指定网格中每行的高度。这个属性的值是一个用空格分隔的列表，这意味着我们不需要为每一行指定这个属性。我们可以通过在每行之间提供空格来指定它们的值。

CSS 网格-模板-列属性

grid-template-columns 属性用于指定网格中的列数和每列的宽度。此属性的值是一个用空格分隔的列表，这意味着每列的值都是通过在它们之间提供空格来指定的。

CSS 网格-模板-行和网格-模板-列属性示例

在给定的示例中，我们使用grid-template-rows 属性设置了行的高度，使用grid-template-columns属性设置了列的宽度。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Grid Layout</title>
	<style>
		.grid-container {
		  display: grid;
		  grid-template-columns: auto auto auto;
		  grid-template-rows: 80px 200px;

		  padding: 10px;
		}

		.grid-container > div {
		  background-color: #a6e9f5;
		  text-align: center;
		  padding: 20px 0;
		  font-size: 30px;
		  border: 1px solid black;
		}
	</style>
</head>
<body>
	<div class="grid-container">
	  <div>1</div>
	  <div>2</div>
	  <div>3</div>  
	  <div>4</div>
	  <div>5</div>
	  <div>6</div>  
	</div>
</body>
</html>

输出:

CSS 中的对齐内容属性

对齐内容属性用于对齐网格内的项目。在使用调整内容属性时，我们应该记住一点，网格的宽度应该小于容器的宽度。

该属性有六个不同的值，如下所述:

CSS 对齐内容属性的语法

CSS 对齐内容属性的语法。

justify-content: space-evenly | space-around | space-between | center | start | end;

CSS 对齐内容属性示例

在给定的示例中，我们创建了两个网格布局，然后将 justify-content: space-evenly; 应用于第一个网格，将justify-content: space-around; 应用于第二个网格。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Grid Layout</title>
	<style>
		.grid-container {
		  display: grid;
		  justify-content: space-evenly;
		  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
		  grid-gap: 10px;
		  background-color: #bab3b3;
		  padding: 10px;
		}

		.grid-container > div {
		  background-color:#7eaeed;
		  text-align: center;
		  padding: 20px 0;
		  font-size: 30px;
		}
		.grid-container1 {
		  display: grid;
		  justify-content: space-around;
		  grid-template-columns: 50px 50px 50px; /*Make the grid smaller than the container*/
		  grid-gap: 10px;
		 background-color: #bab3b3;
		  padding: 10px;
		  margin-top: 30px
		}

		.grid-container1 > div {
		  background-color: #d67c7c;
		  text-align: center;
		  padding: 20px 0;
		  font-size: 30px;
		}
	</style>
</head>
<body>
	<h2>Justify-content: space-evenly</h2>
	<div class="grid-container">
	  <div>1</div>
	  <div>2</div>
	  <div>3</div>  
	  <div>4</div>
	  <div>5</div>
	  <div>6</div>  
	</div>
	<h2>justif-content: space-around;</h2>
	<div class="grid-container1">
	  <div>1</div>
	  <div>2</div>
	  <div>3</div>  
	  <div>4</div>
	  <div>5</div>
	  <div>6</div>  
	</div>
</body>
</html>

输出:

CSS 中的网格区域属性

网格区域属性是网格行开始、网格列开始、网格行结束和列行结束的简写属性。借助于这个属性，我们可以自行设置网格项目的编号。因此，网格项的出现顺序与代码中的顺序不同。

CSS 网格区域属性示例

在这个例子中，我们已经演示了如何自行排列网格项目。网格区域属性的第一个值设置为网格行开始，第二个值设置为网格列开始，第三个值设置为网格行结束，第四个值设置为网格列结束。

结论

在本课中，我们学习了如何使用预定义的 CSS 属性在 CSS 中创建网格。此外，我们还学习了多个网格属性，如下所示:

网格-模板-行
网格模板列
调整内容
网格区域

CSS 框大小

原文：https://www.studytonight.com/cascading-style-sheet/css-box-sizing

CSS 框大小是一种计算 HTML 元素总高度和总宽度的方法。通常，当我们为任何 HTML 元素指定高度和宽度属性以及填充和边距时。填充和边框的值被添加到元素的高度和宽度值中，元素占用的空间比实际大小多。

在 CSS2 中，元素的高度和宽度计算如下:

宽度+填充+边框=实际宽度

高度+填充+边框=实际高度

上面的公式规定，当我们设置一个 HTML 元素的padding和border时，它获得的空间比您为该元素设置的实际测量值多一点。这是因为元素的border和padding属性不包含在元素的指定height和width中。

CSS 中框大小属性的语法

HTML element/Selector {

/* CSS property */

box-sizing: content-box | border-box | initial | inherit;

}

CSS 中的框大小属性示例

在给定的示例中，我们已经演示了当我们指定元素的padding和border及其height和width属性时，元素的大小将大于实际大小。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Box Sizing</title>
	<style> 
		.box1 {
		  width: 300px;
		  height: 100px;
		  border: 1px solid blue;
		  margin-bottom: 30px;
		}

		.box2 {
		  width: 300px;
		  height: 100px;  
		  padding: 50px;
		  border: 1px solid red;
		}
	</style>
</head>
<body>
	<div class="box1">This div element has width:300px; and height:100px;.</div>
	<div class="box2">This div element has width:300px; and height;100px;.</div>
</body>
</html>

输出:

正如我们在输出图像中看到的，第二个盒子比第一个盒子大，即使两个盒子的尺寸相同。这是因为我们用值 50px 指定了 CSS 填充属性，所以第二个框从到所有边的距离比第一个框多 50px 。

在 CSS 中使用框大小创建框

CSS box-sizing 属性包括元素的指定height和width中的padding和border宽度。因此，每当用户将padding和border以及它们的height和width属性添加到任何元素时，元素的大小不会变得比实际的大。为此，我们必须指定 CSS 属性 **box-sizing: border-box;**。

示例:使用 CSS 框大小属性创建框

在这个例子中，我们使用 < div > 元素创建了两个盒子。然后，我们将border和 padding 以及height和width属性应用到这两个框中。在第二个框中，我们还应用了box-sizing: border-box; 属性。所以第一盒的尺寸 比实际尺寸大，第二盒。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Box Sizing</title>
	<style> 
		.box1 {
		  width: 300px;
		  height: 100px;
		  border: 1px solid blue;
		  padding: 40px;
		  margin-bottom: 30px;

		}

		.box2 {
		  width: 300px;
		  height: 100px;  
		  padding: 40px;
		  border: 1px solid blue;
  		  box-sizing: border-box;
		}
	</style>
</head>
<body>
	<div class="box1">This div element has width:300px; and height:100px;.</div>
	<div class="box2">This div element has width:300px; and height;100px;.</div>
</body>
</html>

输出:

CSS 中的 CSS 框大小属性值

CSS 提供了四种不同的框大小属性值，如下所示:

| 序列号 | 值 | 描述 |
| 1。 | 边框框 | 高度和宽度属性包括边框、填充和内容。 |
| 2。 | 内容框 | 这是默认值。高度和宽度属性只包括内容，不包括填充和边框。 |
| 3。 | 初始 | 它将 CSS 属性的值设置为默认值。 |
| 4。 | 继承 | 它继承其父元素的 CSS 属性的值。 |

实时示例:在 CSS 中应用不同的大小调整属性值

在下面的例子中，我们使用 < div > 元素创建了两个盒子。在第一个框中，我们应用了box-sizing: content-box;属性，在第二个框中，我们应用了 CSS box-sizing: border-box; 属性。

CSS 属性选择器

原文：https://www.studytonight.com/cascading-style-sheet/css-attribute-selector

当我们想要为具有相同属性或属性值的多个 HTML 元素设置样式时，会使用 CSS 属性选择器。根据相似的属性对多元素进行分组，这是一种非常方便的样式化方法。属性选择器选择具有特定属性的所有元素，并为所有元素设置样式。默认情况下，属性选择器区分大小写，可以写在方括号[]中。

属性选择器的类型

属性选择器有几种类型，如下所示:

CSS[属性]选择器
CSS[属性= "值"]选择器
CSS[属性~= "值"]
CSS[属性|= "值"]
CSS [attribute^="value"]
CSS[属性$= "值"]
CSS[属性*=“值”]

CSS[属性]选择器

[attribute]选择器选择包含相同属性的所有元素，并将 CSS 属性一次性应用于所有元素。例如。选择器【类】将选择和样式化所有具有相同类名的元素。

[属性]选择器的语法

HTML element[attribute]/[attribute]{

/* CSS properties*/ 

}

示例:应用[属性]选择器

在给定的示例中，我们使用 <p>元素创建了四个段落。在第一段和最后一段，我们指定了类属性及其值段，然后我们使用 CSS [attribute]选择器为具有****类属性的<p>元素指定了 CSS 属性。

<!DOCTYPE html> 
<html> 
	<head> 
		<title>Attributes selector</title> 
		<style> 
			[class] { 
				background-color: red;
				color: black
			} 

		</style> 
	</head> 
	<body> 
		<p class="para">This is the first paragraph.</p>
		<p>This is the second paragraph.</p>
		<p>This is the third paragraph.</p>
		<p class="para">This is the forth paragraph.</p>
	</body> 
</html>

输出:

正如我们在输出图像中看到的，第一段和第四段的背景颜色为红色，这是因为这两段由 class 属性组成。

CSS[属性= "值"]选择器

这个[attribute="value"]选择器允许我们选择和设置所有属性值与指定值相同的元素的样式属性。

[attribute="value"]选择器的语法

HTML element [attribute="value"] {
/* CSS property*/
}

示例:应用 CSS[属性= "值"]选择器

在给定的示例中，我们使用<p>元素创建了四个段落，并为每个<p>元素指定了类属性。现在我们在[attribute = "value"]选择器的帮助下分配了类属性的值。该选择器选择其值与选择器的类值相同的类，并且只为这些类设置 CSS 属性。

<!DOCTYPE html>
<html>
<head>
	<title>CSS attribute selector</title>
	<style> 
		p[class="para"] {
		  background-color: yellow;
		}
	</style>
</head>
<body>
	<p class="para">This is the first paragraph.</p>
	<p class="test">This is the second paragraph.</p>
	<p class="para">This is the second paragraph</p>
	<p class="test">This is the forth paragraph</p>
</body>
</html>

输出:

CSS[属性~= "值"]选择器

CSS [attribute~="value"] 选择器允许我们将 CSS 属性设置为其值包含指定单词的所有元素。

[属性~= "值"]选择器的语法

[attribute~="value"] {

/* CSS property */

property: value;

}

示例:应用[属性~= "值"]选择器

在本例中，我们为所有四个段落指定了类属性。然后，我们为第一和第三段到第段以及为第二和第四和段到测试指定了类属性的值。我们使用属性选择器[class="test"]用 2px 纯红的值指定了 CSS 属性border。现在，CSS 指定的 CSS 属性只被那些类属性值为 test 的段落接受。

<!DOCTYPE html>
<html>
<head>
	<title>CSS attribute selector</title>
	<style> 
		[class~="test"] {
		  border: 2px solid red;
		}
	</style>
</head>
<body>
	<p class="para">This is the first paragraph.</p>
	<p class="test">This is the second paragraph.</p>
	<p class="para">This is the second paragraph</p>
	<p class="test">This is the forth paragraph</p>
</body>
</html>

输出:

正如我们在输出中看到的，CSS 属性只应用于第二段和第四段，因为这两段都有要测试的类属性的值。

CSS[属性|= "值"]选择器

CSS [attribute|="value"]选择器用于选择以特定值开始的具有指定属性的元素。

CSS[属性|= "值"]选择器的语法

[attribute|="value"] {
 /*CSS property*/
}

CSS[属性|= "值"]选择器示例

在给定的例子中，我们已经使用<p>标签创建了四个段落，并且我们已经指定了类属性以及值。然后使用 CSS [class|="para"]我们指定 CSS 属性border，值为 2px 纯红。

<!DOCTYPE html>
<html>
<head>
	<title>CSS attribute selector</title>
	<style> 
		[ class|="para"] {
		  border: 2px solid red;
		}
	</style>
</head>
<body>
	<p class="para-1">This is the first paragraph.</p>
	<p class="para-2">This is the second paragraph.</p>
	<p class="para-3">This is the second paragraph</p>
	<p class="test">This is the forth paragraph</p>
</body>
</html>

输出:

正如我们在输出图像中看到的，只有前三个段落有边框。这是因为我们已经将属性选择器的值指定为 para，它是类属性的指定部分。因此，这个特定的单词与前三个段落相匹配，CSS 属性只能被它们接受。

CSS [attribute^="value"]选择器

CSS [attribute^="value"] 用于选择属性值以特定值开始的值。

CSS [attribute^="value"]选择器的语法

[attribute^="value"] {
/* CSS property*/
}

示例:应用 CSS [attribute^="value"]选择器

在这个例子中，我们使用[class^="test"]而不是任何元素选择器来指定 CSS 属性。因此，我们为具有要测试的类属性的值的元素指定了 CSS 属性border，值为 2px 实心黄色 ，为具有值 para 的类属性指定了border属性，值为 2px 实心红色。

<!DOCTYPE html>
<html>
<head>
	<title>CSS attribute selector</title>
	<style> 
		[class^="test"]  {
		  border: 2px solid yellow;
		}
		[class^="para"]  {
		  border: 2px solid red;
		}
	</style>
</head>
<body>
	<p class="test-1">This is the first paragraph.</p>
	<p class="para-1">This is the second paragraph.</p>
	<p class="test-2">This is the second paragraph</p>
	<p class="para-2">This is the forth paragraph</p>
</body>
</html>

输出:

正如我们在输出图像上看到的，第一段和第三段有黄色边框，第二段和第四段有红色边框。

CSS[属性$= "值"]选择器

CSS [attribute$="value"] 选择器选择属性值以特定值结束的元素。

语法 CSS[属性$= "值"]选择器

[attribute$="value"] {
   /* CSS properties*/
}

CSS[属性$= "值"]选择器示例

在给定的示例中，我们使用属性选择器[attribute $ =“value”]为<p>元素指定了 CSS border属性，其类属性值应该包含 1。

<!DOCTYPE html>
<html>
<head>
	<title>CSS attribute selector</title>
	<style> 
		[class$="1"]  {
		  border: 2px solid yellow;
		}

	</style>
</head>
<body>
	<p class="test-1">This is the first paragraph.</p>
	<p class="para-1">This is the second paragraph.</p>
	<p class="test-2">This is the second paragraph</p>
	<p class="para-2">This is the forth paragraph</p>
</body>
</html>

输出:

正如我们在输出图像上看到的，border 属性只应用于第一段和第二段，这是因为类属性的值在它们的名称中必须包含 1。

CSS[属性*= "值"]选择器

[attribute*="value"]选择器选择属性值包含指定值的元素。

语法 CSS[属性*= "值"]选择器

[attribute*="value"]{
  /*CSS property*/
}

示例:应用[属性*= "值"]选择器

在给定的示例中，我们使用[attribute*="value"]选择器为 CSS 属性border指定了值2px solid yellow。所以在这个属性选择器中，我们必须指定属性值的特定部分，而不是整个值。正如我们在给定代码中看到的，我们已经指定了类属性到te的值。这将选择其值由te前缀组成的类属性。

<!DOCTYPE html>
<html>
<head>
	<title>CSS attribute selector</title>
	<style> 
		[class*="te"]  {
		  border: 2px solid yellow;
		}

	</style>
</head>
<body>
	<p class="test-1">This is the first paragraph.</p>
	<p class="para-1">This is the second paragraph.</p>
	<p class="test-2">This is the second paragraph</p>
	<p class="para-2">This is the forth paragraph</p>
</body>
</html>

输出:

正如我们在输出中看到的，CSS 属性只应用于第一段和第三段，因为这两段的 class 属性值由前缀 te 组成。

结论

在本课中，我们学习了 CSS 属性，还学习了如何使用下面给出的属性选择器指定 CSS:

CSS[属性]选择器
CSS[属性= "值"]选择器
CSS[属性~= "值"]
CSS[属性|= "值"]
CSS [attribute^="value"]
CSS[属性$= "值"]
CSS[属性*=“值”]

CSS 多列

原文：https://www.studytonight.com/cascading-style-sheet/css-multicolumn

CSS 多列布局是支持多列布局的 CSS 模块。多列布局用于将内容布局到一组列框中，并指定内容在列与列之间的流动方式、列与列之间的边距、列与列之间的间隙大小以及列规则及其外观。

CSS `Multi-column`属性

如何在 CSS 中创建`Multi-columns`

为了创建 CSS 多列布局，我们必须指定column-count属性，该属性指定元素应该被划分的列数。

示例:使用 CSS 创建`multi-column`布局

在给定的例子中，我们使用 <p>标签创建了一个段落，然后使用column-count属性，我们将这个段落划分为 three columns，就像报纸专栏一样。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Multi Column Layout</title>
	<style>
	.multi_col{
	  column-count: 3;
	}
	</style>
</head>
<body>
	<p class="multi_col">
	The CSS multi-column layout is a CSS module that supports the multi-column layout. The multi-column layout is used to layout the content into a set of column boxes and also specifies that how content should flow from column to column, margin between columns, gap sizes between columns, and column rules along with their appearance.
	To create the CSS multi-column layout we have to specify the column-count property which specify the number of columns the element should be divided.
	</p>
</body>
</html>

输出:

正如我们在输出图像中看到的，该段落现在被分成三列，就像 newspaer 一样。

在 CSS 中指定`Gap between columns`

CSS 多列允许我们指定多列之间的间隙。我们可以使用column-gap属性设置元素多列之间的间隙大小。

示例:在 CSS 中指定`multiple columns`之间的`gap`

在给定的示例中，我们通过为段落指定值为60px 的column-gap属性，提供了在上一主题中创建的多个列之间的间隙。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Multi Column Layout</title>
	<style>
	.multi_col{
	  column-count: 3;
	  column-gap: 60px;
	}
	</style>
</head>
<body>
	<p class="multi_col">
	The CSS multi-column layout is a CSS module that supports the multi-column layout. The multi-column layout is used to layout the content into a set of column boxes and also specifies that how content should flow from column to column, margin between columns, gap sizes between columns, and column rules along with their appearance.
	To create the CSS multi-column layout we have to specify the column-count property which specify the number of columns the element should be divided.
	</p>
</body>
</html>

输出:

CSS〔t0〕

CSS 多列布局允许我们使用 column-rule 属性在元素的多列之间添加一条垂直线。该属性是column-rule-*的简写属性，用于使用单个属性设置规则的width、style和color 。

示例:为 CSS 中的多列指定`column-rule`属性

在本例中，我们通过用值5px solid black指定column-rule属性来添加列之间的垂直线。该值创建了一条垂直线，即thickness与 solid patter和color is black.为5px

<!DOCTYPE html>
<html>
<head>
	<title>CSS Multi Column Layout</title>
	<style>
	.multi_col{
	  column-count: 3;
	  column-gap: 60px;
	  column-rule: 5px solid black;
	}
	</style>
</head>
<body>
	<p class="multi_col">
	The CSS multi-column layout is a CSS module that supports the multi-column layout. The multi-column layout is used to layout the content into a set of column boxes and also specifies that how content should flow from column to column, margin between columns, gap sizes between columns, and column rules along with their appearance.
	To create the CSS multi-column layout we have to specify the column-count property which specify the number of columns the element should be divided.
	</p>
</body>
</html>

输出:

正如我们在输出图像中看到的，每一列之间都有一条黑色的水平线。

CSS〔t0〕

我们可以使用column-span属性跨越元素的列。跨越多列的元素称为跨越元素。

实时示例:使用`column-span`属性跨越列

在给定的示例中，我们使用 column-span 属性跨越了所有列，但是您也可以跨越特定数量的列。

结论

在本课中，我们学习了如何在布局中创建多列，就像报纸版面一样，以及内容如何从一列显示到另一列，列之间的间隙大小，列分割线(称为列规则)及其外观。

CSS 图像精灵

原文：https://www.studytonight.com/cascading-style-sheet/css-image-sprite

精灵是 2D(二维)图像，通过将多个小图像组合成一个大图像来创建。

CSS 精灵是一种通过将多个图像资源组合成一个文件来减少为它们创建的 HTTP 请求数量的方法。这将更快地加载网页，并减少用于加载多个图像的带宽。

主要是通过放入图片来设计导航栏。

示例:假设一个网页由图标、按钮等几个小图像组成。花费更多时间生成和加载多个服务器请求。通过使用图像精灵，我们可以减少 HTTP 请求的数量，这有助于减少负载，并提高性能。

实时示例:使用 CSS 创建图像精灵

在这个例子中，我们拍摄了一个由多个图标组成的图像。此图像中的每个图标都表现为一个图像。下面给出了它的实际实现及其说明:

为了使图标表现得像单独的图像，我们使用<i>元素。然后我们指定了.sprite 类，然后指定这个类里面的背景图像。然后，我们分别为每个图标指定了 CSS 属性。

CSS 精灵的优点

CSS 精灵的优点如下:
它减少了为图像创建的 HTTP 请求的数量。
它减少了网页的加载时间，提高了整体性能。
我们可以用一个图像代替几个图像。

结论

CSS 精灵是一个组合图形，帮助我们显示图像的特定部分。它将多个图像组合成一个图像。包含大量图片的网页需要花费大量时间来加载，并且会产生更多的服务器请求。因此，通过使用 CSS 图像精灵，我们将减少服务器请求的数量和加载时间。

CSS 特异性

原文：https://www.studytonight.com/cascading-style-sheet/css-specificity

CSS 特性是一种方法，当两组或多组 CSS 属性应用于一个特定元素时应用。这个方法帮助浏览器决定哪组 CSS 属性在所有属性中更相关。

有时会发生一些元素无法获取 CSS 属性的情况，这是因为 CSS 的特殊性。

CSS 中的特定层次结构

具体来说，在将 CSS 属性应用于元素时，浏览器遵循选择器的层次结构。通常，特异性层次结构分为四个部分，用于描述选择器的级别:

Inline styles -内联样式作为样式属性值直接附加到元素上。

IDs- 标识充当特定元素的唯一标识符。

Classes, attributes, and pseudo-classes -该类别由类、属性和伪元素组成，如.class、hover、
、:focus等。

Elements and pseudo-elements - 该类别由一个元素名称和伪元素组成，如div、p,、::before、::after等。

特异性规则

规则 1:同等具体:最新的规则最重要

如果在 CSS 文件中多次指定具有不同值的相同 CSS 属性，则稍后声明的属性被认为更接近元素，并且将被应用。

示例:同等特异性:最新规则计数

在给定的示例中，我们用不同的值为 <h1>元素指定了 CSS 属性background-color两次。首先，我们确定了background-color房产的价值为red，然后是pink。

<!DOCTYPE html>
<html>
<head>
  <title>CSS Specificity</title>
  <style>
    h1 { background-color: red; }
    h1 { background-color: pink; }
  </style>
</head>
<body>
  <h1>This is a heading.</h1>
</body>
</html>

输出:

正如我们在输出图像中所看到的，标题的背景颜色是粉红色的，这是我们稍后指定的。

规则 2:标识选择器比属性选择器具有更高的特异性值。

在给定的示例中，我们以三种不同的方式为同一元素设置了 CSS 属性。因此，根据这个规则，元素接受为 id 选择器声明的属性。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Specificity</title>
	<style>
		h1#head {background-color: pink;}
		#head {background-color: yellow;}
		h1[id=head] {background-color: blue;}
	</style>
</head>
<body>

<h1 id="head">This is a heading.</h1>

</body>
</html>

输出:

规则 3: 上下文选择器比单个元素选择器具有更高的特异性。

规则 4: 类选择器比元素选择器具有高得多的特异性值。

规则 5: 通用选择器和继承选择器的特异性值为 0。

身体和*由特异性值零(0)组成。

现场示例

在给定的示例中，我们以两种不同的方式为同一个元素设置了 CSS 属性，一种是元素名称，另一种是类名。因此根据这个规则，类选择器比元素选择器更优先，元素获得在类选择器中设置的属性。

结论:

在本课中，我们学习了 CSS 特性以及浏览器在将 CSS 属性应用于元素时遵循的选择器层次结构。我们还学习了下面给出的特异性规则:

同等特异性:最新的规则起作用。
标识选择器比属性选择器具有更高的特异性值。
上下文选择器比单个元素选择器具有更高的特异性。
类选择器比元素选择器具有更高的特性值。
通用选择器和继承选择器的特异性值为 0。

CSS 单位

原文：https://www.studytonight.com/cascading-style-sheet/css-units

CSS 单位用于表示我们为特定元素指定的 CSS 属性值的长度/大小。有几个 CSS 属性接受该值为length，如height、width、margin、padding等。

CSS 单位用于表示长度的性质，我们不能提供长度和它的单位之间的空白。还有一些 CSS 属性也接受负值。

Note :长度是一个数字，可以是任何 CSS 属性的值，后跟单位。

示例:指定 CSS 属性的长度值以及 CSS 单位

<!DOCTYPE html>
<html>
<head>
	<title>CSS Units</title>
	<style>
		h1 {
		  font-size: 50px;
		}

		p {
		  font-size: 30px;
		  line-height: 40px;
		}
	</style>
</head>
<body>
	<h1>Heading 1</h1>
	<h2>Heading 2</h2>
	<p>Hello! This is a aragraph.</p>
	<p>This is another paragraph.</p>
</body>
</html>

输出:

CSS 中的`Length Units`

基本上有两种长度单位，如下所示:

绝对长度
相对长度

CSS 中的`Absolute Lengths`

绝对长度是固定长度单位，使用这些长度表示的长度将精确显示为该大小。建议不要在屏幕上使用这些长度，因为屏幕尺寸变化很大。这些长度主要用于输出介质已知的情况，例如打印布局。

| 序列号 | 单位 | 描述 |
| 1. | cm (Centimeters) | 它以厘米表示长度。 |
| 2. | mm (millimeters) | 它以毫米为单位表示长度 |
| 3. | in (inches) | 它以英寸表示长度。(1 英寸= 96px = 2.54cm 厘米) |
| 4. | px (pixels) | 它以像素为单位表示长度。(1 像素= 1 英寸的 1/96) |
| 5. | pt (points) | 它以磅为单位表示长度。(1pt = 1 英寸的 1/72) |
| 6. | pc (picas) | 它用皮卡表示长度。(1pc = 12pt) |

示例:在 HTML 元素上应用 CSS `Absolute Length`

在给定的示例中，我们使用 <p> 元素创建了段落，并用值length (in numbers)为每个段落指定了 CSS 属性font-size。每个length值由不同的unit组成。

<!DOCTYPE html>  
<html>  
<head>
	<title>CSS Units</title>  
	<style>  
		body{  
		text-align: center;  
		}  
		p{  
		line-height: 0.1cm;    
		}  
	</style>  
</head>  
<body>  
	<h1> Absolute units </h1>  
	<p style="font-size: 1cm;">It has cm unit.</p>  
	<p style="font-size: 5mm;">It has mm unit</p>  
	<p style="font-size: .5in;">It has in unit.</p>  
	<p style="font-size: 50px;">It has px unit.</p>  
	<p style="font-size: 50pt;">It has pt unit.</p>  
	<p style="font-size: 5pc;">It has pc unit.</p>  
</body>  
</html>

输出:

CSS 中的`Relative Lengths`

相对长度用于响应站点，因为这些长度单位指定了相对于另一个长度属性的长度。当屏幕尺寸变化很大时，这些长度是最佳的，因为它在不同的渲染介质之间可以更好地缩放。这些单元可用作响应单元的默认值。

| 序列号 | 单位 | 描述 |
| 1. | em | 该单位用于指定相对于元素字体大小的度量。 |
| 2. | ex | 该单位用于指定相对于当前字体 x 高度的度量。 |
| 3. | ch | 该单位用于指定相对于“0”宽度的测量值。 |
| 4. | rem | 该单位用于指定相对于根元素字体大小的度量。 |
| 5. | vw | 该单位用于指定相对于视口 1%宽度的测量值。 |
| 6. | vh | 该单位用于指定相对于视口 1%高度的测量值。 |
| 7. | vmin | 该单位用于指定相对于视口较小尺寸 1%的测量值。 |
| 8. | vmax | 该单位用于指定相对于视口最大尺寸 1%的测量值。 |
| 9. | % | 该单位用于指定相对于父元素的度量。 |

示例:在 HTML 元素上应用 CSS `relative length`

在本例中，我们使用<p> 元素创建了多个段落，并为每个paragraph.创建了不同的relative unit

**## 结论

在本课中，我们学习了 CSS 中使用的不同类型的长度单位。基本上有两种长度，如下所示:

Absolute Lengths -这些是定长单位。

Relative Lengths -这些长度用于响应性网站。

CSS 维度

原文：https://www.studytonight.com/cascading-style-sheet/css-dimensions

CSS 尺寸用于设置 HTML 元素的高度和宽度。我们可以在 CSS 高度和宽度属性的帮助下设置 HTML 元素的高度和宽度。

CSS 为设置元素的维度提供了几个属性，如下所示:

CSS `Height`和`Width`值

CSS 高度和宽度属性由以下值组成:

示例:以%为单位指定 HTML 元素的`height`和`width`。

<!DOCTYPE html>
<html>
<head>
<style>
div {
  height: 200px;
  width: 100%;
  background-color:#89eff5;
  text-align: center;
  font-size: 30px;
}
</style>
</head>
<body>
<div>Hello!</div>
</body>
</html>

输出:

正如我们在输出图像中所看到的，该框只接受由 CSS 高度和宽度属性指定的高度和宽度。

CSS 中一个框的`Max-Width`

最大宽度属性用于设置任何元素的最大宽度。该属性的值可以在长度、厘米、像素、 % 等中指定。该属性用于克服当用户调整屏幕尺寸小于元素的高度和宽度时出现的问题，然后浏览器向网页添加侧滚动条。因此，当用户切换到较小的窗口时，此属性改进了对元素的处理。

实时示例:指定 HTML 元素的`max-width`

在这个例子中，我们已经设置了元素 500px 的max-width 。当我们将屏幕调整到较小时，不会显示侧滚动条。

结论

在本课中，我们学习了 CSS 高度和宽度属性的各种值。我们还学习了如何设置 HTML 元素的最大高度和最大宽度。

CSS 显示

原文：https://www.studytonight.com/cascading-style-sheet/css-display

“CSS 显示”属性是控制 HTML 元素布局的最常用属性。此属性指定 HTML 元素在网页上的显示方式。

网页将每个 HTML 元素(div，p，heading)视为一个矩形框，CSS display 属性有助于设置这些框的位置。

CSS 显示属性的语法

display: value;

显示值

CSS display 属性有几个值，下面给出了其中最常用的值:

在一条直线上的
没有人
街区
内联块

CSS 内联值

inline 显示值将元素设置为内嵌元素，这意味着元素并排放置或在一条线上(水平放置)。该属性只提供任何元素所需的空间。每当为 HTML 元素指定display: inline属性时，该元素不接受高度、宽度、上下边距属性。

CSS 内联值的语法

display: inline;

示例:指定 CSS 内联值

在给定的示例中，我们创建了 4 个 < div > 元素。一般来说，这 4 个 < div > 元素的内容是在网页上垂直显示，也接受给定的高度和宽度。但是，我们已经将 CSS display: inline属性应用到了 < div > 元素，因此这个 < div > 元素的内容是并排显示的，并且只根据需要取尽可能多的高度和宽度。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Display Property</title>
	<style>
		div {
			display: inline;
			height: 120px;
			width: 100px;
			color: white;
			background-color: black;
		}
	</style>
</head>
<body>
<div>Box 1</div>
<div>Box 2</div>
<div>Box 3</div>
<div>Box 4</div>
</body>
</html>

输出:

正如我们在输出中看到的，这些盒子并排放置，占据了它们所需的空间。

CSS 无值

CSS 显示none 值删除了 HTML 元素，并且在被删除的元素处也不显示任何空格。移除的元素存在于 HTML 结构中，但不会显示在网页上。

CSS 无值的语法

display: none;

示例:指定 CSS 无值

在给定的示例中，我们借助<【div】>元素创建了四个框。我们已经通过应用 CSS display: none 属性移除了第二个框。因此，当我们运行给定的代码时，第二个框不会显示在网页上，但它存在于 HTML 结构中。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Display Property</title>
	<style>
		.class1 {
			height: 120px;
			width: 100px;
			color: black;
			font-size: 18px;
			text-align: center;

		}
		.class2{
			display: none;
		}
	</style>
</head>
<body>
<div class="class1" style="background-color: #6ddef7;">Box 1</div>
<div class="class2">Box 2</div>
<div class="class1"  style="background-color: #8bf7e3;">Box 3</div>
<div class="class1"  style="background-color: #719deb;">Box 4</div>
</body>
</html>

输出

CSS 块值

CSS 显示block值占据了屏幕的整个宽度。这些值将每个元素的内容放在一个新行中，并允许它们作为一个单独的块。有一些 HTML 元素的默认显示值是 block 这些元素是< div >、< p >、< ul >等。

注意:用户可以根据需要设置块的高度和宽度。

CSS 块值的语法

display: block;

示例:指定 CSS 块值

在给定的示例中，我们使用 < span > 元素创建了 3 个框，并设置了 CSS 属性display: block;。 < span > 元素的默认显示值是内联的，我们在此基础上创建的框并排显示，仅占用所需的高度和宽度。但是我们已经设置了display: block 属性及其高度和宽度。因此，这使得每个块显示在单独的行中。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Display Property</title>
	<style>
		span {
			display: block;
			color: black;
			font-size: 18px;
			height: 150px;
			width: 200px;
			text-align: center;
		}

	</style>
</head>
<body>
<span style="background-color: #6ddef7;">Box 1</span>
<span style="background-color: #8bf7e3;">Box 2</span>
<span style="background-color: #719deb;">Box 3</span>

</body>
</html>

输出

CSS 内联块值

inline-block 提供了值内联和块的属性。每当我们想要并排(内嵌)放置内容，并且想要设置元素的高度、宽度和边距时，都会使用该值。

CSS 内联块值的语法

display: inline-block;

示例:指定 CSS 内联块值

在给定的示例中，我们使用 < div > 元素创建了三个框。这个的默认布局是垂直的，因为 < div > 元素的默认显示值是 block 。然后，我们指定了显示:内联块由于这个属性，布局由值内嵌和块的属性组成。该布局的块并排放置(直列)，并接受高度和宽度的值。

其他显示值

元素。元素。元素。

序列号	值	描述
1.	弹性	该值将元素显示为块级 flex 容器。
2.	直列伸缩	该值将元素显示为内联级别的 flex 容器。
3.	网格	该值将元素显示为块级网格容器。
4.	直列网格	该值将元素显示为内联级网格容器。
5.	直列表	该值将元素显示为内联级表。
6.	列表项	该值使元素表现为* Elements.
7.	磨合	该值在块或内嵌布局中显示为元素。
8.	表	该值允许元素的行为类似于表元素。
9.	表格标题	该值允许元素表现为
10.	表-列-组	该值允许元素表现为
11.	表格-表头-组	该值允许元素表现为
12.	表格-页脚-组	该值允许元素表现为
13.	初始	该值设置元素的默认属性，不接受其他 CSS 属性。
14.	继承	该值允许元素继承其父元素的属性。

结论

在本课中，我们学习了 CSS 显示属性及其工作原理。此外，我们还了解了 display 属性的值，以及每个值如何以不同的方式更改布局。数值如下:

在一条直线上的
没有人
街区
内联块

CSS 文本效果

原文：https://www.studytonight.com/cascading-style-sheet/css-text-effect

CSS 提供了多种效果属性，我们可以使用它们来设置文本的样式。这些 CSS 文本效果属性非常有用，也使文本变得时尚和更有吸引力。下面给出了一些 CSS 文本效果属性及其描述:

文本溢出
断字
自动换行
书写模式

CSS 文本-溢出

text-overflow属性处理溢出的文本的表示。通常，从容器溢出的文本在容器元素之外显示给用户，并与其旁边元素的内容重叠。但是在 CSS 文本溢出属性的帮助下，我们可以隐藏溢出的文本，并向用户发出隐藏文本的信号。

该属性有两个值:

剪辑- 是修剪溢出文本的默认值。
省略号- 该值显示省略号(...)的位置。

CSS 文本效果的语法

CSS 文本溢出属性的语法如下:

text-overflow: clip | ellipsis;

示例:应用文本效果属性

在给定的例子中，我们已经创建了两个段落，并将它们包装在一个矩形盒子中，盒子的宽度为200 px****。然后，我们为每个段落应用了属性text-overflow 的两个不同值。在第一段中，通过指定属性 text-overflow 到 clip 的值来修剪溢出的文本，在第二段中，我们已经指定了值省略号。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Text Effect</title>
	<style> 
		p.p1 {
		  white-space: nowrap; 
		  width: 200px; 
		  border: 1px solid #000000;
		  overflow: hidden;
		  text-overflow: clip;
		}

		p.p2 {
		  white-space: nowrap; 
		  width: 200px; 
		  border: 1px solid #000000;
		  overflow: hidden;
		  text-overflow: ellipsis;
		}
	</style>
</head>
<body>
	<p class="p1">This is a paragraph with CSS property text-overflow and value clip.</p>
	<p class="p2">This is a paragraph with CSS property text-overflow and value ellipsis.</p>
</body>
</html>

输出:

CSS 断字

CSS word-break属性决定了单词应该如何在线路末端断开的规则。断字的缺省值是正常的，当用户没有给它赋值时会自动使用。除此之外，它还有一些值可以在换行时增加效果，如下所示:

keep-all - 该值在一个完整的单词后换行。
break-all - 该值将在单词的任何字符处换行，而不使用任何特殊字符。

CSS 断字属性的语法

断字属性的语法如下:

word-break: normal |keep-all |  break-all | inherit ;

示例:应用 CSS 断字属性

在这个例子中，我们已经演示了保留所有和打破所有值是如何工作的。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Text Effect</title>
	<style> 
		p.p1 {
		  width: 140px; 
		  border: 1px solid #000000;
		  word-break: keep-all;
		}

		p.p2 {
		  width: 140px; 
		  border: 1px solid #000000;
		  word-break: break-all;
		}
	</style>
</head>
<body>
	<p class="p1">This is a pargraph with some text. This line will break at hyphens.</p>
	<p class="p2">This is a paragraph with some text. The lines will break at any character.</p>
</body>
</html>

输出:

CSS 编写模式

CSS writing-mode属性指定文本应该水平放置还是垂直放置。该属性有三个不同的值水平-tb 、垂直-rl、和垂直-lr 。****

****### CSS 编写模式属性的语法

书写模式属性的语法如下:

writing-mode: horizontal-tb | vertical-lr | vertical-rl | inherit ;

这些值的描述如下:

水平-tb: 是该属性的默认值。该值在水平方向上移动文本，并从左向右和从上到下读取。
垂直-rl: 显示垂直方向的文字，文字从右到左，从上到下读取。
vertical-lr: 类似于 vertical-rl，但文字是从左向右读的。

示例:应用 CSS 编写模式属性

在给定的示例中，我们使用 < p > 标记创建了三个段落。在第一段中，我们将writing-mode属性的值指定为横置-tb ，对于第二段，我们指定了writing-mode: vertical-lr，第三段指定了书写模式:竖置-rl。****

<!DOCTYPE html>
<html>
<head>
	<title>CSS Text Effect</title>
	<style> 
		p.p1 {
		  writing-mode: horizontal-tb; 
		}

		span.p2 {
		  writing-mode: vertical-lr; 
		}

		p.p2 {
		  writing-mode: vertical-rl; 
		  font-size: 20px;
		  font-weight: bold;
		}
	</style>
</head>
<body>
	<p class="p1">This is a paragraph with default writing-mode.</p>
	<p>This is a paragraph with <span class="p2">vertical-rl</span> writing-mode.</p>
	<p class="p2">This is a paragraph with writing-mode: vertical-rl.</p>
</body>
</html>

输出:

CSS 自动换行

CSS word-wrap属性允许我们将长单词包装到下一行中，而不会将打断为两个或多个单词。当字符串太长而无法放入容器框时，此属性可避免单词溢出。

这个属性有多个值，它们是普通值、断字值、初始值和继承值。

CSS 自动换行属性的语法

自动换行属性的语法如下:

word-wrap: normal| break-word | initial | inherit ;

示例:应用 CSS 自动换行属性

在给定的示例中，我们使用由一个很长的单词组成的 < p > 元素创建了一个段落。基本上，这个长单词不适合容器，并且溢出了，但是通过使用 CSS word-wrap属性，这个长单词在下一行换行。

结论

在本课中，我们学习了如何为网页中的文本添加文本效果。此外，我们还学习了一些用于给文本添加特殊效果的 CSS 属性。这些属性如下所示:

文本溢出
断字
自动换行
书写模式

CSS 网页字体

原文：https://www.studytonight.com/cascading-style-sheet/css-web-fonts

CSS 网页字体允许用户使用用户系统不支持或未安装的字体。

当你想使用一种非常罕见并且不是所有系统都支持的字体时，那么在你的网络服务器上包含该字体文件，当用户需要时它会自动下载。

注意:要在 CSS 中定义自己的字体，我们必须使用@font-face rule。

CSS 网页字体的语法

@font-face {

/* font details */
font-family: value;
src: url('');

}

CSS 中网页字体的类型

TrueType 字体(TTF)
OpenType 字体(OTF)
网络开放字体格式(WOFF)
网络开放字体格式(WOFF 2.0)
SVG 字体/形状
嵌入式开放式字体

TrueType 字体(TTF)

TrueType Fonts 是 20 世纪 80 年代由微软和苹果开发的字体标准。这是一种非常常见的字体格式，适用于苹果操作系统和微软视窗系统。

OpenType 字体(OTF)

OpenType 是一种可用于可缩放计算机字体的字体格式。这是在 TrueType 上开发的，是微软的注册商标。OpenType 字体现在是主要计算机平台上使用最多的网络字体。

网络开放字体格式(WOFF)

WOFF 字体格式主要用于网页。它是在 2009 年开发的，是 W3C 的推荐。WOFF 基本上是一个带有压缩和附加元数据的 OpenType 和 TrueType。这种字体格式实现了在带宽受限的网络上从服务器到客户端的字体分发。

网络开放字体格式(WOFF 2.0)

这个版本的 WOFF 提供了比 WOFF 1.0 更好的压缩。

SVG 字体/形状

SVG 字体允许用户在显示文本时使用 SVG 作为字形图标。SVG 1.1 规范定义了一个字体模块，允许在 SVG 文档中创建字体模块。用户可以将 CSS 应用于 SVG 文档，并且@font-face 规则可以应用于 SVG 文档中的文本。

嵌入式开放式字体

嵌入式字体是由微软设计的一种密集的 OpenType 字体。EOT 用作网页上的嵌入字体。

示例:在 CSS 中实现网页字体

<!DOCTYPE html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title> web font</title>
        <style type="text/css">
		@font-face {
    font-family: 'SansationLight';
    src: url('./SansationLight.eot');
    src: local('SansationLight'), url('./SansationLight.woff') format('woff'), url('./SansationLight.ttf') format('truetype');
}
.para {
    font-family: 'SansationLight' !important;
}
		h1 {
			font-family: 'SansationLight';
		}
		</style>
    </head>
    <body>
        <h1>Hello! This heading is styled using web fonts.</h1>
    	<p class="para">This is the font-style which is style by applying web fonts.</p>
    </body>
</html>

输出

字体描述符

结论

在本模块中，我们学习了 CSS 网页字体。此外，下面给出了网页字体的类型:

TrueType 字体(TTF)
OpenType 字体(OTF)
网络开放字体格式(WOFF)
网络开放字体格式(WOFF 2.0)
SVG 字体/形状
嵌入式开放式字体

CSS 内联块

原文：https://www.studytonight.com/cascading-style-sheet/css-inlineblock

在 CSS 中，显示属性是最常用的属性之一。它基本上控制块中任何元素的显示行为。display 属性有许多值，inline-block 就是其中之一。

`inline-block`CSS 中的值

该值具有内联值和块值的特征。此属性用于为之前使用浮动对齐的布局提供正确的对齐方式。

与display: inline-block的display: inline; 属性相比，不同之处在于inline-block 值允许用户设置元素的高度和宽度。该值还防止换行，这意味着一个元素可以放在块中其他元素的旁边。

示例:指定`inline-block` 值

在给定的示例 1 中，display: inline-block属性与height和width属性一起被指定给 < p > 元素。如果我们将height和width 属性与display: inline;一起指定，则给定的高度和宽度不适用于该元素。它将只采用默认的高度和宽度，这将在下一个实例中实现。

<!DOCTYPE html>
<html>
<head>
	<title>Inline Block</title>
	<style>
		p{
			display: inline-block;
			height: 120px;
			width: 100px;
			color: white;
			background-color: black;
		}
	</style>
</head>
<body>
<p>Box 1</p>
<p>Box 2</p>
<p>Box 3</p>
</body>
</html>

输出:

正如我们在输出图像中看到的那样，即使当 < p > 是块级元素时，这些框也是并排放置的。这是因为我们将 CSS 属性display指定为内联的值。

实时示例:在 CSS 中指定`display`值

在本例中，我们指定了display: inline属性而不是display: inline-block，那么我们使用 < p > 元素创建的块将不会采用给定的高度和宽度。只取默认的高度和宽度。

结论

在本课中，我们学习了 display 属性的内联块值是如何工作的，以及它与 display 属性的内联值有何不同。

CSS 动画

原文：https://www.studytonight.com/cascading-style-sheet/css-animation

什么是 CSS 动画？

CSS 动画允许我们用 HTML 元素做一些令人难以置信的事情，使我们的网页更加时尚和优雅。它允许 HTML 元素改变它们的形状，还可以在不使用 javascript 或 flash 的情况下增加它们的运动。要使用 CSS 动画属性制作 HTML 元素的动画，我们必须首先指定两个构建块，它们是:

Keyframes -关键帧指定元素在特定阶段的风格。
Animation properties -动画属性被分配给@关键帧，以使动画元素发挥作用。

`@keyframes`规则

CSS @keyframes规则用于通过指定关键帧的 CSS 动画属性以及动画序列来控制 CSS 动画序列中的中间步骤。这个过程对动画序列的中间步骤提供了比过渡更多的控制。

CSS 动画是做什么的？

动画通过在@关键帧规则中指定 CSS 动画属性，使元素在特定时间从一种样式逐渐变为新样式。要使动画工作，我们必须将动画绑定到一个元素。

CSS 动画属性

示例:在 CSS 中应用动画

在给定的示例中，我们已经使用了所有主要的CSS animation 属性来动画化该框。

<!DOCTYPE html>
<html>
<head>
  <style> 
  div {
    width: 100px;
    height: 100px;
    background-color: #69e5f5;
    position: relative;
    animation: myfirst 5s linear 2s infinite alternate;
  }

  @keyframes myfirst {
    0%   {background-color: #72e8f7; left:0px; top:0px;}
    25%  {background-color: #409df5; left:200px; top:0px;}
    50%  {background-color: #406ef7; left:200px; top:200px;}
    75%  {background-color: #5a45f7; left:0px; top:200px;}
    100% {background-color: #7a32ed; left:0px; top:0px;}
  }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

输出:

实例:在 CSS 中应用`animation-timing-property`

在给定的例子中，我们已经使用 CSS 动画-定时-属性指定了元素的速度曲线。动画定时属性由几个值组成，这些值是:

ease - 这是一个默认值。它指定动画先慢开始，然后快结束，然后慢结束。
linear - 它指定动画从开始到结束的速度相同。
ease-in - 它指定动画以缓慢的开始。
ease-out -指定慢速结束的动画。
ease-in-out -指定开始和结束较慢的元素。

在给定的实时示例中，我们使用了上面提到的动画定时属性的所有值:

结论

在本课中，我们学习了 CSS 动画，它允许元素在特定时间从一种样式更改为另一种新样式。我们还学习了一些最常用的动画属性，如下所示:

缓解
线性的
放松
放松
放松

CSS 伪类

原文：https://www.studytonight.com/cascading-style-sheet/css-pseudoclass

CSS 伪类是带有前置冒号的 CSS 特殊字符，用于向元素添加特殊效果。CSS 伪类与 CSS 选择器一起使用，为任何现有的 HTML 元素提供特殊效果。

语法

selector: pseudo-class {

property: value;

}

示例

:悬停用于在光标移动到任何元素或按钮上时改变其颜色。
:已访问伪类通过将链接的颜色从蓝色变为紫色来显示已访问的链接。

伪类

CSS 提供了几个伪类，其中最常用的类及其解释和实现如下:

悬停伪类

当我们想要给任何按钮或元素一些效果时，使用:hover 类。基本上，当我们将光标移到元素或按钮上时，这个类会改变它的颜色。

语法

HTML element/selector :hover {

/*CSS property*/

}

例

在给定的示例中，我们使用<>元素创建了一个块，并且还将:悬停属性设置为<>元素。块的背景颜色设置为红色，当我们将光标移动到块上时，颜色变为黄色。

<!DOCTYPE html>
<html>
<head>
	<title>CSS pseudo-class</title>
	<style>
		div {
		  background-color: #fc1c03;
		  color: white;
		  padding: 25px;
		  text-align: center;
		}

		div:hover {
		  background-color: #fcba03;
		}
	</style>
</head>
<body>

<div>Hello</div>

</body>
</html>

输出

CSS:活动伪类

:激活伪类的目的是当用户点击任何元素或链接时激活它。

语法

HTML element/selector :active {

/* CSS Property*/

}

例

在给定的示例中，我们使用 <按钮> 元素创建了一个按钮，并设置了按钮的高度、宽度和边距属性。然后，我们设置按钮:激活属性，当有人点击按钮时，该属性允许按钮改变颜色。

<!DOCTYPE html> 
<html> 
<head> 
    <title>CSS Pseudo-class</title> 
    <style> 
    button{ 
        background-color: red; 
        width: 300px; 
        height: 200px; 
        margin: auto; 
        font-size: 40px; 
        text-align: center; 
        border: none;
    } 

    button:active{ 
        background-color: yellow;
        border: none; 
    } 

    </style> 
</head> 

<body> 
     <button>Click Me!</button> 
</body> 
</html>

输出

CSS:访问了伪类

:已访问伪类用于突出显示用户已经访问过的链接。默认情况下，当用户单击链接时，此类将链接的颜色从蓝色变为紫色。

语法

HTML element/selector:visited {

/* CSS Property*/

}

例

在给定的示例中，通过使用 <和> 标签来创建链接。然后，CSS 属性 a:已访问被设置为每当我们点击链接时，链接的颜色都会改变。

其他 CSS 伪类

No in the south.

Pseudo-class

Description

|
| 1。 | :勾选 | 当我们想给元素的选中属性设置一些 CSS 属性时，会用到这个伪类。此类选择所有选中的属性元素，并将属性应用于所有这些元素。 |
| 2。 | :禁用 | 这个伪类禁用了所有的字段，并为它们提供了浅灰色的背景色。 |
| 3。 | :空 | 这个伪类用于为所有没有子元素的元素设置样式。 |
| 4。 | :启用 | 当我们想要启用所有字段时，使用这个伪类。 |
| 5。 | :第一个孩子 | 这个伪类用于为任何 HTML 元素的第一个子元素设置样式。 |
| 6。 | :聚焦 | 每当用户点击任何元素时，这个伪类都被用来聚焦它。 |
| 7。 | :范围内 | 这个伪类用于将 CSS 属性设置为在特定范围内有值的所有元素。 |
| 8。 | :无效 | 此伪类用于设置表单元素的样式属性，这些属性不会根据元素的设置进行验证。 |
| 9。 | :郎 | 这个伪类用于为所有具有阿郎属性的元素设置样式。 |
| 10。 | :最后一个孩子 | 这个伪类用于将 CSS 属性设置为 HTML 元素的所有最后一个子元素。 |
| 11 时。 | :链接 | 这个伪类用于设计网页中所有未访问链接的样式。用户不能为已经访问过的链接设置样式。 |
| 12 时。 | :不是 | 这个伪类为那些没有在:not selector 中指定的元素设置样式。 |
| 13。 | :第 n 个子(n) | 这个伪类用于为任何 HTML 元素的第 n 个子元素提供样式，而不考虑其类型和父元素。 |
| 14。 | :第 n 种类型(n) | 这个伪类用于将 CSS 属性设置为特定类型的 HTML 元素的第 n 个子元素，从最后第 n 个元素开始计数。n =数字、关键字或公式。 |
| 15。 | 唯一类型 | 当我们想要为元素设置 CSS 样式属性时，使用这个伪类，元素是它的类型或它的父元素的唯一子元素。 |
| 16。 | :第 n 个最后类型(n) | 这个伪类用于将 CSS 属性设置为特定类型的 HTML 元素的第 n 个子元素，从最后一个子元素开始计数。 |
| 17。 | :独生子女 | 这个伪类选择并设置所有元素的 CSS 属性，这些元素是其父元素的唯一子元素。 |
| 18。 | ：可选 | 这个伪类用于为没有属性的表单元素设置样式。 |
| 19。 | :超范围 | 这个伪类用于为具有最小或最大属性的元素设置 CSS 属性。 |
| 20。 | :只读 | 该伪类用于将 CSS 属性仅设置为那些具有只读属性的元素。 |
| 21。 | :读写 | 这个伪类用于将 CSS 属性设置为元素，该元素可读或可写，没有只读和禁用属性。 |
| 22。 | :必选 | 该伪类用于将 CSS 属性设置为由所需属性组成的

|
| 23。 | :根 | 这个伪类用于设置网页根元素的 CSS 属性，默认情况下是元素。 |
| 24。 | :目标 | 这个伪类用于设置所有活动目标链接的 CSS 属性。这基本上用于 |
| 25。 | :有效 | 该伪类用于表单元素，如带有电子邮件字段、文本区域、最小值或最大值等的输入元素。所以这个类基本上是用来在用户通过改变样式属性输入不正确的值时指示错误的。 |
| 26。 | :参观了 | 这个伪类用于选择被访问的链接。 |
| 27。 | :激活 | 这个伪类用于设置活动链接的样式。 |
| 28。 | :首创 | 这个伪类用于为元素的第一个子元素 CSS 元素设置样式。 |
| 29。 | :悬停 | 当我们想要在任何元素、按钮或链接上移动光标时改变颜色时，使用这个伪类。 |
| 30。 | :最后一种 | 这个伪类用于对其父类的特定类型的最后一个子类进行样式化。 |

CSS 分页

原文：https://www.studytonight.com/cascading-style-sheet/css-pagination

分页基本上用于显示一行中的项目。CSS 分页是一种在任何网站的网页上添加连续数字的方式，以便按顺序排列它们。当一个网站由许多页面组成时，就需要为每个页面添加分页，这种技术就被使用了。

分页使查找大量内容变得非常容易，并且可以将网页内容分成多个页面，这使用户能够轻松切换网页内容。

CSS 中分页的类型

CSS 中有几种分页类型，下面给出了其中的一些:

简单分页
活动和可悬停分页
带有圆形和可悬停按钮的分页
带边框分页
分页之间居中并留有空间

CSS 中的简单分页

简单分页是创建分页链接的一种非常基本的方式。要将分页添加到您的网站，您必须添加。分页类到 < ul > 元素来设置 CSS 样式属性。

示例:在 CSS 中创建分页

在本例中，我们演示了如何创建简单的分页。正如我们所知，我们已经使用 < ul > 元素创建了链接，这些元素将链接放置在新行中。要并排放置链接，我们必须在 ul 内指定 CSS 显示属性，值为内联。分页类。

<!DOCTYPE html>  
<html>  
<head>
  <title>Basic Pagination</title>  
  <style>  
    ul.pagination {  
        display: inline-block;  
        padding: 0;  
        margin: 0;  
    }  
    ul.pagination li {display: inline;}  
    ul.pagination li a {  
        color: black;  
        float: left;  
        padding: 8px 16px;  
        text-decoration: none;  
    }
    .pagination li a.active {
  background-color: #1183ed;
  color: white;
  border-radius: 5px;
}  
  </style>  
</head>  
<body>   
  <ul class="pagination">  
    <li><a href="#">1</a></li>  
    <li><a class="active" href="#">2</a></li>  
    <li><a href="#">3</a></li>  
    <li><a href="#">4</a></li>  
    <li><a href="#">5</a></li>  
    <li><a href="#">6</a></li>  
    <li><a href="#">7</a></li>  
  </ul>  
</body>  
</html>

输出:

正如我们在输出图像中看到的，数字表示分页，蓝色背景的数字表示活动页面

CSS 中的活动分页和可悬停分页

当我们想要突出显示当前分页链接，并且希望每当我们将光标移动到链接上时，每个链接的背景颜色都发生变化时，就会使用活动的和可悬停的分页。基本上，我们必须使用。激活类和:悬停选择器来创建这种效果。

在 CSS 中创建活动和可悬停分页的示例

在这个例子中，我们已经演示了如何使用:悬停属性，在激活和悬停效果的情况下创建分页按钮。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Active and Hoverable Pagination</title>
  <style>
    .pagination li {display: inline;}
    .pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    }
    ul.pagination li a.active {
    background-color: #1183ed;
    color: white;
    }
    ul.pagination li a:hover:not(.active) {background-color: #ddd;}
  </style>
</head>
<body>
<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li><a class="active" href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">»</a></li>
</ul>
</body>
</html>

输出:

在给定的输出中，当我们将光标移动到任意一个分页链接上时，链接的背景颜色从白色变为灰色，背景颜色蓝色表示活动页面。

CSS 中带有圆形和可悬停按钮的分页

这个效果非常类似于活动和可悬停效果，但是这个效果由一个附加效果组成，那就是圆角。为了给分页链接添加这个效果，我们必须添加 CSS 边框半径属性以及。激活类和:悬停选择器。

在 CSS 中创建圆形和可悬停分页按钮的示例

在本例中，我们演示了如何使用圆角和悬停效果创建分页按钮。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Active and Hoverable Pagination</title>
  <style>
    .pagination li {display: inline;}
    .pagination li a {
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 8px;
    }
    ul.pagination li a.active {
    background-color: #1183ed;
    color: white;
    }
    ul.pagination li a:hover:not(.active) {background-color: #ddd;}
  </style>
</head>
<body>
<ul class="pagination">
  <li><a href="#">«</a></li>
  <li><a href="#">1</a></li>
  <li><a class="active" href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
  <li><a href="#">7</a></li>
  <li><a href="#">»</a></li>
</ul>
</body>
</html>

输出:

正如我们在输出图像中看到的，按钮的角变圆了。

CSS 中带边框的分页效果

在前面的课程中，分页链接周围没有边框。在本课中，我们将创建带边框的分页效果。

带边框的分页效果由分页链接周围的边框组成。为了给分页链接添加边框，我们必须添加 CSS 边框属性。

在 CSS 中创建带边框分页的示例

在本例中，我们演示了如何在分页链接周围创建边框。所以我们在中添加了边框属性，其值为 1px 纯黑。分页类。

<!DOCTYPE html> 
<html> 
<head>
<title>Bordered Pagination Effect</title> 
  <style> 
    .pagination { 
      display: inline-block; 
    } 
    .pagination a { 
      font-size:20px; 
      color: black; 
      float: left; 
      padding: 8px 16px; 
      text-decoration: none; 
      border:1px solid black; 
    } 
    .pagination a.active { 
      background-color: #1183ed; 
    } 
    .pagination a:hover:not(.active) { 
      background-color:  #7e7f80; 
    } 
  </style> 
</head> 
<body> 
  <div class="pagination"> 
    <a href="#">«</a> 
    <a href="#">1</a> 
    <a href="#">2</a> 
    <a href="#">3</a> 
    <a href="#">4</a> 
    <a class="active" href="#">5</a> 
    <a href="#">6</a> 
    <a href="#">7</a> 
    <a href="#">8</a> 
    <a href="#">9</a> 
    <a href="#">10</a> 
    <a href="#">»</a> 
  </div> 
</body> 
</html>

输出:

正如我们在输出图像中看到的，分页链接周围有边框。

CSS 中分页之间的居中和空格

分页链接之间的居中空间位于网页的中心，每个链接之间都有空间。为了在分页链接之间创建居中和空间，我们必须添加文本对齐属性和值中心以将链接放置在中心，并且边距属性为提供链接之间的空间。

在 CSS 中分页之间创建居中和空格的示例

在本例中，我们使用文本对齐:居中，将分页按钮居中对齐；属性，为了提供分页链接之间的空间，我们指定了 CSS 边距，为了提供分页链接的边框与其内部内容之间的空间，我们指定了 CSS 填充属性。

结论

在本课中，我们学习了如何创建分页链接。具有背景颜色的链接表示活动页面。我们还学习了如何以多种方式设计这些链接的样式，例如提供边框、居中对齐分页链接等。

CSS 伪元素

原文：https://www.studytonight.com/cascading-style-sheet/css-pseudoelement

伪元素是一个关键字，允许您对 HTML 元素的任何特定部分进行样式化。在伪元素的帮助下，您可以为任何特定的行、单词甚至任何单词的第一个字母设置样式。伪元素从double-colon (::)开始。

CSS 中`Pseudo-element`的语法

selector:: pseudo-element {

/* CSS property*/
property: value;

}

注:伪元素与伪类的区别在于，pseudo-elements 用double-colon (::)表示，而在pseudo-classes用single-colon (:)表示。

伪元素

下面给出了一些伪元素:

*之后
*以前
*首字母
*一线
*甄选

我们将在本课稍后详细讨论它们。

CSS `::after`伪元素

::after伪元素用于在现有的content之后增加一些额外的content/image 。用户可以借助 CSS content属性添加内容，默认display 值为inline。

CSS 中`::after`伪元素的语法

HTML element/selector::after {
content: "value";

}

示例:在 CSS 中应用`::after`伪元素

在给定的示例中，我们使用<h1>和<h2> 元素创建了两个标题。在第一个标题中，我们通过使用::after伪元素和 CSS content属性，在句尾插入了"heading"一词。

<!DOCTYPE html>
<html>
<head>
	<title>CSS pseudo-element</title>
	<style>
		h1::after {
		  content: " heading.";
		  color: red;
		}
	</style>
</head>
<body>

	<h1>This is my first</h1>
	<h2>This is my second heading.</h2>

</body>
</html>

输出:

正如我们在输出中看到的，使用::after伪元素和 CSS content property将文本“标题”插入到句子的末尾。

CSS `::before`伪元素

::before伪元素用于在现有的content之前增加一些额外的content/image。用户可以借助 CSS content 属性添加内容，其默认显示值为内嵌。

CSS 中`::before`伪元素的语法

HTML element/selector::before {
/* CSS property */

property: value;

}

示例:在 CSS 中应用`::before`伪元素

在给定的示例中，我们借助<h1> 和 <h2> 元素创建了这两个标题。在第一个标题中，我们使用::before伪元素和 CSS content属性在第一个标题前插入了单词"Hello" 。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Pseudo-element</title>
	<style>
		h1::before {
		  content: "Hello! ";
		  color: red;
		}
	</style>
</head>
<body>

	<h1>This is my first heading.</h1>
	<h2>This is my second heading.</h2>

</body>
</html>

输出:

在给定的输出中，使用 CSS 属性content将文本"Hello" 插入到使用::before伪元素的句子之前。

CSS `::first-letter`伪元素

::first-letter伪元素用于给特定单词的第一个字母或句子中第一个单词的第一个字母设置样式。使用::first-letter伪元素设置的 CSS 属性仅在句子或单词前面没有其他内容(如图像、内嵌表格等)时适用。

CSS 中`::first-letter`伪元素的语法

HTML element/selector::first-letter {

/* CSS property */

property: value;

}

示例:在 CSS 中应用`::first-letter`伪元素

在给定的示例中，我们使用<h1> 和<h2>元素创建了两个标题。在first heading,中，我们只是通过使用::first-letter 伪元素和 CSS color 属性将第一个字母的颜色从black更改为red，而标题 2 保持不变。

<!DOCTYPE html>
<html>
<head>
	<title>CSS pseudo-eleemnt</title>
	<style>
		h1::first-letter {
		  color: #ff0000;
		}
	</style>
</head>
<body>

	<h1>Heading 1</h1>
	<h2>Heading 2</h2>

</body>
</html>

输出:

从图中我们可以看到heading 1的第一个字母的颜色使用::first-letter伪元素从black变成了red 。

CSS `::first-line`伪元素

::first-line伪元素允许我们为一个段落或一个single sentence设计风格。使用::first line伪元素时要时刻牢记的一点是，行的长度取决于字体大小、元素宽度、文档宽度等诸多因素。

CSS 中`::first-line`伪元素的语法

HTML element/selector::first-line {

/* CSS property*/

property: value;

}

示例:在 CSS 中应用`::first-line`伪元素

在给定的示例中，我们使用<p> 元素创建了一个paragraph。在本文中，我们使用了::first-line伪元素来使用 CSS 属性为第一行设置样式。

<!DOCTYPE html>
<html>
<head>
	<title>CSS pseudo-element</title>
	<style>
		p::first-line {
		  background-color:#edc75c;
		  font-size: 20px;
		}
	</style>
</head>
<body>

	<p>The ::first-line pseudo-element allows us to style the first line of a paragraph or a single sentence. One thing always keeps in mind while using::first line pseudo-element is that, the length of the line depends on many factors such as font size, the width of the element, and width of the document.</p>

</body>
</html>

输出:

如我们所见，第一行后面有一个背景色。这可以使用::first-line伪元素完成，背景颜色可以使用 CSS background -color属性指定。

CSS `::selection`伪元素

每当用户选择特定区域或在其上拖动鼠标时，::selection伪元素会改变网页内容的样式。

CSS 中`::selection`伪元素的语法

::selection {

/* CSS property*/

property: value;

}

CSS 中的`::selection`伪元素示例

在给定的示例中，我们使用<p>元素创建了两个paragraphs。因此，每当用户在任何单词或整个段落上选择或拖动鼠标时，在::selection伪类和一些指定的CSS properties的帮助下，所选区域的样式被改变。

结论

在本课中，我们学习了伪元素。此外，我们还学习了如何使用伪元素在现有内容的前后添加内容。伪元素还便于我们为特定部分设置任何单词、句子、段落等的样式。我们可以使用伪元素来设计单词的第一个字母、句子的第一个单词或段落的第一个句子。

CSS 对象适配

原文：https://www.studytonight.com/cascading-style-sheet/css-objectfit

CSS 对象适配属性指定元素应该如何调整大小以适合其容器元素。它专门用于图像、视频和其他嵌入式媒体格式。此属性的目的是通过拉伸或收缩父容器内部的元素来填充父容器，而不管其纵横比如何。

CSS 中的对象适配属性示例

在给定的示例中，我们已经自行设置了图像的height和width 。但是，我们可以看到image 正在被拉伸以适合250px * 350 px的容器，其原始长宽比被破坏。

<!DOCTYPE html>
<html>
<head>
  <title>CSS Object-fit</title>
  <style>
    img {
      width:250px;
      height:350px;

    }
  </style>
</head>
<body>
  <img src="studytonight.png" alt="studytonight" width="400" height="300">
</body>
</html>

输出:

CSS 对象拟合的值

对象拟合属性有五个不同的值。这些内容如下:

| 序列号 | 值 | 描述 |
| 1。 | 填充 | 填充是允许元素填充内容框的默认值。如果元素的实际比例与盒子的实际比例不匹配，那么元素将拉伸或收缩自身以适应盒子。 |
| 2。 | 包含 | 包含值的增加或减少元素的大小以填充容器，并保持其纵横比。 |
| 3。 | 盖 | cover 值用于在填充元素的整个内容框时保持元素的纵横比。如果元素的长宽比与其容器的长宽比不匹配，则元素将被剪裁以适合盒子。 |
| 4。 | 无 | 无值不会调整元素的大小以适应容器框。元素保持其原始大小，并忽略父元素的高度和宽度。 |
| 5。 | 缩小 | 元素的大小就像没有指定或指定了 contain 一样，这将导致最小的具体对象大小。 |

示例:在 CSS 中应用对象拟合的所有值

在给定的示例中，我们演示了object-fit 属性的所有可能值:

结论

在本文中，我们学习了如何使一个元素适合它的容器元素。这可以使用 object-fit 属性来完成，通过使用它的各种值，您可以根据自己的需要调整其父元素中的元素。

CSS 不透明度

原文：https://www.studytonight.com/cascading-style-sheet/css-opacity

CSS 不透明度属性决定了元素在从 0.0 到 1.0 之间的透明度。不透明度值越大，元素越清晰。当值为 1.0 也是默认值时，元素是完全透明或清晰的，在 0.5 时，元素显示相当模糊，在 0.0 时，元素是完全不透明的。

CSS 中不透明度属性的语法

HTML element{

opacity: value; 

}

示例:对 HTML 元素应用不透明度

在给定的示例中，我们使用

、

和

元素创建了三个标题。在标题 1 中，我们将不透明度值指定为 0.0 ，在标题 2 中，我们将不透明度值指定为 0.5 `,`，在标题 3 中，我们将值指定为1.0。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Opacity</title>
	<style> 
		h1 {
		  background-color: red;
		  opacity: 0.0;
		}
		h2{
			opacity: 0.5;
			background-color: red;

		}
		h3{
			opacity: 1.0;
			background-color: red;
		}
	</style>
</head>
<body>
	<h1>Heading 1</h1>
	<h2>Heading 2</h2>
	<h3>Heading 3</h3>
</body>
</html>

输出:

所以实现后我们能看到的是，值为 0.0 的标题 1 根本看不到。在不透明度值为 0.5** 的标题 2** 中，内容为相当模糊但可见，而在不透明度值为 1.0** 的标题 3** 中，内容为清晰可见。

****

CSS 中的透明和悬停效果

CSS 允许我们使用 CSS 不透明度和:hover效果。当我们为任何元素提供悬停效果时，当用户将鼠标悬停在它上面时，它的不透明度会发生变化。

示例:在 CSS 中应用透明和悬停效果

在这个例子中，有三个图像，每个图像都有一个不同的不透明度值以及悬停效果。当用户将光标移动到任何图像上时，它将再次变得透明。

<!DOCTYPE html>
<html>
<head>
<style>
img {
  opacity: 0.5;
}

img:hover {
  opacity: 1.0;
}
</style>
</head>
<body>

<h1>Image Transparency</h1>

<img src="studytonight.jpg" alt="Forest" width="250" height="150">
<img src="studytonight.jpg" alt="Mountains" width="250" height="150">
<img src="studytonight.jpg" alt="Italy" width="250" height="150">

</body>
</html>

输出:

正如我们所看到的，这三个图像都是模糊的，因为我们已经指定了 CSS 属性不透明度，其值为 0.5 。当我们将光标移动到任意图像上时，它将再次变为透明，因为我们已经在悬停效果后将不透明度的值指定为 1 。****

在 CSS 透明框中添加文本

在 CSS 的帮助下，我们还可以在图像上插入文本以及不透明度属性。让我们借助一个实例来理解它。

示例:使用 CSS 不透明度在透明框中添加文本

在这个例子中，我们用类.background创建了一个 < div > 元素，并指定了 CSS 属性background-image和border。然后我们用类创建了另一个 < div > 。 transbox 内第一 <分区>。在.transbox类中，我们添加了 < p > 元素来插入文本。

结论

在本课中，我们学习了如何使用 CSS 不透明度属性使图像模糊或不可见。我们还学习了如何通过应用不透明度属性使图像透明。借助这个属性，我们还可以使文本模糊。

CSS 柔性盒

原文：https://www.studytonight.com/cascading-style-sheet/css-flexbox

柔性盒布局模块或柔性盒提供了一种在不使用浮动或定位属性的情况下设计柔性响应布局的方法。借助 CSS flexbox，我们可以使用行和列水平或垂直对齐项目。

它还使元素在与不同屏幕尺寸和不同显示设备一起使用时自动调整其高度和宽度。

CSS 弹性框属性

| 序列号 | 属性 | 描述 |
| 1。 | 显示 | 显示属性定义了哪种类型的框用于 HTML 元素。 |
| 2。 | 弯曲方向 | flex-direction 属性定义了 flex 容器中 flex 项的方向。 |
| 3。 | 证明内容 | 当项目没有获得主轴上的所有可用空间时，调整内容属性水平对齐伸缩项目。 |
| 4。 | 对齐-项目 | align-items 属性在项目未获得横轴上所有可用空间时垂直对齐伸缩项目。 |
| 5。 | 软包 | flex-wrap 属性指定 flex-item 是否应该换行。 |
| 6。 | 对齐-内容 | align-content 属性用于修改 flex-wrap 属性的行为。 |
| 7。 | 柔性流 | flex-flow 属性是 flex 方向和 flex-wrap 的简写属性。 |
| 8。 | 订单 | order 属性指定弹性项的顺序。 |
| 9。 | 自动校准 | align-self 属性用于重写父元素的 align-items 属性。 |
| 10。 | 弹性 | flex 属性是 flex-增长、flex-收缩和 flex-based 属性的简写属性。 |

CSS 中的弹性容器和弹性项

flex 容器用于指定父元素(容器)的属性。为了使父容器灵活，我们必须用值flex指定 CSS 属性display。

flex 项用于指定作为 flex 容器的直接子元素的子元素的属性。灵活容器中可以有任意数量的灵活项目。

示例:使用 CSS 创建弹性项和弹性容器

在给定的示例中，我们使用three flex items.创建了一个flex element，我们为parent element指定了类.flex-container，为父级 div指定了类.flex-item。然后我们指定了 CSS 属性display到flex。这使得flex container flexible element和所有的direct children of the flex container变成了flexible items。

<!DOCTYPE html>  
<html>  
<head>
  <title>CSS Flexbox</title>
  <style>  
    .flex-container {  
        display: flex;  
        background-color:#eb8b0e;  
    }  
    .flex-item {  
        background-color: #e3df0b;  
        width: 100px;  
        height: 100px;  
        margin: 20px;  
    }  
  </style>  
</head>  
<body>  
  <div class="flex-container">  
    <div class="flex-item">flex item 1</div>  
    <div class="flex-item">flex item 2</div>  
    <div class="flex-item">flex item 3</div>  
  </div>  
</body>  
</html>

输出:

正如我们在输出中看到的，橙色部分是父元素或 flex 容器，其中的三个小框是 flex 项目。

CSS 中的响应灵活框

我们可以通过添加媒体查询来使我们的 flex 布局具有响应性。媒体查询用于为不同的屏幕尺寸和设备设置不同的布局。

假设，您想要创建一个多列布局。这种多列布局在大屏幕设备上清晰可见，但它会给小屏幕设备带来可见性问题。为了克服这个问题，我们需要为小屏幕尺寸创建一维布局。为此，我们必须使用媒体查询在特定断点处将 flex 方向从行更改为列。

示例:使用 CSS 创建响应性弹性框

在本例中，我们演示了如何通过应用媒体查询来使 flexbox 具有响应能力。

结论

在本课中，我们学习了如何使用 CSS flex 属性创建一个灵活的响应容器。我们还学习了如何在 flex 容器中添加 flex 项，以及如何通过应用 CSS 媒体查询来使它们具有响应性。

CSS 工具提示

原文：https://www.studytonight.com/cascading-style-sheet/css-tooltip

当您将光标移动到某个元素上时，CSS 工具提示用于显示该元素的附加信息。基本上，它是一个小的弹出窗口，只有当您将鼠标移动到特定的链接或元素上时才会出现。

示例:如何在 CSS 中创建工具提示

在本例中，我们演示了如何创建工具提示。因此我们为tooltip指定了.tooltip类，并在其中设置了与工具提示元素相关的所有样式属性，然后我们为tooltip pop-up window 指定了另一个类.tooltiptext，并在其中设置了与弹出窗口相关的所有样式属性，如下例所示:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Tooltip</title>
  <style>
    .tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;
        font-size: 30px
      }

    .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute;
      z-index: 1;
    } 

    .tooltip:hover .tooltiptext {
      visibility: visible;
    }
  </style>
</head>

<body style="text-align:center;">
  <div class="tooltip">Hover over me
    <span class="tooltiptext">Tooltip text</span>
  </div>
</body>
</html>

输出

正如我们在输出图像中看到的那样，black rectangular box内的Tooltip text是当我们move the cursor越过文本"Hover over me"时出现的tooltip window

CSS 中的工具提示箭头

工具提示箭头由工具提示弹出窗口组成，该窗口带有一个应该从工具提示特定一侧出现的箭头。您可以使用“顶部”、“底部”、“左侧”和“右侧”属性自行设置工具提示和箭头的位置。

创建工具提示箭头的示例

在给定的示例中，我们演示了工具提示箭头，它位于元素的底部，顶部有一个箭头。

<!DOCTYPE html>
<html>
<title>CSS Tooltip</title>
<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  font-size: 30px;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">
<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

</body>
</html>

输出:

正如我们在输出中看到的， tooltip window 由它顶部的一个小三角形组成，这个小三角形是一个arrow ，它指向文本“Hover over me”。当我们将光标移到文本“悬停在我身上”上时，工具提示窗口出现。

在 CSS 中指定工具提示位置

CSS 允许我们根据自己的需要和网页上的可用空间来定位工具提示弹出窗口。在指定工具提示窗口的位置时，我们应该记住，当工具提示窗口显示在网页上时，网页的任何其他信息都不会被隐藏。我们可以将工具提示窗口定位到网页上元素的顶部、底部、左侧和右侧。

指定工具提示位置的示例

在本例中，我们演示了如何设置工具提示弹出窗口的位置。我们已经将工具提示窗口的position设置为元素的right ，但是我们也可以将位置设置在lefttop和bottom of the element.****

<!DOCTYPE html>
<html>
<head>
  <title>CSS Tooltip</title>
  <style>
    .tooltip {
      position: relative;
      display: inline-block;
      border-bottom: 1px dotted black;
      font-size: 30px;
    }

    .tooltip .tooltiptext {
      visibility: hidden;
      width: 120px;
      background-color: black;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;

      /* Position the tooltip */
      position: absolute;
      z-index: 1;
      top: -5px;
      right: 105%;
    }

    .tooltip:hover .tooltiptext {
      visibility: visible;
    }
  </style>
</head>
<body style="text-align:center;">
  <div class="tooltip">Hover over me
    <span class="tooltiptext">Tooltip text</span>
  </div>
</body>
</html>

输出:

我们可以在输出中看到，tooltip window在文本“Hover over me”的left上。

CSS 中的动画工具提示

动画工具提示是那些有一些动画效果的工具提示。上面创建的工具提示背景简单，但动画工具提示弹出窗口由一些动画效果组成，如fade-in effect、fade-out effect等。

动画工具提示的实时示例

这个实例演示了当你move光标over文本时，工具提示会firstfade-in然后需要 1 秒钟才能回到actual state.

结论

在本课中，我们学习了如何添加一个弹出窗口来提供额外的文本和信息以及 HTML 元素。我们还学习了如何使用 CSS 属性设置它们的样式，可以将它们的位置设置到元素的顶部、左侧、底部或右侧，并为工具提示窗口提供动画效果。

CSS 画廊

原文：https://www.studytonight.com/cascading-style-sheet/css-image-gallery

术语画廊是指存储和显示在网页内特定位置的图片/图像的集合。CSS 画廊允许我们通过应用一些 CSS 属性来创建一个响应性的图像网格。要使用 CSS 创建响应画廊，步骤如下:

创建基本结构

众所周知，我们可以连续创建多个分区，但不能超过 12 个。在本文中，我们将展示如何使用 HTML 创建画廊及其描述。

在给定的代码中，我们在父级< div >元素中添加了<img>元素，以在网页上添加图像。然后我们在<img>元素之后添加了另一个<div> 元素来添加图像的描述。

<div>
	<img src="image_path" alt="name">
<!--- for description--->
	<div>Add description here.</div>
</div>

使用 CSS 设置画廊的样式

现在，我们将指定 CSS 属性来提供正确的对齐，使画廊响应，并提供样式。我们为画廊指定的 CSS 属性如下所示:

<style>
		div.grid {
  margin: 8px;
  border: 2px solid #ccc;
  float: left;
  width: 180px;
}
div.grid img {
  width: 100%;
  height: auto;
}

div.content {
  padding: 15px;
  text-align: center;
}
	</style>

示例:使用 CSS 创建画廊

这是我们在上面讨论过的图像画廊的正确的实际实现。

<!DOCTYPE html>
<html>
<head>
	<title>Image Gallery</title>
	<style>
		div.grid {
  margin: 8px;
  border: 2px solid #ccc;
  float: left;
  width: 180px;
}
div.grid img {
  width: 100%;

}

div.content {
  padding: 15px;
  text-align: center;
}
	</style>
</head>
<body>
<div class="grid">
	<img src="img1.png" alt="image1" height="160">
	<div class="content">You can add description here.</div>
</div>
<div class="grid">
	<img src="img2.jpg" alt="image2" height="160">
	<div class="content">You can add description here.</div>
</div>
<div class="grid">
	<img src="img3.png" alt="image3" height="160">
	<div class="content">You can add description here.</div>
</div>
<div class="grid">
	<img src="img4.jpg" alt="image4" height="160">
	<div class="content">You can add description here.</div>
</div>
</body>
</html>

输出:

给定代码的输出如下所示:

CSS 中的响应画廊

在上一课中，我们已经使用 CSS 创建了一个画廊。在本课中，我们将创建一个响应画廊。

众所周知，网站的响应性在用户交互中起着巨大的作用。为了使这个画廊具有响应性，我们必须添加媒体查询。媒体查询会自动调整不同屏幕尺寸的图像布局。

实时示例:使用 CSS 创建响应画廊

在这个例子中，我们指定了 CSS 媒体查询，它允许布局根据屏幕大小自行调整。

结论

在本课中，我们学习了如何使用 CSS 创建画廊。我们还可以使用 CSS 媒体查询让他们做出响应。

CSS 将链接样式化为漂亮的按钮

原文：https://www.studytonight.com/cascading-style-sheet/styling-link-into-nice-button

链接用于链接相关网页。在 HTML 中<a href="URL"...&gt </a>``<a>标签用于创建超链接。我们已经学习了如何根据链接的状态来设置链接的样式，即悬停、链接、访问和活动。

在本教程中，我们将学习如何使链接看起来像矩形按钮，就像我们在表单中看到的提交按钮，本教程末尾的下一个和上一个按钮，实时示例超链接等。

如果我们有两个样式类，具有不同的样式规则，我们可以将它们一起添加到一个标签中。这里是clickme班，

CSS:

.clickme {
    background-color: #EEEEEE;
    padding: 8px 20px;
    text-decoration:none;
    font-weight:bold;
    border-radius:5px;
    cursor:pointer;
}

输出:

Basic Button Style with CSS

clickme是一个样式类，它为链接提供一些基本的样式，比如填充、删除下划线等，使它看起来像一个简单的普通旧按钮。但是是的，将链接转换为按钮的主要任务已经完成。

现场示例→

现在我们将在clickme基类的基础上增加更多的样式类，来制作彩色的按钮。

红色按钮→ .danger类

.danger {
    background-color:#FF0040;
    color: #FFFFFF;
}

.danger:hover {
    background-color:#EB003B;
    color: #FFFFFF;
}

HTML:

<div>
    <a href="http://www.studytonight.com/tests" **class**="*clickme danger*">Tests</a>
</div&g

输出:

Basic Button Style with CSS

去 Web 游乐场现场看看合并后的代码，甚至可以尝试修改一些 css 属性。

现场示例→

大结局！完整的 CSS 时尚按钮集

在这个按钮集中，我们添加了 5 种 uinque 颜色，使用了 5 种不同的 css 样式类，即danger、success、warning、info、default。

你可以根据你的网站主题改变颜色，或者你甚至可以添加更多的颜色类别。现在去网络游乐场看看完整的代码在行动。

输出:

Basic Button Style with CSS

现场示例→

我们希望你喜欢这个练习。在我们的现场网络操场上练习(链接)并通过在我们的脸书页面上拍摄输出的快照与我们分享您的风格项目。耶！

CSS 创建导航栏

原文：https://www.studytonight.com/cascading-style-sheet/css-navigation-bar-style

每个网站都需要一个导航条来帮助访问者浏览网站。这通常通过放置顶部水平导航栏或侧面垂直导航栏来实现。

导航栏是使用 HTML 列表结合 CSS 创建的，使其看起来更像一个带有多个选项的菜单。

示例:

Basic Navigation Bars with CSS

垂直导航栏

一个简单的列表是一个垂直的导航栏，如果我们让每个列表项都成为一个超链接。

<ul id="navbar">
    <li><a href="/tests">Tests</a></li>
    <li><a href="/studyroom">Q & A Forum</a></li>
    <li><a href="/flashcards">Interview QnA</a></li>
    <li><a href="/library">Tutorials</a></li>
    <li><a href="/testimonials">Testimonials</a></li>
</ul>

上面的列表可以通过添加一些简单的 CSS 属性来设置样式:

CSS:

#navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #EEEEEE;
}

ul#navbar li a {
    display: block;
    color: #000000;
    font-weight:bold;
    padding: 8px 16px;
    text-decoration: none;
}

ul#navbar li a:hover {
    background-color: orange;
    color: white;
}

最好使用一些id或class来提供这样的样式。因为如果我们直接对ul和li元素进行样式化，如下例所示，

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    background-color: #EEEEEE;
}

li a {
    display: block;
    color: #000000;
    font-weight:bold;
    padding: 8px 16px;
    text-decoration: none;
}

li a:hover {
    background-color: orange;
    color: white;
}

那么我们网站上的所有列表都将看起来像一个导航栏，而我们的网站上只需要一个导航栏，因此我们在我们的列表中使用了标识符navbar，这意味着只有带有navbar标识符的列表元素应该这样设置。

ul#navbar表示，一个ul列表元素带有id = "navbar"

现场示例→

Basic Navigation Bars with CSS

水平导航栏

当我们创建水平导航栏时，主要问题是如何将垂直的基本列表转换为水平列表。这可以通过两种不同的方式实现:

使用`display:inline`

我们可以使用 CSS 属性display:inline;删除每个列表项前后的换行符，因为默认情况下列表项都添加了属性display:block;。

ul#navbar li{
    display: inline;
}

现场示例→

使用`float:left`

创建水平导航栏的另一种方法是向所有列表项添加float:left; CSS 属性。因此他们会排成一行。

下面是 CSS 代码:

#navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #EEEEEE;
}

ul#navbar li {
    float:left;
}

ul#navbar li a {
    display: block;
    color: #000000;
    font-weight:bold;
    padding: 8px 16px;
    text-decoration: none;
}

下面我们已经解释了，为什么我们使用了我们在上面的 CSS 代码中使用的东西，从列表项开始:

float:left; →使所有列表项向左浮动，使其排成一行。
overflow: hidden; →现在由于所有列表项都添加了属性float:left，因此列表项将不再在ul列表中，导致ul列表占据最小高度，在本例中该高度为零。我们应用了一种背景色来证明这一点。因此，这里使用了overflow黑客。我们没有使用overflow:auto;，因为它有时会添加一个滚动条，这是我们不想要的。
display: block; →使用这个 CSS 属性，我们使整个链接区域可点击，而不仅仅是链接文本。
padding:8px 16px; →我们增加了一个8px 16px的填充，也就是说在链接的顶部和底部会增加一个8px的空格，左右两侧会增加一个16px的空格。我们添加了填充，使我们的导航菜单看起来宽敞整洁。

现场示例→

使用 CSS 创建卡片

原文：https://www.studytonight.com/cascading-style-sheet/css-cards

在现代网页设计中，卡片被大量使用。卡片看起来很干净，也很像安卓材质的设计。我们可以非常容易地使用box-shadow属性创建文本和图片卡。如果你不知道 CSS 属性box-shadow，请点击链接。

带有 CSS 的图片卡

图片卡可以用来显示文章片段，图片在顶部，文章标题在底部，或者你可以用它来显示用户配置文件，或者其他任何东西。图片卡可以用于多种用途。

Picture Cards using CSS

.picture-card {
    width: 250px;
    box-shadow: 0 4px 8px 0 grey;
    text-align: center;
}

现场示例→

带有 CSS 的文本卡

文字卡可用于创建日历或天气报告格式等。

Text Cards using CSS

.text-card {
    width: 250px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    text-align: center;
}

.heading {
    background-color: #FF9100;
    color: white;
    padding: 40px 10px;
    font-size: 40px;
}

现场示例→

设计基本网页布局

原文：https://www.studytonight.com/cascading-style-sheet/basic-webpage-structure

我们现在已经走了很长的路。我们已经学习了许多 CSS 概念，可以很容易地用来设计我们的网站/网页。在本教程中，我们将学习如何设置一个带有页眉、页脚、侧边栏和正文部分的基本网页。

该网页也遵循相同的结构。我们有一个页眉，一个页脚，一个列出所有教程的侧边栏和教程所在的正文部分。

Basic webpage layout with css

页眉和页脚是基本的，我们只给它提供了一个background-color和一些padding。您可以添加更多的样式，使它们看起来不同。

#header, #footer {
    background-color:#EEEEEE;
    padding:15px;
}

#sidebar {
    float:left;
    width:25%;
    background-color:lightblue;
    padding: 30px 10px;
}

#sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#sidebar li {
    padding: 6px;
    margin-bottom: 10px;
    background-color: #10A2FF;
    color: #ffffff;
}

#sidebar li:hover {
    background-color: #009AFB;
}

#content {
    width:75%;
    /*margin from left equal to width of sidebar*/
    margin-left:25%;
    padding:10px;
}

#main-body {
    overflow:auto;
}

#main-body样式只有一个overflow:auto;的 CSS 属性来包含里面的浮动边栏。

我们已经在侧边栏中添加了 CSS 属性float:left，为了将内容和侧边栏并排，我们在内容部分添加了相当于侧边栏宽度的左边距。

现场示例→

终于！我们知道如何设置基本的网页布局。若要练习，请将边栏从左侧移动到右侧。您必须更改#sidebar样式的float属性和#content样式的边距属性。

给你的网页添加图标

原文：https://www.studytonight.com/cascading-style-sheet/css-icons

图标使您网站上的内容更加直观。通常，图标用于文本旁边的按钮、导航菜单或一些重要信息旁边。早些时候，每当有人不得不在他们的网页上使用图标时，他们会先下载图标，然后添加一个带有图标路径的img标签作为src来显示图标。

不再是了，多亏了一些惊人的图标字体，比如字体惊人、谷歌素材图标和引导图标，使用它们我们可以直接使用图标，而无需下载或安装任何东西。

此外，当我们下载和使用任何图标时，图标图像的大小是固定的，因此对于更大的屏幕分辨率，它将变得模糊。此外，如果你想要一个图标 3 种颜色，那么你必须下载 3 个不同的图标图像。

使用图标字体库，我们可以调整图标的大小、颜色和阴影，就像我们对网页上的任何其他文本所做的那样。

字体牛逼→ 网站

要在我们的网页中使用 Font awesome 库，我们需要在head标签中添加以下代码。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/
font-awesome.min.css">

上面这一行代码，包含了来自 CDN 服务器的 Font Awesome 的 CSS 文件，现在我们可以添加如下图标:

<i class="fa fa-cab"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-home"></i&

现场示例→

谷歌素材图标→ 网站

要在我们的网页中使用谷歌材质图标库，我们需要在head标签中添加以下代码。

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

上面这一行代码，包含了来自谷歌 API 服务器的谷歌材质图标的 CSS 文件，现在我们可以添加如下图标:

<i class="material-icons">card_giftcard</i>
<i class="material-icons">fingerprint</i>
<i class="material-icons">place</i>

现场示例→

谷歌材质图标是移动就绪的，基于安卓材质主题。

引导图标→ 网站

为了在我们的网页中使用 Bootstrap 3.x 图标库，我们需要在head标签中添加以下代码。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

上面这一行代码，包含了来自 MaxCDN 服务器的 Bootstrap Icons 的 CSS 文件，现在我们可以添加如下图标:

<i class="glyphicon glyphicon-music"></i>
<i class="glyphicon glyphicon-star"></i>
<i class="glyphicon glyphicon-time"></i>

现场示例→

CSS 响应

CSS 组合器

原文：https://www.studytonight.com/cascading-style-sheet/css-combinators

CSS 组合符代表两个选择器之间的关系。CSS 选择器是可用于设计特定 HTML 元素样式的模式。有时，可能有不止一个简单选择器，为了组合多个简单选择器，我们使用组合器。

CSS 中组合符的类型

组合子有 4 种类型，如下所示:

后代选择器()(空格)
子选择器(>)
相邻同级选择器(+)
常规同级选择器(~)

CSS 中的后代选择器

当我们想要给多个元素赋予相同的样式，然后通过在它们之间应用空格(后代选择器)来分离所有的选择器时，使用后代选择器。使用后代选择器可以分离的所有选择器应该是元素的直接子元素，或者比 4-5 层更深，但是所有元素应该有相同的祖先。

CSS 中后代选择器的语法

后代选择器的语法如下:

div h4{

/* styling properties*/
property: value;

}

示例:CSS 中的后代选择器

在给定的例子中，我们使用两个选择器div和p。因此，指定的 CSS 属性只被那些p选择器接受，它们是div element的后代。

<!DOCTYPE html>
<html>
<head>
	<title>Descendant Selector</title>
	<style>
		div p{
			background-color: orange;
			height: 30px;
			width: 100%;
		}
	</style>
</head>
<body>
<div>
	<p>Line 1</p>
	<p>Line 2</p>
	<p>Line 3</p>
</div>
<p>Line 4</p>
<p>Line 5</p>
</body>
</html>

输出:

正如我们在输出中看到的，CSS 属性只应用于那些 <p>元素，它们是<div>元素的子元素。

子选择器

子选择器使用大于号(>) 来分隔元素。当我们想要将样式属性应用于特定 HTML 元素的直接子元素时，使用子选择器。这个组合子比后代选择器严格得多，只有当第二个选择器是第一个选择器的直接子选择器时，才会获得样式属性。

CSS 中子选择器的语法

子选择器的语法如下:

div > p {
/* styling properties*/

property: value;

}

示例:CSS 中的子选择器

在给定的例子中，我们已经使用child selector (>)为 div 元素指定了 CSS 属性。属性仅应用于那些p 元素，它们是 div 元素的直接子元素。剩余的 p 元素对 CSS 属性没有影响。

<!DOCTYPE html>
<html>
<head>
	<title>Child Selector</title>
	<style>
		div > p{
			background-color: orange;
			height: 30px;
			width: 100%;
		}
	</style>
</head>
<body>
<div>
	<p>Line 1</p>
	<p>Line 2</p>

</div>
<p>Line 3</p>
<p>Line 4</p>
<p>Line 5</p>
</body>
</html>

输出:

正如我们在输出图像上看到的，CSS 属性只适用于前两个元素line 1和line 2。这是因为我们已经使用child selector和 first two lines are the direct child of the div element为 p element指定了 CSS 属性。

CSS 中的相邻兄弟选择器

当我们想要将 CSS 属性或样式应用于任何元素的相邻同级时，使用相邻同级选择器。兄弟元素应该有相同的父元素，并且第二个元素必须是第一个元素的直接从元素。通过在分隔符之间添加(+)符号来分隔选择器。

CSS 中相邻同级选择器的语法

相邻同级选择器的语法如下:

div + p {
/* styling properties*/

property: value;

}

示例:CSS 中的相邻同级选择器

在给定的示例中，我们已经使用相邻的同级选择器将 CSS 属性应用于 HTML 元素。

<!DOCTYPE html>
<html>
<head>
	<title>Adjacent sibling Selector</title>
	<style>
		p + p{
			background-color: orange;
			height: 30px;
			width: 100%;
		}
	</style>
</head>
<body>
<div>
	<p>Line 1</p>
	<p>Line 2</p>

</div>
<p>Line 3</p>
<p>Line 4</p>
<p>Line 5</p>
</body>
</html>

输出:

正如我们在输出图像上看到的，CSS 属性仅应用于那些与任何其他<p>元素是直接兄弟的<p>元素。属性被Line 2、Line 4和Line 5获得，因为这三个是<p>元素的直系兄弟。

CSS 中的通用同级选择器

当用户想要为彼此是兄弟的元素设置 CSS 属性时，即使它们不是直接的元素，也可以使用一般的兄弟选择器。当我们必须设置具有相同父元素的元素的样式属性时，使用这个选择器。可以通过在它们之间添加(~)符号来分隔这个选择器。

CSS 中通用同级选择器的语法

下面给出了通用同级选择器的语法:

div ~ p {

/* styling properties*/

property: value;

}

示例:CSS 中的通用同级选择器

在本例中，样式属性由

元素的同级获得。

结论:

在本课中，我们已经学习了 CSS 组合符，以及如何使用 CSS 组合符来设计 HTML 元素的样式。此外，我们还学习了组合子的类型，如下所示:

后代选择器()(空格)
子选择器(>)
相邻同级选择器(+)
常规同级选择器(~)

CSS 自定义属性

原文：https://www.studytonight.com/cascading-style-sheet/css-custom-property

大型复杂的网站由大量的 CSS 代码组成，有大量重复的 CSS 属性。例如，相同的颜色已经应用于几个元素，如果我们想要改变该颜色，那么从文档中搜索和替换特定的颜色就变得非常困难。为了克服这个问题，引入了 CSS 自定义属性。

什么是 CSS 自定义属性？

CSS 自定义属性也称为 CSS 变量或级联变量，由 CSS 作者和设计者定义。自定义属性保存一个特定的值，该值可以在文档中的任何地方重用。

自定义属性可以使用以double hyphen **(--)**开头的custom property name来声明，其值可以是任何有效的CSS value。可以使用 var() 功能访问自定义属性。

注意:最好使用:root pseudo-class定义自定义属性，以便它们可以应用于 HTML 文档中的任何地方。

CSS 中自定义属性的语法

CSS 自定义属性的语法如下:

HTML element/selector {

/* CSS Property */ 

--main-bg-color: red;

}

示例:CSS 中的自定义属性

在给定的示例中，我们在:root 伪类中创建了三个自定义类--blue、--white和--black ，这样我们就可以在 HTML 文档的任何地方使用这些自定义属性。然后我们使用< p >元素创建了两个段落。最后，我们使用 CSS custom property和var()功能设置了这两段的样式属性。可以是custom classes之一的自定义属性的值可以放在var()函数的括号内。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Custom Property</title>
	<style>
		:root {
		  --blue: #85e1ed;
		  --white: #ffffff;
		  --black: #000000; 
		}

		body {
		  background-color: var(--blue);
		}

		h2 {
		  border-bottom: 2px solid var(--blue);
		}

		.container {
		  color: var(--black);
		  background-color: var(--white);
		  padding: 15px;
		}

	</style>
</head>
<body>
	<h1>CSS Custom Property</h1>
	<div class="container">
	  <p>The CSS Custom Property is also known as CSS Variables or Cascading Variables which are defined by the CSS authors and designers. The custom property holds a specific value that can be reused anywhere in a document. 
	</p>
	  <p>The custom property can be declared using a custom property name that begins with a double hyphen (--) and the value of this can be any valid CSS value. The custom property can be accessed using the var() function. 
	</p>
	</div>
</body>
</html>

输出:

正如我们所看到的，HML 元素可以接受指定的 CSS 属性。

CSS 覆盖变量

如上所述，全局变量可以通过整个 HTML 文档来访问，而局部变量只能在声明它的选择器中访问。假设，如果我们想为任何元素指定任何特定的属性，那么我们必须在本地声明自定义属性。

示例:CSS 覆盖变量

在这个例子中，我们使用<p>元素创建了两个段落，使用<button>元素创建了两个按钮。然后，我们在根元素中创建了三个自定义属性(--blue、--white、--black)和一个名称相同(--blue)但值不同的按钮元素的locally。因此，当我们为<button> element指定自定义属性(--blue)时，它将采用本地定义属性的值，而不是全局定义属性的值。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Custom Property</title>
	<style>
		:root {
		  --blue: #85e1ed;
		  --white: #ffffff;
		  --black: #000000; 
		}

		body {
		  background-color: var(--blue);
		}

		h2 {
		  border-bottom: 2px solid var(--blue);
		}

		.container {
		  color: var(--black);
		  background-color: var(--white);
		  padding: 15px;
		}
		button {
  --blue: #0000ff;
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

	</style>
</head>
<body>
	<h1>CSS Custom Property</h1>
	<div class="container">
	  <p>The CSS Custom Property is also known as CSS Variables or Cascading Variables which are defined by the CSS authors and designers. The custom property holds a specific value that can be reused anywhere in a document. 
	</p>
	  <p>The custom property can be declared using a custom property name that begins with a double hyphen (--) and the value of this can be any valid CSS value. The custom property can be accessed using the var() function. 
	</p>
	<div>
    <button>Yes</button>
    <button>No</button>
    </div>
</div>
</body>
</html>

输出:

从输出图像中我们可以看到buttons 接受了本地定义的自定义属性 --blue的值。

用 Javascript 更改变量

我们可以使用 JavaScript 更改 CSS 变量，因为 CSS 变量可以访问 DOM。JavaScript 允许我们使用getPropertyValue()函数获取自定义属性的值。

示例:用 Javascript 更改 CSS 变量

在这个例子中，我们已经演示了如何在运行时使用getPropertyValue() 函数获取自定义属性的值。

结论

在本课中，我们学习了如何创建可以多次使用的自定义变量并减少代码行。此外，我们还学习了如何使用 CSS 和 Javascript 覆盖它们的值。

CSS 媒体查询

原文：https://www.studytonight.com/cascading-style-sheet/css-media-queries

CSS 媒体查询用于创建响应网页。媒体查询根据网页的屏幕大小或其他特征和参数(如屏幕分辨率和浏览器视口宽度)修改网页的 HTML 元素。

媒体查询用于检查某些事情，例如:

视口的高度和宽度
设备的高度和宽度
设备方向
屏幕分辨率

媒体查询由一种媒体类型和无数媒体特征表达式组成。我们还可以在逻辑运算符的帮助下组合多个媒体查询。

借助媒体查询，我们可以为笔记本电脑、台式机、手机等不同尺寸的设备指定不同的 CSS 属性。我们还可以为打印文档或屏幕阅读器指定特定的样式。

媒体查询的语法

要将媒体查询添加到 CSS 中，我们必须首先添加@media规则，该规则用条件包装元素，这些条件告诉何时何地将 CSS 属性应用到特定元素。

@media not|only mediatype and (expression) 
{

HTML element/Selector 
	{

		/* CSS Properties*/
		property: value;

	}

}

CSS 中的`not`、、`only`、和、`and`和关键词

| 关键词 | 描述 |
| 不是 | not 关键字返回整个媒体查询的含义。 |
| 仅 | 限制旧浏览器使用应用于指定样式的媒体功能的媒体查询的唯一功能。 |
| 和 | 和功能用于将媒体功能与一种媒体类型和另一种媒体功能合并。 |

CSS 中的媒体类型

| 序列号 | 值 | 描述 |
| 1。 | 全部 | 这是用于所有媒体类型的默认值。 |
| 2。 | 打印 | 该值用于打印机。 |
| 3。 | 屏幕 | 该值用于计算机屏幕、平板电脑和智能手机。 |
| 4。 | 发言 | 该值用于屏幕阅读器。 |

CSS 中的媒体查询示例

在给定的示例中，我们为主体元素指定了 CSS 背景色属性，其值为 #e6a7f2 。当元件的屏幕宽度为 500px 或大于时，该值可被元件接受。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Media Queries</title>
	<style>
		body {
		  background-color: #7edff7;
		}

		@media screen and (min-width: 500px) {
		  body {
		    background-color: #e6a7f2;
		  }
		}
</style>
</head>
<body>
<h1>When you resize the browser, you will e the effect.</h1>
<p>The media query will only apply if the media type is screen and the viewport is 500px wide or wider.</p>
</body>
</html>

输出:

CSS 中的最小宽度和最大宽度

最小宽度和最大宽度属性用于设置屏幕的最小宽度和最大宽度。当我们想要为特定屏幕大小的元素设置 CSS 属性时，会使用该属性。

因此，min-width属性指定设备屏幕或任何元素的最小宽度，max-width属性指定设备屏幕或任何元素的最大宽度

最小宽度和最大宽度示例

在给定的例子中，我们指定了最小宽度到 400px 和最大宽度到 750px ，然后我们指定了一些 CSS 属性。因此，只有当设备的宽度在 400px 到 750px 之间时，指定的 CSS 属性才能应用于元素。

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>CSS Media Query</title>
	<style>
		@media screen and (max-width: 750px) and (min-width: 400px) {
		  div.example {
		    font-size: 50px;
		    padding: 50px;
		    border: 2px solid black;
		    background: #73ddf5;
		}
	}
</style>
</head>
<body>
	<h3>Resize the browser to see the effects.</h3>
	<div class="example">Hello!</div>
</body>
</html>

输出:

列的 CSS 媒体查询

媒体查询允许我们创建一个灵活的布局模块，该模块可以根据不同的屏幕大小将其布局从多列更改为全宽列。

示例:使用媒体查询创建响应列

在下面的示例中，我们创建了一个多列布局，该布局根据屏幕大小在四列、两列和全宽布局之间变化。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Media Queries</title>
	<style>
		* {
		  box-sizing: border-box;
		}
		.column {
		  float: left;
		  width: 25%;
		  padding: 20px;
		}
		.row:after {
		  content: "";
		  display: table;
		  clear: both;
		}
		@media screen and (max-width: 992px) {
		  .column {
		    width: 50%;
		  }
		}
		@media screen and (max-width: 600px) {
		  .column {
		    width: 100%;
		  }
		}
	</style>
</head>
<body>

<h2>Responsive Multiple Column Layout</h2>
<div class="row">
  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
  </div>

  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
  </div>

  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
  </div>

  <div class="column" style="background-color:#ddd;">
    <h2>Column 4</h2>
  </div>
</div>
</body>
</html>

输出:

使用 CSS 添加断点

CSS 断点用于使网页布局根据设备的屏幕大小做出响应。它有助于为每个屏幕尺寸的用户做出最佳的布局。这些断点与 CSS 媒体查询一起使用，使网页布局根据指定的屏幕宽度改变其布局。

示例:使用媒体查询添加断点

在这个例子中，我们创建了一个网格布局，它会根据屏幕大小改变布局。这可以使用 CSS 媒体查询和断点来完成。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Media Queries</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		* {
		  box-sizing: border-box;
		}

		.row::after {
		  content: "";
		  clear: both;
		  display: block;
		}

		[class*="col-"] {
		  float: left;
		  padding: 15px;
		}

		html {
		  font-family: "Lucida Sans", sans-serif;
		}

		.header {
		  background-color: #ff9100;
		  color: #000000;
		  padding: 6px;
		}

		.menu ul {
		  list-style-type: none;
		  margin: 0;
		  padding: 0;
		}

		.menu li {
		  padding: 4px;
		  margin-bottom: 7px;
		  background-color: #f5c92a;
		  color: #000000;
		  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
		}

		.menu li:hover {
		  background-color: #ff9100;
		}

		/* For desktop: */
		.col-1 {width: 8.33%;}
		.col-2 {width: 16.66%;}
		.col-3 {width: 25%;}
		.col-4 {width: 33.33%;}
		.col-5 {width: 41.66%;}
		.col-6 {width: 50%;}
		.col-7 {width: 58.33%;}
		.col-8 {width: 66.66%;}
		.col-9 {width: 75%;}
		.col-10 {width: 83.33%;}
		.col-11 {width: 91.66%;}
		.col-12 {width: 100%;}

		@media only screen and (max-width: 768px) {
		  /* For mobile phones: */
		  [class*="col-"] {
		    width: 100%;
		  }
		}
	</style>
</head>
<body>
	<div class="header">
	  <h1>Stdytonight</h1>
	</div>

	<div class="row">
	  <div class="col-4 menu">
	    <ul>
	    <li><b>Tutorials</b></li>
	    <li>HTML</li>
	    <li>CSS</li>
	    <li>JavaScript</li>
	    </ul>
	  </div>

	  <div class="col-8">
	    <h1>Studytonight<span style="font-size: 10px;">.com</span></h1>
	    <p>n a world where so much is being done for technology and so little for the environment, education is not even a part of most discussions. We at Studytonight believe that by widening the reach of education, by making it freely available, so much can be achieved.</p>
	    <p><strong>When you resize the browser you will see how the content respond to the resizing.</strong></p>
	  </div>
	</div>
</body>
</html>

输出:

使用媒体查询设计移动优先布局

术语“移动优先”意味着首先为移动电话(小屏幕设备)设计布局，然后为其他设备(大屏幕设备)设计布局。这将使网页在较小的设备上加载更快，因为超过一半的互联网流量来自小设备。通过在媒体查询中做这些小的改变，我们可以使我们的网页移动化。

在前面的例子中，我们所做的是当屏幕宽度变得小于 768px 时，它的布局发生变化，每一列都自我扩展并开始占据 100%的屏幕宽度，而在移动优先布局中，当宽度变得大于 768px 时，布局发生变化。

示例:使用媒体查询创建移动优先设计

在这个例子中，我们使用 CSS 媒体查询创建了一个移动优先的网页布局。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Media Queries</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		* {
		  box-sizing: border-box;
		}

		.row::after {
		  content: "";
		  clear: both;
		  display: block;
		}

		[class*="col-"] {
		  float: left;
		  padding: 15px;
		}

		html {
		  font-family: "Lucida Sans", sans-serif;
		}

		.header {
		  background-color: #ff9100;
		  color: #000000;
		  padding: 6px;
		}

		.menu ul {
		  list-style-type: none;
		  margin: 0;
		  padding: 0;
		}

		.menu li {
		  padding: 4px;
		  margin-bottom: 7px;
		  background-color: #f5c92a;
		  color: #000000;
		  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
		}

		.menu li:hover {
		  background-color: #ff9100;
		}

		[class*="col-"] {
			width: 100%;
		}

		/* For desktop: */
		.col-1 {width: 8.33%;}
		.col-2 {width: 16.66%;}
		.col-3 {width: 25%;}
		.col-4 {width: 33.33%;}
		.col-5 {width: 41.66%;}
		.col-6 {width: 50%;}
		.col-7 {width: 58.33%;}
		.col-8 {width: 66.66%;}
		.col-9 {width: 75%;}
		.col-10 {width: 83.33%;}
		.col-11 {width: 91.66%;}
		.col-12 {width: 100%;}

	</style>
</head>
<body>
	<div class="header">
	  <h1>Stdytonight</h1>
	</div>

	<div class="row">
	  <div class="col-4 menu">
	    <ul>
	    <li><b>Tutorials</b></li>
	    <li>HTML</li>
	    <li>CSS</li>
	    <li>JavaScript</li>
	    </ul>
	  </div>

	  <div class="col-8">
	    <h1>Studytonight<span style="font-size: 10px;">.com</span></h1>
	    <p>n a world where so much is being done for technology and so little for the environment, education is not even a part of most discussions. We at Studytonight believe that by widening the reach of education, by making it freely available, so much can be achieved.</p>
	    <p><strong>When you resize the browser you will see how the content respond to the resizing.</strong></p>
	  </div>
	</div>
</body>
</html>

输出:

CSS 中的典型设备断点

有许多不同高度和宽度的设备和屏幕可供选择。不可能为每个设备创建精确的断点。为了使网页布局具有响应性和移动性，首先，我们为不同的设备将屏幕宽度分为 5 组。

示例:在 CSS 中根据设备的宽度更改背景颜色

在这个例子中，我们为不同的屏幕尺寸设置了多个断点。因此，当我们调整浏览器的大小时，背景颜色会在不同的断点(屏幕大小)发生变化。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Media Queries</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		.breakpoint {
		  padding: 20px;
		  color: white;
		}
		/* Extra small devices (phones, 600px and down) */
		@media only screen and (max-width: 600px) {
		  .breakpoint {background: pink;}
		}

		/* Small devices (portrait tablets and large phones, 600px and up) */
		@media only screen and (min-width: 600px) {
		  .breakpoint {background: orange;}
		}

		/* Medium devices (landscape tablets, 768px and up) */
		@media only screen and (min-width: 768px) {
		  .breakpoint {background: blue;}
		} 

		/* Large devices (laptops/desktops, 992px and up) */
		@media only screen and (min-width: 992px) {
		  .breakpoint {background: #f6f799;}
		} 

		/* Extra large devices (large laptops and desktops, 1200px and up) */
		@media only screen and (min-width: 1200px) {
		  .breakpoint {background: purple;}
		}
	</style>
</head>
<body>
<p class="breakpoint">When you resize the browser you will see how the background color of this paragraph changes on different screen sizes.</p>
</body>
</html>

输出:

使用媒体查询隐藏元素

媒体查询还提供隐藏元素功能。我们可以隐藏特定屏幕设备的元素或内容。假设有一个在大屏幕设备上可见的项目列表，但我们不想在手机等小屏幕设备上显示。所以我们使用媒体查询来实现这一点。

示例:使用媒体查询隐藏元素

在这个例子中，我们创建了一个列表，当浏览器的宽度小于或等于 500px 时，这个列表就会被隐藏。

结论

在本课中，我们学习了媒体查询的概念、语法等。此外，我们还学到了以下内容

媒体类型
最小宽度和最大宽度
如何使用媒体查询创建列
如何添加断点
如何设计移动优先布局
如何添加典型断点
使用媒体查询隐藏元素

CSS 响应性网页设计

原文：https://www.studytonight.com/cascading-style-sheet/css-responsive-web-design

响应式网页设计是一种让网页在各种屏幕尺寸和设备(如笔记本电脑、台式机、智能手机、平板电脑等)上呈现良好的方式。任何使用响应网页设计(RWD) 创建的网站都可以根据查看环境自动调整布局和外观。

如今，响应布局成为任何网站最重要的功能，因为超过一半的互联网流量来自手机。假设你在手机上访问了一个网站，而这个网站只有一个桌面版本。所以，你必须一遍又一遍地向旁边滚动，才能阅读或看到一些东西。这造成了不好的用户体验，而且你也不想再访问那个网站。由于这些原因，这些网站采用了 RSW 的方法。

创建响应性网页

如今，有多种屏幕尺寸的设备可供选择。需要创建能够适应每种屏幕尺寸且易于访问的网页。这样用户就不必侧着身子查看溢出的内容。

一般可以使用 HTML 元素和 flexbox、网格、浮动、框模型、等 CSS 布局模块进行 CSS 布局。要创建任何网页，我们必须先设计一个布局。然后，通过记住这个布局，我们必须开始实现它。

以下是创建响应性网站的步骤:

步骤 1: 使用<div>元素创建标题。

第二步:然后我们使用.row 类创建了一行。该行分为三段，可以使用.col-*类完成。

第一部分是使用列表元素<ul>创建的菜单，菜单项是使用<li>元素创建的。
第二部分是由标题和段落组成的描述。标题使用<h1>元素创建，段落使用<p>元素创建。
第三部分包括我们提供的设施。在本节中，所有内容都放在标题 ( <h1>.....<h6>)元素中。

步骤 3: 最后一部分是页脚，它是使用<div>元素和类.footer一起创建的。页脚的所有 CSS 属性都设置在.footer类中。

注意:当您在不同屏幕尺寸的设备上打开网页时，网页的布局也会根据设备的屏幕尺寸而相应改变。

活生生的例子

结论

CSS 响应网页设计使我们的网页在所有屏幕尺寸上看起来都很好，只使用 HTML 和 CSS。

CSS 响应式网格视图

原文：https://www.studytonight.com/cascading-style-sheet/css-responsive-grid-view

大多数网页由网格布局组成，这意味着页面分为行和列。借助这种网格布局，我们可以非常轻松高效地在网页上放置行和列。它允许我们将任意一行拆分为 12 列，最大宽度为 100%。当我们调整浏览器的大小时，这些网格元素会根据屏幕大小进行收缩和扩展。

在 CSS 中创建响应式网格视图

为了创建一个响应性的网格视图，我们必须为网页中的所有元素设置一个值为的box-sizing属性边框。这将包括将元件的边框和边框填充到元件的高度和宽度中。

给定的语法用于全局设置任何 CSS 属性，或者我们可以说用于所有的 HTML 元素。

* {

box-sizing: border-box; 

}

我们使用 < div > 元素创建了一个标题，并分配了.header类来设置标题元素的 CSS 属性。为标题指定的 CSS 属性如下所示:

.header {
  border: 1px solid blue;
  padding: 15px;
}

然后我们为主菜单创建了另一个 < div > ，并分配了类.menu。我们已经使用<【ul】>元素创建了一个无序列表，为其中的列表项添加了 < li > 元素 < div > 。应用于该元素的 CSS 属性如下所示:

.menu {
  width: 25%;
  float: left;
  padding: 15px;
  border: 1px solid blue;
}

然后，第三个 < div > 用于创建描述列并分配类。主。应用于该元素的 CSS 属性如下所示:

.main {
  width: 75%;
  float: left;
  padding: 15px;
  border: 1px solid blue;
}

超文本标记语言代码

下面是上面给出的解释的正确的 HTML 和 CSS 代码:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Responsive Grid</title>
<style>
* {
  box-sizing: border-box;
}

.header {
  border: 1px solid blue;
  padding: 15px;
}

.menu {
  width: 25%;
  float: left;
  padding: 15px;
  border: 1px solid blue;
}

.main {
  width: 75%;
  float: left;
  padding: 15px;
  border: 1px solid blue;
}
</style>
</head>
<body>

<div class="header">
  <h1>Studytonight</h1>
</div>

<div class="menu">
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>Bootstrap 4</li>
    <li>JavaScript</li>
  </ul>
</div>

<div class="main">
  <h1>Studytonight</h1>
  <p>In a world where so much is being done for technology and so little for the environment, education is not even a part of most discussions. We at Studytonight believe that by widening the reach of education, by making it freely available, so much can be achieved.</p>
  <p><strong>Resize the browser window to see how the content respond to the resizing.</strong></p>
</div>

</body>
</html>

输出:

实例:使用 CSS 创建响应式网格布局

这里演示了如何仅使用 HTML 和 CSS 创建一个响应性的网格布局。当您调整浏览器的大小时，您将看到网格布局如何在不同的屏幕大小上变化，而不会与另一个元素重叠。

结论

在本课中，我们学习了如何使用 CSS 属性创建具有行和列的响应式网格布局。

CSS 响应式图像

原文：https://www.studytonight.com/cascading-style-sheet/css-responsive-image

如今，大多数人使用较小的设备(手机和平板电脑)而不是全屏设备(笔记本电脑、台式机)访问互联网。因此，非常有必要使网页具有响应性，以提供更好的用户界面和设备兼容性。

响应式图像也是响应网页布局的一部分。响应式图像是那些根据设备屏幕大小自动调整自身的图像。

要创建一个响应式图像，我们必须将宽度属性设置为百分比，高度设置为自动。通过将这两个属性应用于任何图像，图像将变得有响应，并根据设备的宽度自动调整自身。

示例:在 CSS 中创建响应式图像

在本例中，我们使用 CSS width 属性将图像的宽度设置为 100% 值，使用 CSS height属性将图像的高度设置为自动值。这两个属性使图像放大到比实际大小更大。

<!DOCTYPE html>
<html>
<head>
  <title>CSS Responsive Image</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
img {
  width: 100%;
  height: auto;
}
</style>
</head>
<body>

<img src="studyonight.jpg" width="460" height="345">
<p><stronh>When you resize the browser, you will se the effect.</stronh></p>

</body>
</html>

输出:

正如我们在输出中看到的，图像采用了整个可用宽度，这是因为我们将 width 属性的值指定为 100%。

使用 CSS 向网页添加图像

我们可以在响应网页中的任何地方添加图像。图像也可以根据设备宽度自动调整自身。

示例:使用 CSS 向网页添加图像

在这个例子中，我们在响应网页中添加了一个图像。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Responsive Image</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}

img {
  width: 100%;
  height: auto;
}

.row:after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
  width: 100%;
}

@media only screen and (min-width: 600px) {
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #ff9100;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #f5c92a;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #ff9100;
}

.aside {
  background-color: #f5c92a;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
  background-color: #5fcf80;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}
</style>
</head>
<body>

<div class="header">
  <h1>Studytonight</h1>
</div>

<div class="row">
  <div class="col-3 col-s-3 menu">
    <ul>
      <li>Tutorials</li>
      <li>Tests</li>
      <li>Practice Coding</li>
      <li>Web Development</li>
    </ul>
  </div>

  <div class="col-6 col-s-9">
    <h1>Studytonight</h1>
    <p>In a world where so much is being done for technology and so little for the environment, education is not even a part of most discussions. We at Studytonight believe that by widening the reach of education, by making it freely available, so much can be achieved.</p>

    <img src="studyonight.jpg" width="460" height="345">
  </div>

  <div class="col-3 col-s-12">
    <div class="aside">
      <h2>Tutorials we offer</h2>
      <h3>Academic Subjects</h3>
      <h3>Web Development</h3>
      <h3>Interview Questions</h3>
    </div>
  </div>
</div>

<div class="footer">
  <p><strong>Resize the browser window to see how the content respond to the resizing.</strong></p>
</div>

</body>
</html>

输出:

CSS 中的背景图像

我们还可以使背景图像具有响应性。为了使背景图像具有响应性，我们必须设置背景大小属性。背景大小属性有三个值，它们是:

| 值 | 描述 |
| 包含 | 该值允许图像根据屏幕大小进行自我调整，并尝试适应内容区域。 |
| 盖 | 该值保持图像的纵横比，如果图像大小大于内容区域，则图像的某些部分可能会被剪裁。 |
| 100% | 该值允许背景图像覆盖整个内容区域。 |

示例:使用 CSS 添加背景图像

在本例中，我们为图像指定了 CSS 属性background-size，其值包含，以使图像具有响应性。

<!DOCTYPE html>
<html>
<head>
	<title>CSSResponsive Image</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		div {
		  width: 100%;
		  height: 400px;
		  background-image: url('studyonight.jpg');
		  background-repeat: no-repeat;
		  background-size: contain;
		  border: 1px solid red;
		}
	</style>
</head>
<body>
	<div></div>
	<p><strong>When you resize the browser you will see the effect.</strong></p>
</body>
</html>

输出:

使用 CSS 媒体查询

我们可以为不同的设备设置不同大小的图像，例如大图像，在全屏设备(笔记本电脑和台式机)上看起来很好，但这些图像对于小屏幕设备来说毫无用处。因此，我们使用媒体查询来设置不同设备上的不同图像。

示例:为图像指定媒体查询

在本例中，我们指定了媒体查询来使图像具有响应性。

<!DOCTYPE html>
<html>
<head>
	<title>CSS Responsive Image</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		/* For width smaller than 400px: */
		body {
		  background-repeat: no-repeat;
		  background-image: url('studyonight.jpg'); 
		}

		/* For width 400px and larger: */
		@media only screen and (min-width: 400px) {
		  body { 
		     background-image: url('studyonight.jpg'); 
		  }
		}
</style>
</head>
<body>
</body>
</html>

输出:

CSS 中的元素

<picture> HTML 元素与<video>和<audio>元素非常相似。借助这个元素，我们可以在<picture>元素内设置多个图像，最适合的图像正在屏幕上显示。

<picture>元素由零个或多个<source> 元素和一个<img> 元素组成。浏览器会考虑每个<source>元素并从中选择最佳元素。如果没有找到匹配项或者浏览器不支持 <picture> 元素，那么将显示在<img>元素中指定的图像源。

注:我们也可以在<source> 元素的地方使用<img>元素。

示例:应用元素

在这个例子中，我们已经指定了打开和关闭<picture>元素，然后指定了<source>元素。<source>元素由两个属性 srcset 和媒体组成。srcset 属性用于指定图像的来源，媒体属性用于指定图像的媒体查询。

结论

在本课中，我们学习了如何创建一个响应式图像，根据设备的屏幕大小调整其高度和宽度。我们还学会了如何

添加响应性背景图像
使用媒体查询使图像具有响应性
使用元素添加图像

CSS3 中的新功能

CSS 二维变换

原文：https://www.studytonight.com/cascading-style-sheet/css-2D

你好！今天，我们从这里开始我们的旅程，进入一些高级的 CSS 主题，比如 CSS 变换，它包含在 CSS3 规范中。

我们将从 2D 变换开始，它允许你变换、缩放和扭曲元素。我们已经在下面详细解释了这些术语的含义。

一个变换是一个让元素改变形状、大小或位置的效果。CSS3 支持 2D 变换和三维变换。

让我们从列出支持 2D 变换的浏览器开始。

IE 10+
谷歌 Chrome 36+
Mozilla Firefox 16+
Safari 9+
Opera 23+

注意: 这些浏览器的一些旧版本也支持 2D 变换，但是要使您的 CSS 工作，您需要在变换属性上附加一个前缀(例如-ms-或–webkit-)。

在本教程中，您将学习以下变换函数，而不是属性。

翻译()
旋转()
比例()
skewX()
skewY()

`translate()`

此函数使用作为函数参数提供的值，将元素从其正常位置移动到不同位置。

以下示例将把

元素`50`像素向右移动，而`100`像素从其原始位置向下移动。请注意附加的前缀以支持旧版本。

h1{
    -ms-transform: translate(50px,100px);   /* IE 9 */
    -webkit-transform: translate(50px,100px);   /* Safari */
    transform: translate(50px,100px);
}

现场示例→

`rotate()`

通过为该功能提供degree值，可以顺时针或逆时针旋转特定元素。

h1{ 
    transform: rotate(20deg);
}

现场示例→

`scale()`

缩放会增加或减少元素的大小。

div{ 
    transform: scale(2, 3);
}

上面的例子将

元素的大小增加到原来宽度的两倍，原来高度的三倍。

现场示例→

尝试在scale()方法中使用负值，看看元素内部文本的镜像是如何显示的。

`skew()`

您也可以分别使用skewX()或skewY()功能将元素沿 X 轴或 Y 轴倾斜任意给定的角度。

div{ 
    transform: skewX(20deg); 
}

div{ 
    transform: skewY(30deg); 
}

或者，您可以为skew()方法提供两个参数，如下所示:

div{ 
    transform: skew(20deg, 30deg);
}

第一个参数对应 X 轴，第二个对应 Y 轴。如果没有指定第二个参数，默认情况下它将取零值。

现场示例→

变换原点性质

transform-origin属性允许您更改已经变换的元素的位置。元素的 x 轴和 y 轴可以在 2D 变换中改变，而元素的 z 轴也可以在三维变换中随 x 轴和 y 轴一起改变。

注意: 这个属性必须和 transform 属性一起使用。

语法:

transform-origin: x-axis y-axis[z-axis] | initial | inherit;

x 轴参数的可能值为右侧、左侧、中心、长度或百分比。
y 轴参数的可能值为顶部、底部、中心、长度或百分比。
z 轴的可能值是长度。

好了，这就是 CSS3 中 2D 变换的全部内容。

CSS 渐变

原文：https://www.studytonight.com/cascading-style-sheet/css-gradients

在前面的课程中，我们了解了background属性以及background-image和background-color属性。您也可以使用渐变，而不是为背景设置图像。不使用实际的图像文件，而是使用渐变背景，可以获得更好的网页性能和对设计的更好控制。

那么什么是梯度？渐变是一种颜色渐变为另一种颜色。在 CSS 中，您可以控制颜色和渐变的变化模式，以您想要的方式修改它们。

记得我们之前用background-color设置背景颜色。然而对于渐变，我们使用background-image

.gradient{ 
    background-image: linear-gradient(red, orange);
}

线性梯度

这是最常见和最有用的渐变类型。渐变axis可以从左到右，从上到下，也可以选择任何角度。如果不声明角度，则假设轴是从上到下的。您可以使用六进制代码或命名颜色或 RGB 值来指定颜色。

.gradient {
 	background-image: linear-gradient(to right, red, #f06d06 );	
}

为了使它从左到右，我们在linear-gradient()函数参数的开头传递一个附加参数，使用单词到，指示方向，例如“向右”。这种语法也适用于拐角。

例如，如果你想让渐变的轴从左下角开始，到右上角，你可以说“到右上角”。

您可以使用任意多的颜色来制作渐变。

.gradient {
    background-image:linear-gradient(to right, red, #3366ff, rgb(255, 255, 0), green);	
}

现场示例→

径向梯度

径向梯度不同于线性梯度，因为它从一个点开始，向外扩展。渐变通常用于模拟灯光效果，因此它们有助于使渐变看起来更加自然。

默认设置是，第一种颜色从元素的(中心)开始，向元素的边缘渐变到结束颜色。无论是哪个方向，衰落都以相同的速度发生。淡入淡出的默认样式是椭圆，但也可以强制为圆形样式。

示例:

/* default ellipse */
.gradient {
  	background-image:radial-gradient(yellow, #3366ff );	
}

/* changing the fading to circle form */
.gradient {
  	background-image:radial-gradient(circle, yellow, #3366ff );	
}

现场示例→

以下浏览器支持线性和径向渐变:

Chrome 26+
Firefox 16+
IE 10+
Opera 15+
Safari 6.1+

还有第三种梯度，即repeating gradient。然而，到目前为止，支持这种类型的浏览器并不多。

使用渐变可以获得很多乐趣。与background-image相比，它们在性能方面是更好的选择，而且它们看起来更自然。

CSS 3D 变换

原文：https://www.studytonight.com/cascading-style-sheet/3D-transformations

你已经学习了 2D 变换和渐变，所以现在是时候在 CSS 中进行三维变换了。

是什么让一个物体成为 3D 的？包含 z 轴，没错！2D 变换和三维变换几乎是相似的，除了三维变换由于额外的 z 轴而有更多的方法。

您学习的所有 2D 变换方法也适用于三维过渡，但它们有不同的名称。检查下表。

3D Transformations

除了通常的 2D 方法，CSS3 还为我们提供了以下功能:

平移(z)
播放列表(z)
旋转(z)
旋转(z)

还有一个新的属性叫做backface-visibility。

`perspective`

此属性定义从视图中放置 3D 元素的像素数。此属性允许您更改如何查看三维元素的视角。

注意: 为元素定义perspective属性时，获取透视图的是 CHILD 元素，而不是元素本身。

此功能仅适用于三维变换。

div {
    -webkit-perspective: 250px;     /* for OLDER versions */
    perspective: 250px;
}

`backface-visibility`

此属性定义元素不面向屏幕时是否可见。当元素旋转时，此属性很有用，并且您不想看到元素的背面。

语法:

backface-visibility: visible | hidden | initial | inherit;

例如

div {
    -webkit-backface-visibility: hidden; */* OLDER VERSIONS */*
    backface-visibility: hidden;
}

适用于 2D 变换的所有其他属性(除了倾斜)对于三维变换也仍然适用。

CSS 教程：最后的话

原文：https://www.studytonight.com/cascading-style-sheet/ending-note

欢迎学习本教程系列的最后一课。从学习 CSS 的语法到 2D 和 3D 转换，我们已经走了很长的路！你已经发展了一项新技能，现在可以自信地进入网页设计领域。凭借你新发现的技能，你现在明白开发好看的网页是多么有趣了。

许多开发人员试图在网上找到好的网站模板，并将其用于他们的网站。但是这些网站最终看起来就像互联网上的任何其他网站一样。你现在可以按照自己的意愿设计你的网站，从而让它看起来独一无二。

如果你是一个用户界面/UX 设计者，知道如何修改 CSS 总是一个附加，因为你不需要跑去你的开发人员那里做一些你可以很容易修复的小改变。当你练习的时候，你只会变得更好。

要练习并重新访问本教程中的所有示例，请继续查看以下链接:

CSS 示例→ 所有示例

练习用网络终端→ 去操场

再次恭喜！完成今晚的 CSS 教程系列。

SASS

SASS 基础

SASS/SCSS 简介

原文：https://www.studytonight.com/sass/introduction-to-sass-scss

Sass(语法上很棒的样式表)是 CSS 的扩展，它为基本的 CSS 语言增加了语法能力，使开发人员更容易编写 CSS。简单来说，就是一个 CSS 预处理器，让你可以用简单方便的方式编写 CSS。

先决条件

在你开始学习 SASS 之前，你应该对 CSS 有所了解。如果你知道它的基本知识，那么你很适合使用 SASS，但是不管怎样，如果你擅长使用 CSS，那么它将帮助你探索更多关于 SASS 的知识。如果你是新手，可以从这里学习 CSS。

什么是 SASS？

Sass(语法上很棒的样式表)是 CSS 的扩展，它让编写 CSS 代码的整个过程变得更加容易。SASS 就像是 CSS 的新时代版本，它装载了世界各地的开发者希望 CSS 拥有的功能。虽然最新的 CSS3 支持很多新的句法变化，但在很多方面还是有所欠缺。让我们举一个简单的例子，对于今晚的学习网站，我们的原色方案在我们的 CSS 中有紫色和橙色的阴影。

CSS vs SASS

现在，这两种颜色的 Hexa 代码用于不同的 CSS 类，用于设置按钮、文本、背景的样式，您一定在我们网站的不同部分看到过。此外，我们时不时地改变颜色深浅，保持颜色不变，结果我们不得不在 CSS 文件的多个地方改变 Hexa 代码。这是我们在 CSS 中面临的众多问题之一。

使用 SASS/SCSS，我们可以在样式代码的顶部定义变量，给它赋值，它可以是 Hexa 代码或其他任何东西，然后在 CSS 代码中使用变量。

$purple: #6A67CE;
$orange: #FF9100;

.purple-btn
{
	text-align: center;
	background-color: $purple;
}
.purple-text
{
	color: $purple;
}

在 CSS 中使用与颜色使用相关的 SASS/SCSS 的好处的另一个很好的例子是，它非常容易定义原色的强调色。例如，如果您注意到我们网站上的按钮，当您将鼠标悬停在按钮上或单击按钮时，它们会将颜色更改为稍暗的颜色。在 CSS 中，我们必须像这样指定两种颜色的 Hexa 代码，

.purple-btn
{ 
    text-align: center; 
    background-color: #6A67CE; 
}

.purple-btn:hover 
{ 
    background-color: #5653BD; 
}

找到正确的颜色，然后在 CSS 文件中更改 Hexa 代码，当你的设计师不断要求不同的颜色时，这就变得非常乏味了。SASS/SCSS 也非常优雅地处理了这个问题。在下面的 SASS 代码中，我们为按钮上的悬停效果定义了比原始颜色深 15%的强调色。

$purple: #6A67CE;
$darkpurple: darken($purple, 15%);

.purple-btn 
{
    text-align: center;
    background-color: $purple;
} 
.purple-btn:hover
{
    background-color: $darkpurple;
}

这样，我们甚至可以使用禁用效果、悬停效果、选定效果等变量来控制原色的深浅。

Sass 是一种编译成 CSS 的脚本语言。SASS 可以被认为是添加在 CSS 上的一个额外的抽象层，使开发人员更容易编写大量的 CSS 代码。使用简单的 SASS 命令，可以很容易地将 SASS 代码转换成 CSS 代码。这种样式表语言最初由亨利·桑顿设计，由娜塔莉·韦森鲍姆开发。

两种语法之间的区别- SASS 与 SCSS

Sass 有两种语法，即 SCSS 和 SASS ，具有两种不同的文件扩展名".scss"和".sass"。最常用的是时髦的 CSS 或者仅仅是 SCSS。SCSS 的语法类似于 CSS3 的语法。因此，我们可以说每个 CSS3 样式表也是 SCSS 的。虽然 SASS 是较旧的版本，但编写这两个版本的主要区别之一是使用了分号和括号。旧版本使用行的缩进来指定代码块。无论何时你使用 SCSS，你都需要给予。scss 作为你的文件扩展名，。sass 否则。我们将在这里讨论最常用的野蛮 CSS(SCSS)。

SCSS 语法是在 Sass 的版本 3 中引入的。Sass 语法很好，但是引入 SCSS 的一个主要原因是，Sass 的预期语法对于 CSS 来说太陌生了，以至于它的采用变得很困难。那么为什么要花时间学习新的语法呢？因此，创建了 SCSS，其语法类似于 CSS 语法。

让我们考虑一个使用这两种语法的例子，

<nav>
    <ul>
        <li>List item</li>
    </ul>
    <a href="https://google.com">Google</a>
</nav>

这个 HTML 代码由一个导航条组成，导航条有一个无序列表和一个链接。如果这个 HTML 的样式是用 Sass 语法编写的，那么它将如下所示。

 nav
    ul
	margin: 0
	padding: 0
	list-style: none
    li
	display: inline-block
    a
	display: block
	padding: 6px 12px
	text-decoration: none

在上面的 SASS 语法中，可以看到我们使用了缩进来定义块，而不是使用花括号{ }。同样，在 SCSS 语法中，它将如下所示。

 nav {
    ul {
	margin: 0;
	padding: 0;
	list-style: none;
    }
    li {
	display: inline-block;
    }
    a {
	display: block;
	padding: 6px 12px;
	text-decoration: none;
    }
}

在 SCSS 语法中，我们使用花括号，就像在 CSS 中一样。为此生成的 CSS 如下所示:

 nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
nav li {
    display: inline-block;
}
nav a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
}

正如你在上面的例子中看到的，SASS/SCSS 引入了嵌套语法，这种语法更容易理解和编码。这个例子只是为了理解 SASS 和 SCSS 的语法。

翻译

转译是把 SASS/SCSS 代码转换成 CSS 代码的过程。这就像编译一样，但是在编译中，一种人类可读的语言被转换/编译成机器可读的格式，而在编译中，一种人类可读的格式被转换成另一种人类可读的格式，即 SASS/SCSS 到 CSS。

你可以很容易地在网上找到 transpiler 工具，将你的 SASS 代码转换成 CSS。

注意 : SCSS 或 SASS 文件不能直接包含在 HTML 中，需要先经过编译，生成 CSS 代码，然后在 HTML 文件中使用。

为什么要用 SASS/SCSS？

编写 CSS 本身可能很有趣，但是当使用大量 CSS 代码时，很难维护和跟踪不同的模块，而 SCSS 通过引入变量、混合等特性为我们提供了一种解决这些问题的方法。下面提到了 SCSS 的一些好处:

它使用嵌套语法，可读性更强。
它提供了变量的使用，如上面的例子所示。
语法类似于 CSS，因此学习曲线更容易。
函数(mixins) 可以用 SCSS 创建。
也允许继承。

在下一个教程中，我们将学习如何在您的开发机器中设置 SASS，并了解一些重要的入门命令。

SASS 安装和入门

原文：https://www.studytonight.com/sass/installing-sass-and-getting-started

让我们从 SASS 编译器的基本设置开始，用 SCSS 设计网页。

正在安装 SASS/SCSS

有几种方法可以在计算机上设置 Sass。很少有开源应用程序可以帮助你在几分钟内开始工作(或者)你可以使用命令行安装它(或者)你可以在你著名的代码编辑器上设置它，比如 VScode、Atom、崇高等(或者)使用 GitHub 存储库在任何地方安装它。我们只会详细看到一些好的设置选项，比如命令行和T3】VS 代码编辑器 T5。首先，我们将看到命令行界面安装。

1.随处安装(独立)

通过从 Github (1.24.5 是截至 2020 年 1 月 17 日的最新版本)下载操作系统的软件包，然后将其添加到您的PATH环境变量中，您可以轻松地在 Windows、Linux、MacOS 上安装 Sass。像这样的安装是最简单的，因为不需要其他依赖项。你所要做的就是下载这个包，保存在某个地方，然后给它添加PATH变量。

2.使用 NPM 安装

如果您使用 Node.js 或者出于某种原因在您的机器上安装了 NPM(NPM 安装指南，您可以使用以下npm命令来安装 sass 包。打开终端，在那里编写并执行以下命令，

npm install -g sass

这将在您的系统上安装 Sass 编译器。

3.使用自制软件安装(苹果 OSX)

如果你使用的是 MacOS，那么你可以使用自制软件(自制软件安装指南)在你的机器上安装 Sass。您可以使用以下命令使用自制程序安装 Sass，

brew install sass/sass/sass

一旦您在计算机上成功安装了 Sass 命令行界面，您就可以运行以下命令来验证您是否正确安装了它，

sass --version

对于当前版本，您必须获得 1.24.5 作为上述命令的输出。此外，您可以使用 sass - help 命令来获取有关命令行界面的更多信息。

使用命令行界面将 SCSS 转换为 CSS

您可以使用以下命令将您的 SCSS 代码编译成 CSS 代码。

sass source/stylesheets/index.scss build/stylesheets/index.css

在上面的命令中，sass是命令，而源/样式表/索引. scss 是您的源 scss 文件，构建/样式表/索引. css 是存储编译/传输的 css 的目标文件。

使用开源应用程序安装

这些将让你在几分钟内启动并运行，你只需要下载它，然后开始使用它作为任何其他代码编辑器。请查看以下应用程序:

这些是一些免费的，也有一些付费的，但是免费的对于学习和最初的发展目的来说已经足够了。

野蛮人的代码编辑器

这可能是一个更好的选择，因为您可能已经在使用一些著名的代码编辑器。我们将在 VS 代码编辑器和 Atom 代码编辑器中看到设置。VS 代码可能是一个不错的选择，因为它有许多其他功能，如实时服务器、语法高亮等，这些功能非常有用且易于使用。

1.使用 VS 代码进行 Sass

VS 代码中的设置相当简单，因为您在这里需要的只是 live sass 编译器扩展。扩展为您提供了默认情况下在 VS 代码中不存在的额外特性。你也可以写自己的扩展。这里我们只详细看 VS 代码扩展。按照以下步骤进行设置。

打开 VS 代码编辑器。
按下 Ctrl + Shift + x 或编辑器左侧的方形图标打开市场(下图中的最后一个)。
T3】
在搜索栏中搜索 live sass 编译器，当您打开它时，您应该可以看到这个。按下安装按钮安装，就可以开始了。
现在打开扩展名为的文件。scss 并在上面写下你的 scss 代码。你会在底部发现一个小选项，上面写着“看我的野蛮行为”，一旦你点击这个，CSS 地图文件和 CSS 文件将自动生成。您需要将 CSS 文件链接到您的 HTML 代码，而不是 CSS 映射文件。

2.用原子做野蛮人

Atom 编辑器也有一个扩展，即sass-auto mpile像 VS 代码一样，你可以在给定的链接中找到关于设置的所有说明。

结论

有了这个，我们就可以开始使用 SASS 了，我们知道如何将 SCSS 代码转换成 CSS 代码，然后将生成的 CSS 代码转换成我们的 HTML。在接下来的教程中，我们将学习更多关于在 Sass 中编码的知识。

SCSS 语法

原文：https://www.studytonight.com/sass/sass-scss-syntax

正如我们在Sass 介绍教程中学到的，Sass 与 CSS 有何不同，它带来了哪些好处。在本教程中，我们将学习 Sass 的语法，并了解它如何优于传统的 CSS 语法。

文件扩展名

Sass 支持两种不同的文件扩展名，即。SASS和。scss ，一个是针对 SASS 代码，一个是针对 scss 语法。正如我们在介绍教程中已经提到的，从版本 3 开始，Sass 就变成了 Scss，其语法与 css 非常相似，而 Sass 的语法则非常不同。

如果您有一些按照 Sass 语法编写的代码，并且想要将其转换为 Scss 语法，您可以使用 sass-convert 命令来实现。例如，如果我们在 sass-style.sass 文件中有 sass 代码，而对于 scss 代码我们有 scss-style.scss ，我们可以使用以下命令将 Sass 代码转换为 scss 代码，

sass-convert sass-style.sass scss-style.scss

我们也可以用它来将 Scss 代码转换成 Sass 代码。

SCSS 语法

Scss 的语法类似于 css，只是在语法上做了一些改变，这进一步简化了编写复杂 HTML 结构的代码。Scss 还为我们提供了变量、运算符用法、许多现成函数等功能，我们将在接下来的教程中了解它们。在本教程中，我们将只关注在 Scs 中引入的一些重要的语法变化，这些变化在 css 中是不可用的。

1.SCSS 的评论

Scss 支持单行和多行评论，即//和/* */。但是一旦 Scss 或 Sass 文件被编译成 css，那么生成的 CSS 将只保留多行注释而不是单行注释，因为 CSS 不支持单行注释。举个例子吧。

 // Hello
// This is Sass tutorial

/*  This tutorial will help you to understand sass
    completely so that you can straight away apply sass
    in your project and make your project awesome.
*/

// Thank you

.hello-world
{
    background-color:pink;
}

如果我们将上面的 Scss 代码编译成 css，生成的 CSS 将如下所示:

 /*  This tutorial will help you to understand sass
    completely so that you can straight away apply sass
    in your project and make your project awesome.
*/
.hello-world
{
    background-color:pink;
}

2.嵌套规则

在 HTML 中，我们有嵌套和可视化的层次结构。例如，如果我们创建一个列表，我们使用<li>标签在<ul>或<ol>标签内创建列表项。但是 CSS 不支持这样的嵌套语法。因此，如果我们必须用下面的 HTML 代码来设计网页边栏中的列表及其项目的样式，

<div id="sidebar">
    <ul>
        <li>Tutorials</li>
        <li>Q & A Forum</li>
        <li>Flashcards</li>
        <li>Tests</li>
        <li>Collaborate</li>
    </ul>
</div>

我们将编写如下 CSS 代码:

#sidebar {
    float:left;
    width:25%;
    background-color:lightblue;
    padding: 30px 10px;
}

#sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#sidebar li {
    padding: 6px;
    margin-bottom: 10px;
    background-color: #10A2FF;
    color: #ffffff;
}

但是在 Scss 中，我们可以使用嵌套规则以更易读的方式实现这一点，

#sidebar {
    float:left;
    width:25%;
    background-color:lightblue;
    padding: 30px 10px;

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    li {
        padding: 6px;
        margin-bottom: 10px;
        background-color: #10A2FF;
        color: #ffffff;
    }
}

看，比 CSS 好。

3.父选择器

在 Sass 语法中，我们可以使用&符号来表示父类，并定义进一步的嵌套规则。让我们举个例子来理解这一点。考虑下面的 HTML 代码，

<div id="studytonight">
    <div id="studytonight-body">
        /* Some HTML code */
    </div>
</div>

正如我们在上面的嵌套规则示例中所看到的，我们可以使用 Sass 嵌套规则来定义#studytonight和#studytonight-body的样式，但是 Sass 使使用父选择器语法更加容易。

#studytonight {
    // styling for #studytonight div
    &-body {
        // styling for #studytonight-body div
    }
}

当 Sass 代码转换为 CSS 代码时，&符号被编译为父选择器值。当我们必须在主元素中使用类似:hover、:selected等伪选择器时，这就派上了用场。因此，如果您有一个<a>标签，并且想要为鼠标悬停定义样式，您可以在 Sass 中这样做，

a {
    text-decoration: none;
    color:black;
    // using parent selector
    &:hover {
        color:red;
    }
}

这相当于下面的 CSS 代码，

a{ 
    text-decoration: none;
    color:black;
}
a:hover
{
    color:red;
}

4.嵌套属性

在 CSS 中，有许多属性具有与font-weight、font-size、font-family等相同的前缀。在 CSS 中，我们必须键入完整的属性名，以使用它们来设计我们的 HTML 元素。但是 Sass 语法允许我们用这样只声明一次的前缀来定义嵌套属性，

font: {
    family: calibri;
    size: 12px;
    weight: 500;
}

这个 Sass 代码被编译成下面的 CSS，

font-family: calibri;
font-family: 12px;
font-weight: 500;

因此为您节省了一些代码输入。

5.占位符选择器

Scss/Sass 中的占位符选择器或占位符类用于定义样式规则，这些规则本身没有任何意义，但为继承这些规则的类提供了意义。正如我们在入门教程中已经指定的 Sass 支持继承，这就是继承在 Sass 中的工作方式。我们使用%符号定义一个占位符选择器，在其中提供一些样式规则，然后我们可以将这个类继承到其他类中。当我们有一些想要包含在多个样式类中的通用样式代码时，这非常有帮助。

让我们举个例子来理解 Sass 的这个特殊特性。

%card {
    box-sizing: border-box;
    border-top: 1px rgba(#000, .12) solid;
    width: 100%;

    &:hover { border: 2px rgba(#000, .5) solid; }
}

.card-light {
    // inheriting card styling rules
    @extend %card; 
    background-color: #FFFFFF;
    color: #000000;
}

.card-dark {
    // inheriting card styling rules 
    @extend %card; 
    background-color: #000000;
    color: #FFFFFF;
}

上面的代码将被编译成下面的 CSS 代码，

.card-light, .card-dark {
    box-sizing: border-box;
    border-top: 1px rgba(#000, .12) solid;
    width: 100%;

}

.card-light:hover, .card-dark:hover {
    border: 2px rgba(#000, .5) solid;
}

.card-light {
    background-color: #FFFFFF;
    color: #000000;
}

.card-dark {
    background-color: #000000;
    color: #FFFFFF;
}

如果我们不在 Sass 代码中扩展/继承占位符选择器，那么它们将从编译后的 CSS 代码中被省略。

结论:

正如您在上面看到的，Sass 被如此好地定义，以专门减少编写大量 CSS 代码的痛苦，因此通过首先在 Sass 中编写样式代码，然后将其编译成 CSS 代码，开发人员可以非常容易地为他们的网站编写 CSS。这种惊人的语法可以为您节省数百行代码。

在接下来的教程中，我们将学习更多关于 Sass 的内容。

SASS 脚本和表达式

原文：https://www.studytonight.com/sass/sass-script-and-expressions

正如我们已经看到的，Sass/Scss 是如何通过在语法上提供许多新的特性，以变量、内置函数等形式，简化编写 css 代码的整个过程的。尽管除了上述特性之外，Sass 并不是一种成熟的编程语言，但它也支持编写简单的脚本/表达式，当 Sass 代码编译成 CSS 代码时会对这些脚本/表达式进行评估。

当我们说表达式时，我们的意思是简单的算术运算可以使用 SassScript 来执行，我们也可以使用 Sass 中可用的内置函数。我们将了解更多关于操作符、可以在 Sass 代码中使用的各种数据类型以及各种内置函数的信息，这些都将使编写样式表代码的过程变得非常简单。

SASS 表达式

涉及加法、减法、乘法等操作的简单表达式可以在 Sass 代码中使用。例如，

$text-size: 15px;

#normal-text {
    font-size: $text-size;
}

#large-text {
    font-size: $text-size * 1.5;
}

正如您在上面的代码中看到的，我们使用了乘法运算符。

SASS 函数

默认情况下，Sass 中有很多可用的函数，比如我们在 Sass 的入门教程中看到的darken()函数。这些功能提供了现成的方法来执行样式中的某些重要动作，如颜色变暗、颜色变亮、使用rgb()功能创建颜色的 Hexa 代码等。

下面是使用darken()功能使按钮悬停效果的紫色变暗的 Sass 代码示例。

$purple: #6A67CE;
$darkpurple: darken($purple, 15%);

.purple-btn 
{
    text-align: center;
    background-color: $purple;
} 
.purple-btn:hover
{
    background-color: $darkpurple;
}

结论:

在本教程中，我们看到了 Sass 与 CSS 的不同之处，它更像是一种编程或脚本语言，因为您可以编写大量的动态代码，并将其编译成 CSS。

SASS 变量

原文：https://www.studytonight.com/sass/sass-variables

Sass/Scss Variable 是 Scss 的特性之一，使得编写 CSS 样式更加动态。在 Scss 中，我们可以使用$符号声明和定义变量，命名变量，然后为变量提供值。

让我们看一下在 Scss 中定义变量的语法:

$variable-name: variable value

变量声明以$开始，随后是变量名，然后是一个冒号 ( :)符号，最后是变量的值。就像任何其他脚本或编程语言中的变量一样，在 Scss 中也是如此，变量保存的值可以在整个样式表中使用。

定义默认值的变量

我们可以使用 SASS 变量来定义默认值。

例如，在 Studytonight 的网站上，我们对一些特殊的文本、按钮和一些背景使用紫色和橙色。当我们使用 CSS 时，我们必须在任何地方使用 Hexa 代码来表示颜色，但是使用 Sass，我们可以定义一个变量，然后在任何我们想要的地方使用变量名。让我们举个例子，

// define the variable
$purple: #6A67CE;

.purple-btn
{
	text-align: center;
	background-color: $purple;
}
.purple-text
{
	color: $purple;
}

在 Sass/Scss 中定义和使用变量的一个更重要的点是，如果你定义了一个名字带有连字符或下划线的变量，可以互换使用。例如，

// define the variable
$purple-color: #6A67CE; 
.purple-btn 
{ 
    text-align: center; 
    background-color: $purple-color; 
} 
.purple-text 
{ 
    color: $purple_color;
}

在上面的代码中$purple-color和$purple_color将返回相同的值 #6A67CE ，因此连字符和下划线在变量名中被视为相同。

在 Scss 变量中存储什么？为什么？

好吧，随便你。它就像一个正态变量。无论你经常使用什么，比如颜色的 Hexa 代码或者某种特定的字体样式等等，都可以在一个地方定义为变量，然后在样式表中反复使用。

此外，使用变量的另一个好处是，如果您想要更改某些 Hexa 颜色的值，您不必处处更改该值，您只需要在一个地方更改该值。

Rest，这是你的选择，你可以定义任意多个变量，并在你的 Scss 代码中使用它们。

Scss 变量的范围(隐藏)

就像其他编程/脚本语言一样，Scs 中的变量也有作用域。为了理解 scope 是如何工作的，让我们举个例子，

// define the variable
$purple: #6A67CE;

.purple-btn 
{ 
    text-align: center; 
    // re-defining the variable
    $purple: red;
    background-color: $purple; 
} 
.purple-text 
{ 
    color: $purple; 
}

上面的代码将编译成下面的 CSS 代码，

.purple-btn
{
    text-align: center;
    background-color: red;
}
.purple-text
{
    color: #6A67CE;
}

可以看到.purple-btn样式类里面的变量$purple的值是红色而不是 #6A67CE ，这是变量范围的结果。

`!global`开关

您可以使用!global开关在范围内定义全局变量。但是不建议这样做，因为使用！从任何选择器中定义全局变量的全局开关将改变整个样式表的变量值。让我们举个例子。

// define the variable
$purple: #6A67CE;

.purple-btn 
{ 
    text-align: center; 
    // re-defining the variable
    $purple: red !global;
    background-color: $purple; 
} 
.purple-text 
{ 
    color: $purple; 
}

上面的代码将编译成下面的 CSS 代码，

.purple-btn
{
    text-align: center;
    background-color: red;
}
.purple-text
{
    color: red;
}

正如您在上面的代码中看到的，使用!global开关，我们可以更改整个样式表的变量值。

SASS 支持的值类型

原文：https://www.studytonight.com/sass/sass-supported-value-types

SASS 支持在样式表中定义样式规则时使用的不同值类型。SASS/SCSS 中支持的大多数值类型都直接来自 CSS。

理解值类型非常重要，因为所有变量都保存值，所有表达式都计算值，所有运算符都对值进行操作，因此在本教程中，我们将介绍 SASS/SCSS 支持的所有值类型。

以下是 SASS/SCSS 支持的值类型:

民数记
用线串
彩色
布尔值
空值
值列表
地图

让我们为每种值类型举几个例子，以了解它们在何时何地被使用。

SASS 号码

SASS 数字是有或没有单位的数值。SASS 支持 CSS 中支持的所有单元。

这里有几个例子，

@debug 100; /* 100 */
@debug 0.8; /* 0.8 */
@debug 16px; /* 16px */

安全系统编号:单位

SASS 在对相似单元执行任何操作时，会自动对它们执行转换。此外，如果我们对不同单位或相同单位的两个数字进行乘法或除法运算，也会对它们的单位进行运算，因此px * px变成 px 平方。

让我们举个例子:

@debug 4px * 6px; /* 24px*px (read "square pixels") */
@debug 5px / 2s; /* 2.5px/s (read "pixels per second") */

另外，如上所述在兼容单元上执行操作时，SASS 会自动将其覆盖，对于不兼容版本，SASS 会给出错误。

/* CSS defines one inch as 96 pixels. */
@debug 1in + 6px; /* 102px or 1.0625in */

@debug 1in + 1s;

/*     ^^^^^^^^
* Error: Incompatible units s and in.
*/

SASS 字符串

SASS 字符串只不过是一个字符序列。SASS 支持带引号的字符串，它只不过是用单引号或双引号括起来的字符序列，以及不带引号的字符串，它们是 CSS 标识符，如粗体等。

让我们举几个例子，

@debug "Helvetica Neue"; /* "Helvetica Neue" */
@debug bold; /* bold */

要逃离任何字符串，我们可以使用\ 符号。例如，

@debug "\""; /* '"' */
@debug \.widget; /* \.widget - dot symbol escaped */

色彩

就像 CSS 一样，在 SASS/SCSS 的样式表中也有很多不同的颜色表示方式。Sass 颜色可以写成十六进制代码(#f2ece4或#b37399aa)、 CSS 颜色名称 ( midnightblue、transparent)或函数rgb()、rgba()、hsl()和hsla()。

让我们举几个例子，

@debug #f2ece4; /* #f2ece4 */
@debug #b37399aa; /* rgba(179, 115, 153, 67%) */
@debug midnightblue; /* #191970 */
@debug rgb(204, 102, 153); /* #c69 */
@debug rgba(107, 113, 127, 0.8); /* rgba(107, 113, 127, 0.8) */
@debug hsl(228, 7%, 86%); /* #dadbdf */
@debug hsla(20, 20%, 85%, 0.7); /* rgb(225, 215, 210, 0.7) */

SASS 布尔:`true`和`false`

SASS 布尔值是逻辑值true和false。这些通常是使用等式或关系运算符的结果。让我们举几个例子，

@debug 1px == 2px; /* false */
@debug 1px == 1px; /* true */
@debug 10px < 3px; /* false */

SASS 布尔值在编写用于 @if和@else AT 规则 s 的表达式时非常有用，用于根据条件控制控制流。

SASS `null`

值null是其类型的唯一值。它表示缺少一个值，通常由函数返回，表示缺少一个结果。例如，

@debug &; /* null */

SASS 列表

是的，SASS 支持列表，也提供了遍历这些列表的 AT 规则，比如@for``@each和@while AT 规则 s 。存储在列表中的值应该是由逗号或空格隔开的只要它们是一致的。

您可以通过将值括在方括号甚至不带方括号的中来定义列表。

一个 SASS 列表可以有零个值、一个值或多个值。此外，SASS 中的列表是不可变的，这意味着一旦定义它们就永远不会改变值，每次您改变任何值，都会创建一个新的列表。

定义混合或函数时，可以定义列表是参数。

让我们举个例子:

$listvar: 1, 2, 3;

/* using square barackets */

$sides: ["left", "right", "top", "bottom"];

SASS 地图

SASS 映射保存键值对，在这里可以使用键访问值。以下是在 SASS 中创建地图的语法:

(<expression>: <expression>, <expression>: <expression>)

:之前的表达式是键，之后的表达式是与该键关联的值。键必须是唯一的，但是值可以是重复的。

此外，定义地图需要括号()。要定义一个空地图，我们使用()。

SASS 地图也是不可变的。

让我们举个例子，

$font-weights: ("regular": 400, "medium": 500, "bold": 700);

这些是 SASS/SCSS 支持的各种不同的值类型，您可以在编写带有 mixins、函数、流控制和循环的动态样式表时使用它们。用 SASS 可以做的事情太多了。

SASS/SCSS 运算符

原文：https://www.studytonight.com/sass/sassscss-operators

SASS 为我们提供了一组运算符，范围从+(加法)、-(减法)、/(除法)等数学运算，以及各种其他类型的运算符，如==(相等)、!=(不相等)、and运算符、or运算符等。SASS 有一个相当标准的操作顺序，从最紧到最松。

通过为我们提供对 SASS 操作符的访问，SASS 使编写 CSS 规则变得很有趣，使用这些操作符，我们可以生成一个动态样式规则。如上所述，这些操作符的执行顺序是标准的，但是让我们举几个例子来理解同样的顺序。

@debug 1 + 2 * 3 == 1 + (2 * 3)  // true
@debug true or false and false == true or (false and false)  // true

不要担心@debug规则，它只是用来查看任何表达式的最终值，以便在没有获得所需输出的情况下进行调试。

如你所见，在表达式中使用数学运算符时，遵循了 BODMAS 的简单规则。在 SASS 中使用运算符时，我们也可以使用括号来构造任何表达式。括号内定义的操作总是在外部操作之前计算，例如:

@debug (1 + 2) * 3  // 6
@debug ((1 + 2) * 3 + 4) * 5  // 65

现在我们已经了解了运算符是如何评估的，让我们深入了解一下 SASS 中可用的各种不同类型的运算符。

SASS 操作员

以下是 SASS 中可用的运算符类型。

数学运算符
等式运算符
关系运算符
字符串运算符
布尔运算符

我们将逐一介绍它们，列出所有操作符以及一些示例。

数学算子

SASS 支持执行基本数学运算所需的所有数学运算符。

经营者	用法和说明
`+`	`<expression> + <expression>`，将第一个表达式的值与第二个表达式相加。
`-`	`<expression> - <expression>`，从第一个表达式中减去第二个表达式的值。
`/`	`<expression> / <expression>`，第一个表达式的值除以第二个表达式的值。
`*`	`<expression> * <expression>`，将第一个表达式的值乘以第二个表达式的值。
`%`	这是模运算符。`<expression> % <expression>`，返回第一个表达式的值除以第二个表达式的值的余数。

让我们举几个例子:

@debug 10s + 15s  // 25s
@debug 1in - 10px  // 0.8958333333in
@debug 5px * 3px  // 15px*px
@debug (12px/4px)  // 3
@debug 1in % 9px  // 0.0625in

我们也可以用普通数字和任意单位的数字像这样:

@debug 50px + 50  // 100px
@debug 12px * 10  // 120px

在 SASS 中，数学运算符用于对 SASS 中使用的所有数据单元执行运算，如 px 、中的等，以及颜色 Hexa 代码，因此如果您对两个颜色 Hexa 代码执行任何数学运算，它将产生一些其他 Hexa 代码。此外，我们也可以使用-运算符来定义负值，如 -5px 等(确保-运算符和数字之间没有空格，如果代表负值。)

此外，除了基本操作之外，+、-和/运算符也用于 SASS 中的字符串连接。

数学运算符示例:

让我们看几个例子来了解这些运算符的用法。以下示例使用加法、减法、乘法和除法运算符。

.main-division{
    margin: 100px + 200px;
    padding: 1000px / 100px - 10px;
    height: 5px * 3px;
    width: 1in % 9px;
}

同样的，加法也可以用于 Hexa 色码，

.main-division{
    background-color: #111100+#001111;
}

在编译之后，结果 CSS 将是，

.main-division{
    background-color: #112211;
}

2.等式运算符

SASS 支持两个相等运算符，即等于和不等于。在下表中，我们列出了 SASS 中可用的两个等式运算符:

经营者	用法和说明
`==`	等于。`<expression> == <expression>`，返回第一个表达式的值是否等于第二个表达式的值。
`!=`	不等于。`<expression> != <expression>`，返回第一个表达式的值是否不等于第二个表达式的值。

运算符对于不同类型的值有不同的行为。所以要谨慎使用。

如果你在比较两个数字，那么如果它们具有相同的值和相同的单位或数据类型，那么它们是相等的。对于不同的单位，如果可能，SASS 会自动执行转换。
如果颜色具有相同的红、绿、蓝和阿尔法值，则它们是相等的。
true、false、null数据单元只等于自己。
类似的规则也适用于复杂类型，如列表和地图。所有存在于其中的值都被一个接一个地与值和单位进行比较。

让我们举个例子来看看 SASS 等式运算符的用法:

@debug 1px == 1px  // true
@debug 1px != 1em  // true
@debug 1 != 1px  // true
@debug 96px == 1in  // true. SASS performs automatic conversion

3.关系运算符

SASS 支持以下关系运算符:

经营者	用法和说明
`<`	`<expression> < <expression>`，返回第一个表达式的值是否小于第二个表达式的值。
`>`	`<expression> > <expression>`，返回第一个表达式的值是否大于第二个表达式的值。
`<=`	`<expression> <= <expression>`，返回第一个表达式的值是否小于等于第二个表达式的值。
`>=`	`<expression> >= <expression>`，返回第一个表达式的值是否大于等于第二个表达式的值。

让我们看几个使用 SASS 关系运算符的例子:

@debug 10 > 5  // true
@debug 11px < 21px  // true
@debug 96px >= 1in  // true
@debug 10px < 17  // true

4.字符串运算符-字符串连接

SASS 中没有执行字符串操作的特殊运算符。当与字符串一起使用时，数学运算符+、-和/执行字符串运算。

<expression> + <expression>返回包含两个表达式值的字符串。如果其中一个值是带引号的字符串，则结果将被加上引号；否则，它将被取消引用。
<expression> / <expression>返回包含两个表达式值的不带引号的字符串，用/分隔。
<expression> - <expression>返回包含两个表达式值的不带引号的字符串，用-分隔。这是一个遗留操作符，但仍然有效。

让我们举几个例子，

font-family: "Arial" + " Helvetica" + " sans-serif";  // output will be Arial, Helvetica, sans-serif

font-size: 10px / 5px;   // output will be 10px/5px and not 2 px

font-family: sans-+serif;   // output will be sans-serif

font-family: sans - serif;   // output will be sans-serif

5.逻辑运算符

逻辑运算符如and、or、not在 SASS 中也有。

not <expression>返回所提供表达式的否定或相反值。
如果左表达式和右表达式的值都是true，则<expression> and <expression>返回true，如果其中一个是false，则返回false。
*** 如果**表达式的值为true，则<expression> or <expression>返回true，如果两者都为false，则返回false****

****下面给出的示例显示了这些运算符的用法:

@debug not true; // false

@debug not false; // true

@debug true and true; // true

@debug true and false; // false

@debug true or false; // true

@debug false or false; // false

因此，在本教程中，我们了解了各种 SASS 运算符。您可以使用不同的 SASS 操作符来编写动态 CSS 规则，并使您的样式规则更加实用。

SASS 插值

原文：https://www.studytonight.com/sass/sass-interpolation

SASS 插值是一种将任何 SASS 脚本表达式的结果包含到样式表中的技术。这可用于定义 SCSS 风格代码中的任何风格规则属性、动态变量名、动态函数名等。

SASS 插值:语法

为了在样式表中包含表达式的结果或变量值，我们使用插值技术，

/* syntax for interpolation */
#{}
/* anything inside will be evaluated */

SASS 插值:示例

让我们举几个例子来看看它的用法。

@mixin corner-icon($name) {
  /* using interpolation */
  .icon-#{$name} {
    background-image: url("/icons/#{$name}.svg");
  }
}

/* calling the above mixin */
@include corner-icon("mail");

这将被编译成下面的 CSS 代码，

.icon-mail {
  background-image: url("/icons/mail.svg");
}

正如我们在上面的例子中所看到的，在样式表中使用#{$name}的地方都会添加$name变量的值。

不要担心混搭和包含 AT 规则，我们将在接下来的教程中介绍它们。

结论:

我们可以使用这种技术来使我们的样式表更加动态，并使用 SASS/SCSS 的能力来编写更少的代码，这些代码可以评估为更多的 CSS 代码。

SASS 中的自动测试规则

SASS AT 规则

原文：<https://www.studytonight.com/sass/sass-AT 规则 s>

SASS At-Rules 或@规则提供了 SASS 提供的大部分额外功能，比如定义函数和，然后在 CSS 中使用它们、使用循环、流控制等等。

有不同类型的 At 规则有一个前缀@，其中 SASS 中可用的每个 At 规则都有一个特殊的目的，这使得编写复杂的样式规则变得更加有趣和容易。

如果你想定义一个函数，或者使用条件语句或者在你的样式代码中使用一个循环，或者如果你只是想调试样式代码，使用这些@规则，我们可以很容易地做到这一切，因为在 SASS 中有特定的@规则可以提供所有这些功能。

以下是 SASS 中可用的@规则:

@use
@forward
@import
@mixin和@include
@function
@if、@else和@elseif
@for
@each
@while
@extend
@at-root
@error
@warn
@debug
@media

在接下来的教程中，我们将通过代码示例介绍所有这些 SASS 规则。

SASS `@mixin`和`@include`

原文：https://www.studytonight.com/sass/sass-mixins-and-include

SASS Mixins 是用于定义可以在整个样式表中重用的样式的函数，从而允许您编写可重用的样式规则。

写一次，用一次又一次。

这些和我们在其他编程语言中使用的函数是一样的，比如 C、C++、JavaScript 等等。您需要编写这些带有一些样式规则的混搭，然后您可以在样式表的其他地方多次重用它。您可以使用@mixin AT 规则创建混搭。

`@mixin`at-规则的语法

以下是使用@mixin AT 规则定义 SASS 混合的语法:

@mixin <name> { 
    // styling rules
} 

// or 

@mixin name(<arguments...>) { 
    // styling rules
}

SASS mixin 可以有任何名称，您可以在其中包含任何有效的样式语句，就像函数定义一样。【SASS mixin 也带参数，我们将在本教程后面介绍关于 SASS mixin 的参数。

使用带有`@include` AT 规则的混合:

为了使用使用@mixinat-规则定义的混合，我们使用@includeat-规则。以下是使用@include AT 规则来使用预定义的 SASS 混合的语法:

@include <name> 

// or 

@include <name>(<arguments...>)

其中名称是 mixin 的名称，参数指定 mixin 接受的参数。

让我们举一个简单的例子，了解一下在 SASS 中@mixin和@include AT 规则的用法。下面我们有一个 SASS 代码，其中我们定义了一个 mixin 基本列表，和另一个 mixin 内联列表。我们已经使用@include AT 规则在任何需要的地方调用预定义的混搭。

// defining a mixin
@mixin basic-list
  margin: 0
  padding: 0
  list-style: none

// using a mixin inside another mixin
@mixin inline-list
  @include basic-list

  li
    display: inline-block
    margin:
      left: -2px
      right: 2em

// calling a mixin in simple style rule
nav ul
  @include inline-list

上面的 SASS 代码将被编译成下面的 CSS 代码:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav ul li {
  display: inline-block;
  margin-left: -2px;
  margin-right: 2em;
}

注: 在 SASS mixins 中，-(连字符)和_(下划线)被视为相同，这意味着基本列表和基本列表都可以用来调用基本列表 mixin 。

带参数的混合

SASS mixin 支持参数，因此您可以在调用任何 mixin 时使用它们的不同值来自定义样式规则。让我们举一个例子来定义和使用带有一些参数的 mixin。

@mixin customtextstyle($color, $size)
  color: $color
  font-size: $size
  font-weight: 400

.sidebar
  @include customtextstyle(#999999, 16px)

这将被编译成以下 CSS 代码:

.sidebar {
  color: #999999;
  font-size: 16px;
  font-weight: 400
}

混合-参数的默认值

我们可以在定义混合时为参数提供默认值，这样即使用户没有为参数提供值，也会使用默认值。让我们修改上面的 SASS 代码，为customtextstyle混合中使用的参数提供默认值。

@mixin customtextstyle($color, $size:12px)
  color: $color
  font-size: $size
  font-weight: 400

.left-sidebar
  @include customtextstyle(#999999, 16px)

.right-sidebar
  @include customtextstyle(blue)

上面的 SASS 代码将被编译成下面的 CSS 代码:

.left-sidebar {
  color: #999999;
  font-size: 16px;
  font-weight: 400
}

.right-sidebar {
  color: blue;
  font-size: 12px;
  font-weight: 400
}

从上面的 CSS 代码中可以看到，在 CSS 类.right-sidebar中，字号属性采用了我们在定义 mixin 时提供的默认值(12px) 。

关键字参数

在调用 SASS mixin 时，我们通常按照定义 mixin 时的相同顺序提供参数。但是我们也可以在调用 mixin 时按名称传递参数值。让我们举一个简单的例子，看看这是如何实现的。

这是我们的 SASS 代码，

@mixin customtextstyle($color, $size : 12px)
  color: $color
  font-size: $size
  font-weight: 400

// calling mixin by providing argument with name
.sidebar
  @include customtextstyle(#999999, $size : 16px)

它将像第一个例子一样被编译成 CSS。这里唯一的区别是，在调用 mixin 时，我们提供了参数的值和名称，这使得代码更易读。

注:名称应与 mixin 定义中的定义相同。因此，在更新 mixin 时要小心，如果更改参数的名称，可能会破坏代码。

任意参数

SASS mixin 还支持任意参数，这意味着 mixin 在被调用时可以接受任意数量的参数。如果 mixin 声明中的最后一个参数以...(三个点)结束，那么调用 mixin 时传递的所有额外参数都作为列表传递到最后一个参数中。

让我们举个例子来理解这一点。(在本例中，我们将使用@for AT 规则在值列表中循环)

@mixin custom-input($height, $selectors...)
  @for $i from 0 to length($selectors)
    #{nth($selectors, $i + 1)}
      padding: 10px
      height: $height
      // generating different border-radius for all
      border-radius: i*5px

@include custom-input(10px, "input.name", "input.address", "input.zip")

上面的代码被编译成下面的 CSS 代码:

input.name {
  padding: 10px;
  height: 10px;
  border-radius: 5px;
}

input.address {
  padding: 10px;
  height: 10px;
  border-radius: 10px;
}

input.zip {
  padding: 10px;
  height: 10px;
  border-radius: 15px;
}

SASS @mixin 和@include 示例:

假设你想使用框阴影属性给 div 元素提供一些阴影，那么我们可以编写如下所示的 CSS。四行要设置 16 个变量的 CSS 代码，为了阴影效果添加不同规格的多个 div 元素会变得非常无聊。好吧，SASS mixins 正是把你从这种多余又无聊的工作中拯救出来的合适人选。

div
{
	-webkit-box-shadow: 0px 0px 4px #fff;
	-moz-box-shadow: 0px 0px 4px #fff;
	-ms-box-shadow: 0px 0px 4px #fff;
	box-shadow: 0px 0px 4px #fff;
}

对于上面的 CSS ，可以编写如下的 mixins:

@mixin box-shadow($x, $y, $blur_value, $color)
{
	-webkit-box-shadow: $x, $y, $blur_value, $color;
	-moz-box-shadow: $x, $y, $blur_value, $color;
	-ms-box-shadow: $x, $y, $blur_value, $color;
	box-shadow: $x, $y, $blur_value, $color;
}

现在这个 mixin 将作为一个函数，它的名字是盒子阴影，我们所要做的就是通过为阴影效果提供 4 个值来调用它。为了在样式表中的任何地方使用这些混合，我们使用关键字@include后跟混合名称。现在假设我们在样式表中使用上面创建的 mixin，它看起来如下:

div 
{
    @include box-shadow(0px, 0px, 4px, #fff);
}

请注意，在上面的例子中，我们在 mixins 中传递参数，就像在其他编程语言的函数中一样。

因此，在本教程中，我们学习了所有关于 SASS mixins 的知识，以及如何在我们的 CSS 中随意调用它们。使用 SASS mixins 帮助我们保持我们的 CSS 代码干净，并编写可重用的样式规则。

SASS `@use`规则

原文：https://www.studytonight.com/sass/sass-use-atrule

SASS @use AT 规则用于在样式表中加载其他样式表中定义的混合、函数和变量。在引入@use AT 规则之前，SASS @import AT 规则是用于此目的的。使用 SASS@useat-规则使我们能够将样式表分成多个有意义的小样式表，然后使用 SASS@useat-规则在彼此中使用它们。

我们可以在单独的样式表文件中定义 SASS 混合和函数，在单独的样式表文件中定义带有默认值的变量，然后在主样式表中，我们可以使用 SASS @use AT 规则来使用其他样式表中定义的混合、函数和变量等。

包含的样式表被称为模块

SASS `@use`:语法

以下是使用@use AT 规则的语法:

@use '<URL for other stylesheet>'

例如，如果我们有一个名为的样式表，那么我们可以使用下面的语句将它包含在我们的样式表中，

@use 'mixinstyle.sass'

这里需要注意几点:

当我们使用@use AT 规则在另一个样式表中包含一个样式表时，样式规则将在编译后的 CSS 中只包含一次。
@use语句应该是样式表中的第一条语句。在@use语句之前可以有@forward AT 规则或变量声明。但在此之前不应指定任何样式规则。

让我们举个例子，

// style/columns.sass
row
  margin: 0 auto
  line-height: 0

col-12
  width: 100%

// styles/textstyle.sass

h1
  font-size: 36px

p 
  font-size: 14px

// main.sass
@use 'style/columns'
@use 'style/textstyle'

SASS `@use`:命名空间

当我们使用@useat-规则将一些样式表包含到样式表中时，包含的样式表的名称(文件名)作为没有扩展名的名称空间。

要使用@use AT 规则从样式表中包含的另一个样式表(模块)访问变量、混合和函数，我们必须遵循以下语法:

<namespace>.<variable> 
/* or  */
<namespace>.<function>()
/* or  */
@include <namespace>.<mixin>()

其中 <命名空间> 是命名空间，也就是包含的样式表的文件名。

例如，如果我们有以下名称为 round.sass 的样式表，

/* css/round.sass   */
$radius: 3px

@mixin rounded
  border-radius: $radius

我们可以在主样式表中包含上面的样式表，

/* style.sass */
@use "css/round"

.button
  @include round.rounded
  padding: 5px + round.$radius

上述代码将被编译成以下 CSS 代码:

.button {
  border-radius: 3px;
  padding: 8px;
}

在下一节中，我们将学习如何为包含的样式表提供自定义命名空间。

提供自定义命名空间

当使用@use AT 规则将任何外部样式表包含到样式表中时，我们也可以提供一个自定义名称空间。以下是提供自定义命名空间的语法:

@use "<url>" as <namespace>

如果我们必须在 round.sass 样式表中包含一些自定义名称空间，我们可以按如下方式进行:

/* style.sass */
@use "css/round" as r

.button
  @include r.rounded
  padding: 5px + r.$radius

什么是偏分？

如果我们定义一个名称以下划线 ( _)开头的样式表，那么在 SASS 中这样的文件被称为 Partials ，这意味着这些文件本身没有任何意义，不应该被编译。Partials 仅用于包含在使用@use AT 规则的其他样式表中。

让我们举个例子，试着理解这一点。

例如，如果我们有以下名称为 _round.sass 的样式表，那么这个样式表将不会被编译，只能包含在其他样式表中。

/* css/_round.sass   */
$radius: 3px

@mixin rounded
  border-radius: $radius

我们可以在主样式表中包含上面的样式表，

/* style.sass */
@use "css/_round"

.button
  @include round.rounded
  padding: 5px + round.$radius

使用:索引文件

如果我们将样式表命名为 index.sass 或 _index.sass(在 Partials 的情况下)，那么只需用@use AT 规则指定文件夹的名称，就可以包含 index.sass 或 _index.sass 样式表。这是 SASS 的默认行为。如果只提供文件夹名称，它会将文件夹中的 index.sass 或 _index.sass 文件作为默认样式表。

例如，如果我们在 css 文件夹中有以下名称为 _index.sass 的样式表。

/* css/_round.sass   */
$radius: 3px

@mixin rounded
  border-radius: $radius

我们可以将上面的样式表包含在我们的主样式表中，甚至不需要提供样式表的名称，只需提供文件夹名称就足够了，

/* style.sass */
@use "css"

.button
  @include round.rounded
  padding: 5px + round.$radius

这是来自于野蛮行为规则。

SASS `@forward`规则

原文：https://www.studytonight.com/sass/sass-forward-atrule

SASS @forward AT 规则用于在样式表包含在另一个样式表中时，使用@use AT 规则公开样式表中包含的模块(样式表)的成员。

让我们举个例子来理解这一点。如果我们有一个样式表 _padding.sass ，它包含了用于填充的所有样式规则(混合、变量等)，并且我们使用@useat-规则将它包含在我们的样式表 style.sass 中。现在，如果我们必须创建另一个样式表，比如说 newstyle.sass ，我们使用@useat-规则在这个样式表中包含 style.sass ，那么我们将无法访问 newstyle.sass 样式表中的 _padding.sass 样式表的成员。

SASS @forward AT 规则

因此，如果我们希望样式表 _padding.sass 的成员可以在 newstyle.sass 文件中访问，我们应该使用 SASS@forwardat-规则来导入 style.sass 文件中的 _padding.sass 样式表。

@forwardat-规则将使 _padding.sass 文件的成员在 style.sass 文件中可用，就像它们是在 style.sass 文件中定义的一样，因此如果任何其他样式表将包含 style.sass 文件，使用@useat-规则，也将能够访问 _padding.sass 文件的成员。

SASS `@forward`:语法

@forwardat-规则的语法与@useat-规则相同。

@forward 'URL-OF-STYLESHEET'

如果我们使用@forwardat-规则，我们可以跳过使用@useat-规则。我们也可以同时使用@use和@forward AT 规则来包含一个样式表，因为 SASS 引擎只会包含它一次。

工作

SASS @forward AT 规则也像@use AT 规则一样工作，将一个样式表的成员包含到另一个样式表中。但是@use AT 规则隐藏了包含样式表的成员，不允许进一步导入，但是@forward AT 规则通过使您能够形成样式表导入的层次结构，使包含样式表也可用于进一步导入。

如果你同时写了@forward和@use AT 规则，你应该先写@forward AT 规则，然后写@use AT 规则。

让我们举个例子，看看这是如何在 SASS 中使用的:

/* style/_list.sass */

@mixin list-style
  margin: 0
  padding: 0
  list-style: none

/* main.sass */

@forward "src/list"

/* styles.sass */
@use "main"

li
  @include main.list-style

这将被编译成以下 CSS:

li {
  margin: 0;
  padding: 0;
  list-style: none;
}

要检查@forward和@use AT 规则之间的区别，请尝试将 main.sass 文件中的@forward "src/list"语句更改为@use "src/list"，然后编译 CSS，您将看到样式规则不会被导入。

SASS `@forward`:命名空间和添加前缀

我们知道，当一个样式表包含在另一个样式表中时，SASS 会创建一个名称空间，即样式表的文件名，我们已经在 SASS @use AT 规则中详细介绍了这一点。现在，我想到了几个问题:

使用@forwardat-规则包含的模块(样式表)的名称空间是什么？
它是否与包含它的样式表的命名空间相同？
我们对此有什么控制吗？

正如我们在上面的例子中看到的，是的，使用@forward模块包含的文件将使用与包含它的样式表相同的名称空间来访问，因为@forwardat-规则使正在导入的模块的成员成为导入它的样式表的成员。

在上面的代码示例中，我们在 main.sass 中导入了 _list.sass 文件，该文件随后被导入到style . sass中，其中我们使用主命名空间访问了 _list.sass 文件的成员，因为 _list.sass 文件是使用@forward AT 规则导入到 main.sass 文件中的。

但是，我们可以使用@forwardat-规则为导入的模块的所有成员名称添加前缀。以下是添加前缀的语法:

@forward "<url>" as <prefix>-*

让我们修改上面的例子，在导入 _list.sass 文件时使用前缀。

/* style/_list.sass */

@mixin stylish
  margin: 0
  padding: 0
  list-style: none

/* main.sass */

@forward "src/list" as list-*

这会将前缀列表- 添加到样式表 _list.sass 的所有成员(所有混合、变量、函数等)的名称中。

/* styles.sass */
@use "main"

/* name of mixin is stylish but now we will call it as list-stylish */
li
  @include main.list-stylish

这将被编译成以下 CSS:

li {
  margin: 0;
  padding: 0;
  list-style: none;
}

向前:控制可见性

在将一个模块(样式表)导入到另一个样式表中时，我们可以使用@forward AT 规则语句中的hide和show关键字以及成员名称来控制在连续导入中所有成员应该进一步可用的内容。

以下是它的语法:

@forward "<url>" hide <members...> 
/*  or  */ 
@forward "<url>" show <members...>

下面我们有一个样式表 _button.sass ，

/* css/_button.sass */ 

$btn-font: sans-serif

@mixin btn
    padding: 10px
    border-radius: 5px
    text-decoration: none

@mixin btn-success
    @include btn
    background-color: green

为了从上面的样式表中隐藏一些混合和变量，

/* main.sass */

@forward "css/button" hide btn, $btn-font

所以，这就是 SASS @forward AT 规则。

SASS `@function`规则

原文：https://www.studytonight.com/sass/sass-function-atrule

SASS @function AT 规则用于定义具有复杂操作****的函数，接受参数并返回结果。SASS 函数用于声明复杂的公式和行为，然后可以在整个样式表中使用。

**## SASS @function:语法和@returnat-规则

SASS 函数是使用@函数 AT 规则定义的。以下是语法，

@function <name>(<arguments...>) { ... }

与 SASS mixins 不同，SASS 函数必须有一个返回语句，该语句是使用@returnat-规则指定的，用于返回函数调用的结果。

所以整个语法是这样的，

@function <name>(<arguments...>) {
    // function definition
    @return <somevalue>
}

@return AT 规则只能在函数定义中使用，函数的执行在遇到@return语句时结束，用@return AT 规则指定的函数结果返回给调用语句。

带参数的函数

就像我们可以在 SASS mixins 中提供参数一样，我们也可以在定义 SASS 函数时这样做。

让我们定义一个简单的函数，将提供给它的两个参数相加，并返回相加的结果。

@function add($var1, $var2) {
    $var3 : $var1 + $var2;
    @return $var3;
}

这个函数可以在样式表中使用正常的 CSS 函数语法，如下所示，

div{
    height: add(300, 400) * 1px;
}

正如您在上面的 CSS 代码中看到的，我们必须在调用函数时为参数指定值。

函数-带默认值的参数

我们还可以在定义函数时设置参数的默认值，这样如果用户没有传递任何值，就会使用参数的默认值。让我们修改上面使用的同一个例子:

@function add($var1, $var2: 400) {
    $var3 : $var1 + $var2;
    @return $var3;
}

在调用函数时，我们可以传递一个或两个参数。如果传递了一个参数，则其他参数将采用默认值。如果在调用函数时传递了这两个参数，那么函数调用时提供的值将覆盖 defualt 值。

div {
    height: add(300) * 1px;
}

关键字参数

在调用函数时，我们可以提供参数的值以及函数定义中指定的参数名称。因此，除了按顺序或数量传递参数，还可以按名称传递参数。

让我们看看如何调用上面定义的add函数，方法是在调用函数时提供关键字参数。

div {
    height: add($var2: 300, $var1: 400) * 1px;
}

SASS 函数-接受任意参数

有时我们需要在不同的场景中向一个函数传递不同数量的参数。对于这种情况，我们可以定义我们的函数接受任意数量的参数，这可以用我们在 mixins 中看到的相同方式来完成，即当最后一个参数以三个点 (ex: $abc...)结束时，这被称为参数列表。因此，当调用这个函数时，在函数调用时提供的所有参数都可以在函数参数中作为值列表使用，然后可以在函数中使用。

让我们举个例子，

@function min($numbers...) {
    $min: null;
    @each $number in $numbers {
        @if $min == null or $number < $min {
            $min: $number;
        }
    }
    @return $min;
}

.micro {
    width: min(50px, 30px, 100px);
}

因此，在本教程中，我们了解了 SASS 函数，并涵盖了各种不同的示例，在这些示例中，我们传递了参数、带有默认值的参数以及任意数量的参数。

SASS `@extend`规则的继承

原文：https://www.studytonight.com/sass/sass-extend-atrule-sass-inheritance

SASS @extend AT 规则允许在样式表中继承样式规则。如果您希望在样式表中用另一个类的所有样式规则以及它自己特定的样式规则来定义一个类，我们可以使用 SASS @extend AT 规则。

SASS @extend AT 规则将让你在另一个选择器中使用一个选择器的 CSS 属性。

SASS `@extend`:语法

要使用@extend AT 规则，我们应该遵循以下语法:

@extend <selector>

让我们举一个简单的 SASS 例子，试着理解它的用法。

让我们为错误、警告和成功消息编写一些样式规则。下面写的课。message-shared保存基本的样式规则，然后是。消息，。成功。错误和。警告

.message-shared 
{
	border: 1px solid #ccc
	padding: 10px
	color: #333
}

现在让我们将扩展到其他类。

.message 
{
	@extend .message-shared
}
.success 
{
	@extend .message-shared
	border-color: green
}
.error 
{
	@extend .message-shared
	border-color: red
}
.warning 
{
	@extend .message-shared
	border-color: yellow
}

SASS `@extend`和占位符选择器

占位符选择器的名称前面有一个%符号。当我们定义占位符选择器时，我们不能在我们的 HTML 中使用它，但它只能用于继承，这意味着其他选择器可以使用@extend AT 规则继承它的样式。

让我们举一个简单的例子:

%btn 
{
	border: 1px solid #ccc
	padding: 10px
	color: #333
}
.btn-success 
{
	@extend %btn
    background-color: green
}
.btn-error 
{
	@extend %btn
	background-color: red
}

编译后的 CSS 代码看起来像，

.btn-success 
{
	border: 1px solid #ccc;
	padding: 10px;
	color: #333;
    background-color: green;
}
.btn-error 
{
	border: 1px solid #ccc;
	padding: 10px;
	color: #333;
	background-color: red;
}

正如您所看到的，在编译后的 CSS 中，我们没有占位符选择器，只有它在扩展了它的样式类中的样式规则。

个人占位符:

我们甚至可以在 SASS 中通过添加一个-连字符或一个下划线** _作为选择器名称的前缀来定义私有占位符。这种占位符选择器变成私有的，只能通过在同一个样式表中编写样式类来扩展。**

**## SASS @extend:可选扩展

如果您使用@extendat-规则来扩展任何选择器，并且如果它不存在于样式表中，那么 SASS 将给出错误。因此，在使用@extend AT 规则时应该小心，因为如果更改被扩展的选择器的名称，那么可能会导致错误。

为了解决这个问题，如果您希望样式表代码不会出错，您可以使用！@extend 语句末尾的可选。这将使样式规则的继承成为可选的，如果被扩展的选择器不可用，SASS 仍然不会给出错误。

SASS `@extend`与`@mixin` AT 规则

SASS mixins 也是用来定义 SASS 中的可重用样式，就像 SASS 扩展一样，那么什么时候应该使用@mixin AT 规则，什么时候应该使用@extend AT 规则呢？

答案是，当我们想要使用参数配置样式规则时，在这种情况下，我们应该使用 SASS mixins，而如果我们的需求是重用静态样式规则(只是一大块样式)，那么在这种情况下，我们可以在样式表中使用 SASS 扩展。

SASS `@if`，`@else`和`@else if`规则

原文：https://www.studytonight.com/sass/sass-if-else-and-else-if-atrule

SASS 还通过提供@if、@else和@else if AT 规则来支持流控制，这些规则可以在 SASS 中通过在样式表中实现条件来编写复杂的代码。

在编写 SASS 函数或 SASS 混合函数时，我们可以根据包含混合函数或调用函数时提供的参数值定义不同的样式规则。这可以使用 SASS @if和@elseAT 规则 s来完成，这使得编写更动态的样式规则变得容易。

自动规则

SASS @if AT 规则可用于根据条件控制样式块的执行。

SASS `@if`:语法

使用@if AT 规则的语法非常简单，

@if <expression> { 

    /* statements */ 

}

这里，如果表达式评估为真，则评估与@ifat-规则相关联的块，编译成 CSS 样式规则，如果表达式评估为假，则跳过块。

SASS `@if`:示例

让我们举个例子来看看@if AT 规则的作用。

@mixin borderstyle($color, $round: false) {
  border-color: $color;
}

  @if $round {
    border-radius: 5px;
  }

.blue-border {
  @include borderstyle(blue, $round: false);
}
.red-border-round {
  @include borderstyle(red, $round: true);
}

这将被编译成以下 CSS:

.blue-border {
  border-color: blue;
}

.red-border-round {
  border-color: red;
  border-radius: 5px;
}

自动规则

SASS @else AT 规则与@if AT 规则一起用于提供替代块，如果@if表达式返回 false ，则执行。@else AT 规则是可选的，其不是强制的与@if AT 规则一起使用。

SASS `@else`:语法

使用@else AT 规则的语法非常简单，

@else { 

    /* statements */ 

}

注意: 如果没有@if AT 规则，就不能使用 SASS @else AT 规则。它应该始终遵循@if的 AT 规则。

SASS `@else`:示例

让我们举个例子来看看@else AT 规则的作用。

$light-background: #fefefe;
$light-text: #000000;
$dark-background: #000000;
$dark-text: #fefefe;

@mixin theme-colors($light-theme: true) {
  @if $light-theme {
    background-color: $light-background;
    color: $light-text;
  } @else {
    background-color: $dark-background;
    color: $dark-text;
  }
}

.banner {
  @include theme-colors($light-theme: true);
}

这将被编译成以下 CSS:

.banner {
  background-color: #fefefe;
  color: #000000;
}

自动规则

要定义多个条件流，我们可以使用@else if AT 规则和@if AT 规则。可以在@if AT 规则和@else AT 规则之间使用 SASS @else if AT 规则来包含多个条件样式块。

SASS `@else if`:语法

@ else if-AT 规则的语法类似于@ if-AT 规则的语法:

@else if <expression> { 

    /* statements */ 

}

就像@if AT 规则一样，@else if AT 规则也取一个表达式作为条件，如果@if AT 规则的表达式求值为 false ，而@else if表达式求值为 true ，则编译@else if样式块。

此外，@else if应该始终与@if AT 规则一起使用，就像@else AT 规则一样。

SASS `@else if`:示例

让我们举个例子来看看@else if AT 规则的作用。

@mixin text-effect($val) 
{
   @if $val == danger 
      {
         color: red;
      }
   @else if $val == alert 
      {
         color: yellow;
      }
   @else if $val == success 
      {
         color: green;
      }
   @else 
      {
         color: black;
      }
}

在上面的例子中，我们使用$val作为参数来确定的颜色是否应该是危险、警告等。

下面我们再举一个例子，这里我们用了一个 SASS mixin 为不同的边框样式:

$light: 1px solid black;
$medium: 3px solid black;
$heavy: 6px solid black;
$none: none;

@mixin border-stroke($val) 
{
  @if $val == light 
  {
     border: $light;
  }
  @else if $val == medium 
  {
     border: $medium;
  }
  @else if $val == heavy 
  {
     border: $heavy;
  }
  @else 
  { 
     border: $none;
  }
}

#box 
{
  width: 150px;
  height: 150px;
  background-color: red;
  /* calling the mixin */
  @include border-stroke(heavy);
}

上面的 SASS 代码将被编译成下面的 CSS 代码:

#box 
{
  width: 150px;
  height: 150px;
  background-color: red;
  border: 6px solid black;
}

因此，在本教程中，我们学习了如何在 SASS 中使用样式表中的@if、@else和@else ifat-规则来实现流控制，以使样式表更加动态。

SASS `@for`、`@each`和`@while`规则

原文：https://www.studytonight.com/sass/sass-for-each-and-while-atrule

SASS 提供了像@for、@each和@while这样的 AT 规则，用于在样式表中实现循环。如果你想为 HTML 列表等定义重复的样式规则，那么我们可以使用 SASS 循环。

正如本教程的标题所表明的，在 SASS 中有 3 个 AT 规则可用于设置重复的样式规则创建:

反制规则
反制规则
反制规则

让我们一个接一个地介绍它们，包括它们的语法和一些例子。

在规则:

SASS @for AT 规则的工作方式与任何编程/脚本语言中的循环的工作方式相同。它用于迭代和编译每次具有不同值的样式块。

SASS `@for`:语法

以下是在 SASS SASS 中使用@for AT 规则的语法:

@for <variable> from <expression> to <expression> { ... } 
/* or */ 
@for <variable> from <expression> through <expression> { ... }

正如您在上面的语法中看到的，在 SCSS/SASS 中有两种使用@for AT 规则的方式:

如果我们指定from <exp> to <exp>，那么从第一个表达式的结果到第二个表达式的结果的每个数字都被分配给变量，但是最终数字被排除在外。
如果我们指定from <exp> through <exp>，那么从第一个表达式的结果开始到第二个表达式的结果的每个数字都被分配给变量，但是的最终数字包括。

SASS `@for`:示例

让我们举一个简单的例子来理解如何使用它。下面我们有一个简单的带有段落标签的 HTML 代码。

<p class="paragraph-1">Sassy way</p>
<p class="paragraph-2">Sassy way</p>
<p class="paragraph-3">Sassy way</p>
<p class="paragraph-4">Sassy way</p>
<p class="paragraph-5">Sassy way</p>

现在如果需要为段落标签中使用的几乎相同的样式类编写一些样式，那么总共应该编写 5 个样式块。

在这种情况下，如果使用用于循环的，则该任务需要较少的努力。另外，在样式规则中，我们需要通过将 10px** 乘以段落编号来增加每个段落的字体大小。**

**查看以下 SCSS 代码:

@for $i from 1 to 6 
{
  .paragraph-#{$i} 
  {
    font-size: 10px*$i;
  }
}

上面的例子使用了开始到结束方法，所以变量$i从 1 到 5 。如果相同的@for AT 规则以开始到结束的形式编写，那么变量$i将从 1 到 6 取值。

从上面的 SCSS 代码生成的 CSS 看起来像:

.paragraph-1
{
   font-size: 10px;
}
.paragraph-2
{
   font-size: 20px;
}
.paragraph-3
{
   font-size: 30px;
}
.paragraph-4
{
   font-size: 40px;
}
.paragraph-5
{
   font-size: 50px;
}

在规则:

SASS SASS@each AT 规则也类似于@for AT 规则，唯一的区别在于它是用来迭代一个列表的值并映射。

SASS `@each`:语法

以下是使用@each AT 规则的语法:

@each <variable> in <expression> { ... }

表达式返回一个列表，并为列表中的每个元素计算样式块，这些元素被一个接一个地分配给给定的变量名。

SASS `@each`:示例

让我们借助一个例子来理解这一点。考虑三个 div 元素，其中每个 div 的背景颜色需要借助@each AT 规则来设置。

<div class="blue-background"></div>
<div class="black-background"></div>
<div class="yellow-background"></div>

首先，让我们通过使用一个列表来完成这个任务:

@each $color in blue, black, yellow 
{
  .#{$color}-background 
    {
       background-color: $color;
    }
}

映射方式与列表有点不同，如下所示:

/* $colors is a map here */
$colors: (color1: blue, color2: black, color3: yellow);
@each $key, $value in $colors 
{
  .#{$color}-background 
  {
    background-color: $value;
  }
}

这两种情况的编译后的 CSS 如下所示:

.blue-background
{
  background-color: blue;
}
.black-background
{
  background-color: black;
}
.yellow-background
{
  background-color: yellow;
}

在规则:

SASS @while类似于任何其他编程/脚本语言中的 while 循环。它一直执行到指定的表达式计算结果为真。

SASS `@while`:语法

以下是@while AT 规则的语法:

@while <expression> { ... }

用@while AT 规则定义的样式块将被求值，直到表达式求值为 true 。在使用@ while-AT 规则进行循环时，我们应该小心，因为这很容易导致无限循环。

SASS `@while`:示例

让我们考虑在@for中使用的具有五个段落标签的 HTML 的同一个例子。

<p class="paragraph-1">Sassy way</p>
<p class="paragraph-2">Sassy way</p>
<p class="paragraph-3">Sassy way</p>
<p class="paragraph-4">Sassy way</p>
<p class="paragraph-5">Sassy way</p>

现在每个段落的字体大小需要根据段落编号来增加。这可以使用@同时使用来完成，如下图所示:

$x: 1;
@while $x < 6 
{
    .paragraph-#{$x} 
    {
        font-size: 10px*$x;
    }
    $x: $x + 1;
}

生成的 CSS 会是这样的:

.paragraph-1
{
   font-size: 10px;
}
.paragraph-2
{
   font-size: 20px;
}
.paragraph-3
{
   font-size: 30px;
}
.paragraph-4
{
   font-size: 40px;
}
.paragraph-5
{
   font-size: 50px;
}

因此，在本教程中，我们在 SASS/SCSS 中学习了 3 种不同的循环技术来迭代生成样式规则。如果你有一种情况，你必须定义几乎相似的样式类，在样式上做一些改变，比如 h1、h2、h3、等等，你可以使用这些类。标签或者在 bootstrap CSS 的情况下，我们有列 col-1、col-2、col-3 等。有许多用例可以使用它们。

SASS `@error`、`@warn`和`@debug`规则

原文：https://www.studytonight.com/sass/sass-error-warn-and-debug-atrule

当我们在 SASS/SCSS 中编写可以接受参数的 mixins 和函数时，参数类型不匹配的几率会增加，我们必须以某种方式处理这种情况。我们可以使用 SASS/SCSS @error、@warn和@debug AT 规则向用户显示消息，指出提供的参数类型不正确。

在本教程中，我们将介绍以下 AT 规则:

@errorat-规则
@warnat-规则
@debugat-规则

让我们从@error AT 规则开始。

自动规则

SASS/SCSS @error在混搭和功能中都有帮助。假设我们需要确保在函数或 mixins 中传递的参数是正确的，为此，我们可以使用@error at-rul 来显示错误消息，以防证明了错误的数据类型，并且停止代码的编译。

使用@error AT 规则的语法是:

@error <expression>

让我们看一个例子，我们需要传递一个参数来决定 float 属性应该是左还是右。

mixin setcssfloat($floatvalue) {
    @if $floatvalue !=left or $floatvalue !=right {
        @error "Property #{$property} must be either left or right.";
    }
}

$top: top;

@include setcssfloat($top);

显示的错误消息如下所示:

错误:“属性顶部必须是左侧或右侧。”
？
3？@错误“属性#{$property}必须是左侧或右侧。”；
？^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
？
示例. scss 3:5 setcssfoard()
示例. scss 19:3 根样式表

自动规则

SASS @warn AT 规则用于向用户显示警告，如果用户正在发送一些不正确的值，或者可能是一些不再被 mixin 或函数接受的值。@warn AT 规则并没有完全停止 SASS 样式表的编译。

使用@warn AT 规则的语法与@error 的语法相同。

让我们举个例子来看看这是如何实现的。以下是带有 mixin 和@warn AT 规则的 SCSS 代码:

$known-prefixes: webkit, moz, ms, o;

@mixin prefix($property, $value, $prefixes) {
  @each $prefix in $prefixes {
    @if not index($known-prefixes, $prefix) {
      @warn "Unknown prefix #{$prefix}.";
    }

    -#{$prefix}-#{$property}: $value;
  }
  #{$property}: $value;
}

.tilt {
  // Oops, we typo'd "webkit" as "wekbit"!
  @include prefix(transform, rotate(15deg), wekbit ms);
}

这将被编译成以下 CSS:

.tilt {
  -wekbit-transform: rotate(15deg);
  -ms-transform: rotate(15deg);
  transform: rotate(15deg);
}

除显示以下警告消息外:

警告:未知前缀 wekbit。
示例. scss 6:7 前缀()
示例. scss 16:3 根样式表

自动规则

在某些情况下，在编写 SCSS 代码时检查变量的值是有用的，这样可以调试您正在编写的代码，并查看它在不同输入值下的表现。

SASS SASS 规则帮助我们解决了这个问题。@debug AT 规则的语法也类似于@error AT 规则。

要了解用法，最好看一个例子。假设一个混合将两个数字相加，并将其设置为填充到一个 div :

@mixin div-padding($x, $y) {
    $z : $x + $y;
    padding: $z * 1px;
    @debug "width is: #{$z}";
}

@include div-padding(100,200);

调试消息如下所示:

test.scss:3 调试:宽度为:300px

在本教程中，我们介绍了 SASS/SCSS 中的@error、@warn和@debug AT 规则。您必须使用它们来使您的样式表更加详细，以便任何使用它们的人都可以在它们使用任何 mixin 或功能不正确时看到消息。

SASS `@at-root`规则

原文：https://www.studytonight.com/sass/sass-atroot-atrule

SASS/SCSS @at-root AT 规则在 SASS 或 SCSS 中并不常用，但在使用选择器功能实现高级嵌套时有所帮助。我们可以将这个 AT 规则用于任何选择器(通常是定义在另一个选择器的花括号内的嵌套选择器)来将它们编译为样式表中的根选择器，而不是嵌套选择器。

它在文档的根位置发出文档中的所有内容，而不是使用普通的嵌套。

让我们看看它的语法，然后我们将举一个例子来帮助您理解。

规则:语法

下面是它的语法，

@at-root <selector> { 
    ... 
}

我们可以将@at-root写成@at-root { ... }，在其范围内有多个样式规则，将它们都放在文档的根目录下。

其实@at-root <selector> { ... }只是@at-root { <selector> { ... } }的简写

SASS `@at-root`:示例

让我们看一个例子来更好地理解这一点。

div{
    margin: 0px;
    @at-root .column {
        background-color: black;
    }
}

编译完 CSS 后会是这样的:

div{
    margin: 0px;
}

.column{
    background-color: black;
}

假设我们从上面的 SCSS 中去掉@at-root，即

div{
    margin: 0px;

    .column{
        background-color: black;
    }
}

现在生成的 CSS 如下图所示:

div{
    margin: 0px;
}

div .column{
    background-color: black;
}

所以这一切都是关于 SASS/SCSS 规则。

SASS 使用

SASS 嵌套规则和嵌套属性

原文：https://www.studytonight.com/sass/sass-nested-rules-and-nested-properties

SASS 嵌套规则使我们能够编写嵌套规则，使用花括号来包围嵌套元素的样式规则，就像在 HTML 中一样。

嵌套规则使编写 CSS 代码更容易，并使样式规则更易读。

<div id="sidebar">
    <ul>
        <li>Tutorials</li>
        <li>Q & A Forum</li>
        <li>Flashcards</li>
        <li>Tests</li>
        <li>Collaborate</li>
    </ul>
</div>

我们将编写如下 CSS 代码:

#sidebar {
    float:left;
    width:25%;
    background-color:lightblue;
    padding: 30px 10px;
}

#sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#sidebar li {
    padding: 6px;
    margin-bottom: 10px;
    background-color: #10A2FF;
    color: #ffffff;
}

但是在 SASS/SCSS 中，我们可以使用嵌套规则以一种更易读的方式做到这一点，

#sidebar {
    float:left;
    width:25%;
    background-color:lightblue;
    padding: 30px 10px;

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    li {
        padding: 6px;
        margin-bottom: 10px;
        background-color: #10A2FF;
        color: #ffffff;
    }
}

看，比 CSS 好。

嵌套属性

每当有 CSS 属性属于相同的名称空间时，就会使用这种方法。考虑背景命名空间，我们在其中具有如下属性:

背景色
背景图像
背景-重复
背景-附件
背景位置

在 CSS 的情况下，如果我们想使用它们，我们需要分别键入所有这些属性。但是 SCSS 为我们提供了的速记嵌套方式，这使得我们编写名称空间后跟所有属性的工作变得更加容易，即以嵌套的方式。

让我们看一个例子，

body 
{
  background: 
   {
     color: yellow;
     attachment: fixed;
     repeat: no-repeat;
   }
}

这将被编译为:

body 
{
  background-color: yellow;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

类似地，在字体命名空间的情况下，

.funky 
{
  font: 
    {
      family: fantasy;
      size: 30em;
      weight: bold;
    }
}

这将被编译成下面的 CSS 代码，

.funky 
{
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; 
}

结论:

在本教程中，我们详细介绍了嵌套规则和嵌套属性的概念，因为这是您在编写 SCSS 风格代码时必须使用的一个很好的特性，因为这将使您的工作变得更容易，也将使您的样式表更易读，体积更小。

SASS 父选择器——使用`&`符号

原文：https://www.studytonight.com/sass/sass-parent-selector-using-ampersand

在 SASS/SCSS 语法中，我们可以使用&符号(和符号)来表示父类，并定义进一步的嵌套规则。SASS 中的这个&符号(&)代表父选择器，我们可以用它轻松编写嵌套属性。

SASS 父选择器语法:

在样式表的嵌套选择器中使用父选择器的语法非常简单。你所要做的就是使用&(和符号)作为前缀，后跟一些文本，当你将 SCSS 代码编译成 CSS 代码时，和符号将被父选择器的名称替换。

#someclass {
    /* nested property using parent selector */
    &-body {
        /* this will be compiled as #someclass-body */
    }
}

&符号应该在复合选择器的开头，但是它后面可以跟一个后缀，这个后缀将被添加到父选择器中。

使用 SASS/SCSS 父级选择器

让我们举个例子来理解这一点。考虑下面的 HTML 代码，

<div id="studytonight">
    <div id="studytonight-body">
        /* Some HTML code */
    </div>
</div>

#studytonight {
    /* styling for #studytonight div */
    &-body {
        /* styling for #studytonight-body div */
    }
}

当 SCSS 代码转换为 CSS 代码时，&符号被编译为父选择器值。当我们必须在主元素中使用类似:hover、:selected等伪选择器时，这就派上了用场。因此，如果您有一个<a>标签，并且想要为鼠标悬停定义样式，您可以在 Sass 中这样做，

a {
    text-decoration: none;
    color:black;
    // using parent selector
    &:hover {
        color:red;
    }
}

这相当于下面的 CSS 代码，

a{ 
    text-decoration: none;
    color:black;
}
a:hover
{
    color:red;
}

结论:

父选择器是 SASS/SCSS 的一个小特性，但它为我们提供了进一步简化的方法，在这种方法中，我们必须编写更少的代码来表达更多的意思。当我们为嵌套的 HTML 组件编写样式代码时，这种方法非常有用，比如使用列表或导航条的菜单等。

SASS 部分

原文：https://www.studytonight.com/sass/sass-partials

SASS/SCSS 部分是 CSS 文件，包含特定样式的小型 CSS 代码，与主样式表分离，以便更好地管理 CSS 代码。这些文件可以在另一个 SASS 或 SCSS 文件中使用，而不是使用 @use AT 规则或 @forward AT 规则再次编写相同的样式，这两个文件都包括具有不同可见性的样式表。

SASS Partials 提供了一个很好的方法来组织不同文件中的 CSS 代码，然后在任何需要的地方使用它们。

在 SASS 中一定要把样式表做成 Partial，它的名字应该总是以_ 下划线字符开头，例如_ Partial . SCS，等。

作为样式表名称前缀的下划线字符表示这是 CSS 的一小块，因此不需要单独将它编译成 CSS。

为什么要用 Partials？

Partials 用于将样式代码管理为功能性划分的样式规则，这些规则被划分为独立的文件，可以使用@use AT 规则在主样式表中使用。这样做有很多好处，

您的主样式表将变得不那么庞大，并且您将能够更好地管理样式表。
不编译部分代码，因此可以快速将 SASS 代码整体编译成 CSS。
您可以根据自己的需求，使用@use AT 规则或@forward AT 规则来控制 Partials 中定义的样式代码的可见性。

考虑 main.scss 文件，它是样式的主文件，现在 _partial.scss 需要导入。

/* In the main.scss file */

@use 'partial'

注意导入时不使用 _字符和文件扩展名。一旦我们包含了文件，那么部分中的所有内容都可以在主文件中使用。

部分可见性控制

是的，当一个样式表包含在另一个样式表中时，SASS 允许我们控制它的成员的可见性。控制可见性有两种不同的方法:

首先是通过在 Partials 中定义私有成员
其次，当我们使用@use AT 规则在样式表中包含分部时，如果该样式表(在其中导入分部)被任何其他样式表包含，则分部中定义的成员将不可见。在这种情况下，为了使分部成员可用，我们必须使用@forward AT 规则。

野蛮民族党:私人成员

在 SASS/SCSS 中，我们可以通过在样式表中添加一个连字符(-) 或下划线(_) 作为名称前缀来定义私有成员。私有成员通常在其定义的样式表(部分)中工作，但是对于包含该部分的样式表，它们是不可见的。

让我们举个例子，

/* src/_corners.scss */
$-radius: 3px;

@mixin rounded {
  border-radius: $-radius;
}

现在如果我们将这个样式表导入到另一个样式表中，

/* style.scss */
@use "src/corners";

.button {
  @include corners.rounded;

  /* This is an error! $-radius isn't visible 
     outside of `_corners.scss`.
  */
  padding: 5px + corners.$-radius;
}

使用`@use`和`@forward`导入 SASS

当我们使用@use AT 规则在样式表中包含分部时，如果该样式表(在其中导入分部)被任何其他样式表包含，则分部中定义的成员将不可见。在这种情况下，为了使分部成员可用，我们必须使用@forward AT 规则。

如果我们使用@useat-规则，我们可以隐藏分部的成员以避免进一步使用。

Using @forward to include a Partial SCSS stylesheet

在使用@forward AT 规则时，也允许在进一步的导入中使用样式表中包含的部分。

结论:

就这样，我们结束了 Partials。SASS Partials 为我们提供了一种技术来更好地管理我们的样式代码和有意义地隔离样式规则。

从 SCSS 转换为 SASS，反之亦然

原文：https://www.studytonight.com/sass/converting-from-scss-to-sass-and-vice-versa

SASS 和 SCSS 是同一枚硬币的两面。它们的语法有一些小的不同，比如 SCSS 使用分号，而 SASS 使用缩进，这是你想要的选择。

无论你选择什么，你总能把一种风格转换成另一种风格。

是的，如果你的样式表是用 SCSS 写的，你可以把它转换成 SASS 代码，如果你的样式表是用 SASS 写的，你可以把它转换成 SCSS 代码。

这两种语法都可以导入用另一种语法编写的文件。此时，没有必要用另一种语法重写文件。这些文件可以使用一些简单的命令行工具进行转换，例如sass-convert。

/* to convert Sass syntax to SCSS syntax */
$ sass-convert style.sass style.scss

/* To convert SCSS Syntax to Sass syntax */
$ sass-convert style.scss style.sass

其中命令后的第一个文件是源文件，第二个文件表示目标文件。

SASS 内置模块

原文：https://www.studytonight.com/sass/sass-buildin-modules

SASS 附带了许多内置模块，就像预定义的样式表一样，可以直接包含/导入到样式表中并使用。我们可以使用 @use AT 规则导入 SASS 内置模块，然后可以访问其成员。

所有内置 SASS 模块的 URL 都以sass:开头，因此如果您想要导入颜色内置模块，您必须在样式表中添加以下语句:

@use "sass:color"

一旦我们导入任何内置模块，我们就可以使用它的成员混合、变量、函数等。使用模块名称，后跟点运算符，然后是成员的名称。

让我们举个例子，

@use "sass:color";

.button {
  $primary-color: #6b717f;
  color: $primary-color;
  /* using the funciton scale */
  border: 1px solid color.scale($primary-color, $lightness: 20%);
}

该 SCSS 代码将被编译为以下内容:

.button {
  color: #6b717f;
  border: 1px solid #878d9a;
}

SASS/SCSS 内置模块

默认情况下，SASS/SCSS 提供以下内置模块:

sass:数学模块，为我们提供对ciel、clamp、floor、max、min等数字进行各种操作的功能。

sass:color 模块，提供各种功能对颜色执行各种操作，比如基于现有颜色创建新颜色，例如创建现有颜色的更浅色调，因此该模块在设计主题时非常有用。这个预装了scale、lighten、saturation、opacity、alpha等功能。

sass:string 模块提供拆分、合并或搜索字符串的功能。它预装了quote、unquote、index、insert、length、slice等功能。

sass:列表模块用于对列表值类型进行不同的操作。这个有append、join、length等功能。

sass:map 模块为我们提供了使用get、keys、has-key、merge等函数对 SASS map 值类型进行操作的功能。

sass:选择器模块让我们可以访问用于检查和操作选择器的 sass 的选择器引擎。

sass:meta 模块公开了 sass 的内部工作方式。

结论:

借助内置模块，SASS/SCSS 的开发人员朝着让网页设计师的生活变得更加轻松的方向又迈进了一步，因为有了所有这些预定义的模块和功能，开发人员所要做的就是阅读这些模块及其功能，并在样式表中简单地使用它们。

JS

JavaScript 基础知识

JavaScript 简介

原文：https://www.studytonight.com/javascript/introduction-to-javascript

JavaScript 是一种客户端、基于对象的脚本语言，用于处理和验证客户端数据。JavaScript 还用于使网页的用户界面更加动态，使其对诸如鼠标移动、鼠标点击某个 HTML 元素、按钮点击等事件做出响应，使用它我们可以改善用户体验。

JavaScript 是基于 ECMAScript 标准的轻量级脚本语言。它在浏览器上执行，因此减少了服务器上的负载。JavaScript 还可以用来创建跨平台应用程序或 SaaS 应用程序，或者通过使用节点来创建后端服务器端应用程序。

它是一种解释语言，意思是在 Javascript 里面写的脚本是一行一行处理的，处理之前不编译。这些脚本由 JavaScript 解释器解释，这是网络浏览器的内置组件。虽然最近这种情况有所改变，但是随着 Chrome 和 NodeJS 中 V8 引擎的引入，现在及时编译也用于 JavaScript。

JavaScript 是 P latform Independent ，也就是说你只需要写一次脚本，就可以在任何平台或者浏览器上运行，而不影响 Script 的输出。

JavaScript，以前被称为 LiveScript，由网景和太阳微系统公司开发。它也被称为 ECMAScript，因为它是由欧洲计算机制造商协会(ECMA)标准化的。最近的升级是 ECMAScript6 、 ES7 、 ES8 、 ES9 、 ES10 以及今年年初最新的 ECMAScript2020 。尽管您应该用所有新功能来更新自己，但 ECMAScript6 是最重要的变化，我们将在本教程系列的最后介绍更多内容。

浏览器使用自己的 JavaScript 引擎来执行 JavaScript 代码。下面列出了一些常用的浏览器:

Chrome 采用的是 V8 发动机。
火狐使用蜘蛛猴引擎。
微软边缘使用查克拉核心引擎。
Safari 使用 SquirrelFish 引擎。

网络发展路线图:

如果你是初学者，我们建议你先学 HTML 学 CSS 然后你会更容易理解 JavaScript。在 web 开发中，HTML 是可以用来开发基本网页的基本构件，基本网页可以有超链接、图像、表单等。然后是 CSS，它用于设计各种 HTML 元素的样式，使它们看起来很好。CSS 是为你的 HTML 元素提供样式的标准，现在没有一个网站是没有它的。

学习 SASS/SCSS 这是一种新的语言，它使我们能够像任何其他编程语言一样编写动态样式规则，这些规则可以转换成 CSS 代码，然后在 HTML 页面中使用。

然后是 JavaScript，正如我们提到的，它是一种脚本语言，用于处理和验证客户端数据，基于事件使网页动态化，启用 cookies、本地存储等功能，等等。

让我们看看 JavaScript 的一些特性。

JavaScript 特性

以下是 JavaScript 最有用的一些特性:

轻量
动态类型
基于对象的
功能的
独立于平台
基于原型的
解释
异步的

让我们看看所有这些特性意味着什么:

轻量级: JavaScript 是一种轻量级脚本语言，因为它仅用于浏览器级别的数据处理。因为它不是一种通用语言，所以它有一组有限的库。

动态类型化: JavaScript 支持动态类型化，这意味着变量的类型是基于存储值定义的。例如，如果您声明了一个变量x，那么您可以存储一个字符串或一个数字类型的值。这就是所谓的动态打字。

基于对象的语言:JavaScript 是一种基于对象的脚本语言，提供字符串、数学、日期等内置对象。

Functional Style: 这意味着 JavaScript 使用了一种函数方法，甚至对象都是从构造器中创建的，每个构造器代表一个唯一的对象类型。

平台无关:这意味着 JavaScript 是平台无关的或者我们可以说是可移植的；这意味着您只需编写一次脚本，就可以随时随地运行它。一般来说，您可以编写您的 JavaScript 应用程序，并在任何平台或任何浏览器上运行它们，而不会影响脚本的输出。

基于原型: JavaScript 是一种基于原型的脚本语言。这意味着 javascript 使用原型而不是类。在 JavaScript 中，每个构造器都与一个原型对象相关联。这是一个有点混乱的概念，但是这样考虑，就像我们在 Java 中有一个类，它就像一个蓝图，然后我们为这个类创建对象(理解类、对象和 OOP 的概念)，在 JavaScript 中，我们定义对象原型，它用于创建其他对象。不要担心，如果你现在不明白这一点，你会明白这一点，因为你会随着教程的进展。

explored:javascript 是一种解释语言，意思是在 JavaScript 里面写的脚本是一行一行处理的，在执行之前是不会编译的(虽然这个变化比较慢，不同的浏览器会创建不同的 JavaScript 引擎)。这些脚本由 JavaScript 解释器解释，该解释器是网络浏览器的内置组件。

异步:可以用 JavaScript 异步做复杂的处理，这意味着整个页面都不用等待 JavaScript 的处理，一旦脚本处理完成，我们就可以轻松修改 HTML 代码来显示或隐藏数据。此外，我们还可以使用 JavaScript 向服务器发送异步 HTTP 请求，供服务器端处理。

JavaScript 的优点

作为一种脚本语言，JavaScript 具有各种优势，非常有用，下面列出了一些优势:

JavaScript 使网页更具交互性和动态性。
通过使用 JavaScript，您可以让您的网页立即向用户提供反馈，这样他们就不必重新加载页面。
您可以使用 JavaScript 根据用户如何与您的网页交互来执行动作，使用鼠标点击、表单提交、按钮点击等生成的事件。
JavaScript 甚至可以在向服务器发送数据之前，通过验证用户输入来节省服务器流量。
JavaScript 可以用来存储客户端 cookie在客户端存储数据，然后读取或删除。
JavaScript 可以用来进行异步 HTTP 调用从服务器加载数据。

JavaScript 的局限性

JavaScript 也有一些限制，如下所示:

像 Java 和其他通用编程语言一样，JavaScript 不能编写多线程或多处理器代码。
核心 JavaScript 不能用于开发网络应用程序，尽管有一些像 NodeJS 这样的框架可以用于此。
JavaScript 只能在客户端使用，即用于前端开发。
JavaScript 在浏览器中处理，如果有人在自己的浏览器中禁用了 JavaScript，则不会处理任何 JavaScript 代码。因此，如果您正在使用 JavaScript 验证表单值，并且您的网站的任何用户在他/她的浏览器中关闭了 JavaScript，那么您的表单验证将停止工作。
JavaScript 为安全研究人员和黑客打开了许多门窗，让他们可以随意摆弄网页。

结论:

至此，您已经对 JavaScript 有了一个简单的介绍。在接下来的教程中，我们将涵盖 JavaScript 的所有基础知识，然后我们将继续讨论它的更复杂的部分。

JavaScript 特性

原文：https://www.studytonight.com/javascript/javascript-features

JavaScript 是最流行的语言之一，在 web 开发中包含了许多特性。根据 Github，它是顶级编程语言之一，我们必须正确了解 JavaScript 的特性，才能理解它的功能。

一些特性是轻量级的、动态的、功能性的和可解释的。现在我们将讨论 JavaScript 的一些重要特性。

轻量级脚本语言
动态打字
面向对象编程支持
功能风格
独立于平台
基于原型的
解释语言
异步处理
客户端验证
浏览器中的更多控制

让我们详细看看所有这些特性，以便您能够理解它们。上面指定的一些特性是旧的 JavaScript 特性，而一些是新特性。

1.轻量级脚本语言

JavaScript 是一种轻量级脚本语言，因为它仅用于浏览器的数据处理。因为它不是一种通用语言，所以它有一组有限的库。此外，由于它只适用于客户端执行，也适用于 web 应用程序，因此 JavaScript 的轻量级特性是一个很好的特性。

2.动态打字

JavaScript 支持动态类型，这意味着变量的类型是基于存储的值定义的。例如，如果你声明了一个变量x，那么你可以存储一个字符串或者一个数字类型的值或者一个数组或者一个对象。这就是所谓的动态打字。

为了理解这一点，在像 Java 这样的语言中，我们明确提到特定的变量将存储特定类型的数据，而在 JavaScript 中，我们在声明变量时不必提供数据类型。在 JavaScript 中，我们只需要在变量名前使用var或let关键字来声明一个变量，而不用担心它的类型。

3.面向对象编程支持

从 ES6 开始，类和 OOPs 的概念更加细化。同样，在 JavaScript 中，JavaScript 中 OOP 的两个重要原则是对象创建模式(封装)和代码重用模式(继承)。虽然 JavaScript 开发人员很少使用这个功能，但它的存在让每个人都可以探索。

3.功能风格

这意味着 JavaScript 使用一种函数方法，甚至对象也是从构造器创建的，每个构造器代表一个唯一的对象类型。此外，JavaScript 中的函数可以用作对象，也可以传递给其他函数。

4.独立于平台

这意味着 JavaScript 是独立于平台的，或者我们可以说它是可移植的；这意味着您只需编写一次脚本，就可以随时随地运行它。一般来说，您可以编写您的 JavaScript 应用程序，并在任何平台或任何浏览器上运行它们，而不会影响脚本的输出。

5.基于原型的语言

JavaScript 是一种基于原型的脚本语言。这意味着 javascript 使用原型而不是类或继承。在像 Java 这样的语言中，我们创建一个类，然后为这些类创建对象。但是在 JavaScript 中，我们定义了对象原型，然后可以使用这个对象原型创建更多的对象。

7.解释语言

javascript 是一种解释语言，这意味着在 JavaScript 中编写的脚本是逐行处理的。这些脚本由 JavaScript 解释器解释，该解释器是网络浏览器的内置组件。但是现在浏览器中的许多 JavaScript 引擎，比如 chrome 中的 V8 引擎，使用的是 JavaScript 代码的及时编译。

8.异步处理

JavaScript 支持 Promise，它支持异步请求，在异步请求中，请求被启动，JavaScript 不必等待响应，这有时会阻止请求处理。同样从 ES8 开始，JavaScript 中也支持异步函数，这些函数不一一执行，而是并行处理，对处理时间有积极的影响，很大程度上减少了处理时间。

9.客户端验证

这是一个可以在 JavaScript 中永远使用的特性，并且仍然被广泛使用，因为每个网站都有一个用户输入值的表单，为了确保用户输入正确的值，我们必须在客户端和服务器端进行适当的验证。JavaScript 用于实现客户端验证。

10.浏览器中的更多控制

作为一种客户端语言，JavaScript 提供了许多功能，帮助开发人员在浏览器和服务器之间划分处理，从而通过在浏览器本身进行基本处理、验证、使用 cookies 临时保存数据等来减轻服务器的负载。

除了所有这些特性之外， JavaScript 还提供了以下有用的特性:

检测客户端的浏览器类型、名称、操作系统版本等信息进行分析。
丰富的内置库，具有许多用于验证、数据类型转换、字符串操作等的有用功能。
这是一种以对象为中心的语言，窗口对象是 JavaScript 中最重要的对象，它还支持多态性。
支持常用的复杂数据类型，如数组、地图、列表等。在内置功能的支持下对其进行操作。

另读:-Java vs JavaScript:Java 和 JavaScript 有什么区别？

在 HTML 中包含 JavaScript

原文：https://www.studytonight.com/javascript/include-javascript-in-html

可以使用 HTML <script>标签将 JavaScript 代码插入到 HTML 文件中。当网页浏览器中加载了带有<script>标签的 HTML 文档时，浏览器会将包含在<script> 标签中的内容作为 JavaScript 代码进行处理。

<script> 标签可以包含脚本语句，也可以引用外部 JavaScript 文件。<script> 标签提供了一个 src 属性，允许我们添加对外部脚本文件的引用。

JavaScript 是大多数浏览器的默认脚本语言。

`<script>` 标签属性及其用途

以下是使用<script>标签的基本语法:

<script src="JS_FILE_URL" type="..."></script>

同样，我们也可以使用<script>标签直接添加 JavaScript 代码，如下所示:

<script type="text/javascript">
    // JS code here
</script>

脚本标签有五个属性，如下表所示:

| 属性 | 值 | 描述 |
| async |

True
Wrong

| 它指定脚本是否应该异步执行。 |
| type |

ā412/ecmascript
ā412/JavaScript
王路/ecmascript
王路/JavaScript
ā381/VBScript

True
Wrong

现在我们已经知道了用于在网页中包含 JavaScript 代码的

网页中的 JavaScript

您可以在 HTML 网页中使用脚本标记，以下列方式添加 JavaScript 代码:

在头元素(<head>...</head>)
在体内元素(<body>...</body>)
包含外部 JavaScript 文件

让我们一个接一个地介绍所有这些，并附上代码示例来帮助您理解它们。

1.在`<head>`元素中用 JavaScript 代码编写`<script>` 标签

让我们把脚本标签放在 HTML 头元素里面。放置在头元素中的脚本会加载到网页中，并在任何定义的事件发生时执行。

下面给出的代码展示了如何使用 HTML 文档的<head>元素中的<script>标签来添加一些 JavaScript 代码。

1.在`<body>`元素中用 JavaScript 代码编写`<script>` 标签

您也可以在 HTML 文档的正文元素中放置一个脚本标签。当网页开始在 web 浏览器中加载时，body 元素中的脚本标记会运行。下面是展示如何在 HTML 文档的<body>元素中放置<script>元素的代码:

3.外部文件中的 JavaScript 代码

每当我们在 HTML 文档中放入冗长的 JavaScript 代码时，都会影响 HTML 文档的可读性和可维护性。此外，有时需要在几个网页中使用相同的 JavaScript 代码。在这种情况下，我们可以将 JavaScript 代码存储在一个外部文件中，并用保存该文件。js 分机。所有的 JavaScript 代码文件都应该有一个扩展名。JS 别的都没有。

要链接外部文件，我们可以在<script> 标签的 src 属性中提供它的位置(URL)。

包括外部 JavaScript 语法:

我们可以通过这种方式将外部 JavaScript 文件添加到我们的 HTML 文件中:

<script src="jsfile.js" type="text/javascript"></script>

在上面的代码示例中，type属性是可选的。

外部 JavaScript 文件的优势:

使用外部 JavaScript 文件有它自己的优点。

它将 HTML 和 JavaScript 代码分开，使代码看起来干净易懂。
外部 JavaScript 代码可以在多个 HTML 网页中重用。
外部 JavaScript 代码可以缓存在浏览器中。一旦被缓存，浏览器就不会一次又一次地加载 JavaScript 文件，而是会使用它的缓存版本。这将使您的网页加载速度更快。

外部文件中的 JavaScript 代码示例:

下面给出的代码向您展示了如何将外部 JavaScript 文件与 HTML 文档链接起来。

<html>
    <head> 
        <title>my first JavaScript</title> 
        <script src="jsfile.js"></script> 
    </head> 
    <body> 
        <p id="script">this is the old text</p> 
        <button type="button" onclick="text()">Click this button to use JavaScript</button> 
    </body> 
</html>

存储在名为 jsfile.js 的文件中的 JavaScript 代码

function text() 
{
    document.getElementById("script").innerHTML = "This text has been written inside the JavaScript.";
}

在上面的代码中，我们已经在 JavaScript 中定义了一个简单的函数，我们将在接下来的教程中了解 JavaScript 函数。

在网页中包含 JavaScript:最佳实践

在大型项目中，JavaScript 代码可能非常庞大，每个 HTML 页面中可以包含多个使用多个<script>标签的外部 JavaScript 文件。是的，我们可以使用多个<script>标签来包含任意多的外部 JavaScript 文件。

例如，如果我们有 3 个 JavaScript 文件，名称分别是 one.js 、 two.js 和 three.js ，我们必须将所有这些都包含在我们的 HTML 页面中。在这种情况下，我们将使用 3 个<script>标签，

<script src="one.js" type="text/javascript"></script>
<script src="two.js" type="text/javascript"></script>
<script src="three.js" type="text/javascript"></script>

现在的问题是，我们应该把上面的代码放在我们的 HTML 页面的什么地方。是应该放在 HTML 代码的 HEAD 部分，还是应该放在 HTML 页面的 BODY 部分？

嗯，如果我们把它放在 HEAD 部分，那么当我们的网页加载的时候，所有的 JavaScript 文件都会先加载，这样会减慢我们的网页加载，这是不好的。

所以，我们应该加载一个网页中使用的外部 JavaScript 文件，最后的意思是要么就在关闭 </body> 标签之前，要么就在关闭 </body> 标签之后，这样首先加载我们完整的网页，然后加载外部 JavaScript 文件。这样，即使我们有大的 JavaScript 文件，我们的网页也不会因此而变慢。

<html>
    <head>
        ...
    </head>
    <body>
        <!-- body of HTML page -->
    </body>
    <script src="one.js" type="text/javascript"></script>
    <script src="two.js" type="text/javascript"></script>
    <script src="three.js" type="text/javascript"></script>
</html>

结论:

因此，本教程涵盖了将 JavaScript 代码包含到 HTML 网页中的所有方法以及最佳实践。在下一个教程中，我们将学习如何从 JavaScript 代码中获得输出，这样我们就可以开始进行一些编码，并看到 JavaScript 代码正在运行。

JavaScript 语法

原文：https://www.studytonight.com/javascript/javascript-syntax

JavaScript 有自己的语法和编程风格。语言的语法定义了用该语言编写代码的规则，什么是正确的方式，什么不是。在本教程中，我们将学习用 JavaScript 编写代码的基本语法。

JavaScript 使用自己的语法来创建变量、函数、语句等。但是如果你有任何编程语言的知识，比如 C、C++或 Java，那么你理解 JavaScript 的语法就不会很困难。

1.每个语句末尾的分号(可选)

分号用于终止 JavaScript 代码语句。代码语句是一行代码，我们可以通过添加一个分号来标记每一行代码的结尾。在 C、C++、Java 等语言中。我们在每个代码语句的末尾使用分号。

在 JavaScript 中，语句后面通常跟一个分号(;)，表示语句结束。

但是没有必要在语句末尾使用分号 ( ;)。

下面的示例显示了 JavaScript 语句的两个有效声明:

var var_name = value;

var var_name = value

在本例中，第一条语句用分号结束，而第二条语句不用分号结束。这两个语句在 Javascript 中都有效。

2.JavaScript 空白和换行符

JavaScript 解释器忽略脚本中出现的制表符、空格和换行符，字符串和正则表达式除外。

下面我们有一个简单的代码示例，其中我们在每个代码语句后添加了一个额外的换行符，然后代码中没有任何空格。两者在 JavaScript 中都是可以接受的。

var i = 10;

var j = 20;

var a = i+j; var b = i-j;

您可以通过使用多个空格来编写更干净、更易读的 JavaScript 代码，因为 JavaScript 会忽略多个空格。

3.区分大小写

JavaScript 是一种区分大小写的语言，这意味着所有的关键字、函数名、变量名或标识符都应该用一致的字母大小写键入。一般来说，文字应该以一个小字母开头，为了组合长名字，我们也可以使用驼色的大小写。

让我们举个例子，在下面的代码中，所有三个变量都是不同的，因为第一个变量是小写的，第二个变量以大写字母开头，第三个变量是大写的。

var marks;

var Marks;

var MARKS;

在驼色字体中，除了单词的起始字母外，所有字母都很小，第一个字母总是很小。因此，如果我想将一个变量或函数命名为 myfirstvariable ，驼色的样式将是 myFirstVariable 。

4.JavaScript 注释

注释是指在执行程序时被忽略的程序中的文本或代码。注释是用来在代码中提供附加信息，比如代码的描述。在代码中添加注释被认为是的好做法。

类似于 C、C++等其他编程语言。，JavaScript 还定义了两种类型的注释。

单行注释
多行注释

让我们举一个例子，了解如何在我们的 JavaScript 代码中添加这些内容。

<html>
<head>
    <title>JavaScript Comment Example</title>
    <script>
    // This is an single line comment and it will not be executed
    /*
        This is a multiline comment and everything written 
        inside this block will not be executed. 
    */
    var x = 10;
    var y = 2*x;
    </script>
</head>
<body>
    <!-- Some HTML code - This is HTML comment -->
</body>
</html>

5.JavaScript 语句

在任何编程语言中，语句被称为指令，这些语句被设置为由计算机作为计算机程序执行。

JavaScript 代码只不过是这些编程语句的列表，这些语句是值、运算符、表达式、关键字和注释的集合。

<html>
<head>
    <title>JavaScript Statement</title>
</head>
<body>
        <script>
         document.write("this is a text") ;   // JavaScript statement
         var a = 10+20;    // Another Statement
         document.write(a);
        </script>
</body>
</html>

在本教程中，我们借助示例解释了基本 Javascript 语法及其用法。这将有助于您对编写 JavaScript 代码有一个基本的了解。我们将在接下来的教程中学习更多不同的 JavaScript 特性，如定义变量、使用运算符、定义函数，并将在相应的教程中介绍它们的语法。

JavaScript 输出

原文：https://www.studytonight.com/javascript/output-in-javascript

我们可以在一个网页上用 4 种简单而不同的方法获得 JavaScript 输出，下面给出了这些方法。我们可以根据应用需求使用它们。在本教程中，我们将学习从 JavaScript 代码中获取输出的以下四种不同方式，就像我们在 C 语言中使用printf()，在 C++中使用cout等一样。

使用innerHTML属性
使用document.write()方法
使用警告框
通过登录控制台

我们将借助示例来介绍所有这些内容。此外，如果您不理解这些语法，也不要担心，我们将在接下来的教程中详细介绍这些语法。

1.JavaScript `innerHTML`属性

JavaScript 允许您使用 innerHTML 属性写入 HTML 元素。我们可以添加任何我们想要的东西，它可以是一条文本消息，一些 HTML 元素或其他任何东西。

要做到这一点，首先你需要为你想要通过 JavaScript 代码访问的 HTML 元素提供一个特定的 Id。

要访问一个 HTML 元素，JavaScript 使用document.getElementById(id)方法，其中 id 是 HTML 标签的id属性的值。

举个例子，在这个例子中，id属性用来标识 HTML 元素，innerHTML属性用来给它设置内容。

这样，如果您正在编写 JavaScript 代码来进行一些处理，或者如果您有任何逻辑，您可以轻松地在 HTML 网页中显示输出。

2.使用`document.write()`的 JavaScript 输出

JavaScript 允许您使用document.write()方法将任何输出写入到 HTML 网页中。通过使用这种方法，您可以直接将输出写入 HTML 页面。

write()方法将 HTML 表达式或 JavaScript 代码写入文档。这种方法主要用于测试目的。

举个例子，在这个例子中，我们使用的是document.write()方法，用来直接写入网页。

3.通过警告框的 JavaScript 输出

某些网站会在您访问它们或执行某些操作时向您发出警告消息，您会在警告框中看到输出消息。你也可以用 JavaScript 让你的网页发送提醒信息通知用户一些事情，要使用这个功能你需要使用window.alert()方法。

让我们举一个例子，在这个例子中，我们使用警报框来编写一条消息并展示给用户。

4.JavaScript 控制台日志记录

JavaScript 还允许您创建控制台日志，可以在浏览器的开发人员工具(Console) 中看到这些日志，以便进行调试。写在控制台日志中的语句将被执行，但不会显示在浏览器中，而是显示在浏览器的控制台中。

用于控制台记录的功能是console.log(SOME-EXPRESSION-OR-STRING)，可以用来记录浏览器控制台中的任何内容。

在 Chrome 浏览器中打开开发者工具，在 Windows 中按 F12，在 MacOS 中按命令+选项+ I。下图显示了它的外观:

JavaScript Console Log example

让我们举个例子来看看在控制台中打印日志的 JavaScript 代码:

<html>
<head>
    <title>JavaScript console example</title>
    <script>
        console.log(2+3);
    </script>
</head>
<body>
    <!-- HTML body -->
</body>
</html>

结论:

在本教程中，我们学习了如何使用 JavaScript 以各种不同的方式向用户显示输出。所有的例子都包括在内，以便更好地理解这个主题。

标签：Web,教程,示例,标签,元素,HTML,StudyTonight,CSS,属性
From： https://www.cnblogs.com/apachecn/p/18500127

StudyTonight-Web-中文教程-一-

StudyTonight Web 中文教程（一）

HTML

HTML 标签 A

HTML <a>标签

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

HTML

HTML <a>标签属性

1.HTML

2.HTML

3.HTML

4.HTML

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

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

HTML <abbr>标签

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

HTML5 <abbr>标签基本示例

HTML <abbr>标签属性

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

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

HTML <address>标签

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

需要记住的要点:

HTML <address>标签基本示例

HTML <address>标签属性

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

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

HTML <article>标签

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

HTML5 <article>标签基本示例

HTML5 <article>标签属性

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

1.HTML <footer>标签

2.HTML <time>标签

真实世界的应用

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

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

HTML <aside>标签

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

HTML <aside>标签基本示例

HTML <aside>标签属性

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

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

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

HTML <audio>标签

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

HTML <audio>标签属性

HTML <audio>标签基本示例

使用<source>标签

浏览器支持 HTML <audio>标签

HTML 标签 B

HTML <b>标签

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

HTML <b>标签基本示例

HTML <b>标签属性

要记住的要点！

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

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

HTML <base>标签

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

HTML <base>标签属性

HTML <base>标签示例

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

HTML <bdi>标签

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

HTML <bdi>标签示例

HTML <bdi>标签属性

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

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

HTML <bdo>标签

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

HTML <bdo>标签基本示例

HTML <bdo>标签属性

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

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

HTML <blockquote>标签

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

HTML <blockquote>标签基本示例

HTML <blockquote>标签属性

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

HTML `<a>`标签

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

HTML `<a>`标签属性

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

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

HTML `<abbr>`标签

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

HTML5 `<abbr>`标签基本示例

HTML `<abbr>`标签属性

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

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

HTML `<address>`标签

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

HTML `<address>`标签基本示例

HTML `<address>`标签属性

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

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

HTML `<article>`标签

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

HTML5 `<article>`标签基本示例

HTML5 `<article>`标签属性

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

1.HTML `<footer>`标签

2.HTML `<time>`标签

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

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

HTML `<aside>`标签

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

HTML `<aside>`标签基本示例

HTML `<aside>`标签属性

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

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

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

HTML `<audio>`标签

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

HTML `<audio>`标签属性

HTML `<audio>`标签基本示例

使用`<source>`标签

浏览器支持 HTML `<audio>`标签

HTML `<b>`标签

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

HTML `<b>`标签基本示例

HTML `<b>`标签属性

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

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

HTML `<base>`标签

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

HTML `<base>`标签属性

HTML `<base>`标签示例

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

HTML `<bdi>`标签

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

HTML `<bdi>`标签示例

HTML `<bdi>`标签属性

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

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

HTML `<bdo>`标签

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

HTML `<bdo>`标签基本示例

HTML `<bdo>`标签属性

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

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

HTML `<blockquote>`标签

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

HTML `<blockquote>`标签基本示例

HTML `<blockquote>`标签属性

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

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

HTML `<body>`标签

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

HTML `<body>`标签属性

HTML `<body>`标签基本示例

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

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

HTML `<br>`标签

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

HTML `<br>`标签基本示例

HTML `<br>`标签属性

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

HTML `<button>`标签