html入门及实战演练
韩顺平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基本结构
<元素 属性1="属性值" 属性2="属性值" ...>内容
<元素 属性="属性值">
html入门实例程序代码如下:
横看成岭侧成峰
远近高低各不同
不识庐山真面目
这是一个段落
表头
*******************版权符号©
¥
空格处理:hello world!
连接到本地a.html
跳转到百度
联系管理员
演示效果如下图所示:
3.html常用标记(tag)
(1)标记
标记通常是成对出现
标记也可以单个出现
(2)后缀html和htm的区别
如果一个网站有index.html和index.htm，优先访问.html文件;htm后缀是为了兼容DOS系统8.3的命名规范。
(3)符号实体 网页上显示的一些特殊符号,比如版权符号?.
(4)超级链接元素
(5)图片元素
(6)表格元素
a.表格元素在网页布局要求不高的情况下，使用table布局，及使用表格来显示数据，同时用于布局.表格布局有缺陷，现在使用div+css.
b.cellspacing 内边距
cellpadding 外边距
表格练习菜谱程序代码如下:
表格练习--显示菜单
菜谱
蔬菜
清炒茄子
花椒扁豆
小炒韭菜
小葱豆腐
荤菜
香干回锅肉
鱼香肉丝
农家小炒肉
水煮鱼片
演示效果如下图所示:
课程表练习程序代码如下:
html课程表练习
课程表
项目
上课
休息
星期
星期一
星期二
星期三
星期四
星期五
星期六
星期日
上午
语文
数学
英语
化学
数学
计算机
休息
英语
数学
英语
数学
政治
计算机
化学
英语
地理
数学
政治
计算机
数学
地理
化学
历史
政治
计算机
下午
数学
历史
政治
化学
体育
计算机
休息
数学
数学
政治
英语
历史
计算机
运行效果如下图所示:
(7)列表
无序列表:
type取值为disc、circle、square
有序列表:
type用于指定用什么显示，start表示从第几开始计算
列表练习程序代码如下:
无序列表练习
- 拯救大兵瑞恩
- 阿甘正传
- 西雅图未眠夜
- 达芬奇密码
- 宋江
- 卢俊义
- 吴用
- 林冲
演示效果如下:
(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,代码如下:
周杰伦
齐秦
c.html
齐秦的歌
周杰伦的歌
演示效果如下图所示:
(9)iframe 浮动窗口
用于含有body体的页面直接嵌入另外一个页面,形成画中画的效果。
iframe测试代码如下:
(10)form表单元素
用于将数据提交给服务器，如网站上注册用户、发帖子等，这些需要使用表单元素.常见的表单元素有输入框、单选框、复选框、文本域、密码框等等。
基本样式:
input元素:输入框，根据type不同则类型不同.
隐藏域:提交数据但又不破坏界面
选择列表:select/option/textarea
用户登陆界面练习程序代码如下:
表单使用--登陆界面
效果如下图所示: 综合表单演示程序代码如下:
表单元素
演示效果如下图所示:
(11)多媒体标记
使用embed嵌入多媒体文件
背景音乐
(12)页面标记
link元素 标签最常见的用途是链接样式表
meta元素 向服务器和客户端传达关于文档的隐藏信息。
4.图片坐标映射技术
通过坐标映射实现响应用户点击图片上某块区域。
图片坐标映射测试程序代码如下:
坐标映射
点击不同区域有不同响应
html练习题--高级邮箱登陆界面和清辉在线邮件管理系统请参见:
http://blog.csdn.net/ziyuanxiazai123/article/details/7419038《实战演练--高级邮箱登陆界面和清辉在线邮件管理系统》一文。