html标记学习(符合xhtml标准的标记)

html标记学习(符合xhtml标准的标记)

tt,kbd等宽,

sup+sub,

select+option+optgroup,

noscript,

img.usemap="#编号"+map+area,

fieldset+legend+ul列表,

label.for,

ins,del,i,em,big,b,address,acronym,dfn,code,cite,

center,

table全套系列:table+label+col+colGroup+thead+tbody+tfood+tr+th+td

 

<!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"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>hello</title> <mce:style type="text/css"><!-- body{ font-size:13px; background-color:#141; } #page{ width:360px; margin:0 auto; background-color:white; min-height:240px; padding:10px; } .block1{border:1px solid #fcc; padding:10px; margin-bottom:10px;} --></mce:style><style type="text/css" mce_bogus="1">body{ font-size:13px; background-color:#141; } #page{ width:360px; margin:0 auto; background-color:white; min-height:240px; padding:10px; } .block1{border:1px solid #fcc; padding:10px; margin-bottom:10px;}</style> </head> <body> <div id="page"> <div class="block1"> <!-- 以固定宽度字体渲染文本,tt --> 请计算: <tt style="background-color:#eee; display:block;" mce_style="background-color:#eee; display:block;"> ax<sup>2</sup>+bx+c<sub>3</sub>=0 </tt> <!-- 以固定宽度字体渲染文本,kbd --> <kbd>abcdfeg1234567890hijklmnopqrstuvwxyz</kbd> </div> <div class="block1"> <select> <option>请选择...</option> <optgroup label="亚洲"> <option>中国</option> <option>日本</option> <option>韩国</option> </optgroup> <optgroup label="北美洲"> <option>美国</option> <option>加拿大</option> </optgroup> <optgroup label="欧洲"> <option>大不列颠王国</option> <option>法兰西</option> <option>德意志</option> </optgroup> <option>你选完了吗?</option> </select> </div> <div class="block1"> <div style="width:240px;float:right;"> <mce:script type="text/javascript" language="javascript"><!-- document.write("OK,你的浏览器支持脚本!"); // --></mce:script> <noscript> 你的浏览器不支持客户端脚本,请你砸了它! </noscript> </div> <div style="clear:both;" mce_style="clear:both;" ></div> </div> <div class="block1"> <img id="imgMap" src="http://www.google.com/intl/en_ALL/images/logo.gif" mce_src="http://www.google.com/intl/en_ALL/images/logo.gif" usemap="#map" alt="" width="276" height="110" style="border:0px;" mce_style="border:0px;" /> <map id="map"> <area shape="rect" mce_shape="rect" coords="0,0,82,106" mce_coords="0,0,82,106" href="#none" mce_href="#none" /> <area shape="circle" mce_shape="circle" coords="90,58,3" mce_coords="90,58,3" href="#none" mce_href="#none" /> <area shape="poly" mce_shape="poly" coords="221,34,238,37,257,32,278,44,284,60,253,89,237,81,229,64,228,54" mce_coords="221,34,238,37,257,32,278,44,284,60,253,89,237,81,229,64,228,54" href="#none" mce_href="#none" /> </map> </div> <div class="block1"> <fieldset style="width:160px; padding:0;"> <legend>爬山</legend> <ol> <li>黄山</li> <li>峨眉山</li> <li>长白山</li> </ol> </fieldset> </div> <div class="block1"> <label for="txtName">请输入姓名:</label><input type="text" id="txtName" /> </div> <div class="block1"> <ins datetime="1997-10-01T12:15:30-05:00">此文本已被插入。</ins> <del>此文本已被删除。</del> <i>指定文本应以斜体渲染,若可用的话。</i> <em>强调文本,通常以斜体渲染。</em> <span style="font-size:13px;" mce_style="font-size:13px;">此文本将加<big>大</big>显示。</span> 中<b>国</b>人. <address>特定信息,如地址、签名、作者、此文档的原创者。</address> <acronym>winxp windows 7</acronym> </div> <div class="block1"> <dfn>HTML 代表超文本标记语言。</dfn> <code>这里是以小型abcdefghijklmnopqrstuvwxyz1234567890固定宽度hello字体显示的文本。</code> <cite>书的标题。</cite> <center>将后面的文本和图像居中显示。</center> </div> </div> </body> </html>

 

效果图

 

 

转载于:https://www.cnblogs.com/TangZhongxin/archive/2009/07/21/3942570.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值