1.概念：超文本标记语言
2.功能：定义Web文档。
3.HTML组成：HTML标记
HTML语法
1.标准封闭语法
<标记名 属性名=”值” 属性名=”值” 属性名=”值”>
<body bgcolor="red" onload="add()" ></body>2.自封闭语法
<标记名 属性名=”值” 属性名=”值” 属性名=”值” />
案例：
<input type="text" name="userid" id="userid" />HTML文档组成
1.文档类型说明：
<!DOCTYPE html> 表明HTML5文档版本
2.<html>
</html>
3.文档头
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
4.文档体
<body>
<h1>OA自动化系统</h1>
</body>HTML标记
1.HTML文档的定义
(1)<html>
(2)<head>
(3)<body>2.文字格式标记
(1) 标题标记：<h1>...<h6>
(2) 文本的大小标记：<b> <strong>
(3) 字体样式标记：<i>，
(4)上标，下标：<sup>， <sub>3.超链接
(1)语法：
<a 属性="值">xxxx</a>
(2)常见的属性
href=“url”
指定URL方式 {
本站点内的文档：使用相对路径
<a href="../index.html">主页</a>
访问站点外的文档：使用URL。
<a href="http://www.baidu.com">百度</a>
}4.图片标记
(1)语法：<img 属性="值" />
(2)常用的属性：
src="图片的路径"
alt="图片的说明"
width="宽度"
height="高度"
border="边框的宽度"5.多媒体
HTML5直接支持视频和音频
(1)播放视频
<video src="m.mp4" width="500" height="100">
(2)播放音频：
<audio src="m01.mp3" autoplay />6.表格标记
(1)语法
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>刘明</td>
<td>20</td>
</tr>
<tr>
<td>赵明</td>
<td>21</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>7.表单标记
(1)功能：用于收集用户的输入信息
(2)处理：需要服务器端动态技术进行处理。如Servlet，JSP，ASP.NET,PHP等。
(3)表单的定义
<form action="add.jsp" method="get" >
</form>
(4)表单元素的分类
非限定输入表单元素
限定输入表单元素
按钮元素
(5)非限定输入表单元素
<1>文本框：
<input type="text" name="userid" id=""><br/>
<2>密码框：
<input type="password" name="userid" id=""><br/>
<3>文本域：
<textarea name="resume" rows="5" cols="20">请输入简历</textarea>
<4>文件域：
<input type="file" name="photo" />
<5>隐藏域：
<input type="hidden" name="info" value="ABV" />
(6)限定输入表单元素
<1>单选按钮：
<input type="radio" name="sex" value="女" checked>女
<2>复选框：
<input type="checkbox" name="behave" value="旅游" />
<3>下拉框：
<select name="dept" >
<option value="1">财务部</option>
<option value="2" selected>生产部</option>
<option value="3">销售部</option>
<option value="3">销售部</option>
<option value="3">销售部</option>
<option value="3">销售部</option>
<option value="3">销售部</option>
</select>
(7)按钮元素
<1>提交按钮
<input type="submit" value="提交" />
<2>重置按钮
<input type="reset" value="重置" />
<3>普通按钮
<input type="button" value="增加" />表单案例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>增加员工表单</h1>
<hr/>
<form action="add.jsp" method="post" enctype="multipart/form-data" id="employeeaddform">
<fieldset style="width:300">
<legend align="left">非限定输入</legend> <br/>
账号:<input type="text" name="userid"><br/>
密码:<input type="password" name="password"><br/>
简历:<textarea name="resume" rows="5" cols="20"></textarea><br/>
照片:<input type="file" name="photo" /><br/>
</fieldset>
<fieldset style="width:300">
<legend align="left">限定输入</legend> <br/>
性别: <input type="radio" name="sex" value="男" >男
<input type="radio" name="sex" value="女" checked>女<br/>
爱好：<input type="checkbox" name="behave" value="旅游" /> 旅游
<input type="checkbox" name="behave" value="旅游" /> 旅游
<input type="checkbox" name="behave" value="旅游" /> 旅游<br/>
部门:<select name="dept" >
<option value="1">财务部</option>
<option value="2" selected>生产部</option>
<option value="3">销售部</option>
<option value="4">开发部</option>
<option value="5">市场部</option>
<option value="6">人事部</option>
</select><br/>
</fieldset>
<input type="hidden" name="info" value="ABV" />
</form>
<hr/>
<a href="../index.html">返回主页</a>
</body>
</html>8.列表标记
(1)无序列表
语法：
<ul type="">
<li>XXXX </li>
<li>XXXX </li>
</ul>
(2)有序列表
<ol type="">
<li>XXXX </li>
<li>XXXX </li>
</ol>
(3)定义列表
<dl>
<dt>Coffee</dt>
<dd>Blank hot drink</dd>
<dt>Milk</dt>
<dd>white cold drink</dd>
</dl>
(4)列表的嵌套：
9.页面分区标记：
(1)<div>: 分割一个矩形区域(纵向)
(2)<span>: 横向分区
(3) <p> 文字分割成段落
DIV的使用重点在CSS中介绍。
10.页面框架标记(frame)
(1)页面分区标记
<frameset rows="10%,*,10%" border="0">
需要注意的是：有<frameset>的页面不能有<body>。
横向分区属性：
rows="分区宽度,分区宽度,分区宽度,..."
宽度可以使用:点阵，%，*，可以混合使用。但是*只能使用一次。
案例：
<frameset rows="100,*,20%" border="0">
<frameset rows="10%,*,10%" border="0">
纵向分区属性：将页面按纵向分区。
cols="分区宽度,分区宽度,分区宽度,..."
案例：
<frameset rows="10%,*,10%" cols="500,40%" border="0">
<frameset cols="10%,*,10%" border="0">
(2)分区内页面的显示标记:<frame>
用于在分区内显示指定的页面
案例：
<frame src="../dept/main.html">页面分区案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Frame案例</title>
</head>
<frameset rows="10%,*,10%" border="0">
<frame src="../common/top.html">
<frameset cols="15%,*,15%" >
<frame src="../common/top.html">
<frame src="../common/top.html">
<frame src="../common/top.html">
</frameset>
<frame src="../common/footer.html">
</frameset>
</html>
11.头部标记
(1)<meta>
(2)<style>
(3)<link>
(4)<script>
常见的页面布局方式
1.东西南北中：一般的Web管理系统。
2.南北西中：一般的信息管理系统。
3.门户页面布局：如新浪网。
页面布局的实现方式
1.frame
2.div+css
3.table
4.JSP include指令
5.JSP include动作
6.服务器端布局框架：Tiles，SiteMash
7.客户端布局框架：Bootstrap, jQueryLayout, jQueryEasyUI等
扫一扫
3588
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
