当前位置:文档之家› html基本标签元素

html基本标签元素

试验2 常用HTML标签使用实验目的:使用HTML标签熟练编写静态页面。

由于所选教材未涉及这部分内容,此处列出常用的标签。

详细的标记用法请参考网站:/html/index.asp1. 文件标记(1) <html></html><html>标记表示HTML文件从此处开始,到</html>标记结束,这对标记处在最外层,网页的内容写在此标记内。

(2) <head></head>这对标记表示此处是HTML文档的文件头。

文件头内部的信息一般不会在浏览器的正文区显示。

此标记对内可以插入其他标记,如网页标题标记<title></title>。

(3) <body></body>这对标记表示此处是网页的主体,一般不能省略,标记体的内容在浏览器正文区中显示,例如文字、图片和超链接等。

2.排版标记(1) <!-- -->标记<!-- -->标记在HTML文件中作注释用,对网页中的代码作说明,可以放在网页中的任何位置。

注释内容会返回到客户端浏览器上,但不显示。

例如在浏览器中输入,查看源文件可以看到此类注释。

(2) <p></p><p></p>标记对用于标示一个段落,两个相邻的段落间有一空行的间隔。

(3) <br>这个标记没有结束标记,表示换行。

<p></p>标记和<br>都能换行,但<br>换行后,上下两行的间距比较小,<p></p>标记换行后,上下两行有一空行的间距。

3.字体标记字体标记包括<STRONG>,<B>,<EM>,<I>,<FONT>等。

<font>标记用于定义字体、字号大小和颜色。

<font>标记的主要属性有face、size、color。

face属性用于设置字体,如:<font face=“宋体”>。

size属性用于设置字号,HTML中定义了7种字号,1号最小,7号最大,如:<font size=“4”>。

字号也可以用“磅”(px)表示。

color属性用于设置文本的颜色,color有三种方法来设定颜色,第一种方法用颜色名称,第二种方法用红、绿、蓝百分比的值来设定,第三种方法是用16进制的颜色代号还设定颜色。

如:<FONT COLOR=”RED”>红色字体设置</FONT><FONT COLOR=”RGB(70%,10%,30%)”>颜色设置</FONT><FONT COLOR=”#EF0000”>颜色设定</FONT>4.表格标记在网页中,表格主要分成排版表格和数据表格两种。

排版表格在浏览器中不显示边线,仅供排版、布局用。

数据表格在浏览器中显示边线或背景色,用于列表显示数据。

<table>标记表示表格的开始,</table>表示表格到此结束。

<tr></tr>表示表格中的一行。

<table></table>间如有n对<tr></tr>标记,表示此表格有n行。

<td></td>表示一行中的一列,一般写在<tr></tr>内。

<table>、<tr>、<td>间的嵌套关系为:<table><tr><td></td></tr></table>5.表单表单时系统和用户交互的重要手段。

用户在表单中填写数据,提交后,表单中的数据传递给后台程序处理,实现了客户端和服务器的交互。

(1)<form></form>标记<form>和</form>标记表示表单的开始和结束。

在表单标记中可以存放各种表单元素,如文本域、按钮等。

一个表单元素相当于一个变量,它的取值相当于变量的取值。

<form>标记中的id和name属性均为表单的ID名,用于在当前网页中标识表单,在当前网页中此ID名应该唯一。

<form>中action属性值为后台表单处理程序的URI。

<form>标记中的method属性标识数据的提交方式,一般有GET和POST两种方式。

GET方式将表单中的数据按照“变量名=变量值”的形式附加在URL的查询串中,各个变量之间使用“&”连接。

如:http://127.0.0.1:8080/exam.jsp?name=user1(2)文本域标记文本域表单的常见用法如下:<input name=”name” type=”text” id=”name” value=”123”/><input>标记表示此标记是写人标记,存储用户写入的信息。

标记中的id和name属性为文本域的ID名,type属性表示此写入标记的类型,value属性存储文本域的值。

多行文本框用文本域表单元素实现,它的HTML标记使用格式如下:<textarea name=”context”>内容说明</textarea>Name属性是文本区域的名字。

由于多行文本框可以输入较多的内容,所以把写入的内容存储在标记中。

(3)单选按钮标记在实际应用中的“性别”信息一班通过单选按钮采集,用户在给定的“男”和“女”两个选项中选择其中一个,相应的HTML代码如下:<input name=”sex” type=”radio” value=”男” checked=”checked”/><input name=”sex“ type=”radio” value=”女”/><input>标记中的type=”radio”属性表示此写入标记为单选按钮类型。

name=”sect”定义表单元素的名称,这两个单选按钮属于同一组,它们name属性的取值均为”sex”,称之为“同名单选表单”。

同一组的单选按钮具有互斥性,即只能是多选一操作。

value=”男”属性为单选按钮的取值,同组中的各单选按钮name属性值相同(同名),但value属性值不能相同(不同值)。

checked=”checked”表示当前此单选按钮被选中。

(4)复选钮标记在实际应用的“爱好”信息一般通过复选按钮采集,用户在列出的多个爱好中做出选择,可以选零个,也可以全选,相应的HTML代码如下:<input name=”hobby” type=”checkbox” id=”hobby” value=”篮球”/><input name=”hobby” type=”checkbox” id=”hobby” value=”羽毛球”/><input name=”hobby” type=”checkbox” id=”hobby” value=”排球”/><input name=”hobby” type=”checkbox” id=”hobby” value=”足球”/><input>标记中的type=”checkbox”属性表示此表单元素的类型为复选按钮。

name和id属性均为复选按钮的名称,这4个复选按钮同属于“爱好”组,它们的name和id值均为“hobby”(同名表单)。

value=”篮球”属性为复选按钮的值,同一组中不同复选按钮的value属性值不同。

(5)隐藏表单域列表表单元素预先把一组可供选择的数据存储在列表中,以下拉菜单或列表的形式供用户在其中选择,其中name是选项的提示文字,value才是选项的值。

它的HTML 代码如下:<input name=”loginname” type=”hidden” id=”loginname” value=”zhukai”/> (6)列表表单元素列表表单元素预先把一组可供选择的数据存储在列表中,以下拉菜单或列表的形式供用户在其中选择,其中name是选项的提示文字,value才是选择的值。

它的HTML 代码如下:<select name=”career” size=”3” multiple=”multiple”><option value=”001” selected=”selected”>公司员工</option><option value=”002”>在校学生</option><option value=”003”>公务员</option></select><select></select>表示此处为列表表单元素,name为表单元素的名字。

Size属性表示一次显示n个值,如果n=1则用下拉列表形式,n>1表示带滚动条的列表。

multiple=”multiple”属性表示此列表允许多选,没有此属性时表示单选。

<option></option>标记定义列表的一个列表项,标记体中的文字为提示汉字。

Selected属性表示此项是否已经被选定。

选定一个”name=value”可选项,提交表单后,只有value被提交,提示文字name不被提交。

(7)文件域表单元素文件域表单由一个文本域和一个按钮组成,单击按钮后会激活一个文件选择对话框,从本地磁盘中选择一个文件,被选中文件的路径极文件名自动填写在文本域中。

上传文件时,需要用到文件域。

文件域的HTML代码如下:<input name=”doc” type=”file” id=”doc” value=”c:\my1.txt”/>文件域用<input>标记实现,type=”file”表示这是一个文件域表单元素。

id和name属性均为文件域的名字,value属性为被选中文件的路径及文件名。

6.超链接<a>标记的href属性可以定义超链接,它的一般用法是:<a href=”next.htm”>下一页</a>href属性值为目标资源的URL,如果是空链接,则URL写为“#”。

相关主题