整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
①關注“四六級考蟲”公眾號
②這個頁面下滑
③找到這個，點展開
④點擊圖片里的，然后長按識別二維碼，點“備份準考證，預約查分”，輸入你的一些信息，這樣等四六級出成績就會通過公眾號推送給你啦
注：準考證號可以到四六級的官網查，如果忘記了的話。
作文和翻譯以我知道的是不會打0分的，正常來說都會高于5分（換算分的5分）
作文換算：
該圖源于網絡
翻譯換算：
該圖源于網絡
PS：我是大學生，以上屬于個人見解，沒有打廣告的意思
#四六級#?#英語四六級估分#
代CSS強大的令人難以置信。
這次我們來用 CSS 實現這樣一個功能：有多個寬度不同的標簽水平排列，當外層寬度不足時，會提示超出的數量，演示效果如下
如果讓我用 JavaScript來實現估計都有點折騰，畢竟寬度都是動態的，要監聽各部分的尺寸變化，包括標簽的位置和外層的寬度，總之不是一兩行代碼就能搞定的。
現如今，純CSS也能完美的實現這樣的效果，而且比 JS 實現更加簡單，一起來看看吧
很多時候，CSS并沒有直接的實現方式，需要“繞”點彎路，將需求拆分成很多小點，然后逐一突破。
回到本文這里，其實有幾個問題需要考慮：
關于第3點，其實在之前這篇文章中有詳細介紹，有興趣可以回顧一下，非常有意思
純 CSS 檢測文本是否溢出
那么第一點，CSS有沒有什么方式可以統計數量呢？
沒錯，相信很多小伙伴已經猜到了，就是利用 CSS計數器，示意如下
counter-reset: num var(--num);
counter-increment: num;
::after{
content: "+"counter(num);
}
關于計數器，我之前也在很多文章中有用到
你可能不需要 JS！CSS實現一個計時器
如何讓CSS計數器支持小數的動態變化？
還在使用定時器嗎？CSS 也能實現電子時鐘
動畫合成小技巧！CSS 實現動感的倒計時效果
自定義計數器小技巧！CSS 實現長按點贊累積動畫
然后是第二點，CSS有什么方式可以知道元素是出去了還是在視野之內呢？
如果是用 JS來判斷的話，最穩妥的方式應該Intersection Observer（交叉觀察者），相信很多同學都用過，這個在圖片懶加載非常有用
交叉觀察器 API - Web API 接口參考 | MDN (mozilla.org)[1]
那么，CSS中有什么類似的呢？沒錯，還是之前提到過的CSS滾動驅動動畫。
不過這里用到的是視圖進度，也就是關注的是元素自身位置，元素進入到容器范圍之內就會觸發動畫，非常類似 JS中的Intersection Observer
tag{
animation: appear;
animation-timeline: view(inline);
animation-range: contain;
}
@keyframes appear{
to {
background-color: #9747FF;
}
}
這里就不詳細介紹了，有興趣回顧之前這篇文章
CSS 滾動驅動動畫終于正式支持了~
好了，關鍵原理就這些了，我們需要做的就是想辦法將「計數器」和「元素進出容器范圍」關聯起來就行了，接著往下看
利用 CSS 計數器，我們可以很輕松的統計元素的數量。
先簡單布局一下文章開頭的例子，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><!--用來計數的標簽-->
然后美化一下
.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 布局（超出隱藏），后面跟一個數字
現在我們定義一個計數器，然后通過每個tag進行累計，有多個tag相當于多少次累加，最后在::after中顯示出來
.con{
counter-reset: num; /*計數器初始值，默認為0*/
}
.tag{
counter-increment: num; /*計數器增量值，默認為1*/
}
.num::after{
content: "+"counter(num);
}
默認計數器的起始值是 0，每次累計是1，所以這里最后得到了7，這樣就能實時統計元素的數量了
當然，我們也可以自定義這些默認值，比如
.con{
counter-reset: num 10;
}
.tag{
counter-increment: num -1;
}
這種情況下，起始值是10，增量值是-1，所以最后得到了3，如下
那么，該如何統計容器之外的標簽數量呢？
這里我們要利用CSS 視圖進度時間軸，也就是觀察元素自身的位置，在進入到容器范圍之內執行動畫。
拿上面這個例子，我們給標簽添加一個動畫，讓標簽在進入到容器之內時變個顏色，實現如下
.tag{
animation: appear;
animation-timeline: view(inline);
}
@keyframes appear{
to {
background-color: #4d47ff;
}
}
由于是水平方向，所以這里需要設置view(inline) ，效果如下
好像不是很明顯？這是因為動畫是在整個視區內過渡的，我們可以改變動畫時間線的區間animation-range，讓這個動畫在進出的一瞬間就變化
.tag{
animation: appear;
animation-timeline: view(inline);
animation-range: contain;
}
@keyframes appear{
from,to {
background-color: #4d47ff;
}
}
效果如下
那么，這個效果和前面的計數器有什么關聯呢？
從效果上來看，在視區內會執行一個動畫，如果在這個動畫中加入計數器的累加會怎么樣呢？先去除原先的累加器
.tag{
/* counter-increment: num; */
}
@keyframes appear{
from,to {
background-color: #4d47ff;
counter-increment: num;
}
}
效果如下
可以看到計數器已經生效了，不過現在統計的在「可視區內」標簽的數量。而我們要統計的是「可視區外」的數量，好像反過來了，如何實現呢？
這里有兩種思路。
第一種，用總數減去可視區內的數量，不就行了嗎？由于現在動畫是針對可視區內的，我們可以給計數器設置一個初始值，就是總量，然后動畫中給累加值設置為-1，就相當于減去當前數量了，實現如下
.con{
counter-reset: num 7;
}
@keyframes appear{
from,to {
background-color: #4d47ff;
counter-increment: num -1;
}
}
這樣就完美統計出了可視區外的數量了
還有一種方式，我覺得更加巧妙，需要反向思考。原理是重置當前的累加值，比如默認情況下，正常累加，進入可視范圍，把累加值設置為0，不就相當于可視區外的正常累加了嗎？
.tag{
counter-increment: num;
}
@keyframes appear{
from,to {
background-color: #4d47ff;
counter-increment: num 0;
}
}
同樣能達到相同的效果
現在基本已經達到我們需要的效果了
首先是，在超出范圍時，需要在邊緣出添加一個半透明蒙層，這樣體驗效果會更好。
半透明蒙層很好實現，只需要添加一個水平漸變的mask遮罩就行了
.con{
-webkit-mask: linear-gradient(to right, #fff calc(100% - 30px), transparent);
}
效果如下
那么，如何在沒有超出時，不出現這個遮罩呢？
這個其實在之前的文章中有詳細介紹了，建議回顧一下
純 CSS 檢測文本是否溢出
利用CSS滾動驅動動畫，可以檢測容器是否可滾動，也就是是否超出。所以我們只需要將遮罩放在滾動驅動動畫里就行了，關鍵實現如下
.con{
animation: check;
animation-timeline: scroll(x self);
}
@keyframes check{
from,to {
-webkit-mask: linear-gradient(to right, #fff calc(100% - 30px), transparent);
}
}
效果如下
還有一個問題，希望在沒有超出的時候不顯示后面的數量。
關于這個，我本來是打算用樣式查詢來實現，但是遇到了一個問題，由于樣式查詢只能匹配到子元素，所以不得不將顯示數量的標簽放到.con容器內。但是這樣一來，mask遮罩就會出現問題，就像這樣
遮罩層連同數量標簽一起被裁剪了！
于是又想出了另一種方案，這個在以前的布局中其實用到的更多，那就是負margin。
實現很簡單，給標簽容器一個的負margin-right，這樣，右邊的數量就會被左邊的標簽蓋住，比如
.con{
margin-right: -20px;
}
效果如下
是不是已經被蓋住一部分了？我們繼續向左偏移
.con{
margin-right: -50px;
}
這樣就完全看不到右邊的數量了
那么，如何在超出時顯示數量呢？這里就體現出負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;
}
}
這樣就完美實現了文章開頭所示效果了
你也可以訪問以下鏈接來體驗真實效果（Chrome115+）
以上就是本文的全部內容了，不知道你學會了嗎？下面總結一下實現重點：
[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 或超文本標記語言 允許 Web 用戶使用元素、標簽和屬性創建和構造部分、段落和鏈接。然而，值得注意的是，HTML 不能被視為一種編程語言，因為它不能創建動態功能。
HTML有很多用例，即：
本文將介紹 HTML 的基礎知識，包括它的工作原理、優缺點以及它與 CSS 和 JavaScript 的關系。
HTML（代表超文本標記語言）是構成大多數網頁和在線應用程序的計算機語言。超文本是用于引用其他文本片段的文本，而標記語言是告訴 Web 服務器文檔的樣式和結構的一系列標記。
在國內的網站上找了一圈，這應該是介紹歷史最細致的，長按保存手機里翻譯
平均每個網站包含幾個不同的信息 HTML 頁面。例如，主頁、關于頁面和聯系頁面都將具有單獨的 HTML 文件。
HTML 文檔是以 .html 或 .htm 擴展名結尾的文件。Web 瀏覽器讀取 HTML 文件并呈現其內容，以便互聯網用戶可以查看它。
所有 HTML 頁面都有一系列 HTML 元素，由一組標簽和屬性組成。HTML 元素是網頁的構建塊。標簽告訴 Web 瀏覽器元素在哪里開始和結束，而屬性描述元素的特征。
元素的三個主要部分是：
這三個部分的組合將創建一個 HTML 元素：
<p>這是在HTML中添加段落的方法。</p>HTML 元素的另一個關鍵部分是它的屬性，它有兩個部分——名稱和屬性值。名稱標識用戶想要添加的附加信息，并且屬性值給出進一步的說明。
例如，添加紫色和 font-family verdana 的樣式元素將如下所示：
< p style= "color:purple;font-family:verdana" >這是在HTML中添加段落的方法。< /p >另一個屬性，HTML 類，對于開發和編程來說是最重要的。class 屬性添加了可以作用于具有相同類值的不同元素的樣式信息。 例如，我們將對標題 <h1> 和段落 <p> 使用相同的樣式。樣式包括背景顏色、文本顏色、邊框、邊距和填充，在 .important 類下。要在 <h1> 和 <p> 之間實現相同的樣式，請在每個開始標記后添加 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>大多數元素都有一個開始標簽和一個結束標簽，但有些元素不需要結束標簽即可工作，例如空元素。這些元素不使用結束標簽，因為它們沒有內容：
< img src= "/" alt= "圖像" >這個圖像標簽有兩個屬性——一個src屬性，圖像路徑，和一個alt屬性，描述性文本。但是，它沒有內容，也沒有結束標簽。
最后，每個 HTML 文檔都必須以 <!DOCTYPE> 聲明開頭，以告知 Web 瀏覽器文檔類型。使用 HTML5，doctype HTML public 聲明將是：
< !DOCTYPE html >目前，有 142 個 HTML 標簽可以用于創建各種元素。盡管現代瀏覽器不再支持其中一些標簽，但學習所有可用的不同元素仍然是有益的。
第二節將討論最常用的 HTML 標簽和兩個主要元素——塊級元素和內聯元素。
塊級元素占據頁面的整個寬度。它總是在文檔中開始一個新行。例如，標題元素將位于與段落元素不同的行中。
每個 HTML 頁面都使用這三個標簽：
<html>
<head>
<!-- META INFORMATION -->
</head>
<body>
<!-- PAGE CONTENT -->
</body>
</html>其他流行的塊級標簽包括：
內聯元素格式化塊級元素的內部內容，例如添加鏈接和強調的字符串。內聯元素最常用于在不破壞內容流的情況下格式化文本。
例如，一個 <strong> 標簽會以粗體呈現一個元素，而 <em> 標簽會以斜體顯示它。超鏈接也是使用 <a> 標記和 href 屬性來指示鏈接目標的內聯元素：
<a href="https://www.icodingdeu.com/" >點我！</a> HTML 的第一個版本由 18 個標簽組成。從那時起，每個新版本都帶有添加到標記中的新標簽和屬性。迄今為止，該語言最重大的升級是 2014 年引入的 HTML5。
HTML 和 HTML5的主要區別在于HTML5 支持新類型的表單控件。HTML5 還引入了幾個語義標簽，可以清楚地描述內容，例如 <article>、<header> 和 <footer>。
就像任何其他計算機語言一樣，HTML 有其優點和局限性。以下是 HTML 的優缺點：
優點：
就像任何其他計算機語言一樣，HTML 有其優點和局限性。以下是 HTML 的優缺點：
缺點：
HTML 用于添加文本元素并創建內容結構。然而，僅僅建立一個專業的和完全響應的網站是不夠的。因此，HTML 需要借助層級樣式表 (CSS)和JavaScript來創建絕大多數網站內容。
HTML 是 Internet 上的主要標記語言。每個 HTML 頁面都有一系列創建網頁或應用程序內容結構的元素。
HTML 是一種對初學者友好的語言，有很多支持，主要用于靜態網站頁面。HTML 與用于樣式的 CSS 和用于功能的 JavaScript 一起使用效果最好。
我們還向您展示了一些在線教學課程，它們將有助于提高您的 HTML 知識或提供對 HTML 的基本理解。
如果您有任何其他喜歡的資源來學習 HTML，請在評論部分告訴我們。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
