第1讲 html概述与HTML文件
网页设计与制作课件第1章
1.1.2 Web浏览器基本结构原理
知识点评
中文名称：网络浏览器或网页浏览器，简称浏览器 （Web Browser）。 浏览器是显示网页服务器或文件系统内的HTML文件，并让用户与这些文件 互动的一种软件。个人计算机上常见的网页浏览器包括Microsoft Internet Explorer、Opera和Netscape等。浏览器是最常用的客户端程序。 网页浏览器主要通过HTTP协议连接网页服务器而取得网页，HTTP容许网页 浏览器送交数据到网页服务器并且获取网页。网页的位置以URL（统一资源定位 符）指示，此乃网页的地址，以HTTP: //开始的便是通过HTTP协议登录。 网页通常使用HTML（超文本标记语言）文件格式，并在HTTP协议内以 MIME内容形式来定义。大部分浏览器均支持许多HTML以外的文件格式，例如 JPEG、PNG和GIF图像格式。在HTTP协议和URL内容结合下，网页设计者便可 以把图像、动画、视频、声音和多媒体包含在网页中，或让浏览者透过网页而浏 览它们。
上一页 下一页 返回
知识点评
Dreamweaver另外还提供了许多面板、检查器或窗口。若要打开Dreamweaver 面板、检查器或窗口，可以使用【窗口】菜单进行选择，如下图所示。
【窗口】菜 单项所包含 的内容
上一页 返回
1.3.2 创建本地虚拟站点
在本地创建虚拟站点，如下图所示。
目标案例
下一页 返回
步骤7：系统显示刚对网站的设置内容，如果要对设置不满，可以单击“上 一步”按钮更改设置。
上一页 下一页 返回
知识点评
7．“属性”检查器
用于显示网页中各个元素的相关属性，用户可以设置“属性”面板中的 各选项参数，对网页中的各个属性作设置和修改。如下图所示。
html基础教程1
什么是HTML 文件？∙HTML 指超文本标签语言。
∙HTML 文件是包含一些标签的文本文件。
∙这些标签告诉WEB 浏览器如何显示页面。
∙HTML 文件必须使用htm 或者html 作为文件扩展名。
∙HTML 文件可以通过简单的文本编辑器来创建。
做个实验如何？准备工作：第一步：如果您使用Windows，请启动记事本。
第二步：键入以下文本：1.2.<html>3.<head>4.<title>页面的标题</title>5.</head>6.<body>7.<p>这是我的第一个页面。
<b>这是粗体文本。
</b></p>8.</body>9.</html>复制代码第三步：将这个文件存为"mypage.html"。
第四步：直接双击你做好的这个文件（网页）,浏览器就会显示这个页面。
或者启动您的浏览器。
在浏览器的文件菜单中选择“打开”或者“打开页面”。
这时会弹出一个对话框。
单击“浏览”或者“选择文件”，找到您刚才创建的文件- "mypage.html"，选定它然后打开，现在您会看到对话框中有一行地址，比如："D:\mypage.html"。
单击确定按钮，浏览器就会显示这个页面。
这就是我们做好的第一个网页。
例子解释：HTML 文件中的第一个标签是<html>。
这个标签告诉浏览器这个HTML 文件的开始点。
文件中最后一个标签是</html>。
这个标签告诉您的浏览器，这是HTML 文件的结束点。
位于<head> 标签和</head> 标签之间的文本是头信息。
头信息不会显示在浏览器窗口中。
<title> 标签中的文本是文件的标题。
标题会显示在浏览器的标题栏。
1 HTML简介
上一页
下一页
HTML的英文全名为Hypertext Markup Language，译为超文本标记语 言。HTML用于描述超文本中资料的 显示方式，从控制文字的颜色、大小， 到标识资料的种类为图形文件或者声 音等。其描述的方式是利用一个个的 HTML标签，将要进行格式控制的资 料包含起来。
15
上一页
（简称NC）和Internet Explorer（简
下一页
称IE）。
7
1.3 网页设计基本概念
上一页
下一页
1．超链接（Hyper Link） 超链接是特殊的文字标记，它指向 了万维网中的其他资源，如另外一个网 页、一个声音文件、网页的另一个段落 或者是万维网中的任何资源等等，而且 这些资源均可以存放在任何一个服务器 上。 在浏览网页时，如果你用鼠标单击 超链接，那么就会跳转到超链接所指向 的资源，就可从Web上下载新的信息。
上一页
下一页
3．网站（Web site） 网站是一个存放在网络服务器 上的完整信息的集合体。它包含一 个或多个网页，这些网页以一定的 方式链接在一起，成为一个整体， 用来描述一组完整的信息或达到某 种期望的宣传效果。
11
上一页
下一页
4．网页（Web pages） 网页是网站的组成部分。制作者 可以将需要公布的信息按照一定的方 式分门别类，放在一个个网页上，网 页里可以有文字、表格、图像声音和 视频等等。网页可以看作一个单一体， 是网站的一个元素，它是磁盘上的一 个个单一的文件，由Web浏览器下载 或格式化。
第1章 HTML简介
1.1 1.2 1.3 1.4 1.5 1.6 1.7 WWW的基本概念 浏览器 网页设计基本概念 网页技术概况 HTML简介 HTML的编辑和运行环境 HTML的基本结构
HTML语言基础知识及源码大全(一)1
HTML语言基础（一）1.本文档的主要内容：（1）HTML语言概述。
（2）文字版面的编辑。
（3）文字列表的设计。
（4）表格的设计。
（5）HTML的超链接。
（6）图片的使用。
（7）高级HTML使用。
（8）表单设计。
2.Web上的信息是以页面(Page)的形式组织起来的，Web页面由HTML描述。
3.Web页面与HTML文档实际上是同一事物的两个不同侧面：人们通常把用HTML编写的文件称为HTML文档，而把HTML文档在Web浏览器中的表现形式称为Web页面。
4.Web页面中有一种称为主页(Hompage)的特殊页面。
主页通常是用户通过Web浏览器访问某一Web站点时看到的第一个页面，用户通过主页可以访问该站点的其他页面。
因此主页一般是关于某一组织、机构或个人的基本信息的页面。
5.最基本的定义：标记是用于指明文档中文本格式编排的代码系统。
6.标记语言的发展：SGML——>HTML——>XML。
7.标准通用标记语言SGML：Standard Generalized MarkupLanguage 。
8.超文本标记语言HTML：Hyper Text Markup Language。
9.可扩展标记语言XML：eXtensible Markup Language。
10.使用编辑器生成页面可能会产生的问题：（1）在编辑界面下的显示效果与用浏览器看到的很可能会不同；（2）会产生一些复杂的、非标准的代码，难以达到设计的效果，从而容易引起浏览器之间的兼容问题；（3）一些特殊的页面控制，必须通过HTML代码才可以实现。
11.可以借助于HTML编辑器，但不能依赖于它。
12.HTML文档的基本构成：<HTML><HEAD>………</HEAD><BODY><标签1 [属性[=属性值]] [属性[=属性值]].....><标签2 [属性[=属性值]] [属性[=属性值]].....>...........[</标签2>][</标签1>]..…….</BODY></HTML>13.HTML之所以称为“超文本标记语言”，一是因为它的超链接功能，二是因为它的指令统一采用了“标记”表示法。
lhtml-1
网页文件命名
1. *.htm或*.html 2. 无空格 3. 无特殊符号（例如&符号），只可以有下 划线“_”，只可以为英文、数字 4. 区分大小写 5. 首页文件名默认为：index.htm 或 index.html
HTML 文件结构
<html>...</html> <head>...</head> <body>...</body> 元素：是HTML语言的基本部分。元素总是 成对出现，每一对元素一般都有一个开始 的标记（如<body>），也有一个结束的标 记（如</body>）。元素的标记要用一对尖 括号括起来，并且结束的标记总是在开始 的标记前加一个斜杠。
HTML 文件结构 (Document Structures)
<HTML>
<HEAD>
• <title></title> • <meta>
</HEAD> <BODY>
• HTML 文件的正文
</BODY>
</HTML>
第一张网页
<html> <head> <title>my first page</title> </head> <body> This is my first homepage! </body> </html>
HTML文字与段落格式控制
<body>…… <i>倾斜文本</i> <b>粗体文本</b> <u>下划线文本</u> <s>删除线文本</s> ……</body>
HTML标签以及各个标签属性大全(网页制作必备)
<NOBR> 取消换行和<br>相反总类（所有HTML文件都有的）--------------------------------------------------------------------------------文件类型<HTML></HTML>（放在档案的开头与结尾）文件主题<TITLE></TITLE>（必须放在「文头」区块内）文头<HEAD></HEAD>（描述性资料，像是「主题」）文体<BODY></BODY>（文件本体）结构性定义（由浏览器控制的显示风格）--------------------------------------------------------------------------------标题<H?></H?>（？表示从1到6，有六层选择）数值越高字越小标题对齐<H? ALIGN=LEFT|CENTER|RIGHT></H?>左对齐、居中对齐、右对齐区分<DIV></DIV>区分对齐<DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY></DIV>左对齐、右对齐、居中对齐、两端对齐引文区块<BLOCKQUOTE></BLOCKQUOTE>（通常会内缩）斜体<EM></EM>加粗<STRONG></STRONG>引文<CITE></CITE>（通常会以斜体显示）码<CODE></CODE>（显示原始码之用）样本<SAMP></SAMP>表示一段用户应该对其没有什么其他解释的文本。
HTML捋一捋，简介！doctypehtml,head标签介绍
HTML捋⼀捋，简介！doctypehtml,head标签介绍1 HTML⽂件是什么超⽂本标记语⾔（Hypertext Markup Language, HTML）是⼀种⽤于创建⽹页的标记语⾔。
本质上是浏览器可识别的规则，我们按照规则写⽹页，浏览器根据规则渲染我们的⽹页。
对于不同的浏览器，对同⼀个标签可能会有不同的解释。
（兼容性问题）⽹页⽂件的扩展名：.html或.htm2 HTML⽂件的作⽤ HTML语⾔写好的⽂件是给浏览器读的，浏览器再按照规则将其渲染成⼈类便于接受的⽹页 HTML是互联⽹服务的⼀个重要组成部分，基于HTML可以给⽤户提供多种不同类型的服务， 其流程是：浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML⽂件内容发给浏览器 --> 浏览器渲染页⾯3 如何开始写⼀个HTML⽂件<!DOCTYPE html> #声明为HTML⽂档。
<html lang="zh-CN"> #告诉浏览器这是⼀个中⽂⽹页<head> # 头部<meta charset="UTF-8"> #声明编码，否则会出现乱码,有些浏览器会设置 GBK 为默认编码，则你需要设置为 <meta charset="gbk">。
<title>css样式优先级</title></head><body> #主要内容部分</body></html><!--注释内容--> 注释4 html标签 HTML标签是由尖括号包围的关键字，如<html>, <div>等HTML标签通常是成对出现的，⽐如：<div>和</div>，第⼀个标签是开始，第⼆个标签是结束。
第1章网页设计基础
1.2 Web设计基础
3. 网页设计一致性 一致性的网页设计原则使得访问者容易理解站点的结构，否则可能导致访问者陷入困惑。对优秀的 Web站点分析可以发现，优秀的网页虽然各有特色，但都遵守最基本的原则，即保持站点内部页 面之间的一致性。 要保持一致性，可以从页面的结构排版入手：
通过定义一致的页面模板，各个页面使用相同的页边距。 文本和图形之间保持相同的间距。 主要图形、标题或符号旁边留下相同的空白。 如果在第一页的顶部放置了公司标志，那么在其他各页面都放上这一标志，如果使用图标导航，
1.3 网页布局
1.3.2 布局设计类型 网页布局大致可分为“国”字型、“匡”字形型、标题正文型、框架型、封面型、Flash型、变化型等。
思考：1. 网易网站的布局设计属于哪种类型？ 2. 网络传播学院的网站首页布局设计属于哪种类型？
1.3 网页布局
1.3.3 布局设计元素 在网页文件中，会涉及很多的页面元素。如何将这些页面元素有机地组合起来，达到满意的视觉效
随着浏览器版本的标准化和制作工具的完善，该布局技术原来的缺点已经逐渐被克服，建议使用。
1.3 网页布局
3. 框架布局 框架由于不能进行精确的元素定位，因此不能独立完成页面的布局，它常常和表格配合使用。先用
框架将页面划分为几个区域，然后再用表格实现各区域的精确局部。常用在网站系统的后台页面设计 中。由于在HTML 5标准中已经不被推荐，所以该布局不建议使用。
1.3 网页布局
1.3.1 布局设计原则 通常可以从以下几个大的方面考虑布局的基本设计原则。 （1）网页布局的内容应来源于需求，栏目的重要程度决定了网页布局的形式。网页中要展示的内容必 须是依据站点的主要栏目进行规划的。同时可以将所要表达的相近的栏目集中在一个区域显现，构成 一种群体效应。 （2）网页布局应区分栏目模块的重要程度。分开栏目的主次性，重要栏目以顶部、左侧排列，次要的 栏目以底部、右侧排列。即重要信息、重要功能模块“靠上靠左”原则。 （3）网页布局必须尊重用户习惯。不仅要考虑不同类型用户的使用习惯差异，还要考虑中、英文等不 同语种用户的浏览习惯。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• 一般情况下，位于头部的内容都不会在
网页上直接显示，而是通过另外的方式 起作用。
• 主要包含<title>、<meta>、<link>、
<style>、<script>等标记
主体区域
• 由<body></body>之间的内容所组
成，是网页内容的显示部分。包含 <table>、<p>、<br>、<form>、 <input>等标记
value="medium" checked="checked" > checked="checked"
• 标记语法格式： <标记名称 属性=
属性值 属性=属性值 ……> …</标 记名称> 如：
<font color=“#ffff33” size=“8” face=“宋体”>您好</font> 通常标记都具有默认属性，当一个 标记中只包含标记名时，标记将使 用默认属性，例如：段落标记<p>, 其存在 一个默认的居左对齐方式。
• HTML与SGML
–
SGML（Standar Generalized Markup Language，标准通用标记语 言），用于描述定义一套实际标记语言 的方法
– HTML正是根据SGML制定的一套用于 制作超文本文件的简单标记语言，是 SGML的一个具体应用
• 浏览器
– 浏览器：是专门用于执行HTML文件以 及查看HTML源代码的一种软件。 – 浏览器执行HTML文件方式:
• 作用：DOCTYPE是document type的
简写。主要用来说明你用的XHTML或者 HTML是什么版本以及声明用于浏览器进 行页面解析用的DTD(文档类型定义)文 件。例如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd">
文状态下输入。 • 每个属性都必须有属性值。
HTML标记的属性可以没有值，而XHTML规定所有属性 都必须有一个确定的值，没有值的以属性名作为属性 值。
• 使用id作为标记的标识属性。 • <script>和<style>标记必须设置type属性。
1.5 HTML/XHTML文档类型
规范的HTML/XHTML文档需要以<!DOCTYPE>标 记开始。 • XHTML提供以下3种类型的DOCTYPE：
• 它放在html文件的最上面，即在
<html>标记的上面
XHTML1.0 DOCTYPE类型简介
XHTML1.0提供了三种DOCTYPE可选
择:
– 过渡的(Transitional):要求非常宽松的 DTD，它允许你继续使用HTML4.01的标 识(但是要符合xhtml的写法)。完整代码 如下：
•鼠标双击HTML文件 •通过浏览器地址栏中输入HTML文件的
URL来执行
• 网页与网站
–
网页：也称Web页面，即在浏览器上显示的页 面。
– 网站：一系列由通过各种链接关系关联起来的有 共同主题的网页的集合体，包括主页以及由主页 或子网页所跳转到的所有子网页 – 主页：主页是网站中一个特殊页面，它是网站的 入口页面，其中包含指向其他页面的超链接。通 常主页的名称是固定的，例如：index.html或 default.html（.html或.htm后缀表示HTML文 档）
属性：
• 属性用来管理格式化需求 • 在标记中使用attributename=“value” 来设置 •
属性 属性放在开始标记中， HTML标记的属性可不用 引号或使用单引号或双引号；XHTML标记属性值 需用引号括起来，特殊情况，如需要在属性值里 使用双引号，则可以用单引号代替该双引号，如：
”我说‘HTML’语言 “
属性命名方法:
html文件示例
<html> <head> <title>html文件示例</title> </head> <body> 您好！欢迎学习HTML语言 <hr> <font face="隶书" size="6" color="red">您好！ 欢迎学习HTML语言</font> </body> </html>
标记放置在 < 和 > 之中，如：<p>。 < 和 > 内可以包含：标记名，属性及属性值等内容 • 有开始标记即< 标记名称 > 和结束标记< /标记 名称 > 之分。 • 标记的所有属性都是出现在开始标记中，结束标 记中，不出现任何属性。 • HTML标记不区分大小写，而XHTML的所有标记 都必须小写 • 标记可以嵌套使用，注意嵌套顺序不能错乱
1.2 HTML概述
HTML定义
• HTML是一种文本类、由浏览器解释执行的标
记语言，用于编写要通过WWW显示的超文 本文件，具有平台无关性。使用HTML语言编 写的文件称为HTML文件，也叫Web页面或 网页。
1.3 HTML文件
• 用HTML编写的文件称为HTML文件，扩展名.html
或.htm。HTML文件是一种纯文本文件，可用任意 一个文本编辑器（如记事本）来打开及编写
1.4 XHTML基础
• XHTML是HTML向XML发展的一种过渡技术，
它是使用XML的规则对HTML4.0进行的扩展。 • XHTML遵循严格的XML语法规则：
– 文档之首必须使用DOCTYPE声明。 – 文档的根元素必须是html，并且必须为其指定命名 空间。 – 元素必须正确嵌套。即当有标记嵌套使用时，必须先 结束里层的标记，再结束外层的标记。
是一种建立在Internet上的、全球性的、交互的、 多平台的、分布式的信息资源网络，是Internet 所提供的服务之一。
– 一个完整的WWW系统包括WWW服务器、浏览
– WWW基本组成内容： URL：统一资源定位器 HTTP：超文本传输协议 HTML：超文本标记语言
器、HTML文件（Web页面、网页）和网络4部分。
• URL
–
在Internet上查找WWW信息资源需要使 用URL。URL提供了在Web上进入资源的 统一方法和路径，相当于显示生活中的门牌 号，它标识了链接所指向的文件的类型及其 准确位置。
• HTTP
–
WWW服务器和WWW客户机之间是按照 文本传输协议HTTP互传信息的。
– HTTP协议制订了HTML文档运行的统一规 则和标准。它是基于客户端请求、服务器响 应的工作模式。主要由4个过程组成：客户 端与服务器建议链接；客户端向服务器发出 请求；服务器接受请求、发送响应；客服端 接受响应、客户端与服务器断开连接。
1.3.3 HTML文件的编写及执行
• HTML文件的编写主要有以下两种方式：
– 手工直接编写：打开任意一个文本编辑器，直 接在打开的文本编辑器中编写HTML代码。 – 使用可视化软件：如使用Dreamweaver、 FrontPage
• HTML文件的执行：由浏览器直接解释执
行 • 记事本编写示例 • 使用Dreamweaver编写示例 • 显示水平线示例
1.3.2 HTML文件基本结构
• 从功能的角度来看，整个html文
件可分为两层：
– 外层：由<html></html>所标
识，作为一个html文件的标志。
– 内层：由头区域和主体区域组成。
头区域
• 由<head></head>及其之间的内容所组
成，用于描述网页的一些相关信息，如标 题、关键字等。
html文件结构示例
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>HTML文件示例</title> </head> <body> <h1> HTML文件一般是由一个个封闭的标记对所组 成，整个HTML文件是分层的</h1> </body> </html>
第1讲 HTML概述与HTML文件
• 1.1 基本概念
• 1.2 HTML概述
• 1.3 HTML文件
• 1.4 XHTML基础
• 1.5 HTML/XHTML文档类型
• 1.6 网站的建设与发布
学习目标
• 掌握HTML概念 • 理解浏览器、网页、网站、静态及动态网
站等概念 • 理解HTML及XHTML标记的语法 • 掌握HTML文件的基本结构 • 熟悉HTML文件的编写方式及执行方式 • 理解DOCTYPE标记作用 • 理解XHTML DOCTYPE的三种类型
• 标记类型:
• 单标记：只有开始标记，如<br>、 <hr>等 • 双标记： 具有开始标记和结束标记。如 <table> </table> • HTML标记可以不用关闭，而XHTML所有 的标签都必须关闭，成对标签(如p/li)要有 一个相应的结束标签，单独标签(比如 img/br等)要在标签后加一个“/”来关闭 它 ，如 <br/>