整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
么是HTML, HTML是超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言。在大學，如果是計算機科學與技術專業，或者軟件工程等專業，都會學習這個語言。
由于上大學的時候沒有好好學習，只是為了完成老師留的作業和考試，并沒有仔細的學習這門課程。現在想把這塊的知識撿起來，好好學習一番。
我們先來看下一個HTML的簡單實例，說下實例中對應的元素和內容。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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的網頁結構
<html><head><title>頁面標題</title>
</head>
<body><h1>這是一個標題</h1>
<p>這是一個段落。</p>
<p>這是另外一個段落。</p>
</body>
</html>
也說下HTML的版本:
好的，今天先到這里，下期HTML介紹和學習再見~
HTML （Hypertext Markup Language）是標準標記語言，是 Web 瀏覽器顯示的基礎。 此外，CSS（Cascading Style Sheets）等技術以及JavaScript等腳本語言也支持這種技術。
創建主頁時，首先使用 HTML 確定句子的結構并標記它，然后設計要顯示的信息。 這是網頁的基礎。
現在，讓我們仔細看看可以使用少量 CSS 代碼實現的技術。
Web 性能改進技術之一是屬性，允許用戶延遲加載，直到滾動。 它還適用于嵌入 YouTube 視頻的 iframe 代碼和大尺寸圖像。loading="lazy"
XHTML
1 | <img src='image.jpg' loading='lazy' alt='代替テキスト'> |
打開電子郵件創建頁面、直接撥打電話或發送短消息的技術。
XHTML
1 2 3 4 5 6 7 8 9 10 11 | <a href="mailto:{email}?subject={subject}&body={content}"> Eメールを送信 </a> <a href="tel:{phone}"> お電話ください </a> <a href="sms:{phone}?body={content}"> SMSショートメッセージを送信 </a> |
start屬性允許您自由確定列表格式的數字。
meter元素允許您使用彩色滑塊顯示數字和數量。 不需要 JavaScript 或 CSS。
通過預先在表單輸入元素中指定一些數據列表，可以將其作為候選關鍵字顯示在輸入字段中的下拉列表中。
fieldset元素允許您將 Web 窗體中的多個控件和標簽 （） 組合在一起。label
target="_blank在 中打開的頁面將允許您訪問原始頁面的 window.opener。 這可能會對安全性和性能產生負面影響，例如"原始窗口在知道之前已轉換到填充站點"。 為了防止這種情況，請包括 或 。rel="noopener"rel="noreferrer"
1 2 3 | <a href="https://markodenic.com/" target="_blank" rel="noopener"> 參考ウェブサイト </a> |
如果要在新選項卡中打開 HTML 文檔中的所有鏈接，可以使用元素。 在下面的示例中，兩個鏈接都在新的選項卡中打開。base
若要更新網站的傳真，您可以通過將其添加到文件名中來在瀏覽器中下載新版本。?v=2
一種有效的技術，尤其是在生產環境中，以確保用戶輸入新版本。
XHTML
1 | <link rel="icon" href="/favicon.ico?v=2" /> |
可以決定是否檢查元素的拼寫錯誤的屬性。spellcheck
input type="range"允許您使用滑塊調整數字。 所選數字可以顯示在 中。input type="number"
details元素允許您創建僅 HTML 本機手風琴。
mark標記允許您使用黃色標記突出顯示文本的一部分。
URL 鏈接的屬性允許您直接下載文件，而不是將其移動到文件中。download
XHTML
1 2 3 | <a href='path/to/file' download> Download </a> |
使用".webp"作為圖像格式可以減小圖像大小并提高網站性能。
XHTML
1 2 3 4 5 6 7 8 9 10 11 | <picture> <!-- サポートされていたら.webp畫像を読み込む --> <source srcset="logo.webp" type="image/webp"> <!-- .webp畫像や<picture>タグが ブラウザにサポートされていないときの フォールバックとして --> <img src="logo.png" alt="logo"> </picture> |
poster屬性允許您指定在加載視頻或按下"播放"按鈕之前顯示的圖像。
XHTML
1 | <video poster="path/to/image"> |
在搜索框中使用時，將自動顯示"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：將前景色的亮度與背景色的色相和飽和度混合，可在不改變顏色的情況下改變亮度。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
