初学者:XHTML常用标签的基本应用指南
时间:2010-04-07 09:29来源: 作者: 点击:
次
一段时间以来,发现有很多人XHTML都不会用,不光是普通的初学者,有的程序员都不是很清楚该怎么写这个XHTML,我这里呢算是把一些常见的应用问题做一个总结,也算能使得大家能在沟通,合作上能形成默契。 XHTML里有很多的标签,但是经常用到的也就是那么
var _mda_place_id ="58bcc82381892";
一段时间以来,发现有很多人XHTML都不会用,不光是普通的初学者,有的程序员都不是很清楚该怎么写这个XHTML,我这里呢算是把一些常见的应用问题做一个总结,也算能使得大家能在沟通,合作上能形成默契。
XHTML里有很多的标签,但是经常用到的也就是那么几个,也只要掌握这几个也就可以了。下面我们一一列举:div,p,span,ul,li,dl,dt,dd,a,img,h,strong,em
div 在我的脑子里我一直把他想作是一个瓶子或是箱子,我的感觉它挺硬的。这个div没有什么特性的意义,可以使用在很多地方,也就是说他可以装不同的东西。他的正确的写法是必需要有封口。大家都用来做布局之用,也有用来作为存放文章形成段落,实际上,这个做法并不是很好,因为作为文章的分段自然有一个特定的标签来用。那就是下面要讲的标签,不过用DIV来再整体的包住所有的段落。这是非常实用的。
p 这是一个有特定语义的标签,表示段落,是用来区分段落的。在大部分的浏览器中对P基本上都有一个上下的边距。但是没有行首缩进,因为行首缩进只是表示段落的方式但是不是一定或是必需的。所以在用P标签的时候如果需要可以针对P设定一下行首缩进,我是推荐在文章以外的地方不要使用P,因为P是有一定语义的,如果用在别的地方恐不合适。正确的写法是
span 这也是一个非常常用的标签,这个标签可以说与div很像,没有什么特定的意义,只是他是一个级联元素,不是块级元素。我一直把它看作是一个袋子,他不像箱子那样可以有自己的宽高,他的宽高只能随着内容的多少而定,所以很像是袋子。这个标签与div正好互补。
ul,li 这是一个列表,在列表中,除了UL还OL,不过我觉得OL有点像是鸡肋。因为UL通过CSS定义一样可以有OL的数字排序效果。所以一般我不推荐使用OL,有UL就可以了。UL是块级的,他的子级li也是块级标签。正确的写法是 LI标签是被UL标签包裹的,在UL标签里可以有无数个LI标签,LI标签不能独立使用。并且LI标签一定要封口,这不光是美观问题,对于后期的维护也很有好处。很多程序员都不喜欢把这个LI封口。UL列表的用处主要是列举出一维的,同一类型的数据。具体的比如使用在菜单上,文章中列数的一些条例等等。在列表中有一种特别的形式与UL是不一样的。那就是下面的DL
dl,dt,dd 这是一个很特别的三个标签的组合。这里的DT是指标题,DD是指内容。DL是包课他们的容器。正确的写法是- < /dt>
在DL里可以有很多组的DT,DD,当出现很多组的时候尽量是一个DT 配一个DD,如果DD中内容很多,可以在DD里加P标签配合使用。DL列表是一个非常好的列表形式,可以多加利用。
a 这表示链接,是一个特定属性的,也是网页中最为神奇的标签。因为它才让无数的网页都连在了一起。正确的写法是: 其中的href是表示目标地址,TITLE是鼠标悬停提示文字,这是可有可无的。但是有必是利大于无。
img 这是图片标签,也是个特定属性的标签。正常写法是: 这里的src是目标地址, ALT与TITLE是替换文字,ALT是 IE特定的,TITLE是其它浏览器的通用的。不过记得后面的反斜线那是一定要有的。
H 这是一个系列的标签,从H1到H6,一共六个,有人说太少了,有人说正好用,有人说用不了这么多。反正我是觉得差不多。正确写法是: 主要是用来存放标题,也有一些朋友用来作它用拿来作其它用处,个人觉得这个标签还是让他安生一点,就让他做标题的作用。这六个标签之间最好不要出现什么相互包含的事。
strong 这个意思是着重,这是有语义的,作用也很简单。至于样工,是加粗着重,还是用色彩表明着重,那都是自行选择。正确的写法是
em 这个与strong很像,是表示强调。一般浏览器的默认值是斜体。使用方式与strong一样。写法是:
这里没有说表单,因为表单基本上没有什么变化,也没什么可特别说的。
(责任编辑:admin) |
织梦二维码生成器
var __dedeqrcode_id=2;
var __dedeqrcode_aid=2;
var __dedeqrcode_type='arc';
var __dedeqrcode_dir='/plus';
getDigg(2);
------分隔线----------------------------
function LoadCommets(page)
{
var taget_obj = document.getElementById('commetcontent');
var waithtml = "

评论加载中...
";
var myajax = new DedeAjax(taget_obj, true, true, '', 'x', waithtml);
myajax.SendGet2("/plus/feedback_ajax.php?dopost=getlist&aid=2&page="+page);
DedeXHTTP = null;
}
function PostComment()
{
var f = document.feedback;
var nface = '6';
var nfeedbacktype = 'feedback';
var nvalidate = '';
var nnotuser = '';
var nusername = '';
var npwd = '';
var taget_obj = $DE('commetcontentNew');
var waithtml = "

正在发送中...
";
if(f.msg.value=='')
{
alert("评论内容不能为空!");
return;
}
if(f.validate)
{
if(f.validate.value=='') {
alert("请填写验证码!");
return;
}
else {
nvalidate = f.validate.value;
}
}
if(f.msg.value.length > 500)
{
alert("你的评论是不是太长了?请填写500字以内的评论。");
return;
}
if(f.feedbacktype) {
for(var i=0; i < f.feedbacktype.length; i++)
if(f.feedbacktype[i].checked) nfeedbacktype = f.feedbacktype[i].value;
}
if(f.face) {
for(var j=0; j < f.face.length; j++)
if(f.face[j].checked) nface = f.face[j].value;
}
if(f.notuser.checked) nnotuser = '1';
if(f.username) nusername = f.username.value;
if(f.pwd) npwd = f.pwd.value;
var myajax = new DedeAjax(taget_obj, false, true, '', '', waithtml);
myajax.sendlang = 'utf-8';
myajax.AddKeyN('dopost', 'send');
myajax.AddKeyN('aid', '2');
myajax.AddKeyN('fid', f.fid.value);
myajax.AddKeyN('face', nface);
myajax.AddKeyN('feedbacktype', nfeedbacktype);
myajax.AddKeyN('validate', nvalidate);
myajax.AddKeyN('notuser', nnotuser);
myajax.AddKeyN('username', nusername);
myajax.AddKeyN('pwd', npwd);
myajax.AddKeyN('msg', f.msg.value);
myajax.SendPost2('/plus/feedback_ajax.php');
f.msg.value = '';
f.fid.value = 0;
if(f.validate)
{
if($DE('validateimg')) $DE('validateimg').src = "/include/vdimgck.php?"+f.validate.value;
f.validate.value = '';
}
}
function quoteCommet(fid)
{
document.feedback.fid.value = fid;
}
LoadCommets(1);
var contentRtPicAD2 = document.getElementById("contentRtPicAD2");
var stop = contentRtPicAD2.offsetTop - 60,
docBody = document.documentElement || document.body.parentNode || document.body,
hasOffset = window.pageYOffset !== undefined,
scrollTop;
window.onscroll = function (e) {
// cross-browser compatible scrollTop.
scrollTop = hasOffset ? window.pageYOffset : docBody.scrollTop;
if (scrollTop >= stop) {
contentRtPicAD2.className = 'stick';
} else {
contentRtPicAD2.className = '';
}
}