韩顺平PHP系列课程--html入门及实战演练

最新推荐文章于 2023-08-14 16:10:22 发布

ORACLE_FANS

最新推荐文章于 2023-08-14 16:10:22 发布

阅读量1.7k

点赞数

分类专栏： HTML学习文章标签： HTML

HTML学习专栏收录该内容

4 篇文章 0 订阅

订阅专栏

韩顺平PHP系列课程--html入门及实战演练

本节要点:html课程主要讲解了html运行原理、html制作网页方法。
课程工具:
IE浏览器数据交换查看器:httpwatcher
页面尺寸和颜色捕获工具: FastStone Caputure
html参考教程 :W3School、html教程.

详细内容:
1.html运行原理
HTML(Hypertext Markup Language) 是一种规范（或者说是一种标准），它通过标记符（tag）来标记要显示的网页的各个部分。通过在网页中添加标记符，可以告诉浏览器如何显示网页，即确定内容的格式。浏览器按顺序阅读网页文件（HTML文件），然后根据内容周围的HTML标记符解释和显示各种内容，这个过程叫做语法分析。
html访问分为:
(1)本地运行本地运行即用浏览器打开。
(2)远程访问安装服务器软件,外网可以访问。
2.html基本结构
<html>
<head>
</head>
<body>
<元素属性1="属性值" 属性2="属性值" ...>内容</元素>
<元素属性="属性值">
</body>
</html>

html入门实例程序代码如下:

[html] view plain copy print ?

<html>
<head>
<body>
<b>横看成岭侧成峰</b><br/><br/>
<font color="red">远近高低各不同</font></br>
<font style="font-size:40px;">不识庐山真面目</font></br>
<p>这是一个段落</p>
<h2>表头</h2>
<br/>*******************版权符号<font size="7">©</font>
<br/><font size="5">¥</font>
<br/>空格处理:hello world!
</br><a href="a.html">连接到本地a.html</a>
<br/><a href="http://www.baidu.com">跳转到百度</a>
<br/><a href="mailto:wangdingqiao2012@qq.com">联系管理员</a>
</body>
</head>
</html>

<html>
<head>
<body>
<!--字体颜色、大小和换行控制测试-->
<b>横看成岭侧成峰</b><br/><br/>
<font color="red">远近高低各不同</font></br>
<font style="font-size:40px;">不识庐山真面目</font></br><!--size值可以取1-7可以使用css控制  -->
<p>这是一个段落</p>
<h2>表头</h2>
<!--符号实体(特殊字符)-->
<br/>*******************版权符号<font size="7">©</font>
<br/><font size="5">¥</font>
<br/>空格处理:hello       world!<!--空格处理 可以使用全角空格-->
<!--超链接练习-->
</br><a href="a.html">连接到本地a.html</a>
<!--链接到外网的页面 写完整url地址-->
<br/><a href="http://www.baidu.com">跳转到百度</a>
<br/><a href="mailto:wangdingqiao2012@qq.com">联系管理员</a>
</body>
</head>
</html>

演示效果如下图所示:

3.html常用标记(tag)

(1)标记
标记通常是成对出现<head></head>
标记也可以单个出现<br/>
(2)后缀html和htm的区别
如果一个网站有index.html和index.htm，优先访问.html文件;htm后缀是为了兼容DOS系统8.3的命名规范。
(3)符号实体网页上显示的一些特殊符号,比如版权符号?.
(4)超级链接元素
<a href="url地址"></a>
<a href="mailto:电子信箱地址"></a>
(5)图片元素
<img src="图片的路径/也可以是url" width="宽度像素为单位" height="高度"/>
(6)表格元素
a.表格元素在网页布局要求不高的情况下，使用table布局，及使用表格来显示数据，同时用于布局.表格布局有缺陷，现在使用div+css.
b.cellspacing 内边距
cellpadding 外边距

表格练习菜谱程序代码如下:

[html] view plain copy print ?

<html>
<head>
<title>表格练习--显示菜单 </title>
</head>
<body>
<table height="150px"><td></td></table>
<table border ="1px" align ="center" bordercolor ="#E76BFF" cellspacing ="1px" cellpadding ="1px" height="400px" width="500px" background="images/bk.jpg">
<tr>
<td align ="center" colspan="3">菜谱</td>
</tr>
<tr>
<td rowspan="2">蔬菜</td>
<td>清炒茄子</td>
<td>花椒扁豆</td>
</tr>
<tr>
<td>小炒韭菜</td>
<td>小葱豆腐</td>
</tr>
<tr>
<td rowspan="2">荤菜</td>
<td>香干回锅肉</td>
<td>鱼香肉丝</td>
</tr>
<tr>
<td valign ="middle">农家小炒肉<img src="images/cartoon.gif" /></td>
<td>水煮鱼片</td>
</tr>
</table>
</body>
</html>

<html>
 <head>
  <title>表格练习--显示菜单 </title>
 </head>
 <body>
  <!--显示菜单-->
  <table height="150px"><td></td></table>
  <table border ="1px" align ="center"  bordercolor ="#E76BFF"  cellspacing ="1px" cellpadding ="1px"  height="400px" width="500px" background="images/bk.jpg">
  <tr>
  <td align ="center" colspan="3">菜谱</td><!--一列跨三列 即和并列-->
  </tr>
 <tr>
  <td rowspan="2">蔬菜</td><!--一列跨两行 即和并行-->
  <td>清炒茄子</td>
  <td>花椒扁豆</td>
  </tr>
  <tr>
  <td>小炒韭菜</td>
  <td>小葱豆腐</td>
  </tr>
  <tr>
  <td rowspan="2">荤菜</td>
  <td>香干回锅肉</td>
  <td>鱼香肉丝</td>
  </tr>
  <tr>
  <td valign ="middle">农家小炒肉<img src="images/cartoon.gif" /></td><!--表格中可以继续放表格-->
  <td>水煮鱼片</td>
  </tr>
  </table>
 </body>
</html>

演示效果如下图所示:

课程表练习程序代码如下:

[html] view plain copy print ?

<html>
<head>
<title> html课程表练习 </title>
</head>
<body>
<center><caption>课程表</caption></center><br/>
<table border="1px" align="center" height="400px" bordercolor ="blue" width="500px" cellspacing="3px" cellpadding="1px">
<tr>
<td align="center" ><b>项目</b></td>
<th colspan="5" align="center" >上课</th>
<th colspan="2" align="center" >休息</th>
</tr>
<tr>
<th align="center">星期</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
<th>星期日</th>
</tr>
<tr>
<td rowspan="4" align="center">上午</td>
<td>语文</td>
<td>数学</td>
<td>英语</td>
<td>化学</td>
<td>数学</td>
<td>计算机</td>
<td rowspan="4" align="center">休息</td>
</tr>
<tr>
<td>英语</td>
<td>数学</td>
<td>英语</td>
<td>数学</td>
<td>政治</td>
<td>计算机</td>
</tr>
<tr>
<td>化学</td>
<td>英语</td>
<td>地理</td>
<td>数学</td>
<td>政治</td>
<td>计算机</td>
</tr>
<tr>
<td>数学</td>
<td>地理</td>
<td>化学</td>
<td>历史</td>
<td>政治</td>
<td>计算机</td>
</tr>
<tr></tr>
<tr>
<td rowspan="2" align="center">下午</td>
<td>数学</td>
<td>历史</td>
<td>政治</td>
<td>化学</td>
<td>体育</td>
<td>计算机</td>
<td rowspan="2" align="center">休息</td>
</tr>
<tr>
<td>数学 </td>
<td>数学 </td>
<td>政治</td>
<td>英语</td>
<td>历史</td>
<td>计算机</td>
</tr>
</table>
</body>
</html>

<!--syllabus.html 课程表示例程序-->
<html>
 <head>
  <title> html课程表练习 </title>
 </head>
 <body>
<center><caption>课程表</caption></center><br/>
  <table border="1px" align="center" height="400px" bordercolor ="blue" width="500px" cellspacing="3px" cellpadding="1px">
   <!--第1行-->
  <tr>
<td align="center" ><b>项目</b></td>
<th colspan="5" align="center" >上课</th>
<th colspan="2" align="center" >休息</th>
 </tr>
   <!--第2行-->
<tr>
<th align="center">星期</th>
<th>星期一</th>
<th>星期二</th>
 <th>星期三</th>
  <th>星期四</th>
   <th>星期五</th>
	<th>星期六</th>
	 <th>星期日</th>
</tr>
 <!--第3行-->
<tr>
	<td rowspan="4" align="center">上午</td>
	<td>语文</td>
	<td>数学</td>
	<td>英语</td>
	<td>化学</td>
	<td>数学</td>
	<td>计算机</td>
	<td rowspan="4" align="center">休息</td>
</tr>
 <!--第4行-->
<tr>
	<td>英语</td>
	<td>数学</td>
	<td>英语</td>
	<td>数学</td>
	<td>政治</td>
	<td>计算机</td>
</tr>
 <!--第5行-->
<tr>
	<td>化学</td>
	<td>英语</td>
	<td>地理</td>
	<td>数学</td>
	<td>政治</td>
	<td>计算机</td>
</tr>
 <!--第6行-->
<tr>
	<td>数学</td>
	<td>地理</td>
	<td>化学</td>
	<td>历史</td>
	<td>政治</td>
	<td>计算机</td>
</tr>
<!--第7行-->
<tr></tr><!--空行效果-->
<tr>
	<td rowspan="2" align="center">下午</td>
	<td>数学</td>
	<td>历史</td>
	<td>政治</td>
	<td>化学</td>
	<td>体育</td>
	<td>计算机</td>
	<td rowspan="2" align="center">休息</td>
</tr>
<!--第8行-->
<tr>
	<td>数学 </td>
	<td>数学 </td>
	<td>政治</td>
	<td>英语</td>
	<td>历史</td>
	<td>计算机</td>
</tr>
  </table>
 </body>
</html>

运行效果如下图所示:

(7)列表
无序列表:
<ul type="属性值"> type取值为disc、circle、square
<li>列表内容</li>
</ul>
有序列表:
<ol type="属性值" start="起始值">
type用于指定用什么显示，start表示从第几开始计算
<li>列表内容</li>

列表练习程序代码如下:

[html] view plain copy print ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 无序列表练习 </title>
</head>
<body style="margin:0px;">
<ul type="circle">
<li>拯救大兵瑞恩</li>
<li>阿甘正传</li>
<li>西雅图未眠夜</li>
<li>达芬奇密码</li>
</ul>
<ol type="I" start="2">
<li>宋江</li>
<li>卢俊义</li>
<li>吴用</li>
<li>林冲</li>
</ol>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> 无序列表练习 </title>
 </head>
 <body style="margin:0px;">
  <ul type="circle">
  <li>拯救大兵瑞恩</li>
  <li>阿甘正传</li>
  <li>西雅图未眠夜</li>
  <li>达芬奇密码</li>
  </ul>
  <ol type="I" start="2">
  <li>宋江</li>
  <li>卢俊义</li>
  <li>吴用</li>
  <li>林冲</li>
  </ol>
 </body>
</html>

演示效果如下:

(8)Frameset框架集用途主要是用于分割显示多个页面
注意:a.html包含了其他页面(frameset)则要求a.html本身不能有body和body内容(文字)
target属性值有四个:
_blank:表示打开一个全新的页面
_self:替换本页面
_top:整个浏览器窗口
_parent:父窗口
还有一个是target加上对应的框架frame名称.
frameset综合小案例,包含a.html、b.html、c.html、qq.html 、zjl.html,代码如下:

[html] view plain copy print ?

<frameset cols="20%,*">
<frame name="frameleft" src="b.html" noresize frameborder="0"/>
<frame name="frameright" src="c.html" frameborder="0"/>
</frameset>

<!--a.html-->
<frameset cols="20%,*">
<frame name="frameleft" src="b.html" noresize frameborder="0"/>
<frame name="frameright" src="c.html" frameborder="0"/><!--要在指定框架显示页面则需要给框架取名字-->
</frameset>

[html] view plain copy print ?

<html>
<body bgcolor ="pink" >
<a href="zjl.html" target="frameright">周杰伦</a><br/>
<a href="qq.html" target="frameright">齐秦</a><br/>
</body>
</html>

<!--b.html-->
<html>
 <body bgcolor ="pink" >
 <!--target指定显示在哪个框架-->
<a href="zjl.html" target="frameright">周杰伦</a><br/>
<a href="qq.html" target="frameright">齐秦</a><br/>
 </body>
</html>

[html] view plain copy print ?

<html>
<body bgcolor ="silver">
c.html
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!--c.html-->
<html>
 <body bgcolor ="silver">
  c.html
 </body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

[html] view plain copy print ?

<html>
<body bgcolor="lightgreen">
齐秦的歌
</body>
</html>

<!--qq.html-->
<html>
 <body bgcolor="lightgreen">
  齐秦的歌
 </body>
</html>

[html] view plain copy print ?

<html>
<body bgcolor="silver">
周杰伦的歌
</body>
</html>

<!--zjl.html-->
<html>
 <body bgcolor="silver">
  周杰伦的歌
 </body>
</html>

演示效果如下图所示:

(9)iframe 浮动窗口
用于含有body体的页面直接嵌入另外一个页面,形成画中画的效果。

iframe测试代码如下:

(10)form表单元素
用于将数据提交给服务器，如网站上注册用户、发帖子等，这些需要使用表单元素.常见的表单元素有输入框、单选框、复选框、文本域、密码框等等。
基本样式:<input type="类型" name="名字"/>
input元素:输入框，根据type不同则类型不同.
隐藏域:提交数据但又不破坏界面
选择列表:select/option/textarea

用户登陆界面练习程序代码如下:

[html] view plain copy print ?

<html>
<head>
<title> 表单使用--登陆界面 </title>
</head>
<body>
<form action="ok.html" method="post"><!--action填写数据会传送到的页面的url-- method指方法通常有两种数据提交方法 post和get>
用户名:<input type="text" name="username"></br>
密码:<input type="password" name="password"></br>
<input type="submit" value="登录系统" />
<input type="reset" value="重新填写" />
</form>
</body>
</html>

<html>
 <head>
  <title> 表单使用--登陆界面 </title>
 </head>
 <body>
 <form action="ok.html" method="post"><!--action填写数据会传送到的页面的url-- method指方法 通常有两种数据提交方法 post和get>
 <!--name可用使用任意值，但不要使用保留关键字-->
 用户名:<input type="text" name="username"></br>
 密  码:<input type="password" name="password"></br>
 <input type="submit" value="登录系统" />
 <input type="reset" value="重新填写" />
  </form>
 </body>
</html>

[html] view plain copy print ?

效果如下图所示:

效果如下图所示:

[html] view plain copy print ?

<IMG alt="" src="https://img-my.csdn.net/uploads/201204/01/1333260349_7259.jpg">

综合表单演示程序代码如下:

[html] view plain copy print ?

<html>
<head>
<title> 表单元素</title>
</head>
<body>
<form action="ok.html" method="get">
<br/>
你最喜欢的城市:
<input type="checkbox" name="cities" value="beijing"/>北京
<input type="checkbox" name="cities" value="shanghai"/>上海
<input type="checkbox" name="cities" value="tianjin"/>天津
<br/>
您的性别是:
<input type="radio" name="sex" value="male"/>男
<input type="radio" name="sex" value="female"/>女
<br/>
隐藏域的使用
<input type="hidden" name="data" value="ok"/><br/>
请选择你的出生地:
<select name="birthplace" multiple="multiple" size=3>
<option value="sichuan">四川</option>
<option value="beijing" selected="selected">湖北</option>
<option value="xizang">西藏</option>
<option value="changsha">长沙</option>
</select><br/>
<input type="file" name="uploadfile"/>上传照片<br/>
备注:<br/>
<textarea name="notearea" cols="15" rows="5"></textarea><br/>
<input type="submit" value="提交"/>
<input type="image" src="images/enroll.jpg"/>
</body>
</html>

<html>
 <head>
  <title> 表单元素</title>
 </head>
 <body>
  <form action="ok.html" method="get">
  <br/>
 你最喜欢的城市:
<input type="checkbox" name="cities" value="beijing"/>北京
<input type="checkbox" name="cities" value="shanghai"/>上海
<input type="checkbox" name="cities" value="tianjin"/>天津
<br/>
您的性别是:
 <input type="radio" name="sex" value="male"/>男
 <input type="radio" name="sex" value="female"/>女<!--单选框的名字应该一样-->
 <br/>
 隐藏域的使用
 <input type="hidden" name="data" value="ok"/><br/>
 请选择你的出生地:
 <select name="birthplace" multiple="multiple" size=3>
<option value="sichuan">四川</option>
<option value="beijing" selected="selected">湖北</option>
<option value="xizang">西藏</option>
<option value="changsha">长沙</option><!--提交数据时是提交value值 所以一定要包含value-->
</select><br/>
<!--文件上传-->
 <input type="file" name="uploadfile"/>上传照片<br/>
备注:<br/>
<textarea name="notearea" cols="15" rows="5"></textarea><br/>
 <input type="submit" value="提交"/>
 <!--图片按钮 用于提交-->
 <input type="image" src="images/enroll.jpg"/>
 </body>
</html>

演示效果如下图所示:

(11)多媒体标记
使用embed嵌入多媒体文件
背景音乐 <bgsound src="#"/>
(12)页面标记
link元素标签最常见的用途是链接样式表
meta元素向服务器和客户端传达关于文档的隐藏信息。

4.图片坐标映射技术

通过坐标映射实现响应用户点击图片上某块区域。

图片坐标映射测试程序代码如下:

[html] view plain copy print ?

<html>
<head>
<script language="javascript">
<!--
function showrect()
{
window.alert("你点击了矩形区域!");
}
-->
</script>
<title> 坐标映射 </title>
</head>
<body>
点击不同区域有不同响应<br/s>
<img src="images/map.gif" usemap="#imgmap"/>
<map name="imgmap">
<area shape="rect" onclick="showrect();"href="#" coords="120,20,233,50">
<area shape="poly" onclick="alert('你点击了三角形区域!')" href="#" coords="100,100,180,80,200,140">
<area shape="circle" onclick="alert('你点击了圆形区域!')" href="#" coords="80,100,60">
</map>
</body>
</html>

<html>
 <head>
 <!--暂时对javascript不熟悉时使用三个函数-->
 <script language="javascript">
 <!--
    function showrect()
	{   
		window.alert("你点击了矩形区域!");
	}
 -->
 </script>
  <title> 坐标映射 </title>
 </head>
 <body>
 点击不同区域有不同响应<br/s>
 <img src="images/map.gif" usemap="#imgmap"/>
 <map name="imgmap">
 <!--坐标可以使用标尺工具准确测量-->
 <area shape="rect" οnclick="showrect();"href="#" coords="120,20,233,50">
 <area shape="poly" οnclick="alert('你点击了三角形区域!')" href="#" coords="100,100,180,80,200,140">
 <area shape="circle" οnclick="alert('你点击了圆形区域!')" href="#" coords="80,100,60">
 </map>
 </body>
</html>

运行效果如下图所示:

html练习题--高级邮箱登陆界面和清辉在线邮件管理系统请参见:

http://blog.csdn.net/ziyuanxiazai123/article/details/7419038《实战演练--高级邮箱登陆界面和清辉在线邮件管理系统》一文。

ORACLE_FANS

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
韩顺平PHP系列课程--html入门及实战演练

韩顺平PHP系列课程--html入门及实战演练本节要点:html课程主要讲解了html运行原理、html制作网页方法。课程工具:IE浏览器数据交换查看器:httpwatcher页面尺寸和颜色捕获工具: FastStone Caputurehtml参考教程 :W3School、html教程.详细内容:1.html运行原理HTML(Hypertext Markup La
复制链接

扫一扫