「轉(zhuǎn)行測(cè)試開發(fā)-初學(xué)HTML」(一)元素和標(biāo)簽

么是HTML, HTML是超文本標(biāo)記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創(chuàng)建網(wǎng)頁的標(biāo)準(zhǔn)標(biāo)記語言。在大學(xué)，如果是計(jì)算機(jī)科學(xué)與技術(shù)專業(yè)，或者軟件工程等專業(yè)，都會(huì)學(xué)習(xí)這個(gè)語言。

由于上大學(xué)的時(shí)候沒有好好學(xué)習(xí)，只是為了完成老師留的作業(yè)和考試，并沒有仔細(xì)的學(xué)習(xí)這門課程。現(xiàn)在想把這塊的知識(shí)撿起來，好好學(xué)習(xí)一番。

我們先來看下一個(gè)HTML的簡單實(shí)例，說下實(shí)例中對(duì)應(yīng)的元素和內(nèi)容。

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

<p>偉大光榮正確的中國共產(chǎn)黨，萬歲！</p>

<p>偉大光榮英雄的中國人民，萬歲！</p>

</body>

</html>

上面是一個(gè)完整的HTML實(shí)例，下面我們來分析下代碼段落和內(nèi)容

1. <!DOCTYPE html> 聲明為 HTML5 文檔

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

3. <head> 元素包含了文檔的元（meta）數(shù)據(jù)，如 <meta charset="utf-8"> 定義網(wǎng)頁編碼格式為 utf-8。

4. <title> 元素描述了文檔的標(biāo)題

5. <body> 元素包含了可見的頁面內(nèi)容

6. <h1> 元素定義一個(gè)大標(biāo)題

7. <p> 元素定義一個(gè)段落

8. <h2> 元素定義一個(gè)大標(biāo)題

我們來看下運(yùn)行結(jié)果

使用的是火狐瀏覽器，可以看到瀏覽器標(biāo)題，head和內(nèi)容

我們需要對(duì)HTML有更進(jìn)一步的認(rèn)識(shí):

HTML 是用來描述網(wǎng)頁的一種語言。

HTML 指的是超文本標(biāo)記語言: HyperText Markup Language

HTML 不是一種編程語言，而是一種標(biāo)記語言

標(biāo)記語言是一套標(biāo)記標(biāo)簽 (markup tag)

HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁

HTML 文檔包含了HTML 標(biāo)簽及文本內(nèi)容

HTML文檔也叫做 web 頁面

接著我們說下HTML的標(biāo)簽:

HTML 標(biāo)記標(biāo)簽通常被稱為 HTML 標(biāo)簽 (HTML tag)。

HTML 標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞，比如 <html>

HTML 標(biāo)簽通常是成對(duì)出現(xiàn)的，比如 <b> 和 </b>

標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開始標(biāo)簽，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽

開始和結(jié)束標(biāo)簽也被稱為開放標(biāo)簽和閉合標(biāo)簽

<標(biāo)簽>內(nèi)容</標(biāo)簽>

除了標(biāo)簽，我們?cè)僬f下HTML的元素:

HTML 元素

"HTML 標(biāo)簽" 和 "HTML 元素" 通常都是描述同樣的意思.

但是嚴(yán)格來講, 一個(gè) HTML 元素包含了開始標(biāo)簽與結(jié)束標(biāo)簽，如下實(shí)例:

HTML 元素:

最后，我們看下HTML的網(wǎng)頁結(jié)構(gòu)

</head>

<p>這是另外一個(gè)段落。</p>

</body>

</html>

也說下HTML的版本:

好的，今天先到這里，下期HTML介紹和學(xué)習(xí)再見~

么是 HTML？

HTML （Hypertext Markup Language）是標(biāo)準(zhǔn)標(biāo)記語言，是 Web 瀏覽器顯示的基礎(chǔ)。此外，CSS（Cascading Style Sheets）等技術(shù)以及JavaScript等腳本語言也支持這種技術(shù)。

創(chuàng)建主頁時(shí)，首先使用 HTML 確定句子的結(jié)構(gòu)并標(biāo)記它，然后設(shè)計(jì)要顯示的信息。這是網(wǎng)頁的基礎(chǔ)。

現(xiàn)在，讓我們仔細(xì)看看可以使用少量 CSS 代碼實(shí)現(xiàn)的技術(shù)。

一種技術(shù)摘要，可以使用鮮為人知的短 HTML 代碼實(shí)現(xiàn)

loading="lazy"屬性

Web 性能改進(jìn)技術(shù)之一是屬性，允許用戶延遲加載，直到滾動(dòng)。它還適用于嵌入 YouTube 視頻的 iframe 代碼和大尺寸圖像。loading="lazy"

XHTML

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

發(fā)送電子郵件、電話或短信短信

打開電子郵件創(chuàng)建頁面、直接撥打電話或發(fā)送短消息的技術(shù)。

XHTML

Eメールを送信

</a>

お電話ください

</a>

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

</a>

確定列表順序的屬性strat

start屬性允許您自由確定列表格式的數(shù)字。

meter在元素中顯示數(shù)字

meter元素允許您使用彩色滑塊顯示數(shù)字和數(shù)量。不需要 JavaScript 或 CSS。

HTML 本機(jī)搜索

通過預(yù)先在表單輸入元素中指定一些數(shù)據(jù)列表，可以將其作為候選關(guān)鍵字顯示在輸入字段中的下拉列表中。

Fieldset按元素對(duì)標(biāo)簽進(jìn)行分組

fieldset元素允許您將 Web 窗體中的多個(gè)控件和標(biāo)簽（）組合在一起。label

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

target="_blank在中打開的頁面將允許您訪問原始頁面的 window.opener。這可能會(huì)對(duì)安全性和性能產(chǎn)生負(fù)面影響，例如"原始窗口在知道之前已轉(zhuǎn)換到填充站點(diǎn)"。為了防止這種情況，請(qǐng)包括或。rel="noopener"rel="noreferrer"

參考ウェブサイト

</a>

base元素

如果要在新選項(xiàng)卡中打開 HTML 文檔中的所有鏈接，可以使用元素。在下面的示例中，兩個(gè)鏈接都在新的選項(xiàng)卡中打開。base

防止傳真機(jī)緩存

若要更新網(wǎng)站的傳真，您可以通過將其添加到文件名中來在瀏覽器中下載新版本。?v=2

一種有效的技術(shù)，尤其是在生產(chǎn)環(huán)境中，以確保用戶輸入新版本。

XHTML

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

spellcheck按屬性檢查拼寫

可以決定是否檢查元素的拼寫錯(cuò)誤的屬性。spellcheck

顯示 HTML 滑塊

input type="range"允許您使用滑塊調(diào)整數(shù)字。所選數(shù)字可以顯示在中。input type="number"

僅通過 HTML 顯示手風(fēng)琴

details元素允許您創(chuàng)建僅 HTML 本機(jī)手風(fēng)琴。

mark標(biāo)記中的文本突出顯示突出顯示

mark標(biāo)記允許您使用黃色標(biāo)記突出顯示文本的一部分。

下載文件具有屬性download

URL 鏈接的屬性允許您直接下載文件，而不是將其移動(dòng)到文件中。download

XHTML

Download

</a>

webp使用文件格式

使用".webp"作為圖像格式可以減小圖像大小并提高網(wǎng)站性能。

XHTML

<!--

　　　　　　.webp畫像や<picture>タグが

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

　　　　　　　フォールバックとして

-->

</picture>

視頻視頻縮略圖視圖

poster屬性允許您指定在加載視頻或按下"播放"按鈕之前顯示的圖像。

XHTML

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

type="search"在中顯示取消標(biāo)記

在搜索框中使用時(shí)，將自動(dòng)顯示"X"清除標(biāo)記以取消。type="search"

只有 HTML 可以實(shí)現(xiàn)的功能，我有很多。我們計(jì)劃在未來添加和更新小技巧技術(shù)。

內(nèi)容首發(fā)于工粽號(hào)：程序員大澈，每日分享一段優(yōu)質(zhì)代碼片段，歡迎關(guān)注和投稿！

大家好，我是大澈！

本文約 1400+ 字，整篇閱讀約需 2 分鐘。

今天分享一段優(yōu)質(zhì) CSS 代碼片段，讓文本和背景色混合產(chǎn)生一種獨(dú)特的效果，就像下圖這種。

老規(guī)矩，先閱讀代碼片段并思考，再看代碼解析再思考，最后評(píng)論區(qū)留下你的見解！

<div class="banner">
    <h1 class="title">每日分享一段優(yōu)質(zhì)代碼片段，歡迎關(guān)注與投稿！</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;
    /* 關(guān)鍵點(diǎn) */
    mix-blend-mode: difference; 
}

分享原因

這段代碼展示了如何使用 CSS 和 HTML 創(chuàng)建一個(gè)帶有背景圖片和標(biāo)題文本的橫幅（banner），并且通過 mix-blend-mode: difference; 為標(biāo)題文本添加混合模式效果。

mix-blend-mode 屬性可以為元素設(shè)置混合模式，使其顏色與背景顏色混合，從而創(chuàng)建有趣的視覺效果。

這個(gè)效果在設(shè)計(jì)中很常見，能增加頁面的視覺吸引力，強(qiáng)調(diào)和突出文本內(nèi)容。

代碼解析

1. banner 類

設(shè)置背景元素基礎(chǔ)樣式。

定義背景圖片，以及讓文本垂直水平居中對(duì)齊。

2. mix-blend-mode: difference;

這是一個(gè)關(guān)鍵設(shè)置。

使用了 mix-blend-mode: difference; ，這意味著標(biāo)題文字的顏色將與其父元素（.banner）的背景顏色進(jìn)行差值計(jì)算，產(chǎn)生類似于反相的效果。

在這種情況下，由于父元素（.banner）的背景是白色，而文字原本的顏色是白色，通過差值計(jì)算后，文字顏色就變成了黑色，從而讓白色文字在白色背景上也能夠顯示。

3. mix-blend-mode 屬性詳解

mix-blend-mode CSS 屬性描述了元素的內(nèi)容應(yīng)該與其直系父元素的內(nèi)容和元素的背景如何混合。

它允許創(chuàng)建各種視覺效果，例如半透明效果、陰影、圖片蒙版等。

以下是兼容性：

以下是一些常見的屬性值：

normal：這是默認(rèn)值，使用正常的顏色混合模式，不產(chǎn)生特殊混合效果。

multiply：將兩個(gè)顏色的值相乘，會(huì)得到一個(gè)更暗的顏色，常用于創(chuàng)建陰影效果。

screen：將兩個(gè)顏色的值相加，然后減去相乘的值，會(huì)得到一個(gè)更亮的顏色，可用于創(chuàng)建高光效果。

overlay：根據(jù)背景顏色的亮度來選擇顏色混合模式。如果背景顏色較暗，則使用 multiply 模式；如果背景顏色較亮，則使用 screen 模式。

darken：將兩個(gè)顏色的值進(jìn)行比較，使用較暗的那個(gè)顏色。

lighten：與 darken 相反，使用較亮的那個(gè)顏色。

color-dodge：將前景色分解為 RGB 分量，并將每個(gè)分量分別除以（1 減去背景色的對(duì)應(yīng)分量），然后將每個(gè)分量限制在 0 到 1 之間，并使用限制后的前景色作為混合色。這種模式會(huì)使顏色變亮。

color-burn：將前景色分解為 RGB 分量，并將每個(gè)分量分別除以背景色的對(duì)應(yīng)分量，然后將每個(gè)分量限制在 0 到 1 之間，并使用限制后的前景色作為混合色。它會(huì)使顏色變暗。

difference：將前景色減去背景色的值，并取絕對(duì)值，會(huì)導(dǎo)致一種反相的效果。

exclusion：將前景色和背景色的值相加，然后減去相乘的值的兩倍，常用于創(chuàng)建反相效果，但其對(duì)比度比 difference 更低，顏色更柔和。

hue：將前景色的色相（hue）與背景色的飽和度（saturation）和亮度（lightness）混合，可在不改變亮度和飽和度的情況下改變顏色。

saturation：將前景色的飽和度與背景色的色相和亮度混合，用于在不改變顏色的情況下改變飽和度。

color：將前景色的色相、飽和度和亮度與背景色混合，會(huì)在改變所有顏色屬性的情況下改變前景色的顏色。

luminosity：將前景色的亮度與背景色的色相和飽和度混合，可在不改變顏色的情況下改變亮度。

在線咨詢

上一篇：使用React和CSS淡入淡出加載圖片：快速指南
下一篇：JSP第一篇：JSP介紹、工作原理、生命周期、語法、指令(修訂版)

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

「轉(zhuǎn)行測(cè)試開發(fā)-初學(xué)HTML」(一)元素和標(biāo)簽

么是 HTML？

一種技術(shù)摘要，可以使用鮮為人知的短 HTML 代碼實(shí)現(xiàn)

loading="lazy"屬性

發(fā)送電子郵件、電話或短信短信

確定列表順序的屬性strat

meter在元素中顯示數(shù)字

HTML 本機(jī)搜索

Fieldset按元素對(duì)標(biāo)簽進(jìn)行分組

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

base元素

防止傳真機(jī)緩存

spellcheck按屬性檢查拼寫

顯示 HTML 滑塊

僅通過 HTML 顯示手風(fēng)琴

mark標(biāo)記中的文本突出顯示突出顯示

下載文件具有屬性download

webp使用文件格式

視頻視頻縮略圖視圖

type="search"在 中顯示取消標(biāo)記

您的項(xiàng)目需求

type="search"在中顯示取消標(biāo)記