1、表格:为了展示数据
<table>....</table>用于定义表格标签
<tr>...</tr>用于定义表格中的行,必须嵌套到table中
<td>....</td>用于定义表格中的列,必须嵌套到tr中
注意:table,tr,td之间都要缩进一个单元格,这是为了代码的规范化
2、表格属性
border:表示表格边框
width,height,表示表格的宽度和高度(像素值,一般都是几百)
align:表格对齐的方式,left(居左对齐),center(居中对齐)表格标题标签,right(居右对齐)
cellspacing:控制单元格与单元格之间的距离,一般情况下是0
cellpadding:单元格内容与单元格边框的距离
3、表头单元格标签
<th>...</th>
一般表头单元格位于表格的第一行或者第一列,并且使文本加粗居中
4、表格标题标签
<caption>..</caption>::必须写在table里面,跟随表格一起变动
<caption>..</caption>:只有在表格里才有意义,在外面就没意义了
5、合并单元格
跨行合并:rowspan
跨列合并:colspan
合并顺序:从上往下,从左往右
三部曲:
(1)确定是跨行还是跨列合并
(2)根据先上后下,先左后右的顺序,找到目标单元格
(3)删除多余的单元格
6、<thead>..</thead>:表格的头部,里面必须要有<tr>
<tbody>...</tbody>:表格的主题
<tfoot>..</tfoot>:表格的脚部
这三个都要自己定义更好地分清表格的结构
7、列表:用来布局,自由组合度更高
(1)无序列表:用得较多,最常用
<ul>
<li>..</li>
</ul>
<ul>里面只能嵌套<li>,其他的都不能写;<li>里面随便放啥
(2)有序列表:
<ol>
<li>...</li>
</ol>
(3)自定义列表:用得较多
<dl>
<dt>..</dt>
<dd>..</dd>
</dl>
<dd>是围绕<dt>说明的,但是是并列关系,一般dt只有一个,但是dd可以有一至多个
注意:要清楚什么时候用无序列表,什么时候用自定义列表
8、表单:为了收集用户信息,每个表单必须要写name值
(1)input 标签:是个单标签
input标签里面最重要的属性是type属性
value属性是表单要显示的文字
name属性是给每个表单取个名字,为了给表单区分开,主要是后台使用的,这个也是必须要写的
type=“radio"是单选按钮,但是如果不写name属性,这个单选按钮就不起作用,反正只能选择一个送到后台,因此他们的name属性要一样
type=“checkbox"是复选按钮,可以选择多个,他们的name属性也必须要一样,
checked=“checked”:属性表示默认被选上,页面一出来就被选上了,不用你再去选了(一般用于单选按钮或复选按钮)
按钮组:
type=“button”:普通按钮,必须要写value值
type=“submit”:提交按钮,value值可写可不写
type=“reset”:重置表单域
(2)label标签:
第一种用法:label标签直接包含input标签
<label>.<input />...</label>
第二种用法:通过锚点的用法,内容在label里面,表单在label外面。
通过for 和id,在label里面用for,在input里面用id,注意,for和id要一致
9、文本域:可以写多行
<textarea>...</textarea>
10、select:下拉列表
<select>
<option>....</option>
</select>
selected="selected":表示默认被选上
缺点:在不同浏览器里面显示不一样,而且很难修改,因此实际中用得比较少
10、表单域
form:手机的用户信息传递给服务器
<form action="url地址 " method="提交方式 " name="表单的名称>
各种表单控件
</form>
action:将接收的表单数据提交到某个服务器中的地址
method:get/post
name:区别不同的表单域