整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
计最近大家也都看到了，在浏览互联网时，很多网站首页都变成了灰色。比如百度首页、淘宝、京东、哔哩哔哩等我们常浏览的网站。一般在纪念对社会有重大贡献的任务或者大事件时，为了表达我们的尊重以及沉痛心情，将网站变成灰色进行纪念。
那么，作为一个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小时内与您取得联系。
