首页 > 代码库 > html 基础演示代码

html 基础演示代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>
</head>
<body>
	
	<center>
		<p><font color="red" size="20px">welcome come to html!!!</font></p>
	</center>

 	<h1>标题标签</h1>
 
 	<p>段落标签</p>
 	
	<!--pre定义预格式化的文本,被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。-->
	<pre>
	if(20>30){
		System.out.println("20大于30!");
	}
	</pre>

	<div>DIV标签</div>
	<hr/>
	
	<h5>HTML自动在一个h1、h6、p、pre 的段落前后各添加一个空行。---->空行不是换行,是多出没有内容的一行</h5> 
	qw<br><br>ert<br>yuiop
	<h5>rwerw</h5>

	<hr>
	<h5>内联标签</h5>
	<p><em> em:</em>强调,大部分浏览器渲染为斜体。</p>
	<p><strong> strong:</strong>强调,大部分浏览器渲染为黑体。</p>
	<p> sub:下标       subscript      h<sub>2</sub>o</p>
	<p> sup:上标       superscript    2<sup>3</sup></p>
	<p><code> code:</code>标示一段代码	</p>
	<p><span> span:</span>一般内联标签</p>
	<p>br:<br> 换行</p>		
	<p><b>b:</b> 黑体</p>	
	<p><i>i:</i> 斜体</p>
	
	<hr>
	<h5>实体字符         实体字符的格式是:AND符号(&) + 实体名 +分号(;)</h5>
	<p>gt: > 大于号    greater-than</p>
	<p>lt: < 小于号    less-than</p>
	<p>nbsp:  不间断 空格Non-breaking Space </p> 
	
	<p>空格: END</p>
	<p>左括号:<</p>
	<p>右括号:></p>
	<p>AND符号:&</p>
	<p>引号:"</p>
	<p>人民币:¥</p>
	<p>版权:? copyright</p>
	<p>注册:?  register</p>
	<p>乘号:×</p>
	<p>除号:÷</p>
	
	<hr>
	<p><a name="1path"></a></p> 
	<h5>超链接         绝对路径</h5>
	<a href="http://www.baidu.com/">链接到百度首页</a>
	<p><a href="mailto:leizhang5@iflytek.com">打开邮件客户端</a></p>
	<p><a href="https://mail.google.com/">登陆Gmail</a></p>
	<p><a href="ftp://mail.ustc.edu.cn/">登陆科大FTP服务器</a></p>

	<p><a name="2path"></a></p>
	<h5>超链接         相对路径</h5>  
	<p><a href="http://www.mamicode.com/V1.jpg">./本目录     也可以不写</a></p> 
	<p><a href="http://www.mamicode.com/img/xhtml1-frameset.dtd">../</a></p> 
	<p><a href="http://www.mamicode.com/V1.jpg">../../</a></p> 
	<p><a href="http://www.mamicode.com/hello.java">/ 根目录,就是直接返回到当前文件所在的盘符的根目录下</a></p> 

	<p><a name="3path"></a></p>
	<h5>超链接         target属性(控制链接打开的位置)</h5>  
	<p><a href="http://www.mamicode.com/V1.jpg" target="_blank">_blank  新窗口中打开链接</a></p>
	<p><a href="http://www.mamicode.com/V1.jpg" target="_self">_self  当前窗口中打开链接(默认)</a></p>
	<p><a href="http://www.mamicode.com/V1.jpg" target="_parent">_parent  父窗口中打开链接</a></p>
	<p><a href="http://www.mamicode.com/V1.jpg" target="_top">_top  最顶层父窗口中打开链接</a></p>
	<p><a href="http://www.mamicode.com/V1.jpg" target="targetname">targetname  指定窗口或Frame中打开链接</a></p>
	
	<h5>iframe__frameset</h5> 
	<p><a href="http://www.mamicode.com/V1.jpg" target="iframe_target">iframe</a></p> 
	<p><a href="http://www.mamicode.com/V1.jpg" target="frameset_target">frameset</a></p>  
	<iframe src="http://www.mamicode.com/hello.java" name="iframe_target" style="width:100%;height:500px;"></iframe>
	
	<h5>onclick="javascript:window.open(‘‘,‘mywindow‘);"</h5>
	<!--相当于新建一个iframe窗口,并且name="mywindow"-->
	<p><a href="http://www.mamicode.com/#" onclick="javascript:window.open(‘‘,‘mywindow‘);">打开一个空白的新窗口</a></p> 
	<p><a href="http://www.mamicode.com/V1.jpg" target="mywindow">在这个新窗口中打开“V1.jpg”</a></p> 
	
	<h5>页面锚点的使用</h5>
	<!--在frame和iframe中用的是name属性,同理,在描点时,用的也是name属性,偶耶!!!-->
	<!--区别是a用target去标记到对应的iframe的name,a用href标记到对应的对应的a的name-->
	<p><a href="http://www.mamicode.com/HelloWorld.html#1path">返回到  超链接  绝对路径</a></p> 
	<p><a href="http://www.mamicode.com/HelloWorld.html#2path">返回到  超链接  相对路径</a></p>  
	<p><a href="http://www.mamicode.com/HelloWorld.html#3path">返回到  超链接  target属性</a></p> 
	
	<hr/>
	<h5>图片</h5>
	<p><img alt="V字仇杀队" src="http://www.mamicode.com/V1.jpg"   height="500px" width="100%"/></p>
	
	<h5>图片链接</h5>  
	<p><a href="http://www.mamicode.com/E:/影视/鞠婧祎/mv.jpg" target="_blank"><img src="http://www.mamicode.com/img/mv.jpg" height="200px" alt="鞠婧祎" style="border:1px solid red"></a>  
	<!--图片链接去掉边框-->    
	<a href="http://www.mamicode.com/E:/影视/鞠婧祎/mv.jpg" target="_blank"><img src="http://www.mamicode.com/img/mv.jpg" height="200px" alt="鞠婧祎" border="0"></a></p> 

	<!--定义和用法
		coords 属性规定区域的 x 和 y 坐标。    coords 属性与 shape 属性配合使用,来规定区域的尺寸、形状和位置。
		图像左上角的坐标是 "0,0"。
		详细解释:
		<area> 标签的 coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。坐标的数字及其含义取决于 shape 属性中决定的区域形状。可以将客户端图像映射中的超链接区域定义为矩形、圆形或多边形等。
		下面列出了每种形状的适当值:
		圆形:shape="circle",coords="x,y,z"
		这里的 x 和 y 定义了圆心的位置("0,0" 是图像左上角的坐标),r 是以像素为单位的圆形半径。
		多边形:shape="polygon",coords="x1,y1,x2,y2,x3,y3,..."
		每一对 "x,y" 坐标都定义了多边形的一个顶点("0,0" 是图像左上角的坐标)。定义三角形至少需要三组坐标;高纬多边形则需要更多数量的顶点。
		多边形会自动封闭,因此在列表的结尾不需要重复第一个坐标来闭合整个区域。
		矩形:shape="rectangle",coords="x1,y1,x2,y2"
		第一个坐标是矩形的一个角的顶点坐标,另一对坐标是对角的顶点坐标,"0,0" 是图像左上角的坐标。请注意,定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。
		例如,下面的 XHTML 片段在一个 100x100 像素图像的右下方四分之一处,定义了一个对鼠标敏感的区域,并在图像的正中间定义了一个圆形区域。
	-->
	<h5>图片地图</h5>
	<p><img src="http://www.mamicode.com/img/mv2.jpg" alt="学习中的鞠婧祎" usemap="mv2map"/></p> 
	<p><map name="mv2map" id="mv2map">   <!--nohref 属性规定该区域没有相关的链接。     nohref="http://www.mamicode.com/nohref"-->
			<area shape="circle" coords="20,20,20" alt="circle鞠婧祎" title="circle鞠婧祎" href="http://www.mamicode.com/#" style="border:1px solid red;"/>
			<area shape="rect" coords="400,0,440,20" alt="rect鞠婧祎" title="rect鞠婧祎" href="http://www.mamicode.com/#" style="border:1px solid red;"/> 
		</map>
	</p> 
</body>
</html>

  

html 基础演示代码