文章目录

表表格-table表格的基本标签表格的基本属性table属性tr属性th/td属性 表单-form表单组件表单属性 内联框架基本语法内联框架配合超链接traget 结束-持续更新，敬请期待！！！！！

表

表格-table

表格的基本标签

1.表格的列标签：tr标签；

2.行标签；uan

（1）标题标签：th标签 ，内容加粗居中。

（2）单元格标签：td标签。

3.表格主题标签：caption标签

下面是一个两行三列的表格：

<!-- 表格 --> <table> <!-- 标题 --> <caption>学生名单</caption> <!-- 第一行 --> <tr> <!-- 第一列 --> <th>姓名</th> <!-- 第二列 --> <th>班级</th> <!-- 第三列 --> <th>学号</th> </tr> <!-- 第二行 --> <tr> <td>张三</td> <td>五班</td> <td>123</td> </tr> </table>

表格的基本属性

table属性

1.border：边线粗细。 2.bordercolor：边线颜色。 3.width：表格宽度。 4.height：表格高度。 5.align：水平对齐方式，取值：left、center、right 6.background-color：背景颜色 7.background：背景颜色或图片 8.rules：合并所有单元格边线。取值：all 9.cellpadding：内填充距离(单元格边线到内容间的距离) 10.cellspacing：单元格间距(两个单元格边线之间的距离)

tr属性

1.height：行高。 2.background-color：一行的背景颜色。 3.background：背景图片。 4.align:水平对齐方式。 5.vertical-align:垂直对齐方式。

th/td属性

1.width：表格宽度。 2.height：表格高度。 3.align：水平对齐方式，取值：left、center、right 4.colspan:合并行单元格。取值：自要合并的单元格向后数几个就填几 5.rowspan:合并列单元格。取值：自要合并的单元格向下数几个就填几

下面是一段表格的示例代码，表格名称为“金庸群侠传”：

<table border="2" rules="all" height="70" align="center"> <caption><h3>金庸群侠传</h3></caption> <tr bgcolor="yellow"> <th width="100" rowspan="2">江湖</th> <th width="50" rowspan="2">人物</th> <th width="50" rowspan="2">年龄</th> <th width="100" colspan="2">出身</th> <th width="100" colspan="2">武功</th> </tr> <tr bgcolor="yellow"> <th width="100" >朝代</th> <th width="100">门派</th> <th width="100" >心法</th> <th width="100">武技</th> </tr> <!-- 天龙 --> <tr align="center" valign="center"> <td bgcolor="yellowgreen" rowspan="4">天龙江湖</td> <td>扫地僧</td> <td>不详</td> <td>北宋</td> <td>少林</td> <td>易筋经</td> <td>三尺气墙</td> </tr> <tr align="center" valign="center"> <!-- <td bgcolor="red" rowspan="4">天龙江湖</td> --> <td>萧峰</td> <td>33</td> <td>契丹(辽国)</td> <td>丐帮</td> <td>少林内功</td> <td>降龙十八掌</td> </tr> <tr align="center" valign="center"> <!-- <td bgcolor="red" rowspan="4">天龙江湖</td> --> <td>段誉</td> <td>23</td> <td>大理</td> <td>大理寺</td> <td>北冥神功</td> <td>六脉神剑</td> </tr> <tr align="center" valign="center"> <!-- <td bgcolor="red" rowspan="4">天龙江湖</td> --> <td>虚竹</td> <td>22</td> <td>北宋</td> <td>少林</td> <td>北冥神功</td> <td>天山六阳功</td> </tr> <!-- 射雕 --> <tr align="center" valign="center"> <td bgcolor="red" rowspan="3">射雕江湖</td> <td>黄药师</td> <td>57</td> <td>南宋</td> <td>桃花岛</td> <td>不详</td> <td>碧海潮声曲</td> </tr> <tr align="center" valign="center"> <!-- <td bgcolor="red" rowspan="4">天龙江湖</td> --> <td>郭靖</td> <td>29</td> <td>南宋</td> <td>襄阳</td> <td>九阴真经</td> <td>降龙十八掌</td> </tr> <tr align="center" valign="center"> <!-- <td bgcolor="red" rowspan="4">天龙江湖</td> --> <td>黄蓉</td> <td>26</td> <td>北宋</td> <td>丐帮</td> <td>九阴真经</td> <td>打狗棒法</td> </tr> <!-- 倚天江湖 --> <tr align="center" valign="center"> <td bgcolor="deepskyblue" rowspan="2">倚天江湖</td> <td>张三丰</td> <td>120</td> <td>元明</td> <td>武当</td> <td>武当九阳功</td> <td>太极</td> </tr> <tr align="center" valign="center"> <td>张无忌</td> <td>23</td> <td>元明</td> <td>明教</td> <td>九阳神功</td> <td>乾坤大挪移</td> </tr> </table>

表单-form

从客户端向服务器传输信息，表单中有许多可以输入或选择的组件，用户可以在表单中输入信息从而传给服务器。

form标签表示一个表单，不显示。

form标签有两个属性 action="向服务器发送的地址" method="向服务器发送数据的方式" get/post

表单组件

input (获取信息) type(类型)

type=" " 1.text：出现一个文本框，可用来获取用户名或者账号。 2.password：密码框，输入不显示。 3.radio：单选框。 4.checkbox：复选框。 5.file：选择文件。

select option：下拉栏。

textarea：多行文本域，用来输入大量的文字，一般不超过255个字节。属性：clos宽 rows高

按钮 type=""

1.sumit：提交按钮，向服务器开始传输。 2.reset：重置按钮，清空表单中已经填好的内容。 3.button：普通按钮，用于绑定事件。

表单属性

在表单传输到服务器的过程中，大部分数据都会以键值对的方式传送，这就会产生相应的一些属性，如name和value，需注意多行文本域没有value，因为它的标签体就是value，而我们需要修饰和找到表单中的一些内容也会需要属性。

1.id：表单中的每一行都唯一，可以定位到表单中单独的一行。 2.name：向服务器传送时的“键”。 3.value：像服务传送时的“值”。 4.placehoder="xxx"：输入内容后消失。 5.readonly：只读属性。 6.disable：禁用属性。

下面是我制作的一个登录表单，和上面的金庸群侠传表格在一起可以进行跳转。

<!-- form标签（表单标签） 属性 name：表单名称。 methon 表单数据的发送方式 action 指定表单数据的处理程序。 enctype 表单数据的一个加密（编码方式），只能再method=post的表单中 --> <form action="金庸群侠传.html" method="get"> <!-- label标签，指向for所指向的标签 --> <label for="user">用户名：</label> <input type="text" id="user" name="user_name" value="" placeholder="请输入用户名" /><br /> <label for="number"> 账号：</label> <input type="text" id="number" name="user_number" value="" placeholder="请输入账号" /><br /> <label for="password">密码：</label> <input type="password" id="password" name="user_pwd" value="" placeholder="请输入密码" /><br /> <!-- type="radio"表示单选框 checked="checked"表示默认选中 --> <label for="sex">性别：</label> <input type="radio" id="sex" name="user_sex" value="#" checked="checked" />男 <input type="radio" id="sex" name="user_sex" value="#" />女<br /> <!-- type="checkbox" 表示多选框 --> <label for="team">所属组织：</label> <input type="checkbox" id="team" name="user_team" checked="checked" />战略支援部队 <input type="checkbox" id="team" name="user_team" />快速反应部队 <input type="checkbox" id="team" name="user_team" />后勤保障部队 <input type="checkbox" id="team" name="user_team" />星系毁灭部队<br /> <!-- select标签 表示下拉框 属性 name：元素名称--> <label for="Lv">权限等级</label> <select id="Lv" name="user_Lv"> <!-- option标记属性 value：元素值 selected：是否默认选中--> <option value="">...请选择</option> <option value="1">一级成员</option> <option value="2">二级骨干</option> <option value="3">三级经理</option> <option value="4">四级董事</option> <option value="5">五级社长</option> </select><br /> <!-- 文本区域：存放大段文字 属性 name：元素名称 value：元素的值，不可直接在源码中添加 cols：文本框宽 rows：文本框的高：几行几行算 style='resize:none' 是文本框不可被拖动 --> 请输入留言：<br /> <textarea name="text" value="" cols="40" rows="4" placeholder="...请输入..."></textarea><br /> <!-- <type="file" 属性="属性值"> 上传文件域 --> <!-- type="submit" 提交登录按钮 type="reset" 重置按钮 --> <input type="submit" name="log" value="登录" /> <input type="reset" name="res" value="重置" /> </form>

内联框架

内联框架可以在一个窗口中嵌入一个子窗口，从而在子窗口中引入一个外部的页面。

基本语法

<iframe src="#" name="#" width="#" height="#" frameborder="0/1" ></iframe> 1.src：窗口内部窗口的页面导入地址。 2.name：内部窗口的名字。 3.height：内部窗口高度。 4.frameborder：框架边框。取值：0无 1有

内联框架配合超链接traget

我们在上面的html基本语法中给超链接留了悬念，因为超链接的剩下来三个属性需要配和内联框架才能更好的说清楚。

1.target="_seach":这是在内联框架内部打开，一般需要填入内联框架的name。 2.target="_parent"：如果我们在一个窗口A中打开一个内部窗口B，而在内部窗口B中使用这个属性，那么新的页面会在窗口A中出现。 3.target="_top"：如果我们在一个窗口A中打开一个内部窗口B，在窗口B中又打开一个内部窗口C,而当我们在窗口c中使用这个属性，那么新的页面会在窗口A中出现。

结束-持续更新，敬请期待！！！！！

HTML的基本内容到这里就结束了，但是熟悉的人都知道，我这里有很多的属性都没有讲到，只是把HTML中必须要的东西讲到了，事实上，那些没有讲到的样式部分我都会在接下来的CSS部分进行讲解。

我们必须认识到关于前端部分的学习是好几种语言的学习，我们必须要把精力侧重在不同语言制作前端的强项上面，就想HTML就是制作网页内容的，而CSS才是修饰网页样式的。