html学习笔记3

4.12文件选择框按钮

<form>
    选择你的头像<input type="file" accept="application/pdf">
</form>

Type属性，file。

设置属性，选择文件类型，accept，如img/gif，全部img类型则输入img/*

程序application/

.xlsx，.docx。直接给定一个文件的后缀

上传文件需要指定表单的属性enctype

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

 

 

4.13下拉列表

下拉列表的好处：

节省页面的空间，是页面更加简洁

方便输入

规范输入

<form action="result2.html" method="get">
你的省份
<select name="province">
    <option value="36">江西</option>
    <option value="41">河南</option>
    <option value="33">浙江</option>
    <option value="32">江苏</option>
</select>
    <input type="submit" value="提交"/>
</form>

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

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

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

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

<option>标签selected属性，改变下拉菜单的默认选项

选择浙江提交

http://localhost:63342/HTML/%E5%AD%A6%E4%B9%A0/%E7%AC%AC4%E7%AB%A0/result2.html?province=33

 

<select name="color" multiple>
    <option value="red">红色</option>
    <option value="blue">蓝色</option>
    <option value="green">绿色</option>
    <option value="yellow">黄色</option>
    <option value="black">黑色</option>
</select>

<select>标签的multiple 定义为多选的下拉菜单

http://localhost:63342/HTML/%E5%AD%A6%E4%B9%A0/%E7%AC%AC4%E7%AB%A0/result2.html?province=36&color=red&color=green

<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>

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

 

4.14文本区域

<textarer>标签方便用户输入多文本的信息

rows定义行数

cols定义列数

标签属性readonly设置为只读属性

标签属性disabled设置为禁用，禁用属性比只读作用要大，还禁用表单发送

name规定文本区域的名字

相比于<input type="text"/>，textarer可以在查看中改变大小，当文字超出文本框会出现滚动条，可以换行

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

4.15带边框的表单

<fieldest>标签

当信息过多时可以给表单中的相关元素进行分组

<form>
<fieldset>
    <legend style="color:blue">个人信息:</legend>
    姓名: <input type="text" name="name">
    <br/>
    生日: <input type="text">
</fieldset>
<fieldset>
    <legend>联系方式</legend>
    邮箱: <input type="text">
    <br/>
    电话：<input type="text">
</fieldset>
<br/>
<fieldset><!--换行的区分，自动占用一行-->
    <inputtype="submit"value="提交"/>
</fieldset>
</form>

创建边框

<legend>定义边框的标题

 

4.16隐藏域

<form action="result2.html" method="get">
    <input type="hidden" name="StuNo" value="150701">
    原密码：<input type="password" name="old">
    <br/>
    新密码：<input type="password" name="new">
    <br/>
    <input type="submit" value="修改密码"/>
</form>

Type属性hidden

作用将需要内容发送到服务器时，但不需要用户编辑和查看，可以使用隐藏域

 

4.17表单总结

查看http头部

F12打开调试窗口，切换到网络页（Network）

头部提供了四种数据

respones header

request header

form data

form表单的框架，内容的日期

5table

5.1表格

Table

表格列的标题thead

tr建立行，th，头部

表格主体tbody

tr  td主体部分内容

表格尾部tfoot

tr  td

colspan跨列

rowspan 跨行