HTML网页制作第一章
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
黑色
白色 红色 黄色 绿色 蓝色
#000000
#FFFFFF #FF0000 #FFFF00 #00FF00 #0000FF
black
white red yellow green blue
1.2 HTML技术简介
1.2.3 HTML常见设置
2) background属性设置背景图片
例子1-3:背景颜色 <html> <head><title>背景图片测试</title></head> <body background=“hourse.gif”> </body> </html>
图片分类:BMP、JPG、PNG、GIF。
1.2 HTML技术简介
1.2.1 什么是HTML(HyperText Mark-up Language)
HTML是用来描述网页的一种语言，HTML指的是超文本标 记语言，HTML不是一种编程语言，而是一种标记语言。 HTML网页技术是一切网页技术的基础，只有学好了HTML 技术，才能做出精美的网站。
<bgsound/>标签中，常用的属性有src、loop、volume、 balance四个，他们的含义是: src:所插入的背景音乐的URL(路径、网址)，可以是本地 音乐也可以是网络音乐资源路径，常用的声音格式有： mp3、wav、midi等。 loop:设置循环的次数，当值是-1或者Infinite的时候表 示无限循环。 volume:音量,值为-1000到0之间，0是最大音量。 balance:声道，值为-1000到1000之间的值，负值将声音 发送左声道，正值将声音发送右声道，0表示立体声
域名标识:国别的最高层域名:.cn---中国；.au---澳大利亚;.jp---日 本等。 组织、机构不同的域名标识，如.com—商业公司；.org—组织、协 会等;.net—网络服务；.edu—教育机构;.gov—政府部门;.mil—军 事领域;
1.1网站的概述
（5）认识网页的元素 网页标题、Logo、视频、文本、导航条、图片、表单、超级链接。
注意:在<hr/>标签中常见的属性: size:设置水平线的大小，比如4表示水平线有4像素粗。 color:设置水平线的颜色，可以使RGB值也可以是相对应的单词。 width:设置水平线的长度，可以是窗体的百分比也是可以说正数的像素值。 align：设置水平线的对齐方式，可以是left(左)、right(右)、center。
1.2 HTML技术简介
1.2.4 文字排版
3)字体
<font>标签用于控制网页上文本的显示外观。文本大小、字体类型和颜色等
属性都可以用<font>标签指定。
例子1-7:字体设置 <html> <head><title>字体设置</title></head> <body> <font size=“+3” color=“#000099” face=“隶书”> 欢迎大家来到HTML网页制作课程！ </font> </body> </html>
<embed/>标签常见的属性有: src:为音频或视频文件及其路径，可以是相对路径或绝对路径，和 bgsound标签的src属性含义相同。 height:控制面板的高度。 width：控制面板的宽度。 autostart:规定音频或视频文件是否在下载完之后就自动播放，该属性 的值可以是： true:音乐文件在下载完之后自动播放。 false:音乐文件在下载完之后不自动播放。 loop:规定音频或视频文件是否循环及循环次数，该属性的值可以是: 正整数:音频或视频文件的循环次数。 true:音频或视频文件循环。 false:音频或视频文件不循环。 align:该属性规定控制面板和当前行中的对象对齐方式，该属性的值可 以是： center:控制面板居中。 left: 控制面板居左。 right：控制面板居右。 top: 控制面板的顶部与当前行中的最高对象的顶部对齐。 bottom: 控制面板的底部与当前行中的对象的基线对齐。 starttime:该属性规定音频或视频文件开始播放的时间，未定义则从文 件开头播放。 <embed src="青春纪念册.mp3" starttime=”00:10”/> 表示从文件的第10秒钟的位置开始播放。
1.2 HTML技术简介
1.2.3 HTML常见设置
4)插入外部资源
例子1-4:插入外部资源 <html> <head><title>背景音乐</title></head> <body> 播放音乐文件<br/> <embed src=“test.mp3” width=“200px” height=“150px”/><br/> <embed src=“test.swf” width=“600px” height=“350px”/> </body> </html>
静态网站:是指全部由HTML代码格式页面组成的网站，所有的内容包
含在网页文件中。网页上也可以出现各种视觉动态效果，如GIF动画、 FLASH动画、滚动字幕等。
1.1网站的概述
（3）浏览网页的工具---浏览器
浏览器:用于打开显示网页的软件。常见浏览器是 Windows系统自带
的IE浏览器。还有Firefox、google浏览器、遨游、腾讯TT、360安 全浏览器、Opear等。
3)背景声音设置
例子1-4:背景声音 <html> <head><title>背景音乐设置</title></head> <body> <bgsound src=“test.mp3” loop=“3” volume=“0” balance=“0”/> 点击浏览器上的“停止”按钮停止播放背景音乐 。 </body> </html>
1.2 HTML技术简介
1.2.4 文字排版
1)标题标记
标题能分隔大段文字，概括下文内容，在网页的文章中，为了突出标题的重 要性，HTML提供了一组针对标题的样式标签，分别为实体标签<h1>到<h6>， 文字尺寸从大到小代表不同级别的标题 。 例子1-5:分段设置 <html> <head><title>背景图片测试</title></head> <body> <h1>1号标题</h1> <h2>2号标题</h2> <h3>3号标题</h3> <h4>4号标题</h4> <h5>5号标题</h5> <h6>6号标题</h6> </body> </html>
1.2 HTML技术简介
1.2.4 文字排版
3)字体样式
在美化文字的时候我们可以使用<u></u>标签对文字添加下划线、使用 <i></i>标签将文字变为斜体、使用<b></b>标签对文字进行加粗。 例子1-8:字体设置 <html> <head><title>字体设置</title></head> <body> <u>新中国成立60周年</u><br/> <i>新中国成立60周年</i><br/> <b>新中国成立60周年</b><br/> </body> </html>
从例1-5可以看出标题标签的特点有： 独占一行、文字加粗、并且不同的 编号显示的字体大小不同，这就为 我们标题排版带来了方便
1.2 HTML技术简介
1.2.4 文字排版
2)水平线
如果要在网页中生成一条水平分割线，将不同的内容分开，使文字看起来更 加清晰，那么就可以使用<hr/>标签来完成。在<hr/>标签中我们可以通过设 置不同的属性改变其现实的样式。 例子1-6:分段设置 <html> <head><title>水平线</title></head> <body> <hr size=“4” color=“#FF0000” width=“90%” align=“center”/> <hr size=“1” color=“blue” width=“200px” align=“left”/> </body> </html>
4)段落
例子1-9:段落设置 <html> <head><title>段落设置</title></head> <body> <p>新中国成立60周年</p> <p>新中国成立60周年</p> <p>新中国成立60周年</p> </body> </html>
本章回顾
网页制作基础
网页与网站的区别
了解HTML语言
1.2 HTML技术简介
1.2.3 HTML常见设置
1)背景设置(背景颜色、背景图片、背景声音)
例子1-2:背景颜色 <html> <head><title>页面背景测试</title></head> <body bgcolor=“#FF0000”> <h2>Hello World,欢迎来到HTML网页制作课程!</h2> </body> </html> 表1-1颜色对照表 颜色 RGB值 单词
例子1-1:第一个HTML文档 <html> <head> <title>标题</title> </head> <body> <h2>Hello World,欢迎来到HTML网页制作课程!</h2> </body> </html>
注意:<head>到</head>标签之间的所有内容我们称为头部信息，主要声明网页文件描述浏览器所需的基本信息。如标 题、语言环境等。<body>到</body>之间的内容我们称为网页的主体内容，用于描述网页的具体内容，也就是我 们最后在浏览器中看到的内容。
IE浏览器
360安全浏览器
Firefox浏览器
Google浏览器
1.1网站的概述
（4）IP地址和域名简介 IP地址：在国际互联网上有成千上万台主机，为了区分这些主机，人们 给每台主机都分配了一个唯一的“地址”作为标识，称为IP地址， 就相当于人们的省份证。IP(Internet Protocol)国际互联网协议缩 写。查看IP地址的方法: 单击“开始”->“运行”->输入“cmd”->输入“ipconfig /all” 点击回车键查看
HTML网页制作
姓名:邓志东 QQ:494504483
课程章节介绍
1 2 3ຫໍສະໝຸດ Baidu
网页制作基础 网页常用标签学习 Dreamweaver使用
4
5 6
网页框架学习
应用CSS样式及实例 网页项目制作及总结
第一章
网页制作基础
本章主要内容
了解网页的相关 知识
HTML技术简介
教学要求
1
了解互联网的发展及互联网所 使用的技术。
网站：浏览网页时在浏览器中看到的一个个页面就是网页，而多个
相关的网页的集合就构成了一个网站。
1.1网站的概述
（2）动态网站与静态网站的区别
动态网站：动态网站并不是指具有动画功能的网站，是指能够通过数
据库进行架构的网站。动态网站除了要设计网页外，还要通过数据 库和编程序来使网站具有更多自动的和高级的功能。一般是以 asp,jsp,php,aspx等结束。
HTML结构用记事 本敲写代码
HTML标签
注意:
font标签常用的属性有： size:用于规定文本的大小。取值范围为1—7。最大值为7，最小为1。也可以在大小前加上符号。 比如-3表示在3的基础上小7，+3表示在3的继承上增加7个大小。 color:设置字体颜色，可以指定颜色名称和十六进制值。 face:用于设置字体的类型，如:宋体、楷体、隶书等。
2
认识HTML、常见的HTML标记。
1.1网站的概述
（1）网页与网站的区别
网页是什 么呢？
网页:网页是www(万维网)上的页面，其文件后缀名通常为.html或.htm。
网页中包含一些超级链接，通过这些超级链接可以从一个网页浏览 到另一个网页。网页长度没有限制，其中还可以包含格式化文本、 图像、多媒体、表单、表格。
1.2 HTML技术简介
1.2.2 HTML的结构 在日常生活中，我们所看到的网页，是浏览器对HTML进行解释 的结果。要查看一个网页的HTML代码，只需在浏览器菜单栏上点击 “查看”，然后选择“源文件”即可。
如图:
1.2 HTML技术简介
1.2.2 HTML的结构
完整的HTML网页文件应该包括头和主体两大部分，而这两部分都包含在 <HTML>与</HTML>标签之间