整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
計最近大家也都看到了，在瀏覽互聯網時，很多網站首頁都變成了灰色。比如百度首頁、淘寶、京東、嗶哩嗶哩等我們常瀏覽的網站。一般在紀念對社會有重大貢獻的任務或者大事件時，為了表達我們的尊重以及沉痛心情，將網站變成灰色進行紀念。
那么，作為一個it從業的技術人員來說，將平時色彩鮮明的網站置成灰色是如何實現的呢？是如何可以做到文字、圖片、按鈕所有的元素都是灰色的效果呢？
方案1：提前設計一套網站的灰色css樣式，在需要的時候進行替換。顯然這樣做的成本太大，而且有些網站還有一些flash的動畫效果，難道也要做一個黑白版本？甚至有些CG特效動畫更是燒錢。
方案2：幾行代碼輕松搞定。
其實這個效果的實現并沒有我們想象的那么復雜。在網頁端按下F12，打開開發者模式，定位到html標簽上，我們可以看到這樣一段代碼樣式：
{
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray;
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}如果我們將這個樣式取消，或者是將樣式中的100%設置為0，又會恢復成網站本來的顏色配置。
那么這段代碼是什么意思呢？主要看 filter grayscale(https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter)是個什么東東。
grayscale 是一個 CSS 函數，可以把圖像轉成灰色，參數是個百分比，結果返回一個 filter 函數。目前的主流瀏覽器版本都支持 grayscale 函數，比如說 PC 端的 Chrome、edge、Firefox、Opera、Safari 等等，除了 IE。
通常我們在寫input時，它的背景文字框都是灰色的，樣式很單一，其實它可以做的更好看的，在CSS3中就專門提供了一屬性placeholder來實現輸入框的美化。接下來，就為大家展示下：
HTML：
CSS：
效果：
對于input輸入框的背景提示信息(placeholder)的美化雖然只是對網站應用的小小點綴，但正是這樣細節上的小差別將你的網站和別人的網站區別開來。IE10也支持了placeholder屬性哦！
切版 qieban(.cn)
家好，昨天給大家介紹了HTML上篇的內容，包括web前端開發的要素、HTML注釋使代碼進入不執行狀態、HTML聲明結構以及頭部標簽，還給大家介紹了了標題標簽、文本標簽、段落標簽以及超鏈接的幾種常用標簽、希望大家已經學習到了并且以及掌握，接下來我們繼續介紹HTML剩余的幾個超級常用的標簽：
圖片標簽
語法：<img src=”” width=”” height=”” alt=””>
列表標簽
列表標簽分為有序列表和自定義列表。
有序列表分為兩種形式，這里小編就不過多做文字等言語上的介紹，下面的例子就可以一目了然了：
1.<ul type=”disc|square|circle”>
<li></li>
</ul>
效果如下
2.<ol type=”a|A “ start=”數字”>
<li><li>
</ol>
效果如下
自定義列表
<dl>
<dd></dd>
<dt></dt>
</dl>
如下
表格標簽
表格標簽的功能很強大，它不僅可以使數據內容更加美觀整齊，而且可以使網站數據和其他用途顯得更加專業化、其中后臺數據庫在網頁中的展現形式大多都采用表格的形式，因為表格的布局形式是HTML語言中比較整齊易于上手的布局形式，當然有人會說<div>的盒子模型更為強大、小編在以后會介紹到，那個不屬于HTML范疇，好了，不多廢話了，我們一起來認識下表格標簽吧！
外圍標簽
<table witdth height boder color align cellpadding cellpacing></table>
表格標題 <caption></caption>
行<tr></tr>
列<td></td>
表格頭<th></th>
合并行 rowspan
合并列 colspan
Valign跟在align標簽的后面用來對內容位置的進一步調整；
代碼如下
<table border="1" width="800" height="800" cellspacing="0" cellpadding="0">
<caption>顏色表</caption>
<tr>
<th>紅色</th>
<th>黃色</th>
<th>紫色</th>
</tr>
<tr >
<td rowspan="2" bgcolor="red">1</td>
<td valign="top">2</td>
<td>3</td>
</tr >
<tr>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td colspan="2" bgcolor="green">1</td>
<td>3</td>
</tr>
效果如下
From表單
在這里給大家提個醒，from表單是前后端特別是和php前后端數據相互交互的重要媒介和組成部分，希望大家可以好好了解下表單，為以后的學習打下良好的基礎。
<from action=”” method=”” enctype=”” name=””></form>
Action 設置接收和處理瀏覽器遞交的表單內容的服務器程序的鏈接
Method 用來定義瀏覽器將表單中的信息提交給服務器端的處理程序的方式，取值可以為：GET或POST get在本頁面傳值 post在服務器回傳值
Enctype 一般不使用，為默認，在文件上傳時需要設定改變
單行文本框
<input type=”text” name=”” value=”” size=”” maxlength=””/>
多行文本框
<textarea rows=”” cols=””name=””></textarea>
密碼文本框
<input type=”password” name=”” size=”” maxlengrh=””/>
單選框
<input type=”radio” name=”’ value=”” checked=”checked”>
Name值相同的為一組
復選框
<input type=”checkbox” name=”” value=”” checked=”checked”
復選框的name值相同為一組
綜上如下
Label標簽綁定屬性
語法
<form>
<label for=”命名”></label>
<input type=”radio” name=”” id=”命名”>
</form>
下拉菜單
<select name=”” size=” multiple=”mulitple”>
<optgroup label=””>
<option></option>
</optgroup>
</select>
如下
隱藏框
按鈕
提交按鈕
<input type=”sumbit” name=”” value=””/>
重置按鈕
<input type=”reset” name=”” value=””/>
普通按鈕
<input type=”button” name=”” value=””/>
如下
readonly與disabled屬性
readonly
readonly 屬性規定輸入字段為只讀,但其value值仍會被表單提交
readonly屬性只針對text、password和textarea有效
disabled
disabled屬性規定禁用該表單元素，其value值不會被表單提交
disabled屬性對所有表單元素均有效，包括select, radio, checkbox, button等
使用disabled屬性后表單元素背景會變成灰色
HTML中FROM表單input type:
框架
這里所說的框架并不是大型前端框架或者是后端框架，而是HTML里對網頁構架的一種固定模式，如果說表格是對網頁小范圍布局的話，那么框架可以對整個HTML網頁起到整體的構架和布局的作用，例如我們熟悉的w3school網站，當然還有很多網站也用到了，我們來了解下：
<frameset cols=”10%,*,10%”>/*frameset框架cols表示分列，如果分三列則如上所述，rows分行，同列；其中*為自適應剩余面積。
<frame name=”’ src=”” noresize=”noresize” scrolling=”yes/no/auto”><frame>
</frameset>
去掉框架的邊框 frameborder=”0/1” 0為無1為有 如果有則設置boder=””;
Framese的跳轉
跳轉到frame指定板塊
給對應的frame定義name名字
<frame name="right" src="left.html"/>
修改跳轉方式
<a href="one.html" target="right">第一頁</a>
Noframe標簽
<frameset">
<noframes>
<body>
你的瀏覽器不支持框架
<body>
</noframes>
</frameset>
Iframe內聯式框架
<iframe name=”規定iframe的名稱” src=” 規定在iframe中顯示的文檔URL” frameborder=”0|1” width=”” height=”” scrolling=”規定是否滾動”></iframe>
Marginheight: 定義 iframe 的頂部和底部的邊距
Marginwidth: 定義 iframe 的左側和右側的邊距
跳轉
跳轉到頂級
<a href=”” target=”_top”></a>
跳轉到父級
<a href=”” target=”_parent></a>
跳轉到新頁面
<a href=””” target=”_blank></a>
本頁面跳轉
<a href=”” target=”_self></a>
自定義跳轉”
好了，HTML就給大家介紹到這里，希望大家看了小編的HTML介紹，已經對網站開發有了入門級的了解了吧。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
