本帖最后由 陌宇轩 于 2018-6-24 22:29 编辑
【WEB】【教我表弟学HTML】系列一https://www.52pojie.cn/thread-752334-1-1.html
【WEB】教我表弟学习HTML系列二https://www.52pojie.cn/thread-753338-1-1.html
【WEB】教我表弟学习HTML系列二https://www.52pojie.cn/thread-753338-1-1.html
积攒了好多天的一个教程了，今天终于还是抽出了一个空进行码搞，上次给大家分享整理出了常用的标签，也不知道大家有没有记，不过我们今天会用到一大部分的。今天已经到第四系列了，应该开始制作一个基本的网站了，今天我们将要制作的是一个比较老的注册网站。现在站点内建立我们自己的今天的一个网页，建议使用DW（就是三系列的时候给大家推荐的网站来制作）来制作。
软件内先搭建好html的基础部分我们加入一个背景图片，楼主通过百度进行搜索一个动态的图片加入到body标签里面这里是我百度搜索到的一个动态图片地址（https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529857475290&di=96beff2c86ad8b494ee42b7360bd1fec&imgtype=0&src=http%3A%2F%2Fs9.rr.itc.cn%2Fr%2FwapChange%2F20166_13_20%2Fa6vaak1161084201352.jpg）
background 这是我们插入背景的一个标签
接着我们进行一个制表
我们需要一个九行两列的这样一个表格，根据我们上次讲到的，制作多行多列的时候，我们先做行一个一行两列的表格，然后进行复制就好。
[HTML] 纯文本查看 复制代码 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>注册页面</title>
</head>
<body background="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529857475290&di=96beff2c86ad8b494ee42b7360bd1fec&imgtype=0&src=http%3A%2F%2Fs9.rr.itc.cn%2Fr%2FwapChange%2F20166_13_20%2Fa6vaak1161084201352.jpg">
<table border="0" width="1000" align="center">
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
</table>
</body>
</html>
这是我们第一步搞定好的代码，然后我进行一个第一行和最后一行的一个跨行合并，不知道大家还记得我们上次讲的跨行和跨列的合并办法吗，我这里就不重复进行讲解了，直接就把效果图给到你们看就好了。没懂的就去看看前面的那个系列。
代码如下：
[HTML] 纯文本查看 复制代码 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>注册页面</title>
</head>
<body background="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529857475290&di=96beff2c86ad8b494ee42b7360bd1fec&imgtype=0&src=http%3A%2F%2Fs9.rr.itc.cn%2Fr%2FwapChange%2F20166_13_20%2Fa6vaak1161084201352.jpg">
<table border="0" width="1000" align="center">
<tr>
<td colspan="2" align="center">表哥学习注册页面</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td>1</td><td>2</td>
</tr>
<tr>
<td colspan="2" align="center">最后一行</td>
</tr>
</table>
</body>
</html>
我们同时还加入了对齐的标签。然后我们进项添加内容和选项了。先看看我们最后的一个效果图
在来看看我们的代码
[HTML] 纯文本查看 复制代码 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>注册页面</title>
</head>
<body background="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1529857475290&di=96beff2c86ad8b494ee42b7360bd1fec&imgtype=0&src=http%3A%2F%2Fs9.rr.itc.cn%2Fr%2FwapChange%2F20166_13_20%2Fa6vaak1161084201352.jpg">
<form action="mailto:@qq.com" method="post">
<table border="0" width="1000" align="center">
<tr>
<td colspan="2" align="center">表哥学习注册页面</td>
</tr>
<tr>
<td width="340" align="right">用户名:</td><td width="660"><input type="text" placeholder="请输入用户名" maxlength="4"></td>
</tr>
<tr>
<td align="right">密码:</td><td><input type="password" placeholder="请输入密码" maxlength="15"></td>
</tr>
<tr>
<td align="right">E-mail</td><td><input type="email" value="@163.com" title="点击输入邮箱，目前只支持136邮箱"></td>
</tr>
<tr>
<td align="right">职业</td>
<td>
<select>
<option>安卓工程师</option>
<option selected>WEB工程师</option>
<option>后端工程师</option>
<option>学生</option>
<option>上班族</option>
</select>
</td>
</tr>
<tr>
<td align="right">您现在的心情</td>
<td>
<input type="radio" name="face">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1528532279798&di=ca23c2b2aa1e98c1279bad6b9c4aed45&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01b5665934c77fa8012193a3d309a2.gif">
<input type="radio" name="face" checked>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1528532310225&di=1c24bcce30855378c70aeac99cdc280a&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F012a1359b21bb7a8012028a9699cf1.gif">
</td>
</tr>
<tr>
<td align="right">喜好：</td>
<td>
<input type="checkbox" checked>吃
<input type="checkbox">喝
<input type="checkbox">玩<br>
<input type="checkbox" checked>乐
<input type="checkbox">看
<input type="checkbox" checked>闹
</td>
</tr>
<tr>
<td align="right">在线留言</td>
<td>
<textarea cols="30" rows="10" placeholder="现在是不是有什么想对我说的呢，写下来吧"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center"><a ><input type="button" value="搜索"></a>
<input type="submit" value="OK">
<input type="reset"></td>
</tr>
</table>
</form>
</body>
</html>
我们在进行一个一个标签的分析
[HTML] 纯文本查看 复制代码 align="center" 居中的代码属性
placeholder 提示输入文字
maxlength 控制/限制输入长度
input type="text" 文本框（type 类型）
input type="password" 密码框
input type="email" 邮件框
input type="email" value="@163.com" 给邮件框加属性控制为163邮箱
input type="radio" name="face" 单选框（圆形），删掉name变为多选框
input type="checkbok" 复选按钮，方形的框
checked 默认选中选型的属性
input type="button" 普通按钮
input type="submit" 提交按钮
input type="reset" 重置按钮
<textarea></textarea> 文字区域
cors 文本框可以容纳的行数
raow 文本框容纳的列数
<select></select> 下拉菜单
<option></option> 下拉菜单的选项
selected 默认选中
multiple 多选菜单
Ok，我们的系列结束，首先说一下为什么这次系列写的内容可能比往次系列教程没有很多详细的地方，主要的寓意就是希望大家多动手一下，然后进行标签的对比和实际的运用来分析。上面代码每个标签我也列出来了，注册网站的实现代码也已经敲出来了，剩下的也就剩下了你们的一个分析和对比了，如果分析不了的，不会的，（我觉得伟大的网友应该不会有，大家这么聪明）下方留言，我来进行回复。（HTML也将接近尾声了，下次我们就会进行CSS部分，然后对今天的网站进行一个装饰，以及后面的一些内容了，下期见）
| 
[复制链接]
发表于 2018-6-24 22:26
|
发表于 2018-7-1 04:29
学习的你们都是最棒的人
