web前端–html4练习
标签总览：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基础标签练习</title>
</head>
<body>
<!-- b标签加粗文字 br标签换行-->
<b>
黄鹤楼送孟浩然之广陵
</b><br />
故人西辞黄鹤楼，烟花三月下扬州。<br />
孤帆远影碧空尽，唯见长江天际流。<br />
<!--
h1：一级标签
h2：二级标签
h3：三级标签
h4：四级标签
h5：五级标签
h6：六级标签
p:段落标签
-->
<h1>java开发的三个方向</h1>
<h2>Java SE</h2>
<p>主要运用于桌面程序的开发。它是学习Java EE和Java Me的基础，也是本书的重点内容。</p>
<h2>Java EE</h2>
<p>主要用于网页程序的开发。随着互联网的发展。越来越多的企业使用Java语言来开发自己官方网站。</p>
<h2>Java ME</h2>
<p>主要用于嵌入式系统程序的开发。</p>
<h1>好</h1>
<h2>想</h2>
<h3>爱</h3>
<h4>这</h4>
<h5>个</h5>
<h6>世</h6>
<!-- center:居中标签 -->
<center>界</center><br />
<h3>编程字典有以下几个品种（默认属性为disc）</h3>
<!-- ul li 无序列表 type是设置列表的点样式如：正方形、原型。。。-->
<ul type="disc" >
<li>Java编程字典</li>
<li>VB编程字典</li>
<li>VC编程字典</li>
<li>.net编程字典</li>
<li>C#编程字典</li>
</ul>
<ul type="circle">
<li>Java编程字典</li>
<li>VB编程字典</li>
<li>VC编程字典</li>
<li>.net编程字典</li>
<li>C#编程字典</li>
</ul>
<ul type="square">
<li>Java编程字典</li>
<li>VB编程字典</li>
<li>VC编程字典</li>
<li>.net编程字典</li>
<li>C#编程字典</li>
</ul>
<!--ol 有序列表-->
<h3>有序列表</h3>
<ol type="1">
<li>Java编成宝典</li>
<li>VB编程字典</li>
<li>VC编程字典</li>
<li>.net编程字典</li>
<li>C#编程字典</li>
</ol>
<!-- 注释：CREL+shift+/ -->
<!--dl 自定义列表-->
<h3>自定义列表</h3>
<dl>
<dd>1、香蕉</dd>
<dd>a.苹果</dd>
<dd>b.葡萄</dd>
<dd>2.西瓜</dd>
<dd>c.草莓</dd>
</dl>
<!--marquee 跑马灯 -->
<marquee>我是跑跑跑的一段话</marquee>
<marquee direction="right">我是跑跑跑的第二段话</marquee>
<marquee direction="right" scrollamount="1">我是跑跑跑的第三段话</marquee>
<center><marquee direction="up" scrollamount="5" width="500" height="200" bgcolor="red">我是跑跑跑的第四段话<p>快跑快跑</p>我来了</marquee></center>
<!-- hr 默认的hr分割线-->
<h2>默认的hr分割线</h2>
<hr />
<h2>自定义hr分割线</h2>
<hr align="center" width="500px" color="red" size="50" />
<pre >这是一段话</pre>
<!-- font里的属性是设置文字样式的 -->
<font size="7" color="red">长沙</font>
<!--
table 表格
tr 表格的行
td 表格的列
caption：表格标题
-->
<table width="318" height="167" border="1" align="center">
<caption>学生考试成绩单</caption>
<tr>
<td align="center" valign="middle">姓名</td>
<td align="center" valign="middle">语文</td>
<td align="center" valign="middle">数学</td>
<td align="center" valign="middle">英语</td>
</tr>
<tr>
<td align="center" valign="middle">张三</td>
<td align="center" valign="middle">89</td>
<td align="center" valign="middle">92</td>
<td align="center" valign="middle">87</td>
</tr>
<tr>
<td align="center" valign="middle">李四</td>
<td align="center" valign="middle">93</td>
<td align="center" valign="middle">86</td>
<td align="center" valign="middle">80</td>
</tr>
<tr>
<td align="center" valign="middle">王五</td>
<td align="center" valign="middle">85</td>
<td align="center" valign="middle">86</td>
<td align="center" valign="middle">90</td>
</tr>
</table>
<h2 align="center">表格背景颜色</h2>
<table border="1" align="center" bgcolor="#FF34B3">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h2>横向表格头</h2>
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>柯南</td>
<td>男</td>
<td>12</td>
</tr>
<tr>
<td>小兰</td>
<td>女</td>
<td>17</td>
</tr>
</table>
<h2>纵向表格头</h2>
<table border="1"></table>
<tr>
<th>姓名</th>
<td>柯南</td>
<td>小兰</td>
</tr>
<tr>
<th>性别</th>
<td>男</td>
<td>女</td>
</tr>
<tr>
<th>年龄</th>
<td>12</td>
<td>17</td>
</tr>
<table border="1" align="center" width="400">
<caption>电话列表（合并列）</caption>
<tr>
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>张三</td>
<td>01-666666</td>
<td>01-888888</td>
</tr>
<tr>
<td>李四</td>
<td>02-123456</td>
<td>02-000000</td>
</tr>
</table>
<table border="1" align="center" width="400">
<caption>电话号码表（合并行）</caption>
<tr>
<th>姓名</th>
<td>张三</td>
<td>李四</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>01-123456</td>
<td>02-666666</td>
</tr>
<tr>
<td>01-7654321</td>
<td>02-8888888</td>
</tr>
</table>
<table border="1" align="center" width="400">
<tr>
<td>
<p>第一章:龙出世</p>
<p>第二章:龙夭折，小说完</p>
</td>
<td>
第二个单元格中的一个表格:
<table border="1" width="100">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
这是一个无序的序列：
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>火龙果</li>
<li>榴莲</li>
</ul>
</td>
<td>
这是一个有序到的序列：
<ol>
<li>猴子</li>
<li>狒狒</li>
<li>蛇</li>
<li>蚂蚁</li>
</ol>
</td>
</tr>
</table>
<!--form：表单，通常包含input的标签 -->
<form id="form1" action="action.html" method="post" name="form" target="_blank"></form>
<table border="1" cellpadding="2" cellspacing="0" align="center" width="400">
<caption>网上报名</caption>
<form action="">
<tr>
<th>用户名：</th>
<td><input name="username" type="text" size="25" maxlength="15"/></td>
</tr>
<tr>
<th>密码：</th>
<td><input name="password" type="password" size="27" maxlength="15"/></td>
</tr>
<tr>
<th>性别：</th>
<td>
<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex"/>女
</td>
</tr>
<tr>
<th>出生年月：</th>
<td>
<select name="">
<option value="1970">1970</option>
<option>1971</option>
<option>1972</option>
<option>1973</option>
<option>1974</option>
<option>1975</option>
<option>1976</option>
<option>1977</option>
<option>1978</option>
</select>年
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>月
</td>
</tr>
<tr>
<th>兴趣爱好：</th>
<td>
<input type="" />足球
<input type="checkbox" />乒乓球
<input type="checkbox" />橄榄球
<input type="checkbox" />蓝球
</td>
</tr>
<tr>
<th>个人简介：</th>
<td>
<textarea rows="5" cols="30" maxlength="300"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</td>
</tr>
</form>
</table>
下拉列表框：
<select name="select">
<option>数码相机区</option>
<option>摄影器材</option>
<option>MP3/MP4/MP5</option>
<option>U盘/移动硬盘</option>
</select>
<br /><br /><br /><br />
多行列表框（不可多选）：
<select name="select2" size="2">
<option>数码相机区</option>
<option>摄影器材</option>
<option>MP3/MP4/MP5</option>
<option>U盘/移动硬盘</option>
</select>
<br /><br /><br /><br />
多行列表框（可多选）：
<select name="select3" size="3" multiple="multiple">
<option>数码相机区</option>
<option>摄影器材</option>
<option>MP3/MP4/MP5</option>
<option>U盘/移动硬盘</option>
</select>
</body>
</html>
练习一：段落、列表、分隔线
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Homework1</title>
</head>
<body>
<center>
<h1 >乡恋情深</h1>
时间:2017-03-30 来源: 作者:杨梅英 阅读:50047次<br />
<b>你虽离开，却未曾走出我的记忆！——题记</b><br />
<hr width="1000px" color="red" size="5"/>
</center>
<p> 又是清明到来时，年年清明怀故人</p>
<p> 每到清明时节总会有春雨相伴，仿佛上苍都通晓人意，春雨带着一方乡土的气息，悸动着我在内心对你深切的思念。<br>这份思念之情越来越浓郁，占据了心田。不是淡漠，而是升华，成为了人间与天堂的精神链接点。<br>寻寻觅觅，凄凄惨惨戚戚。</p>
<p> 转眼，你已经告别我，告别这凡尘世界两年有余了。此时，太多的话语都显得苍白无力，你那曾经熟悉的身影，你那<br>不曾被遗忘的音容笑貌，平实无华，历历在目，你的离去留给我太多的不舍，我们相处的每一个时光片段，留下的记忆又是太<br>多，太多......</p>
<hr align="center" width="2000px" size="6" color="blue"/>
<h1>提纲</h1>
<ol type="A">
<li>创建第一个HTML文件</li>
<li>HTML文档结构</li>
<li>HTML常用标记</li>
<li>表格标记</li>
<li>HTML表单标记</li>
<li>超链接与图片标记</li>
</ol>
<hr align="center" width="2000px" size="7" color="green"/>
<h1>创建HTML文件步骤</h1>
<ul type="square">
<li>任意空白处点击右键，依次选择“新建”/“文本文档”。</li>
<li>重命名文件：任意文件名.html。</li>
<li>安装EditPlus编辑器。俗称“小红本”。</li>
<li>点击文件右键，依次选择“打开方式”/“EditPlus”，或者直接右键菜单就能看到“EditPlus”。</li>
<li>进入编辑器之后，直接开始编写代码。</li>
</ul>
<hr align="center" width="2000px" size="7" color="violet"/>
一、肉食动物
<dl>
<dd>1)、老虎</dd>
<dd>2)、狮子</dd>
<dd>3)、猎豹</dd>
</dl>
二、食草动物
<dl>
<dd>1)、兔子</dd>
<dd>2)、绵羊</dd>
</dl>
</body>
</html>
网页演示：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qq3YhQjQ-1591800001416)(E:\typoraPic\image-20200610220141010.png)]](https://img-blog.csdnimg.cn/20200610224042563.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lubWF0dXJpdHlfNw==,size_16,color_FFFFFF,t_70)
练习二：表格练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
</head>
<body>
<table align="center" width="500" height="400" bgcolor="yellow">
<tr>
<td align="center">中国菜</td>
</tr>
<tr>
<td align="left">目录</td>
</tr>
<tr>
<td align="left">1</td>
</tr>
<tr>
<td align="left">2</td>
</tr>
<tr>
<td align="left">3</td>
</tr>
<tr>
<td align="left">4</td>
</tr>
<tr>
<td align="left">5</td>
</tr>
<tr>
<td align="left">6</td>
</tr>
<tr>
<td align="left">菜名: **售价：**</td>
</tr>
<tr>
<td align="left">
<table cellspacing="0" cellpadding="0" width="100" height="200">
<tr>
<td><img src="img/homework2/中国菜/1.jpg"></td>
</tr>
</table>
</td>
<td>介绍：***</td>
</tr>
<tr>
<td align="left"><a href="homework2west.html">西餐</a></td>
</tr>
</table>
</body>
</html>
网页演示：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bCwB6v6W-1591800001424)(E:\typoraPic\image-20200610220251555.png)]](https://img-blog.csdnimg.cn/20200610224057261.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lubWF0dXJpdHlfNw==,size_16,color_FFFFFF,t_70)
练习三：表单练习：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>homework</title>
</head>
<body>
<form>
<!-- input标签type分类：
text：文本框
password：密码框
radio：单选框
checkbox：多选框
submit：提交按钮
reset：重置按钮
buttom：按钮
date:时间选择框
email：邮件框
file:文件
-->
用户名：<input type="text" name="username"/><br/><br/>
密码：<input type="password" name="password"/><br/><br/>
性别：<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女<br /><br/>
兴趣: <input type="checkbox" />打游戏 <input type="checkbox" />听音乐 <input type="checkbox" />跑步 <br /><br/>
<input type="submit" name="submit"/>
<input type="reset" name="reset"/>
</form>
</body>
</html>
网页演示：
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-O9QzOCpa-1591800001430)(E:\typoraPic\image-20200610221135105.png)]](https://img-blog.csdnimg.cn/20200610224111192.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lubWF0dXJpdHlfNw==,size_16,color_FFFFFF,t_70)