HTML案例/form标签/frameset标签-（html补充）

HTML案例/form标签/frameset标签

一。简历模板

image.png

<html>
    <head>
        <title>简历作业</title>
        <meta charset="UTF-8"/>
    </head>
    <body>
        <h3>简历作业</h3>
        <hr />
        <table border="1px" cellspacing="0px" style="border-bottom: none;">
            <tr height="27px">
                <td colspan="5">基本情况</td>
            </tr>
            <tr height="27px">
                <td width="120px">姓名</td>
                <td width="120px"></td>
                <td width="120px">性别</td>
                <td width="120px"></td>
                <td width="120px" rowspan="7"></td>
            </tr>
            <tr height="27px">
                <td>民族</td>
                <td></td>
                <td>出生年月</td>
                <td></td>
        
            </tr>
            <tr height="27px">
                <td>政治面貌</td>
                <td></td>
                <td>健康</td>
                <td></td>
            
            </tr>
            <tr height="27px">
                <td>籍贯</td>
                <td></td>
                <td>学历</td>
                <td></td>
        
            </tr>
            <tr height="27px">
                <td>电子信箱</td>
                <td></td>
                <td>联系电话</td>
                <td></td>
        
            </tr>
            <tr height="27px">
                <td>专业</td>
                <td colspan="3"></td>
            </tr>
            <tr height="27px">
                <td>毕业院校</td>
                <td colspan="3"></td>
            </tr>
            <tr height="27px">
                <td>求职意向</td>
                <td colspan="4"></td>
            </tr>
        </table>
        <table border="1px" cellspacing="0px" style="border-top: none;border-bottom: none;">
            <tr height="27px">
                <td colspan="4">教育情况</td>
            </tr>
            <tr height="27px">
                <td width="151px">时间</td>
                <td width="151px">院校</td>
                <td width="151px">专业</td>
                <td width="151px">学历</td>
            </tr>
            <tr height="27px">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr height="27px">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
        <table border="1px" cellspacing="0px" style="border-top: none;">
            <tr height="27px">
                <td colspan="4">培训经历</td>
            </tr>
            <tr height="27px">
                <td width="151px">时间</td>
                <td width="151px">培训机构</td>
                <td width="151px">课程</td>
                <td width="151px">证书</td>
            </tr>
            <tr height="27px">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
            <tr height="27px">
                <td></td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </body>
</html>

二。内嵌标签学习iframe

1.src:要显示的网页资源路径

可以是本地(相对路径)也可以是网络资源(URL)

注意:

默认当前页面打开及加载src指向的资源

2.width:设置显示区域的宽度

3.height:设置显示区域的高度

4.name:设置内嵌区域的名字,结合超链接标签的target属性使用.

作用:在当前网页中加载其他网页的资源,达到不同网页资源之间不相互干扰,并能在同一个页面中展现给用户的目的.

<html>
    <head>
        <title>内嵌标签学习</title>
        <meta charset="UTF-8"/>
    </head>
    <body>
        <h3>内嵌标签学习</h3>
        <hr />
        <!--
            内嵌标签:
                iframe
                    src:要显示的网页资源路径
                        可以是本地(相对路径)也可以是网络资源(URL)
                        注意:
                            默认当前页面打开及加载src指向的资源
                    width:设置显示区域的宽度
                    height:设置显示区域的高度
                    name:设置内嵌区域的名字,结合超链接标签的target属性使用.
            作用:
                在当前网页中加载其他网页的资源,达到不同网页资源之间不相互干扰,并能在同一个页面中展现给用户的目的.
        -->
        <a href="http://www.baidu.com" target="_if">百度一下</a>
        <a href="http://www.so.com" target="_tt">360搜索</a><br />
        <iframe src="" width="48%" height="400px" name="_if"></iframe>
        <iframe src="" width="48%" height="400px" name="_tt"></iframe>
    </body>
</html>

三。框架标签学习 frameset

1.注意:

第一步一定要删除body标签

frameset

rows:按照行进行切分页面

cols:按照列进行切分页面

子标签:

frame:进行切分区域的占位,一个frame可以单独加载网页资源.

src:资源路径(本地或者网络)

name:区域名,结合超链接使用

<html>
    <head>
        <title>框架标签学习：</title>
        <meta charset="UTF-8"/>
    </head>
    <!--
        注意:
            第一步一定要删除body标签
        框架标签学习:
            frameset
                rows:按照行进行切分页面
                cols:按照列进行切分页面
                子标签:
                    frame:进行切分区域的占位,一个frame可以单独加载网页资源.
                        src:资源路径(本地或者网络)
                        name:区域名,结合超链接使用
    -->
    <frameset rows="10%,*,10%">
        <frame src="frameset/top.html" />
        <frameset cols="10%,*">
            <frame src="frameset/left.html" />
            <frame src="frameset/right.html" name="_right"/>
        </frameset>
        <frame src="frameset/bottom.html" />
    </frameset>
</html>

四。form表单标签

作用:收集并提交用户数据给指定服务器

1.属性:

action:收集的数据提交地址也就是URL

method:收集的数据的提交方式

get
:适合小量数据,表单数据以?隔开拼接在URL后面,不同的键值对使用&符号隔开,不安全.

post:适合大量数据,安全,隐式提交

2.注意1:

表单数据的提交,要提交的表单项必须拥有name属性值,否则不会提交.

提交的表单项数据为键值对,键为name属性的值,值为用户书写的数据

3.注意2:

form标签会收集其标签内部的数据

3.注意3:

form表单的数据提交需要依赖于submit提交按钮.

4.form表单域标签学习:

作用:给用户提供可以进行数据书写或者选择的标签.

5.使用:

文本框:

input

type:text 收集少量的文本数据,用户可见

password 收集用户密码数据

name:数据提交的键,也会被js使用

value: 默认值

单选框:

input

type:radio

name:name属性值相同的单选框只能选择一项数据

value:要提交的数据

checked:checked 使用此属性的单选默认是选择状态

多选框:

input:

type:checkbox

name:一个多选组需要使用相同的name属性值

value:要提交的数据

checked:checked 使用此属性的多选框默认是选择状态

单选下拉框:

select:

name:数据提交的键名,必须声明

子标签option:一个option标签表示一个下拉选项

value:要提交的数据

文本域:

textarea:声明一个可以书写大量文字的文本区域

name:数据提交的键名,js和css也会使用

rows:声明文本域的行数

cols:声明文本域的列数

普通按钮:

input:

type:button

value:

隐藏标签:

input

type:hidden

name

value

注意:表单数据提交提交的是表单域标签的value值

6.form表单标签的使用:

在点击数据提交时,form标签会将其内部所有form表单域标签中用户书写的数据按照method指明的提交方式

提交给action属性所指明的提交地址.

<h3>form标签学习</h3>
        <hr />
            <form action="#" method="get">
                用户名:<input type="text" name="uname" value="王五"/><br />
                密码: <input type="password" name="upwd"/><br />
                性别  :  男<input type="radio" name="sex" value="1" checked="checked"/>  女<input type="radio" name="sex" value="0"/><br />
                爱好: <br />
                    吃饭<input type="checkbox" name="fav" value="1" checked="checked"/><br />
                    睡觉<input type="checkbox" name="fav" value="2"/><br />
                    打豆豆<input type="checkbox" name="fav" value="3"/><br />
                籍贯:<br />
                    <select name="address">
                        <option value="">--请选择--</option>
                        <option value="1">北京</option>
                        <option value="2">上海</option>
                        <option value="3" selected="selected">商丘</option>
                    </select>
                    <br />
                文本域:<br />
                    <textarea name="intro" rows="10" cols="30"></textarea><br />
                普通按钮:<br />
                    <input type="button" id="" value="普通按钮" />
                隐藏标签:
                    <input type="hidden" name="hidden" id="" value="哈哈" />
                <input type="submit" value="登录"/>
            </form>
    </body>

五。模拟注册页面

image.png

<html>
    <head>
        <title>注册页面</title>
        <meta charset="UTF-8"/>
        <!--
            http://127.0.0.1:8020/HTML%E5%AD%A6%E4%B9%A0/15-HTML-%E6%B3%A8%E5%86%8C%E9%A1%B5%E9%9D%A2.html?
            uname=zhangsan&pwd=123&mail=123123&phone=123123123&sex=1
            &fav=1&fav=2&address=1&intro=123123123&agree=1#
        -->
    </head>
    <body>
        <h3>注册页面</h3>
        <hr />
        <form action="#" method="get">
            <table border="1px" cellspacing="0" cellpadding="5px">
                <tr height="35px">
                    <td width="70px">用户名:</td>
                    <td width="200px">
                        <input type="text" name="uname" id="uname" value="" />
                    </td>
                </tr>
                <tr height="35px">
                    <td>密码:</td>
                    <td>
                        <input type="password" name="pwd" id="pwd" value="" />
                    </td>
                </tr>
                <tr height="35px">
                    <td>邮箱:</td>
                    <td>
                        <input type="text" name="mail" id="mail" value="" />
                    </td>
                </tr>
                <tr height="35px">
                    <td>手机号:</td>
                    <td>
                        <input type="text" name="phone" value="" />
                    </td>
                </tr>
                <tr height="35px">
                    <td>性别:</td>
                    <td>
                        男<input type="radio" name="sex" id="sex" value="1" checked="checked"/>
                        女<input type="radio" name="sex" id="sex" value="0" />
                    </td>
                </tr>
                <tr height="35px">
                    <td>爱好:</td>
                    <td>
                        <input type="checkbox" name="fav" id="fav" value="1" />唱歌
                        <input type="checkbox" name="fav" id="fav" value="2" />打球
                        <input type="checkbox" name="fav" id="fav" value="3" />旅游
                    </td>
                </tr>
                <tr height="35px">
                    <td>籍贯:</td>
                    <td>
                        <select name="address" id="">
                            <option value="1">商丘</option>
                            <option value="2">菏泽</option>
                            <option value="3">信阳</option>
                        </select>
                    </td>
                </tr>
                <tr height="35px">
                    <td>个人介绍:</td>
                    <td>
                        <textarea name="intro" rows="4" cols="20"></textarea>
                    </td>
                </tr>
                <tr height="35px">
                    <td colspan="2" align="center">
                        <input type="checkbox" name="agree" id="agree" value="1" />是否同意本公司的协议
                    </td>
                </tr>
                <tr height="35px">
                    <td colspan="2" align="center">
                        <input type="submit" value="注册" />
                    </td>
                </tr>
            </table>
        </form>

    </body>
</html>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 223,924评论 6赞 521
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 95,776评论 3赞 402
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 170,954评论 0赞 366
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 60,576评论 1赞 300
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 69,589评论 6赞 399
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 53,105评论 1赞 314
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 41,480评论 3赞 427
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 40,457评论 0赞 278
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 46,998评论 1赞 324
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 39,026评论 3赞 343
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 41,174评论 1赞 354
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 36,812评论 5赞 350
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 42,502评论 3赞 336
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 32,979评论 0赞 25
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 34,101评论 1赞 275
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 49,674评论 3赞 380
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 46,204评论 2赞 363

HTML案例/form标签/frameset标签-（html补充）