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 />我要好多&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;空格 <br />3&gt;2&nbsp;&nbsp;&nbsp;5&lt;8 &copy <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" />&nbsp;男&nbsp;<input type="radio" name="Sex" value="female" />&nbsp;女&nbsp;</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="提交" />&nbsp;<input type="reset" value="重置" /></td></tr></table></form></body>
</html>

实现的效果如下（感觉HTML和编辑器也就很像。。）：

遗留问题：如何修改单元格内的行间距？？是否可以让“请在此处填写姓名”和“字符最长为四个汉字…"这两句话显得更加紧凑？
搬砖得来的半成品如下

问题：怎么让刚刚那两句话和输入框对齐？个人爱好如何修改？

总而言之，HTML和CSS，嗯，多翻手册多用多记吧。

老图搬砖day03.2——HTML相关推荐

老图搬砖day04.2——JavaScript基础
JavaScript 8月13日 JavaScript 是属于网络的脚本语言! JavaScript是基于对象和事件驱动的客户端脚本语言. JavaScript 被数百万计的网页用来改进设计.验证表单 ...
老图搬砖day02——课后作业
Q2 本班实施JAVA测试.学生有姓名(name)和成绩(score)信息.成绩有科目(course)和分数(grade)信息.学生类的 getResult方法显示输出成绩信息,setData方法实现 ...
趣图 | 搬砖人的现实
点击上方"蓝色字体",选择"设为星标" 开启乐趣模式! 但凡还有点气息都没人能阻止我无偿加班搬砖!!!???? ↓↓↓ 点击关注下方卡片关注我???????? ...
站长图卦：每天坚持搬砖定有美好明天
站长图卦帮您在嬉笑中了解近期与站长有关的信息. 时间8月上旬.作者:卢松松 [1]微信5.0发布了,你怎么看?如图 [2]我来了搜狗悄悄推出了站长平台,知道吗?这个平台一个月前就出来了,估计功能太差 ...
dnf最新地图编号2020_2020手游崛起端游没落？网易新端游好玩刺激能搬砖，网友：妙...
2020真的是手游界丰收的一年,先是有以休闲养生吸引到无数用户喜欢爆火的<江南百景图>和<阴阳师:妖怪屋>,又有硬核武侠手游<天涯明月刀>以及即将要终测的东方幻想题 ...
新手轻松日赚300+搬砖项目详解
昨天元宵节,不知道大家有没有看烟花. 忙里偷闲,跟几个好朋友一起去,看了烟花. 说实话,自从家里拆迁了,也有好几年没看过烟花,挺怀念的. 小时候每当元宵之际都要买几箱烟花放一放,闹元宵就要有闹元宵的样 ...
steam搬砖项目，月利润9000+
大家好,我是阿阳 steam搬砖项目,月赚9000+ 这个项目是经过本人亲自测试,并且到目前为止两年的时间,一直都还在运作的一个项目! Steam是什么?它是国外一个集全球大部分网游于一体的游戏平台, ...
Java：JVM+数据库（搬砖整理，侵权删文）
Java:JVM+数据库(搬砖整理,侵权删文) 十一.JVM 1.Java内存区域 1.说一下 JVM 的主要组成部分及其作用? JVM包含两个子系统和两个组件,两个子系统为Class loade ...
3人2周上线，2人1周上线，Solo明天上线！开发周期果然不能用搬砖模式计算......
有10000块砖需要我们去搬,1个人1天可以搬1000块,那么总共要10天搬完.为了更快的完成任务,如果我们派10个人去一起搬砖,那么1天就可以搬完. 这个简单的道理,每个人都懂,如果要让事情做的话, ...

老图搬砖day03.2——HTML