星星博客 »  > 

HTML表格和表单,列表

一.表格
1.表格的语法格式为**

<body>
	<table><!--表格主体-->
		<caption></caption><!--表头-->
		<tr><!--表示行-->
			<th></th><!--表头标签-->
			<td></td><!--表格标签-->
		</tr>
	</table>
</body>

2.单元格合并

  1. 单元格合并分为两种 colspan跨列合并,rowspan跨行合并
  2. 合并步骤为,先看是跨行还是跨列,根据先上后下,先左后右的原则,找到目标单元格,再选择使用跨列colspan合并还是rowspan跨行合并

3.拓展

  1. <thead></thead>:用于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有 <tr> 标签!
  2. <tbody></tbody>:用于定义表格的主体。放数据本体 。
  3. <tfoot></tfoot>放表格的脚注之类。
  4. 以上标签都是放到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表单域

属性属性值作用
actionurl地址用于指定接收并处理表单数据的服务器程序的url地址。
methodget/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

相关文章