HTML学习之表单,iframe框架,颜⾊,JS,字符实体,URL
HTML表单,后续代码只附body部分,整个结构不做赘述
表单是⼀个包含表单元素的区域。表单元素是允许⽤户在表单中输⼊内容,⽐如:⽂本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。表单使⽤表单标签 form来设置:
<form>
input 元素
</form>
HTML表单标签
标签描述
<form> 定义供⽤户输⼊的表单
<input> 定义输⼊域
<textarea> 定义⽂本域 (⼀个多⾏的输⼊控件)
<label> 定义了 <input> 元素的标签,⼀般为输⼊标题
<fieldset> 定义了⼀组相关的表单元素,并使⽤外框包含起来
<legend> 定义了 <fieldset> 元素的标题
<select> 定义了下拉选项列表
<optgroup> 定义选项组
<option> 定义下拉列表中的选项
<button> 定义⼀个点击按钮
<datalist> 指定⼀个预先定义的输⼊控件选项列表
<keygen> 定义了表单的密钥对⽣成器字段
<output> 定义⼀个计算结果
⽂本域
⽂本域通过input type=“text” 标签来设定,当⽤户要在表单中键⼊字母、数字等内容时,就会⽤到⽂本域。同时可以设置密码字段
<!--点击确认按钮表单的内容会被传送到另⼀个⽂件。表单的动作属性定义了⽬的⽂件的⽂件名。由动作属性定义的这个⽂件通常会对接收
到的输⼊数据进⾏相关的处理。,点击重置按钮则会重置数据-->
<form action="demo-form.php">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname"><br>
Password: <input type="password" name="pwd"><br>
<input type="reset" value="重置">
<input type="submit" value="提交">
</form>
创建按钮和单选按钮
input type=“radio” 标签定义了表单单选框选项.同⼀组的单选按钮,name 取值⼀定要⼀致.
iframe嵌套页面加载慢value:提交数据到服务器的值(后台程序PHP使⽤)
name:为控件命名,以备后台程序 ASP、PHP 使⽤
checked:当设置 checked=“checked” 时,该选项被默认选中
<form action="demo-form.php" method="get">
<input type="button" value="Hello world!"><br><br>
<input type="radio" name="sex" value="Male"> Male<br>
<input type="radio" name="sex" value="Female" checked="checked"> Female<br>
<input type="submit" value="提交">
</form>
复选框
input type=“checkbox” 定义了复选框. ⽤户需要从若⼲给定的选择中选取⼀个或若⼲选项
<form action="demo-form.php" method="get">
<input type="checkbox" name="vehicle[]" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle[]" value="Car" checked="checked"> I have a car<br>
<input type="submit" value="提交">
</form>
提交之后:
Select下拉列表
selected表⽰预选,运⾏时显⽰的就是Fiat
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
textarea多⾏输⼊⽂本域
<textarea rows="10" cols="30">我是⼀个⽂本框。</textarea>
利⽤fieldset和legend定义带边框的表单
<form action="">
<fieldset>
<legend>Personal information:</legend>
Name: <input type="text" size="30"><br>
E-mail: <input type="text" size="30"><br>
Date of birth: <input type="text" size="10">
</fieldset>
</form>
HTML内联框架iframe,定义⼀个内联的iframe
HTML内联框架元素iframe 表⽰嵌套的浏览上下⽂,有效地将另⼀个HTML页⾯嵌⼊到当前页⾯中
iframe语法:
<iframe src="URL"></iframe> 该URL指向不同的⽹页。
iframe的基础设置
height 和 width 属性⽤来定义iframe标签的⾼度与宽度。属性默认以像素为单位, 但是你可以指定其按⽐例显⽰(如:“80%”)。frameborder 属性⽤于定义iframe表⽰是否显⽰边框。设置属性值为 “0” 移除iframe的边框:
<iframe id="inlineFrameExample"
title="Inline Frame Example"
width="500"
height="300"
frameborder="0"
src="/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C5 1.478569861898606&layer=mapnik">
</iframe>
使⽤iframe来显⽰⽬标链接页⾯
iframe可以显⽰⼀个⽬标链接的页⾯,⽬标链接的属性必须使⽤iframe的属性.
因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架,所以在点击链接时页⾯会显⽰在 iframe框
架中
<iframe
name="iframe_a"
width="500"
height="300"
frameborder="0"
src="/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C5 1.478569861898606&layer=mapnik">
</iframe>
<p><a href="www.baidu" target="iframe_a">百度⼀下,你就知道</a></p>
点击链接会将百度界⾯显⽰在iframe框架中
HTML颜⾊
HTML 颜⾊由红⾊、绿⾊、蓝⾊混合⽽成。HTML 颜⾊由⼀个⼗六进制符号来定义,这个符号由红⾊、绿⾊和蓝⾊的值组成(RGB)。每种颜⾊的最⼩值是0(⼗六进制:#00)。最⼤值是255(⼗六进制:#FF)。
可以通过rgba来实现设置颜⾊透明度的功能,范围 0~1,0 表⽰全透明.
<body>
<p >
通过 rbg 值设置背景颜⾊
</p>
<p >
通过 rbg 值设置背景颜⾊
</p>
<p >
通过 rbg 值设置背景颜⾊
</p>
<p >
通过 rbg 值设置背景颜⾊
</p>
</body>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论