首页 > 代码库 > 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 基础演示代码
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。