html 基础演示代码
2024-08-26 12:21:16
<!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="./V1.jpg">./本目录 也可以不写</a></p>
<p><a href="../img/xhtml1-frameset.dtd">../</a></p>
<p><a href="../../V1.jpg">../../</a></p>
<p><a href="/hello.java">/ 根目录，就是直接返回到当前文件所在的盘符的根目录下</a></p> <p><a name="3path"></a></p>
<h5>超链接 target属性（控制链接打开的位置）</h5>
<p><a href="./V1.jpg" target="_blank">_blank 新窗口中打开链接</a></p>
<p><a href="./V1.jpg" target="_self">_self 当前窗口中打开链接（默认）</a></p>
<p><a href="./V1.jpg" target="_parent">_parent 父窗口中打开链接</a></p>
<p><a href="./V1.jpg" target="_top">_top 最顶层父窗口中打开链接</a></p>
<p><a href="./V1.jpg" target="targetname">targetname 指定窗口或Frame中打开链接</a></p> <h5>iframe__frameset</h5>
<p><a href="V1.jpg" target="iframe_target">iframe</a></p>
<p><a href="V1.jpg" target="frameset_target">frameset</a></p>
<iframe src="/hello.java" name="iframe_target" style="width:100%;height:500px;"></iframe> <h5>onclick="javascript:window.open('','mywindow');"</h5>
<!--相当于新建一个iframe窗口,并且name="mywindow"-->
<p><a href="#" onclick="javascript:window.open('','mywindow');">打开一个空白的新窗口</a></p>
<p><a href="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="HelloWorld.html#1path">返回到 超链接 绝对路径</a></p>
<p><a href="HelloWorld.html#2path">返回到 超链接 相对路径</a></p>
<p><a href="HelloWorld.html#3path">返回到 超链接 target属性</a></p> <hr/>
<h5>图片</h5>
<p><img alt="V字仇杀队" src="V1.jpg" height="500px" width="100%"/></p> <h5>图片链接</h5>
<p><a href="E:\影视\鞠婧祎\mv.jpg" target="_blank"><img src="../img/mv.jpg" height="200px" alt="鞠婧祎" style="border:1px solid red"></a>
<!--图片链接去掉边框-->
<a href="E:\影视\鞠婧祎\mv.jpg" target="_blank"><img src="../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="../img/mv2.jpg" alt="学习中的鞠婧祎" usemap="mv2map"/></p>
<p><map name="mv2map" id="mv2map"> <!--nohref 属性规定该区域没有相关的链接。 nohref="nohref"-->
<area shape="circle" coords="20,20,20" alt="circle鞠婧祎" title="circle鞠婧祎" href="#" style="border:1px solid red;"/>
<area shape="rect" coords="400,0,440,20" alt="rect鞠婧祎" title="rect鞠婧祎" href="#" style="border:1px solid red;"/>
</map>
</p>
</body>
</html>
最新文章
- 《C#高级编程》读书笔记
- MQTT（二）推送
- C# 关键字【转】
- 解决Ubuntu "E: 软件包 vim 还没有可供安装的候选者"问题
- 使用Chef管理windows集群
- nios II--实验3——led 100M软件部分
- MongoDB的基本使用（二）
- 低功耗蓝牙4.0BLE编程-nrf51822开发(4)
- Excel中连接函数CONCATENATE()
- ASP.NET MVC 在子页中引用头文件
- NHibernate - ICriteria 查询
- struts开发经验汇总
- 【高德地图API】如何打造十月妈咪品牌地图？
- 自用公共js文件
- The Ultimate Productivity Hack is Saying No
- Python集合(set)
- ES6基础语法
- Jetty-attack-test
- [Leet Code]Path Sum
- Android ListView实现单击item出现删除按钮以及滑动出现删除按钮