一.表格
1.表格的语法格式为**
<body>
<table><!--表格主体-->
<caption></caption><!--表头-->
<tr><!--表示行-->
<th></th><!--表头标签-->
<td></td><!--表格标签-->
</tr>
</table>
</body>
2.单元格合并
- 单元格合并分为两种 colspan跨列合并,rowspan跨行合并
- 合并步骤为,先看是跨行还是跨列,根据先上后下,先左后右的原则,找到目标单元格,再选择使用跨列colspan合并还是rowspan跨行合并
3.拓展
<thead></thead>
:用于定义表格的头部。用来放标题之类的东西。<thead>
内部必须拥有<tr>
标签!<tbody></tbody>
:用于定义表格的主体。放数据本体 。<tfoot></tfoot>
放表格的脚注之类。- 以上标签都是放到table标签中。
表单
1.input的type属性是指它的网页表现形式
语法格式为
用户名<input type="text" value="请输入用户名" name="username"/>
密码<input type="password" value="请输入密码" name="userpassword"/>
input属性
属性 | 说明 | 作用 |
---|---|---|
type | 表单类型 | 用来指定不同的控件类型 |
value | 表单值 | 表单里面默认显示的文本 |
name | 表单名字 | 页面中的表单很多,name主要作用就是用于区别不同的表单。 |
checked | 默认选中 | 表示那个单选或者复选按钮一开始就被选中了 |
2.lable标签用于绑定表单中元素,当点击lable时绑定的元素就会获得输入焦点
语法格式为
<lable for="usename">用户名</lable>
<input type="text" value="请输入用户名" id="username" name="username">
3.select下拉菜单
select有多个选项让用户选择,为了节约空间,我们可以使用select控件定义下拉列表.
语法格式为
<select>
<opation>北京</opation>
<opation>上海</opation>
</select>
注意:
1. select 中至少包含一对 option
2. 在option 中定义selected =" selected "时,当前项即为默认选中项。
4.form表单域
属性 | 属性值 | 作用 |
---|---|---|
action | url地址 | 用于指定接收并处理表单数据的服务器程序的url地址。 |
method | get/post | 用于设置表单数据的提交方式,其取值为get或post。 |
name | 名称 | 用于指定表单的名称,以区分同一个页面中的多个表单。 |
语法格式为
<form action="表单提交地址" name="表单的名字" methon="用什么方式提交">
</form>
5.列表
1.列表分为无序列表,有序列表,自定义列表三种
2.列表一般用于布局,而表格则是用来显示数据的
1.ul>li无序列表
1.无序列表的各个列表项之间没有顺序级别之分,是并列的。
2.值得注意的时ul里面只能嵌套li,而li里面则可以嵌套很多元素,li就像一个小盒子一样,可以容纳万物,它会带有他自己的样式,需要在css中进行设置
语法格式为
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
2.有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,特性基本与ul一致
语法格式为
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号。
语法格式为
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
</dl>
标签名 | 定义 | 说明 |
---|---|---|
<ul></ul> | 无序标签 | 里面只能包含li 没有顺序,我们以后布局中最常用的列表 |
<ol></ol> | 有序标签 | 里面只能包含li 有顺序, 使用情况较少 |
<dl></dl> | 自定义列表 | 里面有2个兄弟, dt 和 dd |