Discuz！文理人站长第五课：HTML基础
前几节课都主要讲了Discuz！后台的一些相关操作但是后台体系庞大，不是几个演示几个实例就可以解决的
所以需要大家在以后的实际操作中自己摸索
尤其是学会遇到问题自己寻求解决问题的方法的能力
好了，本节课我们学习第五课：HTML基础
一、关于HTML
1.什么是HTML？
HTML（HyperText Mark-up Language）即超文本标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。
----我们可以简单的理解为：HTML是实现代码与网页表现衔接的语言
2.Discuz！中的HTML
我们在第一节课已经讲过，Discuz！的核心技术是PHP。但是不可否认的是：所有的网页都是离不开HTML的。Discuz！中包含HTML最多的文件在单页或者模板文件中（一般后缀名为.html或者.htm）。Discuz！是以PHP为核心技术但是基于HTML，是以HTML与PHP混编实现的网站程序。所以，我们需要对HTML有一定的了解。。。
二、常见的HTML（标签）
这里，给大家列出几个常见的HTML标签，当然也是最基本的：
注意：HTML永远都是成对出现的！HTML不区分大小写！
1.html标签：出现一对HTML标签的文档，变可以认为是一个网页文
<html>这里是所包含的内容</html>
2.title标签：网页文档标题，浏览时会显示在浏览器标题栏处
<title>我是标题</title>
3.head标签：头部，里面嵌入标题标签、关键字标签、javascript代码等
<head>头部信息</head>
4.body标签：页面主体，网页的主要内容
<body>网页内容主体</body>
例：一个网页文件的大致结构：
<html>
<head>
<title>我是标题</title>
</head>
<body>我是内容我是内容我是内容我是内容我是内容</body>
</html>复制以上代码，新建一个txt文件，将代码存入；修改文件后缀名为.htm或者.html（文件图标变成浏览器样子）;双击打开，便可以看见该网页浏览的效果！
继续一些常用标签：
<p></p>;文字换行
<br/>;文字换行，可不加"/"，可不成对
<font></font>;字体
。。。。。具体其他可以自行网络查找
三、实例分析
现在我们以百度首页来列举一个实例：
1.打开百度首页
2.查看源文件（现在的浏览器应该都有这功能的吧，没有的话右键试试）
3.获得的代码如下：
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<title>百度一下，你就知道 </title>
<style>
body{font:12px arial;text-align:center;background:#fff}
body,p,form,ul{margin:0;padding:0}body,form,#fm,#lg img{position:relative}
td{text-align:left}
img{border:0}
a{color:#00c}
a:active{color:#f60}
#u{padding:7px 10px 3px 0;text-align:right}
#m{width:650px;margin:0 auto}
#nv{font-size:16px;margin:0 0 4px -51px}
#nv a,#nv b,#su,#lk{font-size:14px}
#lg{margin:-17px 0 9px}
#fm{padding-left:100px;text-align:left}
#kw{width:391px;padding:3px 1px;margin:0 6px 0 0;font:16px/16px arial}
#su{width:78px;height:28px;line-height:24px}#kw,#su{vertical-align:middle}
#lk{margin:33px 0}
#lk span{font:14px "宋体"}
#lm{height:60px}
#lh{margin:16px 0 5px;font:12px "宋体"}
#lh a{font:12px arial}
#mCon{position:absolute;right:7px;*top:9px;top:5px;cursor:pointer;padding:0 18px 0 0;background:url(http://www.baidu.com/img/arr.gif) no-repeat right center}
#mCon span{color:#00c;cursor:default;display:block;padding-top:3px}
#mCon .hw{text-decoration:underline;cursor:pointer}
#mMenu{width:56px;border:1px solid #9a99ff;list-tyle:none;position:absolute;right:7px;top:28px;display:none;background:#fff}
#mMenu a{width:100%;height:100%;display:block;line-height:22px;text-indent:6px;text-decoration:none}#mMenu a:hover{background:#d9e1f6}#mMenu .ln{height:1px;background:#ccf;overflow:hidden;margin:2px;font-size:1px;line-height:1px}#cp,#cp a{color:#77c}
</style>
</head>
<body>
<p id="u"><a href="http://passport.baidu.com" target="_blank"><b>蛇蛇到此一游</b></a> | <a href="http://hi.baidu.com/sys/checkuser/蛇蛇到此一游/3" target="_blank">我的空间</a> | <a href="/gaoji/preferences.html">搜索设置</a> | <a href="http://passport.baidu.com/?logout&tpl=mn&bdstoken=0de749f209c7905e38411959721fe498">退出</a></p>
<div id="m"><p id="lg"><img src="http://www.baidu.com/img/baidu_logo.gif" width="270" height="129" usemap="#mp"></p><p id="nv"><a href="http://news.baidu.com">新 闻</a> <b>网 页</b> <a href="http://tieba.baidu.com">贴 吧</a> <a href="http://zhidao.baidu.com">知 道</a> <a href="http://mp3.baidu.com">MP3</a> <a href="http://image.baidu.com">图 片</a> <a href="http://video.baidu.com">视 频</a> <a href="http://map.baidu.com">地 图</a></p><div id="fm"><form name="f" action="s"><input type="text" name="wd" id="kw" maxlength="100"><input type="submit" value="百度一下" id="su"></form><div id="mCon"><span>输入法</span></div><ul id="mMenu"><li><a href="#" name="ime_hw">手写</a></li><li><a href="#" name="ime_py">拼音</a></li><li class="ln"></li><li><a href="#" name="ime_cl">关闭</a></li></ul></div>
<p id="lk"><a href="http://hi.baidu.com">空间</a> <a href="http://baike.baidu.com">百科</a> <a href="http://www.hao123.com">hao123</a><span> | <a href="/more/">更多>></a></span></p><p id="lm"></p>
<p><a id="st" onClick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.baidu.com')" href="http://utility.baidu.com/traf/click.php?id=215&url=http://www.baidu.com">把百度设为主页</a></p>
<p id="lh"><a href="http://e.baidu.com/?refer=888">加入百度推广</a> | <a href="http://top.baidu.com">搜索风云榜</a> | <a href="http://home.baidu.com">关于百度</a> | <a href="http://ir.baidu.com">About Baidu</a></p>
<p id="cp">©2010 Baidu <a href="/duty/">使用百度前必读</a> <a href="http://www.miibeian.gov.cn" target="_blank">京ICP证030173号</a> <img src="http://gimg.baidu.com/img/gs.gif"></p></div>
<map name="mp"><area shape="rect" coords="43,22,227,91" href="http://hi.baidu.com/baidu/" target="_blank" title="点此进入 百度的空间"></map>
</body>
<script>var w=window,d=document,n=navigator,k=d.f.wd,a=d.getElementById("nv").getElementsByTagName("a"),isIE=n.userAgent.indexOf("MSIE")!=-1;if(!isIE||window.opera){d.getElementById("st").style.display="none"}for(var i=0;i<a.length;i++){a.onclick=function(){if(k.value.length>0){var C=this,A=C.href,B=encodeURIComponent(k.value);if(A.indexOf("q=")!=-1){C.href=A.replace(/q=[^&$]*/,"q="+B)}else{this.href+="?q="+B}}}}(function(){if(/q=([^&]+)/.test(location.search)){k.value=decodeURIComponent(RegExp.$1)}})();if(n.cookieEnabled&&!/sug?=0/.test(d.cookie)){d.write('<script src=http://www.baidu.com/js/bdsug.js?v=1.0.3.0><\/script>')}function addEV(C,B,A){if(w.attachEvent){C.attachEvent("on"+B,A)}else{if(w.addEventListener){C.addEventListener(B,A,false)}}}function G(A){return d.getElementById(A)}var bdimeHW={};var imeTar="kw";var ime_t1=(new Date()).getTime();(function(){var O=G("mCon"),A=G("mMenu");var B=["输入法","手写","拼音"],Q=["cl","hw","py"],D=["","http://www.baidu.com/hw/hwInput_1.1.js","http://www.baidu.com/olime/bdime.js"],P=;var N=n.cookieEnabled;if(N&&/\bbdime=(\d)/.test(d.cookie)){H(Q,false)}var M=A.getElementsByTagName("a");for(var I=0;I<M.length;I++){M.onclick=F}if(isIE){var E=[];var R=O.getElementsByTagName("*");for(var I=0;I<R.length;I++){E.push(R)}E.push(O);var R=A.getElementsByTagName("*");for(var I=0;I<R.length;I++){E.push(R)}E.push(A);for(var I=0;I<E.length;I++){E.setAttribute("unselectable","on")}}else{try{var L=k.value.length;k.selectionStart=L;k.selectionEnd=L;bdimeHW.hasF=1}catch(K){}}function F(){ime_t1=(new Date()).getTime();var S=this.name.split("_");if(w.bdime){bdime.control.closeIme()}H(S,true);return false}function H(W,S){var V=0;if(W==Q){V=1;O.innerHTML='<span id="imeS" class="hw">'+B+"</span>";if(isIE){G("imeS").setAttribute("unselectable","on")}function U(){if(!P){if(d.selection&&d.activeElement.id&&d.activeElement.id=="kw"){bdimeHW.hasF=1}bdimeHW.input=imeTar;bdimeHW.submit="su";J(D);setTimeout(function(){if(bdsug){bdsug.sug.initial()}},1000);P=1}else{bdimeHW.reload(S)}}if(S){U()}else{addEV(G("imeS"),"click",U)}}else{if(W==Q){V=2;O.innerHTML="<span>"+B+"</span>";if(!P){J(D);P=1}else{if(w.bdime){bdime.control.openIme()}}}else{O.innerHTML="<span>"+B+"</span>"}}if(S&&N){var T=new Date();T.setTime(T.getTime()+365*24*3600*1000);d.cookie="bdime="+V+";domain=baidu.com;path=/;expires="+T.toGMTString()}}function J(S){if(S){var T=d.createElement("script");T.src=S;d.getElementsByTagName("head").appendChild(T)}}function C(T){var T=T||window.event;var S=T.target||T.srcElement;A.style.display=S.id=="mCon"&&A.style.display!="block"?"block":"none"}addEV(d,"click",C)})();addEV(w,"load",function(){k.focus()});w.onunload=function(){};
</script>
</html>
<!--d8c80d0a72c1041b-->
4.网页截图如下，对比可分析：
跟C语言一样~~ 梦醒々人凄 发表于 2010-12-23 10:31 static/image/common/back.gif
跟C语言一样~~
PHP跟C语言有很多相似的
但是HTML差别就会比较大了
至少C没有HTML这样成对出现的标签···· 对了
Discuz！拥有自己的代码----“Discuz！代码”
它也是成对出现的
这里也简单的跟大家说一说
（设置论坛个人签名的会用到 大家也可以试一试）
我感觉HTML比C简单些 本帖最后由 糖. 于 2010-12-23 11:47 编辑
这个和C差很多 这儿要简单的多 很多代码直接拿别人的用 前些日子我做网页的时候摸索到了一点点 呵呵
哪天分享个插件过来 我最喜欢的翻书效果 嘎嘎
</SCRIPT>
<META content="MSHTML 6.00.6000.16809" name=GENERATOR></HEAD>
<BODY>
<DIV id=center>
<DIV id=DHTMLBOOK><SPAN class=page onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img></SPAN>
<SPAN class="page right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><IMG class=img style="LEFT: -100%"></SPAN>
<SPAN class="page turn" onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><IMG class=img style="FILTER: alpha(); opacity: 1"></SPAN>
<SPAN class="page turn right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><IMG class=img style="FILTER: alpha(); LEFT: -100%; opacity: 1"></SPAN>
<DIV id=TXTBOX></DIV></DIV></DIV>
<DIV id=imgsrc style="VISIBILITY: hidden">
<IMG src="3/布鲁诺.孔蒂.jpg" alt="布鲁诺.孔蒂." width="200" height="150" />
<IMG src="3/法尔考.jpg" alt="法尔考" width="200" height="150" />
<IMG src="3/哈斯勒.jpg" alt="哈斯勒" width="200" height="150" />
<IMG src="3/贾尼尼.jpg" alt="贾尼尼." width="200" height="150" />
<IMG src="3/安切洛蒂.jpg" alt="安切洛蒂" width="200" height="150" />
<IMG src="3/沃勒尔.jpg" alt="沃勒尔" width="200" height="150"" />
<IMG src="3/卡尼吉亚.jpg" alt="卡尼吉亚" width="200" height="150" />
<IMG src="3/帕努奇.jpg" alt="帕努奇" width="200" height="150" />
<img src="3/巴尔博.jpg" alt="巴尔博" width="200" height="150" />
<IMG src="3/巴蒂斯图塔.jpg" alt="巴蒂斯图塔" width="200" height="150" />
<IMG src="3/托蒂.jpg" alt="托蒂" width="200" height="150" />
</DIV>
嗯 把照片和尺寸改了就可以了 话说这个还是我呢个什么大赛的作品中的一部分呢 还有必须动态页面才可以 这么晚才发 抱歉啊 <html>
<head>
<title>我是标题</title>
</head>
<body>我是内容我是内容我是内容我是内容我是内容</body>
</html>
好经典。。。。为什么不改成我是天才
页:
[1]