web学习-html(3)

1.表格

<table> </table>标签表示表格。其中属性 wide表示表格宽度 height表示表格高度 bronder设置表格边界宽度 cellspacing设置表格单元格间距  align设置表格对齐方式
     <tr> </tr>标签设置行标签        
       <th></th>表示表头标签
     <td></td>表示单元格标签  align设置单元格文本对齐方式 b表示加粗标签
需求1.做一个带表头的，三行，三列的表格，并显示边框
需求2.修改表格的宽度，高度，表格的对齐方式，单元格间距。

<table border="2" cellspacing="0" width="8" height="10" align="center">

	<tr>
		<th>1.1</th>
		<th>1.2</th>
		<th>1.3</th>
	</tr>
	<tr>
		<td>2.1</td>
		<td>2.2</td>
		<td>2.3</td>
	</tr>
	<tr>
		<td>3.1</td>
		<td>3.2</td>
		<td>3.3</td>
	</tr>
</table>

1.1设置表格跨行跨列

在<td/>标签中colspan属性设置跨列 rowspan属性设置跨行

<table border="1">

	<tr>
		<th colspan="2">1.1</th>
		<th>1.2</th>
		<th>1.3</th>
		<th>1.4</th>
	</tr>
	<tr>
		<td rowspan="2">2.1</td>
		<td>2.2</td>
		<td>2.3</td>
		<td>2.4</td>
		<td>2.5</td>
	</tr>
	<tr>
		<td>3.1</td>
		<td>3.2</td>
		<td>3.3</td>
		<td>3.4</td>
	</tr>
	<tr>
		<td>4.1</td>
		<td>4.2</td>
		<td>4.3</td>
		<td rowspan="2" colspan="2">4.4</td>

	</tr>
	<tr>
		<td>5.1</td>
		<td>5.2</td>
		<td>5.3</td>
	
	</tr>
</table>

2.内嵌窗口

iframe标签可以在页面上开辟一个小区域显示一个单独的页面
   iframe标签和a标签组合使用的步骤：
   1.在iframe标签中使用name属性定义一个名称
   2.在a标签的target属性上设置iframe的name的属性值

<iframe src="3.标题标签.html" width="500" height="500" name="asd"></iframe>
<bl></bl>

<ul>
    <li><a href="1.font标签.html" target="asd">标签5</a></li>
</ul>

3.表单

form标签就是表单

        input type=text            是文本输入框 value设置默认显示内容

        input  type=password   是密码输入框 value设置默认显

        input   type=radio          是单选框 nam属性可以对其进行分组 checked="checked"表示默认选中

        input    type=reset         是重置按钮  value属性修改按钮上的文本

        input     type=button   是提交按钮 value属性修改按钮上的文本

        input    type=file      是文件上传域

        input   type=hidden 是隐藏域

        select 标签是下拉列表框

                        option  标签是下拉列表中的选线 

        textarea 表示多行文本输入框

                        rowa设置可以显示几行

                        cols设置每行可以显示几个字符

需求：创建一个个人信息注册的表单界面，包含用户名，密码，确认密码，性别（单选），兴趣爱好（多选），国籍（下拉列表），隐藏域，自我评价（多行文本域），重置，提交

<form>
    <table align="center">
        <tr>
            <td>用户名:</td>
            <td>
                <input type="text">
            </td>
        </tr>
        <tr>
            <td>密码:</td>
            <td>
                <input type="password">
            </td>
        </tr>
        <tr>
            <td>确认密码:</td>
            <td>
                <input type="password">
            </td>
        </tr>
        <tr>
            <td>性别:</td>
            <td>
                <input type="radio" name="sex">男 <input type="radio" name="sex">女
            </td>
        </tr>
        <tr>
            <td>兴趣爱好:</td>
            <td>
                <input type="checkbox">Java <input type="checkbox">C <input type="checkbox">Python
            </td>
        </tr>
        <tr>
            <td>国籍:</td>
            <td>
                <select>
                    <option>--请选择国籍--</option>
                    <option>中国</option>
                    <option>美国</option>
                    <option>德国</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我评价:</td>
            <td>
                <textarea rows="10" cols="20">请输入</textarea>
            </td>
        </tr>
        <tr>
            <td><input type="reset"></td>
            <td align="center"/><input type="submit" >
        </tr>

    </table>

</form>

3.1表单提交

表单提交的时候，数据没有发送给服务器的三种情况: 1.表单项没有name属性值 
2.单选、复选(下拉列表中的option标签)都需要添加value属性，以便发送给服务器 
3.表单项不在提交的form标签中 

 GET请求的特点是: 1.浏览器地址栏中的地址是:action属性[+?+请求参数] 请求参数的格式是:name=value&namemvalue 2.不安全3.它有数据长度的限制

 POST请求的特点是 1.浏览器地址栏中只有action属性值  2.相对于GET请求要安全 

4.其他标签

div标签 默认独占一行

span标签长度是封装数据的长度

p段落标签 默认会在段落的上方或下方各空出一行