HTML列表、框架以及表单
html表格、表单相关内容知识点
一、HTML表格的基本结构HTML表格是网页中常用的一种数据展示方式，它由表格元素<table>、行元素<tr>和单元格元素<td>组成，具体结构如下：1.1 定义表格```html<table><!-- 表格内容 --></table>```1.2 定义行```html<tr><!-- 行内容 --></tr>```1.3 定义单元格```html<td><!-- 单元格内容 --></td>```二、HTML表格的基本属性HTML表格可以通过一些属性来控制其显示效果和行为，下面是一些常用的表格属性：2.1 边框属性可以通过设置border属性来定义表格的边框样式，如：```html<table border="1"><!-- 表格内容 --></table>```2.2 合并单元格可以通过设置rowspan和colspan属性来合并单元格，实现复杂的布局效果。
2.3 表头和表体可以通过使用<thead>、<tbody>和<tfoot>元素来定义表格的表头、表体和表尾部分，提高表格的语义性和可读性。
三、HTML表单的基本结构HTML表单是网页中用于收集用户输入信息的一种方式，它由表单元素<form>、输入元素<input>、选择元素<select>和按钮元素<button>等组成，具体结构如下：3.1 定义表单```html<form><!-- 表单内容 --></form>```3.2 定义输入框```html<input type="text" />```3.3 定义下拉框```html<select><option value="1">选项1</option><option value="2">选项2</option></select>```3.4 定义按钮```html<button>提交</button>```四、HTML表单的常用属性HTML表单可以通过一些属性来控制其行为和样式，下面是一些常用的表单属性：4.1 提交位置区域可以通过action属性定义表单提交的位置区域，如：```html<form action="/submit" method="post"><!-- 表单内容 --></form>```4.2 提交方式可以通过method属性定义表单的提交方式，一般有get和post两种方式。
html表格表单列表的相关属性和区别
html表格表单列表的相关属性和区别在html中，必不可少的就是table，form，li，那么他们究竟有哪些属性和不同呢，下⾯简单的列举：三者作⽤：1. table ：展⽰数据2. form ：收集⽤户信息3.ul li /ol li : 页⾯布局规范，当作⼀个容器，装载结构，样式⼀致的⽂字或图表。
（⾃由组合度更⾼）常见属性：table：拥有常见的属性，width，height，font等，同时还有只属于table的属性，请看实例。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>table {width: 800px;margin: 100px auto; //表格整体在界⾯居中text-align: center; //⽂字居中border-collapse: collapse; //取消单元格与边框之间的边距font-size: 14px;}thead tr {height: 30px;background-color: skyblue;}tbody tr {height: 30px;border-bottom:1px solid #cccccc;}tbody td {border-bottom: 1px solid #d7d7d7;font-size: 12px;color: blue;}.bg {background-color: red;}</style></head><body><table><caption>表格属性介绍</caption>//表格标题<thead>//表格头<tr ><td>代码</td><td>名称</td><td>最新公布净值</td><td>累计净值</td><td>前单位净值</td><td>净值增长率</td></tr></thead><tr><td>123456</td><td> 3各余⼈的撒看出别⼈才能看出你</td><td>1，709</td><td>1，709</td><td>1，709</td><td>+0.1123%</td></tr><tr><td>123456</td><td> 3各余⼈的撒看出别⼈才能看出你</td><td>1，709</td><td>1，709</td><td>1，709</td><td>+0.1123%</td></tr></table>上述代码的表格展⽰如下：当然表格还有⼀个很常见的属性：合并单元格跨⾏：rowspan跨列： colspan遵循的原则是：先上后下，先左后右，要注意⽂字的覆盖。
HTML的表格、表单和框架
HTML的表格、表单和框架表格元素<table></table>表格是由table标签定义的，有以下⼏个属性：width：宽度加px是以像素为单位，加百分⽐是以百分⽐放⼤；border：设置边框粗细；cellspacing：设置单元格与table边框的距离；cellpadding设置单元格与单元格之间的距离；bordercolor：设置边框颜⾊。
<tr></tr>表格的⾏<td></td>表格的列，有以下⼏个属性：width：宽度； height：⾼度；align：⽔平对齐⽅式；valign：垂直对齐⽅式；bgcolor：背景颜⾊；rowspan：上下合并； colspan：左右合并。
align有以下⼏个属性：left：左； right：右；center：居中；valign有以下⼏个属性：top：上；bottom下；middle：中间；<th></th>通常做表头<table border="1" cellspacing="0" cellpadding="" width="490"><tr><td align="center" valign="middle" width="70" height="40">姓名</td><td width="70"></td><td align="center" valign="middle" width="70">性别</td><td width="70"></td><td align="center" valign="middle" width="70">出⽣年⽉</td><td width="70"></td><td width="70" rowspan="4"></td></tr><tr><td align="center" valign="middle" height="40">民族</td><td></td><td align="center" valign="middle">政治⾯貌</td><td></td><td align="center" valign="middle">⾝⾼</td><td></td></tr><tr><td align="center" valign="middle" height="40">学制</td><td></td><td align="center" valign="middle">学历</td><td></td><td align="center" valign="middle">户籍</td><td></td></tr><tr><td align="center" valign="middle" height="40">专业</td><td></td><td align="center" valign="middle" colspan="2">毕业学校</td><td colspan="2"></td></tr></table><table border="" cellspacing="0" cellpadding="" width="490"><tr><th height="40">技能、特长或爱好</th></tr></table><table border="" cellspacing="0" cellpadding="" width="490"><tr><td align="center" valign="middle" width="70" height="40">外语等级</td><td width="140"></td><td align="center" valign="middle" width="70">计算机</td><td width="210"></td></tr></table>表单元素<form></form>标签定义表单有以下⼏个属性：action：提交给哪个页⾯ method：数据提交的⽅式（ get：显⽰提交 post：隐式提交）target：页⾯打开⽅式（ _blank：在新窗⼝打开页⾯ _self：在⾃⾝的页⾯打开）⽂本类⽂本框<input type="text" name="uid" id="" value="" placeholder="请输⼊⽤户名"/>密码框<input type="password" name="pwd" id="" value="" placeholder="请输⼊密码"/>⽂本域<textarea rows="10" cols="10"></textarea>隐藏域<input type="hidden" name="hid" id="" value="123" />⽂本框与密码框的区别是tpye属性不⼀样，form传值时，都是以name = value 的形式去传值。
Html 中 表单、框架、样式表 知识总结
Html 中表单、框架、样式表知识总结表单：表单的标签是<input>,有多种类型<type>:（text、password、radio、checkbox、submit、reset、botton）1.text表单，如<input type="text" >;建立的是一个文本输入框,属性有最多输入值：maxlength；默认内容：value；还提示用户输入：placeholder="请输入"；文本宽度：size。
2.Password表单，如<input type="password" >;建立密码表单，输入内容为*。
其他属性和text表单相同3.radio表单：单选框，默认选中：checked="checked"，要给其设置value值，且name必须相同；如性别：<input name="1" type ="radio" value="male" checked>男<input name="1" type ="radio" value="female" >女4.checkbox表单：多选框，属性与radio相同5.submit表单：提交按钮，会引起页面跳转需要页面跳转语句（form），属性有value6.reset表单：重置按钮，属性有value7.botton表单：普通按钮，它的属性也有valueform标签：页面跳转，跳转到哪（action），什么样的方法跳转（method=POST/GET），form有结束标签</form>select标签：下拉框表单，select下拉框要有可以选择的值，用option 来表示。
html代码总结
html代码总结
1.标题：使用<h1>至<h6>标记定义标题，<h1>为最高级标题，<h6>为最低级标题。
2. 段落：使用<p>标记定义段落。
3. 链接：使用<a>标记定义链接，使用href属性指定链接的URL 地址。
4. 图像：使用<img>标记定义图像，使用src属性指定图像的URL地址。
5. 列表：使用<ul>和<li>标记定义无序列表，使用<ol>和<li>标记定义有序列表。
6. 表格：使用<table>、<tr>、<th>和<td>标记定义表格。
7. 表单：使用<form>、<input>、<label>和<button>标记定义表单。
8. 样式：使用<style>标记定义样式，使用CSS属性指定样式。
以上是一些基本的HTML代码，可以通过它们创建简单的网页。
但是，HTML还有更多的标记和属性，可以创建更复杂的网页。
- 1 -。
HTML语言之表单和框架标记精品PPT课件
表单
6.单选框 格式：<input type=" radio " name=" RadioButtonName " value=string checked="checked" /> 功能：定义一组单选框。在该组单选框中只能由一个被选中。 说明：type属性的属性值radio表明是单选框。name属性定义单选框的名 字。value属性定义单选框的值。checked属性表明该单选框被选中，若未选 中则省略该属性。 技术要点：在一组单选框中必须是name属性值相同value属性值不同。
… </select> 功能：定义一个下拉列表。 说明：name属性定义下拉列表的名字。size属性定义列表窗口中可见选 项的个数。<option>标记定义列表项，必须和<select>标记一起使用。
表单
例5-11 创建一个简单的表单
表单
例5-11 创建一个简单的表单
<!--文件名：example5-11.html--> <html > <head> <title>创建表单</title> </head> <body bgcolor="#ff9900" leftmargin="0" text="#000000v topmargin="30"> <form action="mailto:" method="post">
</tr> <tr>
<td width="26%"> <font size=2>姓名</font></td> <td width="74%"><font size=2>
HTML表单和框架
METHOD
指定向服务器提交的方法: 一般为post或get方法, post方法比较安全
ACTION = “URL”
METHOD =“post或get”
演示示例1：使用 post提交方式 和 get提交方式
3.1 表单
表单元素的一般格式
指定元素的类型，可 为TEXT、RADIO、
SUBMIT等
控件的名称
HTML表单和框架
主讲：白小军
学习目标
❖ 会使用表单的基本结构制作表单页面 ❖ 会使用各种表单元素实现注册页面 ❖ 理解页面的请求/响应过程 ❖ 会使用简单的服务器端技术处理请求 ❖ 会使用框架制作多窗口导航页面
内容提要
❖ 表单的概念和作用 ❖ 表单的提交方式（GET、POST及区别） ❖ 常用表单元素的使用 ❖ ASP技术基础及请求处理过程 ❖ 框架的作用和框架元素 ❖ 在框架中进行导航
</select> 说明：
size确定列表中可同时看到的行数。 selected默认被选中的可选项。
3.1 表单
列表框元素
查看源代码
设置此输入框最多 只能输入四个符号
出生日期：
<INPUT name="byear" value="yyyy" size=4 maxlength=4 >
年 <SELECT name="bmon">
<INPUT type="text" value="张三" size="20">
</P>
…… </FORM>
单行文本输入框， 字符宽度为20
html中的表单标签及表单元素
html中的表单标签及表单元素1、表单标签<form action="提交地址" method="提交⽅式"></form>表单边框标签：fieldset2、表单元素分为三类：（1）⽂本类型： ⽂本框：text 属性有：disabled（不可操作）、readonly（只读）、placeholder（默认提⽰⽂字）账号：<input type="text"> 密码框：password密码：<input type="password"> 隐藏域：hidden 多⾏⽂本（特殊格式）：textarea<textarea name="" id="" ></textarea>（2）选择类型： 单选：radio 属性有：disabled（不可操作）、checkbox（默认选中的）性别：<input type="radio">男 <input type="radio">⼥ 多选：checkbox爱好：<input type="checkbox">打游戏 <input type="checkbox">看电视 <input type="checkbox">看书 下拉（特殊格式）：select option 属性（option的属性）：selected（默认选中）、multiple（全部显⽰）属性（select的属性）：size（显⽰⼏条）<select name="" id=""><option value="">汉族</option><option value="">满族</option><option value="">壮族</option><option value="">回族</option></select>（3）按钮类型： 普通：button<input type="button" value="点我试试"> 提交：submit <input type="submit" value="提交按钮"> 复位：reset<input type="reset" value="清空">其他：1、autofocus属性（聚焦）实例：2、optgroup定义选项组实例：注意：methon:get传值（键值对，显⽰在⽹页的路径上，路径后⾯加数据）post（⽹络传值) ⼀般都⽤post 格式：<form action="#" method="post" enctype="multipart/form-data"> Html5新增：<input type="color"><br><input type="date"><br><input type="search"><br><input type="week"><br><input type="text" name="" list="list"><datalist id="list"><option value="aaa"></option><option value="vvv"></option><option value="ddd"></option></datalist>。
简述html文件的基本结构
简述html文件的基本结构
HTML(超文本标记语言) 是一种用于创建网页的标记语言。
它通过标记(tags) 来描述网页上的内容，这些标记可以用于标记文本、图像、链接、表格和表单等。
HTML 文件的基本结构包括头部信息 (head)、主体 (body) 和页脚(footer) 三部分。
1. 头部信息 (head)
头部信息包括文件头 (file header)、元数据 (metadata) 和样式表(stylesheets) 等内容。
其中，文件头包括文件的日期、大小、编码方式等信息。
元数据包括网页的描述信息、关键字、作者等信息。
样式表用于描述网页的样式，如字体、颜色、布局等。
2. 主体 (body)
主体是 HTML 文件的核心部分，包含网页的内容，如文本、图像、链接、表格和表单等。
在主体中，文本是最基本的内容，可以使用 HTML 标记来强调、加粗、斜体、删除线等。
此外，还可以使用链接来链接到其他网页或文档。
3. 页脚 (footer)
页脚是 HTML 文件的附录部分，通常包含版权信息、作者信息、页码等。
页脚通常位于页面的底部。
除了以上三部分外，HTML 文件还可以包含注释 (comments)、脚本 (scripts) 和图像 (images) 等内容。
注释可以用来注释 HTML 代码，脚本可以用来执行特定的功能，图像可以用来增加网页的美观性。
HTML 文件的基本结构包括头部信息、主体和页脚三部分，这些部分共同构成了网页的核心内容。
了解 HTML 文件的基本结构对于创建和维护网页都是非常
重要的。
HTML table、form表单标签的介绍
<form enctype="multipart/formdata" action="ashx/login.ashx" method="post"> <table> <tr> <td><label for="txtname">账号：</label></td> <td><input type="text" id="txtname" name="login_username" /></td> </tr> <tr> <td><label for="txtpswd">密码：</label></td> <td><input type="password" id="txtpswd" name="login_pswd" /></td>
</tr> <tr>
<td colspan=2> <input type="reset" /> <input type="submit" />
</td> </tr> </table> </form>
2.4 应用场景
表单主要用于向服务器传输数据；如常见的登录、注册页面。
3. form 表单提交方式
3.rm> 标签
02-HTML列表_表格_媒体元素与浮动框架
其中有序列表由OL和LI标签组成，OL代表整个列表，LI代表列表中的每一项。如下：
有序列表：
<h2>三国名将-有序列表</h2> <ol type="1">
<li>关羽</li> <li>张飞</li> <li>赵云</li> </ol>
列表、表格、媒体元素和浮动框架
一、列表
HTML中常用的列表有无序列表和有序列表。
其中无序列表由UL和LI标签组成，UL代表整个列表，LI代表列表中的每一项。如下：
无序列表：
<h2>三国名将-无序列表</h2> <ul type="disc">
<li>关羽</li> <li>张飞</li> <li>赵云</li> </ul>
</li> <li>曹操军团
<ul> <li>许褚</li> <li>典韦</li> <li>曹仁</li>
</ul> </li> <li>孙权军团
<ul> <li>太史慈</li> <li>黄盖</li> <li>周瑜</li>
</ul> </li> </ul>
网页设计——HTML表格、表单与框架标志
第四讲 HTML表格、表单与框架标志使学生掌握简单表格、表单与框架的制作。
【教学内容】讲解HTML中制作表格、表单与框架的标志。
【教学重点】* 表格中单元格的合并以及表格嵌套和叠加操作。
* 框架的嵌套使用。
* 表单元素标志与属性。
【教学难点】* 理解表格属性rowspan与colspan的含义以及表格嵌套实现的基本思想。
* 理解框架属性name、target的意义。
* 理解表单中相应元素对应标志及属性的含义。
【教学方式】案例分析式、项目教学【教学参考】1、《网页设计与制作》杨尚森曲宏山贾文峰等著电子工业出版社。
2、《WEB网站设计》Joel Sklar著高等教育出版社。
3、《HTML网页制作教程》材义语编著铁道出版社。
【新课内容】2.5 插入表格2.5.1 在网页中插入表格表格的基本构成元素：表头，单元格，列，行<TABLE><TR><TD>第一行第一列</TD><TD>第一行第二列</TD></TR><TR><TD>第二行第一列</TD><TD>第二行第二列</TD></TR></TABLE>2.5.2嵌套的表格2.5.3 表格的属性设置2.5.4单元格属性设置2.6 表单的应用表单在Web网页中用来给访问者填写信息，从而能获得用户信息，使网页具有交互的功能。
2.6.1 创建表单2.6.2 用<INPUT>定义用户交互（1）单行文本输入区（2）密码输入区（3）单选框（4）复选框（5）隐藏区域（6）按钮2.6.3 定义下拉式菜单<P>你选修的课程：<SELECT Size="1" Name="D1"><OPTION Value="jsj">计算机</OPTION><OPTION Value="ey">英语</OPTION><OPTION Value="ljx">逻辑学</OPTION><OPTION Selected value="xlx">心理学</OPTION></SELECT></P>2.6.4 定义多行文字输入区域请输入你的详细介绍：<TEXTAREA Rows="2" Name="S1" Cols="20" >文字</TEXTAREA>2.7 框架窗口框架把窗口划分成几个子窗口，各个子窗口可以调入各自的HTML文档，最后形成充满整个窗口的网页。
HTML静态网页：表格、表单
HTML静态⽹页：表格、表单⼀、表格tabletable的属性width 宽度，可以⽤百分⽐或者像素，像素常⽤960border 边框，常⽤值是0cellpadding 表格内容与单元格边框的边距，常⽤值0cellspacing 单元格之间的间距，常⽤值0align 单元格⾥⾯内容的对齐⽅式bgcolor 背景⾊background 背景图⽚<tr></tr>⾏，属性align ⼀⾏内容的⽔平对齐⽅式valign ⼀⾏内容的垂直对齐⽅式height ⾏⾼bgcolor ⼀⾏的背景⾊background ⼀⾏的背景图⽚<td></td>列<th></th>表头，单元格内容会⾃动居中、加粗，与tr具有相同属性设置单元格的⾏⾼。
列⾼时，会同时影响对应的⾏或列单元格合并（建议尽量使⽤表格嵌套）colspan="n" 合并同⼀⾏，n代表同⼀⾏的⼏列rowspan="n" 合并同⼀列，n代表同⼀列的⼏⾏*可以在⽂字前⾯加上链接，设置链接属性，就可以点击进⼊相应⽹站*表单在⽹页中主要负责数据采集功能。
由三部分构成：⽂本输⼊、按钮、选择输⼊。
<form name="" method="post/get" action=""></form>id不可重复1、⽂本输⼊⽂本框：<input type="text" name="" id="" value="（需要输⼊的内容）"/>密码框：<input type="password" name="" id="" value="（需要输⼊的内容）"/>⽂本域：<input textarea name="" id="" cols="(字符多少，可理解为宽度)" rows="(⼏⾏⾼)"/>隐藏域：<input type="hidden" name="" id="" value=""/>备注：<textarea name="third" cols="" rows=""></textarea>2、按钮提交按钮：<input type="submit" name="" id="" disable="disable" value=""/>重置按钮：<input type="reset" name="" id="" disable="disable" value=""/>普通按钮：<input type="botton" name="" id="" disable="disable" value=""/>图⽚按钮：<input type="img" name="" id="" disable="disable" src="图⽚地址"/>3、选择输⼊单选按钮组：<input type="redio" name="" checked="checked" value=""/>name的值⽤来分组，如果相同name说明在同⼀个组⾥，所以不能同时选中（⽐如选男⼥）value是提交给程序的，在页⾯中不显⽰checked设置默认选项复选框组：<input type="checkbox" name="" checked="checked" value=""/>⽂件上传：<input type="file" name="" id=""/><lable for=""></lable> lable标签为input元素定义标注。
《html表单和框架》课件
name
为表单指定名称，便于服务器端处理表单数据。
enctype
指定表单数据的编码类型，用于支持文件上传 等特殊数据。
表单的验证技术
1
前端验证
使用JavaScript等前端技术对用户输入的数据进行验证。
2
后端完整性和安全性。
3
HTML5验证
利用HTML5的新特性，如required、pattern等属性，实现表单的基本验证。
</form>
通过学习和实践，你将能够创建出各种丰富的表单和框架。
表单的使用场景
电子商务网站
联系表单
用户可以通过表单提交订单信息、 收货地址等。
用户可以通过表单向网站管理员 发送消息。
登录表单
用户可以通过表单输入登录信息 进行身份验证。
常见的表单和框架
Bo o tstrap jQ uery Form Vue.js
功能强大的前端开发框架，提供了丰富的表单组 件和样式。
表单元素
1 文本输入框
2 下拉菜单
3 复选框和单选按钮
用于接收用户输入的文本 信息，如用户名、密码等。
用于提供选项供用户选择， 如性别、国家、城市等。
用于多选或单选选项，如 选择兴趣爱好、接受条款 等。
表单属性
action
指定表单数据提交的目标URL。
method
指定表单数据提交的HTTP方法，通常为GET或 POST。
jQ uery插件，简化了表单的提交和验证，并提供 了丰富的事件处理功能。
流行的JavaScript框架，支持数据绑定和组件化开 发，在表单处理方面有很好的支持。
如何创建表单和框架
创建表单和框架需要掌握HTML和CSS的基础知识。可以使用原生HTML和CSS编 写表单，也可以借助框架快速搭建。
html讲义表单和框架
表单元素的逐一介绍
按钮类型可为 button、submit
• 按钮基本语法
按钮名称
按钮上的标签
– <INPUT type="reset" name="Reset" value=" 重填 ">
查看源代码
<FORM name="form6" method="post" action=""> <P> <INPUT type="reset" name="Reset" value=" 重填 "> …… <INPUT type="button" name="cancel" value="取消"> </P>
</FORM>
ACTION
指定提交后，由服务器 上那个处理程序处理
METHOD
指定向服务器提交的方法: 一般为post或get方法, post方法比较安全
ACTION = “URL”
METHOD =“post或get”
演示示例1：使用 post提交方式 和 get提交方式
整理课件
表单元素的统一格式
<FORM name="form2" method="post" action="">
……
<P>密 码：
<INPUT value=“ 123456 ” type="password" size="22">
4-HTML表单和HTML框架
隐藏域
• 隐藏域包含了不可见数据
<input type="hidden" name="Account" value="This is a hidden text field" />
• 并不给用户显示 • 用于JavaScript和服务器端代码
• 如中的视图状态，session会话状态
• 有一些区别，在不同的浏览器上 • 选值框不能在Firefox上运行
• 显示为正规文本框
滑块和选值框 演示
来自HTML5的域属性
• Autocomplete • 浏览器存储之前输入的值 • 在之后的访问中，返回到之前输入值
• Autofocus • 在页面加载时集中到域
</select>
• 多选菜单：
<select name="products" multiple="multiple"> <option value="Value 1" selected="selected">keyboard</option> <option value="Value 2">mouse</option>
• 为用户输入的文本框 • 为交互的按钮，如"注册"，"登录"，"搜索" • 菜单，滑块，等 • 查看Google，Yahoo，Facebook • Google搜索框是简单的文本框
如何创建HTML表单？
• 创建表单块用：
<form></form>
html第5章：框架、表单
复选框控件
Type=“checkbox”
作用：创建一个可以在选中和未选中之间切换的控件，当该表单 提交给一个脚本进行处理时，每个被选取的复选框将返回一个与 该复选框的名称相关联的值
浮动框架应用举例
<iframe src="iframe1.htm" scrolling="yes"></iframe>
பைடு நூலகம்
同步练习
建立一个文字链接，让链接内容在新的窗口中打开 在多窗口文档中建立一个文字链接，让链接内容在整个
浏览器内显示
框架的概念
多窗口页面 框架集元素 框架元素 链接到框架 无框架元素 浮动框架
<a href="frame1.htm" target="bottomFrame">goto frame1 </a>
链接到框架窗口
超级链接元素<a>有一个属性target，可以指定网页在多窗 口页面中哪一个窗口中打开
Target属性的值
_blank：强制a标识的链接文档在一个新浏览器窗口打开 _self：强制a标识的链接文档在和a元素所在的窗口（框架）打开 _parent：在当前a元素所在框架的父框架中打开，如果没有父框架，
网页编程基础：HTML
第5章：框架、表单
HTML列表和表单
HTML列表和表单1. 列表标签去掉列表默认的样式：li { list-style: none; }1.1 有 / ⽆序列表标签名定义说明<ul></ul>⽆序标签没有顺序，⾥⾯只能包含 li<ol></ol>有序标签有顺序，⾥⾯只能包含 li1.2 ⾃定义列表适⽤于对术语或名词进⾏解释和描述（通常⽤作⽹站底部竖排链接）<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd>...<dt>名词2</dt><dd>名词2解释1</dd><dd>名词2解释2</dd>...</dl>2. 表单标签⼀个完整的表单通常由表单控件（也称为表单元素）、提⽰信息、表单域三个部分构成2.1 input 控件输⼊的控件，根据不同的属性值⽤来指定输⼊的功能语法：<input type="text" />type 属性（表单类型）属性值描述text（默认）单⾏⽂本输⼊框password密码输⼊框radio单选按钮（设相同name）checkbox复选按钮button普通按钮submit提交按钮reset重置按钮file上传⽂件按钮image图像形式的按钮（要有src）其他属性属性属性值描述name⾃定义定义控件的名称，⽤于区别不同的表单value⾃定义表单⾥默认显⽰的⽂本size正整数控件显⽰的宽度checked checked设置默认选中的项（作⽤于单复选按钮）maxlength正整数控件允许输⼊的最多字符数placeholder⾃定义⽆法选中的空的默认值，输⼊后请空2.2 label 标签⽤于绑定表单和元素，当点击⽂字的时候，光标会定位到指定的表单⾥⾯⽅式⼀：⽤ label 包含 input 控件<label>⽤户名：<input type="text" /></label>⽅式⼆：label ⽤ for 属性绑定 input 控件的 id<label for="sex">男</label><input type="radio" id="sex" />2.3 textarea 控件可以输⼊多⾏⽂本的输⼊框语法：<textarea >⽂本内容</textarea>属性：cols="每⾏中的字符数"rows="显⽰的⾏数"2.4 select 控件多个选项让⽤户选择的下拉列表<select><option>选项1</option><option>选项2</option><option>选项3</option>...</select>select 属性：multiple="multiple"允许多选option 属性：selected="selected"当前项为默认选中项3. form表单域通过 form 表单域收集表单控件的信息传递给服务器<form action="url地址" method="提交⽅式" name="表单名称">各种表单控件</form>属性属性值作⽤action url 地址指定接收表单数据的 url 地址，可为空传给本页处理method get / post设置表单数据取值的提交⽅式，隐藏 post，默认显⽰ get name控件的名称⽤于指定表单的名称，以区分同⼀个页⾯中的多个表单。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
上一篇文章为大家带来了HTML的介绍以及运行原理、图像表格的实际应用。
本章迪派为大家介绍无序列表，有序列表，框架浮动窗口表单及表单控件，表单及表单控件一、无序列表，有序列表：1.有序列表：<html><title>俺第一个实例</title><head></head><body><Center>成绩表</center><br/><!--表格--><table align="center" bordercolor="#579AFE" height="10px" border="3px"width="500px"><tr align="center"><td>项目</td><td colspan="5" align="center">上课</td><td colspan="2" align="center">休息</td></tr><tr bgcolor="pink" align="center"><th>星期</b></th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th><th>星期六</th><th>星期日</th></tr><tr align="center"><td rowspan="4" align="center">上午</td><td>语文</td><td>数学</td><td>英语</td><td>英语</td><td>物理</td><td>计算机1</td><td rowspan="4" align="center">休息</td></tr><tr align="center"><td>数学</td><td>数学</td><td>地理</td><td>历史</td><td>化学</td><td>计算机2</td></tr><tr align="center"><td>CAD</td><td>AI</td><td>淘宝</td><td>图形图像</td><td>网站后台</td><td>学历</td></tr><tr align="center"><td>日文录入</td><td>公建</td><td>方正飞腾</td><td>网页三剑客</td><td>地理</td><td>计算机4</td></tr><tr></tr><tr align="center" ><td rowspan="2">下午</td> <td>平面设计</td><td>装潢</td><td>英语</td><td>日语</td><td>会计</td><td>PS</td><td rowspan="2">休息</td> </tr><tr align="center"><td>数学</td><td>数学</td><td>地理</td><td>历史</td><td>化学</td><td>计算机6</td></tr></table></body></html><!--Html不区分大小写-->2.无序列表<ul><li></li></ul>案例:代码:<html><title>实例</title><head></head><body style="margin-top:0px;"> <ul type="circle"><li>英雄</li><li>精武门</li><li>西游记</li></ul></body></html>☞type可以取disc、circle、square有序列表代码:<html><title>实例</title><head></head><body><ol type="1" start="2" ><li>卢俊义</li><li>吴用</li><li>林冲</li></ol></body></html>☞ type用于指定用什么来显示,start 表示从第几开始计算.type有：阿拉伯数字1, 2, 3, …小写字母a, b, c, …大写字母A, B, C, …小写罗马字母i, ii, iii, …大写罗马字母I, II, III, …二、框架浮动窗口表单及表单控件：Frameset框架集用途主要是用于分割显示多个页面☞frameset和frame配合使用，一般讲是用于后台页面快速入门:代码a.html页面用于保护其它页面<frameset cols="30%,*"><!--noresize不能托动框架边框--><frame name="frame1" src="b.html" frameborder="0" scrolling="no" noresize/> <!--frameborder设置框架边框--><frame name="frame2" src="c.html" frameborder="0"/></frameset>☞该frameset页面不能有body和body体b.html<body bgcolor="pink"><!--target表示我们点击后，目标指向谁--><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/><a href="c.html" target="frame2">周杰伦</a><br/><a href="c.html" target="frame2">齐秦</a><br/></body>☞target属性值有四个_blank :表示打开一个全新的页面(新窗口)_self:替换本页面(本窗口)_top:(整个浏览器窗口)_parent:(父窗口)*还有一个就是在target值中直接写对应的那个frame的名字.c.html:<body bgcolor="gray"><!--silver浅灰--><!--gray深灰-->歌词大全</body>其它页面Frameset的综合小案例:结构示意图:案例all.html<frameset rows="20%,*"><frame src="top.html" scrolling="no"/><frameset cols="20%,*"><frame src="left.html" noresize frameborder="0" /><frame src="right.html" name="myframe" frameborder="0"/></frameset></frameset>top.html<img src="111.JPG"/>left.html<body bgcolor="pink"><ul><li><a href="right.html" target="myframe">青花瓷</a></li><li><a href="right.html" target="myframe">当兵的人</a></li></ul></body>right.html<body bgcolor="silver">歌词大全</body>晚上的练习:1.按照笔记走一遍2.作业2.1做一个自己的网页，显示自己的基本信息：姓名、性别等（注意使用文本格式标记，要做得好看啊），并显示自己的照片（图象的标记还记得吗？）2.2.普通邮箱iframe的使用大连迪派有时我们需要，在一个含有<body>的页面嵌入另外一个页面，形成画中画的效果,怎么处理->iframe元素(浮动窗口)入门案例iframe.html<html><body><h1>hello,world</h1><a href="" target="iframe1">连接到taobao</a><br/><a href="kk.html" target="iframe1" >连接到kk.html</a><br/><iframe name="iframe1" src="" width="500px" height="400px" /><iframe src="" width="400px" height="400px" /></body></html>表单元素为什么需要？看一个图:从上图可以看出，我们需要把一些数据提交给服务器处理,比如注册用户,发帖…,这样就需要使用到表单元素(常见输入框、单选框、复选框、文本域、密码框、上传文件。