HTML文档由4个主要标记组成,包括<html>、<head>、<title>、<body>
.这4个标记构成了HTML页面最基本的元素。
<html>
标记<html>
标记是HTML文件的开头。<head>
标记<head>
标记是HTML文件的头标记,用于存放HTML文件的信息,如定义CSS样式的代码可放置在与标记之中。<title>
标记<title>
标记为标题标记。<body>
标记在HTML中,换行标记是<br>
例:创建一个HTML页面,在页面中输入一首古诗。
<html>
<head>
<title>应用换行标记实现页面文字换行</title>
</head>
<body>
<b>
静夜思
</b><br>
举头望明月<br>
低头思故乡
</body>
</html>
<p>
标记开头,以</p>
标记结束。<h1>、<h2>、<h3>、<h4>、<h5>、<h6>
。<center>
标记开头,以</center>
结尾。<ul>
可以创建一组无序列表,其中每个列表项以<li>
表示<html>
<head>
<title>无序列表标记</title>
</head>
<body>
编程词典有以下几种品牌
<p>
<ul>
<li>Java
<li>C
<li>C++
<li>C#
</ul>
</body>
</html>
<ol>
,每一个列表项前使用<li>
。有序列表中的项目是有一定顺序的。 <html>
<head>
<title>无序列表标记</title>
</head>
<body>
编程词典有以下几种品牌
<p>
<ol>
<li>Java
<li>C
<li>C++
<li>C#
</ol>
</body>
</html>
<table>
<table>……</table>
标记表示整个表格。
<table>
中有很多属性,例如width表示表格的宽度;border
属性用来设置表格的边框,align
属性设置表格的对齐方式,bgcolor
属性用来设置表格的背景色等。
<caption>
标题标记以<caption>
开头,以</caption>
结束,它也有一些属性,例如align,valign等属性。
<th>
表头标记是<th>
开头,以</th>
结尾也可以通过align,background,colspan,valian等属性来设置表头。
<tr>
表格行标记以<tr>
开头,一组<tr>
标记表示表格的一行。
<tr>
标记要嵌套在<table>
标记中使用,该标记也具有align,background等属性。
<td>
单元格标记<td>
又称为列标记,一个<tr>
标记中可以嵌入若干个<td>
标记。该标记也具有align,background,valign等属性。
例:
<html>
<body>
<table width="318" height="167" border="1" align="center" bgcolor="blue">
<caption>学生考试成绩表</caption>
<tr>
<td align="center" valign="middle">姓名</td>
<td align="center" valign="middle">语文</td>
<td align="center" valign="middle">数学</td>
<td align="center" valign="middle">英语</td>
</tr>
<tr>
<td align="center" valign="middle">张三</td>
<td align="center" valign="middle">90</td>
<td align="center" valign="middle">89</td>
<td align="center" valign="middle">84</td>
</tr>
<tr>
<td align="center" valign="middle">李四</td>
<td align="center" valign="middle">89</td>
<td align="center" valign="middle">99</td>
<td align="center" valign="middle">100</td>
</tr>
</table>
</body>
</html>
<form>…</form>
表单标记表单标记以<form>
标记开头,以</form>
标记结尾。在表单标记中可以定义处理表单数据程序的URL地址等信息。标记的基本语法如下:
<form action = "url" method = "get"|"post" name = "name" onSubmit = "" target = "">
</form>
<form>
标记的各属性说明如下。
<input>
表单输入标记表单输入标记是使用最频繁的表单标记,通过这个标记可以向页面中添加单行文本、多行文本、按钮等。标准语法格式如下:
<input type="image" disabled="disabled" checked="checked" width="digit" height="digit" maxlength="digit" readonly="" size="digit" src="uri" usemap="uri" alt="" name="checkbox" value="checkbox">
标记的属性如下图所示:
属性 | 描述 |
---|---|
type | 用于指定添加的是哪种类型的输入字段,共有10个可选值 |
disabled | 用于指定输入字段不可用,即字段变成灰色。其属性值可以为空,也可以指定为disabled |
checked | 用于指定输入字段是否处于被选中状态,用type属性值为radio和checkbox的情况下,其属性值可以为空值,也可以指定为checkbox |
width | 用于指定输入字段的宽度,用于type属性为image的情况下 |
height | 用于指定输入字段的高度,用于type属性为image的情况下 |
maxlength | 用于指定输入字段可输入文字的个数,用于type属性值为text和password的情况下,默认没有字数限制 |
readonly | 用于指定输入字段是否为只读。其属性值可以为空值,也可以指定为readonly |
size | 用于指定输入字段的宽度,当type属性为text和password时,以文字个数为单位,当type属性为其他值时,以像素为单位 |
src | 用于指定图片的来源,只有当type属性为image时有效 |
usemap | 为图片设置热点地图,只有当type为image时有效。属性值为URI,URI格式为“#+标记的name属性值”。例如,标记的name属性值为Map,该URI为#Map |
alt | 用于指定当图片无法显示时显示的文字,只有当type属性为image时才有效 |
name | 用于指定输入字段的名称 |
value | 用于指定输入字段默认的数据值,当type属性为checkbox和radio时,不可省略此属性,为其他值时可以省略。当type属性为button、reset和submit时,指定的是按钮上的显示文字;当type属性为checkbox和radio时,指定的是数据项选定时的值 |
type属性是标记中非常重要的内容,决定输入数据的类型。该属性值的可选项如下所示:
type属性的属性值
可选值 | 描述 | 可选值 | 描述 |
---|---|---|---|
text | 文本框 | submit | 提交按钮 |
password | 密码域 | reset | 重置按钮 |
file | 文件域 | button | 普通按钮 |
radio | 单选选项 | hidden | 隐藏域 |
checkbox | 复选框 | image | 图像域 |
例:创建一个index.html的文件,在该文件的标记中添加一个表单,并且在该表单中应用标记中添加文本框、密码域、单选选项、复选框、文本域、隐藏域、提交按钮、重置按钮、普通按钮和图像域共10个输入字段。
<html>
<body>
<form action="" method="post" enctype="multipart/form-data" name="form1">
文本框:<input name="user" type="text" id="user" size="39" maxlength="39"><br>
密码域:<input name="password" type="password" id="password" size="40" maxlength="40"><br>
单选按钮:
<input name="sex" type="radio" value="男" checked>男
<input name="sex" type="radio" value="女">女<br>
复选框:
<input name="checkbox" type="checkbox" value="1" checked>1
<input name="checkbox" type="checkbox" id="checkbox" value="2">2<br>
文件域:<input type="file" name="file"><br>
隐藏域:<input type="hidden" name="hiddenField"><br>
提交按钮:<input type="submit" name="Submit1" value="提交"><br>
重置按钮:<input type="reset" name="Submit2" value="重置"><br>
普通按钮:<input type="button" name="Submit3" value="按钮"><br>
图像域:<input type="image" name="imageField" src="C:\Users\lenovo\Pictures\1577379103973.png" width="108" height="61">
</form>
</body>
</html>
<select>…</select>
下拉列表标记<select>
标记可以在页面中创建下拉列表,此时的下拉列表是一个空的列表,要使用<option>
标记向列表中添加内容。<select>
标记的语法格式如下:
<select name="name" size="digit" multiple="multiple" disabled="disabled">
</select>
<select>
标记的属性说明如下表所示:
属性 | 描述 |
---|---|
name | 用于指定下拉列表框的名称 |
size | 用于指定下拉列表框中显示的选项数量,超出该数量的选项可以拖动滚动条查看 |
disabled | 用于指定当前下拉列表框不可使用(变成灰色) |
multiple | 用于让多行列表框支持多选 |
例:
<html>
<body>
<select name="select">
<option>C</option>
<option>C++</option>
<option>C#</option>
<option>Java</option>
</select>
多行列表框(不可多选):
<select name="select2" size="2">
<option>C</option>
<option>C++</option>
<option>C#</option>
<option>Java</option>
</select>
多行列表框(可多选):
<select name="selec3" size="3" multiple>
<option>C</option>
<option>C++</option>
<option>C#</option>
<option>Java</option>
</select>
</body>
</html>
<textarea>
多行文本标记为多行文本标记。与单行文本标记相比,多行文本可以输入更多的内容。通常情况下,标记出现在标记的标记内容中。标记的语法格式如下:
<textarea cols="digit" rows="digit" name="name" disabled="disabled" readonly="readonly" wrap="value">默认值</textarea>
标记的属性说明如下表所示:
属性 | 描述 |
---|---|
name | 用于指定多行文本框的名称,当表单提交后,在服务端获取表单数据时应用 |
cols | 用于指定多行文本框显示的列数(宽度) |
rows | 用于指定多行文本框显示的行数(高度) |
disabled | 用于指定当前多行文本框不可使用(变为灰色) |
readonly | 用于指定多行文本框为只读 |
wrap | 用于设置多行文本中的文字是否自动换行 |
warp属性的可选值如下表
可选值 | 描述 |
---|---|
hard | 默认值,表示自动换行,如果文字超过cols属性所指的列数就自动换行,并且提交到服务器时,换行符被提交 |
soft | 表示自动换行,如果文字超过cols属性所指的列数就自动换行,并且提交到服务器时,换行符不被提交 |
off | 表示不自动换行,如果想让文字换行,只能按下Enter键强制换行 |
超链接标记是页面中非常重要的元素,用于实现在网站中从一个页面跳转到另一个页面。超链接标记的语法非常简单,语法如下:
<a href = ""></a>
属性href用来设定连接到哪个页面中
在页面中添加图片是通过<img>
标记来实现的。<img>
标记的语法格式如下:
<img src="uri" width="value" height="value" border="value" alt="提示文字">
<img>
标记的属性说明如下表所示:
属性 | 描述 |
---|---|
src | 用于指定图片的来源 |
width | 用于指定图片的宽度 |
height | 用于指定图片的高度 |
border | 用于指定图片外边框的宽度,默认值为0 |
alt | 用于指定当图片无法显示是显示的文字 |