[ 本帖最后由 zms198983 于 2013-1-22 10:34 编辑 ]\n\n文字上传的话 会乱掉

给使用FTTH光纤 并且同型号的光猫用户一个破解教程
PS：这是我第一次写教程 写的不好 就谅解一下咯！
声明：此教程涉及 Linux基础 如果没有linux基础 此教程您可能会看不懂 会一下子蒙了
不小心把系统的核心配置给删了 本人该不负责 破解有风险（意外） 破解要想清楚在执行
本人平移FTTH光纤 电信送了一个“华为HG8245”光猫
免费提速至20M（不过我另外加了10块钱升到50M了 幸福吧！羡慕吧！）
吐槽：天朝的东西都是太坑爹了 全是限制 果断了必须破解掉 干掉各种限制
进入正题： 前面说过了你需要linux基础 否则你可能看不懂 一下子就蒙了
破解需要东西：
1.root账号密码（PS: 电信限制太多了 还都是本地的 东西都是我的 你妹的还搞我的东西）
2.USB储存设备（U盘,SD卡，TF卡 之类的）
3.telnet连接
4.本文可能用到的指令：grep,vi,cd,cat （不会用？ 去补课吧！
破解工作内容：
1.破解上网机器限制
2.取消远程电信的所有管理权限 不让电信监视你 追踪你
3.开启路由,wifi, 等功能
接下来开始破解工作：
首先试试用户名：telecomadminn 密码：E7jA%5m 试试能不能进去（PS：电信定制的设备一般都是这个密码
进去之后 网络 宽带设置 把设置全部记下来 以后有用这个只是备份 以防万一而已
如果进不去就要telnet了
telnet 192.168.1.1 （可能地区不同光猫IP地址也不同 这个你找下就行了）
login: root
password: admin
[mw_shl_code=bash,true]WAP> shell
WAP> cd /mnt/jffs2
WAP> grep telecomadmin hw_ctree.xml # 这里就是你的密码了 记下
WAP> ls # PS：这里有几个东西是很重要的 如下：\
> 当前配置：hw_ctree.xml \
> 备份配置：hw_ctree_bak.xml \
> 出厂默认：hw_default_ctree.xml
WAP> cp -rfp ./ /mnt/usb1_1 #把所有配置拷贝到USB储存设备里备份 如果没有就自己挂载一下
WAP> vi hw_ctree.xml # PS：这里vi就用到了 不会的去补课去[/mw_shl_code]
========================这些是内容配置说明=============================
[mw_shl_code=xml,false]<X_HW_CLIUserInfo NumberOfInstances="1">
<X_HW_CLIUserInfoInstance InstanceID="1" Username="root" Userpassword="21232f297a57a5a743894a0e4a801fc3"/>
</X_HW_CLIUserInfo>
这段是telnet的登陆用户名和密码其中21232f297a57a5a743894a0e4a801fc3 就是密码admin的MD5值 你可以改成别的
<X_HW_WebUserInfo NumberOfInstances="2">
<X_HW_WebUserInfoInstance InstanceID="1" UserName="telecomadmin" Password="nE7jA%5m" UserLevel="1" Enable="1"/>
<X_HW_WebUserInfoInstance InstanceID="2" UserName="useradmin" Password="admin" UserLevel="0" Enable="1"/>
</X_HW_WebUserInfo>
这段是WEB管理的用户 你可以把telecomadmin,useradmin改成你喜欢的名字和密码
<X_HW_UserInfo UserName="*" UserId="" Status="0">
<X_HW_ServiceManage FtpEnable="0" FtpUserName="root" FtpPassword="123456" FtpPort="21" FtpRoorDir="/mnt/usb1_1/" FtpUserNum="0"/>
<X_HW_AmpInfo EthLoopbackTimeout="0" LoidAuthLedEnable="1"/>
这段是FTP用户（一般是刷固件使用的）懒的话这段不改也成
<X_HW_PortalManagement Enable="0" DefaultUrl=""/>
<X_HW_AccessLimit Mode="GlobalLimit" TotalTerminalNumber="4"/>
</Service>
这段是上网限制TotalTerminalNumber就是同时只能4台上网 我感觉改成512就差不多了
管理界面 网络 宽带设置 里其中 *TR069* 这个东西是电信控制你的设备的
有这东西,你的设备,内网 都是透明给电信运营商的 所以这玩意儿是必须删掉的
因为懒得写了 这段暂时省略 因为太长了orz[/mw_shl_code]
==========================说明结束=================================
[mw_shl_code=bash,true]WAP> rm -f hw_ctree_bak.xml hw_default_ctree.xml
WAP> cp hw_ctree.xml hw_ctree_bak.xml && cp hw_ctree.xml hw_default_ctree.xml[/mw_shl_code]
这段我感觉还是都改了好
=================WEB配置=================
管理界面 网络 宽带设置
电话：原：*VOIP* 添加链接 VOIP服务 把之前记下的VLAN ID之类的填进去保存
宽带：原：*INTERNET* 添加链接 INTERNET服务 一样把记下来的 VLAN ID填进去 PPPoE拨号账号密码不知道打电话问电信 要不要开路由自己看
IPTV：原：*OTHER* 添加链接 OTHER服务 跟 之前的一样配置
全部保存了然后重启
其他的东西比如无线之类的 是人的都知道 都会配置就不说了
好东西值得收藏 华为配置加密方式：
C++代码：
加密：
[mw_shl_code=cpp,true]/*加密 就是把ascii值乘2,如果超过127,就减去127,完事*/
string encode(string input){
string rtn="";
for(int i=0;i<(signed)input.length();++i){
unsigned char val=input.data();
int n=val*2;
if(n>127){
n-=127;
}
rtn.append(1,(char)n);
}
return rtn;
}[/mw_shl_code]
解密：
[mw_shl_code=cpp,true]/*解密就是逆向工程*/
string decode(string input){
string rtn="";
for(int i=0;i<(signed)input.length();++i){
unsigned char val=input.data();
int n=0;
if(val%2){
n=(val+127)/2;
}else{
n=val/2;
}
rtn.append(1,(char)n);
}
return rtn;
}[/mw_shl_code]
===================================================
光猫还可以挂QQ哟！
因为TX已经把linuxQQ给关了 不能用了 等QQlinux上线了就行了 24小时在线QQ什么的很厉害的
  该贴已经同步到 氺菓的微博

HTML 是用来描述网页的一种语言。他不是一种程序语言而是一种标记语言
他不要任何辅助的客户端软件不需要任何web服务器
打开你的记事本
今天我们就让你亲手编辑一个网页
HTML代码测试框 
以下是html的基础知识
html标签是由尖括号包围的关键词，比如  *本站禁止HTML标签噢*
htnl标签通常是成对出现的，比如  *本站禁止HTML标签噢*  和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
比如
*本站禁止HTML标签噢*
*本站禁止HTML标签噢*
*本站禁止HTML标签噢* 技术宅</h1>
*本站禁止HTML标签噢* 网页制作</p>
</body>
</html>
html标签
想要用html做网页就必须熟记这些标签
*本站禁止HTML标签噢*  与 </html> 之间的文本描述网页
*本站禁止HTML标签噢*  与 </body> 之间的文本是可见的页面内容
这个必须出现在开头结尾
*本站禁止HTML标签噢*  与 </h1> 之间的文本被显示为标题
HTML 标题是通过  *本站禁止HTML标签噢*  -  *本站禁止HTML标签噢*  等标签进行定义的，依次变小
*本站禁止HTML标签噢*  与 </p> 之间的文本被显示为段落，相当于换行，回车
连接用的 *本站禁止HTML标签噢*
例如：<a href="https://www.gn00.com">技术宅（这里是链接文字）</a>
图像用 *本站禁止HTML标签噢*
例如：<img src="w3school.jpg" width="104" height="142" />
注意，如果你想用到图片
网络图片需要用到连接，本地图片需要路径
<br /> 就是没有关闭标签的空元素，定义换行
下面我们举三个例子，大家可以把代码复制到   HTML代码测试框  运行一下看看效果
（1）使用滚动，表示样式，图片
[mw_shl_code=html,true] *本站禁止HTML标签噢*
*本站禁止HTML标签噢*
<!><marquee height=60><font color=#FF0000>欢 迎 你 进 入 软 软 的 抖 S 调 教 场</font></marquee></!>
<br />
<br />
<br />
*本站禁止HTML标签噢*  *本站禁止HTML标签噢*  *本站禁止HTML标签噢* 技术宅</b></h1></center>
*本站禁止HTML标签噢*  *本站禁止HTML标签噢*  *本站禁止HTML标签噢*  *本站禁止HTML标签噢* 简易网页制作<img src=http://m2.img.papaapp.com/farm4/100/23951AFBC40D7BA88A11CDF4492F3464_80_80.GIF></img></b></h3></center></p>
</body>
</html>[/mw_shl_code]
（2）使用表格@NateSilver
[mw_shl_code=html,true] *本站禁止HTML标签噢*
*本站禁止HTML标签噢*
*本站禁止HTML标签噢* NateSilver</h4>
<table border="1">
*本站禁止HTML标签噢*
<td bgcolor="red">纯洁度</td>
*本站禁止HTML标签噢* 100</td>
</tr>
*本站禁止HTML标签噢*
*本站禁止HTML标签噢* 天真度</td>
*本站禁止HTML标签噢* 100</td>
</tr>
</table>
</body>
</html>[/mw_shl_code]
还有很多下面是的html 标签
<!> 跑马灯 
 *本站禁止HTML标签噢* ...</marquee>普通卷动 
<marquee behavior=slide>...</marquee>滑动 
<marquee behavior=scroll>...</marquee>预设卷动 
<marquee behavior=alternate>...</marquee>来回卷动 
<marquee direction=down>...</marquee>向下卷动 
<marquee direction=up>...</marquee>向上卷动 
<marquee direction=right></marquee>向右卷动 
<marquee direction=’left’></marquee>向左卷动 
<marquee loop=2>...</marquee>卷动次数 
<marquee width=180>...</marquee>设定宽度 
<marquee height=30>...</marquee>设定高度 
<marquee bgcolor=FF0000>...</marquee>设定背景颜色 
<marquee scrollamount=30>...</marquee>设定滚动速度 
<marquee scrolldelay=300>...</marquee>设定卷动时间 
 *本站禁止HTML标签噢* ...</marquee>鼠标经过上面时停止滚动 
 *本站禁止HTML标签噢* ...</marquee>鼠标离开时开始滚动 
字体效果 
 *本站禁止HTML标签噢* ...</h1>标题字(最大) 
 *本站禁止HTML标签噢* ...</h6>标题字(最小) 
 *本站禁止HTML标签噢* ...</b>粗体字 
 *本站禁止HTML标签噢* ...</strong>粗体字(强调) （同上效果略同） 
 *本站禁止HTML标签噢* ...</i>斜体字 
 *本站禁止HTML标签噢* ...</em>斜体字(强调) 
 *本站禁止HTML标签噢* ...</dfn>斜体字(表示定义) 
 *本站禁止HTML标签噢* ...</u>底线 
 *本站禁止HTML标签噢* ...</ins>底线(表示插入文字) 
 *本站禁止HTML标签噢* ...</strike>横线 
 *本站禁止HTML标签噢* ...</s>删除线 
 *本站禁止HTML标签噢* ...</del>删除线(表示删除) 
 *本站禁止HTML标签噢* ...</kbd>键盘文字 
 *本站禁止HTML标签噢* ...</tt> 打字体 
 *本站禁止HTML标签噢* ...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效) 
 *本站禁止HTML标签噢* ...</plaintext>固定宽度字体(不执行标记符号) 
 *本站禁止HTML标签噢* ...</listing> 固定宽度小字体 
<font color=00ff00>...</font>字体颜色 
<font size=1>...</font>最小字体 
<font style =’font-size:100 px’>...</font>无限增大 
区断标记 
 *本站禁止HTML标签噢* 水平线 
<hr size=’9’>水平线(设定大小) 
<hr width=’80%’>水平线(设定宽度) 
<hr color=’ff0000’>水平线(设定颜色) 
 *本站禁止HTML标签噢* (换行) 
 *本站禁止HTML标签噢* ...</nobr>水域(不换行) 
 *本站禁止HTML标签噢* ...</p>水域(段落) 
 *本站禁止HTML标签噢* ...</center>置中 
连结格式 
<base href=位址>(预设好连结路径) 
<a href=位址></a>外部连结 
<a href=位址 target=’_blank’></a>外部连结(另开新视窗) 
<a href=位址 target=’_top’></a>外部连结(全视窗连结) 
<a href=位址 target=’页框名’></a>外部连结(在指定页框连结) 
贴图/音乐 
<img src=图片位址>贴图 
<img src=图片位址 width=’180’>设定图片宽度 
<img src=图片位址 height=’30’>设定图片高度 
<img src=图片位址 alt=’提示文字’>设定图片提示文字 
<img src=图片位址’ border=’1’>设定图片边框 
<bgsound src=MID音乐档位址>背景音乐设定 
表格语法 
<table aling=left>...</table>表格位置,置左 
<table aling=center>...</table>表格位置,置中 
<table background=图片路径>...</table>背景图片的URL=就是路径网址 
<table border=边框大小>...</table>设定表格边框大小(使用数字) 
<table bgcolor=颜色码>...</table>设定表格的背景颜色 
<table borderclor=颜色码>...</table>设定表格边框的颜色 
<table borderclordark=颜色码>...</table>设定表格暗边框的颜色 
<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色 
<table cellpadding=参数>...</table>指定内容与格线之间的间距(使用数字) 
<table cellspacing=参数>...</table>指定格线与格线之间的距离(使用数字) 
<table cols=参数>...</table>指定表格的栏数 
<table frame=参数>...</table>设定表格外框线的显示方式 
<table width=宽度>...</table>指定表格的宽度大小(使用数字) 
<table height=高度>...</table>指定表格的高度大小(使用数字) 
<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字) 
<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字) 
有很多自己需要的也可以再网上查找
这里有一个打包html 标签大全
失效http://115.com/file/dpa8u3rb#
html标签属性大全.doc
大家学习愉快，相关技术指导贴也会开，敬请期待

上次的HTML历史第零讲话说似乎没什么人有反应么？【召唤尼尼~@口肯口肯ken娘
其实我觉得可以去设计的板块发= =
因为这个东西毕竟与网页设计关系比较大
但其实前端什么的就是呈现给各位观众，也就说越抢眼越吸引人的网页，才更能留得住用户。
所以网页的美化与前端开发也是有着重大关系的。学点网页美化相关知识，对做前端也是有帮助的。
昨天跟@基叔 聊了不少。提到关于CSS的问题，他复制给我一段话
学过CSS的人都知道，它不是一种编程语言。
你可以用它开发网页样式，但是没法用它编程。也就是说，CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有条件语句，只是一行行单纯的描述，写起来相当费事。
所以可能程序员以程序员的思维来写CSS，是有些难度。
再所以，我可能都会把这个帖子搬到设计板块去了。
好了废话不多说，我们现在进入正题，CSS简介和使用基础。
照样在度娘里摘文：
级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style Sheet）”，它是用来进行网页风格设计的。比如，如果想让链接字未点击时是蓝色的，当鼠标移上去后字变成红色的且有下划线，这就是一种风格。通过设立样式表，可以统一地控制HTML中各标志的显示属性。级联样式表可以使人更能有效地控制网页外观。使用级联样式表，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。
对！就是大家都看过的，基本上每个网站或者页面都会运用到的级联样式表！
版本上和度娘讲的差不多，大家可以读一读度娘的解释（虽然没什么用= =）：http://baike.baidu.com/view/15916.htm
在这么短的帖子里，我最多也只能介绍那么多。
附上一个网站：http://www.divcss5.com/
接下来我们来看看需要什么基础（这是笔者综合起来的结果）：
1.盒子模型     2.网页元素     3.选择器      4.属性及属性值      5.布局
首先是盒子模型：
那么什么是盒子模型？其实就是css里引入的一个从抽象到具体的概念。把html中的各种标签也就是网页元素比作成一个盒子以便学习和使用的人能够更好的理解网页元素的控制。（这是我的理解）
盒子模型基本上被下面两张图诠释了。但是要深入理解，请自行上网找资料~
这就是大名鼎鼎的CSS盒子模型。
接下来说说盒子模型的理解：盒子模型的每一个属性都可以被声明被控制
现在举一个例子，请看代码[mw_shl_code=html,true]<!doctype html> *本站禁止HTML标签噢*
*本站禁止HTML标签噢*
<meta charset="utf-8">
*本站禁止HTML标签噢* Test Document</title>
<style type="text/css">
body{margin: 0px;padding: 0px;color: #fff;font: 20px "Times New Roman", Times, serif;}
#container{width: 800px;margin: 0px auto;}
#header{width: 800px;height: 100px;background-color: #333;}
#content{width: 800px;height: 600px;background-color: #666;}
#footer{width: 800px;height: 150px;background-color: #999;}
#test {
float: left;
width: 200px;
height: 300px;
background-color: #005;
margin-top: 30px;
margin-right: 60px;
margin-bottom: 60px;
margin-left: 60px;
/*padding*/
padding-top: 30px;
padding-right: 60px;
padding-bottom: 60px;
padding-left: 60px;
/*border*/
border-top: 30px solid #fff;
border-right: 60px dashed #ff0;
border-bottom: 60px dotted #ff5;
border-left: 60px double #ff8;
}
</style>
</head>
*本站禁止HTML标签噢*
<div id="container">
<div id="header">我是Header</div>
<div id="content">
<div id="test">我是内容！！！</div>
这是网页内容
</div>
<div id="footer">这是网页的尾部</div>
</div>
</body>
</html>[/mw_shl_code]这是一个简单的测试页面。
我们可以看到body标签中得4个div是#container和被包含着的#header和#content和#footer
（现在估计就会有人问为什么不用html5的新标签= =笔者是老东西不爱用新的）
其中有一个id为test的元素！就是今天盒子模型的整体体现了！
总结一下：盒子模型的属性有什么
上右下左的外边距、上右下左的边框、上右下左的内边距、宽度、高度、背景
看到过这个代码么？[mw_shl_code=css,true]#test{margin: 9px 8px 7px 6px;}[/mw_shl_code]这个就是属性的快捷用法，不用每条边距什么的都分开声明，那么是按照什么样的顺序呢？
唔可能各位都察觉到我为什么要写”上右下左的“XXX，其实就是从上开始顺时针声明~
那么，其实CSS到底能控制什么？
CSS能控制的就是body和body的元素！！！
唔，这就是html的元素问题了。神马是元素啊？body是元素，div是元素，段落p是元素。
能在body标签里用上的东西基本上都是元素。
既然是元素！那就应该符合盒子模型！能够控制其所有的盒子模型中的属性！
但是html中元素也是有区别的，于是就引入了块级元素和行内级元素之类等等：
块元素(block element)
* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级容易，也是css layout的主要标签
* dl - 定义列表
* fieldset - form控制组
* form - 交互表单
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* isindex - input prompt
* menu - 菜单列表
* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
* noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
内联元素(inline element)
* a - 锚点
* abbr - 缩写
* acronym - 首字
* b - 粗体(不推荐)
* bdo - bidi override
* big - 大字体
* br - 换行
* cite - 引用
* code - 计算机代码(在引用源码的时候需要)
* dfn - 定义字段
* em - 强调
* font - 字体设定(不推荐)
* i - 斜体
* img - 图片
* input - 输入框
* kbd - 定义键盘文本
* label - 表格标签
* q - 短引用
* s - 中划线(不推荐)
* samp - 定义范例计算机代码
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器，定义文本内区块
* strike - 中划线
* strong - 粗体强调
* sub - 下标
* sup - 上标
* textarea - 多行文本输入框
* tt - 电传文本
* u - 下划线
* var - 定义变量
可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
* applet - java applet
* button - 按钮
* del - 删除文本
* iframe - inline frame
* ins - 插入的文本
* map - 图片区块(map)
* object - object对象
* script - 客户端脚本 
那么其实什么是块元素什么是行内级元素呢？
块级元素： 诸如段落、标题、列表、表格、DIV和BODY等元素都是块级(block-level)元素。图样和表单输入这样的替换元素，可以看做是快级元素，但通常都不这样看。每个快级元素都从一个新行开始显示，而且其后的元素也需另起一行进行显示。快级元素只能作为其他快级元素的子元素，而且需要一定的条件。
内联元素： 如A、EM、SPAN元素及大多数的替换元素，如图像和表单输入的元素。他们不必在新行上显示，也不强迫其他元素在新行上显示，而且可以作为任何其他元素的子元素
其实css中也提供了一个属性可以让元素转换类型，就是display属性，以下是display的属性值~
block : 　CSS1　块对象的默认值。用该值为对象之后添加新行
inline : 　CSS1　内联对象的默认值。用该值将从对象中删除行
none : 　CSS1　隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
compact : 　CSS2　分配对象为块对象或基于内容之上的内联对象
marker : 　CSS2　指定内容在容器对象之前或之后。要使用此参数，对象必须和:after及:before 伪元素一起使用
inline-table : 　CSS2　将表格显示为无前后换行的内联对象或内联容器
list-item : 　CSS1　将块对象指定为列表项目。并可以添加可选项目标志
run-in : 　CSS2　分配对象为块对象或基于内容之上的内联对象
table : 　CSS2　将对象作为块元素级的表格显示
table-caption : 　CSS2　将对象作为表格标题显示
table-cell : 　CSS2　将对象作为表格单元格显示
table-column : 　CSS2　将对象作为表格列显示
table-column-group : 　CSS2　将对象作为表格列组显示
table-header-group : 　CSS2　将对象作为表格标题组显示
table-footer-group : 　CSS2　将对象作为表格脚注组显示
table-row : 　CSS2　将对象作为表格行显示
table-row-group : 　CSS2　将对象作为表格行组显示 
其实常用的display就只有block、inline和none。
下面来引用一段代码~[mw_shl_code=html,true]<!doctype html> *本站禁止HTML标签噢*
*本站禁止HTML标签噢*
<meta charset="utf-8">
*本站禁止HTML标签噢* Test Document</title>
<style type="text/css">
body{margin: 0px;padding: 0px;color: #fff;font: 20px "Times New Roman", Times, serif;}
#container{width: 800px;margin: 0px auto;}
#header{width: 800px;height: 100px;background-color: #333;}
#content{width: 800px;height: 600px;background-color: #666;}
#footer{width: 800px;height: 150px;background-color: #999;}
</style>
</head>
*本站禁止HTML标签噢*
<div id="container">
<div id="header">我是Header</div>
<div id="content">
<p id="test">
这只是一个测试这只是一个测试这只是一个测试
<a href="#" target="_blank">
这不是测试这不是测试这不是测试这不是测试这不是测试这不是测试这不是测试这不是测试这不是测试这不是测试这不是测试
</a>
这只是一个测试这只是一个测试这只是一个测试这只是一个测试这只是一个测试</p>
</div>
<div id="footer">这是网页的尾部</div>
</div>
</body>
</html>[/mw_shl_code]元素#test是一个p元素，我们知道是块级的，所以里面可以用a元素。但是想在a元素内插入div元素，
就很容易出现错误，可能是错位，可能是a元素的声明失效。
那么我想a元素也变成一个块级元素怎么办呢？
可以利用html标签属性style：[mw_shl_code=html,true]<a href="#" target="_blank" style="display: block;">[/mw_shl_code]其实就是在html中使用css
然后还可以通过选择器选择到a元素再加上display声明。这样就可以顺利将a转换成块级元素了。
好了今天就讲两小块~
唔。下次讲选择器、属性值、属性~
如果看完帖子的能不能告诉我需不需要开个html的内容呢？
似乎很多人对html都不太理解的说= =

本帖最后由 kenneth 于 2012-10-23 15:05 编辑
大家好我是肯尼斯~以下召唤肯尼围观一下~@口肯口肯ken娘
笔者虽然也不是什么高手，从事网页设计也有一年多。
接着是我的网站http://an-ti.net 【由于网站还在初期，没有什么实质的东西。。。只是宣传一下= =
嘛~接下来废话不多说，今天要讲的就是入门里最入门的系统化的东西~
HTML历史及版本
首先我们来几段文摘~
什么是 HTML？
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
【摘自：W3school】
虚拟主机超文本置标语言(第一版)——在1993年6月发为互联网工程工作小组 (IETF)工作草案发布（并非标准）.
HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
HTML 3.2——1996年1月14日，W3C推荐标准
HTML 4.0——1997年12月18日，W3C推荐标准
HTML 4.01（微小改进）——1999年12月24日，W3C推荐标准
ISO/IEC 15445:2000（“ISO HTML”）——2000年5月15日发布，基于严格的HTML 4.01语法，是国际标准化组织和国际电工委员会的标准
XHTML 1.0——发布于2000年1月26日，是W3C推荐标准，后来经过修订于2002年8月1日重新发布。
XHTML 1.1, 于2001年5月31日发布
(XHTML 2.0, W3C工作草案)
【摘自：某资料】
什么是 HTML5？
HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。
HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
【摘自：W3school】
以上都是我刚刚现找的~但其实想真正了解静态语言版本，网上许多资料都是不全面的
我们现在常用的当然只有HTML4.01/XHTML1.0/刚兴起的HTML5
各版本区别各种不同，要根据不同浏览器进行代码调整也是必要的
那么什么才是真正的HTML版本问题呢~版本问题又会涉及到什么呢~
我们现在来仔细探讨html版本~
首先我们来学习一下如何看懂<!doctype html>标签，于是再摘几个代码段~
（这是由DW CS6给出的标准初始文档）
[mw_shl_code=html,true]<!doctype html>
*本站禁止HTML标签噢*
*本站禁止HTML标签噢*
<meta charset="utf-8">
*本站禁止HTML标签噢* 无标题文档</title>
</head>
*本站禁止HTML标签噢*
</body>
</html>[/mw_shl_code]这是HTML5文档【为方便~以下直接贴出doctype行~
[mw_shl_code=html,true]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
*本站禁止HTML标签噢* [/mw_shl_code]这是HTML4.01 Transitional文档（html标签无xmlns属性）
[mw_shl_code=html,true]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
*本站禁止HTML标签噢* [/mw_shl_code]这是HTML4.01 strict文档（html标签无xmlns属性）
[mw_shl_code=html,true]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">[/mw_shl_code]这是XHTML1.0 Transitional文档（!DOCTYPE html 的html是小写）
[mw_shl_code=html,true]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">[/mw_shl_code]
这是XHTML1.0 Strict文档（!DOCTYPE html 的html是小写）
[mw_shl_code=html,true]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">[/mw_shl_code]这是XHTML1.1文档（!DOCTYPE html 的html是小写）
大家可以看看使用DW新建一下常用版本，然后比较一下看看有什么区别
狗血吧~！！那个时候笔者为了理顺这些个版本，也是花了些时间。
唔~现在应该就会有人问，版本什么的其实都不太严格，服务器会判断啊什么。
其实，html版本与网页设计有着千丝万缕的联系。
接下来我们就讨论一下版本的区别。
~嘛~其实根本就不用那么严肃的讲~
读者童鞋可能也看到上面版本介绍后面有些括号标注着一些东西~
首先看html4.01T版（以下简称401t）[mw_shl_code=html,true]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
*本站禁止HTML标签噢*
*本站禁止HTML标签噢*
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
*本站禁止HTML标签噢* 无标题文档</title>
</head>
*本站禁止HTML标签噢*
*本站禁止HTML标签噢* Hello World!</p>
*本站禁止HTML标签噢*
*本站禁止HTML标签噢* Hello World!</p>
*本站禁止HTML标签噢*
</body>
</html>[/mw_shl_code]大家把代码复制到记事本存成html后缀就可以看到网页效果了
首先doctype标签说明了html版本是401t的，说明这是个宽松的html文档，对各种标签都没有那么严格
需要注意的是401版本中标签不区分大小写，属性可以不写值，有一些可以不写闭合标签，都能接受
由于过于宽松，于是就被各种淘汰了，所以401t版和401s版都不常用了~
下面看看代码，形如：
[mw_shl_code=applescript,true]<P align="center" CLASS=xxx>Hello World!</p>  <!--居然可以使用-->
*本站禁止HTML标签噢*      <!--这样的换行，其实是不符合标准的，但是401t照样收-->[/mw_shl_code]按照xhtml的标准，上面的代码就完全不符合了，所以应该是这样
[mw_shl_code=applescript,true]<p align="center" class="xxx">Hello World!</p>  <!--标签名全部小写，属性值要使用引号-->
<br \>     <!--单标签要空格后自闭合，使用小写标签-->[/mw_shl_code]这才是xhtml的标准，所以大家在写静态的时候是否有注意这些问题呢？
下面介绍一下严格版本与宽松版本，还有笔者超看不顺眼的框架版本
HTML
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
HTML Strict DTD
如果您需要干净的标记，免于表现层的混乱，请使用此类型。请与层叠样式表（CSS）配合使用：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "
http://www.w3.org/TR/html4/strict.dtd">
HTML Transitional DTD
Transitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表（CSS）的浏览器以至于您不得不使用 HTML 的呈现特性时，请使用此类型：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
Frameset DTD
Frameset DTD 应当被用于带有框架的文档。除 frameset 元素取代了 body 元素之外，Frameset DTD 等同于 Transitional DTD：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "
http://www.w3.org/TR/html4/frameset.dtd">
这是w3school给出的版本解释= =有些晦涩不过还是挺清楚的，笔者就不再做累赘的解释，xhtml基本也是这样理解
附：HTML 元素与合法的 Doctype（更好的说明在哪个版本里哪个标签不能使用）
说到这里，相信读者对html/xhtml版本都已经有个初步的了解了吧。接下来说说html5。
照样摘百度百科~
HTML5是用于取代1999年所制定的 HTML 4.01 和 XHTML 1.0 标准的 HTML 标准版本，现在仍处于发展阶段，但大部分浏览器已经支持某些 HTML5 技术。HTML 5有两大特点：首先，强化了 Web 网页的表现性能。其次，追加了本地数据库等 Web 应用的功能。广义论及HTML5时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。它希望能够减少浏览器对于需要插件的丰富性网络应用服务（plug-in-based rich internet application，RIA)，如Adobe Flash、Microsoft Silverlight，与Oracle JavaFX的需求，并且提供更多能有效增强网络应用的标准集。
= =果然好学术好晦涩，好吧，前端的福音来了~html5的融合程度与美观性易用性，
较之旧版改善巨大，甚至去除了所谓的t版什么的区别，功能改善也是非常的大，虽说处于发展阶段，但是笔者对html5还是非常的看好的。
附：度娘口中的html5（本文档将html5解释的挺详细，大家可以参照着看）
于是乎讲讲html5的注意事项吧~
嘛~照样标签全部小写！！！
属性名要小写！！！
每个属性以一个空格分开！！
属性值带引号！！！
单标签要闭合（这个似乎不严格~）！！！
就这些东西要注意，其次是，有些前版本标签在5中不好使！！！！
记得这些，基本上能够符合标准。。。
再接下来：讲讲标签使用[mw_shl_code=applescript,true]<p align="center" id="title" class="cent left b">Hello World!</p> <!--这个很正常的说~-->
<div style="font-size:22px;"><span style="color:green;"> *本站禁止HTML标签噢* Hello World!</p></div></span> <!--居然可以使用是吧？？太神奇了div在span还没闭合前就闭合了，真是神文档树阿！！虽然可以使用= =但是代码长了你确定你看得懂？-->[/mw_shl_code]噗~这是个什么写法？？？？嘛~入门的人不注意就会写成这样
尤其是代码长了，你想改个层级，估计自己都找不到问题= =元芳？你怎么看？
所以笔者建议，标签层级很重要噢~尤其是使用css的时候哟~
最后！！！说说什么是W3C。。。。
额，说白了就是个国际组织——万维网联盟
此组织致力于web标准化= =
也就是说，html和各种web应用的规范和标准，其实就是联盟制定的【部落呢？
想知道你自己写的网页是否符合W3C标准？
请戳这里（有中文版的哟~）
嘛~好了！大家下课= =
我差不多也要去上课了= =
敬请关注下节课——CSS简介及基础
另：请问上传文档怎么上传？我这儿有各版本参考手册
免得大家再找= =要是实在不行我就用服务器我次奥~
http://115.com/file/dwixuz1k
这个是CSS2+CSS3+HTML5+W3SCHOOL的chm文件合集

由于开学期间学校放假喜怒无常，我的这篇更新就在这时开始写了~#14x
（一）（目录部分及安装和hello world）：https://www.gn00.com/t-410081-1-1.html
本期容量还是比较小。。会解释前面的那个hello world并介绍一些小特性。
（关于NPM的安装我是想放到下一期）
前面的那个hello world估计会有点小迷茫，那么我就来解释下下~
先把代码贴出来：
[mw_shl_code=javascript,true]var http = require('http');
server = http.createServer(function (req, res) {
res.writeHeader(200, {"Content-Type": "text/plain"});
res.end("Hello Takk...\n");
})
server.listen(8000);
console.log("httpd start @8000");
[/mw_shl_code]
这串代码我们先来解剖一下，抛开http.createServer后面括号的那个匿名函数，我们剩下的这串代码其实就是一个创建服务器的完整的过程，是这样的：
[mw_shl_code=javascript,true]var http = require('http');
server = http.createServer( )；
server.listen(8000);
console.log("httpd start @8000");[/mw_shl_code]
专业解释：
第一行： 是请求（require)node.js自带的node.js模块，并赋值给变量http。
第二行：然后我们调用了http模块提供的函数creatServer这个函数会返回一个对象，把这个对象赋给了server
第三行：我们用了这个对象的一个方法（listen），这个方法有一个参数，指定监听哪个端口；
第四行：用console.log向控制台输出了一句话httpd start @8000；
/-------------------------
童话解释：
这么一连串的到底是一个什么工作呢？打个比方吧。
Node.js有一个魔法图书馆，我们去找到（require）了'http'这本法术书，然后我们把这门书的内容抄到（=）了一本我们自己的法术书书上，并把这本书的名字也叫做http（第一行）
然后呢，然后呢我们派我们的一个小朋友server去学了http这本书里面的createServer这个魔法
也就是说，现在server这个小朋友会了http这本书中createServer里面的魔法。（第二行）
而这个魔法中有一个本领是监听，我们让这个server小朋友施展了下监听的魔咒listen（这个魔咒可以监听一个端口）
并且把这个魔咒指定了去监听(8000)这个端口（什么是端口？大概就像是一扇门吧，也就是说让server去看住了8000这扇门。）;（第三行）
最后一行是电脑告诉你，我们已成功看住了了8000这个端口~
通过这么几行代码，会启动一个侦听8888端口的服务器，它不做任何别的事情，甚至连请求都不会应答。只会看着这个端口。
/------------------------
然后我们来看看那个匿名函数吧。
这个函数是作为creatServer方法的第一个也是唯一一个参数存在
也就是说在node.js里面可以使用一个函数作为另一个函数的参数！
函数和其他变量一样可以传递
/--------------------------------
比如下面这个例子：
[mw_shl_code=javascript,true]
function say(word) {
console.log(word);
}//定义一个函数say，有一个叫做word的参数，这个函数的作用是把word输出
function dofunc(someFunction, value) {
someFunction(value);
}
/* 这里也定义了一个函数
我们发现这个函数的第一个参数其实是一个函数（通过后面的内容可以看出）
然后我们可以发现，这个函数的作用是将第二个参数作为第一个参数的参数来运行一次
*/
dofunc(say, "Hello");
/*
最后这句话是用了dofunc函数
这个函数的第一个参数为say函数，第二个参数为一个字符串'Hello'；
你可以想得到，这个等价于say('Hello')
*/
[/mw_shl_code]
/--------------------------------------
那个匿名函数的内容是：
[mw_shl_code=javascript,true]
function (req, res) {
res.writeHeader(200, {"Content-Type": "text/plain"});
res.end("Hello Takk...\n");
[/mw_shl_code]
我们可以发现，当这个函数被触发时传入了有两个参数
第一个这里取名叫做req，第二个在这里取名字叫做res
这两个都是对象，我这样取名其实是两个英文的缩写（request 和 response ）
也就是说一个是请求的处理，和响应的处理（由于hello world中我只用输出内容所以没用到req）
我们用这个匿名函数干了什么呢？
[mw_shl_code=javascript,true]server = http.createServer(function (req, res) {
res.writeHeader(200, {"Content-Type": "text/plain"});
res.end("Hello Takk...\n");
})[/mw_shl_code]
这句话我来翻译下，用http的createServer方法给创建了一个服务器
这个服务器被请求时会响应
响应方法是
[mw_shl_code=javascript,true]
res.writeHeader(200, {"Content-Type": "text/plain"});
res.end("Hello Takk...\n");
[/mw_shl_code]
代表的意思是，给浏览器一个200的头文件
然后结束时给浏览器响应一句话，"Hello Takk...\n"
所以所以我们请求这个服务器时他们给我们回了这句话。。
本期的教程也许有点枯燥
不过我们解释了helloworld这个例子的源码，并且了解了下函数作为参数来传递
如果看着很迷糊呢不要紧~可以在帖子后面问，我会给大家详细解答~
我的qq是：945959236，大家可以一起学习·~
而且这些后面慢慢就懂了，现在迷糊点不是有很大的问题~
下一期我会手把手教大家建立一个网站~会让你很哟成就感，而且，相信我，你会有乐趣的。
在实践中知识就慢慢懂了~
那么这期就这样~~~66!

本帖最后由 鸦忧忧 于 2012-10-16 11:47 编辑
doraemon.css
[mw_shl_code=css,true]body{
background:#fff;
}
#doraemon{
position:relative;
margin:50px;
}
#head_light{
width:50px;
height:50px;
transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
box-shadow:80px 20px 50px #fff;
-webkit-box-shadow:80px 20px 55px #fff;
-moz-box-shadow:80px 20px 50px #fff;
border-radius:45px;
-webkit-border-radius:45px;
-moz-border-radius:60px;
position:absolute;
top:-20px;
left:170px;
opacity:0.5
}
#face{
position:relative;
width:310px;
height:300px;
border-radius:146px;
-webkit-border-radius:146px;
-moz-border-radius:146px;
background:#07beea;
background: -webkit-gradient(linear, right top, left bottom, from(#fff) ,color-stop(0.20, #07beea), color-stop(0.73, #10a6ce),color-stop(0.95, #000), to(#444));
background: -moz-linear-gradient(right top, #fff,#07beea 20%, #10a6ce 73% ,#000 95% ,#000 155%);
border:#333 2px solid;
top:-15px;
box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
-webkit-box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
-moz-box-shadow:-5px 10px 15px rgba(0,0,0,0.45);
}
#base{
position:relative;
top:-5px;
}
#base_white{
position:absolute;
border:#000 2px solid;
width:264px;
height:196px;
border-radius: 150px 150px;
-webkit-border-radius: 150px 150px;
-moz-border-radius: 150px 150px;
background:#FFF;
background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000));
background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 83%,#999 90%,#444 95%, #000);
z-index:1;
top:85px;
left:22px;
}
#eyes{
position:relative;
top:-5px;
}
div.eye{
position:absolute;
border-radius: 35px 35px;
-webkit-border-radius: 35px 35px;
-moz-border-radius: 35px 35px;
border:2px solid #000;
width:72px;
height:83px;
z-index:20;
background:#fff;
}
div.black_eye{
position:absolute;
width:15px;
height:15px;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
background:#333;
z-index:21;
-webkit-animation-name: cate;
-webkit-animation-duration: 10s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 200;
}
@-webkit-keyframes cate{
0%{
margin:0 0 0 0;
}
80%        {
margin:0px 0 0 0;
}
85%        {
margin:-20px 0 0 0;
}
90%{
margin:0 0 0 0;
}
93%{
margin:0 0 0 7px;
}
96%{
margin:0 0 0 0;
}
100%{
margin:0 0 0 0;
}
}
div.black_left{
top:100px;
left:130px;
}
div.black_right{
top:100px;
left:170px;
}
div.eye_left{
top:45px;
left:82px;
}
div.eye_right{
top:45px;
left:156px;
}
#nose{
width:32px;
height:32px;
border:2px solid #000;
border-radius:50px;
-webkit-border-radius:50px;
-moz-border-radius:50px;
background:#c93e00;
position:absolute;
top:117px;
left:139px;
z-index:30;
}
#nose_light{
width:10px;
height:10px;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
box-shadow:19px 8px 5px #fff;
-webkit-box-shadow:19px 8px 5px #fff;
-moz-box-shadow:19px 8px 5px #fff;
position:relative;
top:0px;
left:0px;
}
#nose_line{
background:#000;
width:4px;
height:100px;
top:125px;
left:156px;
position:absolute;
}
#nose_line{
background:#333;
width:3px;
height:100px;
top:140px;
left:155px;
position:absolute;
z-index:20;
}
#mouth{
width:240px;
height:500px;
border-bottom:3px solid #333;
border-radius:120px;
-webkit-border-radius:120px;
-moz-border-radius:120px;
position:absolute;
top:-263px;
left:36px;
z-index:10;
}
#mouth_rewrite{
background:#fff;
width:240px;
height:90px;
position:relative;
top:115px;
left:35px;
z-index:12;
border-radius:45px;
-webkit-border-radius:45px;
-moz-border-radius:60px;
}
#firefox_mouth, x:-moz-broken, x:last-of-type, x:indeterminate {
position:relative;
width:170px;
height:150px;
-moz-border-radius:85px;
border:3px solid #000;
background:#FFF;
z-index:11;
top:-3px;
left:70px;
}
.whiskers{
background:#333;
height:2px;
width:60px;
position:absolute;
z-index:20;
}
.whi_right{
top:165px;
left:210px;
}
.whi_right_top{
top:145px;
left:210px;
}
.whi_right_bottom{
top:185px;
left:210px;
}
.whi_left{
top:165px;
left:50px;
}
.whi_left_top{
top:145px;
left:50px;
}
.whi_left_bottom{
top:185px;
left:50px;
}
.rotate20{
transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
}
.rotate160{
transform: rotate(160deg);
-webkit-transform: rotate(160deg);
-moz-transform: rotate(160deg);
-o-transform: rotate(160deg);
}
#choker{
position:relative;
top:-55px;
left:35px;
z-index:100;
}
#belt{
width:230px;
height:20px;
border:#000 solid 2px;
background:#ca4100;
background: -webkit-gradient(linear, left top, left bottom, from(#ca4100), to(#800400));
background: -moz-linear-gradient(top, #ca4100, #800400);
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
position:relative;
left:5px;
}
#bell{
width:40px;
height:40px;
border-radius:50px;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border:2px solid #000;
background:#f9f12a;
background: -webkit-gradient(linear, left top, left bottom, from(#f9f12a),color-stop(0.5, #e9e11a), to(#a9a100));
background: -moz-linear-gradient(top, #f9f12a, #e9e11a 75%,#a9a100);
box-shadow:-5px 5px 10px rgba(0,0,0,0.25);
-webkit-box-shadow:-5px 3px 5px rgba(0,0,0,0.25);
-moz-box-shadow:-5px 5px 10px rgba(0,0,0,0.25);
position:relative;
top:-15px;
left:100px;
}
#bell_line{
width:36px;
height:2px;
background:#f9f12a;
border:#333 solid 2px;
position:relative;
top:10px;
}
#bell_circle{
width:12px;
height:10px;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background:#000;
position:relative;
top:14px;
left:14px;
}
#bell_under{
width:3px;
height:15px;
background:#000;
position:relative;
top:10px;
left:18px;
}
#bell_light{
width:10px;
height:10px;
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
box-shadow:19px 8px 5px #fff;
-webkit-box-shadow:19px 8px 5px #fff;
-moz-box-shadow:19px 8px 5px #fff;
position:relative;
opacity:0.7;
top:-35px;
left:5px;
}
#doutai{
position:absolute;
width:220px;
height:165px;
background:#07beea;
background: -webkit-gradient(linear, right top, left top, from(#07beea),color-stop(0.5, #0073b3),color-stop(0.75,#00b0e0), to(#0096be));
background: -moz-linear-gradient(right, #07beea, #0073b3 50%,#0096be 75%,#00b0e0 ,#0096be 100% ,#333 114%);
border:#333 2px solid;
top:262px;
left:46px;
}
div.base_white2{
position:absolute;
width:170px;
height:170px;
border-radius:85px;
-webkit-border-radius:85px;
-moz-border-radius:85px;
border:2px solid #000;
background:#FFF;
background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444), to(#000));
background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 83%,#999 90%,#444 95%, #000);
}
.doutai_center{
top:230px;
left:72px;
}
#circle{
position:relative;
width:130px;
height:130px;
border-radius:65px;
-webkit-border-radius:65px;
-moz-border-radius:65px;
background:#fff;
background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd), to(#fff));
background: -moz-linear-gradient(right top, #fff, #fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88% , #fff);
border:2px solid #000;
top:-120px;
left:92px;
}
#circle_rewrite{
position:relative;
width:134px;
height:60px;
background:#fff;
border-bottom:2px solid #000;
top:-250px;
left:92px;
}
#hand_right{
position:absolute;
top:272px;
left:248px;
width:100px;
height:100px;
}
#arm_right{
position:relative;
width:80px;
height:50px;
background:#07beea;
background: -webkit-gradient(linear, left top, left bottom, from(#07beea),color-stop(0.85,#07beea), to(#555));
background: -moz-linear-gradient(top, #07beea, #07beea 85%, #555);
border:solid 1px #000;
z-index:-1;
top:17px;
transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-moz-transform: rotate(35deg);
-o-transform: rotate(35deg);
box-shadow:-10px 7px 10px rgba(0,0,0,0.35);
-webkit-box-shadow:-10px 7px 10px rgba(0,0,0,0.35);
-moz-box-shadow:-10px 7px 10px rgba(0,0,0,0.35);
}
#hand_left{
position:absolute;
top:272px;
left:-46px;
width:100px;
height:100px;
}
#arm_left{
position:relative;
width:80px;
height:50px;
background:#0096be;
border:solid 1px #000;
z-index:-1;
top:17px;
left:36px;
transform: rotate(145deg);
-webkit-transform: rotate(145deg);
-moz-transform: rotate(145deg);
-o-transform: rotate(145deg);
box-shadow:5px -7px 10px rgba(0,0,0,0.25);
-webkit-box-shadow:5px -7px 10px rgba(0,0,0,0.25);
-moz-box-shadow:5px -7px 10px rgba(0,0,0,0.25);
}
div.hand_circle{
position:absolute;
width:60px;
height:60px;
border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius:30px;
border:2px solid #000;
background:#fff;
background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.5,#fff),color-stop(0.70,#eee),color-stop(0.8,#ddd), to(#999));
background: -moz-linear-gradient(right top, #fff, #fff 50%, #eee 70%, #ddd 80%,#999);
}
.hand_right{
top:32px;
left:40px;
}
.arm_rewrite_right{
position:relative;
width:4px;
height:45px;
background:#07beea;
top:-51px;
left:18px;
}
.hand_left{
top:34px;
left:10px;
}
.arm_rewrite_left{
position:relative;
width:4px;
height:50px;
background:#0096be;
top:-52px;
left:92px;
}
#foot{
position:relative;
width:280px;
height:40px;
top:-141px;
left:20px;
}
#foot_left{
width:125px;
height:30px;
background:#fff;
background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));
background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 85%, #999);
border:solid 2px #333;
border-top-left-radius:80px;
border-bottom-left-radius:40px;
border-top-right-radius:60px;
border-bottom-right-radius:60px;
-webkit-border-top-left-radius:80px;
-webkit-border-bottom-left-radius:40px;
-webkit-border-top-right-radius:60px;
-webkit-border-bottom-right-radius:60px;
-moz-border-radius-topleft:80px;
-moz-border-radius-bottomleft:40px;
-moz-border-radius-topright:60px;
-moz-border-radius-bottomright:60px;
position:relative;
left:8px;
top:2px;
box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
-webkit-box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
-moz-box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
z-index:-1;
}
#foot_right{
position:relative;
width:125px;
height:30px;
background:#fff;
background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));
background: -moz-linear-gradient(right top, #fff,#fff 75%, #eee 85%, #999);
border:solid 2px #333;
border-top-left-radius:60px;
border-bottom-left-radius:60px;
border-top-right-radius:80px;
border-bottom-right-radius:40px;
-webkit-border-top-left-radius:60px;
-webkit-border-bottom-left-radius:60px;
-webkit-border-top-right-radius:80px;
-webkit-border-bottom-right-radius:40px;
-moz-border-radius-topleft:60px;
-moz-border-radius-bottomleft:60px;
-moz-border-radius-topright:80px;
-moz-border-radius-bottomright:40px;
top:-32px;
left:141px;
box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
-webkit-box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
-moz-box-shadow:-6px 0px 10px rgba(0,0,0,0.35);
z-index:-1;
}
#foot_rewrite{
position:relative;
width:20px;
height:10px;
background:#fff;
background: -webkit-gradient(linear, right top, left bottom, from(#666),color-stop(0.83,#fff), to(#fff));
background: -moz-linear-gradient(right top, #666, #fff 83%, #fff);
top:-76px;
left:127px;
border-top:2px solid #000;
border-right:2px solid #000;
border-left:2px solid #000;
border-top-right-radius:40px;
border-top-left-radius:40px;
-webkit-border-top-right-radius:40px;
-webkit-border-top-left-radius:40px;
-moz-border-radius-topleft:40px;
-moz-border-radius-topright:40px;
}
#shadow_doutai_left{
width:30px;
height:200px;
box-shadow:-10px 10px 15px rgba(0,0,0,0.45);
-webkit-box-shadow:-10px 10px 15px rgba(0,0,0,0.45);
-moz-box-shadow:-10px 10px 15px rgba(0,0,0,0.45);
position:absolute;
top:250px;
left:46px;
z-index:-10;
}
#shadow_doutai_right{
width:30px;
height:200px;
box-shadow:10px 10px 15px rgba(0,0,0,0.35);
-webkit-box-shadow:10px 10px 25px rgba(0,0,0,0.35);
-moz-box-shadow:10px 10px 15px rgba(0,0,0,0.35);
position:absolute;
top:240px;
left:230px;
z-index:-10;
}
#shadow_doutai_arm{
width:85px;
height:165px;
box-shadow:-100px 10px 15px rgba(0,0,0,0.0);
-webkit-box-shadow:-100px 10px 15px rgba(0,0,0,0.25);
-moz-box-shadow:-100px 10px 15px rgba(0,0,0,0.25);
position:absolute;
top:230px;
left:113px;
z-index:10;
opacity:0.5;
transform: rotate(-20deg);
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
border-bottom-left-radius:40px;
-webkit-border-bottom-left-radius:40px;
-moz-border-radius-bottomleft:40px;
border-top-left-radius:20px;
-webkit-border-top-left-radius:20px;
-moz-border-radius-topleft:20px;
}
#shadow_belt{
width:40px;
height:30px;
box-shadow:-100px 10px 15px rgba(0,0,0,0);
-webkit-box-shadow:-100px 10px 15px rgba(0,0,0,0.25);
-moz-box-shadow:-100px 10px 15px rgba(0,0,0,0.25);
position:absolute;
top:240px;
left:130px;
z-index:10;
border-bottom-left-radius:40px;
-webkit-border-bottom-left-radius:40px;
-moz-border-radius-bottomleft:40px;
z-index:300;
}
#arm_left:not(\*|*), .arm_rewrite_left:not(\*|*){
background:#07beea;
}
#arm_left, .arm_rewrite_left{
background:#07beea\9;
*background:#07beea;
_background:#07beea;
}
#kiji{
position:relative;
top:-150px;
}[/mw_shl_code]

本帖最后由 轻舟过 于 2012-10-3 13:43 编辑
第一次发自己做的东西
转载一篇包含许多图片的文章到技术宅是一件很麻烦的事，因为许多网站有防盗链机制，直接复制粘贴的结果是所转载的内容中的图片全挂掉了。所以我需要把文章中所包含的图片都传到点点或者其他图床上去，然后再将文章的图片链接一张张替换成新的链接，感觉这样太麻烦了，于是花了点时间写了点代码，让“传图片到图床->替换图片链接”的操作自动化。
ps：使用的是imgur的服务，由于是国外的，速度上虽然比不上点点，不过个人觉得还是可以接受的。
工具采用的是小书签的形式，如果不知道什么是小书签，可以看一下之前的一篇文章
自己测试了下chrome、firefox都可以正常使用，其他浏览器不知道行不行，征人测试下。
安装方法：新建一个书签，在网址一栏中填入以下代码，名称可以随自己喜好随便取只要自己认得就好。
[mw_shl_code=text,false]javascript:(function(){   _my_script=editdoc.createElement('SCRIPT');   _my_script.type='text/javascript';   _my_script.src='http://jsbin.com/welcome/29583.js?x'+(Math.random());   editdoc.getElementsByTagName('head')[0].appendChild(_my_script);})();[/mw_shl_code]
使用方法：在发表帖子的页面上（高级模式）点一下刚刚保存的小书签，就会将编辑框中的图片都上传到imgur，然后替换掉图片链接，完成之后会弹出一个提示"done!"。
注意事项：
1. 由于imgur的接口限制，一个小时内只能处理50张图片，一般人应该够用了吧～～
2. 这个工具目前只能用于本论坛
3. 由于自己的javascript学得很渣，另外急于写出一个大致能用的程序，没有写错误处理的代码，应该会有许多bug，如果发现了就告诉我吧。
代码说明：安装方法部分的代码实际上是在html文档中插入一个script节点，然后调用所包含的js文件 http://jsbin.com/welcome/29583.js
29583.js中的代码也很简单，只有二十多行，也就是调用了一下imgur的上传图片的api，上传完成之后从应答json中取得新的图片链接替换掉原始的链接
[mw_shl_code=javascript,true]function process(idx, xhr, isLast) {
return function(){
if (xhr.readyState==4 && xhr.status==200)
{
document.images[ idx ].src = JSON.parse(xhr.responseText).upload.links.original;
if(isLast)
alert("done!");
}
};
}
for(var i = 0; i < document.images.length; ++i) {
src = document.images[ i ].src;
var fd = new FormData();
fd.append("image", src); // Append the file
fd.append("type", "url");
fd.append("key", "77c69b52f7992b9996a2cf963eee4651");
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=process(i, xhr, i == document.images.length - 1);
xhr.open("POST", "http://api.imgur.com/2/upload.json", true);
xhr.send(fd);
}[/mw_shl_code]