在实习的第三天学习HTML，使用H Builder工具。涵盖了HTML基本结构、表格和表单标签。遇到问题如何使文本与输入框对齐及调整单元格内行间距，计划在后续课程中解决。
8月12日
在稍稍落后于课程安排的进程之下，我们终于在实习的第三天下午来到了HTML和CSS的学习，按课程我们今天本应该完成HTML和CSS的学习和作业，CSS被拖到了明天，看来作业又是晚上的课后作业了。
H Builder（本次实习所使用的工具）
HTML（HyperText Markup Language）
HTML4.0—>XHTML 1.0 ->HTML5
3.3 HTML的基本结构
<html>
<head>
<title>网页标题</title>
<meta name="keywords"content="Java学习"/><! 设置辅助信息
</head>
<body>
<body>
</html>
上课教学用的代码如下：
<!DOCTYPE html>
<html>
<head>
<a name="锚链接"></a>
<meta charset="utf-8" />
<meta name="keywords" content="搬砖真快乐" />
<title>java学习</title>
</head>
<body>
！>< <br/>
<font coler="#ff000" size="30" face="华文行楷">welcome to my website!</font> <br />
hope you have a good day！
<h1>我是一级标题</h1>
<h2>标题会被加粗，并且自动换行</h2>
<p>这是一个段落。段落不会被加粗，也会自动换行</p>
<hr color="crimson" size="3"/>
<hr color="mediumseagreen" width="60%"/>
<p>please choose：？</p>
<ol type="a">
<li>考研</li>
<li>考研</li>
<li>考研</li>
<li>考研</li>
<li>考研</li>
<li>考研</li>
<li>考研</li>
<li>考研</li>
<li>考研</li>
<li>考研</li>
<li>考研</li>
<li>考研</li>
</ol>
<b>b是加粗</b><br/>
<i>i是斜体</i><br />
x<sup>2</sup>+y<sup>2</sup>=z<sup>2</sup>
<br />
<br />
<a href="http://www.baidu.com"/a><img src="img/无标题.jpg" alt="替代文本，当图片路径失效时，会出现这句话" title="克里格"/>
<a href="#">图片超链接</a><br />
<a href="#锚链接">锚链接之回到顶端</a>
<br />
我要好多 空格 <br />
3>2 5<8 © <br />
<marquee direction="right" width="300" onmouseover="this.stop()" onmouseout="this.start()">~~~~~~~~~~~~~~~~~~~~~~</marquee>
</body>
</html>
3.3 表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1-表格测试</title>
</head>
<body>
<table border="1" align="center" width="200" height="100"
bordercolor=="AntiqueWhite">
<caption align="top">表格测试</caption> /*默认会在顶端 可以通过修改top或bottom来改变位置*/
<tr>
<th>1</th> <!--表头属性默认加粗-->
<th>2</th>
<th>3</th>
</tr>
<tbody align="center" valign ="center">
<tr>
<td>4</td>
<td>5</td>
<td rowspan="2">6</td> /*跨行*/
</tr>
<tr>
<td colspan="2">7</td> /*跨列*/
</tr>
</tbody>
</table>
</body>
</html>
总而言之，HTML和CSS的学习，多查手册多使用,就记住了。
3.4 表单标签
（这编辑器能空格呢吗？）晚上做这道题之前老师还没有开始讲表格和表单，所以晚上在网上搬了很多代码，一开始看到这张界面的想法是做成4个div，但做到个人爱好那一步，又不知道怎么如何将个人爱好和右边的六个选项放在一起对齐。
加上网上看到的方法大多使用HTML+CSS进行登录注册界面的设计，抄的一知半解云里雾里，HTML还没摸清楚又强行加入了CSS内容，白天扎实上了一天课的晚上实在有些暴躁，于是把这道题留到了第二天上课老师一边讲表单一边做，并准备尝试用表格完成。
老师给出的方法是使用表格来完成，所以修改如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册界面</title>
</head>
<body bgcolor="#FFA500">
<form name="regform" id ="refForm" action="" method="post">
<table align="center" bgcolor="#FFFFCC" width="70%" height="500" cellspacing="0" ;>
<tr>
<td colspan="2" align="center" bgcolor="#FFD700">请完成以下表格</td>
</tr>
<tr>
<td style="text-align: right;">姓名</td>
<td><input type="text" name="username" placeholder="请输入用户名" size="10"/></td>
<tr />
<tr>
<td></td>
<td><font size="2">请在此处填写姓名</font></td>
<tr />
<td></td>
<td><font color="red" size="2">字符最长为四个汉字，或八个英文字母.</font></td>
<tr />
<tr>
<td style="text-align: right;">密码</td>
<td><input type="password" name="password"/></td>
<tr />
<tr>
<td style="text-align: right;">性别</td>
<td>
<input type="radio" checked="checked" name="Sex" value="male" /> 男
<input type="radio" name="Sex" value="female" /> 女
</td>
<tr />
<tr>
<td style="text-align: right;">电子邮件地址</td>
<td><input type="email" name="mail" size="30"/></td>
<tr />
<tr>
<td style="text-align: right;">职业</td>
<td>
<select name="jobs" >
<option value="教育/研究">教育/研究</option>
<option value="金融/财务">金融/财务</option>
<option value="政府人员">政府人员</option>
</select>
</td>
<tr />
<td rowspan="2" style="text-align: right;" valign="top">个人爱好</td>
<td>
<input type="checkbox" name="computer" /><font size="2">电脑网络 </font>
<input type="checkbox" name="enter" /><font size="2">影视娱乐</font>
<input type="checkbox" name="game" /><font size="2">棋牌游戏</font>
</td>
<tr />
<td>
<input type="checkbox" name="read" /><font size="2">读书读报</font>
<input type="checkbox" name="food" /><font size="2">美酒佳肴</font>
<input type="checkbox" name="draw" /><font size="2">绘画书法</font>
</td>
<tr />
<tr>
<td></td>
<td><font size="2">在此选择兴趣爱好，可以选择一个以上的选项</font></td>
<tr />
<tr>
<td style="text-align: right;">留言内容</td>
<td><textarea rows="5" cols="50" placeholder=" "></textarea></td>
<tr />
<tr>
<td colspan="2" align="center" bgcolor="#FFD700">填写完成后，选择下面的提交按钮提交表单。</td>
</tr>
<tr>
<td colspan="2" align="center"> <input type="submit" value="提交" /> <input type="reset" value="重置" />
</td>
</tr>
</table>
</form>
</body>
</html>
实现的效果如下（感觉HTML和编辑器也就很像。。）：
遗留问题：如何修改单元格内的行间距？？是否可以让“请在此处填写姓名”和“字符最长为四个汉字…"这两句话显得更加紧凑？
搬砖得来的半成品如下
问题：怎么让刚刚那两句话和输入框对齐？个人爱好如何修改？
总而言之，HTML和CSS，嗯，多翻手册多用多记吧。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
