HTML自学笔记(HTML框架表单设计)

顺晟科技

2022-09-15 21:28:00

HTML框架

什么是框架：将浏览器划分成不同部分，每一部分加载不同的网页，用以实现在同一浏览器窗口中加载多个页面的效果。
<frameset> 划分框架标记。
1. 语法格式：<frameset>...</frameset>
2. 属性：
  1. cols 使用“像素值”和“%”分割左右窗口，“*”表示剩余部分。若使用“*，*，*”则表示框架平均分成3个。若使用“*，*”则表示框架平均分成2个。
  2. rows 使用“像素值”和“%”分割上下窗口，“*”表示剩余部分。
  3. framborder 指定是否显示边框。<framborder="0">不显示；<framborder="1">显示。
  4. border 设置边框的大小，默认值5px

语法格式：<frame 属性=“属性值”> 。
属性：
1. src 加载网页文件的url地址。
2. name 框架名称，是链接标记的target所要参数。
3. noresize表示不能调整框架大小，没有设置时就可以调整。
4. scrolling是否需要滚动条

值：

1. auto根据需要自动调整
2. yes 有
3. no 无

5.<frameborder>是否需要边框 <frameborder=“1”>显示边框；<frameborder=“0”>不显示边框。

4.其他相关标签

- - <code>表示计算机源代码或其他机器可以阅读的文本内容</code>也会将文本显示为等宽字样。
  - <pre>定义预格式文本，被包围在pre元素中的文本通常会保留空格和换行符。而文本也会呈现等宽字样。
  - <tt>呈现等宽文本效果
  - <address>标签定义文档或文章的作者联系信息。
    - 若<address>元素位于<body>元素内，则表示文档联系信息
    - 若<address>元素位于<article>元素内，则表示文章的联系信息

注：元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行

HTML表单设计

表单标记：<form>定义表单的开始位置和结束位置，表单提交时的内容就是form中的内容</form>
1. 语法格式：<form action="服务器端地址（接受表单内容的地址）" name="表单名称" method="post/get(传输方式)">...</from>
2. 常见属性：
  1. get：get方式提交时，会将表单的内容附加在URL地址后面，所以限制了提交内容的长度，不超过8192个字符，且不具备保密性。
  2. post：post提交时，将表单的数据一并包含在表单主体中，一起传输到服务器中处理，没有数据大小限制。
  3. action：表单数据的处理程序的URL地址，如果为空，则使用当前文档的url地址，如果表单中不需要使用action属性也要指定其属性为“0”
  4. target:和超链接属性类似，用来指定目标窗口。
<input>文本域和密码域，没有结束标记。
1. 语法格式：<input type="" value="" size="" maxlength="规定输入字段的最大长度，以字符个数计">
- - 当type="text"时，<input>表示一个输入文本域
  - 当type="password"时，<input>表示一个密码输入域。

2.常见属性：

- - name 定义控件名称
  - value 初始化值，打开浏览器时，文本框中的内容
  - size 设置控件的长度
  - maxlength 输入框中最大允许输入的字符

3.按钮的使用

提交按钮；当<input type="submit" >时；
重置按钮；当<input type="reset">时；
普通按钮；当<input type="button">时；
单选按钮：当<input type="radio">时；
复选按钮：当<input type="checkbox" >时。

注：单选按钮和复选按钮都可以使用"checked"属性来设置默认项。另name属性一致时，则为二选一。

如：

性别：<input type="radio" name="sex">男

性别：<input type="radio" name="sex">女

4.隐藏域：当<input type="hidden">时；

5.多行文本域：

用法：使用<textarea>标记可以实现一个能够输入多行文本区域。

格式：<textarea name="name" rows="value" cols="value" value="value">...<textarea>

注：rows和cols属性分别用来指定显示行的行数和列数，单位是字符个数。

6.菜单下拉列表域<select>

语法格式： <select name="" size="value" multiple="value">

</select>

<html>
<head>
    <title>
        网页的框架
    </title>
    <meta charset="utf-8">
</head>
    <frameset rows="90,*,90" frameborder="1" border="1" noresize="noresize">
        <frame name="top" src="top.html"/>
            <frameset cols="20%,80%">
                <frame name="left" src="left.html"/>
                <frame name="right" src="right.html" scrolling="no"/>
            </frameset>
        <frame name="bottom" src="bottom.html"/>
    </frameset>
</html>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 <html><head> <title>表单设计练习</title> <metacharset="utf-8"></head><body> <form> 账号：<inputtype="text" size="16"> <br/><br/> 密码：<inputtype="password" size="16"> <br/><br/> 爱好：<inputtype="checkbox" name="tiyu">体育 <inputtype="checkbox" name="yinyue">音乐 <inputtype="checkbox" name="yingshi">影视 <inputtype="checkbox" name="yuedu">阅读 <br/><br/> 性别：<inputtype="radio" name="sex">男 <inputtype="radio" name="sex">女 <br/><br/> 自我介绍； <br/><br/> <textareaname="name" rows="10" cols="30" >这里是自我介绍 </textarea> <br/><br/> 地址： <selectname="dizhi">  <optionvalue="shanxi" selected="selected">陕西</option> <optionvalue="sichuan" selected="selected">四川</option> <optionvalue="gansu" selected="selected">甘肃</option> <optionvalue="henan" selected="selected">河南</option> </select> <br/><br/> <inputtype="submit" value="提交"> <inputtype="reset" value="重置">

<!--value不赋值，提交按钮和重置按钮会有同样的效果，但是普通按钮不会有文字，就只是个方形按钮，大家可以自己练习一下-->

<inputtype="button" value="按钮"> </form></body></html>

上一篇：制作表单和表格的Html标签和内容下一篇：html表单和快速制作网页的方法