聞12月份的四六級成績，在2月下旬要出了[思考]，預(yù)估應(yīng)該是2月16日吧

關(guān)于如何不用上官網(wǎng)就可以查成績，我發(fā)現(xiàn)只要關(guān)注個公眾號，讓它幫你查就好了[奸笑]，省事又省力，也不用管它什么時候出成績，反正出了公眾號就會推送給你

以下是步驟：

①關(guān)注“四六級考蟲”公眾號

②這個頁面下滑

③找到這個，點(diǎn)展開

④點(diǎn)擊圖片里的，然后長按識別二維碼，點(diǎn)“備份準(zhǔn)考證，預(yù)約查分”，輸入你的一些信息，這樣等四六級出成績就會通過公眾號推送給你啦

注：準(zhǔn)考證號可以到四六級的官網(wǎng)查，如果忘記了的話。

再推薦一個估分用的網(wǎng)址：http://study.baicizhan.com/mall/exams/cet4_test.html（百詞斬四六級估分器）建議往低的估分，這樣會比較保險點(diǎn)

作文和翻譯以我知道的是不會打0分的，正常來說都會高于5分（換算分的5分）

作文換算：

翻譯換算：

PS：我是大學(xué)生，以上屬于個人見解，沒有打廣告的意思

#四六級#?#英語四六級估分#

代CSS強(qiáng)大的令人難以置信。

這次我們來用 CSS 實現(xiàn)這樣一個功能：有多個寬度不同的標(biāo)簽水平排列，當(dāng)外層寬度不足時，會提示超出的數(shù)量，演示效果如下

如果讓我用 JavaScript來實現(xiàn)估計都有點(diǎn)折騰，畢竟寬度都是動態(tài)的，要監(jiān)聽各部分的尺寸變化，包括標(biāo)簽的位置和外層的寬度，總之不是一兩行代碼就能搞定的。

現(xiàn)如今，純CSS也能完美的實現(xiàn)這樣的效果，而且比 JS 實現(xiàn)更加簡單，一起來看看吧

一、CSS 實現(xiàn)思路

很多時候，CSS并沒有直接的實現(xiàn)方式，需要“繞”點(diǎn)彎路，將需求拆分成很多小點(diǎn)，然后逐一突破。

回到本文這里，其實有幾個問題需要考慮：

1. CSS 如何動態(tài)累計數(shù)字？
2. CSS 如何知道哪些元素在容器之外？
3. CSS 如何區(qū)分是否溢出（顯示數(shù)量）

關(guān)于第3點(diǎn)，其實在之前這篇文章中有詳細(xì)介紹，有興趣可以回顧一下，非常有意思

純 CSS 檢測文本是否溢出

那么第一點(diǎn)，CSS有沒有什么方式可以統(tǒng)計數(shù)量呢？

沒錯，相信很多小伙伴已經(jīng)猜到了，就是利用 CSS計數(shù)器，示意如下

counter-reset: num var(--num);
counter-increment: num;
::after{
	content: "+"counter(num);
}

關(guān)于計數(shù)器，我之前也在很多文章中有用到

你可能不需要 JS！CSS實現(xiàn)一個計時器

如何讓CSS計數(shù)器支持小數(shù)的動態(tài)變化？

還在使用定時器嗎？CSS 也能實現(xiàn)電子時鐘

動畫合成小技巧！CSS 實現(xiàn)動感的倒計時效果

自定義計數(shù)器小技巧！CSS 實現(xiàn)長按點(diǎn)贊累積動畫

然后是第二點(diǎn)，CSS有什么方式可以知道元素是出去了還是在視野之內(nèi)呢？

如果是用 JS來判斷的話，最穩(wěn)妥的方式應(yīng)該Intersection Observer（交叉觀察者），相信很多同學(xué)都用過，這個在圖片懶加載非常有用

交叉觀察器 API - Web API 接口參考 | MDN (mozilla.org)[1]

那么，CSS中有什么類似的呢？沒錯，還是之前提到過的CSS滾動驅(qū)動動畫。

不過這里用到的是視圖進(jìn)度，也就是關(guān)注的是元素自身位置，元素進(jìn)入到容器范圍之內(nèi)就會觸發(fā)動畫，非常類似 JS中的Intersection Observer

tag{
  animation: appear;
  animation-timeline: view(inline);
  animation-range: contain;
}
@keyframes appear{
  to {
    background-color: #9747FF;
  }
}

這里就不詳細(xì)介紹了，有興趣回顧之前這篇文章

CSS 滾動驅(qū)動動畫終于正式支持了~

好了，關(guān)鍵原理就這些了，我們需要做的就是想辦法將「計數(shù)器」和「元素進(jìn)出容器范圍」關(guān)聯(lián)起來就行了，接著往下看

二、CSS 計數(shù)器

利用 CSS 計數(shù)器，我們可以很輕松的統(tǒng)計元素的數(shù)量。

先簡單布局一下文章開頭的例子，HTML如下所示

<div class="con">
  <a class="tag">HTML</a>
  <a class="tag">CSS</a>
  <a class="tag">JavaScript</a>
  <a class="tag">Flutter</a>
  <a class="tag">Vue</a>
  <a class="tag">React</a>
  <a class="tag">Svelte</a>
</div>
<span class="num"></span><!--用來計數(shù)的標(biāo)簽-->

然后美化一下

.con{
  display: flex;
  gap: 5px;
  padding: 5px;
  overflow: hidden;
}
.tag{
  padding: .2em .5em;
  background-color: #c49ef5;
  color: #fff;
  border-radius: 4px;
  animation: appear;
}
.num::after{
  content: "+0";
  padding: .2em .5em;
  background-color: #FFE8A3;
  color: #191919;
  border-radius: 4px;
}

這樣就得到了水平排列的 tag 布局（超出隱藏），后面跟一個數(shù)字

現(xiàn)在我們定義一個計數(shù)器，然后通過每個tag進(jìn)行累計，有多個tag相當(dāng)于多少次累加，最后在::after中顯示出來

.con{
  counter-reset: num;  /*計數(shù)器初始值，默認(rèn)為0*/
}
.tag{
  counter-increment: num; /*計數(shù)器增量值，默認(rèn)為1*/
}
.num::after{
  content: "+"counter(num); 
}

默認(rèn)計數(shù)器的起始值是 0，每次累計是1，所以這里最后得到了7，這樣就能實時統(tǒng)計元素的數(shù)量了

當(dāng)然，我們也可以自定義這些默認(rèn)值，比如

.con{
  counter-reset: num 10;
}
.tag{
  counter-increment: num -1;
}

這種情況下，起始值是10，增量值是-1，所以最后得到了3，如下

那么，該如何統(tǒng)計容器之外的標(biāo)簽數(shù)量呢？

三、CSS 滾動驅(qū)動動畫

這里我們要利用CSS 視圖進(jìn)度時間軸，也就是觀察元素自身的位置，在進(jìn)入到容器范圍之內(nèi)執(zhí)行動畫。

拿上面這個例子，我們給標(biāo)簽添加一個動畫，讓標(biāo)簽在進(jìn)入到容器之內(nèi)時變個顏色，實現(xiàn)如下

.tag{
  animation: appear;
  animation-timeline: view(inline);
}
@keyframes appear{
  to {
    background-color: #4d47ff;
  }
}

由于是水平方向，所以這里需要設(shè)置view(inline) ，效果如下

好像不是很明顯？這是因為動畫是在整個視區(qū)內(nèi)過渡的，我們可以改變動畫時間線的區(qū)間animation-range，讓這個動畫在進(jìn)出的一瞬間就變化

.tag{
  animation: appear;
  animation-timeline: view(inline);
  animation-range: contain;
}
@keyframes appear{
  from,to {
    background-color: #4d47ff;
  }
}

效果如下

那么，這個效果和前面的計數(shù)器有什么關(guān)聯(lián)呢？

從效果上來看，在視區(qū)內(nèi)會執(zhí)行一個動畫，如果在這個動畫中加入計數(shù)器的累加會怎么樣呢？先去除原先的累加器

.tag{
  /* counter-increment: num; */
}
@keyframes appear{
  from,to {
    background-color: #4d47ff;
    counter-increment: num;
  }
}

效果如下

可以看到計數(shù)器已經(jīng)生效了，不過現(xiàn)在統(tǒng)計的在「可視區(qū)內(nèi)」標(biāo)簽的數(shù)量。而我們要統(tǒng)計的是「可視區(qū)外」的數(shù)量，好像反過來了，如何實現(xiàn)呢？

這里有兩種思路。

第一種，用總數(shù)減去可視區(qū)內(nèi)的數(shù)量，不就行了嗎？由于現(xiàn)在動畫是針對可視區(qū)內(nèi)的，我們可以給計數(shù)器設(shè)置一個初始值，就是總量，然后動畫中給累加值設(shè)置為-1，就相當(dāng)于減去當(dāng)前數(shù)量了，實現(xiàn)如下

.con{
	counter-reset: num 7;
}
@keyframes appear{
  from,to {
    background-color: #4d47ff;
    counter-increment: num -1;
  }
}

這樣就完美統(tǒng)計出了可視區(qū)外的數(shù)量了

還有一種方式，我覺得更加巧妙，需要反向思考。原理是重置當(dāng)前的累加值，比如默認(rèn)情況下，正常累加，進(jìn)入可視范圍，把累加值設(shè)置為0，不就相當(dāng)于可視區(qū)外的正常累加了嗎？

.tag{
  counter-increment: num;
}
@keyframes appear{
  from,to {
    background-color: #4d47ff;
    counter-increment: num 0;
  }
}

同樣能達(dá)到相同的效果

現(xiàn)在基本已經(jīng)達(dá)到我們需要的效果了

四、其他細(xì)節(jié)修正

首先是，在超出范圍時，需要在邊緣出添加一個半透明蒙層，這樣體驗效果會更好。

半透明蒙層很好實現(xiàn)，只需要添加一個水平漸變的mask遮罩就行了

.con{
  -webkit-mask: linear-gradient(to right, #fff calc(100% - 30px), transparent);
}

效果如下

那么，如何在沒有超出時，不出現(xiàn)這個遮罩呢？

這個其實在之前的文章中有詳細(xì)介紹了，建議回顧一下

純 CSS 檢測文本是否溢出

利用CSS滾動驅(qū)動動畫，可以檢測容器是否可滾動，也就是是否超出。所以我們只需要將遮罩放在滾動驅(qū)動動畫里就行了，關(guān)鍵實現(xiàn)如下

.con{
  animation: check;
  animation-timeline: scroll(x self);
}
@keyframes check{
  from,to {
    -webkit-mask: linear-gradient(to right, #fff calc(100% - 30px), transparent);
  }
}

效果如下

還有一個問題，希望在沒有超出的時候不顯示后面的數(shù)量。

關(guān)于這個，我本來是打算用樣式查詢來實現(xiàn)，但是遇到了一個問題，由于樣式查詢只能匹配到子元素，所以不得不將顯示數(shù)量的標(biāo)簽放到.con容器內(nèi)。但是這樣一來，mask遮罩就會出現(xiàn)問題，就像這樣

遮罩層連同數(shù)量標(biāo)簽一起被裁剪了！

于是又想出了另一種方案，這個在以前的布局中其實用到的更多，那就是負(fù)margin。

實現(xiàn)很簡單，給標(biāo)簽容器一個的負(fù)margin-right，這樣，右邊的數(shù)量就會被左邊的標(biāo)簽蓋住，比如

.con{
  margin-right: -20px;
}

效果如下

是不是已經(jīng)被蓋住一部分了？我們繼續(xù)向左偏移

.con{
  margin-right: -50px;
}

這樣就完全看不到右邊的數(shù)量了

那么，如何在超出時顯示數(shù)量呢？這里就體現(xiàn)出負(fù)margin的好處了，可以借助前一個元素來隱藏后一個元素，在這里，我們直接在前面的動畫中還原margin就行了

.con{
  animation: check;
  animation-timeline: scroll(x self);
}
@keyframes check{
  from,to {
    -webkit-mask: linear-gradient(to right, #fff calc(100% - 30px), transparent);
    margin-right: 0;
  }
}

這樣就完美實現(xiàn)了文章開頭所示效果了

你也可以訪問以下鏈接來體驗真實效果（Chrome115+）

• CSS auto tag num (juejin.cn)[2]
• CSS auto tag num (codepen.io)[3]

五、總結(jié)一下

以上就是本文的全部內(nèi)容了，不知道你學(xué)會了嗎？下面總結(jié)一下實現(xiàn)重點(diǎn)：

1. 很多時候，CSS并沒有直接的實現(xiàn)方式，需要“繞”點(diǎn)彎路
2. CSS計數(shù)器可以實現(xiàn)數(shù)字累加
3. CSS滾動驅(qū)動動畫可以檢測元素是否在可視范圍之內(nèi)
4. CSS滾動驅(qū)動動畫還能檢測元素是否內(nèi)容超出
5. 計數(shù)累加器可以放在滾動驅(qū)動動畫中，這樣在動畫觸發(fā)時也就相當(dāng)于計數(shù)器生效了，這樣就能統(tǒng)計可視區(qū)的標(biāo)簽數(shù)量了
6. 樣式查詢只能匹配到子元素，但是用子元素會受到mask遮罩的影響
7. 負(fù)margin可以借助前一個元素來隱藏后一個元素

[1]交叉觀察器 API - Web API 接口參考 | MDN (mozilla.org)： https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API

[2]CSS auto tag num (juejin.cn)： https://code.juejin.cn/pen/7352565668073439241

[3]CSS auto tag num (codepen.io)： https://codepen.io/xboxyan/pen/rNbYpZV

作者:XboxYan

來源-微信公眾號:前端偵探

出處:https://mp.weixin.qq.com/s/_m5UxLQQtDU1GxbLRnCUhQ

TML 或超文本標(biāo)記語言 允許 Web 用戶使用元素、標(biāo)簽和屬性創(chuàng)建和構(gòu)造部分、段落和鏈接。然而，值得注意的是，HTML 不能被視為一種編程語言，因為它不能創(chuàng)建動態(tài)功能。

HTML有很多用例，即：

1. 網(wǎng)頁開發(fā)。開發(fā)人員使用 HTML 代碼來設(shè)計瀏覽器如何顯示網(wǎng)頁元素，例如文本、超鏈接和媒體文件。
2. 互聯(lián)網(wǎng)導(dǎo)航。由于 HTML 被大量用于嵌入超鏈接，因此用戶可以輕松地在相關(guān)頁面和網(wǎng)站之間導(dǎo)航和插入鏈接。
3. 網(wǎng)絡(luò)文檔。HTML 使組織和格式化文檔成為可能，類似于 Microsoft Word。
4. 還值得注意的是，HTML 現(xiàn)在被視為官方 Web 標(biāo)準(zhǔn)。萬維網(wǎng)聯(lián)盟 (W3C)維護(hù)和開發(fā) HTML 規(guī)范，同時提供定期更新。

本文將介紹 HTML 的基礎(chǔ)知識，包括它的工作原理、優(yōu)缺點(diǎn)以及它與 CSS 和 JavaScript 的關(guān)系。

什么是 HTML？

HTML（代表超文本標(biāo)記語言）是構(gòu)成大多數(shù)網(wǎng)頁和在線應(yīng)用程序的計算機(jī)語言。超文本是用于引用其他文本片段的文本，而標(biāo)記語言是告訴 Web 服務(wù)器文檔的樣式和結(jié)構(gòu)的一系列標(biāo)記。

HTML 是如何工作的

html文件

平均每個網(wǎng)站包含幾個不同的信息 HTML 頁面。例如，主頁、關(guān)于頁面和聯(lián)系頁面都將具有單獨(dú)的 HTML 文件。

HTML 文檔是以 .html 或 .htm 擴(kuò)展名結(jié)尾的文件。Web 瀏覽器讀取 HTML 文件并呈現(xiàn)其內(nèi)容，以便互聯(lián)網(wǎng)用戶可以查看它。

html元素的三個部分

所有 HTML 頁面都有一系列 HTML 元素，由一組標(biāo)簽和屬性組成。HTML 元素是網(wǎng)頁的構(gòu)建塊。標(biāo)簽告訴 Web 瀏覽器元素在哪里開始和結(jié)束，而屬性描述元素的特征。

元素的三個主要部分是：

• 開始標(biāo)簽 - 用于說明元素開始生效的位置。標(biāo)簽用左尖括號和右尖括號包裹。例如，使用開始標(biāo)簽 <p> 創(chuàng)建一個段落。
• 內(nèi)容——這是其他用戶看到的輸出。
• 結(jié)束標(biāo)簽 - 與開始標(biāo)簽相同，但在元素名稱前有一個正斜杠。例如，</p> 結(jié)束一個段落。

這三個部分的組合將創(chuàng)建一個 HTML 元素：

<p>這是在HTML中添加段落的方法。</p>

HTML 元素的另一個關(guān)鍵部分是它的屬性，它有兩個部分——名稱和屬性值。名稱標(biāo)識用戶想要添加的附加信息，并且屬性值給出進(jìn)一步的說明。

例如，添加紫色和 font-family verdana 的樣式元素將如下所示：

< p style= "color:purple;font-family:verdana" >這是在HTML中添加段落的方法。< /p >

另一個屬性，HTML 類，對于開發(fā)和編程來說是最重要的。class 屬性添加了可以作用于具有相同類值的不同元素的樣式信息。 例如，我們將對標(biāo)題 <h1> 和段落 <p> 使用相同的樣式。樣式包括背景顏色、文本顏色、邊框、邊距和填充，在 .important 類下。要在 <h1> 和 <p> 之間實現(xiàn)相同的樣式，請在每個開始標(biāo)記后添加 class=”important”：

<html>
<head>
<style>
.important {
  background-color: blue;
  color: white;
  border: 2px solid black;
  margin: 2px;
  padding: 2px;
}
</style>
</head>
<body>
<h1 class="important">This is a heading</h1>
<p class="important">This is a paragraph.</p>
</body>
</html>

大多數(shù)元素都有一個開始標(biāo)簽和一個結(jié)束標(biāo)簽，但有些元素不需要結(jié)束標(biāo)簽即可工作，例如空元素。這些元素不使用結(jié)束標(biāo)簽，因為它們沒有內(nèi)容：

< img src= "/" alt= "圖像" >

這個圖像標(biāo)簽有兩個屬性——一個src屬性，圖像路徑，和一個alt屬性，描述性文本。但是，它沒有內(nèi)容，也沒有結(jié)束標(biāo)簽。

最后，每個 HTML 文檔都必須以 <!DOCTYPE> 聲明開頭，以告知 Web 瀏覽器文檔類型。使用 HTML5，doctype HTML public 聲明將是：

< !DOCTYPE html >

最常用的 HTML 標(biāo)簽和 HTML 元素

目前，有 142 個 HTML 標(biāo)簽可以用于創(chuàng)建各種元素。盡管現(xiàn)代瀏覽器不再支持其中一些標(biāo)簽，但學(xué)習(xí)所有可用的不同元素仍然是有益的。

第二節(jié)將討論最常用的 HTML 標(biāo)簽和兩個主要元素——塊級元素和內(nèi)聯(lián)元素。

塊級元素

塊級元素占據(jù)頁面的整個寬度。它總是在文檔中開始一個新行。例如，標(biāo)題元素將位于與段落元素不同的行中。

每個 HTML 頁面都使用這三個標(biāo)簽：

• <html>標(biāo)簽是定義整個 HTML 文檔的根元素。
• <head> 標(biāo)簽保存頁面標(biāo)題和字符集等元信息。
• <body>標(biāo)簽包含了頁面上出現(xiàn)的所有內(nèi)容。

<html>
  <head>
    <!-- META INFORMATION -->  
  </head>
  <body>
    <!-- PAGE CONTENT -->
  </body>
</html>

其他流行的塊級標(biāo)簽包括：

• 標(biāo)題標(biāo)簽 - 這些范圍從 <h1> 到 <h6>，其中標(biāo)題 h1 的大小最大，當(dāng)它們向上移動到 h6 時變得越來越小。
• 段落標(biāo)簽——全部使用 <p> 標(biāo)簽括起來。
• 列表標(biāo)簽——有不同的變體。<ol> 標(biāo)簽用于有序列表，<ul> 用于無序列表。然后，使用 <li> 標(biāo)記將各個列表項括起來。

內(nèi)聯(lián)元素

內(nèi)聯(lián)元素格式化塊級元素的內(nèi)部內(nèi)容，例如添加鏈接和強(qiáng)調(diào)的字符串。內(nèi)聯(lián)元素最常用于在不破壞內(nèi)容流的情況下格式化文本。

例如，一個 <strong> 標(biāo)簽會以粗體呈現(xiàn)一個元素，而 <em> 標(biāo)簽會以斜體顯示它。超鏈接也是使用 <a> 標(biāo)記和 href 屬性來指示鏈接目標(biāo)的內(nèi)聯(lián)元素：

<a href="https://www.icodingdeu.com/" >點(diǎn)我！</a> 

HTML 演變——HTML 和 HTML5 有什么區(qū)別？

HTML 的第一個版本由 18 個標(biāo)簽組成。從那時起，每個新版本都帶有添加到標(biāo)記中的新標(biāo)簽和屬性。迄今為止，該語言最重大的升級是 2014 年引入的 HTML5。

HTML 和 HTML5的主要區(qū)別在于HTML5 支持新類型的表單控件。HTML5 還引入了幾個語義標(biāo)簽，可以清楚地描述內(nèi)容，例如 <article>、<header> 和 <footer>。

HTML 的優(yōu)點(diǎn)和缺點(diǎn)

就像任何其他計算機(jī)語言一樣，HTML 有其優(yōu)點(diǎn)和局限性。以下是 HTML 的優(yōu)缺點(diǎn)：

優(yōu)點(diǎn)：

• 初學(xué)者友好: HTML 具有干凈且一致的標(biāo)記，以及較淺的學(xué)習(xí)曲線。
• 支持領(lǐng)域廣：該語言被廣泛使用，擁有大量資源和龐大的社區(qū)。
• 無障礙：它是開源的并且完全免費(fèi)。HTML 在所有 Web 瀏覽器中本機(jī)運(yùn)行。
• 靈活的：HTML很容易與PHP和 Node.js等后端語言集成。

就像任何其他計算機(jī)語言一樣，HTML 有其優(yōu)點(diǎn)和局限性。以下是 HTML 的優(yōu)缺點(diǎn)：

缺點(diǎn)：

• 靜止的 該語言主要用于靜態(tài)網(wǎng)頁。對于動態(tài)功能，您可能需要使用 JavaScript 或 PHP 等后端語言。
• 單獨(dú)的 HTML 頁面 用戶必須為 HTML 創(chuàng)建單獨(dú)的網(wǎng)頁，即使元素相同。
• 瀏覽器兼容性 一些瀏覽器采用新特性的速度很慢。有時較舊的瀏覽器并不總是呈現(xiàn)較新的標(biāo)簽。

HTML、CSS 和 Javascript 是如何相關(guān)的

HTML 用于添加文本元素并創(chuàng)建內(nèi)容結(jié)構(gòu)。然而，僅僅建立一個專業(yè)的和完全響應(yīng)的網(wǎng)站是不夠的。因此，HTML 需要借助層級樣式表 (CSS)和JavaScript來創(chuàng)建絕大多數(shù)網(wǎng)站內(nèi)容。

• CSS 負(fù)責(zé)樣式，例如背景、顏色、布局、間距和動畫。
• JavaScript 添加了動態(tài)功能，例如滑塊、彈出窗口和照片庫。這三種語言是前端開發(fā)的基礎(chǔ)。

結(jié)論

HTML 是 Internet 上的主要標(biāo)記語言。每個 HTML 頁面都有一系列創(chuàng)建網(wǎng)頁或應(yīng)用程序內(nèi)容結(jié)構(gòu)的元素。

HTML 是一種對初學(xué)者友好的語言，有很多支持，主要用于靜態(tài)網(wǎng)站頁面。HTML 與用于樣式的 CSS 和用于功能的 JavaScript 一起使用效果最好。

我們還向您展示了一些在線教學(xué)課程，它們將有助于提高您的 HTML 知識或提供對 HTML 的基本理解。

如果您有任何其他喜歡的資源來學(xué)習(xí) HTML，請在評論部分告訴我們。