动态网页制作 第1章 HTML语言1
教学目标 了解网页与网站技术的发展 掌握HTML语言结构、编辑方法以及语法规范 掌握标题标记<hx>的使用方法 掌握字符格式化标记<font>的使用方法 《动态网页制作》——HTML基础
教学目标(续) 掌握分段与换行标记<p>和<br>的使用方法 掌握区块标记<div>和<span>的使用方法 掌握水平线标记<hr>的使用方法 《动态网页制作》——HTML基础
互联网 有关互联网的概念 互联网起源 互联网构成 互联网工作原理 《动态网页制作》——HTML基础
有关概念 互联网 由多个计算机网络相互连接而成的网络 计算机网络 两台或者两台以上的计算机互相连接 《动态网页制作》——HTML基础
网站 是网页的集合，使用浏览器通过域名(网址)访问。 网页 是构成网站的基本元素，依据HTML规则。 《动态网页制作》——HTML基础
网页与网站技术的发展 第一阶段——静态文档 第二阶段——动态网页 第三阶段——Web2.0时代 《动态网页制作》——HTML基础
第一阶段——静态文档 特点 实现了资源共享 用户通过终端Web浏览器访问Internet上各个Web站点(网站) 每个Web站点由多个Web页(网页)构成 每个Web页都是HTML编写的 实现了资源共享 《动态网页制作》——HTML基础
不足 无法实现各种动态的交互功能 无法支持后台数据库 无法有效的对站点信息进行及时的更新 无法实现动态显示效果 《动态网页制作》——HTML基础
第二阶段——动态网页 特点 动态网页以数据库技术为基础，可以大大降低网站维护的工作量； 采用动态网页技术可以实现更多的功能，如用户登录、在线调查、订单管理等等； 动态网页不是独立的网页文件，只有用户请求时服务器才生成一个完整的网页 《动态网页制作》——HTML基础
第三阶段——Web2.0时代 应用核心 Blog——博客/网志：是一个网站，可以在其中快速发布想法、与他人交流； RSS——站点摘要：是站点之间共享内容的一种技术，用于新闻按顺序排列 WIKI——百科全书：是多人协作的写作工具，由多人（包括发布者）维护。 《动态网页制作》——HTML基础
HTML语言结构 <html> -----------文件开始标记 <head> -----------文件头开始标记 … </head> -----------文件头结束标记 <body> -----------文件开始标记 </body> -----------文件结束标记 </html> ------------文件结束标记 《动态网页制作》——HTML基础
例题1.1 使用Windows系统中的记事本工具(Notepad)编写 注意开发过程和保存方法 开始程序附件记事本 英文输入状态下编写代码 保存时应注意后缀名 《动态网页制作》——HTML基础
程序代码 <html> <head> </head> <body> Hello world!
尚未保存 空格 《动态网页制作》——HTML基础
保存方式 后缀名 保存类型 《动态网页制作》——HTML基础
title标记 是标题标记 用于说明页面名称 显示在标题栏中 《动态网页制作》——HTML基础
meta标记 元信息标记 用来定义页面信息的名称、关键字、作者等 对用户来说是不可见的 头部内容中可以有多个meta元素 meta属性两种 name http-equiv 《动态网页制作》——HTML基础
metaname 主要用于描述网页，以便于搜索引擎查找、分类 重要取值 keywords-----页面关键字 description-----页面描述 generator------编辑工具 author------作者信息 《动态网页制作》——HTML基础
metahttp-equiv 辅助浏览器精确显示网页内容 重要取值 Expires：设定网页的到期时间 Pragma ：禁止从本地机缓存中访问页面 Refresh：自动刷新并指向新页面 Set-Cookie：网页过期后cookie被删除 Content-Type：设定页面使用的字符集 《动态网页制作》——HTML基础
body标记 网页的主体 常用到的属性 以<body>开始，以</body>结束 bgcolor background text 《动态网页制作》——HTML基础
例题1.2 使用NotePad编写一个网页程序，运行结果是网页文档区背景色为黄色，文本为绿色。 《动态网页制作》——HTML基础
程序代码 <html> <head> </head> <body bgcolor=“yellow” text=“green”> Hello world! </body> </html> 《动态网页制作》——HTML基础
运行结果 《动态网页制作》——HTML基础
网页常用颜色 名称 英文颜色名 十六进制代码 黑色 black #000000 蓝色 blue #0000FF 棕色 brown #A52A2A 灰色 gray #808080 绿色 green #00FF00 橘黄色 orange #FFA500 粉红色 pink #FFC0CB 红色 red #FF0000 白色 white #FFFFFF 黄色 yellow #FFFF00 《动态网页制作》——HTML基础
例题1.3 使用NotePad编写一个网页程序，运行结果是网页文档区显示背景图片。 《动态网页制作》——HTML基础
程序代码 <html> <head> </head> <body backgroud=“img\bg.jpg”text=“red”> Hello world! </body> </html> 《动态网页制作》——HTML基础
运行结果 《动态网页制作》——HTML基础
<hx>标记 标题是按级别区分的，不同的标题级别有对应的标记 x的取值为1~6 默认显示宋体字 使用align设置对齐方式 《动态网页制作》——HTML基础
例题1.4 使用EditPlus编写一个网页程序，运行结果是网页文档区显示1到6级标题式文字 《动态网页制作》——HTML基础
程序代码 <html> <body> <h1>第1级标题(h1)</h1> <h2>第2级标题(h2)</h2> <h3>第3级标题(h3)</h3> <h4 align="left">第4级标题(h4)(居左)</h4> <h5 align="center">第5级标题(h5)(居中)</h5> <h6 align="right">第6级标题(h6)(居右)</h6> </html> 《动态网页制作》——HTML基础
EditPlus的使用 先运行EditPlus 选择菜单File New HTML Page 修改或者在需要处添加代码 保存，输入文件名
EditPlus效果图 《动态网页制作》——HTML基础
运行结果 《动态网页制作》——HTML基础
<font>标记 在网页中设置字体、字号和颜色 face:设置字体 size:设置字号，7号最大，1号最小 color:设置颜色 《动态网页制作》——HTML基础
例题1.5 使用EditPlus编写一个网页程序，运行结果是网页文档区显示设置了字体、字号和颜色的文本 《动态网页制作》——HTML基础
程序代码 <BODY> <h1>设置文字的属性</h1> <font size=7 face="黑体" color=blue>这是黑体7号 蓝色</font><br> <font size=1 color=#00FFFF>这是1号字 青色</font><br> <font size=2 color=green>这是2号字 绿色</font><br> <font size=3 color=#FF0000>这是3号字 红色</font><br> <font size=-1 face="隶书" >这是隶书-1号字</font><br> <font size=+2 face="楷体" >这是楷体+2号字</font><br> </BODY> 《动态网页制作》——HTML基础
运行结果 -1和+2基于3号字 《动态网页制作》——HTML基础
归纳与补充 <font>与<hx>区别 <font>中的color属性与<body>中text属性关系 网页颜色 《动态网页制作》——HTML基础
<font>与<hx>区别 标记 对象 用法 取值 加粗 <font> 一段文字 <font size=x>文字<font> 1-7 否 <hx> 标题 <hx>文字<hx> 1-6 是 《动态网页制作》——HTML基础
font颜色与text颜色 都可以设置文本颜色 <font>可以在文件中多处设定 同时使用时，<font>标记优先 《动态网页制作》——HTML基础
<p>和<br>标记 分段标记和换行标记的效果不同 空格标记使用 《动态网页制作》——HTML基础
例题1.6 使用EditPlus编写一个网页程序，运行结果是网页的文本有分段、换行和多个空格效果 《动态网页制作》——HTML基础
程序代码 <BODY> <p> 第1段</P> <p> 第2段<br> 仍然为第2段，但已经换行。<br> 这一行是四个空格的效果</P> <p> 第3段</P> </BODY> 《动态网页制作》——HTML基础
运行结果 《动态网页制作》——HTML基础
归纳与补充 多个<p>标记不能产生多个空行 多个<br>标记可以长生多个空行 <p>标记可以使用align属性 《动态网页制作》——HTML基础
<div>标记和<span>标记 多个段落可形成一个区域 一行文字中的某几个字符可形成一个区域 《动态网页制作》——HTML基础
例题1.7 使用EditPlus编写一个网页程序，运行结果是网页的文本有区域效果 《动态网页制作》——HTML基础
程序代码 <BODY> <p align=center>第1段，居中对齐</p> <div align=right> <p>第2段，居右对齐</p> <p align=left>第3段，居左对齐</p> </div> <p>第4段<span><font size=6>特殊</font></span>字体 </p> </BODY> 《动态网页制作》——HTML基础
运行结果 《动态网页制作》——HTML基础
归纳与补充 <div>标记中可以设置align属性 <span>标记用于在行内控制特定内容显示 《动态网页制作》——HTML基础
<hr>标记 网页中可以插入水平线 对水平线进行格式设置 《动态网页制作》——HTML基础
例题1.8 使用EditPlus编写一个网页程序，运行结果是网页中产生多种水平线效果 《动态网页制作》——HTML基础
程序代码 <BODY bgcolor="#FFCC99"> 下面的是默认水平线<hr> 下面的是左对齐，宽度为220，高度为6像素的水平线 <hr align=left size=6 width=220> 下面的是浏览器宽度的80%，蓝色水平线 <hr width=80% color=blue> 下面的水平线没有立体效果 <hr size=6 noshade> </BODY> 《动态网页制作》——HTML基础
运行结果 《动态网页制作》——HTML基础
归纳与补充 宽度可以是像素，也可以是百分比 color属性设置颜色 size属性设置高度 《动态网页制作》——HTML基础
特殊字符标记 特殊字符 键盘无法直接输入的符号，如×，© HTML中已定义为关键字的符号，如<,> 数学符号、希腊字符、各种箭头记号、科技符号以及形状 《动态网页制作》——HTML基础
常用字符一览表 字符形式 含义 代码 空格 “ 引号 " < 左尖括号 > 右尖括号 © 版权符号 © × 乘号 × ™ 商标符号 ™ 《动态网页制作》——HTML基础
用特殊符号而不用图片的好处 是基于字符显示，下载更快 可以随意改变大小 很容易就能改变颜色 《动态网页制作》——HTML基础
小结 HTML文件的基本结构 <body>的常用的属性 <font>的常用属性 <p>和<br>的使用 特殊字符的输入 《动态网页制作》——HTML基础
课后作业 主教材P54上机练习题5 本课程所演示的教学用例上机操作 《动态网页制作》——HTML基础