网页主要由三部分组成:分别为结构,表现和行为。
XHTML:可扩展文本标签语言,XHTML是一种基于XML的语言。XHTML是一个扮演者类似HTML角色的XML。 HTML提供了六级标题,分别为<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,<h1>字号最大,<h6>最小。
图像类型 | 优点 | 缺点 |
*.jpg | 体积小,比较清晰 | 有损压缩、画面失真 |
*.gif | 支持Internet标准,支持无损耗压缩和透明度 | 支持有限的透明度,效果不如别的JPG图像 |
*.bmp | 支持24位颜色深度,兼容性好 | 不支持压缩,容量大 |
*.png | 最新的图像格式,兼有GIF和JPG的优势 | 部分浏览器不支持 |
图片标签:<img>标签,这个标签重要属性src,用于指定图片路径;alt,替代文本,当因为网速较慢,或者路径错误等原因导致图像无法显示时将显示该文本信息,width表示图像的宽度,height表示图像的高度。
例如:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片标签示例</title>
</head>
<body>
<img src="../Pictures/tomcat设置.png" alt="配置信息" width="500" height="300"/>
</body>
</html>
此时浏览器效果为
当图片路径错误时将显示为:
段落标签:<p>段落中的文本</p>,换行<br/>,水平线<hr/>
超链接语法:<a href = "url" target = "目标窗体位置">链接文本或图像</a>锚链接在名字前面加#
target属性常用的取值有_self和_blank,_self表示在自身窗口中打开超级链接文件,而_blank表示在新窗口中打开目标网页。
超级链接分类
1、页面间链接
2、锚链接
3、功能性链接
首先看锚链接
在要插入锚节点的位置写入
<a name = "about"></a>
然后在需要跳转到锚节点位置定义超链接
<a href="#about">返回锚节点处</a>
特殊符号 | 字符实体 |
空格 |  ; |
大于号 | >; |
小于号 | <; |
双引号 | &quo;t |
版权符号(©) | ©; |
HTML文档添加注释方法:<!--注释内容-->
常用规范:1、标签名和属性名必须小写。2、HTML标签必须闭合。3、属性值必须用引号括起来,一般情况下建议试用双引号。4、HTML标签必须正确嵌套。5、属性不能简写。6、必须添加文档类型声明。
列表分为三类:无序列表、有序列表、自定义列表
无序列表语法: 有序列表标签:
<ul> <ol>
<li>项目一</li> <li>项目一</li>
<li>项目二</li> <li>项目一</li>
<li>项目三</li> <li>项目一</li>
</ul> </ol>
无序标签使用方法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片标签示例</title>
</head>
<body>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
</body>
</html>
有须标签
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片标签示例</title>
</head>
<body>
<ol>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ol>
</body>
</html>
表格语法:
使用表格的示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>商品列表</title>
</head>
<body>
<table width="100%" border="1" cellspacing="0">
<tr>
<td>商品名称</td>
<td>价格</td>
<td>生产日期</td>
</tr>
<tr>
<td>海尔洗衣机</td>
<td>1800</td>
<td>2014-8-7</td>
</tr>
<tr>
<td>华为手机</td>
<td>1500</td>
<td>2014-8-5</td>
</tr>
</table>
</body>
</html>
表格跨列:colspan 表格跨行:rowspan
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>商品列表</title>
</head>
<body>
<table width="100%" border="1" cellspacing="0">
<tr>
<td>商品名称</td>
<td colspan="2">价格</td>
<!--<td>生产日期</td>-->
</tr>
<tr>
<td>海尔洗衣机</td>
<td>1800</td>
<td>2014-8-7</td>
</tr>
<tr>
<td>华为手机</td>
<td>1500</td>
<td>2014-8-5</td>
</tr>
</table>
</body>
</html>
表单语法:
<from action = "表单提交地址" method = "提交方法"></from>
method的取值一般为get或post
表单中使用input标签收集用户信息。
<input name="元素名称" type="类型" value="值" size="显示宽度"maxlength="字符长度" checked="是否选中"/>
type属性表示表单元素的类型,常用的属性值有:
name属性定义表单元素的名称
value属性指定表单元素的默认值
表单中还可以使用<select>标签创建一个下拉列表
使用<textarea>创建一个多行文本框
text示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文本输入框</title>
</head>
<body>
<form action="" method="post" name="myform">
<p> E-mail:<input name="email" type="text" size="20" /></p>
<p>用户名:<input name="userName" type="text" value="张三" size="20" /></p>
</form>
</body>
</html>
password示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>密码输入框</title>
</head>
<body>
<form action="" method="post" name="myform">
<p>E-mail:<input name="email" type="text" size="20" /></p>
<p> 密码:<input name="pwd" type="password" size="22" /></p>
</form>
</body>
</html>
radio示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>单选按钮</title>
</head>
<body>
<form action="" method="post" name="myform">
<p>性别:
<input name="sex" type="radio" value="女" />女
<input name="sex" type="radio" value="男" checked="checked"/>男
</p>
</form>
</body>
</html>
checkbox示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>复选框</title>
</head>
<body>
<form action="" method="post" name="myform">
<p>课程选择:
<input name="course1" type="checkbox" value="C#" />C#
<input name="course2" type="checkbox" value="JavaScript" checked="checked"/>JavaScript
<input name="course3" type="checkbox" value="HTML" />HTML
<input name="course4" type="checkbox" value="Flash" checked="checked"/>Flash
</p>
</form>
</body>
</html>
button示例:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户登录</title>
</head>
<body>
<form action="" method="post" name="myform">
<p>E-mail:<input name="email" type="text" size="18"/></p>
<p> 密码:<input name="pwd" type="password" /></p>
<p> <input name="btn1" type="submit" value="提交" />
<input name="btn2" type="reset" value="重置" />
<input name="btn3" type="button" value="取消" />
</p>
</form>
</body>
</html>
select示例:
在表单中,使用<select>标签定义一个下拉列表,使用<option>标签定义下拉列表中的选项。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉列表</title>
</head>
<body>
<form action="" method="post" name="myform">
课程选择:
<select name="course">
<option value="C#">C#</option>
<option value="JavaScript">JavaScript</option>
<option value="HTML" selected="selected">HTML</option>
<option value="Flash">Flash</option>
</select>
</form>
</body>
</html>
textarea示例:
可以通过cols和rows控制多行文本域大小,同时我们不能使用它的value设置它的初始值,它的初始值应当放在<textarea>标签和</textarea>之间。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉列表</title>
</head>
<body>
<form action="" method="post" name="myform">
<textarea name="content" cols="20" rows="10">欢迎阅读本网站的服务协议.....</textarea>
</form>
</body>
</html>
<div>标签相当于一个容器标签,即<div>和</div>之间相当于一个容器。