创建一个HTML网页文件,创建一个 html文件.ppt

高等学校计算机应用人才培养系列教材 2.* HTML网页设计 第二章 创建一个HTML文件 本章结构 使用记事本新建一个HTML文件 HTML的组织规范 HTML基本标记 小结 思考题 使用记事本新建一个HTML文件 HTML的组织规范 HTML的语法定义非常明确,所有的HTML文档都遵循由W3C规定的HTML规范。下面展示一个基本的HTML文档模板: HTML基本标记——结构标记 标记用来鉴别一个文件是否为HTML文件,……元素标识了一个HTML文档的开始和结束。所有其它的标记都包含在和之间。加上标记声明,编写HTML文件代码的第一步如图所示: HTML基本标记——头标记

在标记和之间的部分被称为文件头。称为头标记,含有关于网页文件相关的信息,所以它们中的大部分不会出现在浏览器中。网页文件信息包括网页文件的标题、脚本以及其它关于文件的描述。对应的标记包括、、、、中,并且每个页面只允许有一个标记。设置标题后,当浏览该页面时标题内容会出现在浏览器窗口标题栏区域。 HTML基本标记——内容标记 主体(body)区由内容标记引出,主体部分包括了所有要在浏览器中显示出来的信息,也就是包括了所有的其它标记和元素。该标记具有一些用于定义整个网页特点的属性,如网页的背景颜色、背景图案和文字的颜色等。 HTML基本标记——注释标记 有时候网页布局和内容比较复杂,为了增加HTML的可读性,以及在共同开发的网页中防止由于多人共同编辑同一HTML文件造成代码混乱,需要为HTML代码加上注释,以说明某段代码特殊的含义。注释的标记是: 注释标记可以跨行使用,即可以注释一段内容。 HTML基本标记——综合示例 例子中的head区设置了网页字符编码采用“gb2312”,网页标题是“使用所有基本标记”。标记中设定了属性style的内容:font-size:20pt,将网页内出现的字体大小统一设为20pt。在head区和body区之间插入了两行注释 本章小结 本章首先介绍了如何新建、编辑一个HTML文件,之后介绍了HTML的基本组织规范:文件头和文件主体。接下来结合示例介绍了、、、和等HTML基本标记。通过本章内容的学习,读者可以自主建立起一个简单、完整并且符合规范的HTML文件。后续章节将逐步介绍HTML中其他重要的标记,从而为建立一个内容更加丰富的HTML网页打下基础。 思考题 怎样使用记事本创建一个HTML文件? HTML文件分为哪几个基本部分? HTML文档的头部主要作用是什么? HTML的内容标记是什么,有哪些属性? 高等学校计算机应用人才培养系列教材 2.*
<!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> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/js/myfocus-2.0.1.min.js"></script> <script type="text/javascript"> myFocus.set({ id:'demo', pattern:'mF_liquid'}); </script> </head> <body> <div id="top"> <div id="top_text"> <ul> <li><a href="#">联系我们</a></li> <li><a href="#">加入收藏</a></li> <li><a href="#">设为首页</a></li> </ul> </div> </div> <div id="middle"> <div id="logo"> <div id="logo_left"> <img src="images/logo.jpg" alt="" width="200" height="80" /> </div> <div id="logo_right"> <img src="images/tel.jpg" width="28" height="28" /> 24小时服务热线 <span>123-456-7890</span> </div> <br class="clear_float"> </div> <div id="nav"> <div id="nav_left"> <img src="images/nav_left.jpg" width="10" height="40" /> </div> <div id="nav_middle"> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于幕课</a></li> <li><a href="#">新闻动态</a></li> <li><a href="#">课程中心</a></li> <li><a href="#">在线课程</a></li> <li><a href="#">人才招聘</a></li> </ul> <div id="gezi"> <form> <input type="text" /> </form> </div> </div> <div id="nav_right"> <img src="images/nav_right.jpg" width="10" height="40" /> </div> </div> <div id="demo" class="ad"> <div class="pic"> <ul> <li><a href="#"><img src="images/ad2.jpg" thumb="" alt="" text="详细描述2" /></a></li> <li><a href="#"><img src="images/ad3.jpg" thumb="" alt="" text="详细描述3" /></a></li> <li><a href="#"><img src="images/ad4.jpg" thumb="" alt="" text="详细描述4" /></a></li> <li><a href="#"><img src="images/ad3.jpg" thumb="" alt="" text="详细描述5" /></a></li> </ul> </div>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值