HTML基础__3

最新推荐文章于 2023-05-12 21:45:49 发布

slom_fxt

最新推荐文章于 2023-05-12 21:45:49 发布

阅读量113

点赞数

分类专栏： HTML基础文章标签： html

本文链接：https://blog.csdn.net/slom_fxt/article/details/120288547

版权

HTML基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、HTML中的框架

<iframe>---表示一个框架,在html文件中开辟一个区域，可以单独显示另一个html文件

【html文件中嵌套另一个html文件】

src="URL"----另一个html文件访问路径

height 和 width 属性----定义iframe标签的高度与宽度。可以使用百分比数字

frameborder 属性用于定义iframe表示是否显示边框。【默认有边框，{0/1 yes/no}】

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML中的框架</title>
    </head>
    <body>
        <!--
            src---另一个html文件访问路径
            height 和 width 属性----定义iframe标签的高度与宽度。可以使用百分比数字
            frameborder 属性用于定义iframe表示是否显示边框。【默认有边框，{0/1   yes/no}】
        -->
        <iframe width="500px" height="400px" frameborder=1 src="../work/zhuce.html"></iframe>
    </body>
</html>

使用iframe来显示目标链接页面

用过点击<a>标记，切换显示iframe中显示的内容

1.<a>标提供target属性为iframe得name属性值

2.为iframe设置name属性值

例如;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>使用iframe来显示目标链接页面</title>
    </head>
    <body>
        <ul>
            <li><a href="../work/baiogebuju.htnl.html" target="yemian">首页</a></li>
            <li><a href="../work/divbuju.htnl.html" target="yemian">员工管理</a></li>
            <li><a href="../work/zhuce.html" target="yemian">部门管理</a></li>
        </ul>
        <iframe width="500px" height="400px" frameborder=1 name="yemian"></iframe>
    </body>
</html>

二、HTML中的<div>

<div></div>---在html中开辟一块空白表区域，可以包含其他的html元素显示，因此<div>是一个容器元素。

与css结合使用可以制作页面布局

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>div</title>
    </head>
    <body>
        <div style="width: 500px;height: 400px;background-color: red;" >
            <h4>标题标记</h4>
            <p>段落标记</p>
            <img src="../testimgs/avatar2.png">
        </div>
    </body>
</html>

三、HTML中<span>

<span>---没有实际的含义，与css一起可以改变某一端文本内容中的一部分。

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>span</title>
    </head>
    <body>
            <h4>我们都有中国魂，我们都是<span style="font-size: 30px;color: red;">中国人
            </span>，<span style="color: yellow;font-size: 30px;">黄皮肤</span>。</h4>
    </body>
</html>

面试题:区块元素与内联元素[行内元素]的区别?

Html中的元素有两大类区块元素与内联元素[行内元素]；

块级元素在浏览器显示时，通常会以新行来开始（和结束）。常见的：<h1>, <p>, <ul>, <table>,<div>

内联元素在显示时通常不会以新行开始。常见的：<b>, <td>, <a>, <img>,<span>

四、HTML字符实体

字符实体----特殊符号，在html中有一些特殊的符号与文字结合就成一个html标记，在显示的时候这些特殊符号不会显示，而是被解释成一个标记，如果我们需要显示出这个特殊符号就要使用字符实体

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'
￠	分	¢	¢
£	镑	£	£
¥	人民币/日元	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>字符实体</title>
    </head>
    <body>
        <table border="1">
            <tr>
                <td>实体名称</td>
                <td>显示结果</td>
                <td>实体名称</td>
                <td>显示结果</td>
            </tr>
            <tr>
                <td>空格</td>
                <td>空&nbsp;格</td>
                <td>小于号</td>
                <td>&lt;</td>
            </tr>
            <tr>
                <td>大于号</td>
                <td>&gt;</td>
                <td>和号</td>
                <td>&amp;</td>
            </tr>
            <tr>
                <td></td>
                <td>实体结果</td>
                <td>实体名称</td>
                <td>实体结果</td>
            </tr>
            <tr>
                <td>引号</td>
                <td>&quot;</td>
                <td>撇号</td>
                <td>&apos;(IE不支持)</td>
            </tr>
            <tr>
                <td>分</td>
                <td>&cent;</td>
                <td>镑</td>
                <td>&pound;</td>
            </tr>
            <tr>
                <td>人民币\日元</td>
                <td>&yen;</td>
                <td>欧元</td>
                <td>&euro;</td>
            </tr>
            <tr>
                <td>小节</td>
                <td>&sect;</td>
                <td>版权</td>
                <td>&copy;</td>
            </tr>
            <tr>
                <td>注册商标</td>
                <td>&reg;</td>
                <td>商标</td>
                <td>&trade;</td>
            </tr>
            <tr>
                <td>乘号</td>
                <td>&times;</td>
                <td>除号</td>
                <td>&divide;</td>
            </tr>
        </table>
    </body>
</html>

五、表单

<form>---表示一个表单

表单作用：采集用户信息，发送给后端处理程序处理

action----设置后端处理程序访问地址【后端开发者提供的访问接口】

method----设置表单信息的提交方式。

        取值1:GET----将表单信息跟随在后端处理程序访问地址的后面明码发送。

GET有数据量限制255个字符

                  文件上传时不使用GET方式

例如:login?username=zhangsan&password=123456

        取值2:POST----将表单信息封装在http协议中提交给后端处理程序，用户看不见。

  POST没有数据量限制
                  文件上传时使用POST方式

enctype---规定在将表单数据发送到后台处理程序之前如何对其进行编码

application/x-www-form-urlencoded

默认。在发送前对所有字符进行编码（将空格转换为 "+" 符号，特殊字符转换为 ASCII HEX 值）。

multipart/form-data

不对字符编码。当使用有文件上传控件的表单时，该值是必需的。

text/plain

将空格转换为 "+" 符号，但不编码特殊字符。

注意:文件上传时使用POST方式，且设置enctype为multipart/form-data,包含<input name="wenjiankuang" type="file"/>

例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表单</title>
    </head>
    <body>
        <!--1.action--设置后端处理程序访问地址
            2.POST--设置表单信息的提交方式
        -->
        <form action="" method="POST">
            用户名：<input type="text" name="username"/><br>
            密码：<input type="password" name="mima"/><br>
            <input type="submit" value="登录"/>
        </form>
    </body>
</html>

表单元素

1.不一定需要放在表单中，在需要提交给后端处理程序是要放在表单中。

2.我们将表单元素分成2大类【1.input类型的表单元素 2.非input类型的表单元素】

input类型的表单元素----使用input标记通过type属性的取值表示不同的表单元素

非input类型的表单元素---不使用input标记的表单元素

例如;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>表单元素</title>
    </head>
    <body>
        <form action="" method="GET" >
           <table border="1px" width="100%" cellspacing="0" align="center">
                <tr>
                   <th>名称</th>
                   <th>表现形式</th>
                   <th>注意事项</th>
                </tr>
                <tr>
                    <td colspan="3" align="center">input类型的表单元素</td>
                </tr>
                <tr>
                    <td>文本框</td>
                    <!--placeholder--设置文本框开始显示文字在用户输入时自动消失
                    -->
                    <td><input type="text" name="wenbenkuang" value="" placeholder="请输入"></td>
                    <td>name属性后端处理程序得到文本框输入值的名称<br>value属性表示默认值<br>placeholder设置文本框开始显示文字在用户输入时自动消失</td>
                </tr>
                <tr>
                    <td>密码框</td>
                    <td><input type="password" name="password" value="默认值"></td>
                    <td>
                        name属性后端处理程序得到>密码框输入值的名称<br>
                        value属性表示默认值
                    </td>
                </tr>
                <tr>
                    <td>单选按钮</td>
                    <td><input type="radio" name="radio" value="nan" checked="checked">男
                        <input type="radio" name="radio" value="nv" >女
                    </td>
                        
                    <td>
                        name属性后端处理程序得到单选按钮选中值的名称<br>
                        value属性提交给后端处理程序的具体值<br>
                        "男"/"女"是提供给用户方便用户知自己所选的内容<br>
                        有多个单选按钮时，为了保证每次只能选一个，要求name属性值要相同<br>
                        checked表示默认被选中
                    </td>
                </tr>
                <tr>
                    <td>复选框</td>
                    <td>
                        <input type="checkbox" name="checkbox" value="yuwen" checked="checked">语文
                        <input type="checkbox" name="checkbox" value="shuxue" checked="checked">数学
                        <input type="checkbox" name="checkbox" value="yingyu" checked="checked">英语
                        <input type="checkbox" name="checkbox" value="tiyu" checked="checked">体育
                    </td>
                    <td>
                        name属性后端处理程序得到复选框选中值的名称<br>
                        value属性提交给后端处理程序的具体值<br>
                        "数学"/"英语"是提供给用户方便用户知自己所选的内容<br>
                        有多个复选框时,要求name属性值要相同<br>
                        checked表示默认被选中
                    </td>
                </tr>
                <tr>
                    <td>时间日期选择框</td>
                    <td>
                        <input type="date" name="date"><br>
                        <input type="time" name="time"><br>
                        <input type="datetime-local" name="datetime"><br>
                    </td>
                    <td>
                        name属性后端处理程序得到时间日期选择框选中值的名称<br>
                    </td>
                </tr>
                <tr>
                    <td>颜色框</td>
                    <td>
                        <input type="color" name="yansekuang"> 
                    </td>
                    <td>name属性后端处理程序得到颜色框选中值的名称</td>
                </tr>
                <tr>
                    <td>邮箱框</td>
                    <td>
                        <input type="email" name="youxiang">
                        <td>提交时会被进行校验</td>
                    </td>
                </tr>
                <tr>
                    <td>隐藏域</td>
                    <td><input type="hidden" name="yingcang" value="jaba"/></td>
                    <td>   </td>
                </tr>
                <tr>
                    <td>文件选择框</td>
                    <td>
                        <input type="file" name="xuanze">
                    </td>
                    <td></td>
                </tr>
                <tr>
                    <td>表单提交按钮</td>
                    <td>
                        <input type="submit" value="提交" name="tijiao">
                        <td></td>
                    </td>
                </tr>
                <tr>
                    <td>重置按钮</td>
                    <td>
                        <input type="reset" name="chongzhi" value="重置按钮">
                    </td>
                    <td></td>
                </tr>
                <tr >
                    <td>普通按钮</td>
                    <td>
                        <input name="putong" type="button" value="普通按钮"/>
                    </td>
                    <td>
                    value表示的是按钮上显示的文本值
                    </td>
                </tr>
                <tr>
                    <td colspan="3">非input类型的表单元素</td>
                </tr>
                <tr>
                    <td>下拉列表</td>
                    <td>
                        <select name="xialaliebiao">
                            <option name="sx">陕西省</option>
                            <option name="gs">甘肃省</option>
                            <option name="sc">四川省</option>
                        </select>
                    </td>
                    <td>
                        option--下拉列表中的每一项<br>
                        value表示提交给后台处理程序的数据值<br>
                        “陕西省”给用户看的
                    </td>
                </tr>
                <tr>
                    <td>文本域</td>
                    <td>
                        <textarea cols="32" rows="5"></textarea> 
                    </td>
                    <td>
                        cols--列数设置宽度,rows--行数设置高度<br>
                        输入超过大小空间之后自带滚动条<br>
                        制作富文本编辑器
                    </td>
                </tr>
           </table>
        </form>
    </body>
</html>

slom_fxt

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML基础__3

一、HTML中的框架<iframe>---表示一个框架,在html文件中开辟一个区域，可以单独显示另一个html文件【html文件中嵌套另一个html文件】src="URL"----另一个html文件访问路径height 和 width 属性----定义iframe标签的高度与宽度。可以使用百分比数字frameborder 属性用于定义iframe表示是否显示边框。【默认有边框，{0/1 yes/no}】例如：<!DOCTYPE html>&l..
复制链接

扫一扫

专栏目录

application/x-www-form-urlencoded	默认。在发送前对所有字符进行编码（将空格转换为 "+" 符号，特殊字符转换为 ASCII HEX 值）。
multipart/form-data	不对字符编码。当使用有文件上传控件的表单时，该值是必需的。
text/plain	将空格转换为 "+" 符号，但不编码特殊字符。

HTML基础__3

“相关推荐”对你有帮助么？