表格 表单

表格

作用：展示数据，不是布局页面

table标签：定义表格

（caption:定义表格标题，自带居中加粗，紧跟在table标签后，每个 table只能规定一个caption）

表格标题

tr标签 ：定义表格中的行 “table row（表格行）”的缩写

td标签：定义表格中的单元格 “table data（表格数据）”的缩写

th标签：定义表头单元格（居中加粗显示）位于表格的第一行或第一列， table head的缩写

table标签的属性：

​ align：left, center, right 对齐方式

​ border：边框

​ cellpadding：单元格边框与内容的距离

​ cellspacing：单元格和单元格之间的距离

区分表结构

合并单元格

1.确定跨行，还是跨列

2.确定 目标单元格，跨行：rowspan=“合并单元格个数”

​ 跨列：colspan =“合并单元格个数”

3.删除多余单元格

 <table border="1px" width="100px" height="100px" cellspacing="0px">
        <tr>
            <td></td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
  </table>

​

列表标签：

无序列表（重点） 块元素

ul是unordered lists的缩写 (无序列表)

li是list item的缩写 （列表项目）

<!--ul标签中只能包含li标签-->
<ul> 	
    <!--li标签可以容纳所有元素，经常包含img和a标签，这里的li是没有前后顺序的-->
    <li>111</li>
</ul>

有序列表 块元素

ol是ordered lists的缩写（有序列表）

<!--ol标签中只能包含li标签-->
<ol>
	<!--li标签可以容纳所有元素，这里的li标签有前后顺序的-->
    <li>222</li>
</ol>

自定义列表（重点）

dl是definition lists的英文缩写 (自定义列表)

dt是definition term的缩写 (自定义列表组)

dd是definition description的缩写（自定义列表描述）

<!--dl标签里只能包含dt和dd标签-->
<dl>
    <!--dt标签：需要被解释的信息-->
    <dt>名词</dt>
    <!--dd标签：描述和解释dt的信息-->
    <dd>名词解释</dd>
</dl>

表单

作用：收集用户信息

表单标签分为三个部分：表单域；表单控件（表单元素）；提示信息。

表单域：包含表单元素的区域，提交区域内的表单元素给后台服务器。

<form action="url地址" method="提交方法" name="名字">

method属性：

提交方法常用的有两种：get（）方法（参数能在地址栏上看到）

​ post()方法

表单控件：

1.input输入表单元素

type属性：

<!--输入文本框-->
用户：<input type="text" name="uname" value="请输入用户名">
<!--输入密码框-->
密码：<input type="password" nmae="pasw">
<!--单选框-->
性别：<input type="radio" name="gender" value="nan">男
性别：<input type="radio" name="gender" value="nv">女
<!--要想实现单选框只选一个，需要添加name属性-->
<input type="radio" name="sex">
<!--复选框-->
<input type="checkbox" name="likes" value="apple">苹果
<input type="checkbox" name="likes" value="orange">橙子
<!--提交按钮:把表单元素值提交给服务器-->
<input type="submit">
<!--重置按钮-->
<input type="reset">
<!--普通按钮，与javascript搭配使用-->
<input type="button">
<!--上传文件-->
<input type="file">
<!--隐藏域-->
<input type="hidden">
<!--图片按钮-->
<input type="image" src="图片路径">

其他属性：

name：表单元素名（单选框和复选框要有相同的name值）

value：规定input元素的值，是提交给后台人员的数据。

checked属性：默认选中状态（只用于单选框和复选框）

<input type="radio" name="#" checked="checked">

maxlength：规定输入字符的最大长度

label: 绑定一个表单元素，当点击内的文本时，浏览器会自动将光标选择到对应的表单元素上

方法一：

<input type="radio" name="likes" value="appole" id="app">
        <label for="app">苹果</label>
        <input type="radio" name="likes" value="orange" id="orange">
        <label for="orange">橙子</label>

方法二：

<label for="username">
            用户名： <input type="text" id="username">
</label>

注：for属性值与id属性值相同

2.select下拉表单元素

<selection name="">
    <option>选项1</option>
    <option>选项2</option>
</selection>

​ 如果想要默认选中，在中添加selected=“selected”.

3.textarea文本域元素

文本域：可以输入多行文字，常见于留言板，评论

<textarea name="" cols="一行多少字" rows="有几行">初始文字</textarea>