HTML列表、框架以及表单16页
HTML使用教程
HTML使用教程一、HTML简介HTML（HyperText Markup Language）是一种常用的标记语言，用于创建网页结构和内容。
本章将介绍HTML的基本概念和语法规则。
1.1 HTML的发展历程HTML最早是由李爵士（Tim Berners-Lee）于1991年创建的，用于在因特网上发布和共享文档。
随着互联网的发展，HTML逐渐成为构建网页的标准语言。
1.2 HTML元素和标签HTML文档由多个元素组成，每个元素都由开始标签和结束标签包围。
元素的内容位于开始标签和结束标签之间。
1.3 HTML基本结构一个简单的HTML文档由DOCTYPE声明、html标签、head标签和body标签组成。
其中，DOCTYPE声明定义了文档的类型，而head标签和body标签分别定义了文档的头部和主体部分。
二、HTML常用标签本章将介绍HTML中常用的标签，包括文本标签、链接标签、图像标签等。
2.1 文本标签HTML提供了多种文本标签，如标题标签（h1至h6）、段落标签（p）、换行标签（br）等，用于展示不同级别的标题、段落和换行。
2.2 链接标签链接是网页中常用的元素，可以通过使用链接标签（a）在网页之间进行跳转。
链接标签使用href属性指定跳转的目标URL。
2.3 图像标签在网页中插入图像可以丰富页面内容，HTML提供了图像标签（img）来实现这一功能。
图像标签使用src属性指定图像的URL。
三、HTML表单HTML表单是网页中用户输入和提交数据的主要方式，本章将介绍HTML表单的创建和常见表单元素的使用。
3.1 创建表单使用表单标签（form）可以创建一个HTML表单。
表单标签的action属性指定数据提交的URL，method属性定义提交数据的方式（GET或POST）。
3.2 表单元素HTML提供多种表单元素，如文本输入框（input type="text"）、单选按钮（input type="radio"）、复选框（input type="checkbox"）等。
HTML 表单ppt课件
最新课件
25
7. 多行文本：<textarea rows="" cols=""></textarea> 8. 按钮
1. 提交按钮 <input type="submit" value="" /> 2. 重置按钮 <input type="reset" value="" /> 3. 普通按钮 <input type="button" value="" /> 4. 图片按钮 <input type="image" src="" />
最新课件
27
<form action="Echo64.asp" method="POST">
最新课件
28
<% name = Request("Name")
HTML表单实例.ppt
• 图象和文字的对齐 <img align=#> #=top, middle, bottom
<img src=URL align=right>My Face!<br> It is always<br> smiling.<br> Hahaha....<br>
My Face! It is always smiling. Hahaha....
#= us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp, euc-kr, iso-2022-kr, gb2312, gb_2312-80, x-euc-tw, x-cns11643-1, x-cns11643-2, big5
华师大软 件学院
2. HTML标签&实例
毛宏燕
华东师范大学软件学院
1
Steps
• HTML简介 • HTML标记 • 表单（FORM）
2
html文档的最基本的结构
HTML（HyperText Markup Language）是用于创建网页结构的标记语言。
HTML文档的最基本结构包括文档声明、html元素、head元素和body元素。
1. 文档声明HTML文档的第一行通常是文档声明，用于指定当前文档所使用的HTML版本。
文档声明以<!DOCTYPE>开头，后面跟着HTML版本的名称。
HTML5的文档声明为<!DOCTYPE html>。
文档声明告诉浏览器应该使用哪个HTML版本来解析当前文档。
2. html元素在文档声明下面是html元素，它是HTML文档的根元素，用于包含整个HTML文档的内容。
html元素包括两个部分：lang属性和头部（head）和主体（body）两个子元素。
<html lang="en"><head><!-- 此处为head元素的内容 --></head><body><!-- 此处为body元素的内容 --></body></html>在html元素中，lang属性用于指定当前文档所使用的语言，这有助于搜索引擎和浏览器正确地理解文档的内容。
3. head元素head元素用于包含文档的元信息，例如文档的标题、引入的外部样式表和脚本等。
它不会直接显示在浏览器窗口中，而是提供关于文档的信息。
head元素的常见子元素包括title、meta、link和script等。
<head><title>这是一个HTML文档的标题</title><meta charset="UTF-8"><link rel="stylesheet" href="styles.css"><script src="script.js"></script></head>在head元素中，title元素用于指定文档的标题，它会显示在浏览器的标题栏中。
html基础-form表单、input输入框、select选择框与文本框（二）
html基础-form表单、input输⼊框、select选择框与⽂本框（⼆）HTML标签：表单标签概念：⽤于采集⽤户输⼊的数据的。
⽤于和服务器进⾏交互表单标签 form：⽤于定义表单的。
可以定义⼀个范围，范围代表采集⽤户数据的范围form表单属性：1）action：指定提交数据的URL2）method:指定提交⽅式,分类：⼀共7种，2种⽐较常⽤get：1.请求参数会在地址栏中显⽰。
会封装到请求⾏中(HTTP协议后讲解)。
2.请求参数⼤⼩是有限制的。
3.不太安全。
post：1.请求参数不会再地址栏中显⽰。
会封装在请求体中(HTTP协议后讲解)2.请求参数的⼤⼩没有限制。
3.较为安全。
3）表单项中的数据要想被提交：必须指定其name属性例⼦：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>表单标签</title></head><body><form action="/login" method="post">⽤户名：<input name="username"><br>密码：<input name="password"><br><!--登陆按钮--><input type="submit" value="登录" ></form></body></html>结果：input标签：可以通过type属性值，改变元素展⽰的样式label：指定输⼊项的⽂字描述信息， label的for属性⼀般会和 input 的 id属性值 对应。
html表格的结构
html表格的结构HTML表格是网页中常用的一种数据展示方式，通过合理的结构可以清晰地展示数据，并提高页面的可读性和美观性。
本文将介绍HTML表格的结构及相关标签的使用方法。
一、基本结构HTML表格由<table>标签包裹，并包含多个相关的标签来定义表格的各个部分，如表头、表体和表尾等。
1. <table>标签：定义一个表格。
2. <caption>标签：定义表格的标题，位于表格上方。
3. <thead>标签：定义表格的表头部分。
4. <tbody>标签：定义表格的表体部分。
5. <tfoot>标签：定义表格的表尾部分。
二、表头部分表头部分通常用于显示表格的列名，使用<th>标签来定义每一列的表头。
示例代码：```<table><thead><tr><th>姓名</th><th>年龄</th><th>性别</th></tr></thead></table>```三、表体部分表体部分用于展示数据，使用<tr>标签定义每一行，使用<td>标签定义每一列的内容。
示例代码：```<table><thead><tr><th>姓名</th><th>年龄</th><th>性别</th> </tr></thead><tbody><tr><td>张三</td> <td>25</td> <td>男</td> </tr><tr><td>李四</td> <td>30</td> <td>女</td> </tr></tbody></table>```四、表尾部分表尾部分通常用于显示一些总结性的信息或其他附加内容，如合计数据等。
一、（3）HTML表单与表格-综合应用
DTD TF
TF STF STF STF STF STF
</tr> <tr> <td>2.2</td> <td>2.3</td> </tr> </table>
注意事项：列的个数要一致 如果一个格子中没有内容，请尽量使用 （ 空格）补齐
1.3 常见问题 1.如果要完成跨行跨列，先做一个完整的表格。再一步一步的去完成跨行合并或跨列合并操作。 2.结构化后的表格需要去掉结构标签后,再做合并操作 3.注意需要合并的td起始位置,合并完成后必须清除同行或列多出来的td
<p>爱好： <input type="checkbox" name="hobbuy" value="唱歌" checked/>唱歌 <input type="checkbox" name="hobbuy" value="看书"/>看书 <input type="checkbox" name="hobbuy" value="学习"/>学习 <input type="checkbox" name="hobbuy" value="上网"/>上网
其它属性：
placeholder：定义输入框的提示文字 maxlength：设置文本框最多输入多少字符 readonly：只读(不可输入) disabled：禁用(不可输入) -> 不会提交这个表单元素的数据 checked：仅用于 radio/checkbox，作用是设置默认选中项
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> 标签
《HTML制作表格》课件
2023
REPORTING
THANKS
感谢观看
表格的间距和边距
单元格间距
设置单元格之间的间距，以像素为单 位。
行高和列宽
调整表格中行和列的高度和宽度，以 像素为单位。
单元格边距
设置单元格内部的边距，以像素为单 位。
表格的文字样式
字体类型
选择用于表格中文本的字 体类型。
字体大小
设置表格中文本的字体大 小，可以使用像素值或相 对单位。
字体颜色
设置表格中文本的颜色， 可以使用颜色名称、十六 进制或RGB值。
简洁明了、易于理解、符合网站主题风格 。
网站导航表格的HTML制作技巧
网站导航表格的动态效果
使用HTML的`<nav>`元素，结合CSS样式 进行布局和美化。
通过JavaScript实现动态导航菜单，如响应 式设计、下拉菜单等。
表单数据表格
表单数据表格的定义
01
表单数据表格用于展示表单中用户输入的数据，方便用户核对
01
02
03
边框宽度
定义表格边框的宽度，可 以使用像素值或相对单位 。
边框颜色
设置表格边框的颜色，可 以使用颜色名称、十六进 制或RGB值。
边框样式
选择边框的样式，如实线 、虚线、点线等。
表格的背景颜色
背景颜色
为表格设置背景颜色，可以使用 颜色名称、十六进制或RGB值。
背景图片
为表格添加背景图片，可以选择 图片的路径和大小。
响应式设计的优势
响应式设计可以使网页在不同设备上都能良好显示，提高用户体验。同 时，它还可以减少维护成本，因为只需要维护一套代码即可适应不同设 备的屏幕大小和分辨率。
html 表单表格模板
bordercolor:设置边框的颜色(ie9以下有效，FF,谷歌，opera都有效)
eg:map.html
4】居中标签:就是将某些内容强制居中一般很少人使用
<center>
居中的内容
</center>
eg:
<center>
我是老大，你认为呢！
</center>
表格
eg:map.html
5】table标签：
1、数据的显示
2、简单的页面布局（重点）
格式:
Table tr td
<table>
i: i,ii,iii,iv,v....
如果type的值不能被识别，那么列表序列号会显示为1,2,3,4,5……
Eg:list.html
无序列表:每个列表项的前面都有一个特定符号,这样的列表
格式:
<ul >
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
Type：circle空心圆
列表、表单、表格
HTML的剩余标签
1】列表标签:
有序列表:每个列表项的前面都有个有序的序列号，这样列表
<ol >
<li>列表项内容</li>
<li>列表项内容</li>
<li>列表项内容</li>
</ol>
type:设置列表项序列号的样式
1：1,2,3,4,5..
HTML中常见的布局方式与应用场景
HTML中常见的布局方式与应用场景一、基本布局方式1. 流动布局（Flow Layout）流动布局是HTML页面最常用的布局方式，它根据元素在HTML文档中的出现顺序，依次从左到右，从上到下进行排列。
这种布局方式适用于简单的网页结构，不需要过多的布局调整。
应用场景：简单的网页结构，内容比较直观，不需要复杂的布局调整。
2. 表格布局（Table Layout）表格布局通过使用`<table>`、`<tr>`和`<td>`等元素来创建网页布局。
通过灵活运用表格的行（`<tr>`）和列（`<td>`），可以实现复杂的布局，并且相对容易实现。
应用场景：需要实现复杂的布局，如数据报告展示、表单输入等。
3. 浮动布局（Float Layout）浮动布局通过使用CSS的`float`属性，将元素浮动到页面的左侧或右侧，从而实现在一个容器中多个元素的横向排列。
浮动布局常与清除浮动（clear float）相结合使用，以防止布局塌陷。
应用场景：制作导航栏、图片排列、多列文本布局等。
二、高级布局方式1. 弹性盒子布局（Flexbox Layout）弹性盒子布局是一种响应式设计的布局方式，通过使用`display: flex;`来创建弹性盒子容器，并通过设置弹性盒项的属性来控制元素的布局方式、排序和对齐方式。
弹性盒子布局主要用于解决在不同屏幕尺寸下的布局需求。
应用场景：响应式网页设计、移动设备布局等。
2. 网格布局（Grid Layout）网格布局是一种相对复杂的布局方式，通过将页面划分为网格区域，从而实现对元素位置和大小的精确控制。
网格布局适用于复杂的多栏布局，并提供了丰富的网格线和单元格控制选项。
应用场景：电商网站的产品展示页面、新闻网站的多栏布局等。
3. 多列布局（Multiple Columns Layout）多列布局通过使用CSS的`column-count`和`column-width`属性，将文本或元素分为多列展示，从而实现更加美观的呈现效果。
html table简单例子
html table简单例子在我们日常生活中，HTML表格广泛应用于网页设计中，它可以帮助我们更好地展示数据和信息。
下面我们将介绍一个简单的HTML表格例子，并学习如何使用表格属性和样式增强表格的可读性和实用性。
一、HTML表格基本结构HTML表格由一系列的标签组成，主要包括`<table>`、`<thead>`、`<tbody>`、`<tfoot>`、`<tr>`、`<td>`和`<th>`等。
其中，`<table>`标签定义了整个表格，`<thead>`、`<tbody>`、`<tfoot>`分别表示表格的表头、主体和表脚。
`<tr>`标签表示表格的行，`<td>`和`<th>`标签表示表格的单元格。
二、创建简单表格的示例下面是一个简单的HTML表格示例：```html<table border="1"><thead><tr><th>姓名</th><th>年龄</th><th>性别</th></tr></thead><tbody><tr><td>张三</td><td>25</td><td>男</td></tr><tr><td>李四</td><td>30</td><td>女</td></tr></tbody></table>```这个示例中，我们创建了一个带有边框的3列表格，表头分别为“姓名”、“年龄”和“性别”。
html基本框架代码
HTML基本框架代码什么是HTML基本框架代码HTML是一种用于构建网页的标记语言，它定义了网页的结构和内容。
HTML基本框架代码指的是创建网页时必须包含的一些标签和元素，以确保网页能够正确显示和运行。
HTML基本框架代码的组成HTML基本框架代码主要由以下几个部分组成：DOCTYPE声明在HTML文档的第一行，必须声明文档类型（DOCTYPE）。
DOCTYPE声明告诉浏览器使用哪个HTML版本来解析网页。
常见的DOCTYPE声明包括HTML5的声明：<!DOCTYPE html>HTML标签HTML标签是HTML文档的根元素，所有的HTML代码都包含在HTML标签之内。
HTML 标签的基本格式如下：<html><!-- HTML代码 --></html>头部标签头部标签（head）包含了网页的元数据和引用的资源，例如标题、字符编码、样式表和脚本等。
头部标签的基本格式如下：<head><meta charset="UTF-8"><title>网页标题</title><!-- 其他头部内容 --></head>主体标签主体标签（body）包含了网页的可见内容，例如文本、图片、链接等。
主体标签的基本格式如下：<body><!-- 网页内容 --></body>HTML基本框架代码示例下面是一个完整的HTML基本框架代码示例：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>网页标题</title><!-- 其他头部内容 --></head><body><!-- 网页内容 --></body></html>HTML基本框架代码的作用定义网页的结构HTML基本框架代码定义了网页的整体结构，包括头部、主体和底部等部分。
HTML表格,table,thead,tbody,tfoot,th,tr,td,的属性以及。。。
HTML表格,table,thead,tbody,tfoot,th,tr,td,的属性以及。
在HTML中表格是作为⼀个整体来解析的，解析完才会在页⾯显⽰，如果表格很复杂很长，加载时间很长，⽤户体验就不好。
所以这⾥就要⽤到表格结构标签，解析⼀部分就显⽰⼀部分，不⽤等表格全部加载完再显⽰。
表格结构标签（添加这三个标签时，要注意不能影响⽹页布局）：<thead></thead> 表头部（放表格的标题之类）<tbody></tbody> 表主体（放表格主体数据）<tfoot></tfoot> 表脚注 （放表格脚注）在写代码时：不论上⾯<thead>，<tfoot>，<tbody>顺序如何，在页⾯显⽰时，总是按照：<thead> <tbody> <tfoot>的顺序呈现出来的。
------------------结构化表格标签：<table><caption>表格标题，⼀个表只有⼀个</caption><thead><!--表头部--><tr><th></th><!--表头单元格，粗体，居中--><th></th></tr><tr><th></th><!--表头单元格，粗体，居中--><th></th></tr></thead><!--表头部--><tbody><!--表主体--><tr><td></td><td></td></tr><tr><td></td><td></td></tr></tbody><!--表主体--><tfoot><!--表脚注--><tr><td></td><td></td></tr></tfoot><!--表脚注--></table>-------------------------------------------------table表格属性width pixles, % 规定表格的宽度align left,center,right 表格相对周围元素的对齐⽅式 (这⾥是整个表格相对于⽹页进⾏移动居中的，⽽不是定义表格⾥⾯的内容)border pixels 表格变宽的宽度bgcolor rgb(x,x,x),#xxxxxx,ColorName 表格的背景颜⾊cellpadding pixels,% 单元格与其他内容之间的空⽩cellspacing pixels,% 单元格之间的空⽩frame 属性值规定外侧边框的哪个部分是可见的。
html代码大全
HTML代码大全目录1.引言2.HTML基础标签3.文本标签4.链接标签5.图像标签6.表格标签7.表单标签8.多媒体标签9.样式标签10.脚本标签11.结论引言HTML（超文本标记语言）是用于创建网页的标准标记语言。
它使用标记标签来描述网页的结构和内容。
在本文档中，我们将介绍一些最常用的 HTML 代码以及它们的应用场景。
HTML基础标签HTML基础标签用于定义整个文档的结构和布局。
以下是一些常见的基础标签：•<!DOCTYPE>：声明文档类型。
•<html>：定义一个 HTML 文档。
•<head>：定义关于文档的元信息。
•<title>：定义文档标题。
•<body>：定义文档的主体内容。
文本标签文本标签用于定义和格式化网页的文本内容。
以下是一些常见的文本标签：•<h1>到<h6>：定义标题的级别，从最大的标题 h1 到最小的标题 h6。
•<p>：定义一个段落。
•<em>：将文本表示为强调的内容。
•<strong>：将文本表示为重要的内容。
•<br>：插入一个换行符。
•<a>：创建一个链接到另一个文档的锚点。
链接标签链接标签用于创建与其他网页、文件或位置之间的链接。
以下是一些常见的链接标签：•<a>：创建一个链接。
•href：定义链接的目标地址。
•target：定义在何处打开链接。
•download：指示浏览器下载链接而不是导航到链接。
图像标签图像标签用于插入图像到网页中。
以下是一些常见的图像标签：•<img>：定义一个图像。
•src：定义图像的地址。
•alt：定义图像的替代文本。
•width：定义图像的宽度。
•height：定义图像的高度。
表格标签表格标签用于创建和格式化数据表格。
以下是一些常见的表格标签：•<table>：定义一个表格。
html基本框架代码
html基本框架代码HTML基本框架代码HTML（Hypertext Markup Language）是一种用于创建网页的标记语言。
在开始编写网页前，需要先了解HTML的基本框架代码，以便正确地组织网页内容。
HTML基本结构<!DOCTYPE html><html><head><title>网页标题</title></head><body></body></html>上述代码是HTML的基本结构，包括以下几个部分：1. DOCTYPE声明：告诉浏览器使用哪个HTML版本来解析网页。
2. html标签：整个文档的根元素。
3. head标签：包含了文档的元信息，如标题、关键字、描述等。
4. title标签：定义了网页的标题，显示在浏览器的标题栏中。
5. body标签：包含了文档的主要内容。
HTML元素在HTML中，所有内容都是由元素构成。
每个元素都有一个起始标签和结束标签，并且可以包含其他元素或文本内容。
例如：<p>这是一个段落。
</p>上述代码中，<p>表示段落的起始标签，</p>表示段落的结束标签，中间的“这是一个段落。
”则是该元素内部的文本内容。
另外还有一些没有结束标签或自闭合的元素：<img src="图片地址" alt="图片说明" />上述代码中，<img>表示图片元素，其中src属性指定了图片的地址，alt属性指定了图片的说明文字。
HTML属性HTML元素可以包含一些属性，用于提供更多的信息或控制元素的行为。
例如：<a href="链接地址">这是一个链接</a>上述代码中，<a>表示链接元素，href属性指定了链接的地址，中间的“这是一个链接”则是该元素内部的文本内容。
- 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/></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="http://taobao" target="iframe1">连接到taobao</a><br/> <a href="kk.html" target="iframe1" >连接到kk.html</a><br/><iframe name="iframe1" src="http://baidu" width="500px"height="400px" /><iframe src="http://google" width="400px" height="400px" /></html>表单元素为什么需要？看一个图:从上图可以看出，我们需要把一些数据提交给服务器处理,比如注册用户,发帖…,这样就需要使用到表单元素(常见输入框、单选框、复选框、文本域、密码框、上传文件。