整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
HTML代表超文本標(biāo)記語言（Hypertext Markup Language）。它是一種用于構(gòu)建網(wǎng)頁的標(biāo)記語言。HTML文件包含一組標(biāo)簽，這些標(biāo)簽用于定義網(wǎng)頁的結(jié)構(gòu)和內(nèi)容。瀏覽器讀取HTML文件，并根據(jù)標(biāo)記中的指示呈現(xiàn)網(wǎng)頁內(nèi)容。
HTML的主要作用是定義文本內(nèi)容、圖像、鏈接和其他媒體的排列方式，并提供交互元素，例如表單和按鈕。
每個(gè)HTML文檔都應(yīng)該遵循以下基本結(jié)構(gòu)：
<!DOCTYPE html>
<html>
<head>
<title>網(wǎng)頁標(biāo)題</title>
</head>
<body>
<!-- 內(nèi)容在這里 -->
</body>
</html>
讓我們逐步解釋這個(gè)結(jié)構(gòu)：
HTML標(biāo)簽是由尖括號括起來的名稱，例如<p>表示段落，<img>表示圖像。標(biāo)簽通常成對出現(xiàn)，有一個(gè)開始標(biāo)簽和一個(gè)結(jié)束標(biāo)簽。例如：
<p>這是一個(gè)段落。</p>
<p>是開始標(biāo)簽，</p>是結(jié)束標(biāo)簽，文本位于兩個(gè)標(biāo)簽之間。標(biāo)簽定義了元素的類型和結(jié)構(gòu)。
有些HTML標(biāo)簽是自封閉的，不需要結(jié)束標(biāo)簽，例如<img>用于插入圖像。
在HTML中，你可以使用注釋來添加說明性文字，注釋不會在瀏覽器中顯示。HTML注釋使用<!--開頭和-->結(jié)尾，如下所示：
<!-- 這是一個(gè)注釋 -->
注釋通常用于添加文檔說明、調(diào)試代碼或標(biāo)記未來的修改。
HTML中的文本通常包含在段落、標(biāo)題、列表等元素中。以下是一些常見的文本元素：
示例：
<p>這是一個(gè)段落。</p>
<h1>這是一個(gè)標(biāo)題</h1>
<p><strong>這是強(qiáng)調(diào)文本。</strong></p>
<p><em>這是斜體文本。</em></p>
<p>訪問<a href="https://www.example.com">示例網(wǎng)站</a></p>
要在網(wǎng)頁中插入圖像，可以使用<img>標(biāo)簽。它是一個(gè)自封閉標(biāo)簽，需要指定圖像的src屬性來指定圖像文件的路徑。
示例：
htmlCopy code
<img src="image.jpg" alt="圖像描述">
通過使用<a>標(biāo)簽，可以在網(wǎng)頁中創(chuàng)建鏈接。鏈接通常包含在文本或圖像中，并使用href屬性指定目標(biāo)URL。
示例：
<a href="https://www.example.com">訪問示例網(wǎng)站</a>
HTML支持有序列表（<ol>）、無序列表（<ul>）和定義列表（<dl>）。
無序列表使用<ul>標(biāo)簽定義，每個(gè)列表項(xiàng)使用<li>標(biāo)簽。
示例：
<ul>
<li>項(xiàng)目1</li>
<li>項(xiàng)目2</li>
<li>項(xiàng)目3</li>
</ul>
有序列表使用<ol>標(biāo)簽定義，每個(gè)列表項(xiàng)使用<li>標(biāo)簽。
示例：
<ol>
<li>第一項(xiàng)</li>
<li>第二項(xiàng)</li>
<li>第三項(xiàng)</li>
</ol>
定義列表使用<dl>標(biāo)簽定義，每個(gè)定義項(xiàng)目使用<dt>標(biāo)簽定義術(shù)語，使用<dd>標(biāo)簽定義描述。
示例：
<dl>
<dt>術(shù)語1</dt>
<dd>描述1</dd>
<dt>術(shù)語2</dt>
<dd>描述2</dd>
</dl>
HTML表單允許用戶與網(wǎng)頁進(jìn)行交互，提交數(shù)據(jù)。以下是HTML表單的基本元素：
<form>元素用于創(chuàng)建表單，可以包含文本字段、復(fù)選框、單選按鈕、下拉列表等。
示例：
<form action="submit.php" method="post">
<!-- 表單元素在這里 -->
</form>
輸入字段用于接收用戶輸入的數(shù)據(jù)，常見的輸入字段類型包括文本框、密碼框、單選按鈕、復(fù)選框等。
文本框使用<input>標(biāo)簽，type屬性設(shè)置為"text"。
示例：
<input type="text" name="username" placeholder="用戶名">
密碼框使用<input>標(biāo)簽，type屬性設(shè)置為"password"。
示例：
htmlCopy code
<input type="password" name="password" placeholder="密碼">
單選按鈕使用<input>標(biāo)簽，type屬性設(shè)置為"radio"。
示例：
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
復(fù)選框使用<input>標(biāo)簽，type屬性設(shè)置為"checkbox"。
示例：
<input type="checkbox" name="subscribe" value="yes">訂閱新聞
下拉列表使用<select>和<option>標(biāo)簽創(chuàng)建。<select>定義下拉列表，而<option>定義選項(xiàng)。
示例：
<select name="country">
<option value="us">美國</option>
<option value="ca">加拿大</option>
<option value="uk">英國</option>
</select>
HTML用于定義網(wǎng)頁的結(jié)構(gòu)和內(nèi)容，但要使網(wǎng)頁看起來更吸引人，需要使用CSS（層疊樣式表）。CSS允許你定義字體、顏色、布局等樣式。
可以在HTML元素內(nèi)部使用style屬性來定義內(nèi)聯(lián)樣式。
示例：
<p style="color: blue; font-size: 16px;">這是一個(gè)藍(lán)色的段落。</p>
外部樣式表將樣式規(guī)則保存在獨(dú)立的CSS文件中，并通過<link>標(biāo)簽將其鏈接到HTML文檔。
示例（style.css）：
/* style.css */
p {
color: blue;
font-size: 16px;
}
在HTML中鏈接外部樣式表：
<link rel="stylesheet" type="text/css" href="style.css">
這使得可以在整個(gè)網(wǎng)站上共享相同的樣式。
HTML是構(gòu)建現(xiàn)代網(wǎng)頁的基礎(chǔ)。通過學(xué)習(xí)HTML的基本語法和元素，你可以創(chuàng)建吸引人且功能強(qiáng)大的網(wǎng)頁。無論是文本、圖像、鏈接還是表單，HTML提供了豐富的工具來呈現(xiàn)內(nèi)容和實(shí)現(xiàn)用戶交互。
這篇文章提供了HTML的基礎(chǔ)知識，但HTML是一個(gè)廣泛的主題，還有許多高級特性和技巧等待你探索。希望這篇文章對你入門HTML有所幫助，讓你能夠開始創(chuàng)建自己的網(wǎng)頁。繼續(xù)學(xué)習(xí)和實(shí)踐，你將成為一個(gè)熟練的網(wǎng)頁開發(fā)者。
使用APP時(shí)，用戶獲得信息往往是通過輸入框，然而這部分卻是很多設(shè)計(jì)者容易忽略的部分。本篇文章為大家總結(jié)了常見的四大輸入框樣式，并分析了其使用場景和注意事項(xiàng)。
輸入框作為頁面中主要的數(shù)據(jù)錄入入口，可引導(dǎo)用戶錄入信息。我們從APP中獲得的所有信息來源，均是由用戶通過輸入框得來，可見他的重要性。
往往很多APP在設(shè)計(jì)時(shí)卻很容易忽視這塊，標(biāo)注不清楚、字體限制未標(biāo)明、文字單行和多行樣式等都不設(shè)計(jì)出來，導(dǎo)致技術(shù)人員在實(shí)現(xiàn)時(shí)要么靠過往經(jīng)驗(yàn)，要么找你繼續(xù)了解。
不過無論哪一種方式其實(shí)都比較浪費(fèi)時(shí)間，這些如果我們平時(shí)去總結(jié)分析后，是可以避免的。
今天的文章，我們總結(jié)下APP中常見的四大輸入框樣式，即獨(dú)立文本標(biāo)簽輸入框、行內(nèi)標(biāo)簽輸入框、對話輸入框、段落文字等，同時(shí)總結(jié)分析他們的使用場景和注意事項(xiàng)。
獨(dú)立文本標(biāo)簽即在左側(cè)以文字的形式提示輸入內(nèi)容，同時(shí)在內(nèi)容輸入取預(yù)設(shè)內(nèi)容，當(dāng)輸入信息后，由于左側(cè)清晰的文字標(biāo)簽，不管內(nèi)容多少我們?nèi)匀荒軌蚝芮逦臑g覽和操作。
當(dāng)然由于內(nèi)容信息的組合、多少不同，我將其歸納為四種形式：
以下分別是獨(dú)立文本標(biāo)簽輸入框中的四種形式，掌握這些可以讓我們在表格列表設(shè)計(jì)中更加高效。
（配圖來自微信小程序規(guī)范）
當(dāng)然，除了知道它有哪些形式是不夠的？
作為設(shè)計(jì)師，我們還需要知道它對應(yīng)的一些規(guī)范，只有掌握了這些規(guī)范，我們才能夠更好的落地，首先來看看有規(guī)范和沒規(guī)范是怎么樣的。
1. 當(dāng)沒有規(guī)范時(shí)：
標(biāo)題長短未規(guī)定，同時(shí)輸入文本未對齊，整個(gè)界面感覺混亂不堪。
2. 當(dāng)有規(guī)范時(shí)：
個(gè)界面清晰明了，當(dāng)你將這個(gè)規(guī)范交給技術(shù)，他就能夠按照你設(shè)計(jì)的效果實(shí)現(xiàn)，而如果你前期設(shè)計(jì)不到位，技術(shù)就按照他自身的想法實(shí)現(xiàn)，自然出來的效果你總會說還原度不高，別人也說這個(gè)體驗(yàn)不好。有時(shí)候還原度不高，體驗(yàn)不好，作為設(shè)計(jì)師你是不是應(yīng)該好好想想。
下圖以微信小程序規(guī)范為例：
最后，掌握了規(guī)范還不夠，我們還可以做得更加細(xì)化？
1. 設(shè)計(jì)錯(cuò)誤提示：在信息輸入錯(cuò)誤后，即可看到報(bào)錯(cuò)提示，這樣可以提醒用戶讓其及時(shí)修正。
市面上很多APP為了方便，直接提交整個(gè)表單后才提示錯(cuò)誤，這樣開發(fā)成本雖然降低，但是用戶的操作成本增加，具體如何選擇就看你產(chǎn)品的用戶量如何，當(dāng)然一個(gè)好的用戶體驗(yàn)需要考慮這些問題。
2. 輸入鍵盤對應(yīng)輸入信息：輸入框往往有金額、文字、電話號碼、卡號、身份證號輸入等，一個(gè)好的交互體驗(yàn)就是當(dāng)你需要輸入電話號碼，鍵盤直接幫你定位在數(shù)字鍵，當(dāng)你輸入身份證號，鍵盤直接是數(shù)字加X，讓你輸入更便捷不用切換。
上圖你看到支付寶的充值和銀行卡界面，這些細(xì)節(jié)的體現(xiàn)正是決定一個(gè)好的產(chǎn)品和差的產(chǎn)品的區(qū)別。
行內(nèi)標(biāo)簽輸入框是UI設(shè)計(jì)中最常見的控件，在絕大多數(shù)的場合用來給用戶輸入少量的文字。
比如：搜索、登陸注冊等。
行內(nèi)標(biāo)簽相對于獨(dú)立文本標(biāo)簽樣式較為流行，相對較為簡潔，但是對于屏幕上顯示超過2個(gè)文本框的情況，行內(nèi)標(biāo)簽則不是獨(dú)立文本標(biāo)簽的一個(gè)好的取代方案。
其缺點(diǎn)就是一旦用戶點(diǎn)擊了輸入框，標(biāo)簽就消失了，這樣用戶就不能二次檢查他們輸入的內(nèi)容是不是他們應(yīng)該輸入的類型。同時(shí)由于已經(jīng)輸入過一次，因此第二個(gè)輸入框很容易被忽略。
對話輸入框常見于聊天消息類界面，其特點(diǎn)是當(dāng)你輸入一行信息時(shí)，不會有什么變化，但是當(dāng)你輸入多行信息時(shí)，如果你不出相應(yīng)規(guī)則，那么后期落地就只有根據(jù)技術(shù)喜好了。
在設(shè)計(jì)時(shí)，我們不僅要做常規(guī)樣式，還需要做輸入多行的效果，這樣開發(fā)拿到手才不會一抹黑，也不會在心里默默罵你不專業(yè)了。
以微信對話輸入框?yàn)槔?dāng)文字一行時(shí)，輸入框正常顯示；當(dāng)文字兩行時(shí)，輸入框自動向上升，圖標(biāo)按鈕位置不變；當(dāng)為五行以上時(shí)，文字可上下滑動顯示，同時(shí)露出一點(diǎn)文字，讓用戶清楚，上面還有字的情況。
段落文字的使用場景主要分兩種情況：
1. 發(fā)表或者發(fā)布模塊：
以新浪微博為例，如果你輸入的文字超出140字，超過該字?jǐn)?shù)則以橙色文字顯示，區(qū)別的是他并沒有和其他發(fā)布平臺限制字?jǐn)?shù)，而是當(dāng)文字超出140字時(shí)展示會將文字進(jìn)行折疊顯示。
2. 個(gè)人設(shè)置模塊：
該位置的輸入框有字?jǐn)?shù)限制，這時(shí)候在界面上就會顯示限制文字多少，當(dāng)前輸入文字多少，同時(shí)超出文字范圍，以提示框顯示。
上面以轉(zhuǎn)轉(zhuǎn)為例，轉(zhuǎn)轉(zhuǎn)個(gè)人設(shè)置頁面限制300個(gè)字，當(dāng)默認(rèn)狀態(tài)顯示0/300，同時(shí)輸入時(shí)顯示輸入文字個(gè)數(shù)，當(dāng)超出限制字?jǐn)?shù)，則以氣泡提示，這才是一個(gè)好的交互流程。
http://www.woshipm.com/ucd/392706.html/ 文本輸入框設(shè)計(jì)的那些潛規(guī)則，你知道多少？
作者：風(fēng)箏，做個(gè)正能量的小太陽，不拖延，不偷懶，勵(lì)志為孩子做個(gè)好榜樣，公眾號：海鹽社。
本文由 @ 風(fēng)箏KK 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自 Unsplash，基于 CC0 協(xié)議
<style>/* Tooltip 容器 */
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black; /* 懸停元素上顯示點(diǎn)線 */
}
/* Tooltip 文本 */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* 定位 */
position: absolute;
z-index: 1;
}
/* 鼠標(biāo)移動上去后顯示提示框 */
.tooltip:hover .tooltiptext {
visibility: visible;
}</style>
<div class="tooltip">鼠標(biāo)移動到這
<span class="tooltiptext">提示文本</span>
</div>ooltip提示框
.tooltip .tooltiptext {
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
opacity: 1;
}淡入效果
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
