整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
haos is a ladder
顏色拾取器
<label for="colorpick">Color Picker</label><input name="colorpick" id="colorpick" value="#FFFFFF" type="color">
顏色拾取器
自動完成
<label for="autoOff">AutoComplete Off</label><input name="autoOff" id="autoOff" autocomplete="off"><br><br>
<label for="auto">Auto</label><input name="auto" id="auto" autocomplete="on"><br><br>
輸入j自動提示之前輸入過的Java,JavScript
進度控件Progress
<label for="workDone">Progress</label><progress name="workDone" id="workDone" value="50" max="100"></progress>
具有屬性value,max.
document.getElementById("workDone").position 返回0.5
測量控件Meter
屬性有value min max low high optimum
<label for="tempL">Meter Low</label><meter name="tempL" id="tempL" min="0" max="100" value="15" low="20" high="70" optimum="60"></meter><br><br>
<label for="temp">Meter</label><meter name="temp" id="temp" min="0" max="100" value="30" low="20" high="70" optimum="60"></meter><br><br>
<label for="tempH">Meter High</label><meter name="tempH" id="tempH" min="0" max="100" value="80" low="20" high="70" optimum="60"></meter><br><br>
進度控件和測量控件不要混用
Meter & Progress
移動設備遍歷性
某些輸入類型在移動設備上具有客制化的鍵盤,方便用戶輸入,比如number,tel,email等等
應用datalist(像下拉框的輸入框)
<label for="myPet">My Pet: </label><input name="myPet" id="myPet" list="pets" />
<datalist id="pets">
<option value="Dog">
<option value="Cat">
<option value="Beaver">
</datalist>
應用datalist,像下拉框
一些網站推薦
查詢瀏覽器是否支持某功能
https://caniuse.com/
指示當前瀏覽器大小
http://mqtest.io/
免費圖標
https://icons8.com/
Foundation框架
Foundation是一個響應式前端框架系列，可以輕松設計漂亮的響應式網站，應用程序和電子郵件，在任何設備上看起來都很棒。Foundation是語義，可讀，靈活且完全可定制的。我們不斷添加新的資源和代碼片段，包括這些方便的HTML模板，以幫助您入門！
特點：世界上最先進的響應式前端框架。快速為適用于任何類型設備的站點創建原型和生產代碼。
總結：Foundation 算是框架界的元老啦，都說框架去的早，而這個框架一直到現在依然這么的熱門，如果你比較介意 Bootstrap 開發撞臉的尷尬事情，那么你可以考慮使用 Foundation 。即使你使用預定義的 UI 元素, 也不會與其他網站太像，就像官方說的給開發者更靈活的框架體驗。
Bootstrap框架
Bootstrap是美國Twitter公司的設計師Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 開發的簡潔、直觀、強悍的前端開發框架，使得 Web 開發更加快捷。 Bootstrap提供了優雅的HTML和CSS規范，它即是由動態CSS語言Less寫成。Bootstrap一經推出后頗受歡迎，一直是GitHub上的熱門開源項目，包括NASA的MSNBC（微軟全國廣播公司）的Breaking News都使用了該項目。 國內一些移動開發者較為熟悉的框架，如WeX5前端開源框架等，也是基于Bootstrap源碼進行性能優化而來。
包含內容：
基本結構：Bootstrap 提供了一個帶有網格系統、鏈接樣式、背景的基本結構。
CSS：Bootstrap 自帶以下特性：全局的 CSS設置、定義基本的 HTML 元素樣式、可擴展的 class，以及一個先進的網格系統。
組件：Bootstrap 包含了十幾個可重用的組件，用于創建圖像、下拉菜單、導航、警告框、彈出框等等。
JavaScript 插件：Bootstrap包含了十幾個自定義的jQuery 插件。您可以直接包含所有的插件，也可以逐個包含這些插件。
定制：您可以定制Bootstrap的組件、LESS 變量和jQuery 插件來得到您自己的版本。
總結：Bootstrap 最大的優勢就是它非常流行，流行就代表你有問題就有很多人幫你解決問題，就代表裝逼它就是利器，還有就是界面比較和諧，容易上手，關注它的小伙伴應該發現最新 V4 版也開始支持 FlexBox 布局，這是非常好的升級體驗。 劣勢是 class 命名不夠語義化，并且各種縮寫，以至于我離了文檔就是個菜，最近開始整混合 APP，選框架的時候首選就是它，但之前搞 PC 一直沒注意，后來搞混合右鍵屬性看它的時候，瞬間一陣涼風襲來，Bootstrap 好小，小到我只好選擇別的框架。
AUI框架
AUI為一款輕量級前端UI框架，更偏重于CSS布局及樣式的構造，通俗易懂的寫法及模塊式的拼裝方便用戶自由擴展。輕小的體積、靈活的擴展性，大大提高移動端項目的體驗度和開發效率。
在目前市場上的UI框架中，大多數的框架以JS來實現過多的功能和布局。當然并不是否定JS在一個移動前端框架中的作用性，既然是前端框架側重點要更多的考慮框架本身在一個項目中的資源消耗問題及如何提高用戶的體驗度。鑒于APICloud多窗口結構及原生模塊的拼裝，所以在移動端項目中AUI強調更多的是快速布局、靈活布局的實現，結合APICloud本身特性，提高開發效率及用戶體驗。
最近剛起來的AUI，雖然作者聲稱是專為APICloud開發者設計的一套UI框架，但實際它還是解決了很多移動前端開發的普遍問題，是主要面向混合開發的 CSS 框架。看起來作者比較猖狂，各種高級 CSS3 遍地使用，這讓我也不得不去查查這些個 CSS3 的兼容性。不負眾望果然選的都是兼容不錯的屬性，哈哈了一頓激動從前輩手上大膽認識了幾個好東西，并且框架還提供了聊天界面、計數列表等組件，解決了很多復雜的讓我罵娘的布局，現在可以直接拿走就用。
總結：這個框架對我來說有個優點就是純 CSS 框架，自己以前也就用過 Pure，自己有點 JS 能力，如果不是復雜的效果，找個純 CSS 框架自己隨便改改就可以，而現在 CSS3 也已經能夠做到動畫，效率、質量、高效全兼顧，所以還是選擇了這種 CSS 框架。有一點覺得不滿的是這框架的文檔真的好那什么，說好的高大上呢。
Amaze UI 框架
第二個介紹的是AmazeUI，據官方說是咱們中國首個HTML5跨屏前端框架。
最初使用它是因為本尊遇到了一個愛糾結細節設計，有一次她跟我的字體較上真了，結果一句頂萬句的 BOOS 夸了她，我只好根據她的想法去解決，結果最后找到了Amaze UI 框架，按照官方的話說就是 "基于社區開源項目構建的一個跨屏前端框架，以移動優先，從小屏到大屏，最終實現所有屏幕適配，適應移動互聯潮流" 。但其實我就是看中它能解決國內瀏覽器存在的跨屏適配和兼容性問題。
總結：Amaze UI 總的來說就是加入更多符合中國市場特性的元素，框架對跨屏、適配都做了的比較好的處理并且準備一了一系列的常用的網頁組件，為減少搞兼容、適配各種敲鍵盤的加班狗們的工作時間做了不小的貢獻。框架還對中文排版優化，兼容中國本土主流瀏覽器、輕量化，不僅適用于桌面端，還更更適合移動端、包含一些封裝好的Widgets。不過自也就我感覺 Amaze UI 文檔是否有點太那什么了，比如 “人們不會在乎jQuery的那點流量。”，說實的在這真沒啥，不過我從來不會說出來( 哈哈 )，代碼和設計上感覺沒太多突出的點。
Pure框架
一組小的，響應迅速的CSS模塊，您可以在每個Web項目中使用它們。
特點：
CSS占用空間極小。
純凈是微不足道的。整套模塊的時鐘頻率為3.8KB *縮小和壓縮。在考慮移動設備的情況下，對我們來說保持文件大小很小很重要，并且仔細考慮了每一行CSS。如果您決定僅使用這些模塊的子集，則可以節省更多字節。
你的CSS基礎
Pure構建于Normalize.css之上，為原生HTML元素以及最常見的UI組件提供布局和樣式。這就是你所需要的，沒有任何瑕疵。
以移動為主題
Pure是開箱即用的響應，因此所有屏幕尺寸的元素都很棒。
堅持你的方式
Pure具有最小的樣式，并鼓勵您在其上編寫應用程序樣式。它旨在讓您不受約束，并輕松覆蓋樣式。
創建響應式布局
通過使用Grids，Menus等，可以輕松地為所有屏幕尺寸創建漂亮的響應式布局。我們讓您輕松上手。看看幾個不同的布局，并用堅如磐石的基礎開始您的下一個Web項目。
這個框架是我在做管理系統時接觸的，選擇使用也是因為框架小巧，并且是純 CSS，沒有太多的牽扯，好用來與其他框架快速結合使用。
在學習使用HTML之前，大家經常會問，什么是HTML？HTML是用來描述頁面的一種語言，它是一種超文本標記語言，也就是說，HTML不是一種編程語言，僅是一種標記語言。 HTML由一套標記標簽組成，在制作網頁時，HTML使用標記標簽來描述網頁。
HTML5自正式推出以來，就以一種驚人的速度被迅速推廣著，各主流瀏覽器對于HTML5表現出來的熱烈歡迎、積極支持。
1、世界知名瀏覽器廠商對HTML5的支持
通過對Internet、Explorer、Google、Firefox、Safari、Opera等主要的web瀏覽器發展策略調查，發現它們都在支持HTML5上采取了措施
- 微軟：2010年3月16日，微軟與拉斯維加斯市舉行的MIX10技術大會上宣布已推出InternetExplorer(IE)9瀏覽器開發者預覽版。
- Google：2010年2月19日，GoogleGears項目經理伊安~費特通過博客宣布，谷歌將放棄對Gears瀏覽器插件項目支持、重點開發HTML5項目
- 蘋果：2010年6月7日，蘋果開發者大會的會后發布了Safari5。這款瀏覽器支持10個以上HTML5的新技術，包括全屏播放、HTML5地理位置、HTML5的形式驗證等功能
- Opera：2010年5月5日，Opera軟件公司首席技術官Hakon Wium Lie先生在訪華之際，接受了中國軟件資訊網等少數幾家媒體采訪，他認為HTML5和CSS3將是全球互聯網發展的未來趨勢
- Mozilla：2010年7月，Mozilla基金會發布了Firefox4瀏覽器的第一個測試版，從官方文檔看，它對HTML5是完全級別的支持
2、市場的需求
現在的市場已經迫不及待地要求有一個統一的互聯網通用標準。HTML5之前的情況是，由于各瀏覽器之間不統一，僅修改web瀏覽器之間的由于兼容性而引起的bug就浪費了大量的時間。而HTML5的目標就是將web帶入一個成熟的應用平臺，在HTML5平臺上，視頻，音頻，圖像，動畫及同計算器的交互都被標準化。
3、跨平臺
HTML5可以做到跨平臺開發，用戶只用打開瀏覽器即可訪問應用，PC網站、各種移動設備，插件等核心代碼就可以不需要重復編寫，極大地減少了開發人員的工作量。
發明HTML的初衷是實現信息資料的網絡傳播和共享，希望HTML文檔具有平臺無關性，即同一個HTML文件，在不同的瀏覽器上看到同樣的頁面內容和效果。但是遺憾的是，隨著瀏覽器市場的激烈競爭，各大瀏覽器廠商為了吸引用戶，都在早期HTML版本的基礎上擴展各類標簽，各瀏覽器之間互不兼容，導致HTML編碼規則混亂，違背了HTML發明的初衷，因此需要一個組織來指定和維護統一的國際化web開發標準，確保多個瀏覽器都兼容，HTML內容結構都是語義化的。
W3C標準不是某一個標準，而是一系列的標準集合，一個網頁主要有三部分組成，即結構、表現、行為。
對應的標準也分三方面：結構化標準語言主要包括XHTML和XML，表現標準語言主要包括CSS，行為標準主要包括對象模型（如W3CDOM）、ECMAScript等。這些標準大部分由W3C起草和發布，也有一些是其他標準組織制訂的標準，比如ECMA（European Computer Manufacturers Association）的ECMAScript標準。
1、開發工具：
2、使用WebStorm編輯HTML文檔如下：
<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
我的第一個網頁
</body>
</html>
標簽都是成對出現的。 有一個開頭標記就應該有一個對應的結束標記記，“<>”開始，以“</>”結束，要求成對出現，標簽之間有縮進，提現層次感，方便閱讀。
HTML5的基本結構分為兩部分。整個HTML包括頭部｛head｝和主體｛body｝兩部分，頭部包括網頁標題｛title｝等基本信息，主體包括頁面的內容信息，如圖片、文字等。
1、DOCTYPE 聲明在這個HTML5文件最上面有一行關于DOCTYPE文檔類型的聲明，約束HTML文檔結構。檢查是否符合相關WEB標準，同時告訴瀏覽器使用那中規范來解釋這個文檔中的代碼。DOCTYPE聲明必須位于HTML文檔的第一行。
HTML5:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
HTML4：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://wwww.w3.org/TR/xhtml1-transitional.dtd">
2、<title>標簽 使用<title>標簽描述頁面的標簽，類似一個文檔的標題，為一個簡介的主題，并能使讀者有興趣。
<title>搜狐-中國最大的門戶網站</title>
3、<meta>標簽 使用<meta>標簽描述網頁的摘要信息，包括文檔內容類型、字符編碼信息，搜索關鍵字、網站提供的功能和服務的詳細描述等。<meta>標簽的內容并不顯示，其目的是方便瀏覽器解析或利于搜索引擎搜索，它采用“名稱/值”對的方式描述摘要信息。
meta標簽可分為兩大部分：http-equiv和name變量。
http-equiv相當于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助瀏覽器正確地顯示網頁內容。
name屬性主要用于描述網頁，與之對應的屬性值為content，content中的內容主要是便于搜索引擎機器人查找信息和分類信息用的。
1.文檔內容類型，字符編碼信息書寫如下：
HTML5:
<meta charset="UTF-8">
HTML4:
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
屬性：charset表示字符集編碼，常用的編碼有以下幾種。
1.gb2312：簡體中文，一般用于包含中文和英文的頁面；
2.ISO-885901：純英文，一般用于只包含英文的頁面；
3.big5：繁體，用于帶有繁體字的頁面；
4.UTF-8：國際性通用的編碼，同樣適用于中文和英文的頁面。和gb2312編碼相比，國際通用性更好。
2.搜索關鍵字和內容描述信息書寫如下：
<meta name="keywords" content="云圖智聯">
<meta name="description"content="云圖智聯是國內的IT教育集團，致力于為中國培養優秀的IT技術人才">
網站示例：
<!--京東-->
<meta name="description"
content="京東JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，為您提供愉悅的網上購物體驗!"/>
<meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手表,存儲卡,京東"/>
<!--淘寶-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<title>淘寶網 - 淘！我喜歡</title>
<meta name="spm-id" content="a21bo" />
<meta name="description" content="淘寶網 - 亞洲較大的網上交易平臺，提供各類服飾、美容、家居、數碼、話費/點卡充值… 數億優質商品，同時提供擔保交易(先收貨后付款)等安全交易保障服務，并由商家提供退貨承諾、破損補寄等消費者保障服務，讓你安心享受網上購物樂趣！" />
<meta name="aplus-xplug" content="NONE">
<meta name="keyword" content="淘寶,掏寶,網上購物,C2C,在線交易,交易市場,網上交易,交易市場,網上買,網上賣,購物網站,團購,網上貿易,安全購物,電子商務,放心買,供應,買賣信息,網店,一口價,拍賣,網上開店,網絡購物,打折,免費開店,網購,頻道,店鋪" />
1、標題標簽
<h1>…</h1>
<h2>…</h2>
<h3>…</h3>
<h4>…</h4>
<h5>…</h5>
<h6>…</h6>
標題標簽表示一段文字和標題或主題，并且支持多層的內容結構。例如，一級標題采用h1，二級標題采用h2，其他級別標題以此類推。HTML共提供了六級標題h1~h6，并賦予了標題一定的外觀，所有標題字體加粗，h1字號最大，h6字號最小。
2、段落標簽、換行標簽和水平線標簽
<p>段落標簽</p>
<br/><!--換行標簽-->
<hr><!--水平線標簽-->
3、字體樣式標簽
<!--加粗-->
<strong></strong>
<b></b>
<!--傾斜-->
<em></em>
<i></i>
<!--字體縮小-->
<small></small>
<!--刪除線-->
<s></s>
<!--下劃線-->
<u></u>
4、圖像標簽
（1）常見的圖像格式
1.JPG格式
JPG格式圖像是在Internet上被廣泛支持的圖像格式，它是聯合圖像專家組格式的英文縮寫。JPG格式采用的是有損壓縮，會造成圖像畫面的失真，不過壓縮之后的體積很小，而且比較清晰，所以比較適合在網頁中應用此格式最適合用于排和或連續取色調圖像的高級格式，這事因為JPG文件可以包含數百萬種顏色。隨著JPG格式文件品格式質的提高，文件的大小和下載時間也會隨著增加。通常可以通過壓縮JPG格式文件在圖像品質和文件大小之間達到良好的平衡。
2.GIF格式
GIF格式圖像是網頁中使用最廣泛，最普通的一種圖像格式，它是圖像交換格式的英文縮寫。GIF格式文件支持透明色，使得GIF格式在網頁的背景和一些多層特效的顯示上 用得非常多；還支持動畫，這是它最突出的一個特點，因此GIF格式圖像在網頁中應用非常廣泛。
3.BMP格式
BMP格式圖像在Windows操作系統中使用得比較多，它是位圖的英文縮寫。BMP格式圖像格式與其他Microsoft Windows程序兼容。它不支持文件壓縮，也不是用于Web頁。
4.PNG格式
PNG格式是20世紀90年代中期開始開發的圖像文件儲存格式，它兼有GIF和JPG格式的優勢，同時具備GIF格式不具備的特性。
（2）圖像標簽
<img src="path" alt="text" title="text" width="x" height="y" />
src屬性表示圖片路徑，alt屬性指定圖像的代替文本，表示圖像無法顯示時（如圖片路徑錯誤或網速太慢等）替代先是文本，這樣，即使當圖像無法顯示時，用戶還可以看到網頁丟失的信息內容。
title屬性可以提供額外的提示或幫助信息，當鼠標移至圖片上時顯示提示信息，方便用戶使用。
width和height兩個屬性分別表示圖片的寬度和高度，如果不設置，那么圖片默認顯示原始大小。
5、超鏈接標簽
（1）超鏈接包含兩部分內容，一是鏈接地址，即鏈接的目標，可以是某個網站或文件路徑，對應a標簽的href屬性；二是鏈接文本或圖像，點擊該文本或圖像，將跳轉到href屬性指定的鏈接地址。
<a href="path" target="目標窗口位置">鏈接文本或圖像</a>
href：鏈接地址的路徑;
target：指定鏈接在哪個窗口打開，常用的取值有_self（自身窗口）、_blank（新建窗口）。 超鏈接即可以是文本超鏈接，也可以使圖片超鏈接
（2）常用的超鏈接
1>頁面間鏈接
從一個頁面鏈接到另一個頁面
2>錨鏈接
錨鏈接也稱錨點鏈接，命名錨點鏈接（也叫書簽鏈接）常常用于那些內容龐大繁瑣的網頁，通過點擊命名錨點，自動跳轉到我們設置錨點的位置，類似于我們閱讀書籍時的目錄頁碼或章回提示。
錨點鏈接可以跳轉到頁面的任何位置。一般用于在頁面下面的時候，點擊回到最上面。錨點鏈接的名稱可以隨意取，只起到標記作用。
1.從A頁面的甲位置跳轉到本頁中的乙位置
示例：
<a href="#a1">a1</a>
<a href="#a2">a2</a>
<a href="#a3">a3</a>
<a href="#a4">a4</a>
<div id="a1">a1</div>
<div id="a2">a2</div>
<div id="a3">a3</div>
<div id="a4">a4</div>2.從A頁面的甲位置跳轉到B頁面中的乙位置
示例：
<!--A頁面-->
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>錨鏈接</title>
</head>
<body>
<p>
[<a href="help.html#register">A位置</a>]
[<a href="help.html#login">B位置</a>]
</p>
</body>
</html><!--B頁面-->
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>錨鏈接</title>
<style>
div{
width: 100%;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
<h4><a name="register">A位置</a></h4>
<div>
<h2>A位置</h2>
</div>
<h4><a name="login">B位置</a></h4>
<div>
<h2>B位置</h2>
</div>
</body>
</html>3>功能性鏈接
<!--下載圖片-->
<a href="img/qq.jpg">點擊下載圖片</a><!--發送郵件-->
<a href="mailto:Webmaster@ytzl.cn">聯系我們</a><!--引用腳本語言-->
<a href="javascript：alert('哈哈哈哈')"></a>6、注釋和特殊符號
<!--注釋符號-->當頁面的HTML結構復雜或內容較多時，需要添加必要的注釋方便代碼閱讀和維護。同時，有時為了調試，需要暫時注釋掉一些不必要的HTML代碼。特殊符號一般以"&"符號開頭，";"結尾。
需求：
1、標題使用標題標簽，文字使用p標簽標題與正文之間的分隔線使用水平線標簽；歌詞詞結束后使用換行標簽換行
2、人名加粗顯示，時間斜體顯示
3、制作頁面版權部分
<html>
<head>
<title>我的第一個網頁</title>
</head>
<body>
我的第一個網頁
</body>
</html>
使用學過的圖像標簽、標題標簽、水平線標簽、斜體標簽、加粗標簽、段落標簽等制作京東讀書新聞資訊頁面，主標題使用一級標題標簽，副標題使用二級標題標簽，二級標題與圖片之間使用水平線分隔。
<h1>HTML5+CSS3從入門到精通（標準版）</h1>
<h2>作者：未來科技</h2>
<hr/>
<p><img src="images/book.jpg" alt="圖書" width="200"/></p>
<p><em>HTML 5 CSS 3 JavaScript從入門到精通（標準版）</em></p>
<p><em> 以基礎知識、示例、實戰案例相結合的方式詳盡講述了HTML CSS JavaScript及目前*的前端技術html5移動開發 html5實戰 html5 canvas html5 app html5入門 html5 動畫 html5揭秘 html 游戲 html5權威指南 的基本知識都有涉及。</em></p>
<p><strong>全書分兩大部分，共12章</strong></p>
<p>介紹了HTML5入門和CSS3實戰入門內容：使用HTML標簽標識網頁內容，使用CSS設計網頁基本樣式，如使用并美化文本、圖像、超鏈接、列表、表單和表格等</p>
<p>第二部分為CSS3布局部分，主要講解使用CSS3設計完整網頁的方法和技巧，以及CSS3中的各種新技術應用；</p>
<p>? 2015-2025 云圖智聯</p>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
a{
display: block;
width: 30px;
height: 30px;
line-height: 30px;
font-size: 18px;
}
div{
width: 400px;
height: 400px;
margin-top: 20px;
border: 1px solid red;
}
</style>
</head>
<body>
<a href="#a1">a1</a><a href="#a2">a2</a><a href="#a3">a3</a><a href="#a4">a4</a>
<div id="a1">a1</div>
<div id="a2">a2</div>
<div id="a3">a3</div>
<div id="a4">a4</div>
</body>
</html>免費學習視頻歡迎關注云圖智聯：https://e.yuntuzhilian.com/
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
