深圳网站制作,在上篇文章中介绍过几种静态页面制作的方法,今天接上篇文章分享静态页面制作,表单标签的的属性与制作方法。
一、表单标签表单标签主要用来制作交互式表单,主要包括下面几个标签。
☑ <form>:定义供用户输入的HTML表单。
☑ <input>:定义输入控件。
☑ <textarea>:定义多行的文本输入控件。
☑ <button>:定义按钮。
☑ <select>:定义选择列表(下拉列表)。
☑ <optgroup>:定义选择列表中相关选项的组合。
☑ <option>:定义选择列表中的选项。
☑ <label>:定义input元素的标注。
☑ <fieldset>:定义围绕表单中元素的边框。
☑ <legend>:定义fieldset元素的标题。
☑ <datalist>:定义下拉列表。
☑ <keygen>:定义生成密钥。
☑ <output>:定义输出的一些类型
【示例8】新建文档,保存为test7.html。输入下面代码,分别定义单行文本框、多行文本框、复选框、单选按钮、下拉菜单和提交按钮的表单。按F12键,在浏览器中预览,则显示效果如图所示。设计表单界面文档结构块标签文档结构块标签主要用于定义符合标准化设计需求的文档结构块,主要包括下面几个标签。
☑ <div>:定义文档中的分区或节(division/section),节表示内容结构块。
☑ <span>:用来组合文档中的行内元素。
☑ <header>:定义section或page的页眉。
☑ <footer>:定义section或page的页脚。
☑ <section>:定义section。
☑ <article>:定义文章。
☑ <aside>:定义页面内容之外的内容。
☑ <details>:定义元素的细节。
☑ <dialog>:定义对话框或窗口。
☑ <summary>:为<details>元素定义可见的标题。
二、编程标签编程标签用于设计复杂的参数配置、程序设计或者样式代码,主要包括下面几个标签。
☑ <style>:定义文档的样式信息。
☑ <script>:定义客户端脚本。
☑ <noscript>:定义针对不支持客户端脚本的用户的替代内容。
☑ <embed>:为外部应用程序(非HTML)定义容器。
☑ <object>:定义嵌入的对象。
☑ <param>:定义对象的参数。
1、HTML属性每个HTML标签还包含很多属性,但是大部分属性都是公共的。公共属性大致可分为基本属性、语言属性、键盘属性、内容属性和延伸属性等类型。基本属性基本属性主要包括下面3个,这3个基本属性为大部分元素所拥有。
☑ class:定义类规则或样式规则。
☑ id:定义元素的唯一标识。
☑ style:定义元素的样式声明。
2.语言属性语言属性主要用来定义元素的语言类型,包括两个属性。
☑ lang:定义元素的语言代码或编码。
☑ dir:定义文本的方向,包括ltr和rtl取值,分别表示从左向右和从右向左。
【示例1】分别为网页代码定义了中文简体的语言,字符对齐方式为从左到右的方式。第二行代码为body定义了美式英语。<htmlxmlns="http://www.w1.org/1999/xhtml"dir="ltr"xml:lang="zh-CN"><bodyid="myid"lang="en-us">
3.键盘属性键盘属性定义元素的键盘访问方法,包括两个属性。
☑ accesskey:定义访问某元素的键盘快捷键。
☑ tabindex:定义元素的Tab键索引编号。accesskey属性可以使用快捷键(Alt+字母)访问指定URL,但是浏览器不能很好地支持,在IE中仅激活超链接,需要配合Enter键确定,而在Firefox中没有反应。
【示例2】在导航菜单中经常设置快捷键。
<ahref="http://www.mysite.cn/"accesskey="a">按住Alt键,按A键可以链接到mysite首页</a>tabindex属性用来定义元素的Tab键访问顺序,可以使用Tab键遍历页面中的所有链接和表单元素。遍历时会按照tabindex的大小决定顺序,当遍历到某个链接时,按Enter键即可打开链接页面。
例如:<ahref="#"tabindex="1">Tab1</a><ahref="#"tabindex="3">Tab3</a><ahref="#"tabindex="2">Tab2</a>
4.内容属性内容属性定义元素包含内容的附加信息,这些信息对于元素来说具有重要的补充作用,避免元素本身包含信息不全而被误解。内容语义包括5个属性。
☑ alt:定义元素的替换文本。
☑ title:定义元素的提示文本。
☑ longdesc:定义元素包含内容的大段描述信息。
☑ cite:定义元素包含内容的引用信息。
☑ datetime:定义元素包含内容的日期和时间。alt和title是两个常用的属性,分别定义元素的替换文本和提示文本。<ahref="URL"title="提示文本">超链接</a><imgsrc="URL"alt="替换文本"title="提示文本"/>替换文本(AlternateText)并不是用来做提示的(ToolTip),或者更加确切地说,它并不是为图像提供额外说明信息的。相反,title属性才负责为元素提供额外说明信息。当图像无法显示时,必须准备替换的文本来替换无法显示的图像,这对于图像和图像热点是必需的,因此alt属性只能用在img、area和input元素中(包括applet元素)。
【示例3】下面示例使用<input>标签定义一个图像按钮,但没有设置src属性值,则会显示“替换文本”的文字按钮效果。<inputtype="image"src="URL"alt="替换文本"/>.title属性为元素提供提示性的参考信息,这些信息是一些额外的说明,具有非本质性,因此该属性也不是一个必须设置的属性。当鼠标指针移到元素上面时,即可看到这些提示信息。深圳网站制作博纳网络编辑整理。关于静态页面制作属性方法本文今天就介绍到这里。如果您认为本文对您的工作有所帮助,敬请持续关注本站。