对表格和表单的介绍，标签嵌套原则。
上⼀篇稍微说了⼀下HTML和标签，这⼀篇进⾏⼀次简单的总结，并且初识css。
⼀。⾸先说⼀下表格标签即<table></table>标签
①.
<table>...</table>：整个标签是以<table>标记开始、以</table>标记结束。
<tr>...</tr>：表格的⾏，所以⼀个表格中有⼏个<tr>就表⽰有⼏⾏。
<td>...</td>：表格的单元格，⼀⾏中可以包含多个<td>...</td>。
表格细分为头部<thead>...</thead>,⾝体<tbody>...<tbody>，尾部<tfoot>...</tfoot>。
注意：在table表格没有添加css样式之前，原⽣的表格在浏览器中显⽰都是没有表格线的。
②.
表格可以添加标题和摘要：
摘要：摘要的内容是不会出现在浏览器页⾯中的，他的作⽤只是增加表格的可读性(语义化)，使得搜索引擎更好读懂表格的内容。
<table summary="表格简介⽂本">
标题：⽤于描述表格内容，标题的显⽰位置是在表格的上⽅
<table>
<caption>标题⽂本</caption>
<tr>
<td>...</td>
textarea中cols表示...
</tr>
....
</table>
后来对表格的结构进⾏了简化，去掉了头部和尾部，只保留了⾝体部分。
在有的⽹上对<tbody>...</tbody>有过这样的描述：当表格内容⾮常多时，表格会下载⼀点显⽰。但是如果加上<tbody>标签后会等表格全部内容加载完成后才显⽰。
详细的完整结构位:
<table>
<thead>
<tr>
<td>...</td>
....
</tr>
....
</thead>
<tbody>
<tr>
<td>...</td>
....
</tr>
....
</tbody>
<tfoot>
<tr>
<td>...</td>
...
</tr>
.....
</tfoot>
</table>
后来因为该种结构实在是太过于复杂。所以对表格的结构进⾏了简化。简化后的表格结构为：
<table>
<tr>
<td>...</td>
...
</tr>
...
</table>
③.table标签的属性：
border:0 边框
cellspacing:0 单元格与单元格之间的间距
cellpadding:0 内容到边框的距离
width:200      表格的宽度
align:left/right/center 表格的对齐⽅式(⽔平)
bordercolor 边框的颜⾊
bgcolor 背景颜⾊
background 背景图像
tr的属性：
align ⽔平对齐⽅式
valign 垂直对齐⽅式
bgcolor 背景颜⾊
background 背景图⽚
td的属性：
width 宽度
height
align
valign
bgcolor
background
④.表格的⾼级应⽤：
合并单元格：
⽔平合并：colspan="数字"
垂直合并：rowspan="数字"
表格的嵌套
表格嵌套布局：该布局⽅式有些⿇烦，所以这样的布局⽅式现在⼏乎不会⽤了。注意：表格布局基本不⽤但是表格的⽤处还是很⼤的。
⼆。另外⼀个重要的标签：表单标签
表单的作⽤：负责收集数据
form标签：
form的属性：
method="get/post"
action="提交的路径"
target="_blank/_self"
name=" "
简单介绍⼀下get和post的区别：
get:
1.通过地址栏提交(我们可以在地址栏看到提交的内容)
2.不安全
3.数据量⼩
post:
2.数据量⽐较⼤
注意：这只是最简单的区别。复杂的可以去google。
form的元素：
⽂本框：<input type="text" name=" " value=" "/>
密码框：<input type="possword" name=" " value=" "/>
单选按钮：<input type="radio" name=" " value=" "/>
复选按钮：<input type="checkbox" name=" " value=" "/>
⽂件域：<input type="file" name=" " value=" "/>
下拉框：<select  name=" ">
<option value=" ">请选择</option>
.....
</select>
⽂本域：(⽂本框的放⼤版)
<textarea cols="数字" rows="数字" name=" ">内容</textarea>提交按钮：<input type="submit" value="提交"/>
重置按钮：<input type="reset" value="重置"/>
普通按钮:<input type="button" value=" "/>
图像域按钮:<input type="image" src="图⽚的路径"/>
按钮:<button>⽂本内容</button>
单选按钮和复选按钮的属性:checked
下拉框的属性：selected
⽂本框的显⽰宽度属性：size
下拉框⾥option的显⽰个数属性：size
⽂本框最多输⼊字数属性:maxlength
三。标签的分类
块级元素(⼤标签/⼤盒⼦)：
1.可以嵌套块级元素和⾏内元素
2.是在不同⾏显⽰的
3.具有宽和⾼的属性
常见的⼤盒⼦：
div, table, ul, li, ol, dl, dd, dt, p, form, h1-h6
⾏内元素(内联元素⼩标签、⼩盒⼦)
1.不能嵌套块级元素，但是可以嵌套⾏内元素
2.在同⼀⾏显⽰
3.没有宽和⾼的属性
常见的⼩盒⼦：
span, a, strong, b, i, em
⾏内块级元素:
1.在同⼀⾏显⽰
常见的元素：
img， input, textarea, select
五.嵌套的原则
1.不能交叉嵌套
2.块级元素可以嵌套⾏内元素，⾏内元素不能嵌套块级元素
3.h1-h6不能嵌套块级元素
4.p不能嵌套块级元素

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。