Java Web网站设计开发教程 课件 第02章 HTML元素_第1页
Java Web网站设计开发教程 课件 第02章 HTML元素_第2页
Java Web网站设计开发教程 课件 第02章 HTML元素_第3页
Java Web网站设计开发教程 课件 第02章 HTML元素_第4页
Java Web网站设计开发教程 课件 第02章 HTML元素_第5页
已阅读5页，还剩74页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

JavaWeb网站设计开发第2章超文本标记语言HTML内容2.1HTML5概况2.2HTML文档结构2.3头部元素2.4文本元素2.5群组元素2.6超链接元素2.7表格元素2.8内嵌元素2.9结构元素2.10编辑元素2.11表单元素2.12HTML中的颜色设置2.13绝对路径与相对路径2.1HTML5概况与SGML的关系HTML是使用SGML定义的一个描述性语言，或可说HTML是SGML的一个应用。HTML的语法简单HTML的格式和语法非常简单，只是由文字及标签组合而成，任何文字编辑器都可以编辑HTML文件，只要能将文件另存成ASCII纯文字格式即可。XHTML与DHTML在开发技术的选型中，通常会选择传统HTML的扩展技术，包括可扩展超文本标记语言（eXtensibleHyperTextMarkupLanguage，简称为XHTML）和动态HTML（DynamicHTML，简称为DHTML）。HTML5HTML5引入了许多重要的新特性，包括：语义化更好、全新的元素、更多的表单控件、支持多媒体、离线存储、拖放功能、WebSocket等。2.2HTML文档结构<html><head><title>网页制作教学</title></head><body>HelloWorld!</body></html>2.2HTML文档结构在HTML中任何标签皆由”<”及”>”所围住，如<P>，标签名与小于号之间不能留有空白字符。在起始标签之标签名前加上符号”/”便是其终结标签，如</font>。标签字母大小写皆可。由开始标签和终结标签所构成的对象可以称为HTML元素（或HTML对象）。元素带有参数，也称为元素的属性。参数只可加于起始标签中。熟悉面向对象程序设计的开发人员更习惯将它们称为“HTML对象和属性”。通常在一个完整的HTML文件中，html元素是HTML文档的根元素，其中包含二个部份：头部元素和体部元素，它们分别被包含在<head>标签和<body>标签中。DEMOHTML文档结构2.2演示.mp42.3头部元素头部元素<head>中可以包含多个元素用来描述脚本、链接样式表、提供元信息等，这些信息虽然不能直接在页面上展示，但对于文档的说明、可读性和搜索引擎优化等方面至关重要。<head>元素的子元素包括<title>、<base>、<link>、<meta>和<style>等。2.3头部元素元素语义HTML支持版本head所有头部元素的容器。4、5title定义了HTML文档的标题4、5base描述了页面中所有超链接的默认超链接基地址（用href属性指定）和默认目标（用target属性指定）4、5link定义HTML文档和外部资源的关系4、5meta给出HTML文档的元数据4、5style定义样式定义4、52.3头部元素<html><head><title>Titleofthedocument</title><basehref="/htm/"/><basetarget="_blank"/></head><body>Thecontentofthedocument......</body></html>2.3头部元素<link>元素用来定义HTML文档和外部资源的关系，通常用来声明HTML所引用的CSS文档。例如下面的代码中链接了一个名为mystyle.css的文档：<head><linkrel="stylesheet"type="text/css"href="mystyle.css"/></head>除了链接，在HTML中还可以直接嵌入CSS样式代码。下例中使用<style>元素来完成这一任务：<head><styletype="text/css">body{background-color:yellow;}p{color:blue;}</style></head>2.3头部元素<meta>元素可以给出HTML文档的元数据（metadata）。元数据不会在网页中显示，但会被浏览器、搜索引擎等程序解析和应用。在下面的代码中，通过元数据给出了页面的简述、关键词、作者、字符集等信息：<head><metaname="description"content="FreeWebtutorials"/><metaname="keywords"content="HTML,CSS,XML,JavaScript"/><metaname="author"content="HegeRefsnes"/></head><meta>元素所给出的网页元数据对于搜索引擎判断网页类型、内容都很有帮助。2.3头部元素<script>元素中可以嵌入脚本程序，HTML5中脚本程序默认是用JavaScript语言书写；当浏览器不支持脚本程序的执行，则会显示<noscript>元素中的内容。<template>元素中可以定义前端模板，可以通过JavaScript代码进行调用。2.4文本元素在HTML中，文本元素（Text-levelsemantics）用来定义网页中文本内容和语义，增加文字的易读性。文本元素主要包括<a>、<em>、<strong>、<small>、<s>、<cite>、<q>、<dfn>、<abbr>、<time>、<code>、<var>、<samp>、<kbd>、<sub>、<sup>、<i>、<b>、<u>、<mark>、<ruby>、<rb>、<rt>、<rtc>、<rp>、<bdi>、<bdo>、<span>、<br>、<wbr>等。虽然文本的显示样式通常是由CSS来定义，但文本元素的语义也会影响文本的显示风格，比如上标（sup）、下标（sub）等文本。2.4文本元素<html><body><em>em定义强调文本，显示为斜体字</em><br><strong>strong定义强调文本，显示为粗体</strong><br><small>small定义小号文本</small><br><s>s定义加删除线的文本</s><br>sub定义下标文本，比如a<sub>2</sub><br>sup定义上标文本，比如a<sup>2</sup><br><i>i定义斜体文本</i><br><b>b定义粗体文本</b><br><u>u定义下划线文本</u><br><mark>mark定义有加亮记号的文本</mark></body></html>2.4文本元素<html><body><ruby>中<rt>zhong</rt>文<rt>wen</rt></ruby></body></html>DEMO文本元素2.4演示.mp42.5群组元素在HTML中，群组元素（Groupingcontent）用来定义网页中具有关联性的内容和语义。群组元素主要包括<p>、<hr>、<pre>、<blockquote>、<ol>、<ul>、<li>、<dl>、<dt>、<dd>、<figure>、<figcaption>、<div>、<main>等。与文本元素一样，群组元素的语义也会影响显示风格，比如多个列表项元素在显示时通常会在前面加上数字序号或图形符号。2.5群组元素<html><body><p>这是段落。</p><p>hr标签定义水平线：</p><hr/><p>pre标签很适合显示计算机代码：</p><pre>fori=1to10printinexti</pre><blockquote>段落前面有缩进……</blockquote></body></html>2.5群组元素<html><body><ol><li>咖啡</li><li>牛奶</li><li>茶</li></ol><ul><li>咖啡</li><li>茶<ul><li>红茶</li><li>绿茶</li></ul></li><li>牛奶</li></ul></body></html>2.5群组元素<html><body><h2>一个定义列表：</h2><dl><dt>计算机</dt><dd>用来计算的仪器......</dd><dt>显示器</dt><dd>以视觉方式显示信息的装置......</dd></dl></body></html>2.5群组元素div元素<div>元素用来将页面内容分割成各个独立的部分。在每个<div>元素中，不仅可以包含文本内容，也可以包含图片、表单等其他内容。在默认的情况下，<div>元素所包含的内容，将在新的一行显示。属性描述dir设置文本显示方向lang设置语言class类属性style设置级联样式title标题属性nowrap取消自动换行id标记属性2.5群组元素<divclass=”定义的类的名称”>……</div><divid=”定义的名称”>……</div><divstyle=”定义的样式”>……</div><divnowrap=”nowrap”>……</div><divtitle=”标题内容”>……</div><divid="header">...</div><divid="footer">...</div>DEMO群组元素2.5演示.mp42.6超链接元素网页之间的链接（Links）能使浏览者从一个页面跳转到另一个页面，实现文档互联、网站互联。超链接就像整个网站的神经细胞，把各种信息有机地结合在一起。在HTML中，超链接可以通过<a>元素和嵌套在<map>元素内部的<area>元素来实现。关于<area>元素将在嵌入式元素中展开描述，本节将主要讨论<a>元素。2.6超链接元素属性描述href链接的目标URL。hreflang规定目标URL的基准语言。仅在href属性存在时使用。media规定目标URL的媒介类型。默认值：all。仅在href属性存在时使用。rel规定当前文档与目标URL之间的关系。仅在href属性存在时使用。target在何处打开目标URL。仅在href属性存在时使用。type规定目标URL的MIME类型。仅在href属性存在时使用。注：MIME=MultipurposeInternetMailExtensions。2.6超链接元素文本链接是最常见的一种超链接，它通过网页中的文件和其他文件进行链接，语法如下：<ahref="链接的URL地址"target=目标窗口的打开方式>链接元素</a> 链接元素可以是文字，也可以是图片或其他页面元素。href属性是<a>元素最常用的属性，用来指定链接目标的URL地址。链接地址可以是绝对地址，也可以是相对地址。例如链接到W3C官方网站，并打开新的浏览器显示该网站，实现代码如下：<ahref=”/”target=_blank>W3C</a>2.6超链接元素target属性的取值及功能说明target值目标窗口的打开方式_parent在上一级窗口打开，常在分帧的框架页面中使用。_blank新建一个窗口打开。_self在同一窗口打开，与默认设置相同。_top在浏览器的整个窗口打开，将会忽略所有的框架结构。2.6超链接元素书签链接也是常用的一种超链接，用来在创建的网页内容特别多时对内容进行链接。书签可以与所链接文字在同一页面，也可以在不同的页面。建立书签的语法如下：<aname=”书签名称”>文字</a>在代码的前面增加链接文字和链接地址就能够实现同页面的书签链接。语法如下：<ahref=”#书签的名称”>链接的文字</a>其中，#代表这是书签的链接地址，书签的名称则是上面定义的书签名。如果想链接到不同的页面需要在链接的地址前增加文件所在的位置。语法如下：<ahref=”链接的URL地址#书签名称”>链接的文字</a>DEMO超链接元素2.6演示.mp42.7表格元素在HTML5中使用<table>、<caption>、<tr>、<td>、<th>、<colgroup>、<col>、<tbody>、<thead>、<tfoot>等表格元素构建和展示表格式数据（Tabulardata）。<table>元素可以用来定义表格，包括表格的标题、表头及单元格内容等。作为<table>元素的子元素，表格行用<tr>定义，表头元素用<th>元素定义（表头通常显示成黑体），单元格内容用<td>元素定义。一个<table>元素可包含一个或多个<tr>元素，一个<tr>元素又可以包含一个或多个<th>、<td>元素。2.7表格元素标签语义table定义表格caption定义表格标题tr定义表格中的行td定义表格中的单元th定义表格中的表头单元格colgroup定义表格列的组。通过此标签，您可以对列进行组合，以便格式化。col为表格中的一个或多个列定义属性值。tbody定义表格主体。thead定义表格的表头。tfoot定义表格的页脚。2.7表格元素<html><body><tableborder="2"style="width:200px"><tr><td>a1</td><td>b1</td><td>c1</td></tr><tr><td>a2</td><td>b2</td><td>c2</td></tr></table></body></html>2.7表格元素<tableborder="1"><caption>跨两列的单元格</caption><tr><th>姓名</th><thcolspan="2">电话</th></tr><tr><td>张小明</td><td>lt;/td><td>325330425</td></tr></table>……DEMO表格元素2.7演示.mp42.8内嵌元素除了文字信息，网页中还可以呈现图形、图像、音频、视频等多媒体信息。为了丰富网页的表现方式，HTML5允许以内嵌元素(Embeddedcontent)的方式在网页中嵌入图形、图像、视频、音频以及其他可操作的对象。相关的元素包括<img>、<iframe>、<embed>、<object>、<param>、<video>、<audio>、<source>、<track>、<map>、<area>、<MathML>系列和<SVG>系列。2.8内嵌元素元素语义img定义HTML页面中的图像。iframe定义包含另一个文档的行内框架。embed定义嵌入的内容，比如插件，元素必须有src属性。object定义一个嵌入的对象。param为包含它的object元素提供参数。video定义视频，如电影片段或其他视频流。audio定义声音，如音乐或其他音频流。source为媒介元素（如<video>和<audio>）定义媒介资源。track为video等媒介指定外部字幕。map定义客户端的图像映射，图像映射是带有可点击区域的图像。area定义图像映射内部的区域。MathML在文档内使用<math>...</math>标签应用各种MathML元素。SVG在文档中定义可缩放矢量图形。2.8内嵌元素HTML提供了<img>元素用来描述图像信息的内容和表现形式，但图像的数据并不会直接插入HTML文档中，<img>元素的作用是让HTML文档在展示时给图像留出一个位置。图像文件的地址由<img>元素的src属性指定，当浏览器无法下载图像文件时，则在相应的位置显示一些文字，文字的内容由alt属性指定。<imgsrc="url"alt="some_text"/>图像的大小可以在元素中使用width和height属性给出，如果不设置这两个属性，则将默认为按照图像的实际尺寸显示。<imgsrc="pulpit.jpg"alt="Pulpitrock"width="304"height="228"/>2.8内嵌元素GIF支持最多256色的图像。虽然GIF的颜色不够丰富，但它支持动画和透明色，在网页中常常被用来设计按钮、菜单等较小的图像。JPG可以支持高分辨率、颜色丰富的图像。由于JPG具有很好的压缩比，非常适合在网页中展现照片。当然，在使用JPG格式处理图像时，压缩比越大，图片的质量就越差。PNG可以支持颜色丰富的图像，同时还可支持alpha滤镜的透明方式。虽然PNG不支持动画效果，但与GIF一样适合作为较小的图像的显示方式。2.8内嵌元素<img>元素的usemap属性可以指定可点击区域的图像映射元素，而图像映射元素本身的设置是在<map>元素中，其中的<area>元素则给出了具体的区域和超链接的位置，功能类似于<a>元素。下列代码给出了图像映射的方式，即在一个图像中设置了三个不同形状的区域，当用户点击这些区域时会产生如同超链接的效果。2.8内嵌元素<html><body><imgsrc="planets.gif"width="145"height="126"alt="Planets"usemap="#planetmap"/><mapname="planetmap"><areashape="rect"coords="0,0,82,126"href="sun.htm"alt="Sun"/><areashape="circle"coords="90,58,3"href="mercur.htm"alt="Mercury"/><areashape="circle"coords="124,58,8"href="venus.htm"alt="Venus"/></map></body></html>2.8内嵌元素在早期的网页设计中，开发者经常使用<frameset>框架标记把浏览器窗口划分成几个大小不同的子窗口，每个子窗口显示不同的页面，也可以在同一时间浏览不同的页面。定义子窗口使用元素<frame>。HTML5已经不再支持<frameset>与<frame>元素，但仍然支持创建包含文档的内联框架的<iframe>元素。元素语义HTML支持版本<frameset>定义框架集4<frame>定义框架集的子窗口4<iframe>创建包含另一个文档的内联（inline）框架4、52.8内嵌元素<iframe>元素可以构成“浮动”的框架，可以在一个HTML文档的一个特定区域中展示另一个HTML文档。属性功能height定义内联框架的高度name定义内联框架的名称sandbox使内联框架可以包含其他的一些内容，例如表格，脚本等seamless布尔型属性，使内联框架看起来像包含它的文件的一部分（没有边框和滚动条等）src设置内联框架所引用的地址srcdoc定义在内联框架中显示的HTML内容，与sandbox和seamless一起使用width定义内联框架的宽度2.8内嵌元素<html><body><iframesrc="/"name="iframe_a"style="width:618px"></iframe><p><ahref=""target="iframe_a">百度</a></p><p><b>注意：</b>因为超链接的目标表明为iframe，因此当点击超链接时会在iframe中显示百度页面</p></body></html>2.8内嵌元素根据HTML5的规范，在网页上呈现的视频和音频需要符合一定的标准，否则就通过插件（如activeX）来呈现。<audio>元素用来定义声音，如音乐或其他音频流。<audio>与</audio>之间插入的内容是供不支持audio元素的浏览器显示的。属性值描述autoplayautoplay如果出现该属性，则音频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。looploop如果出现该属性，则每当音频结束时重新开始播放。preloadpreload如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。srcurl要播放的音频的URL。2.8内嵌元素<html><body><audiosrc="music.mp3"controls="controls">

你的浏览器不支持音频元素。</audio></body></html>2.8内嵌元素<video>元素用来定义视频，如电影片段或其他视频流。<video>与</video>之间插入的内容是供不支持video元素的浏览器显示的。属性值描述autoplayautoplay如果出现该属性，则视频在就绪后马上播放。controlscontrols如果出现该属性，则向用户显示控件，比如播放按钮。heightpixels设置视频播放器的高度。looploop如果出现该属性，则当媒介文件完成播放后再次开始播放。preloadpreload如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。srcurl要播放的视频的URL。widthpixels设置视频播放器的宽度。2.8内嵌元素<html><body><videowidth="320"height="240"src="video.mp4"controls="controls">

你的浏览器不支持视频元素。</video></body></html>2.8内嵌元素<math><mrow><mi>A</mi><mo>=</mo><mfencedopen="["close="]"><mtable><mtr><mtd><mi>x</mi></mtd><mtd><mi>y</mi></mtd></mtr>……</mtable></mfenced></mrow></math>MathML中的一系列元素可以帮助在HTML文档内显示数学公式，并且这些元素本身也具有相应的语义。注意：并不是所有的浏览器都能显示MathML标签，因此在网站中使用这个系列的元素时需要告知所支持的浏览器及版本情况。2.8内嵌元素<progress>和<meter>是在HTML5中新增的元素。<progress>元素可以用来显示正在执行的状态或进度情况，配合JavaScript程序，可以控制<progress>元素中的value属性，以精确地显示进展情况。<meter>元素可以以直方图的形式显示值的大小。为了实现直方图的显示，除了需要通过value属性给出具体的数值，还需要通过min和max属性给出该直方图的最小和最大值，以便可以按比例进行显示。min和max属性的缺省值为0和1。2.8内嵌元素<html><body>

下载进度：<progressvalue="22"max="100"></progress><p><progress/></p><p>显示度量值：</p><metervalue="3"min="0"max="10">3/10</meter><br><metervalue="0.6">60%</meter></body></html>2.8内嵌元素根据HTML5的规范，<svg>和<canvas>元素都可以完成在网页中的绘图功能。<canvas>元素用来绘制2D图形，这与SVG的作用相似。不同的是，<canvas>元素的绘图机制依赖于分辨率、不支持事件处理器，但可以按照像素重新生成。<canvas>元素也需要JavaScript代码的支持。与<canvas>元素不同的是，SVG是一种使用XML描述2D图形的语言，SVG中所描述的2D图形元素是以矢量图形对象的方式存在，不依赖分辨率，可以附加JavaScript事件处理器。可以通过JavaScript来修改图形对象的属性，浏览器会自动重绘图形。注意，一些浏览器需要插件才能支持SVG。2.8内嵌元素<html><body><svgxmlns="/2000/svg"version="1.1"height="190"><polygonpoints="100,1040,180190,6010,60160,180"style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/></svg></body></html>DEMO内嵌元素2.8演示.mp42.8内嵌元素HTML本身的元素是有限的，特别是在HTML5之前的版本，开发者为了在HTML页面中实现多媒体应用和更复杂的客户端操作，就需要在HTML文档中增加各种插件对象以扩展文档的表现能力。自从1996年NetscapeNavigator2.0引入了对QuickTime插件的支持，插件这种开发方式为其它厂商扩展Web客户端的信息展现方式开辟了一条自由之路。微软公司迅速在IE3.0浏览器中增加了对ActiveX的插件对象支持，RealNetworks公司的Realplayer插件也很快在Netscape和IE浏览器中取得了成功。然而，随着HTML5标准的制定与应用，通过使用新技术（包括音频元素、视频元素、矢量图形元素、应用缓存）让浏览器直接支持相关的多媒体或交互应用，这种技术趋势必然导致Flash等很多传统的插件技术被新的技术标准取代。2.8内嵌元素Java小应用程序Java小应用程序（JavaApplet）凭借Java本身的跨平台性、安全性等优点，可以实现图形绘制、字体和颜色控制、动画和声音的播放、人机交互及远程数据访问等功能。ActiveXActiveX是Microsoft对于一系列面向对象程序技术和工具的称呼，其中主要的技术是组件对象模型（ComponentObjectModel，简称为COM）。ActiveX只能在Windows环境下运行。FlashFlash是一种基于矢量图像的交互式多媒体技术。矢量图像也称为面向对象的图像，它使用称为矢量的直线和曲线来描述图像。2.9结构元素HTML5中支持的多种结构元素来呈现文档中的各节（Sections）内容，包括HTML4中已经定义的<body>、<address>、<h1>、<h2>、<h3>、<h4>、<h5>和<h6>元素，以及HTML5中新定义的<article>、<section>、<nav>、<aside>、<header>和<footer>元素。元素语义body定义文档的主体。h1到h6定义标题1到标题6。address定义文档作者或拥有者的联系信息。article定义外部的内容。section定义文档中的节。如章节、页眉、页脚或文档中的其他部分。nav定义导航链接的部分。aside定义article以外的内容，且与article的内容相关。header定义文档的页眉。footer定义文档的页脚。2.9结构元素<html><body><h1>这是标题1</h1><h2>这是标题2</h2><h3>这是标题3</h3><h4>这是标题4</h4><h5>这是标题5</h5><h6>这是标题6</h6></body></html>2.9结构元素在HTML5中新增了<article>、<section>、<nav>、<aside>、<header>、<footer>等新元素，而这些元素的作用主要体现在语义上，主要目的是增加文档的可读性和搜索引擎优化，在内容展示方面并没有特别的改变。为了方便理解，这里将这些结构元素和word文档结构进行类比：<header>相当于页眉，<footer>相当于页脚，<article>相当于正文，<section>是正文中包含的各个部分（可以理解为段落或章节），<aside>是正文的注解，而<nav>则是网站中经常使用的导航栏。DEMO结构元素2.9演示.mp42.10编辑元素HTML5中的编辑元素（Edits）包括<ins>和<del>，它们配合可以描述对文档的更新和修正。元素语义HTML支持版本ins定义文档的其余部分之外的插入文本。4、5del定义文档中已删除的文本。4、52.11编辑元素<html><body><insdatetime="2016-03-1600:00Z"><p>我喜欢吃苹果。</p></ins><deldatetime="2015-10-11T01:25-07:00"><p>我喜欢吃梨。</p></del></body></html>2.11表单元素<form>元素在页面中产生表单，表单提供了用户与Web服务器的信息交互功能，是Web技术的要素之一。表单接受用户信息后，把信息提供给服务器，然后由服务器端的应用程序处理信息，把处理结果返给用户并向用户显示。表单的定义元素是<form>。表单中可以包含<form>、<input>、<label>、<button>、<select>、<datalist>、<optgroup>、<option>、<textarea>、<keygen>、<output>、<progress>、<meter>、<fieldset>、<legend>等子元素。2.11表单元素元素语义HTML支持版本form定义供用户输入的HTML表单。4、5input定义输入控件4、5label为input元素定义元素，响应鼠标点击。5button定义按钮。4、5select定义选择列表（下拉列表）。4、5datalist与input元素配合使用，定义input可能的值。5optgroup定义选择列表中相关选项的组合4、5option定义选择列表中的选项4、5textarea定义多行的文本输入控件4、5keygen定义用于表单的密钥对生成器字段。5output定义不同类型的输出，比如脚本的输出。5progress定义运行中的进度。5meter定义度量衡。5fieldset将表单内的相关元素分组。4、5legend定义fieldset元素的其余内容的标题。4、52.11表单元素<form>元素的4个主要属性分别是action、method、enctype、target。例如下面的代码：<formmethod="post"action="URL"enctype="text/plain"target="_self"><form>action属性该属性值指定了提交表单时对应的服务器程序地址。method属性method属性指定表单中的输入数据的传输方法，它的取值是get或post。enctype属性enctype属性指定表单中输入数据的编码方法。target属性target属性用来指定目标窗口的打开方式。2.11表单元素input元素定义输入控件，用来搜集用户信息。属性功能name定义输入控件的名称type指定控件的类型，默认值是textmaxlength规定控件允许输入的字符的最大长度minlength规定控件允许输入的字符的最小长度size规定控件输入域的大小readonly规定用户是否可以修改其中的值。required规定是否是必填信息multiple规定是否可以填写多个值pattern定义用户输入的字符串模板max规定可填写的最大值min规定可填写的最小值step规定数据的步长list列出输入的选项placeholder给出文本框的占位字符串，可实现文本框水印效果checked提供复选框和单选按钮的初始状态value提供控件输入域的初始值src定义以提交按钮形式显示的图像的URL2.11表单元素<input>元素的属性type的取值及意义值功能hidden隐藏的输入字段，把表单中的一个或多个组件隐藏起来text单行的输入文本框，接受任何形式的输入，默认宽度为20个字符tel电话号码输入url网络地址URL输入email电子邮件地址输入password密码字段，该字段中的字符用*替代date日期输入time时间输入number数字输入range范围输入color颜色输入checkbox复选框，提供多项选择radio单选按钮，提供单项选择file文件上传submit提交按钮，单击提交按钮会把表单数据发送到服务器image图像形式的提交按钮，单击图像，发送表单信息提交服务器reset重置按钮，把表单中的所有数据恢复为默认值button可点击按钮，可用于创建提交按钮、复位按钮和普通按钮2.11表单元素<formmethod="post"action="travel.jsp">

请输入姓名：<inputtype="text"name="textname"size="12"maxlength="6"/><br/>

请输入密码：<inputtype="password"name="passname"size="12"maxlength="6"/><br/>

上传的文件：<inputtype="file"name="filename"size="12"maxlength="6"/><br/>

请选择旅游城市，可多选<inputtype="checkbox"name="复选框1">北京……

请选择付款方式

<inputtype="radio"name="支付方式"id="card“checked="checked"><labelfor="card">信用卡</label>……<br/>

出发日期<inputtype="date"/>

出发时间<inputtype="time"/><br/><inputtype="reset"name="复位按钮"value="复位"><inputtype="submit"name="提交按钮"value="确定"><inputtype="button"name="close"value="关闭当前窗口"onclick="window.close()"></form>2.11表单元素<fieldset>元素可以将表单中的一部分内容组合起来，生成一组相关表单的字段。当一组表单元素作为子元素放到<fieldset>元素内时，浏览器通常会以加上边框的方式进行显示。作为<fieldset>元素的第一个子元素，<legend>元素可以为<fieldset>元素加上标题。2.11表单元素<html><body><fieldset><legend>健康信息：</legend><form><label>身高：<inputtype="text"/></label><label>体重：<inputtype="text"/></label></form></fieldset></body></html>2.11表单元素<select>元素定义下拉式列表框和滚动式列表框。当提交表单时，浏览器会提交选定的项目，或者收集用逗号分隔的多个选项，将其合成一个单独的参数列表。在将<select>表单数据提交给服务器时，同时还包括了<select>元素的name属性值。属性功能disabled规定禁用该下拉列表，被禁用的下拉列表既不可用，也不可点击。可以使用JavaScript来清除disabled属性，以使下拉列表变为可用状态multiple规定可选择多个选项name规定下拉列表的名称size规定下拉列表中可见选项的数目2.11表单元素<select>元素的语法如下所示:<selectname="下拉列表名称"size="下拉列表显示的条数"><optionvalue="控件的初始值"selected="selected">选项描述</option> <optionvalue="控件的初始值">选项描述</option></select>使用<select>元素定义下拉列表框时，由<option>元素定义列表框的各个选项。<option>元素位于<select>元素内部。一个<select>元素可以包含多个<option>元素。<option>元素要与<select>元素一起使用，否则元素是无意的。2.11表单元素<html><body><formmethod="post"action="travel.jsp"><inputlist="cars"/><datalistid="cars"><optionvalue="BMW"label="BMW"><optionvalue="Ford"label="Ford"><optionvalue="Volvo"label="Volvo"></datalist></form></body></html>DEMO表单元素2.11演示.mp42.12HTML中的颜色设置HTML中的颜色是由红（Red）、绿（G

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论