、HTML文本結(jié)構(gòu)

瀏覽器通常會為其文本元素添加不同的樣式，以區(qū)別于普通文本。例如 em 和 cite 元素中的文本都是斜體的。又如，code 元素專門用來格式化腳本或程序中的代碼，該元素中的文本默認(rèn)使用等寬字體。內(nèi)容顯示的樣子與其使用的標(biāo)記沒有關(guān)系。因此不應(yīng)該為了讓文字變?yōu)樾斌w就使用 em 或 cite，添加樣式是 css 的事情。相反，應(yīng)該選擇能描述內(nèi)容的 HTML 元素。

1. 添加段落：要在網(wǎng)頁中開始一個新的段落，使用 p元素。（通過 css 可以為段落添加樣式，包括字體、字號、顏色等。以及控制內(nèi)行間距，段落文本對齊方式等。）

<p> HTML <small> HyperText Markup Language </small> </p> 

1. 指定細(xì)則：small元素 表示細(xì)則一類的旁注，通常是文本中的一小塊。

<p> HTML <small> HyperText Markup Language </small> </p> 

3.標(biāo)記重要和強調(diào)文本：strong元素 表示內(nèi)容的重要性，而 em元素 表示內(nèi)容的著重點。

   <p> <strong> Warning:Do not approach the ... <em>
     under any... </em> </strong> just because... </p>

瀏覽器通常將 strong 文本以粗體顯示，em 文本以斜體顯示。可以用 CSS 將任何文本變?yōu)榇煮w或斜體，也可以覆蓋 strong 和 em 等元素的瀏覽器默認(rèn)顯示樣式。

4.創(chuàng)建圖：圖可以是圖表、照片、圖形、插圖、代碼片段以及其他類似的獨立內(nèi)容。通過引入 figure 和 figcaption，figcaption 是 figure 的標(biāo)題。

<figure>
<figcaption>
 [標(biāo)題內(nèi)容]
</figcaption>
 [插入內(nèi)容]
<img src = "xxx.png" width = "180" height = "143" 
 alt = "Reveue chart:Clothing 42%,Toys 36%, Food 22%" />
</figure>

figcaption 元素并不是必須的，但是只有包含它，就必須是 figure 元素內(nèi)嵌的第一個或最后一個，且只能有一個。 5.指明引用或參考：使用 cite元素 可以指明對某內(nèi)容源的引用或參考。默認(rèn)以斜體顯示（不因使用 cite 引用人名）

 <p> he Listend to <cite> Abbey Road </cite> </p>

6.引述文本：有兩個特殊的元素用以標(biāo)記引述的文本。blockquote元素 表示單獨存在的引述，其默認(rèn)顯示在新的一行。而 q元素 則用于短的引用，如句子里面的引述。由于q元素存在夸瀏覽器問題，應(yīng)該避免使用，而是直接輸入引號。

<blockquote>
 text...
</blockquote>
瀏覽器對應(yīng)q元素中的文本自動加上語音的引號。
<p> And then she said,<q lang ="" > Have you read... </q> </p>

7.指定時間：使用 time元素 標(biāo)記時間、日期或時間段。輸入 datetime="time" 指定格式日期，可以按照你希望的任何形式表示日期。

<time> 16:20 </time>  <time > 2021-07-24 </time>
<time datetime= "2021-07-24"> Ochtober 24,2021 </time>

8.解釋縮寫詞：使用 abbr元素 標(biāo)記縮寫詞并解釋其含義。（通常是使用括號提供縮寫詞的全稱是解釋縮寫詞最直接的方式）

<p> The <abbr title = "Notional Football league"> NFL </abbr> </p>
<p> But,that's ... <abbr> MLB </abbr> (Major league Baseball) ... </p>

9.定義術(shù)語:在HTML中定義術(shù)語時，使用 dfn元素 對其作語義上的區(qū)分，首次定義術(shù)語通常會對其添加區(qū)別于其他文本格式，后續(xù)在使用術(shù)語時不再需要使用dfn對其進(jìn)行標(biāo)記。 （默認(rèn)以斜體顯示）

  <p> The contesttant ... <dfn> pleonasm </dfn> </p>

10.創(chuàng)建上標(biāo)和下標(biāo):比主體文本稍高或稍低的字母或數(shù)字分別成稱為上標(biāo)和下標(biāo)。可以使用 sub元素 創(chuàng)建下標(biāo)， sup元素 創(chuàng)建上標(biāo)。上標(biāo)和下標(biāo)字符會輕微地擾亂行與行之間的均勻間距，但可以使用 CSS 修復(fù)這個問題。

<p> ... <a href = "#footnote-1" title = "REad footnote 1"> 
    Text   <sub> 1 </sub> </a> </p>
<p> ... <a href = "#footnote-1" title = "REad footnote 1">
    Text <sup> 1 </sup> </a> </p>

11.添加作者聯(lián)系方式: address元素 用以定于與 HTML 頁面或頁面一部分有關(guān)的作者、相關(guān)人士信息或組織聯(lián)系信息，通常位于頁面底部或相關(guān)部分內(nèi)。

 <footer role = "contentinfo">
  <p> <small> ? 2021 The Paper of ... </small> </p>
 <address>
  Hava a question or ... <a href = "site-feedback.html"> Contact our </a>
  </address>		
</footer>

12.標(biāo)注編輯和不再準(zhǔn)確的文本:有時可能需要將在前一版本之后對頁面的編輯標(biāo)出來，或者對不再準(zhǔn)確、不再相關(guān)的文本進(jìn)行標(biāo)記。有兩種用于標(biāo)注編輯的元素：代表添加內(nèi)容的 ins元素 和標(biāo)記已經(jīng)刪除內(nèi)容的 del元素。

  <li> <del> desks </del> </li>
  <li> <ins> bicycle </ins> </li>

通常對已刪除的文本加上刪除線，對插入的文本加入下劃線。標(biāo)記不再準(zhǔn)確或不再相關(guān)的文本

  <li> <s> 5 p.m </s> SOLD </li>

13.標(biāo)記代碼:如果你的內(nèi)容包含代碼示例或文件名，使用 code元素。

 <p> The <code> showPhoto() </code> ... <code> < ;ul 
 id = "thumbanil" > </code> list </p>

14.使用預(yù)格式化的文本：通常瀏覽器會將所有額外的回車和空格壓縮，并根據(jù)窗口大小自動換行，預(yù)格式化的文本可以保持固有的換行和空格。pre元素。

<pre>
 <code>
  abbr[title] {
    border-boottom: 1px dotted #000;
  }
</code>

如果要顯示包含 HTML 元素內(nèi)容，應(yīng)將包圍元素名稱的 < 和 > 分別改為對應(yīng)的字符實體<和 >否則瀏覽器就會試著顯示這些元素。大多數(shù)情況下推薦隊 div 元素使用 white-space:pre 以替代 pre，因為空格可能對這些內(nèi)容的語義非常重要。

15.突出顯示文本：類似文本中的熒光筆！HTML5 使用新的 mark元素 實現(xiàn)，引起讀者對特定文本片段的注意。對原生支持的瀏覽器將對該元素文字默認(rèn)加上黃色背景。

<p> GSL is <mark> YYDS! </mark>     

16.創(chuàng)建換行：當(dāng)我們希望在文本中手動強制文字進(jìn)行換行時，可以使用 br元素 (空元素).

<p> 123 <br />
    456 <br />
</p>

17.創(chuàng)建span：同 div 一樣，span元素 是沒有任何語義的，不同的是，span 只適合包圍字詞或短語內(nèi)容，而 div 適合包含塊級內(nèi)容。

 <p> Gaudi's work was essentially useful.
 <span lang ="es"> La Casa Mila </span> is an ...
 </p>

18.其他元素：

U元素：用來為文本添加下劃線。

wbr元素：表示可換行處。讓瀏覽器知道在哪里可以根據(jù)需要進(jìn)行換行（存在跨版本問題）。

ruby元素：旁注標(biāo)記是一種慣用符號，通常用于表示生僻字的發(fā)音。

bdi和bdo元素：如果某些頁面中混合了從左至右書寫的字符（如拉丁字符）和從右至左書寫的字符（如阿拉伯語）, 就可能使用到bdi和bdo元素。

meter元素：用 meter 元素表示分?jǐn)?shù)的值或已知范圍的測量結(jié)果。

  <p> Project completion status: <meter value="0.60">80% completed </meter> </p>

progress元素:表示某項任務(wù)完成的進(jìn)度，可用它表示一個進(jìn)度條。不能與 meter 混在一起使用。

<p> Current progress: <progress max="100" value="30"> 30% saved </progress> </p>

二、 HTML圖片

在頁面插入圖片：輸入 <img src=image.url" />

<img src="xxx.jpg" alt="" />      

提供替代文本：在 img 標(biāo)簽內(nèi)，src 屬性及值的后面，輸入 alt=""； 輸入圖像出于某種原因沒有顯示時應(yīng)該出現(xiàn)的文本。指定圖像的尺寸：在 img 標(biāo)簽內(nèi)，src 屬性后輸入width="x", heigth="y"; 以像素為單位指定 x 和 y。

三、 HTML鏈接

創(chuàng)建一個指向另一個網(wǎng)頁的鏈接：

輸入 <a href="URL"> 此處輸入鏈接標(biāo)簽 </a>
    
<a href = "http://www.baidu.com"> 百度一下 </a>    

創(chuàng)建錨并鏈接到錨： 通常激活一個鏈接會將用戶帶到對應(yīng)網(wǎng)頁的頂端。如果想用戶跳至網(wǎng)頁特定區(qū)域，可以創(chuàng)建一個錨，并在鏈接中引用該錨。

1.創(chuàng)建錨： 輸入 id="anchor-name",其中 name 是在內(nèi)部用來標(biāo)識網(wǎng)頁中這部分內(nèi)容的文字。

2.創(chuàng)建錨鏈接到特定錨鏈接：輸入 <a href="#"anchor-name>，其中 anchor-name 是目標(biāo)的 id 屬性值。

3.輸入標(biāo)簽文本（默認(rèn)帶下劃線藍(lán)色字體），用戶激活該字體時將用戶帶到（1）步中引用的區(qū)域文本。

```<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Creating and Linking to Anchors</title>
</head>
<body>

<article>
	<header>
		<h1>Frequently Asked Questions (FAQ)</h1>
		
		<nav>
			<ul>
				<li><a href="#question-01">Can an id have more than one word?</a></li>
				<li><a href="#question-02">Can visitors bookmark anchor links?</a></li>
				<li><a href="#question-03">My anchor link isn't working. What am I doing wrong?</a></li>
				<li><a href="#question-04">How do I link to a specific part of someone else's webpage?</a></li>
			</ul>
		</nav>
	</header>

	<h2 id="question-01">Can an id have more than one word?</h2>
	<p>Yes, your ids can have more than one word as long as there are no spaces. Separate each word with a dash instead.</p>

	<h2 id="question-02">Can visitors bookmark anchor links?</h2>
	<p>Yes, they can! And when they visit that link, the browser will jump down to the anchor as expected. Visitors can share the link with others, too, so all the more reason to choose meaningful anchor names.</p>

	<h2 id="question-03">My anchor link isn't working. What am I doing wrong?</h2>
	<p>The problem could be a few things. First, double-check that you added an id (without "#") to the element your link should point to. Also, be sure that the anchor in your link <em>is</em> preceded by "#" and that it matches the anchor id.</p>

	<h2 id="question-04">How do I link to a specific part of someone else's webpage?</h2>
	<p>Although you obviously can't add anchors to other people's pages, you can take advantage of the ones that they have already created. View the source code of their webpage to see if they've included an id on the part of the page you want to link to. (For help viewing source code, consult "The Inspiration of Others" in Chapter 2.) Then create a link that includes the anchor.</p>
</article>

</body>
</html>

作者：excavate
https://juejin.cn/post/6988467705909248014

家好，我是零一，轉(zhuǎn)眼又到了 2022 年，相信大家去年收藏夾里一定多了不少寶藏工具，快一起來分享一下吧~ 我先來！

CSS 布局生成器

Layout： https://layout.bradwoods.io/customize

它是一個全功能的 CSS 和 JSX 生成器，用于使用 CSS Grid 布局語法生成不同種類的布局，任意修改 Grid 的屬性，并且實時展示畫面，生成對應(yīng)代碼。當(dāng)然還有 Flex 布局（不過現(xiàn)在還不是很完善）

Riju

Riju： https://riju.codes/

Riju 是一個繼承了 224 種語言的在線代碼運行平臺，十分簡潔，無廣告，非常推薦

Whirl

Whirl： https://whirl.netlify.app/

Whirl 是一個 CSS 動畫庫，與其它的動畫庫不一樣，它集合了 108 種加載動畫，簡潔且獨特，值得學(xué)習(xí)，所有的源代碼也都能獲取到！

Pikaday

Pikaday： https://pikaday.com/

Pikaday 是一個日期選擇器，無依賴、輕量（5k）、CSS 模塊化，樣式也很簡約，我特別喜歡，令人意外的是，它在 Github 上竟然斬獲了 7k+ Star

Tailwind Components

Tailwind Components： https://tailwindcomponents.com/

Tailwind Components 是一個 Tailwind UI 套件，這個網(wǎng)站是一個由社區(qū)貢獻(xiàn)的各種 Tailwind 組件

Tail-Kit

Tail-Kit： https://www.tailwind-kit.com/

Tail-Kit 是第一個非常棒的 Tailwind UI 組件庫，它有超過 250 個開源組件，同時兼容 React、Vue 和 Angular

tidy.js

tidy.js： https://pbeshai.github.io/tidy/

tidy.js 是一個用于處理數(shù)據(jù)相關(guān)的 JavaScript 庫，它包括 70 多個不同類別的函數(shù)(整理、分組、數(shù)學(xué)、排序等等)

party.js

party.js： https://party.js.org/

party.js 還蠻有意思的，你們應(yīng)該見過很多博客網(wǎng)站，鼠標(biāo)點擊或拖動時會有很多炫酷的動效，這個庫就是做這個的，你可以輕松地實現(xiàn)那些效果

AI 去背景

baseline： https://baseline.is/tools/background-remover/

baseline 是一款免費的通過 AI 來去除圖片背景的工具網(wǎng)站，支持 JPEG、PNG，最終會返回一個透明背景的 PNG 圖片給你

Layout patterns

Layout patterns： https://web.dev/patterns/layout/

Layout patterns 是 Google Developers 旗下開發(fā)者資源中新增的版塊，里面列舉了使用 CSS 構(gòu)建布局 UI，現(xiàn)在列舉了 11 種布局~ 后續(xù)應(yīng)該還會持續(xù)增加，探索更多可能，建議收藏。*搭梯子訪問。

Lowdefy

Lowdefy： https://lowdefy.com/

Lowdefy 是一個開源的低代碼框架，通過 YAML 來輕松構(gòu)建 web 應(yīng)用、管理面板、BI 儀表板、工作流和 CRUD 應(yīng)用

uncut

uncut： https://uncut.wtf/

uncut 是一個現(xiàn)代字體目錄網(wǎng)站，重點是開源，可免費用于個人和商用，看了一下總共收錄了 90 種字體，任君挑選~

fetoolkit

fetoolkit： https://www.fetoolkit.io/

fetoolkit 是一個前端開發(fā)工具箱，收錄了 20 多種編碼、圖片相關(guān)的工具，包括 CSS、JSON、圖標(biāo)、SVG、圖像壓縮、npm、regex 等工具

Unicode Arrows

Unicode Arrows： https://unicodearrows.com/

Unicode Arrows 是一個收錄了各式各樣的箭頭相關(guān)的十六進(jìn)制代碼

components AI

components AI： https://components.ai/

components AI 是一個主題構(gòu)建器，包括語法高亮生成器、漸變、陰影工具、SVG 圖案生成器、動畫背景等等，全部都可以在線調(diào)試，非常好用

Glitter

Glitter： https://wh0.github.io/glitter/

Glitter 是一個熒光字體生成器，項目不復(fù)雜，但很好看，我們可以隨意修改文本，最后導(dǎo)出 SVG

Iconduck

Iconduck： https://iconduck.com/

Iconduck 是一個開源 icon 網(wǎng)站，擁有超過 100,000 個圖標(biāo)，可以通過關(guān)鍵字搜索，并且都可以在商業(yè)項目中使用

pattern-generator

pattern-generator： https://doodad.dev/pattern-generator/

pattern-generator 是一個幫助你生成背景圖片的網(wǎng)站，就幾十種圖案可選，而且每種圖案里的元素都可以通過交互按鈕任意修改，最后可以導(dǎo)出 JPEG、PNG、SVG、CSS 背景代碼，也支持退出后恢復(fù)上一次操作的內(nèi)容

buttons-generator

buttons-generator： https://markodenic.com/tools/buttons-generator/

buttons-generator 是一個包含了很多種交互形式以及樣式的按鈕的網(wǎng)站，大概有**120+**種，對于有自定義按鈕需求的小伙伴可以作參考

Coding Fonts

Coding Fonts： https://coding-fonts.css-tricks.com/fonts/hack/?language=html&theme=dark

Coding Fonts 是收集了 45 種代碼字體的網(wǎng)站，大部分都是免費的，當(dāng)然也有收費的，可以選個心儀的放到自己的編輯器里去（小聲 bb 一句，我還是最喜歡 JetBrains Mono，免費又好看）

svgrepo

svgrepo： https://www.svgrepo.com/

svgrepo 是一個 SVG 圖標(biāo)庫，坐擁 300,000 + 免費使用的 SVG 圖標(biāo)，大部分也都是可以商用的。網(wǎng)站支持搜索，無需登錄即可收藏（可能是存的 localstorage）~

maplibre

maplibre： https://maplibre.org/

maplibre 是一個 JavaScript 世界地圖庫，開箱即用，同時也支持了 IOS 和 Android 的 SDK

Dopefolio

Dopefolio： https://github.com/rammcodes/Dopefolio

Dopefolio 是一個開箱即用的官網(wǎng)頁面生成器，沒有依賴一堆的三方開源庫，全部是純 HTML、CSS，所以 SEO 做的非常好，Lighthouse 分?jǐn)?shù)也很高，同時支持頁面響應(yīng)式。有官網(wǎng)頁面需求的小伙伴可以嘗試使用

家底都掏空了，希望對你們有所幫助。獨樂樂不如眾樂樂，如果你還有什么更推薦的網(wǎng)站或工具的話，可以在評論區(qū)留言~

我是零一，分享技術(shù)，不止前端！下期見~

日，國家市場監(jiān)督管理總局（國家標(biāo)準(zhǔn)化管理委員會）發(fā)布2022年第2號公告，批準(zhǔn)發(fā)布《防偽油墨 第6部分：紅外激發(fā)熒光防偽油墨》（GB/T 17001.6-2022），實施日期為2022年10月1日。

　　紅外激發(fā)熒光防偽油墨不同于普通油墨，在近紅外光下會被激發(fā)出有色熒光，防偽特征明顯，被普遍應(yīng)用于國家有價證券、出入境證件、防偽標(biāo)識等領(lǐng)域。通過制訂國家標(biāo)準(zhǔn)，進(jìn)而規(guī)范紅外激發(fā)熒光防偽油墨的使用，對于維護(hù)國家穩(wěn)定與安全有著重要的意義。一方面，可以使紅外激發(fā)熒光防偽油墨更好地發(fā)揮防偽效力，保證其質(zhì)量穩(wěn)定性與可控性，切實保護(hù)生產(chǎn)企業(yè)、應(yīng)用企業(yè)和廣大消費者的權(quán)益。另一方面，填補了防偽油墨國家標(biāo)準(zhǔn)的空缺，有利于我國防偽事業(yè)的進(jìn)步與發(fā)展。

　　GB/T 17001《防偽油墨》系列標(biāo)準(zhǔn)共由9個部分構(gòu)成：

　　——第1部分：紫外激發(fā)熒光防偽油墨；

　　——第2部分：磁性防偽油墨；

　　——第3部分：熱敏變色防偽油墨；

　　——第4部分：日光激發(fā)變色防偽油墨；

　　——第5部分：壓敏防偽油墨；

　　——第6部分：紅外激發(fā)熒光防偽油墨；

　　——第7部分：光學(xué)可變防偽油墨；

　　——第8部分：防涂改防偽油墨；

　　——第9部分：其他防偽油墨。

　　該系列標(biāo)準(zhǔn)全面涵蓋市場上常見的防偽油墨的類型，旨在規(guī)范防偽油墨的生產(chǎn)、應(yīng)用及檢驗，是指導(dǎo)防偽油墨產(chǎn)品設(shè)計、生產(chǎn)、應(yīng)用和管理的基礎(chǔ)文件。

信息來源：中國防偽行業(yè)協(xié)會

原鏈接：https://www.samr.gov.cn/zlfzj/cpzlgz/202204/t20220408_341155.html