【WEB】【教我表弟学习HTML】系列三
本帖最后由 wushaominkk 于 2018-6-23 14:04 编辑【教我表弟学HTML】系列一 https://www.52pojie.cn/thread-752334-1-1.html
【教我表弟学习HTML】系列二 https://www.52pojie.cn/thread-753338-1-1.html
端午节差不多也过去了，苦逼的假日也结束了，上班的上班，上学的上学，我们的系列也迎来了新的一系列，楼主可是呆呆的休息了三天呐，确实生活压力大，生活繁忙一直没时间写。让大家久等了，很抱歉了。前面两期大家也基本学完了HTML入门基础教程了，今天开始可能会越来越有难度，但是我相信大家足够聪明，没什么能够难倒各位的。虽然讲的比较啰嗦点，真正的目标也只是希望大家能够理解。上两期也有落调的标签属性，今天都整理一并放上了。今天给大家带来的是网页的表单元素。
我们今天重点是围绕表单元素来讲，我会带大家做两个最基本的网站，带各位一起来了解今天的重点重点。 我们的站点下先建立一个html基础代码。标题我们叫做表单元素。今天的代码所代表的意思就会直接打在这行代码的下面。这是我们html内容中的一个注释符号，加上注释以后，首先我们的代码是不会出现在网页中，是有利于后期的一个调整和改正bug的。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单元素</title>
</head>
<body>
<!--这里是我们要注释的内容-->
</body>
</html>
下面这是我们的表单标签元素了。
<table></table> 表格
<tr></tr> 表单行
<td></td> 表单列
我们引进代码中一起实际看
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单元素</title>
</head>
<body>
<!--这里是我们要注释的内容-->
<table border="2" width="600" height="450">
<!--表单-->
<tr>
<td>我在</td>
</tr>
<!--表行表列，表行里嵌套着表列，这是我们的一行一列-->
</table>
</body>
</html>
只要是带了注释符号的都是要给大家解释的，希望大家能够理解，看清楚。 这是我们一行一列的代码，我们写4行6列一起看看
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单元素</title>
</head>
<body>
<!--这里是我们要注释的内容-->
<table border="1" width="600" height="450">
<!--表单--表格边框为1，宽为600，高为450>
<tr>
<td>我在1</td><td>我在2</td><td>我在3</td><td>我在4</td><td>我在5</td><td>我在7</td>
</tr>
<!--表行表列，我们现在要写的是五行7列对吧，我们先写出一行7列的代码在复制即可。-->
<tr>
<td>我在1</td><td>我在2</td><td>我在3</td><td>我在4</td><td>我在5</td><td>我在7</td>
</tr>
<!--表行表列，我们现在要写的是五行7列对吧，我们先写出一行7列的代码在复制即可。（第二行）-->
<tr>
<td>我在1</td><td>我在2</td><td>我在3</td><td>我在4</td><td>我在5</td><td>我在7</td>
</tr>
<!--表行表列，我们现在要写的是五行7列对吧，我们先写出一行7列的代码在复制即可。（第三行）-->
<tr>
<td>我在1</td><td>我在2</td><td>我在3</td><td>我在4</td><td>我在5</td><td>我在7</td>
</tr>
<!--表行表列，我们现在要写的是五行7列对吧，我们先写出一行7列的代码在复制即可。（第四行）-->
<tr>
<td>我在1</td><td>我在2</td><td>我在3</td><td>我在4</td><td>我在5</td><td>我在7</td>
</tr>
<!--表行表列，我们现在要写的是五行7列对吧，我们先写出一行7列的代码在复制即可。（第五行）-->
</table>
</body>
</html>
记住我们注释中提到的，需要制作多行多列的时候，我们需要先制作一行多列出来在进行复制行数，即可制作出我们要的效果。我们先一起看看这段代码在网页中的效果图。
可以看到，和我们的预想效果是不是一样。这些代码的显示，主要是为了一个目的，记住我们的重点“制作多行多列的时候，抢先制作我们的一行多列，这样很方便我们制作出表单来，你们也可以看的到楼主也是这样子做的，重点重点，希望大家记住。”
现在我们在进行一个新的知识点，很多我们看到在办公软件中，会有上面和下面表格的一个合并，包括一个左右，或者这样说任意相合并的表格我们怎么在代码中实现，让他合并起来呢，我们一起来看看我们的代码实现（我们需要第五列合并成一列）
我们先需要找到我们要删去的那一列，我在5，这是我们要合并成一列的目标。我们需要把我在5的表列从最下面一直删取到我们的第一行，我们这是总共是删了4行的对吧。这个我们称作跨行删（上下和合并的时候）<td rowspan="4">我在5</td>我们需要第一行的第五列加入我们的属性 跨列删=”要删除几行写几行”
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单元素</title>
</head>
<body>
<!--这里是我们要注释的内容-->
<table border="1" width="600" height="450">
<tr>
<td>我在1</td><td>我在2</td><td>我在3</td><td>我在4</td><td rowspan="4">我在5</td><td>我在7</td>
</tr>
<tr>
<td>我在1</td><td>我在2</td><td>我在3</td><td>我在4</td><td>我在7</td>
</tr>
<tr>
<td>我在1</td><td>我在2</td><td>我在3</td><td>我在4</td><td>我在7</td>
</tr>
<tr>
<td>我在1</td><td>我在2</td><td>我在3</td><td>我在4</td><td>我在7</td>
</tr>
</table>
</body>
</html>
这块有点绕绕的，希望大家认真多看看几遍，我确实说的很详细了，如果还不会的话，下方留言不懂哪里我在跟你详细说清楚。我们在看看网页中真是实现的效果图
合并行以后，我们现在需要合并列，我现在呢相把第三行的234列全部合并成一格子，我们一起来看看代码的实现效果。
我们找到第三行的代码删掉234列的任意两列，在写入我们的跨列删除的属性 <td colspan="3">我在2</td>
跨列删=”值”
我们看看实际的总代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>表单元素</title>
</head>
<body>
<!--这里是我们要注释的内容-->
<table border="1" width="600" height="450">
<tr>
<td>我在1</td><td>我在2</td><td>我在3</td><td>我在4</td><td rowspan="4">我在5</td><td>我在7</td>
</tr>
<tr>
<td>我在1</td><td>我在2</td><td>我在3</td><td>我在4</td><td>我在7</td>
</tr>
<tr>
<td>我在1</td><td colspan="3">我在2</td><td>我在7</td>
</tr>
<tr>
<td>我在1</td><td>我在2</td><td>我在3</td><td>我在4</td><td>我在7</td>
</tr>
</table>
</body>
</html>
我们在来一起看看我们网页中的效果图
是不是跟我们想要的效果是一样的呢。这个时候我们是不是应该总结出一点了呢。只要是需要上下合并的时候就需要找到这一列的最后一个行中的那个列一直往上删，要删掉几行就写几行的属性值即可。当遇到左右合并的时候就需要找到我们要删除的那一行，删掉我们要和合并的列数，保留一个，要合并几列就写几列值，比如我们上面中，我们需要合并四行，我们跨行删的时候就写的4的值，相反我们最后要合并三列的时候，我们跨列删除的时候就写3的值。
太困了有点，不小心把第六行写成了（我在7），希望大家在自己写的时候注意看一下。（现在是北京时间的6月20日00点15分了，希望大家能否多多支持一下，楼主很在用心的写了）
上段话中扯了扯心情，回归我们的正题。上面也不知道大家理解的怎么样，本来想带大家做两个网页的，由于今天可能会确实说的有点点难度，害怕大家难理解，绕起来，我们今天先做第一个网页，顺便一起回顾一下上面两个系列的所讲的代码。
我们今天就写一个，个人介绍的网站，我们先去创作一个页面。创作在我们的站点内。
我们的介绍内容需要，照片，姓名，年龄，性别，年龄，籍贯，名族，自我宣言。这几部分组成，我们就直接写入代码，解释的内容我们也直接写入代码的注释中了就。我们就直接看代码和代码注释就好了。（所有用到的图片我都会加入链接图片，方便大家复制的后可以正常使用）
我们基本的一个自我介绍的网页代码，我们在看看实际图
我们看到最后我们还在头像那里加入了我们的点击头像跳转的链接。代码这次不给大家拿出复制了，因为真的太简单了，大家最终请自己去码一遍了。本来想写第二个网站的，因为涉及的可能会多一些，下面整理一下，我们html中用到的所有标签，这个也是希望大家记住的，只有大家记住在我们下次做的那个网页中才会懂。下面是收集了所有html用到的标签和解释内容，希望大家在写下个网站之前能够多看看。迟早到需要记住的，看大家自己的自觉性了。
html
标记: 浏览器窗口的范围
head
title
标记: 网页的标题
meta
标记: 元数据，对网页进行描述
<meta charse="utf-8">
charset
标记: 字符集
utf-8
标记: 万国码，可以在一个网页中显示所有语言
<meta name="Keywords" content="关键字1,关键字2">
标记: 添加搜索引擎关键字的代码
name
标记: 名称
keywords
标记: 关键字
content
标记: 内容
<meta name="Description" content="描述内容">
标记: 添加网页的说明及描述
Description
标记: 说明描述
link
标记: 链接外部文件
href
标记: 给出脚本文件路径文职
type="text/css"
标记: 类型为文本类型
rel="stylesheet"
标记: 联系为样式表
文件头
(title, meta, link)
body
标记: 网页的内容范围
marquee
标记: 移动对象
direction
标记: 移动方向
up
标记: 上
down
标记: 下
left
标记: 左
right
标记: 右
scrolldelay
标记: 滚动延迟（速度），单位为毫秒
video
标记: 插入视频（只支持mp4）
src
标记: 视屏文件的路径位置
controls
标记: 视屏控制器
h1~h6
p
段落
br
换行
b
strong
i
em
u
下划线
s
删除线
ul(ol)
标记: 无序（有序列表）
li
标记: 列表属性
type属性
标记: 类型
start
标记: 起始值
dl
标记: 层级列表
dt
标记: 列表标题
dd
标记: 列表选项
a
img
src
标记: 图片的路径位置
alt
标记: 图片说明
table
标记: 表格
tr
标记: 表行
td
标记: 表列（单元格）
colspan
标记: 跨列（左右合并，随便删，保留一个单元格）
rowspan
标记: 跨行（上下合并，保留最上面的一个单元格）
table属性
border
标记: 边框粗细
width
标记: 宽度
height
标记: 高度
align
标记: 水平对齐
left
标记: 左
right
标记: 右
center
标记: 居中
form
标记: 表单域
input
标记: 输入
type
标记: 类型
text
标记: 文本框
password
标记: 密码框
emali
标记: 邮件框
radio
标记: 单选按钮（name值必须相同）
checkbox
标记: 复选框
file
标记: 文件域
button
标记: 表单按钮
submit
标记: 提交按钮
reset
标记: 重置按钮
placeholder
标记: 提示文字
maxlength
标记: 最大字符数
value
标记: 默认值
name
标记: 命名
checked
标记: 以选中状态
select
标记: 下拉菜单
option
标记: 下拉菜单选项
textarea
标记: 文字区域
iframe
标记: 内联框架（网页画中画效果）
src
标记: 链接网页路径位置
width
标记: 宽度
height
标记: 高度
framborder
标记: 框架边框
0
标记: 没有边框
1
标记: 有边框
scrolling
标记: 框架滚动条
auto
标记: 自动
no
标记: 始终没有滚动条
yes
标记: 始终有滚动条
frameset
标记: 拆分框架
frame
标记: 框架页
div
标记: 布局标签
span
标记: 范围标签
文本
(h1~h6, p, br, b, strong, i, em, u, s, ul(ol), dl, )
表格
(table)
制作多行多列的表格，先制作一行多列，在复制就行
表单
(form)
布局
(div, span)
链接
(a)
图像
(img)
框架
(iframe, frameset)
加粗
(b, strong)
倾斜
(i, em)
蓝色为单标签
<!doctype html>
标记: 文档类型声明，使用HTML5.0版本
body的属性
bgcolor
标记: 背景颜色
text
标记: 文字颜色
background
标记: 背景图片（默认平铺、并且会盖住背景颜色）
标签我都已经整理出了，就剩大家去看看，飒飒。今天这个系列重点主要是表单元素的理解，然后大家在练习一下我们之前两个系列所讲的内容做一个简单的个人介绍网站出来。下棋我们就直接开始讲怎么做一个原始网站的一个注册页面出来了。下次系列见（如果现实中不会太忙的话，我会尽量出的，没出的时候希望多看看我整理的那些标签哦）
最后说一下我们学习的是一个前端的制作，前端设计。希望大家清楚。
教程讲的不错，期待楼主的下期教程 写了两次了，编辑了四次，论坛今天用的有点不顺利呀{:301_995:} HTML的话，到 w3school 或者菜鸟教程，看看再有问题在百度百度就行吧。。 看到这堆代码就想起苦逼的学校生涯 楼主辛苦了，好东西值得分享 的确表弟 哈哈哈 楼主辛苦了 温馨提示,table叫表格,form才叫表单 不错哎加油