「转行测试开发-初学HTML」(一)元素和标签

么是HTML, HTML是超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。在大学，如果是计算机科学与技术专业，或者软件工程等专业，都会学习这个语言。

由于上大学的时候没有好好学习，只是为了完成老师留的作业和考试，并没有仔细的学习这门课程。现在想把这块的知识捡起来，好好学习一番。

我们先来看下一个HTML的简单实例，说下实例中对应的元素和内容。

<!DOCTYPE html>

<html>

<head>

<title>建党一百周年(baidu.com)</title>

</head>

<body>

<h1>第一个万岁</h1>

<p>伟大光荣正确的中国共产党，万岁！</p>

<h2>第二个万岁</h2>

<p>伟大光荣英雄的中国人民，万岁！</p>

</body>

</html>

上面是一个完整的HTML实例，下面我们来分析下代码段落和内容

1. <!DOCTYPE html> 声明为 HTML5 文档

2. <html> 元素是 HTML 页面的根元素

3. <head> 元素包含了文档的元（meta）数据，如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。

4. <title> 元素描述了文档的标题

5. <body> 元素包含了可见的页面内容

6. <h1> 元素定义一个大标题

7. <p> 元素定义一个段落

8. <h2> 元素定义一个大标题

我们来看下运行结果

使用的是火狐浏览器，可以看到浏览器标题，head和内容

我们需要对HTML有更进一步的认识:

HTML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言: HyperText Markup Language

HTML 不是一种编程语言，而是一种标记语言

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

HTML 文档包含了HTML 标签及文本内容

HTML文档也叫做 web 页面

接着我们说下HTML的标签:

HTML 标记标签通常被称为 HTML 标签 (HTML tag)。

HTML 标签是由尖括号包围的关键词，比如 <html>

HTML 标签通常是成对出现的，比如 <b> 和 </b>

标签对中的第一个标签是开始标签，第二个标签是结束标签

开始和结束标签也被称为开放标签和闭合标签

<标签>内容</标签>

除了标签，我们再说下HTML的元素:

HTML 元素

"HTML 标签" 和 "HTML 元素" 通常都是描述同样的意思.

但是严格来讲, 一个 HTML 元素包含了开始标签与结束标签，如下实例:

HTML 元素:

<p>这是一个段落。</p>

最后，我们看下HTML的网页结构

</head>

<body><h1>这是一个标题</h1>

<p>这是一个段落。</p>

<p>这是另外一个段落。</p>

</body>

</html>

也说下HTML的版本:

好的，今天先到这里，下期HTML介绍和学习再见~

么是 HTML？

HTML （Hypertext Markup Language）是标准标记语言，是 Web 浏览器显示的基础。此外，CSS（Cascading Style Sheets）等技术以及JavaScript等脚本语言也支持这种技术。

创建主页时，首先使用 HTML 确定句子的结构并标记它，然后设计要显示的信息。这是网页的基础。

现在，让我们仔细看看可以使用少量 CSS 代码实现的技术。

一种技术摘要，可以使用鲜为人知的短 HTML 代码实现

loading="lazy"属性

Web 性能改进技术之一是属性，允许用户延迟加载，直到滚动。它还适用于嵌入 YouTube 视频的 iframe 代码和大尺寸图像。loading="lazy"

XHTML

1	<img src='image.jpg' loading='lazy' alt='代替テキスト'>

发送电子邮件、电话或短信短信

打开电子邮件创建页面、直接拨打电话或发送短消息的技术。

XHTML

Eメールを送信

</a>

お電話ください

</a>

SMSショートメッセージを送信

</a>

确定列表顺序的属性strat

start属性允许您自由确定列表格式的数字。

meter在元素中显示数字

meter元素允许您使用彩色滑块显示数字和数量。不需要 JavaScript 或 CSS。

HTML 本机搜索

通过预先在表单输入元素中指定一些数据列表，可以将其作为候选关键字显示在输入字段中的下拉列表中。

Fieldset按元素对标签进行分组

fieldset元素允许您将 Web 窗体中的多个控件和标签（）组合在一起。label

使用 window.opener 防止检索原始窗口中的信息

target="_blank在中打开的页面将允许您访问原始页面的 window.opener。这可能会对安全性和性能产生负面影响，例如"原始窗口在知道之前已转换到填充站点"。为了防止这种情况，请包括或。rel="noopener"rel="noreferrer"

参考ウェブサイト

</a>

base元素

如果要在新选项卡中打开 HTML 文档中的所有链接，可以使用元素。在下面的示例中，两个链接都在新的选项卡中打开。base

防止传真机缓存

若要更新网站的传真，您可以通过将其添加到文件名中来在浏览器中下载新版本。?v=2

一种有效的技术，尤其是在生产环境中，以确保用户输入新版本。

XHTML

1	<link rel="icon" href="/favicon.ico?v=2" />

spellcheck按属性检查拼写

可以决定是否检查元素的拼写错误的属性。spellcheck

显示 HTML 滑块

input type="range"允许您使用滑块调整数字。所选数字可以显示在中。input type="number"

仅通过 HTML 显示手风琴

details元素允许您创建仅 HTML 本机手风琴。

mark标记中的文本突出显示突出显示

mark标记允许您使用黄色标记突出显示文本的一部分。

下载文件具有属性download

URL 链接的属性允许您直接下载文件，而不是将其移动到文件中。download

XHTML

Download

</a>

webp使用文件格式

使用".webp"作为图像格式可以减小图像大小并提高网站性能。

XHTML

<!--

　　　　　　.webp画像や<picture>タグが

　　　　　　　ブラウザにサポートされていないときの

　　　　　　　フォールバックとして

-->

</picture>

视频视频缩略图视图

poster属性允许您指定在加载视频或按下"播放"按钮之前显示的图像。

XHTML

1	<video poster="path/to/image">

type="search"在中显示取消标记

在搜索框中使用时，将自动显示"X"清除标记以取消。type="search"

只有 HTML 可以实现的功能，我有很多。我们计划在未来添加和更新小技巧技术。

内容首发于工粽号：程序员大澈，每日分享一段优质代码片段，欢迎关注和投稿！

大家好，我是大澈！

本文约 1400+ 字，整篇阅读约需 2 分钟。

今天分享一段优质 CSS 代码片段，让文本和背景色混合产生一种独特的效果，就像下图这种。

老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！

<div class="banner">
    <h1 class="title">每日分享一段优质代码片段，欢迎关注与投稿！</h1>
</div>

.banner {
    height: 230px;
    background-image: url(./img/banner.png);
    background-repeat: no-repeat;
    background-size: 100% 230px;
    line-height: 230px;
    text-align: center;
}
.title {
    margin: 0;
    color: #fff;
    font-size: 50px;
    /* 关键点 */
    mix-blend-mode: difference; 
}

分享原因

这段代码展示了如何使用 CSS 和 HTML 创建一个带有背景图片和标题文本的横幅（banner），并且通过 mix-blend-mode: difference; 为标题文本添加混合模式效果。

mix-blend-mode 属性可以为元素设置混合模式，使其颜色与背景颜色混合，从而创建有趣的视觉效果。

这个效果在设计中很常见，能增加页面的视觉吸引力，强调和突出文本内容。

代码解析

1. banner 类

设置背景元素基础样式。

定义背景图片，以及让文本垂直水平居中对齐。

2. mix-blend-mode: difference;

这是一个关键设置。

使用了 mix-blend-mode: difference; ，这意味着标题文字的颜色将与其父元素（.banner）的背景颜色进行差值计算，产生类似于反相的效果。

在这种情况下，由于父元素（.banner）的背景是白色，而文字原本的颜色是白色，通过差值计算后，文字颜色就变成了黑色，从而让白色文字在白色背景上也能够显示。

3. mix-blend-mode 属性详解

mix-blend-mode CSS 属性描述了元素的内容应该与其直系父元素的内容和元素的背景如何混合。

它允许创建各种视觉效果，例如半透明效果、阴影、图片蒙版等。

以下是兼容性：

以下是一些常见的属性值：

normal：这是默认值，使用正常的颜色混合模式，不产生特殊混合效果。

multiply：将两个颜色的值相乘，会得到一个更暗的颜色，常用于创建阴影效果。

screen：将两个颜色的值相加，然后减去相乘的值，会得到一个更亮的颜色，可用于创建高光效果。

overlay：根据背景颜色的亮度来选择颜色混合模式。如果背景颜色较暗，则使用 multiply 模式；如果背景颜色较亮，则使用 screen 模式。

darken：将两个颜色的值进行比较，使用较暗的那个颜色。

lighten：与 darken 相反，使用较亮的那个颜色。

color-dodge：将前景色分解为 RGB 分量，并将每个分量分别除以（1 减去背景色的对应分量），然后将每个分量限制在 0 到 1 之间，并使用限制后的前景色作为混合色。这种模式会使颜色变亮。

color-burn：将前景色分解为 RGB 分量，并将每个分量分别除以背景色的对应分量，然后将每个分量限制在 0 到 1 之间，并使用限制后的前景色作为混合色。它会使颜色变暗。

difference：将前景色减去背景色的值，并取绝对值，会导致一种反相的效果。

exclusion：将前景色和背景色的值相加，然后减去相乘的值的两倍，常用于创建反相效果，但其对比度比 difference 更低，颜色更柔和。

hue：将前景色的色相（hue）与背景色的饱和度（saturation）和亮度（lightness）混合，可在不改变亮度和饱和度的情况下改变颜色。

saturation：将前景色的饱和度与背景色的色相和亮度混合，用于在不改变颜色的情况下改变饱和度。

color：将前景色的色相、饱和度和亮度与背景色混合，会在改变所有颜色属性的情况下改变前景色的颜色。

luminosity：将前景色的亮度与背景色的色相和饱和度混合，可在不改变颜色的情况下改变亮度。

在线咨询

上一篇：使用React和CSS淡入淡出加载图片：快速指南
下一篇：JSP第一篇：JSP介绍、工作原理、生命周期、语法、指令(修订版)

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

「转行测试开发-初学HTML」(一)元素和标签

么是 HTML？

一种技术摘要，可以使用鲜为人知的短 HTML 代码实现

loading="lazy"属性

发送电子邮件、电话或短信短信

确定列表顺序的属性strat

meter在元素中显示数字

HTML 本机搜索

Fieldset按元素对标签进行分组

使用 window.opener 防止检索原始窗口中的信息

base元素

防止传真机缓存

spellcheck按属性检查拼写

显示 HTML 滑块

仅通过 HTML 显示手风琴

mark标记中的文本突出显示突出显示

下载文件具有属性download

webp使用文件格式

视频视频缩略图视图

type="search"在 中显示取消标记

您的项目需求

type="search"在中显示取消标记