整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
可以在 Browser Default Styles 中查詢 HTML 元素在每個瀏覽器下的默認樣式；
可以在 Clippy 為你的圖片作剪輯，并且生成對應的 css clip-path 屬性；
CSS keyframes 可以幫助你創建 CSS 幀動畫；
Neumorphism.io 幫你創建新擬態的 UI 風格；
CSS Cursors 讓你的光標足夠酷；
CSS Grid Generator，作用如其名，幫助創建 CSS Gird；
Placeholder Image Generator 幫助創建圖片未加載出來的占位信息；
Htmldom：純原生 JS 代碼合集，幫助操作 DOM；
HTML5 head elements 是 head 標簽設置最強指南，真滴強；
設置并校驗 Input 框輸入，Input Type Sandbox 各種類型都有，專精尖；
Meta Tags 幫你自動導出流行社交網絡（如Facebook、Twitter、Google…）的 Meta Tags 以供使用；
Can I Include 幫你確定 HTML 元素之間是否可以嵌套；
Key codes 幫你輕松找到鍵盤按鍵所對應的 keycodes 來設置事件監聽；
Color contrast checker 幫你檢查網頁設計中兩種顏色之間的對比度；
Git Command Explorer 幫你充分了解和學習 Git 命令；
Make thumbnails 幫你輕松創建圖像縮略圖；
Can I Email 幫你查看電子郵件中可支持哪些 HTML 和 CSS 屬性；
Trianglify 幫你的網站創作出美麗的背景；
CSS Layout 收集了流行的 CSS 布局，幫你輕松選擇合適的網站設計；
FANCY-BORDER-RADIUS 幫你通過使用 CSS BORDER-RADIUS 屬性設置形狀來設計對象；
1loc 是一個聚合解決方案網站，幫你解決 JS 編程中經常遇到的各類問題；
Color Namer 讓每一個顏色都有一個獨特的名字；
BrowserFrame 給你的網站添加一個瀏覽器背景；
CSS Scan 收集了超多 box-shadow 效果網站；
Favicon 幫你創建免費的 FavIcon；
CSS Filter 將 CSS Filter 玩出花來；
Simple CSS Media Query Generator 幫你輕松搞定媒體查詢；
Mix Font 通過一種有趣且簡單的方式來發現、創建新字體；
Omatsuri 設計師工具集合網站，例如使用CSS創建三角形、創建網站光標顯示樣式、HTML符號等；
Underline Generator 幫你創建美麗的下劃線；
Checkboxes & Radios CSS Generator 創建 Checkboxes & Radios；
Convert Images to Base64 將圖片轉為 base64 格式；
Responsively 幫你查看多種設備下的網站效果；
UI Design Daily：UI 設計聚合網；
Devdocs：開發文檔聚合網；
Shortcode 幫你用簡短的代碼解決編程中的常見問題；
Public-apis 為你的網站提供免費的 API，接入免費數據；
CSS Grid Layout Generator 幫你用CSS快速構建復雜的網格系統；
CSS Duotone Generator 幫你設置圖像的CSS屬性，例如圖像的距離、不透明度、模糊、顏色等；
CSS3 Generator 幫你快速創建復雜的 CSS3 屬性，例如長方體陰影、漸變、過渡效果等。此外，對于每個屬性，還提供了不同瀏覽器支持的詳細信息；
Box Model 幫你更直觀的查web 對象填充設置、邊距和邊框屬性等；
Animated CSS Background Generator 幫你借用顏色創建動畫背景。此外，還提供一些其它屬性配置，如計數、大小、平均速度等；
Web Code Tools ，通過輸入屬性值來設置CSS中的公共屬性，并能直接預覽效果；
Enjoy CSS 幫你設置樣式，設置即預覽，享受它吧~
CSS Portal，是一個 CSS 各類生成器集合站點；
CSS3 Generator OverDesign 幫你設置web設計中的常用屬性；
HTML Table Generator 幫你輕松設計網站表格；
Making CSS 是一個工具聚合網站，幫你輕松實現 CSS；
CSS Masonry Generator 幫你實現可配置的圖片瀑布流；
Generator of CSS background patterns 幫你輕松構建不同類型的網站背景；
OK，以上便是本篇分享；請把收藏力拉滿，拿走不謝??！
歡迎點贊+轉發+關注！大家的支持是我分享最大的動力！！！
TML基礎簡介
超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用于創建網頁的標準標記語言。您可以使用 HTML 來建立自己的 WEB 站點，HTML 運行在瀏覽器上，由瀏覽器來解析。
HTML是一個網頁文件的拓展名，和txt、jpg、mp3一樣，是一個文件格。.html文件就是網頁文件。
2.html 的格式化標簽
<!DOCTYPE>
<html>
--html是一個雙標簽 開始標簽
<head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>
</title> --可能是標題
</head>
<body>--用來存放頁面中的內容
</body>
</html> --結束標簽
DOCTYPE----文檔類型聲明 meta標簽----設置頁面編碼格式，關鍵字，以及頁面的描述 <title></title>--------->標題部分 <head></head>------>頁面的頭部分 <body></body>------>頁面的主體部分
2.內容標簽
這其中<hr> <br> 是單標簽
<div></div> <span></span> 無意義區塊容器標簽
eg:
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的網頁標題</h1></div>
HTML標記—注釋標記
<!--注釋語句-->
標題： <h1>這是一個標題</h1> <h2>這是一個標題</h2> <h3>這是一個標題</h3>
段落： <p>這是一個段落。</p> <p>這是另外一個段落。</p>
HTML 鏈接
<!--提示:在 href 屬性中指定鏈接的地址。-->
<a >這是一個鏈接</a>
當您點擊 HTML 頁面中的某個鏈接時，對應的 <a> 標簽指向萬維網上的一個地址。
一個統一資源定位器(URL) 用于定位萬維網上的文檔。
URL - 統一資源定位器
scheme - 定義因特網服務的類型。最常見的類型是 http
host - 定義域主機（http 的默認主機是 www）
domain - 定義因特網域名，比如 runoob.com
:port - 定義主機上的端口號（http 的默認端口號是 80）
path - 定義服務器上的路徑（如果省略，則文檔必須位于網站的根目錄中）。
filename - 定義文檔/資源的名稱
這里需要注意:使用超鏈接做下載,并不是超鏈接完成的下載功能,而是通過超鏈接跳轉到了一個有下載功能的頁面。
常見的 URL Scheme
HTML 圖像
alt 屬性用來為圖像定義一串預備的可替換的文本。
3.HTML屬性
屬性實例:
HTML 鏈接由 <a> 標簽定義。鏈接的地址在 href 屬性中指定：<a >這是一個鏈接</a>
4.HTML 表格
表格由 <table> 標簽來定義。每個表格均有若干行（由 <tr> 標簽定義），每行被分割為若干單元格（由 <td> 標簽定義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。表格的表頭使用 <th> 標簽進行定義。
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
5.HTML 表單
表單是一個包含表單元素的區域。
表單元素是允許用戶在表單中輸入內容,比如：文本域(textarea)、下拉列表、單選框(radio-buttons)、復選框(checkboxes)等等。
文本域（Text Fields）
文本域通過<input type="text"> 標簽來設定
當用戶要在表單中鍵入字母、數字等內容時，就會用到文本域
密碼字段
密碼字段通過標簽<input type="password"> 來定義:
<form>
FirstName: <input type="text" name="firstname"><br>
Password: <input type="password" name="pwd">
</form>
單選按鈕（Radio Buttons）
<input type="radio"> 標簽定義了表單單選框選項
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
單選有時需要設置默認選項,需要設置checked屬性:
<input type="radio" name="sex" checked="checked"/>男
復選框（Checkboxes）
<input type="checkbox"> 定義了復選框. 用戶需要從若干給定的選擇中選取一個或若干選項。
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
多選框一般不需要設置默認選項,如果要設置,也是設置checked屬性
提交按鈕(Submit Button)
<input type="submit"> 定義了提交按鈕.
當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。:
<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
這里需要注意的是: Submit必須要和form一起使用才能達到效果
action 設置表單提交參數路徑
method 當前請求方式(同iOS開發網絡請求一樣,get/post)
假如您在上面的文本框內鍵入幾個字母，然后點擊確認按鈕，那么輸入數據會傳送到 "html_form_action.php" 的頁面。該頁面將顯示出輸入的結果。
圖片按鈕(使用不多)
Select下拉框
selected默認選項
<select>
<option selected="selected" >選項一</option>
<option>選項二</option>
</select>
Textarea文本域
<textarea></textarea>
6.HTML 列表
HTML 支持有序、無序和定義列表:
無序列表使用 <ul> 標簽
<ul>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ul>
有序列表始于 <ol> 標簽。每個列表項始于 <li> 標簽。
列表項項使用數字來標記。
<ol>
<li>第一個列表項</li>
<li>第二個列表項</li>
<li>第三個列表項</li>
</ol>
自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
去除點去除下劃線
a {
text-decoration: none;
}
ul {
list-style: none;
}
7.內聯樣式- 在HTML元素中使用"style" 屬性
HTML樣式實例 - 背景顏色
<body style="background-color:yellow;">
<h2 style="background-color:red;">這是一個標題</h2>
<p style="background-color:green;">這是一個段落。</p>
</body>
HTML 樣式實例 - 字體, 字體顏色 ，字體大小
我們可以使用font-family（字體），color（顏色），和font-size（字體大小）屬性來定義字體的樣式:
HTML 樣式實例 - 文本對齊方式
<h1 style="text-align:center;">居中對齊的標題</h1>
而關于其他CSS內容,這里就簡單介紹一下:
內部樣式表
當單個文件需要特別樣式時，就可以使用內部樣式表。你可以在<head> 部分通過 <style>標簽定義內部樣式表:
<head>
<style type="text/css">
body {background-color:yellow;
}
p {color:blue;}
</style>
</head>外部樣式表
當樣式需要被應用到很多頁面的時候，外部樣式表將是理想的選擇。使用外部樣式表，你就可以通過更改一個文件來改變整個站點的外觀。
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
HTML 樣式標簽
最后提一下什么是Web安全色?
數年以前，當大多數計算機僅支持 256 種顏色的時候，一系列 216 種 Web 安全色作為 Web 標準被建議使用。其中的原因是，微軟和 Mac 操作系統使用了 40 種不同的保留的固定系統顏色（雙方大約各使用 20 種）。
216 跨平臺 web 安全色被用來確保：當計算機使用 256 色調色板時，所有的計算機能夠正確地顯示所有的顏色。
HTML是用來描述網頁的一種語言。
HTML標記標簽通常被稱為HTML標簽（HTML Tag）。
HTML元素是指開始標簽（Start Tag）到接數標簽（End Tag）的所有代碼。
可以是用專業編輯器來編輯，推薦使用文本編輯器來學習HTML。
HTML標題（Heading）是通過<h1>~<h6>等標簽進行定義的。例如：
<h1>This is a heading</h1> <h2>This is a heading</h2> <h2>This is a heading</h2>
HTML段落是通過<p>標簽進行定義的。例如：
<p>This is a paragraph.</p> <p>This is another paragraph.</p>
HTML使用超級鏈接與網絡上的另一個文檔相連。幾乎在任何一個網頁中都能找到超級鏈接，單擊超級鏈接可以從一張頁面跳轉到另一張頁面。
通過使用<a>標簽可以在HTML中創建超級鏈接，具體有一下兩種使用/標簽的方式。
1. 通過使用href屬性創建指向另一個文檔的鏈接。
1. 通過使用name屬性創建文檔內的標簽。
使用target屬性可以定義被超級鏈接的文檔要在何處顯示。下面的這行會在新窗口打開文檔：
<a target="_blank">百度一下，你就知道</a>
要在頁面上顯示圖像需要使用（src），src是指"source"。源屬性的值是圖像的URL地址。定義圖像的語法是：
< img src="url" /> //URL指存儲圖像的位置
表格由<table>標簽來定義。每個表格均有若干行（由<tr>標簽定義），每行被分割為若干單元格（由<td>標簽定義）。字母td是指表格數據（table data），即數據單元格的內容。數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等。
<table border="1"> <tr> <td>row 1,cell 1</td> <td>row 1,cell 2</td> </tr> <tr> <td>row 2,cell 1</td> <td>row 2,cell 2</td> </tr> </table>
HTML支持有序列表、無序列表和自定義列表。
1）有序列表
無序列表是一個項目的列表，此列表項目使用粗體原點（典型的小黑圓圈）進行標記。無序列表始于<ul>標簽，每個列表項始于<li>標簽。
<ul> <li>Coffee</li> <li>Milk</li> </ul>
2）無序列表
有序列表是一個項目的列表，此列表項目使用數字進行標記。有序列表始于<ol>標簽，每個列表始于<li>標簽。
<ol> <li>Coffee</li> <li>Milk</li> </ol>
3）自定義列表
自定義列表不僅是一個項目的列表，也是項目及其注釋的組合。自定義列表以<dl>標簽開始，每個自定義列表項以<dt>標簽開始，每個自定義列表項的定義以<dd>標簽開始。
<dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
1）表單
HTML表單用于收集不同類型的用戶輸入信息。表單使用表單標簽（<form>）定義。
<form>... input 元素...</form>
2）輸入
多數情況下被用到的表單標簽是輸入標簽（<input>），輸入類型是由類型屬性（type）定義的。大多數經常被用到的輸入類型如下。
（1）文本域（Text Fields）。當用戶要在表單中輸入字母、數字等內容時，就會用到文本域。
<form> First name: <input type="text" name="firstname" /> Last name: <input type="text" name="lastname" /> </form>
（2）單選按鈕（Radio Buttons）。當用戶需要從若干給定的選擇中選取其一時，就會用到單選按鈕。主義，只能從中選取其一。
<form> <input type="radio" name="sex" value="male" /> Male <input type="radio" name="sex" value="female" /> Female </form>
（3）復選框（Checkboxes）。當用戶需要從若干給定的選擇中選取一個或若干選項時，就會用到復選框。
<form> <input type="checkbox" name="bike" /> I have a bike <input type="checkbox" name="car" /> I hava a car </form>
3）表單的動作屬性（Action）和確認按鈕
當用戶單擊確認按鈕時，表單的內容會被傳送到另一個文件。表單的動作屬性定義了目的文件的文件名。由動作屬性定義的這個文件通常會對接收到的輸入數據進行相關的處理。
<form name="input" action="html_form_action.asp" method="get"> Username:<input type="text" name="user" /> <input type="submit" value="Submit" /> </form>
<body>擁有兩個配置背景的標簽，背景可以是顏色或者圖像。
1）背景顏色（Bgcolor）
背景顏色屬性將背景設置為某種顏色，屬性值可以是十六進制數、RGB值或顏色名。
<body bgcolor="#00000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black">
2）背景（Background）
背景屬性將背景設置為圖像，屬性值為圖像的URL。如果圖像尺寸小于瀏覽器窗口，那么圖像將在整個瀏覽器窗口進行復制。
<body backgroud="clouds.gif"> <body backgroud="http://www.w3school.com.cn/clouds.gif">
當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化。有以下3種方式來插入樣式表。
1）外部樣式表
當樣式需要被應用到很多頁面時，外部樣式表將是理想的選擇。使用外部樣式表，用戶就可以通過更改一個文件來改變整個站點的外觀。
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
2）內部樣式表
當單個文件需要特別樣式表時，就可以使用內部樣式表。用戶可以在head部分通過<style>標簽定義內部樣式表。
<head>
<style type="text/css">
body {backgroud-color:red}
p {margin-left:20px}
</style>
</head>
3）內聯樣式
當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。使用內聯樣式的方法是在相關的標簽中使用樣式屬性。樣式屬性可以包含任何CSS屬性。以下示例顯示出如何改變段落的顏色和左外邊距。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
