HTML标签（下）

最新推荐文章于 2023-05-07 23:36:37 发布

6666，

最新推荐文章于 2023-05-07 23:36:37 发布

阅读量69

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/low1101/article/details/103188250

版权

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

form标签：为HTML创建表单
input标签：单标签，标签属性不同表现的形式不同，主要是type类型

type：text，文本框
type：password，密码框
type：submit，提交按钮

例子：

<form>
    <input placeholder="账号" />
    <br />
    <input style="background: paleturquoise;" placeholder="密码" type="password"/>
    <br />
    <input style="background: pink;"type="submit" value="登录" />
<forom/>

结果如下：

type：dadio，单选框
type：checkbox，复选框
下拉列表：由一个select和多个option组成。

例子：

<select style="background:peru;">
    <option>一年级</option>
    <option>二年级</option>
    <option>三年级</option>
</select>
<a style="border: black 1px solid;">//为a标签加上框线
    <input type="radio" name="sex" id="male" />//需要设置同一个name才可以实现单选。
    <label for="male">男</label>//把选中范围扩大到汉字“男”上
    <input type="radio" name="sex" id="wemale" />
    <label for="wemale">女</label>//把选中范围扩大到汉字“女”上
</a>	
<a style="border: black 1px solid;">
    <input type="checkbox" name="hobby" id="ping"/><label for="ping">乒乓</label>
    <input type="checkbox" name="hobby" id="basktball"/><label for="basktball">篮球</label>
    <input type="checkbox" name="hobby" id="football"/><label for="football">足球</label>
</a>

结果如下：

type：file，设置上传文件
texterae标签，设置一个文本编辑域

例子：

<form>
    <textarea style="resize: none;" cols="60" rows="30"></textarea>//设置文本的高度宽度，以及不能随意调整大小
    <input type="file" placeholder="请选择简历"/>
    <input type="submit" value="提交"/>
</form>

结果如下：

fieldset标签：常用于将表单内组件分组，双标签；
legend标签：设定fieldset 标签标题，双标签；

例子：

<body>
    <form>
        <fieldset>
            <legend>登录</legend>
            <input placeholder="账号" />
            <br />
            <input style="background: paleturquoise;" placeholder="密码" type="password"/>
            <br />
            <input style="background: pink;"type="submit" value="登录" />
        </fieldset>
        <fieldset>
            <legend>基本信息</legend>
            <input placeholder="姓名"/>
            <select style="background:peru;">
                <option>一年级</option>
                <option>二年级</option>
                <option>三年级</option>
            </select>
        <a style="border: black 1px solid;">
        <input type="radio" name="sex" id="male" />
        <label for="male">男</label>	
        <input type="radio" name="sex" id="wemale" />
        <label for="wemale">女</label>
        </a>	
        <a style="border: black 1px solid;">
            <input type="checkbox" name="hobby" id="ping"/><label for="ping">乒乓</label>
            <input type="checkbox" name="hobby" id="basktball"/><label for="basktball">篮球</label>
            <input type="checkbox" name="hobby" id="football"/><label for="football">足球</label>
        </a>
        </fieldset>
        <fieldset>
            <legend>详细信息</legend>
            <textarea style="resize: none;" cols="60" rows="30"></textarea>
            <input type="file" placeholder="请选择简历"/>
            <input type="submit" value="提交"/>
         </fieldset>
    </form>
</body>

结果如下：

frameset标签：框架集标签，用于规定框架集中有多少个框架窗口或框架集

cols：定义框架集中列的数目和尺寸
rows定义框架集中行的数目和尺寸。

注意：frameset标签不能与body标签一起使用。

frame标签：框架标签，单标签，用于在frameset 中定义一个框架窗口

src标签属性：当前frame框架中显示的文档的地址；
name标签属性：定义当前frame框架的名称，用于在 JavaScript 中引用元素或作为链接的目标
noresize标签属性：取消用户调整框架的大小

frame框架与div区别： div也可以实现页面划分的功能，但是无法指定诸如a标签链接打开位置。

例子：

首先创建三个HTML文件，top、right、left。

<html>//index代码
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<frameset rows="20%,*">
		<frame src="top.html" />
		<frameset cols="20%,*">
			<frame src="left.html" />
			<frame src="right.html" />
		</frameset>
	</frameset>
</html>

<html>//top代码
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body style="background: cornflowerblue;">
	</body>
</html>

left和right代码和top类似，只是改变颜色好辨识，不再罗列。

结果如下：

iframe标签：在页面中嵌入另外一个页面, 该标签为双标签

a标签与iframe标签区别： a标签不显示href指定的页面，它只是一个超链接；而iframe会在页面中显示src指定的网页。

例子：

首先创建三个HTML文件。

<html>//bottom代码
	<head>
            <meta charset="UTF-8">
            <title></title>
	</head>
	<body style="background: cornflowerblue;">
            <iframe src="second.html" width="400px" height="400px" </iframe>
	</body>
</html>

<html>//second代码
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body style="background: rosybrown;">
		<iframe src="third.html" width="200px" height="200px"></iframe>
	</body>
</html>

<html>//third代码
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body style="background: pink;">
		
	</body>
</html>

结果如下：

6666，

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML标签（下）

form标签：为HTML创建表单 input标签：单标签，标签属性不同表现的形式不同，主要是type类型type：text，文本框 type：password，密码框 type：submit，提交按钮例子：<form> <input placeholder="账号" /> <br /> <input style="b...
复制链接

扫一扫