的代碼本身就是最好的說明文檔。為了追求這一目標,除了寫出優雅的代碼外,給代碼們添加注釋,也是優秀程序員的一個好習慣。由于注釋不會影響程序本身,因此被程序員們玩壞了。
有人用來娛樂,有人用來吐槽,有人用來調侃。程序員壓力大,需要一個地方發泄,可又不能因此斷了思路,于是代碼注釋成了絕佳的地方。
去年,就有這么一個事,蝦米音樂APP被爆出,代碼注釋中含有歧視侮辱性的詞匯,將活動贈送的vip,標注為窮xvip。事件一曝光,就受到廣泛關注,引來罵聲一片。
程序員一看這條注釋,別說,還挺有意思,下回我也玩玩,是個解壓的法子??梢抢习蹇戳?,嚴重點的,估計就炒盤魷魚給這位程序員吃了,怎么能這樣瞎寫呢?
注釋,似乎并不是程序員,發泄情緒的唯一寶地,ID也算是一個情緒垃圾桶。早些時候,知乎html代碼中,曾出現這么一個id名字:“get in zhihu because i am stupid”,譯為“傻子才進入知乎”,地址直接指向首頁,產生了比較惡劣的影響。這事兒估計老板不知道,不然輕則扣績效,重則就是一頓k啊。
你以為只有國內程序員,才這么玩嗎?不!國外玩的更瘋。這是一段來自貝爾實驗室的,第六版Unix Kernel,注釋語句為“you are not expected to understand this”,意思就是,你不可能看懂這個。
在《雷神之錘三競技場》這款游戲中,同樣出現了奇葩的代碼注釋,而且十分露骨,為了和諧,對關鍵位置進行了打碼,請自行腦補。
谷歌創始人謝爾蓋·布林,在學生時代求職時,簡歷上沒有寫明期望的待遇,但如果你去查看他的建立的html代碼,會發現還是有要求的。
A large office,good pay,and very little work.
Frequent expense-account trips to exotic lands would be a plus.
意思就是,辦公室要大,工資要高,工作量還要很少,最好還能經常出差,去國外旅游的。
要求還挺高,不知道如果谷歌的求職者,這么告訴他,謝爾蓋·布林會不會跳起來,拍桌子。
即將離職的程序員,會利用注釋干什么?嗯,別說,這堪稱時尚最良心的程序員了。直接告訴新來的兄弟,這家公司有多坑多坑。剛入職的程序員估計會被嚇跑,然后感謝一下前輩。老板要是看了,估計不發飆都不行了。
做顧客,要是不會看個代碼注釋,被坑了可能還不知道,這是有多悲劇。
當然,閑的蛋疼的猿,還會做這樣的注釋:
或者是這樣:
嗯?如此注釋,娛樂娛樂就好,千萬別嘗試,要不你就得面對憤怒的老板,亦或者是發狂的項目經理……
速總結 ? 在這篇文章中,Louis Lazaris 描述并演示了一些有趣的 HTML 屬性,您可能沒有聽說過也可能沒有聽說過,并且可能會發現它們非常有用,可以在您的項目中親自使用。
一月份,麥迪遜卡納[問她的推特粉絲
今年你想要學習或更深入地學習哪些語言/技術?
typescript、next.js、react、graphql、solidity、node,這幾個是哪個呢
- 麥迪遜卡納 (@Madisonkanna)
2022 年 1 月 3 日
但是我的答案很簡單:HTML。而且我一點也沒有諷刺或嘲弄。當然,我非常清楚在哪些情況下使用哪些標簽,以及如何使用我的 HTML 大部分具有語義性和可訪問性。
但是我確信我已經忘記了一大堆較少使用的屬性,并且可能有一大堆我甚至不知道存在的屬性。這篇文章是我研究的結果,我希望你會發現其中的一些對你有用,因為你在接下來的幾個月里構建 HTML 頁面。
該enterkeyhint屬性是一個全局屬性,可應用于已contenteditable設置為的表單控件或元素true。此屬性可幫助使用虛擬屏幕鍵盤的移動設備上的用戶。
<input type="text" enterkeyhint="done">
復制
enterkeyhint接受七個可能值之一,這些值將確定用戶在他的“輸入”鍵上看到的內容:
您可以看到這些“提示”如何對用戶有用。用戶是否正在執行一系列操作?他們在提交信息嗎?他們在保存設置嗎?根據他們正在做什么,您可以自定義提示以匹配您的應用程序的需求。
您可以通過在移動設備上訪問下面的信息 CodePen 演示來嘗試這個。
<main>
<h2>Using the <code>enterkeyhint</code> Attribute</h2>
<p>View this demo on a mobile device. Note the text in the "enter" key on your mobile device's virtual keyboard.</p>
<input type="text" enterkeyhint="Next">
</main>
body {
font-family: Arial, sans-serif;
font-size: 20px;
padding: 0 20px;
}
main {
text-align: center;
margin: 0 auto;
max-width: 800px;
}
p {
text-align: left;
padding: 0 20px;
}
code {
color: firebrick;
}
在我的 iOS 設備上,回車鍵的文本會隨著鍵的顏色而變化,具體取決于值,如下面的屏幕截圖所示。這可能會有所不同,具體取決于用戶的設備。
只是強調一下,這個屬性不接受自定義值;該值需要是上面顯示的七個之一。無法識別的值將默認為輸入鍵的設備默認為文本。
在為本文進行研究時,這對我來說是全新的,可能是此列表中最有趣的一個。作為一些背景知識,如果您不知道,Firefox 有一個選項可讓您選擇查看頁面時要使用的樣式表。通常,此功能顯示兩個選項:“基本頁面樣式”和“無樣式”,如下圖所示在我的 Windows 機器上。
這使您可以快速測試禁用樣式時頁面的外觀,還允許您使用任何備用樣式表查看頁面。
備用樣式表功能通過兩個屬性啟用:title屬性和rel=alternate應用于<link>元素,如下面的代碼所示:
<link href="main.css" rel="stylesheet" title="Default">
<link href="contrast.css" rel="alternate stylesheet" title="High Contrast">
<link href="readable.css" rel="alternate stylesheet" title="Readable">
在這種情況下,我的“默認”樣式將自動應用,但僅限于我使用 Firefox 的“頁面樣式”選項選擇它們時,備用樣式表才會應用。您可以通過使用 Firefox 或其他兼容瀏覽器訪問以下 CodePen 來嘗試上述示例:
下面的屏幕截圖顯示了 Firefox 中的樣式表選項:
如前所述,此功能在 Firefox 中有效,但我無法讓它在任何時候基于 Chromium 瀏覽器中工作。MDN關于備用樣式表的文章說它可以在其他瀏覽器中使用擴展啟用,但我找不到可以執行此操作的活動擴展。
我敢肯定你<blockquote>經常使用這個元素。您可以在沒有屬性的情況下直接使用它,但您也可以選擇使用該cite屬性。這是一個引用描述使用citeon的 MDN 文章的示例<blockquote>:
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote#attr-cite">
A URL that designates a source document or message for the information quoted. This attribute is intended to point to information explaining the context or the reference for the quote.
</blockquote>
由于我上面的地塊引用來解釋了什么是 MDN 文章cite,因此我將指向頁面的 URL 設置為cite值。
您可以看到這是多么有用,因為它將引用和引用的來源包裝在一個元素中。但請注意HTML 規范中的進一步解釋:
用戶代理可能允許用戶關注此類引用鏈接,但它們主要用于私人用途(例如,通過服務器端腳本收集有關站點使用引用的統計信息),而不是供讀者使用。
當然,相同的概念也適用于用于內聯引用cite的元素上。<q>
<ol>經常使用使用該元素的有序列表。一些鮮為人知的功能允許您自定義出現在此類列表中的編號行為:
如您所見,使用純 HTML 的有序列表比您通常習慣的要靈活得多。
該reversed屬性是一個有趣的屬性,因為它實際上并沒有反轉列表本身的內容;它只會反轉每個列表項旁邊的數字。
<ol reversed>
<li>List item...</li>
<li>List item...</li>
<li>List item...</li>
</ol>
下面的 CodePen 演示添加了一些 JavaScript,因此您可以交互地切換reversed屬性。
請注意,列表本身保持不變,但數字會發生變化。如果您正在尋找一種反轉內容的方法,請記住這一點。這是您可以使用 JavaScript、CSS 或直接在 HTML 源代碼中執行的操作。
上面,我還提到了其他三個屬性。讓我們將它們合并到列表中,看看如何使用它們:
<ol reversed start="20" type="1">
<li>Typee: A Peep at Polynesian Life (1846)</li>
<li>Omoo: A Narrative of Adventures in the South Seas (1847)</li>
<li>Mardi: and a Voyage Thither (1849)</li>
<li>Redburn: His First Voyage (1849)</li>
<li value="100">White-Jacket; or, The World in a Man-of-War (1850)</li>
<li>Moby-Dick; or, The Whale (1851)</li>
<li>Pierre; or, The Ambiguities (1852)</li>
<li>Isle of the Cross (1853 unpublished, and now lost)</li>
</ol>
請注意,已添加的type和屬性以及單個列表項上的屬性。該屬性接受表示編號類型的五個單字符值(、、、、 )之一。start``value``type``a``A``i``I``1
使用以下交互式演示進行嘗試:
使用單選按鈕選擇該type屬性的五個值之一。然后嘗試使用Toggle Reversed按鈕反轉列表。如您所見,除了有序列表的默認行為之外,還有很多可能性!
就像網絡上無處不在的鏈接一樣,擁有一個使鏈接更加強大的屬性總是很好的。該download屬性是幾年前添加到規范中的,它允許您指定單擊鏈接時應該下載而不是訪問該鏈接。
<a href="/example.pdf" download>Download File</a>
如果沒有值,該download屬性會強制下載鏈接頁面?;蛘撸梢蕴峁┮粋€值,瀏覽器將其用作下載資源的建議文件名。
<a href="/example.pdf" download="my-download.pdf">Download File</a>
作為涉及此屬性的額外技巧,您可以將此功能與一些 JavaScript 結合起來,為用戶創建一種下載他們自己創建的內容的方式。
在研究這篇文章時,這對我來說是另一篇全新的文章——而且在規范中似乎相當新。將decoding屬性添加到圖像元素可為瀏覽器提供圖像解碼提示。
<img src="/images/example.png" alt="Example" decoding="async">
此屬性類似于async在腳本上使用該屬性。加載圖像所需的時間不會改變,但其“解碼”的方式(因此其內容在視口中變得可見)由decoding屬性決定。
值為:
如果您對解碼圖像的概念感到好奇,該規范有[一個很好的解釋],并不難理解。
您可能已經知道,圖像元素現在可以包含一個loading屬性,將延遲加載作為一項功能放入瀏覽器中,這是我們多年來使用 JavaScript 解決方案所做的事情。但不要忘記該loading屬性也可以用于<iframe>元素:
<iframe src="/page.html" width="300" height="250" loading="lazy">
復制
與圖像一樣,該loading屬性接受eager(默認瀏覽器行為)或 的值lazy,這會延遲 iframe 內容的加載,直到 iframe 即將進入視口。此屬性的唯一缺點是 Firefox 不支持在 iframe 上使用它(盡管 Firefox 確實支持loading圖像)。
在大多數情況下,您會將表單輸入和控件嵌套在<form>元素中。但是,如果您的應用程序或布局需要一些不同的東西,您可以選擇將表單輸入放在您想要的任何位置,并將其與任何<form>元素相關聯——即使不是元素的父元素。
<form id="myForm" action="/form.php">
<input id="name">
<button type="submit">
</form>
<input type="email" form="myForm">
正如您在上面看到<input>的,表單外部的電子郵件的form屬性設置為myForm,該屬性設置為與表單的 相同的值id。submit您可以使用此屬性和表單的 id將表單控件(包括按鈕)與文檔中的任何表單相關聯。
您可以使用此演示頁面進行嘗試。表單使用 GET 請求提交,因此您可以在 URL 的查詢字符串中看到提交的值。在該頁面上,“評論”框位于<form>元素之外。
我對這個屬性的唯一抱怨是它可能應該被賦予一個更獨特的名稱,也許像“formowner”之類的東西。盡管如此,如果您的設計或布局需要無父表單字段,請記住它是有用的。
我在處理塊引用時已經提到cite過,但是這個屬性也可以用于用<del>and<ins>元素標記的刪除和插入。此外,兩個元素都可以包含一個datetime屬性。
<del
cite="https://bugzilla.mozilla.org/show_bug.cgi?id=1620467"
datetime="2020-07-23"
>Firefox doesn't support CSS's standard <code>appearance</code> property, so you can only use it prefixed.</del>
<ins
cite="https://bugzilla.mozilla.org/show_bug.cgi?id=1620467"
datetime="2020-07-23"
>The <code>appearance</code> property, previously only available prefixed in Firefox, can now be used in all modern browers unprefixed.</ins>
對于每個元素,這兩個屬性代表的內容如下:
在我的例子中,我使用了一些文本的例子,描述了一個在 Firefox 中需要供應商前綴的 CSS 屬性。這可能是一篇舊博客文章。刪除前綴后,我可以使用and元素來delete獲取舊文本和insert新文本。然后我可以使用該屬性來引用解決問題的錯誤報告。<del>``<ins>``cite
最后,這最后一個有點像老歌,但因為它不經常被使用,也許你甚至不知道它的存在。這是一個元素和一個屬性的組合。
<select>如果下拉選項中包含一長串項目,則可以使用<optgroup>元素及其關聯label屬性將選項分組為可見類別:
<select>
<option>--Your Favourite Animal--</option>
<optgroup label="Birds">
<option>Blue Jay</option>
<option>Cardinal</option>
<option>Hummingbird</option>
</optgroup>
<optgroup label="Sea Creatures">
<option>Shark</option>
<option>Clownfish</option>
<option>Whale</option>
</optgroup>
<optgroup label="Mammals">
<option>Lion</option>
<option>Squirrel</option>
<option>Quokka</option>
</optgroup>
</select>
您可以使用以下 CodePen 來試用一個示例:
請注意,每個<optgroup>都有一個label為每個組定義標題的屬性——但不能選擇標題。作為額外提示,您還可以使用disabledan 上的屬性來禁用下拉菜單<optgroup>該部分中的所有選項。<select>
這是我在研究本文時的另一對新屬性,它們在規范中也是相對較新的。
這兩個屬性都可以與元素一起定義rel=preload,as如下<link>所示:
<link rel="preload"
as="image"
imagesrcset="images/example-480.png 480w,
images/example-800.png 800w,
images/example.png 2000w"
imagesizes="(max-width: 600px) 480px,
(max-width: 1000px) 800px,
1000px"
src="images/example.png"
alt="Example Image">
這里的使用rel=preload通知瀏覽器我們希望指定的資源優先加載,因此它們不會被腳本和樣式表之類的東西阻塞。該as屬性指定所請求內容的類型。
您可以使用href屬性以及preload和預加載常規圖像as。但最重要的是,您可以使用imagesrcsetandimagesizes屬性,就像我在上面的代碼中所做的那樣。
這允許您預加載正確的圖像,具體取決于視口的大小或您在imagesizes屬性中指定的其他媒體功能。
除了我已經詳細描述和演示的屬性之外,您可能還想了解其他一些屬性,我將在這里簡要提及:
如果您使用過本文中提到的任何屬性,或者如果您知道在您的項目中使用過的另一個 HTML 功能,請隨時在評論中告訴我。
起程序員,外行的人對程序員古板的印象是格子衫、雙肩包、黑眼睛框、不懂浪漫的指南。但實際上,程序員也是很浪費的!
七夕馬上到了,我整理了一些程序員七夕表白代碼,總共有40款。計劃告別的同學收藏起來了(文末下載)。
我們一起看下其中幾個,更多請下載查看。
01 滿滿愛心
02 相冊動畫
03 戀愛日志
04 戀愛PPT
05 表白書信
05 煙花特效
表白的套路很多,但都少不了送花送禮物,作為一個程序員,搞不懂現在流行的泡泡機、小豬、重力感應車等玩具,也不想去讓朋友們去送錢炫耀,畢竟真情才重要,錢就物質了。我能給各位單身粉絲們做的可能就只有分享幾個表白代碼了,在電腦上敲上幾行代碼,讓她在郁悶的周一得到一個大大的驚喜,很簡單,一看就會,如果現在用不到也不要緊,先收藏起來,反正這樣的節日很多,以后用的時候能找到。
私信回復:1022
*請認真填寫需求信息,我們會在24小時內與您取得聯系。