HTML编程例子
点我下载所有例子
HTML_div和span
<html>
<head>
<title>HTML-DIV和SPAN</title>
<meta content="text/html;charset=utf-8">
</head>
<body>
<div>我是一个div</div>
我是一个div
<span>我是一个SPAN</span>
我是SPAN
</body>
</html>
HTML_div和span
<html>
<head>
<title>
HTML图片标签
</title>
<meta content="text/html;charset=UTF-8">
</head>
<body>
<img src="img/1.jpg" width="800" height="500" alt="照片介绍" title="鼠标悬停介绍"/>
</body>
</html>
Table标签
<html>
<head>
<title>Table标签</title>
<meta content="text/html;charset=UTF-8">
</head>
<body>
<center>员工信息</center>
<br><br><br>
<hr color="red">
<table border="1px" width="50%" height="30%" align="center">
<tr>
<td>物理</td>
<td>化学</td>
<td>生物</td>
</tr>
<tr>
<td>物理</td>
<td>化学</td>
<td>生物</td>
</tr>
<tr>
<td>物理</td>
<td>化学</td>
<td>生物</td>
</tr>
</table>
</body>
</html>
HTML—table
<html>
<head>
<title>HTML——table-02</title>
<meta content="text/html;charset=UTF-8">
</head>
<body>
<table border="1px" width="30%" height="40%">
<thead>
<tr>
<th align="center">员工编号</th>
<th align="center">员工姓名</th>
<th align="center">员工薪水</th>
</tr>
</thead>
<tbody>
<tr align="center">
<td>7788</td>
<td>SMIth</td>
<td>800</td>
</tr>
<tr align="center">
<td>7788</td>
<td>SMIth</td>
<td>800</td>
</tr>
<tr align="center">
<td>7788</td>
<td>SMIth</td>
<td>800</td>
</tr>
</tbody>
<tfoot>
<tr align="center">
<td>表脚</td>
<td>表脚</td>
<td>表脚</td>
</tr>
</tfoot>
</table>
</body>
</html>
HTML_背景图片
<html>
<head>
<title>HTML背景图片</title>
<meta content="text/html;charset=UTF-8">
</head>
<body background="http://pic29.photophoto.cn/20131204/0034034499213463_b.jpg" style="background-repeat:no-repeat;">
</body>
</html>
HTML_背景颜色
<html>
<head>
<title>HTML背景颜色</title>
<meta content="text/html;charset=UTF-8">
</head>
<body bgcolor="yellow">
</body>
</html>
背景图片纯色
<html>
<head>
<title>HTML背景颜色</title>
<meta content="text/html;charset=UTF-8">
</head>
<body bgcolor="yellow">
</body>
</html>
HTML_标题字和预留格式
<html>
<head>
<title>HTML标题字和预留格式</title>
<meta content="text/html;charset=UTF-8">
</head>
<body>
<center>以下为标题字</center>
<h1>标题字</h1>
<h2>标题字</h2>
<h3>标题字</h3>
<h4>标题字</h4>
<h5>标题字</h5>
<h6>标题字</h6>
<br>
<pre>
for(int i = 0;i > 10 ; i++){
System.out.println(i);
}
</pre>
张 三
<br>
王大五
</body>
</html>
HTML_表单
<html>
<head>
<title>HTML表单</title>
<meta content="text/html;charset=utf-8">
</head>
<body>
<form name="userForm" action="http://localhost:8080/oa/login" method="post">
用户名：
<input name="username" type="text" />
<br><br>
密 码：
<input type="password" name="password" />
<br><br>
性 别：
<input type="radio" name="gender" value="f" />男
<input type="radio" name="gender" value="m" checked/>女
<BR><br>
兴 趣：
<input type="checkbox" name="interest" value="sport"/>运动
<input type="checkbox" name="interest" value="food" checked/>美食
<input type="checkbox" name="interest" value="music"/>音乐
<input type="checkbox" name="interest" value="sleep" checked/>睡觉
<input type="checkbox" name="interest" value="travel"/>旅游
<br><br>
学 历：
<select name="grade">
<option value="gz">高中</option>
<option value="dz" selected>大专</option>
<option value="bk">本科</option>
<option value="ss">研究生</option>
</select>
<br><br>
简 介：
<textarea name="introduce" cols="30" rows="5"></textarea>
<br><br>
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</form>
<input type="submit" value="注册"/>
<input type="button" value="注册1" />
</body>
</html>
HTML_表单02
<html>
<head>
<title>HTML表单-02</title>
<meta content="text/html;charset=utf-8">
</head>
<body>
<form id="userForm" name="userForm" action="http://127.0.0.1:8080/oa/login" method="get">
用户名：
<input type="text" name="username" value="zhangsan"/>
<br><br>
用户名2：
<input type="text" name="username2" size="50" maxlength="10"/>
<br><br>
用户名3：
<input type="text" name="username3" value="zhangsan" readonly/>
<br><br>
用户名4：
<input type="text" name="username4" value="zhangsan" disabled/>
<br><br>
<input type="hidden" name="id" value="10001"/>
<br><br>
文件上传：
<input type="file" name="file"/>
<br><br>
<input type="submit" value="提交"/>
</form>
</body>
</html>
HTML_表格颜色
<html>
<head>
<title>HTML表格颜色</title>
<meta content="text/html;charset=UTF-8">
</head>
<body>
<table border="1px" width="20%" height="30%" bgcolor="blue">
<tr bgcolor="red">
<td><font size="30px" color="yellow">1</font></td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td bgcolor="green">5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td bgcolor="gray">12</td>
</tr>
</table>
</body>
</html>
超链接
<html>
<head>
<title>HTML超链接</title>
<meta content="text/html;charset=UTF-8">
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<br>
<a href="http://www.tmall.com">天猫</a>
<br>
<a href="HTML_背景图片.html" target="_blank">HTML_背景图片</a>
<br>
<a href="http://www.taobao.com"><img src="img/taobao.png" alt="淘宝" title="点我到淘宝"/></a>
<br>
<a href="http://www.taobao.com"><img src="img/2.gif" alt="小人" title="点我点我"/></a>
</body>
</html>
HTML_格式标签
<html>
<head>
<title>HTML格式标签</title>
<meta content="text/html;charset=utf-8">
</head>
<body>
<b>粗体字</b>
<br>
<i>斜体字</i>
<br>
<ins>插入字</ins>
<br>
<del>删除字</del>
<br>
10<sup>2</sup>
<br>
H<sub>2</sub>O
</body>
</html>
HTML_行列合并
<html>
<head>
<title>HTML行合并和列合并</title>
<meta content="text/html;charset=UTF-8">
</head>
<body>
<table border="1px" width="30%" height="30%">
<tr>
<td>1</td>
<td>2</td>
<td rowspan="2">3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td colspan="2">7</td>
<td>9</td>
</tr>
</table>
</body>
</html>
html框架
<html>
<head>
<title>HTML框架</title>
<meta content="text/html;charset=UTF-8">
<frameset cols="30%,*">
<frameset rows="30%,*">
<frame src="left_up.html" name="f1"></frame>
<frame src="http://www.jd.com" name="f2"></frame>
</frameset>
<frame src="http://www.taobao.com" name="f3"></frame>
</frameset>
</head>
</html>
框架2
<html>
<head>
<title>HTML框架-02</title>
<meta content="text/html;charset=utf-8">
</head>
<body>
<iframe src="http://www.baidu.com" ></iframe>
</bodY>
</html>
列表
<html>
<head>
<title>HTML列表</title>
<meta content="text/html;charset=UTF-8">
</head>
<body>
<ul type="circle">
<li>中国
<ul>
<li>北京
<ul>
<li>海淀区</li>
<li>大兴区</li>
</ul>
</li>
<li>上海</li>
<li>广州</li>
</ul>
</li>
<li>美国</li>
<li>日本</li>
</ul>
<ol type="i">
<li>中国
<ol>
<li>河南省</li>
<li>河北省</li>
</ol>
</li>
<li>美国</li>
</ol>
</body>
</html>
HTML_锚点
<html>
<head>
<title>HTML锚点</title>
<meta content="text/html;charset=utf-8">
</head>
<body>
<a href="#four">第四回合</a>
<p>
锚点锚点锚点锚
</p>
<p>
锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点
</p>
<p>
锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点
</p>
<p>
锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点
锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点
</P>
<p>
<a name="four">第四回合</a>
锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点
锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点
点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点
</P>
</body>
</html>
6247
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
