整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML常用標簽
主要包括 結構 、 表現 和 行為 三個方面。
標準說明結構用于對 網頁元素 進行整理和分類（HTML）表現用于設置網頁元素的 外觀樣式 （CSS）行為網頁模型的定義及 交互 的編寫（JavaScript）
如果將web標準比喻為一只鳥，則
雙標簽關系分為：
<!--head標簽包含title標簽-->
<head>
<title></title>
</head><!--head標簽與body標簽并列-->
<head></head>
<body></body>標簽名定義<html></html>html標簽<head></head>文檔的頭部<title></title>文檔的標題<body></body>文檔的主體
<!DOCTYPE html> <!--文檔類型聲明標簽-->
<html lang="en"> <!--en:英語，zh-CN:中文-->
<head>
<!--字符集，UTF-8為萬國碼，統一使用-->
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>一個標題獨占一行。（塊級元素）
<h1>
一級標題（字號最大）
</h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6>
六級標題（字號最小）
</h6>用于將HTML文檔分割為若干段落。
特點：
<p>
這是一個段落
</p>用于強制換行。
特點：
<br>這是換行標簽語義標簽加粗<strong></strong>傾斜<em></em>刪除線<del></del>下劃線<ins></ins>
用于界面布局。
特點：
<div>
這是大盒子
</div>
<span>這是小盒子</span>用于定義頁面中的圖像。
<!--屬性與屬性之間用空格分開-->
<img src="圖像的url" alt="" title="">屬性說明src圖片路徑（ 必須屬性 ）alt圖像不能顯示時的替換文本title鼠標放到圖像上顯示的提示文本width設置圖像的寬度height設置圖像的高度border設置圖像的邊框粗細（在CSS中修改）
注：圖像的寬和高一般只修改其中一個，另一個會隨之調整。
相對路徑分類符號說明同一級src="文件名"下一級/src="同一級文件夾名稱/文件名"上一級../src="../文件名"
注意：絕對路徑用“\”分隔，相對路徑用“/”分隔。
<a href="跳轉目標" target="目標窗口的彈出方式">文本或圖像</a>屬性作用href鏈接目標的url（ 必須屬性 ）target鏈接頁面的打方式。_self：在當前窗口打開（默認值），_blank：在新窗口打開
<!--這是一行注釋-->特殊字符描述字符的代碼空格符<小于號<>大于號>&和號&￥人民幣¥?版權©?注冊商標®°攝氏度°±正負號±?乘號×?除號÷2平方²3立方³
注：重點記住前三個。
大家平時學習web前端的時候肯定會遇到很多問題，小編我為大家準備了web前端學習資料，將這些免費分享給大家！如果想要的可以找我領取
領取方式：
如果想獲取這些學習資料，先關注我然后私信小編“01”即可免費領取！（私信方法：點擊我頭像進我主頁右上面有個私信按鈕）
如果這篇文章對你有幫助，請記得給我來個評論+轉發噢
TML 中的預留字符必須被替換為字符實體。
一些在鍵盤上找不到的字符也可以使用字符實體來替換。
HTML 實體
在 HTML 中，某些字符是預留的。
在 HTML 中不能使用小于號（<）和大于號（>），這是因為瀏覽器會誤認為它們是標簽。
如果希望正確地顯示預留字符，我們必須在 HTML 源代碼中使用字符實體（character entities）。 字符實體類似這樣：
&entity_name;
或
&#entity_number;
如需顯示小于號，我們必須這樣寫：< 或 < 或 <
提示： 使用實體名而不是數字的好處是，名稱易于記憶。不過壞處是，瀏覽器也許并不支持所有實體名稱（對實體數字的支持卻很好）。
不間斷空格(Non-breaking Space)
HTML 中的常用字符實體是不間斷空格( )。
瀏覽器總是會截短 HTML 頁面中的空格。如果您在文本中寫 10 個空格，在顯示該頁面之前，瀏覽器會刪除它們中的 9 個。如需在頁面中增加空格的數量，您需要使用 字符實體。
結合音標符
發音符號是加到字母上的一個"glyph(字形)"。
一些變音符號, 如 尖音符 ( ?) 和 抑音符 ( ?) 。
變音符號可以出現字母的上面和下面，或者字母里面，或者兩個字母間。
變音符號可以與字母、數字字符的組合來使用。
以下是一些實例:
| 音標符 | 字符 | Construct | 輸出結果 |
|---|---|---|---|
| ? | a | à | a? |
| ? | a | á | a? |
| ? | a | â | a? |
| ? | a | ã | a? |
| ? | O | Ò | O? |
| ? | O | Ó | O? |
| ? | O | Ô | O? |
| ? | O | Õ | O? |
HTML字符實體
實體名稱對大小寫敏感！ |
| 顯示結果 | 描述 | 實體名稱 | 實體編號 |
|---|---|---|---|
| 空格 | |   | |
| < | 小于號 | < | < |
| > | 大于號 | > | > |
| & | 和號 | & | & |
| " | 引號 | " | " |
| ' | 撇號 | ' (IE不支持) | ' |
| ￠ | 分 | ¢ | ¢ |
| ￡ | 鎊 | £ | £ |
| ￥ | 日元 | ¥ | ¥ |
| € | 歐元 | € | € |
| § | 小節 | § | § |
| ? | 版權 | © | © |
| ? | 注冊商標 | ® | ® |
| ? | 商標 | ™ | ™ |
| × | 乘號 | × | × |
| ÷ | 除號 | ÷ | ÷ |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
輯導語：在涉及到一些表單頁面的設計時，必填項目常常需要用“*”來進行特殊標記。本篇文章作者從十分常見的星號（*）出發，從“星號（*）”起源到現在的用戶界面應用，將相關信息匯總歸納，一起來看。
這次的起因是在工作涉及到一些B端表單頁的設計，其中必填項目需要用“*”來進行特殊標記，這本來是大家常見共識的點，但慢慢發現，有的頁面中幾乎全部都是必填項，就開始思考既然全都需要用“*”標記，那標記還有意義嗎？于是就去查閱了部分資料，從“星號（*）”起源到現在的用戶界面應用，將相關信息匯總歸納，集合這一篇。
星號（英文：asterisk，拉丁文：asteriscum，意謂“小星星”，來自希臘文 ?στερ?σκο?）是印刷符號或字形。之所以稱為星號是因為與一般人印象中的星星相似。計算機科學家與數學家常稱之為“star”或“星”。
星號起源于歐洲封建時代，族譜印制者要表示出生日期的符號。最初的形狀是六芒，每一芒都像是由中央散開的淚珠。因此，有些電腦界的圈子稱之為“splat”（狀聲詞，類似中文的“啪”），或許是因為許多早期的列式打印機印出來的星號看起來像是被壓扁的蟲子。
現代的計算機操作體統已經可以同時兼容多種字體，因此使用不同的輸入法，所展示出的星號*也各不相同。
那我們回到之前的那個問題，同一頁內表單設計中如果存在大量標記符號，是否可以省略呢？答案是絕對不可以。要明確的一點是，表單上標記符號的目的是提醒用戶注意這里是一個重要項，要謹慎仔細的進行操作（常見為必填項）。
那除了使用標記符號外， 也可以在表單下方進行單獨說明告知用戶進行相應操作（此處要和驗證提示的說明文字區分開）。
回到一開始對于“標記符號（*）”的解釋，目的是為了提醒用戶注意，如果用戶已經知道該項為重要項，在某些特殊場景，例如“登錄頁”都需要輸入賬號密碼，已經是大家的共識（雅各布定律）的情況下，可以不進行特殊標示。
需要注意的是注冊頁是必須要進行標示的，需要根據實際業務情況選擇需要將哪些標示為必填項。
首先要明確一點，在界面設計中，“*”既有標示符號的屬性，其本身具有字符屬性。因此需要注意在使用標示符屬性時，“*”是一個獨立的元素。因為“*”經常和表題一起，就會有很多設計師直接在表題同一個文本框內打出一個*字符，這其實在邏輯上是不對的（盡管看起來一樣）。
標記符號（*）的放置位置并沒有一個統一的標準，在查閱大廠規范后發現放在表題前、表題后并沒有一致的標準，在實際項目中優先選擇放在前面，因為這種情況更多，用戶更容易接受。如果有其他的想法，注意保持全局統一。
前面說過“*”在作為標示符號時，是一個獨立的元素，那么在一個頁面中元素之間應該符合整體的柵格規范。如果直在表題框內打一個*，那么*就會和文字貼在一起，有的設計師會打兩個空格作為間距來改善視覺效果，這種做法仍然有些草率。在Ant Design中“*”和表題之間間距為4px。
在上文介紹了關于“*”的基本知識和界面設計中的使用方式，像是這種被大家習以為常的小細節，很容易被忽略。在平時的實踐過程中，應該多注意這些“共識性“的內容，并在系統學習分析后，再落實在自己的設計之中。
資料參考：
本文由 @YMOOOM 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自Unsplash，基于 CC0 協議。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
