HTML的常用标记

txf2004

浏览: 6866453 次
性别:
来自: 上海

最近访客更多访客>>

east_java

u012363178

wangyy

GDGZWQZ

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

这篇文章借助概念结合实例来总结孙鑫老师的"快速掌握HTML".

本文中实例存放路径为："F:\实例练习\孙鑫html"。

实例编写工具为：UltraEdit.

显示网页浏览器用：Internet Explorer.

概念结合实例总结如下：

1.WWW:万维网(World Wide Web)。

2.HTML:超文本标记语言(Hypertext Markup Language)。

3.Web页面(网页)也是一种文档，HTML是用于编写网页的一种标记语言。

4.标签：一个标签就是左右分别有一个小于号(<)和大于号(>)的字符串。开始标签是指不以斜杠(/)开头的标签，其内是一串允许的属性-值对。结束标签则是以一个斜杠(/)开头的标签。

5.HTML元素的四种形式

实例1：第一个网页文件：FirstPage.html

步骤：①在"F:\实例练习\孙鑫html"路径下，建立文本文件,改名为"FirstPage.html".

②用"UltraEdit"进行代码的编写。

代码编写：

<html>
	<head>
		<title>This is First page!</title>
	</head>	
	<body>
			Hello World!	
	</body>
</html>

运行结果如下：

HTML一般代码格式介绍：

注意事项：

①我们编写HTML文档时，即使不按照HTML的框架格式，目前我们所用的浏览器(IE)也能够很好地解析文档。例如：我们直接在文档中写上"Hello World!"，IE浏览器会将这些字符作为文档体的内容，在浏览器窗口中显示出来。

②在HTML文档中，一个标签的属性是可选的，你在写一个标签时，根据需要，可写上它的属性，也可不写。

③在HTML文档中，给一个标签的属性赋值的时候，可加双引号，也可不加。例如：<hr color="blue">和<hr color=blue>都是合法的。

④HTML中，标签和属性的名字不区分大小写。

⑤在HTML文档中，如果存在连续多个空白字符(空格、制表符、回车、换行等)，浏览器显示时将只解析为一个空格字符。

7.与段落相关的标签

<p align="#">

p表示paragraph，作用：创建一个段。属性align表示段的对齐方式，#可以是left、center、right、justify。

<br>

表示line break，作用：换行。

<hr color="clr">

表示horizontal rule，作用：插入一条水平线。属性color用来指定线的颜色。

实例2：结合与段落相关的标签，输出"静夜思"古诗。

步骤：①在"F:\实例练习\孙鑫html"路径下，建立文本文件,改名为"JingYeSi.html".

②用"UltraEdit"进行代码的编写。

<html>
	<head><title>静夜思</title></head>	
	<body>
		<p align="center">
			静夜思<br>
			     作者：李白	
			     <hr color="blue">
			<p align="center">     
			床前明月光，疑是地上霜。<br>
			举头望明月，低头思故乡。
	</body>
</html>

显示结果，及注释(红色)如下：

8.与文本显示相关的标签

<center>…</center>：使文本居中显示。
<hn align="#">…</hn>：用于指出文档的标题，n是从1到6的整数，1表示最大标题，6表示最小标题。属性align用于设置标题对齐的方式，#可以是left、center、right。
<font size=n color="clr">…</font>：用于设置字体，属性size表示字体的大小，n可以是从1到7的整数，数字越大字体越大；属性color表示字体的颜色，clr是可预订的颜色名字，或者以16进制数表示的颜色值。
<b>…</b>：使文本成为粗体。
<i>…</i>：使文本成为斜体。

实例3：使用了与文本显示相关的标记后，显示"静夜思"页面

<html>
	<head><title>静夜思</title></head>	
	<body>
		<center>
			<h2><font color="red">静夜思</font></h2>
			     <b>作者：李白</b>	
			     <hr color="blue">
			<p>     
			<b><i><font color="green" size="3">床前明月光，疑是地上霜。<br>
		举头望明月，低头思故乡。</font></i></b>
	</center>
	</body>
</html>

显示结果，及注释(红色)如下：

9.列表

①建立数字编号的列表

使用<ol>和<li>标签创建带数字编号的列表；

在<ol>标签中使用start属性，设置起始的序号。

在<li>标签中使用value属性，改变列表内的编号顺序。

②指定编号的格式和顺序

在<ol>和<li>标签中，使用type属性指定编号系统的类型。

③建立带有项目符号的列表

使用<ul>和<li>标签创建带有项目符号的列表，<ul>和<li>标签的type属性指定符号的样式，取值如下：

disc-----显示为实心的圆圈

square----显示为实心的方块

circle-----显示为空心的圆圈

④建立无符号的列表

使用<dl>与<dt>标签创建无符号的列表

使用<dd>标签替换<dt>,创建缩进的列表。

⑤建立术语列表

在<dl>元素中同时使用<dt>和<dd>标签，建立术语列表。术语由<dt>标签指定，说明由<dd>标签指定。

实例4：各种项目编号的"图书列表"

<ol>
	<li>《Java从入门到精通》
	<li>《JSP快速入门》
	<li>《VC++深入编程》
	<li>《VB实例教程》
</ol>

<hr color="blue">

<!--<ol>标签使用start，<li>标签中使用value属性改变起始序号及列表内编号-->
<ol start="10">
	<li>《Java从入门到精通》
	<li>《JSP快速入门》
	<li value="30">《VC++深入编程》
	<li>《VB实例教程》
</ol>

<hr color="blue">

<!--使列表编号显示为：ABC型-->
<ol type="A">
	<li>《Java从入门到精通》
	<li>《JSP快速入门》
	<li>《VC++深入编程》
	<li>《VB实例教程》
</ol>

<hr color="blue">

<!--使列表项目编号为空心圆-->
<ul type="circle">
	<li>《Java从入门到精通》
	<li>《JSP快速入门》
	<li>《VC++深入编程》
	<li>《VB实例教程》
</ul>

<hr color="blue">

<!--建立无符号列表-->
<dl>
	<dt>《Java从入门到精通》
	<dt>《JSP快速入门》
	<dt>《VC++深入编程》
	<dt>《VB实例教程》
</dl>

<hr color="blue">

<!--建立无符号缩进的列表-->
<dl>
	<dd>《Java从入门到精通》
	<dd>《JSP快速入门》
	<dd>《VC++深入编程》
	<dd>《VB实例教程》
</dl>
 
<hr color="blue">    
                                          
<!--建立术语列表-->   
<dl>                              
	<dt>HTML   
	<dd>超文本标记语言             
	<dt>HTTP        
	<dd>超文本传输协议                           
</dl>

显示结果如下：

10.表格

表格实例

表格定义：

表格是用＜table＞元素来定义的．如下所示：

<table border=n align="alignment" bgcolor="clr">...</table>

属性border用干定义表格边框的宽度．n可以是从O开始的整数．如果设

置border=0．那么表格边框没有宽度．如果忽略border属性，浏览器将不会

显示边框，这和设置borde=0是一样的效果。

属性align用于设定表格的对齐方式．alignment可以是left、center或right

属性bgcoIor用于指定表格的背景色．它的取值和前面介绍过的color属性

的取值是一样的。

<caption>元素用于定义表格的标题，如：<caption>...</caption>

<tr>元素在表格中添加一个新行，如:<tr align="alignment" valign="alignment">...</tr>

属性align用于指定这一行在水平方向上的对齐方式，可以是left、center、right。属性valign用于指定这一行在垂直方向上的对齐方式，可以是top、middle、bottom.

<th>元素用于定义表头，如：<th>...</th>

<td>元素用于定义单元格，如<td>...</td>

实例5：显示"2004年度期末考试成绩单"

<html>
	<head><title>表格的例子</title>	</head>	
	<body>
		<table boder="1" aglign="center" bgcolor="#ffdddd">
			<caption>2004年度期末考试成绩单</caption>		
			<tr align="center" valign="middle">
				<th>姓名</th>   
				<th>语文</th>
				<th>数学</th>
				<th>英语</th>
			</tr>		                                            
			<tr align="center" valign="middle">
				<td>张三</td>
				<td>89</td>
				<td>75</td>
				<td>90</td>
			</tr>
			<tr align="center" valign="middle">
				<td>李四</td>
				<td>98</td>
				<td>94</td>
				<td>92</td>
			</tr>
			<tr align="center" valign="middle">
				<td>王五</td>
				<td>56</td>
				<td>86</td>
				<td>67</td>
			</tr>
		</table>	
	</body>
</html>

显示结果

11.HTML交互式表单、列表框、多行文本输入控件

①使用<form>元素，以及在其间嵌入相关元素(控件)，就可以创建作为HTML文档一部分的表单。

表单基本语法：<form method="get or post" action="URL">...</form>

<input>元素用于接受用户输入的信息。

②列表框允许用户从一个下拉列表框选择一项or多项，其功能和单选按钮or复选框的功能相同。

列表框由<select>元素创建，列表框中各个选项用<option>元素提供。

③创建多行文本输入控件的语法为：

实例6 ：表单的例子

代码编写：

<html>
	<head><title>表单的例子</title>	</head>	
	<body>
		<form method="get" action="reg.jsp">
			<table>
				<tr>
					<td>用户名：</td>
					<td><input type="text" name="user" value="游客" size="30"><br></td>
				</tr>
				<tr>
					<td>密码：</td>
					<td><input type="password" name="pwd" ><br> <!--输入密码时显示形式为"*"--></td>
				</tr>
				<tr>
					<td>性别：</td>
					<td>
						<input type="radio" name="sex" value="1" checked>男
			      <input type="radio" name="sex" value="0" >女
					</td>
				</tr>
				<tr>
					<td>兴趣爱好：</td>
					<td>
					 	 <input type="checkbox" name="interest" value="football">足球
			       <input type="checkbox" name="interest" value="basketball">蓝球
			       <input type="checkbox" name="interest" value="volleyball">排球
			       <input type="checkbox" name="interest" value="swim">游泳
					</td>
				</tr>
				<tr>
					<td>最高学历: <!--列表框--></td>
					<td>
						<select size="1" name="education">
								<option value="" selected>...</option>
								<option value="高中">高中</option>
								<option value="大学">大学</option>
								<option value="硕士" >硕士</option>
						</select>
					</td>
				</tr>
				<tr>
					<td valign="top">个人简介：</td>
					<td><textarea name="personal" rows="5" cols="30">个人简介</textarea></td>
				</tr>
				<tr>
					<td><input type="reset" value="重写"> <!--按钮默认显示文本为"重置"，通过value改变显示值--></td>
					<td><input type="submit" value="注册"> <!--按钮默认显示文本为"提交查询内容"，通过value改变显示值--></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
				</tr>
			</table>
			
	
			<input type="hidden" name="id" value="001"> <!--隐藏控件，通常用于服务器端脚本动态产生的表单中，用于保存客户端的跟踪数据和有用信息-->
		</form>
	</body>
</html>

显示结果如下：