HTML网页制作第一章
学习如何使用HTML和CSS创建网页
学习如何使用HTML和CSS创建网页第一章：HTML基础知识HTML（HyperText Markup Language）即超文本标记语言，是用于创建网页结构的标记语言。
下面将介绍HTML的基础知识。
1.1 HTML元素和标签HTML由一系列的元素（element）组成，每个元素都由开始标签（opening tag）和结束标签（closing tag）组成。
元素可以包含文本内容、图像、链接等。
例如，一个段落元素可以使用`<p>`开始标签和`</p>`结束标签包裹内容。
1.2 HTML属性HTML元素可以拥有属性（attribute），属性提供了有关元素的额外信息。
元素的开始标签可以包含属性，属性以名称-值对的形式出现。
例如，链接元素可以设置`href`属性以指定目标链接。
1.3 常用的HTML元素HTML提供了丰富多样的元素，用于创建各种不同类型的内容。
常用的HTML元素包括标题元素（`<h1>`到`<h6>`）、段落元素（`<p>`）、标题元素（`<h1>`到`<h6>`）、链接元素（`<a>`）、图像元素（`<img>`）等。
第二章：CSS样式CSS（Cascading Style Sheets）即层叠样式表，用于为HTML文档添加样式和布局。
以下将介绍CSS的基础知识。
2.1 CSS选择器CSS选择器用于选择要应用样式的HTML元素。
常用的CSS选择器包括标签选择器（`p`）、类选择器（`.classname`）、ID选择器（`#idname`）等。
2.2 CSS属性和值CSS属性用于设置HTML元素的样式。
每个CSS属性都有与之对应的值。
例如，`color`属性用于设置文本颜色，`font-size`属性用于设置字体大小。
2.3 CSS盒子模型CSS盒子模型用于描述HTML元素的布局。
第章HTML网页制作-PPT精选文档
13
北京万博天地网络技术股份有限公司 版权所有
1.2.1 字体（文章字体）
语法: 说明: <FONT SIZE=”” COLOR=””></FONT> 其中SIZE属性可以选择1－7；COLOR属性值 可以选择RGB值或者预定义颜色名称
常用的颜色名称有：black（黑）,white（白）,red （红）,green（绿）,blue（蓝）,yellow （黄）,aqua（浅绿）,fuchsia（紫红）,gray （灰）,Lime（橙）,maroon（栗色）,purple （紫）,olive（橄榄）,silver（银色）
第一章 HTML网页制作
本章目标 了解HTML基本概念 了解Web站点发布原理 掌握HTML基本词法结构 熟练HTML常用词法
2
北京万博天地网络技术股份有限公司 版权所有
本章内容
1.1 HTML基础
1.2
HTML标记
3
北京万博天地网络技术股份有限公司 版权所有
1.1 HTML基础 HTML基本概述及其特点 HTML发布过程 HTML词法类型 HTML文档的基本结构 HTML正文 注释
6
北京万博天地网络技术股份有限公司 版权所有
1.1.3 HTML词法类型 HTML标记的语法是 <标记名称 属性1名=属性1值 属性2名=属性 2值 ………… > 标记在表示HTML文档内容结构和含义的 时候，通常有两种方式
单标记 双标记
7
北京万博天地网络技术股份有限公司 版权所有
1.1.4 HTML文档的基本结构 HTML结构如下所示
4
北京万博天地网络技术股份有限公司 版权所有
1.1.1 HTML基本概述及其特点 超文本标记语言HTML（Hyper Text Markup Language） 一个HTML文档包含两部分内容
网页制作-第1章
第 8 页
1.1.4 HTML文档的基本结构 1. HTML文档的基本结构
<html>
<head> 头部信息 </head> <body> 文档主体(正文)
文档开始 头部
主体
</body>
</html>
第 9 页文档结束2. HTML文档的头部
HTML文档的头部在<head>、</head>双标签中，但头标签对<head>、 </head>可以省略。
<body bgproperties >
<body text="blue"> <body link="green"> <body vlink="green"> <body alink="green">
第 12 页
1.2.2 设置页面的背景色和前景色
默认情况下，网页的背景色为白色，前景色为黑色。 利用 <body> 标 签中的 bgclcor 属性和 text 属性可分别设置网页的背景颜色和文字颜色。
HTML的具体功能： 1．格式化文本。如设置文本的对齐方式、字体、颜色等。 2．建立超链接。鼠标点击获得指定的目标；设置超链接样式等。 3．建立列表。以列表方式显示信息，方便阅读。 4．插入图形。如设置图像的样式（如大小、边框、布局等）。 5．建立表格。 6．加入表单、控键等。这是客户与网页交互的主要渠道。 7．加入多媒体。如声音、视频、动画。
第 10 页
3. HTML文档的主体
<body> 文档主体(正文) </body>
快速入门HTML编程
快速入门HTML编程第一章：HTML介绍与基本结构HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。
它使用标记标签来描述网页的内容和结构。
HTML文档由以下几个基本结构组成：1.1 DOCTYPE声明：<!DOCTYPE html> 声明标示该文档类型为HTML5。
1.2 html元素： <html> 元素是 HTML 页面的根元素。
1.3 head元素： <head> 元素包含页面的元信息，如标题、脚本和样式表。
1.4 title元素： <title> 元素定义了文档的标题，显示在浏览器的标题栏或页签上。
1.5 body元素： <body> 元素包含网页的实际内容，如文本、图像、链接等。
第二章：HTML标记标签HTML标记标签是构成HTML文档的基本组成单位，通过使用标签可以定义文档的结构和样式。
常用的HTML标记标签如下：2.1 标题标签：h1、h2、h3、h4、h5、h6标签用于定义标题的级别，其中h1是最高级别的标题，h6是最低级别的标题。
2.2 段落标签：p标签表示一个段落，用于包裹文本内容，并在段落前后留有空白。
2.3 链接标签：a标签用于创建超链接，通过href属性指定链接的目标URL。
2.4 图像标签：img标签用于在网页中插入图像，通过src属性指定图像的URL。
2.5 列表标签：ul、ol、li标签分别用于创建无序列表、有序列表和列表项。
2.6 表格标签：table、tr、td标签用于创建表格，table表示整个表格，tr表示表格中的一行，td表示表格中的一个单元格。
2.7 表单标签：form、input、select、textarea标签用于创建表单，form表示整个表单，input表示输入框，select表示下拉列表，textarea表示多行文本输入框。
第三章：HTML样式与样式表使用HTML标签可以定义基本的文档结构，但如果想要更好地控制页面的外观和布局，就需要使用CSS（Cascading Style Sheets，层叠样式表）。
HTML与CSS网页设计的基础教程
HTML与CSS网页设计的基础教程第一章：HTML的基础知识HTML（HyperText Markup Language）是一种用于创建网页的标记语言，它是网页设计的基本元素。
本章将介绍HTML的起源、基本结构和常用标签的使用。
1.1 HTML的起源HTML最早由欧洲核子研究中心（CERN）的物理学家蒂姆·伯纳斯-李（Tim Berners-Lee）于1990年创造。
它的初衷是通过超链接帮助研究员在不同的文档之间进行信息共享。
1.2 HTML的基本结构一个典型的HTML文档由DOCTYPE声明、head标签和body标签组成。
DOCTYPE声明定义了文档的类型，head标签包含了文档的元数据（如标题、字符编码等），body标签则包含了网页的实际内容。
1.3 常用的HTML标签HTML标签用于定义网页的结构和内容。
常用的HTML标签包括标题标签（h1~h6）、段落标签（p）、列表标签（ul、ol、li）、超链接标签（a）等。
通过合理使用这些标签，我们可以实现网页的结构化布局和内容的呈现。
第二章：CSS的基础知识CSS（Cascading Style Sheets）是一种用于定义网页样式的样式表语言。
本章将介绍CSS的原理、选择器和常用属性的使用。
2.1 CSS的原理CSS通过为HTML元素添加样式，实现对网页外观的控制。
它使用一种层叠的机制，即当多个样式规则应用于同一个元素时，根据优先级和特殊性规则来确定最终的样式。
2.2 CSS选择器CSS选择器用于选择要样式化的HTML元素。
常用的选择器有元素选择器、类选择器、ID选择器和层次选择器等。
选择器的合理使用可以准确地选中目标元素，并为其应用特定的样式。
2.3 常用的CSS属性CSS属性用于定义元素的样式，包括宽度、高度、颜色、字体等。
常用的CSS属性有盒模型属性（border、padding、margin）、背景属性（background）、文本属性（color、font-size）等。
第一部分 HTML第一章
4.3 不同的平台
用户的平台或者是操作系统也会影响网页 外观。简单对策：
允许变化 指定常用的字体并提供选择 确保媒体播放器在所有的平台上都是可用的 不要在你的界面设计中模仿某个操作系统
4.4 连接速度
网页是要发布在互联网上的，在它到达终 端用户前，它必须经过拥挤的网络：
让你的文件尽可能的小 了解你的用户
1.4.2 CSS (Cascading Style Sheets)
(X)HTML用来描述网页的内容，而CSS是用来描述 你希望这些内容如何显示的。 CSS提供页面在传统的浏览器和屏幕上展示的方法 ，还提供控制文件在其他媒介上展示的方法，例如 打印机和掌上设备。
1.4.3 JavaScript/DOM脚本
每个网站都是由一个“想法”而起的，然 后集体讨论如何使这个“想法”称为网站。 为什么要创建这个网站？你期望达到什么 目标。 你给受众提供什么？ 你希望用户在你的网站上做什么？他么离 开之后呢？ 用什么来吸引用户回访？ ………
5.2 创建和组织内容
网站最重要的部分是内容，尽管技术和工 具日新月异，但在网上依然是以内容为王。 必须要有一些有价值的东西，无论是读的、 做的还是买的，用来吸引用户访问，并确保 他们再次访问。
1.2 信息设计
包括内容的组织和如何获取这些内容。 信息设计师（信息架构师）处理的是流程图表 ，他们也许永远不会接触一个图形和文本，但他们 的工作却是站点创建的关键环节。 Information Architecture for the World Wide Web:Designing Large-Scale Web Sites,第三版 Lou Rosenfeld 和 Peter Morville
JavaScript是一种脚本语言，常用于操纵网页元素或 者某些浏览器窗口功能，为网页添加互动和行为， 例如：
HTML网页设计教案
附加题
课后作业（本周五3、4节前上交）：
1．简述网页、网站和主页的异同。
2．网页标准主要由哪三部分组成？分别解释其含义。
3．简述网站开发的工作流程。
4．常用的网页制作工具有哪些？分别有哪些特点？
（1）HTML概念；
（2）一个HTML的示例。
教师活动：启发诱导、构思、实际操作演示。注意：①配色方案、风格问题；②软件操作的方法。
学生活动：学生讨论，交流互动，发散探究。
教学意图：通过软件实际操作，及时巩固专业技能。拓展学生的思维空间，培养学生的动手能力。
归纳总结：
小结本节课的主要内容、主要思想方法和主要操作技能。
教学意图：加深学生对网页设计原则的理解，加强学生应用专业知识的兴趣和能力的培养。
例2：网页色彩的搭配问题探究：
（1）IBM（蓝色巨人）网站
（2）爱情交友网
例3：网页风格的设计问题探究：
（1）儿童网站
（2）新浪网站
教师活动：启发诱导，展示实际不同网页配色方案。及时点评，注意：不同应用场合、不同人群。
学生活动：学生分组讨论，交流互动。最后到讲台说思路。
教案：附加题
教学过程及时间分配
主 要 教 学 内 容 及 步 骤
课前准备工作
图样
图1—1：腾迅QQ网站首页；图1—2：网址之家首页截图；
图1—3：IBM蓝色巨人网站截图；图1—4：爱情交友网站首页截图；
图1—5：儿童网站首页截图；图1—6：新浪网站首页截图。
演示素材
5+8分钟
变化：
hao123网址之家内容不变
HTML网页制作教程第一章
所谓超文本，是因为它可以加入图片、声音、动画、影视等内容，事实上每一个 HTML 文档都是一种静态的网页文件，这个文件里面包含了 HTML 指令代码，这些 指令代码并不是一种程序语言，它只是一种排版网页中资料显示位置的标记结构 语言，易学易懂，非常简单。HTML 的普遍应用就是带来了超文本的技术----通 过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面与世界 各地主机的文件链接。直接获取相关的主题。如下所示：
<HTML></HTML>在文档的最外层， 文档中的所有文本和 html 标签都包含在其中， 它表示该文档是以超文本标识语言（HTML）编写的。事实上，现在常用的 Web 浏览器都可以自动识别 HTML 文档，并不要求有 <html>标签，也不对该标签进行 任何操作，但是为了使 HTML 文档能够适应不断变化的 Web 浏览器，还是应该养 成不省略这对标签的良好习惯。
通过 HTML 可以表现出丰富多彩的设计风格：
图片调用：<IMG SRC="文件名"> 文字格式： <FONT SIZE="+5 " COLOR="#00FFFF">文字</FONT>面跳转：〈A HREF="文件路径/文件名"></A>
动态网页设计与制作 第1章 HTML基础
3．body元素
11
1.2 HTML常用元素
1.2.2 常用块元素 1．标题块元素
h1 – h6元素
12
1.2 HTML常用元素
1.2.2 常用块元素 2．段落块元素
p元素: p是paragraph（段落）的简写，p元素内一般包含一个段落文字，浏
览器将自动在p元素前后加一行空行 注意: 在元素内容中用空格或换行符进行排版都是无效的
7
1.1.2 编写及显示HTML文件
HTML文件具有以下特点:
HTML文件是一种包含成对标签元素的普通文本文件 HTML文件必须以htm或html作为扩展名 HTML文件可以在大多数流行的浏览器上显示
示例1-1:
在文本编辑器中输入该程序，程序中不要输入行号 编写HTML程序时，格式上没有要求，但是，为了便于程序的阅读和维护， 编程时应该根据标签的结构适时换行 保存文件名为ch1_01.html
9
1.1.3 标签、元素和属性
3．属性 在元素的起始标签中，还可以包含―属性‖，用来表示元素的其他特性，它的格式: <标签名称 属性名="属性值"> 像标签名称一样，属性名对大小写也是不敏感的，但是为了便于程序的阅读和维护， 编程时建议使用小写字母。另外值得注意的是，虽然HTML5并没有要求属性值一定 要有双引号，但是，为了养成良好的编程习惯，还是应该统一地在属性值外面加上 双引号（英文输入模式下的双引号）。 4．元素的嵌套性 除了HTML文档元素html外，其他HTML元素都是被嵌套在另一个元素之内的。
<body> <header>…</header> <nav>…</nav> <section> … </section> <article> … </article> <aside>…</aside> <footer>…</footer> </body>
《网页设计与制作》第一章网页制作基础
块级元素与行内元素
浮动布局
浮动布局是一种常用的网页布局技术，通过设置元素的 `float` 属性，可以让元素脱离正常的文档流，向左或向右移动，直到遇到父元素的边界或另一个浮动元素。
使用浮动布局可以实现多种布局效果，例如多列布局、文字环绕图像等。
定位布局通过设置元素的 `position` 属性，可以精确控制元素在页面上的位置。常见的定位方式有静态定位（`static`）、相对定位（`relative`）、绝对定位（`absolute`）和固定定位（`fixed`）。
在线网页编辑器
网页制作工具简介
延时符
02
HTML基础
HTML文档结构
<html>元素是HTML文档的根元素，包含了整个文档的内容。
<!DOCTYPE html>声明文档类型为HTML5。
HTML文档由一系列的元素构成，包括`<!DOCTYPE html>`、`<html>`、`<head>`和`<body>`等。
03
响应式图片可以有效地减少带宽和加载时间，提高网页的性能和用户体验。
01
响应式图片是指在不同尺寸的屏幕上显示不同分辨率的图片。
02
通过使用HTML的srcset属性和CSS的picture元素，可以指定不同尺寸屏幕下的图片源，从而实现响应式图片。
响应式图片
THANKS
属性选择器
01
03
02
04
CSS选择器
用于设置元素的前景色和背景色，如`color`和`background-color`。
颜色与背景
用于设置字体类型、大小、行高等，如`font-family`、`font-size`和`line-height`。
网页制作_HTML v1.1
网 页 制 作 教 程
<TITLE>Web页标题</TITLE>
</HEAD>
<BODY> 正文，正文， 正文， 正文，正文， 正文 </BODY> </HTML> 注意：空格、回车等格式控制符在显示时是不起作用的，要在网页中显 示空格或产生换行是要借助于标记符和参考字符来完成。 第四节 添加注释
10
注：与HTML标记符不同，字符代码名称区分大小写。
如:要在网页中显示以下内容： <Hello Word> 则不能写成：<body><Hello Word></body> 而应该写成：<body><Hello Word></body> 注：由于浏览器的不同可能出现浏览的结果不尽相同，什么时候需要用 参考字符代替需查有关的资料和实际的显示结果。 第二章 常用标记符 2.1、背景色——BGCOLOR 用于设置网页的背景颜色，其值可以是颜色名称或#RRGGBB构成的十六进 制色。
网 页 制 作 教 程
若用户要在网页中显示某些特殊字符，如：<、>、空格等；则需要使用参考字符 来表示，而不能直接输入。
参考字符以“&”开始，以“；”结束，既可以用数字代码，也可以用代码名称。 常见特殊字符：
特殊字符
& < > 空格
数字代码
&； <； >；  ；
代码名称
&； <； >；  ；
网 页 制 作 教 程
网页设计与制作教程-HTML基础 ppt课件
1.1 HTML简介
HTML是HyperText Markup Language（超文本置标语言） 的缩写，是一种为普通文件中某些字句加上标签的语言，其 目的在于运用标签（tag）对文件达到预期的效果。 1.1.1 HTML发展历史
ppt课件
3
1.1 HTML简介
1.1.2 HTML5的特性及元素
ppt课件 7
使用HTML语法编写HTML5文档
<!doctype html>
1.3 网页文件的创建过程
① 打开记事本。单击Windows 的“开始”按钮，在“程序” 菜单的“附件”子菜单中单击“记事本”命令。 ② 创建新文件，并按 HTML 语言规则编辑。在“记事本”窗 口中输入HTML代码，具体的内容如图1-2所示。 ③ 保存网页。打开“记事本”的“文件”菜单，选择“保存” 命令。此时将出现“另存为”对话框，在“保存在”下拉列 表框中选择文件要存放的路径，在“文件名”文本框输入 以 .html 或 .htm 为后缀的文件名，如 welcome.html ，在“保 存类型”下拉列表框中选择“文本文档（ *.txt ）”项，最 后单击“保存”按钮，将记事本中的内容保存在磁盘中。 ④ 在“我的电脑”相应的存盘文件夹中双击 welcome.html 文件启动浏览器，即可看到网页的显示结果。
在编写 HTML代码时要注意使用代码缩进来提高程序的结 构性和层次性。
ppt课件 6
1.2 HTML编写规范
1.2.3
<html> <head> <meta charset="gb2312"> <title>文档标题</title> </head> <body> 网页内容 </body> </html>
网页制作第1章
30秒后自动跳转
演示
图 1-7 利用 META 实现自动转址功能
3．BGSOUND 标记符 设置网页背景声音 在HEAD中添加： <BGSOUND src=“soundfileURL” loop=1> 一般前景音乐文件为.mid .wav Loop为播放次数,不指定为无限循环.
1.2.2.3 正文标记符 正文标记符 <BODY> 和 </BODY> 包含 Web 页 的具体内容，包括文字、图形、超链接以及其他各 种 HTML 对象。 如果没有其他标记符修饰，正文标记符中的文 字将以无格式的形式显示（如果浏览器窗口显示不 下，则自动换行）。 例如，以下 HTML 代码在浏览器中的显示如图 1-8 所示。
首部标记<HEAD>和</HEAD>位于 Web 页的开头，其中不包括 Web 页的 任何实际内容，而是提供一些与 Web 页有关的特定信息。
1．TITLE 标记符
在首部标记符中，最基本、最常用的标 记符是标题标记符 <TITLE> 和 </TITLE>， 用于定义网页的标题。 网页标题可被浏览器用作书签和收藏清单。 当网页在浏览器中显示时，网页标题将在浏 览器窗口的标题栏中显示。 例如，以下 HTML 代码在浏览器中的显 示如图 1-6 所示。
演示
1.2.3 设置页面属性 1.2.3.1 设置页面背景颜色 在 <BODY> 标 记 符 中 使 用 bgcolor 属性可以为网页设置背景颜 色。例如，如果想为网页设置黑色背 景，应使用以下HTML语句： <BODY bgcolor="black"> 在指定背景颜色时，有 16 种标 准颜色可供选择，如表 1-1 所示。
学习制作基本网页的HTML和CSS教程
学习制作基本网页的HTML和CSS教程第一章：HTML基础知识HTML（HyperText Markup Language）是一种用于创建网页的标记语言。
它包含一系列的元素（element），通过这些元素可以将各种内容组织起来。
1.1 HTML文档结构一个HTML文档通常由以下几部分组成：- `<!DOCTYPE>`声明：指定文档类型。
- `<html>`标签：定义HTML文档的根元素。
- `<head>`标签：包含关于文档的元数据，如标题、字符编码等。
- `<body>`标签：其中包含了页面的主要内容。
1.2 HTML元素HTML元素由开始标签和结束标签组成，并且可以包含内容。
例如，`<p>`元素用于定义段落，它的使用方式如下：```html<p>这是一个段落。
</p>```另外，有一些元素是自闭合的，即只有开始标签没有结束标签。
例如，`<br>`元素用于换行，它的使用方式如下：```html这是一行文字。
<br>这是另一行文字。
```1.3 HTML常用标签HTML提供了丰富的标签，以下是一些常用标签的介绍：- `<h1>`到`<h6>`：定义标题，数字越小表示级别越高。
- `<a>`：定义超链接，用于跳转到其他页面。
- `<img>`：插入图片。
- `<ul>`和`<ol>`：分别定义无序列表和有序列表。
- `<table>`：定义表格。
第二章：CSS基础知识CSS（Cascading Style Sheets）用于定义网页的样式和布局。
它通过选择器来选中HTML元素，并通过属性来设置样式。
2.1 CSS选择器CSS选择器用于选中HTML元素，并将样式应用于选中的元素。
常用的选择器有：- 元素选择器：通过元素名称选中元素，例如`p`表示选中所有的段落。
网页设计与制作课件第1章 HTML语言基础
第一章 HTML语言基础
5.格式标志 ●字符格式标志
B 粗体 I 斜体 U 下画线 <FONT face=“字体名” size=字号 color=颜
色> ●水平线 HR ●段落格式标志 Br P 6.超链接 <A Href=“URL”> … </A> 7.图形连接 <Img Src=“图形文件的URL”>
第一章 HTML语言基础
一、超文本标记语言 ● HTML 是 建 立 发 表 联 机 文 档 采 用 的 语 言 。
HTML 文档也称为WEB文档，每个HTML文档称为一 个WEB页面，页面是浏览器中看到的内容。 ●HTML命令不区分大小写，所有HTML命令标 志用“< >”括起来，由标志和带斜杠的同 名标志表示该标志指定的范围。 如： 〈B〉……〈/B〉 ●HTML文档为文本格式，扩展名必须为HTML 或HTM 二、用HTML语言制作WEB页
第一章 HTML语言基础
1.HTML ●标志< HTML>和< /HTML>之间包含了整个文
档。 2.Head ●指定文档的初始信息，其中最常用的命令为
Title 如： 〈Title〉测试标题！〈/title〉 3.Body ●定义WEB文档的主体部分。 4.Hn ●定义WEB文档的标题级别 H1-H6 <Hx align=#> #:left,center,right
第一章 HTML语言基础
8.批注 ●由<!>括起的内容为批注。
如：<!示例> 9.背景图片与背景色 ●如：<body bgcolor=颜色>
<body background=背景图片路径> ●一般情况下，两者只
HTML网页编程教程
HTML网页编程教程第一章：HTML网页编程的基础HTML是一种用于构建网页的标记语言，它通过标签来描述网页结构和内容，是现代Web开发的基础。
本章将介绍HTML的基础知识，包括HTML文档的结构、标签的使用和基本的HTML元素。
1.1 HTML文档的结构一个HTML文档由DOCTYPE声明、html元素、head元素和body元素组成。
DOCTYPE声明指定了文档使用的HTML版本，html元素是文档的根元素，head元素用于定义文档相关的信息，body元素包含了网页的实际内容。
1.2 HTML标签的使用HTML标签是用来定义HTML文档结构和内容的。
标签一般是成对出现的，包括一个开始标签和一个结束标签，中间包含了标签的内容。
常用的HTML标签包括p标签用于定义段落、h1-h6标签用于定义标题、a标签用于定义链接等。
1.3 基本的HTML元素HTML元素是由标签、属性和值组成的。
标签定义了元素的类型，属性用于描述元素的特性，值是属性的取值。
常用的HTML 元素包括文本元素、图像元素和表格元素等。
第二章：HTML文本格式化HTML不仅可以用来描述网页的结构，还可以用来格式化网页中的文本内容。
本章将介绍常用的HTML文本格式化标签和CSS 样式，如字体、颜色、对齐等。
2.1 字体和大小在HTML中可以使用font标签来定义文本的字体和大小，属性包括face用于指定字体，size用于指定大小。
另外，新的HTML5标准中不再推荐使用font标签，而是使用CSS样式来定义文本的字体和大小。
2.2 颜色可以使用font标签的color属性来定义文本的颜色，属性值可以为颜色名称或者十六进制值。
另外，也可以使用CSS样式来定义文本的颜色。
2.3 对齐可以使用p、div等标签的align属性来定义文本的对齐方式，属性值包括left、right、center和justify等。
除了标签的align属性，也可以使用CSS样式来定义文本的对齐。
HTML网页制作
1.3 页面的注释标记
<!-- --> 举例： 举例： <body topmargin=60 leftmargin=40 >
设置页面的上边距为60像素
<br><br><br>
<!--设置页面的左边距为40像素-->
<br> </body>
1.4 标题文字的建立
标题文字共包含6种标记 举例： 举例： <body>
例如，要使段落内容居中，正确的写法为： <p align="center">段落内容居中示例</p>
– 单标记 单标记——单标记能完整地表达意思，这类标记的语 法是： <标签名称>
最常用的单标签是<br>，它表示换行。
– 双标记 双标记——双标记由“始标记”和“尾标记”两部分 构成，必须成对使用，其中始标记告诉Web浏览器从 此处开始执行该标记所表示的功能，而尾标记告诉 Web浏览器在这里结束该功能。始标记前加一个斜杠 （/）即成为尾标记。这类标记的语法是：
1.1.2 HTML基本元素
1．标记符 ． – HTML用于描述功能的符号称为“标记”，如 “html”，“body”，“table”等。 – 标记在使用时必须用方括号“< > < >”括起来，而 且是成对出现，无斜杠的标记表示该标记的作 用开始，有斜杠的标记表示该标记的作用结束。 – HTML命令不区分大小写 不区分大小写，所有HTML页都必 不区分大小写 须用特定的标记起头，这种标记表达了文档的 用途和位置。
<h1>1级标题的效果</h1> <h2>2级标题的效果</h2> <h3>3级标题的效果</h3> <h4>4级标题的效果</h4> <h5>5级标题的效果</h5> <h6>6级标题的效果</h6>
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
姓名:邓志东 QQ:494504483
课程章节介绍
1 2 3
网页制作基础 网页常用标签学习 Dreamweaver使用
4
5 6
网页框架学习
应用CSS样式及实例 网页项目制作及总结
第一章
网页制作基础
本章主要内容
了解网页的相关 知识
HTML技术简介
教学要求
1
了解互联网的发展及互联网所 使用的技术。
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>
注意:
font标签常用的属性有： size:用于规定文本的大小。取值范围为1—7。最大值为7，最小为1。也可以在大小前加上符号。 比如-3表示在3的基础上小7，+3表示在3的继承上增加7个大小。 color:设置字体颜色，可以指定颜色名称和十六进制值。 face:用于设置字体的类型，如:宋体、楷体、隶书等。
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>
4)段落
例子1-9:段落设置 <html> <head><title>段落设置</title></head> <body> <p>新中国成立60周年</p> <p>新中国成立60周年</p> <p>新中国成立60周年</p> </body> </html>
本章回顾
网页制作基础
网页与网站的区别
了解HTML语言
域名标识:国别的最高层域名:.cn---中国；.au---澳大利亚;.jp---日 本等。 组织、机构不同的域名标识，如.com—商业公司；.org—组织、协 会等;.net—网络服务；.edu—教育机构;.gov—政府部门;.mil—军 事领域;
1.1网站的概述
（5）认识网页的元素 网页标题、Logo、视频、文本、导航条、图片、表单、超级链接。
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.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>
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>
注意:在<hr/>标签中常见的属性: size:设置水平线的大小，比如4表示水平线有4像素粗。 color:设置水平线的颜色，可以使RGB值也可以是相对应的单词。 width:设置水平线的长度，可以是窗体的百分比也是可以说正数的像素值。 align：设置水平线的对齐方式，可以是left(左)、right(右)、center。
例子1-1:第一个HTML文档 <html> <head> <title>标题</title> </head> <body> <h2>Hello World,欢迎来到HTML网页制作课程!</h2> </body> </html>
注意:<head>到</head>标签之间的所有内容我们称为头部信息，主要声明网页文件描述浏览器所需的基本信息。如标 题、语言环境等。<body>到</body>之间的内容我们称为网页的主体内容，用于描述网页的具体内容，也就是我 们最后在浏览器中看到的内容。
3)背景声音设置
例子1-4:背景声音 <html> <head><title>背景音乐设置</title></head> <body> <bgsound src=“test.mp3” loop=“3” volume=“0” balance=“0”/> 点击浏览器上的“停止”按钮停止播放背景音乐 。 </body> </html>
<bgsound/>标签中，常用的属性有src、loop、volume、 balance四个，他们的含义是: src:所插入的背景音乐的URL(路径、网址)，可以是本地 音乐也可以是网络音乐资源路径，常用的声音格式有： mp3、wav、midi等。 loop:设置循环的次数，当值是-1或者Infinite的时候表 示无限循环。 volume:音量,值为-1000到0之间，0是最大音量。 balance:声道，值为-1000到1000之间的值，负值将声音 发送左声道，正值将声音发送右声道，0表示立体声
网站：浏览网页时在浏览器中看到的一个个页面就是网页，而多个
相关的网页的集合就构成了一个网站。
1.1网站的概述
（2）动态网站与静态网站的区别
动态网站：动态网站并不是指具有动画功能的网站，是指能够通过数
据库进行架构的网站。动态网站除了要设计网页外，还要通过数据 库和编程序来使网站具有更多自动的和高级的功能。一般是以 asp,jsp,php,aspx等结束。
<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秒钟的位置开始播放。
2
认识HTML、常见的HTML标记。