笔记3--html基础知识

4.12 文件选择按钮框

比如选择你的头像：

<input type="file"accept="image/*">

<!--通配符*代表所有图片类型，比如gif等-->

<input type="file"accept="image/jpeg">

比如简历：

<input type="file"accept="application/pdf">

<input type="file"accept="a.doc">

 

accept属性指定可选择的文件类型。

上传文件需指定对应表单的属性。

<form enctype="multipart/form-data">

 

4.13 下拉列表

使用下拉列表的好处：

(1)节省我们的页面空间，使得页面更加简洁

(2)方便输入

(3)规范输入

<form action="#"method="get">
你来自：
<select name="province">
    <option value="33">浙江</option>
    <option value="41">河南</option>
    <option value="32">江苏</option>
    <option value="36">江西</option>
    </select>
<input type="submit"value="提交>
</form>

<select>标签定义了一个下拉列表

<option>标签定义了一下拉列表的一个选项。

<select>标签的name属性定义了提交的参数名字

<option>标签的内容定义了该选项显示的文本，而value属性定义了选择该选项时传递的参数值。

比如选择浙江：

 

那提交的参数就如下：

 

代码：

<select name="color"multiple>
    <option value="red">红色</option>
    <option value="blue">蓝色</option>
    <option value="green">原谅色</option>
    <option value="yellow">黄色</option>
</select>
<input type="submit"value="提交">

设置multiple属性来实现，ctrl+单机选择多个：

 

提交的参数：

 

<select>标签的size属性定义了下拉列表框显示的选项个数，当小于实际选项个数时，会自动增加一个滚动条。

格式化的快捷键：ctrl+alt+L

 

你打算购买小汽车的品牌：
<select>
    <optgroup label="国产车">
        <option value="红旗">红旗</option>
        <option value="byd">比亚迪</option>
        <option value="奇瑞">奇瑞</option>
    </optgroup>
    <optgroup label="德系车">
        <option value="benz">奔驰</option>
        <option value="BMW">宝马</option>
        <option value="大众">大众</option>
    </optgroup>
    <optgroup label="日系车"disabled>
        <option value="本田">丰田</option>
        <option value="本田">本田</option>
        <option value="三菱">三菱</option>
    </optgroup>
</select>
<input type="submit"value="提交">

<optgroup>的label属性定义分组显示的文字，disabled设置该分组不能用。

 

4.14<textarea>

<textarea> 标签主要是为了方便用户输入较多文字信息，row属性控制指定文本输入框的行数，cols属性指定文本输入框的列数。

    <textarea  rows="10"cols="30"readonly>
</textarea

 

4.15<fieldset>

当信息较多时，可以考虑按照信息内容进行分组，达到表达清晰的目的。

<fieldset>可将表单内的相关元素分组，分组后每组信息默认有一个边框，

当一组表单元素放到 <fieldset> 标签内时，浏览器会以特殊方式来显示它们。

 其中<legend>标签为 fieldset 元素定义标题。

<form action="result.html"method="get">
    <fieldset>
        <legend>个人信息</legend>
        姓名：<inputtype="text"name="name">
        <br>
        性别：...
        <br>
        年龄：...
        <br>
    </fieldset>
    <fieldset>
        <legend>教育程度</legend>
        学校：...
        <br>
        专业：...
        <br>
    </fieldset>
    <fieldset>
        <legend>工作经历</legend>
        职务：...
        <br>
        工作：...
    </fieldset>
</form>

 

 

 

4.16 隐藏域

当需要向服务器传递参数，且该参数无需用户输入，甚至都不想让用户看见，可以使用隐藏域来实现。

例如下面案例：

更改学号为2017110103的密码，其中隐藏掉了学号信息：

<form action="result.html"method="get">
<input type="hidden"name="stuNo"value="2017110103"readonly>
    <br>
    原密码：<inputtype="password"name="old">
    <br>
    新密码：<inputtype="password"name="new">
    <br>
    <input type="submit"value="修改密码">
</form>

 

4.17 表单总结

查看http头部

 

头部提供了四种数据：

 

 

 

(1)General

 

（2）Response Headers

 

（3）Request Headers

 

（4）form data（用户提交的数据）

 

 

 

 

 

5.Table

5.1 表格

表格分为四大部分：标题，表头，主体，表位

<table>定义一个表格

<caption>定义表格的标题

<thead>定义表头部分

<tbody>定义表格主体（数据）部分

<tfoot>定义表位，一般显示汇总信息等。

<tr>定义一行

<th><td>定义一个数据项（单元格），<th>一般用于表头，有加粗样式，<td>

一般用于表格主体部分，没有加粗样式。

<td>的rowspan和colspan分别定义单元格的跨行、跨列的列数。