3、基本概念、HTML知识、浏览器知识、网站和网页的开发工具等知识。章节概要1.1认识网页和网站1.1.1网页和网站的概念网页(WebPage)就是一个文档,通常由HTML语言编写,能够被浏览器解析和显示。用户在浏览器中输入一个URL(UniformResourceLocation)地址就能访问网页。1、认识网页1.1网页和网站概述1.1.2网页的构成要素文字图像超链接多媒体1.1网页和网站概述1.1.2网页的构成要素文字是网页信息的主体,能够准确地传达网页要表达的信息,是网页中不可或缺的构成要素,纯文本的存储空间也很小,在网络传输中具有优势,也有利于搜索引擎采集。1、文字1.1
4、网页和网站概述1.1.2网页的构成要素图像也是网页中必不可少的元素,相比文字,图像更加直观更具有视觉冲击力,能够很快吸引访问者的眼球。适当应用图片可以避免网页中纯文字给人的枯燥感,为网页增加活力,使网页更加生动。网页上使用的图像一般为JPG、PNG和GIF格式。2、图像1.1网页和网站概述1.1.2网页的构成要素超链接是从一个网页到其他目标的指向,其他目标通常是一个网页,也可以是一个图像、文件、电子邮件地址甚至是同一个网页中的其他位置。网页中的超链接通常设置在文字上,也可以是图像、视频或按钮等,当我们把鼠标移到超链接上,指针会变成手型,单击鼠标左键,会加载超链接指向的目标内容。一个网站
6、的网页,通常它决定了访问者对网站的第一印象,所以首页的设计非常重要,不仅要把网站最重要的内容在首页展示出来,还要兼顾美观,要给访问者留下深刻印象,引起他们的兴趣。当然,网站首页还要兼顾导航功能,通过超链接引导访问者浏览网站的其他页面。静态网站的首页文件通常命名为index.html或default.html。1、首页1.1网页和网站概述1.1.3网站构成列表页一般用于展示新闻列表或产品列表信息,有的还可以对列表展示的信息按条件进行筛选显示,列表页在设计时要注重展示的排版效果,合理安排文字和图片。2、列表页1.1网页和网站概述1.1.3网站构成详情页对应列表页,当访问者在列表页上想了解某
7、条新闻或某个产品的详细信息时,单击打开详情页,会展示该条新闻或产品的详细信息,商城类的网站一般在详情页中提供购买功能。3、详情页1.1网页和网站概述1.1.4网站类型门户类网站主要功能是提供信息资讯和综合服务,属于综合性质的网站,网站内容的覆盖面广,面向的用户群体也很多,在网站设计制作方面更加高要求、精细化。比如新浪、网易、搜狐等都属于门户类网站。1、门户类网站1.1网页和网站概述1.1.4网站类型互联网是企业进行形象宣传和网络营销的平台,很多企业都会建立一个企业网站,让别人能从网上了解自己,不但对企业的形象是很好的宣传,同时也可以促进产品的网络销售。企业类网站的设计要符合企业的文化,
9、网站的用户越来越多,比如爱奇艺、优酷等都属于视频类网站。4、视频类网站1.1网页和网站概述1.1.4网站类型个人网站是个人为某些爱好、科普或展示自己等创建的网站,给相同爱好的人提供一个了解知识、相互交流的平台或让其他人了解自己。个人网站一般有比较鲜明的特点,个性较强,没有太多的设计限制。5、个人网站1.2HTML概述HTML是HypertextMarkupLanguage(超文本标记语言)的缩写,是一种用来编写超文本文档的标记语言,HTML是由Web的发明者TimBerners-Lee和同事DanielW.Connolly于1990年创立的一种标记语言,它最早源于SGML(
10、StandardGeneralMarkupLanguage,标准通用化标记语言)的应用。用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台(如UNIX,Windows等)。利用HTML将所需表达的信息按某种规则写成HTML文件,再经过浏览器的解析,将HTML文件翻译并展示出来,就是我们所见到的网页。到目前为止,HTML已经发展了多个版本,其中最著名的就是HTML4,2010年又推出HTML5.0,一经推出就受到各大浏览器的支持。1.2.1什么是HTML5.0HTML5是HTML的最新修订版本,是对以前版本的继承和发展,旧的HTML标签在HTML5中依然适用。HTM
12、。1、标记1.2HTML概述1.2.2HTML文档的格式标记位于标记之后,称为根标记,用于告知浏览器其自身是一个HTML文档,标记标志着HTML文档的开始,标记标志着HTML文档的结束,在它们之间是文档的头部和主体内容。2、标记1.2HTML概述1.2.2HTML文档的格式标记用于定义HTML文档的头部信息,也称头部标记,主要用来封装其他位于文档头部的标记,例如、及等,用来描述文档的标题、作者以及与其他文档的关系。需要注意的是,一个HTML文档只能含有一对标记,绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。3、标记1.2HTML概述1.2.2HTML文档的格式标记用于定
16、直接绑定在Windows操作系统中,一般不需要单独下载和安装。目前还有一些用户在使用低版本的IE浏览器,所以在网页设计中,要充分考虑这些用户的兼容性,也就是说,设计的网页要在IE浏览器低版本比如IE6、IE7等中测试兼容性。1、IE浏览器(InternetExplorer)1.3浏览器概述1.3.2常用浏览器谷歌浏览器是一款由Google公司开发一款设计简单、高效的网页浏览器,该浏览器基于其他开源软件撰写。早期谷歌浏览器采用WebKit内核,2013年后采用Blink内核。谷歌浏览器自带开发者工具,也可以实现代码修改并预览。在谷歌浏览器右上角的选项中单击选择“更多工具-开发者工具”(或者
17、按快捷键F12),打开开发者工具后,在浏览器右侧出现一个调试面板。包括网页HTML调试查看和CSS代码调试,还有一些其他资源面板。谷歌浏览器调试的好处是可以实现元素定位,把鼠标放在指定的元素上,就可以在浏览器的上面视图中加灰突出显示所对应的元素。2、谷歌浏览器(GoogleChrome)1.3浏览器概述1.3.2常用浏览器火狐浏览器是一个自由及开放源代码的网页浏览器,使用Gecko排版引擎,支持多种操作系统,如Windows、MacOSX及GNU/Linux等。Firebug是火狐浏览器一个开发插件,主要用来调试浏览器的兼容性,它集HTML查看和编辑、JavaScript控制台、网络
18、状况监视器于一体,是开发HTML、CSS和JavaScript的好帮手。新版火狐浏览器中已经将Firebug整合到“Web开发者”工具中,用户可以在火狐浏览器菜单栏选择“打开菜单-Web开发者”选项,再选择“查看器”命令,即可查看网页的各个模块。3、火狐浏览器(MozillaFirefox)1.4网站与网页开发工具网页开发工具很多,常用的编辑器软件比如记事本都可以用来进行HTML编码和制作网页,但记事本没有任何代码提示功能,所以使用不太方便。网站开发时应该选择效率高的工具,常用的网页开发工具有AdobeDreamweaver、VisualStudioCode、SublimeText
19、和WebStorm等。1.4网站与网页开发工具1.4网站与网页开发工具1.4网站与网页开发工具1.4.1AdobeDreamweaverAdobeDreamweaver,简称DW,中文名称梦想编织者,Dreamweaver是集网页制作和管理网站于一身的所见即所得网页代码编辑器。利用对HTML、CSS、JavaScript等内容的支持,设计师和程序员可以方便快速地进行网页设计。目前常用的版本是AdobeDreamweaverCS6和AdobeDreamweaverCC。1.4网站与网页开发工具1.4.2VisualStudioCodeVisualStudioC
20、ode是Microsoft开发的一个可以运行于MacOSX、Windows和Linux之上的针对于编写现代Web和云应用的跨平台源代码编辑器。这款软件具备了很多特性,包括语法高亮(syntaxhighlighting)、可定制的热键绑定(customizablekeyboardbindings)、括号匹配(bracketmatching)以及代码片段收集(snippets)等。该编辑器支持多种语言和文件格式的编写,目前已经支持了37种语言或文件。1.4网站与网页开发工具1.4.3SublimeTextSublimeText是一个跨平台的编辑器,同时支持Wind
21、ows、Linux、MacOSX等操作系统,是由程序员JonSkinner于2008年1月份所开发出来。SublimeText具有漂亮的用户界面和强大的功能。SublimeText还具有良好的扩展功能,官方称之为安装包(Package),可以根据需要安装和卸载安装包。1.4网站与网页开发工具1.4.4jetbrainsWebStormWebStorm是jetbrains公司的一款开发工具,被开发者誉为“Web前端开发神器”、“最强大的HTML5编辑器”、“最智能的JavaScriptIDE”等。可以访问WebStorm的官方网站/webstorm/download/下载最新
22、版本的安装包,下载后根据提示按步骤安装即可。1.4网站与网页开发工具我们在设计一个网站时,首先要确定网站主题、规划网站结构、寻找素材、设计网页效果图等,这些工作完成后,我们要创建网站文件夹,开始利用AdobeDreamweaver、SublimeText等软件制作首页和子页面。下面通过一个简单的例子来说明制作网站和页面的基本过程。案例1-1设计一个网站和网站的起始页面在本地硬盘中创建一个网站文件夹,如chapter1,用来存放网站中所有的文件,在chapter1文件夹内再新建images、css、video、audio、fonts等子文件夹,用来分类存放图片、样式文件、视频文件、音频文件
23、和字体文件等,具体网站文件夹结构如图1-5所示。1、创建网站文件夹案例1-1设计一个网站和网站的起始页面打开AdobeDreamweaver软件,选择“站点-新建站点”,在弹出的对话框中输入站点名称,单击“浏览文件夹”图标,选择D盘的网站文件夹,如图1-6所示。2、创建站点案例1-1设计一个网站和网站的起始页面在AdobeDreamweaver软件中选择菜单“文件-新建”命令,在打开的对话框中选择“空白页”,在“文档类型”的下拉列表中选择“HTML5”,如图1-8所示。单击“创建”按钮即创建了一个空白页面,单击菜单“文件-保存”命令,把网页以文件名index.html保存在网站文件夹内,
25、ML5标签的语法格式12熟练使用文档头部标签文本控制标签图像标签了解HTML5新增结构性标签3掌握了解掌握掌握熟练使用列表标签超级链接标签4本章将对HTML5中,基本元素标签与新增元素标签的作用以及标准属性的使用方法予以详细介绍。HTML5中引入了很多新的标签元素和属性,这是HTML5的一大亮点,这些新增元素使文档结构更加清晰明确,属性则使标签的功能更加强大,掌握这些元素和属性是正确使用HTML5构建网页的基础。章节概要目录2.1HTML标签语法2.2文档头部标签2.3文本控制标签2.4图像标签2.5列表标签2.6超级链接标签2.7音频和视频标签2.8HTML5新增结构性标签知识架构2.
26、1HTML标签语法.2单标签和双标签注释标签2.1.3标签的属性2.1HTML标签语法什么是标签?所谓标签就是放在“”标记符中表示某个功能的编码命令,也称为HTML标记或HTML元素。2.1.1单标签和双标签双标签单标签双标签也称体标签,是指由开始和结束两个标签符组成的标签。单标签也称空标签,是指用一个标签符号即可完整地描述某个功能的标签。内容表示该标签的作用开始,一般称为“开始标签表示该标签的作用结束,一般称为“结束标签”注释标签如果需要在HTML文档中不需要显示在页面中的注释文字,就需要使用注释标签。2.1.3标签的属性标签的属性字体位置字号颜色语法格式内容以
29、特殊字符标签案例文本控制标签综合应用2.3.1标题和段落标签h1h2h3h4h5h6标题标签2.3.1标题和段落标签段落标签主要用于把文字有条理地显示出来基本语法格式段落文本2.3.1标题和段落标签换行标签用于实现段落强制换行的效果。换行标签的效果2.3.2文本样式标签文本样式标签用来控制网页中文本的字体、字号和颜色。基本语法格式文本内容2.3.2文本样式标签文本样式标签常用属性62.3.2文本样式标签颜色属性值值属性颜色名通过颜色名指定文本颜色(例如:“red”)/html/html-colornames.html十六进制颜色值通过十六进制颜色值指定文本颜色(例如:“#ff0000”
30、)RGB颜色值通过RGB颜色值指定文本颜色(例如:“rgb(255,0,0)”)2.3.3格式化文本标签2.3.4特殊字符标签2.3.5水平线标签水平线标签的格式为:示例如下所示。文本控制标签综合应用案例常用属性语法知识架构2.4图像标签.2支持的图像格式绝对路径和相对路径2.4.3img标签案例图像标签的综合应用2.4.1支持的图像格式用法GIFPNGJPGPNGJPGGIF最突出的地方就是它支持动画,同时GIF也是一种无损的图像格式,也就是说修改图片之后,图片质量几乎没有损失。再加上GIF支持透明(全透明或全不透明),因此很适合在互联网上使用。GIF格式常常用于
31、Logo、小图标及其他色彩相对单一的图像。JPGSVG2.4.1支持的图像格式用法GIFPNGJPGSVGPNG包括PNG-8和真色彩PNG(PNG-24和PNG-32)。相对于GIF,PNG最大的优势是体积更小,支持alpha透明(全透明,半透明,全不透明),并且颜色过渡更平滑,但PNG不支持动画。图片保存为PNG-8会在同等质量下获得比GIF更小的体积JPGJPG2.4.1支持的图像格式用法GIFPNGJPGJPGSVGJPG所能显示的颜色比GIF和PNG要多的多,可以用来保存超过256种颜色的图像,但是JPG是一种有损压缩的图像格式,这就意味着每修改一次图片都会造成一些图像数据的丢
32、失。小图片考虑GIF或PNG-8,半透明图像考虑PNG-24,类似照片的图像则考虑JPG。2.4.1支持的图像格式用法GIFPNGJPGJPG严格来说SVG应该是一种开放标准的矢量图形语言,可让你设计激动人心的、高分辨率的Web图形页面。用户可以直接用代码来描绘图像。,可以用任何文字处理工具打开SVG图像,通过改变部分代码来使图像具有交互功能,SVG2.4.2绝对路径和相对路径什么是路径?2.4.2绝对路径和相对路径实际工作中,通常新建一个文件夹专门用于存放图像文件。路径这时再插入图像,就需要采用“路径”的方式来指定图像文件的位置。通过设置“路径”来帮助浏览器找到图像文件。图像文件文件夹
34、件夹:在文件名之前加入“./”,如果是上两级,则需要使用“././”,以此类推,如绝对路径2.4.2绝对路径和相对路径2.4.3img标签浏览网页时经常会看到精美的图片在网页中如何才能显示图像呢?2.4.3img标签基本语法格式src属性用于指定图像文件的路径和文件名2.4.3img标签widthheight用来定义图片的宽度和高度,通常我们只设置其中的一个,另一个会按原图等比例显示。border为图像添加边框、设置边框的宽度。但边框颜色的调整仅仅通过HTML属性是不能够实现的。alt图像的替换文本属性,在图像无法显示时告诉用户该图片的内容。2.4.3img标签vspacehsp
35、aceHTML中通过vspace和hspace属性可以分别调整图像的垂直边距和水平边距。align图像的对齐属性align。用于调整图像的位置2.4.3img标签常用属性语法图像标签的综合应用案例知识架构2.5列表标签.2无序列表有序列表2.5.3自定义列表案例列表标签的综合应用什么是列表?进一步了解列表说到列表大家并不陌生,在浏览网页时,随处可见。HTML语言提供了3种常用的列表,分别为无序列表、有序列表和定义列表。无序列表有序列表定义列表网页中最常用的列表,其各个列表项之间没有顺序级别之分,通常是并列的。有排列顺序的列表,其各个列表项按照一定的顺序排列。用于对术语或名词
36、进行解释和描述。与无序和有序列表不同,定义列表的列表项前没有任何项目符号。2.5.1无序列表以某教育机构的官网导航栏为例,认识无序列表。无序列表有序列表定义列表导航栏结构清晰,各项之间(如“网页平面”与“java培训”)排序不分先后,这个导航栏就可以看做一个无序列表。2.5.2有序列表无序列表有序列表定义列表定义无序列表的基本语法格式如下:列表项1列表项2列表项3标签用于定义无序列表标签用于描述具体的列表项每对中至少应包含一对。注意:2.5.3有序列表有序列表即为有排列顺序的列表。网页中常见的歌曲排行榜、游戏排行榜等都可以通过有序列表来定义。无序列表有序列表定义列表以百度歌曲排行榜
37、为例,认识有序列表。2.5.3自定义列表无序列表有序列表定义列表以某教育机构师资介绍为例,认识定义列表定义列表常用于图文混排,其中标签中插入图片,标签中放入对图片解释说明的文字。标签例6-32.5.3自定义列表定义列表的基本语法格式如下:名词1名词1解释1名词1解释2.名词2名词2解释1名词2解释2.无序列表有序列表定义列表标签用于指定定义列表标签用于指定术语名词标签用于对名词进行解释和描述列表标签的综合应用案例知识架构2.6超链接标签.2创建超级链接超级的分类2.6.3锚点链接案例超级链接综合应用2.6.1创建超级链接一个网站通常由多个页面构成,进入网
39、。文本或图像基本语法格式2.6.2超级的分类按照链接源分类超级链接通常可以分为文本超链接和非文本超链接两种。文本超链接是把文本作为源端点,而非文本超链接是用除文本外的其他对象作为源端点。上例介绍的就是最基本的文本链接。按照链接目标分类超级链接可分为外部链接和内部链接。内部链接的目标端点是本站点内的其他文档,可以实现同一站点内网页互相跳转。外部链接的目标端点在本站点之外,利用外部链接可以跳转到其他网站。2.6.3锚点链接如果网页内容较多,页面过长。浏览网页时就需要不断地拖动滚动条,来查看所需要的内容。效率较低不方便2.6.3锚点链接为了提高信息的检索速度HTML语言提供了一种特殊的链接锚
40、点链接,通过创建锚点链接,用户能够快速定位到目标内容。2.6.3锚点链接创建锚点链接分为两步1使用“链接文本”创建链接文本2使用相应的id名标注跳转目标的位置超级链接的综合应用案例知识架构2.7音频和视频标签.2H5支持的音视频格式插入视频2.7.3插入音频2.7.4音视频中的source元素2.7.5浏览器兼容性案例音视频标签综合应用案例2.7.1H5支持的音视频格式在HTML5出现之前并没有将视频和音频嵌入到页面的标准方式,多媒体内容在大多数情况下都是通过第三方插件或集成在Web浏览器的应用程序置于页面中。复杂冗长运用HTML5中新增的video标签和audio标签可
41、以避免这样的问题。2.7.1H5支持的音视频格式运用HTML5的video和audio标签可以在页面中嵌入视频或音频文件,如果想要这些文件在页面中加载播放,还需要设置正确的多媒体格式。视频格式视频格式包含视频编码、音频编码和容器格式。音频格式音频格式是指要在计算机内播放或是处理音频文件。2.7.1H5支持的音视频格式HTML5支持的视频格式oggmpeg4webm2.7.1H5支持的音视频格式HTML5支持的音频格式oggmpeg4webm2.7.2插入视频使用video嵌入视频基本语法格式:浏览器不支持video标签例如:使用video标签来嵌入视频2.7.2插入视频播放进度条
42、声音全屏2.7.2插入视频属性值描述autoplayautoplay当页面载入完成后自动播放视频。looploop视频结束时重新开始播放。preloadpreload如果出现该属性,则视频在页面加载时进行加载,并预备播放。如果使用autoplay,则忽略该属性。posterurl当视频缓冲不足时,该属性值链接一个图像,并将该图像按照一定的比例显示出来。Video元素的其他属性2.7.3插入音频使用audio嵌入音频基本语法格式如下:浏览器不支持audio标签例如:使用audio标签来嵌入音频2.7.3插入音频音频控件,用于控制音频文件的播放状态播放进度条声音2.7.3插入音频audi
43、o元素的其他属性属性值描述autoplayautoplay当页面载入完成后自动播放音频。looploop音频结束时重新开始播放。preloadpreload如果出现该属性,则音频在页面加载时进行加载,并预备播放。如果使用autoplay,则忽略该属性。注意:以上列举的audio元素的属性和video元素是相同的,这些相同的属性在嵌入音视频时是通用的。2.7.4音视频中的source元素在HTML5中,运用source元素可以为video元素或audio元素提供多个备用文件。基本语法格式src用于指定媒体文件的URL地址。type指定媒体文件的类型。2.7.5浏览器的兼容性虽然html5支
44、持ogg、mpeg4和webm的视频格式以及ogg、mp3和wav的音频格式,但各浏览器对这些格式却不完全支持。视频格式格式IE9Firefox4.0Opera10.6Chrome6.0Safari3.0ogg支持支持支持mpeg4支持支持支持webm支持支持支持音频格式ogg支持支持支持mp3支持支持支持wav支持支持支持音视频标签的综合应用案例知识架构2.8HTML5新增结构性标签为了增强网页的可读性,HTML5为提供了一系列语义标签用来描述网页的结构。这些特殊的标签可以见名知义,使页面的结构更加清晰,方便维护和开发。HTML5语义结构标签标签标签代表文档、页面或者应用程序中
50、值(默认为1像素)width规定表格的宽度像素值height规定表格的高度像素值align规定表格相对周围元素的对齐方式left、center、rightbgcolor规定表格的背景颜色预定义的颜色值、十六进制#RGB、rgb(r,g,b)3.1表格标签标签属性在实体表格中的表现如下图所示:widthheightbordercellspacingcellspadding标签的属性3.1表格标签标签属性在实体表格中的表现如下图所示:标签的属性align=centerbgcolor=CCCCCC3.1表格标签标签的属性属性描述常用属性值height规定表格的行高像素值align定义表格行的
51、内容对齐方式left、center、right、justifyvalign规定表格行中内容的垂直对齐方式top、middle、bottombgcolor规定表格行的背景颜色预定义的颜色值、十六进制#RGB、rgb(r,g,b)3.1表格标签标签的属性属性名含义常用属性值width规定表格单元格的宽度像素值height规定表格单元格的高度像素值align规定单元格内容的水平对齐方式left、center、right、justifyvalign规定单元格内容的垂直排列方式top、middle、bottombgcolor规定单元格的背景颜色预定义的颜色值、十六进制#RGB、rgb(r,g,b)c
52、olspan规定单元格可横跨的列数(用于合并水平方向的单元格)正整数rowspan规定单元格可横跨的行数(用于合并竖直方向的单元格)正整数3.1表格标签标签的属性知识概述标签用来设置表头,其文本默认加粗居中显示。表头表头3.1表格标签案例3-1表格的综合应用3.2认识表单什么是表单?3.2认识表单“表单”在网页中主要负责数据采集功能和向服务器传送数据。如注册页面的用户名密码输入、网上订单页面等,都是以表单的形式来收集用户信息,并将这些信息传递给后台服务器,实现网页与用户间的数据传输和交互,本节将对表单进行详细的讲解。3.2认识表单以电商注册页面为例,分析表单的构成。提示信息表单域表
53、单控件表单的构成3.2认识表单一个表单中通常需要包含一些说明性的文字,提示用户进行操作。相当于一个容器,用来容纳所有的表单控件和提示信息。包含了具体的表单功能项,如文本框、密码框、复选框、单选框等。提示信息表单控件表单域表单的构成3.2认识表单创建表单知识概述标签用来创建表单。各种表单控件【结论】与之间的表单控件是由用户自定义的,action、method和name为表单标签的常用属性。3.2认识表单表单属性action属性定义在提交表单时接受并处理表单数据的服务器程序的url地址。action属性method属性规定在提交表单时所用的HTTP方法(GET或POST)met
55、type属性为其最基本的属性,其取值有多种,用于指定不同的控件类型。标签的type属性在HTML5中,标签拥有多个type属性值,用于定义不同的控件类型。3.3表单控件单行文本输入框单行文本输入框常用来输入简短的信息,如用户名、账号、证件号码等,常用的属性有name、value、maxlength。在HTML5中,标签拥有多个type属性值,用于定义不同的控件类型。密码输入框密码输入框用来输入密码,其内容将以圆点或星号的形式显示。标签的type属性3.3表单控件标签的type属性在HTML5中,标签拥有多个type属性值,用于定义不同的控件类型。单选按钮单选按钮用于单项选择,如选择性别、是
56、否操作等。男3.3表单控件标签的type属性在HTML5中,标签拥有多个type属性值,用于定义不同的控件类型。复选框复选框常用于多项选择,如选择兴趣、爱好等,可对其应用checked属性,指定默认选中项。唱歌3.3表单控件标签的type属性在HTML5中,标签拥有多个type属性值,用于定义不同的控件类型。普通按钮button普通按钮类型常用于在用户点击按钮时启动JavaScript程序。3.3表单控件标签的type属性在HTML5中,标签拥有多个type属性值,用于定义不同的控件类型。提交按钮提交按钮用于向服务器发送表单数据。数据会发送到表单的action属性中指定的页面。
57、3.3表单控件标签的type属性在HTML5中,标签拥有多个type属性值,用于定义不同的控件类型。重置按钮重置按钮会清除表单中的所有数据。3.3表单控件标签的type属性在HTML5中,标签拥有多个type属性值,用于定义不同的控件类型。图像形式的提交按钮图像形式的提交按钮与普通的提交按钮在功能上基本相同,只是它用图像替代了默认的按钮,外观上更加美观。3.3表单控件标签的type属性在HTML5中,标签拥有多个type属性值,用于定义不同的控件类型。隐藏域隐藏域对于用户是不可见的,通常用于后台的程序。3.3表单控件标签的type属性在HTML5中,标签拥有多个type属性值,用于
60、出现错误提示。请输入数值:3.3表单控件标签的的其他属性除了type属性之外,标签还可以定义很多其他的属性,以实现不同的功能。autofocus属性用于指定页面加载后是否自动获取焦点,将标签的属性值指定为true时,表示页面加载完毕后会自动获取该焦点。autofocus属性13.3表单控件除了type属性之外,标签还可以定义很多其他的属性,以实现不同的功能。HTML5中的form属性,可以把表单内的子元素写在页面中的任一位置,只需为这个元素指定form属性并设置属性值为该表单的id即可。form属性2标签的的其他属性3.3表单控件标签的的其他属性除了type属性之外,标签还可以定义很多