老图搬砖day03.2——HTML

最新推荐文章于 2024-09-16 18:11:26 发布

原创最新推荐文章于 2024-09-16 18:11:26 发布 · 282 阅读

0 ·

CC 4.0 BY-SA版权

老图搬砖专栏收录该内容

12 篇文章

订阅专栏

在实习的第三天学习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 />
		
		 我要好多&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>