您的位置：首页 > Web前端 > HTML

html基础代码演示2

2017-05-08 17:01 302 查看 
<!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>helloworld</title>
</head>
<body>
<a name="top"></a>

<h1>欢迎来到html世界</h1>
<h2>第二标题</h2>
<h5>第五标题</h5>

<p>段落一</p>
<p>段落二</p>

<!--预格式化文本标签-->
if(3>1){
System.out.println("3大于1");
}
<pre>
if(3>1){
System.out.println("3大于1");
}
</pre>

<!--hr水平线-->
<hr/>

<!--Div 一般块级标签。style="height:50px;background: blue;"  -->
<div >
这是Div标签
</div>
在DIV外面

<!--内联标签-->
<hr/>
<p><em>强调,大部分浏览器渲染为斜体。</em> 强调,大部分浏览器渲染为斜体。   </p>
<p><strong>强调,大部分浏览器渲染为黑体。</strong>强调,大部分浏览器渲染为黑体。</p>
<p>sub:下标     H<sub>2</sub>O </p>
<p>sup:上标     2<sup>3</sup></p>
<p>code:代码标识      <code>System.out.println("你好，上海！")</code>  System.out.println("你好，上海！")</p>
<p> 一般内联标签<span style="color: blue;">一般内联标签</span> 一般内联标签</p>
<p>br：换行</p><br/>
<p><b>黑体<b>	<i>斜体</i> </p>

<!--实体字符     格式：   &+实体字符名称 + ;   -->
<a name="middle"></a>
<hr/>
<p>左尖括号：<  less than    比谁更少</p>
<p>右尖括号：>  greater than 比谁更多</p>
<p>这是一个空格          实体字符----nbsp:不间断空格(Non-breaking Space)</p>
<p>and符号&</p>
<p>双引号"	“</p>
<p>版权 ©	©    版权英文名称：copyright</p>
<p>注册 ®®        register</p>

<!--超链接-->
<hr/>
<a href="http://www.baidu.com">百度1</a>
<a href="https://www.baidu.com">百度2</a>
<!--<a href="ftp://E:\efbmcs5vajb.jpg">图片</a>-->
<!--mailto:邮向指示协议指示器-->
<a href="https://mail.google.com/">登陆Gmail</a>
<a href="ftp://mail.ustc.edu.cn/">登陆科大FTP服务器</a>

<!--相对路径-->
<hr/>
<p><a href="img/HBuilder.png">Hbuilder</a></p>
<p><a href="./lesson1.txt">lesson1</a></p>
<p><a href="test2.html">test2</a></p>

<p><a href="../img/HBuilder.png">Hbuilder2</a></p>

<p><a href="/HelloHBuilder/111.jpg">Hbuilder3</a></p>

<p><a href="/HelloHBuilder/index.html">html</a></p>
<!--访问盘符下的某个文件        直接访问某个盘符下的路径不行-->
<!--<p><a href="../../../../111.jpg">111</a></p>
<p><a href="D:\111.jpg">222</a></p>-->

<!--target-->
<hr/>
<p><a href="http://www.baidu.com" target="_blank">baidu_blank</a></p>
<p><a href="http://www.baidu.com" target="_self">baidu_self</a></p>
<!--框架iframe-->
<p><a href="http://www.baidu.com" target="page1">baidu_target_name</a></p>
<iframe  height="300px" width="100%" name="page1"></iframe>

<!--打开新窗口的第二种方式-->

<p><a href="#" onclick="javascript:window.open('','mywindow');">打开一个空白的新窗口</a></p><!--name=mywindow-->
<p><a href="test2.html" target="mywindow">在这个新窗口中打开“test2.htm”</a></p>

<!--锚点-->
<p><a href="HelloWorld.html#top">回到顶部</a></p>
<p><a href="HelloWorld.html#middle">回到中部</a></p>

<!--图片-->
<hr/>
<img src="../img/cat.jpg" alt="猫"/>
<img src="../img/111.jpg" alt="美女" style="height:126px;"/>

<!--图片连接-->
<p><a href="http://www.baidu.com" target="_blank"><img src="../img/cat.jpg" alt="猫"/></a></p>

<!--给图片加边框-->
<p><img src="../img/111.jpg" alt="美女" style="height:126px;border:1px solid red"/></p>

<!--图片地图-->
<h5>图片地图↓</h5>
<p><img src="../img/111.jpg" alt="美女" style="height:126px;border:1px solid red"  usemap="#girl"/></p>
<map name="girl">
<area shape="rect" coords="0,0,20,20" alt="baidu" href="http://www.baidu.com/" target="_blank"/>
<area shape="circle" coords="110,20,20" alt="sina" href="http://www.sina.com.cn/" target="_blank"/>
<!--点击图中心位置    宽=127   高=128-->
<!--<area shape="circle" coords="63.5,64,30" alt="sina" href="https://www.baidu.com/" target="_blank"/>-->
<area shape="rect" coords="40,40,87,88" alt="sina" href="https://www.baidu.com/" target="_blank"/>
</map>

<!--列表-->
<hr/>
<ul type="circle">
<li>太阳</li>
<li>月亮</li>
<li>星星</li>
<li>地球</li>
</ul>

<ul type="disc">
<li>山川</li>
<li>海洋</li>
<li>植物</li>
</ul>

<ul type="square">
<li>山川</li>
<li>海洋</li>
<li>植物</li>
</ul>

<!--有序列表-->
<ol>
<li>一号</li>
<li>二号</li>
<li>三号</li>
<li>四号</li>
</ol>

<ol type="I" start="2">
<li>一号</li>
<li>二号</li>
<li>三号</li>
<li>四号</li>
</ol>

<!--table表格-->
<hr/>
<table border="1" width="500px"   height="500px"  cellspacing="20">
<tr>
<th>0</th>
<th>0</th>
<th></th>
</tr>
<tr>
<td align="right">1</td>
<td>2</td>
<td> </td>
</tr>
<tr>
<td rowspan="2">4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td colspan="2">7</td>
</tr>
</table>

</html>


　　
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航