HTML基础
第2章 html基础语法
第2章目录
第2章 HTML语言基础 HTML语言基础
六、超链接标记
链接－当前页面与其他相关页面间的联结关系；链 接的目标可以是任何图像和文件。若浏览器能识别就显 示，不能识别就下载 格式：<A>…</A> 功能：在当前页面和其他页面间建立链接。 主要属性见附表。 【举例2 【举例2－7】超级链接
第2章目录
第2章目录
功能：分区显示文档(布局)
第2章 HTML语言基础 HTML语言基础
说明：在一个文本块或许多段落中设置布局(对齐) 方式，经常使用DIV，它可以将文档内容分成区块一次 性地布局
注意：★若单个align属性出现在DIV内的标题或段 注意：★若单个align属性出现在DIV内的标题或段 落中,这些值将使全局变量DIV的设置无效 落中,这些值将使全局变量DIV的设置无效 ★DIV不是段落类型，故DIV应与其它标记配 DIV不是段落类型，故DIV应与其它标记配 合使用( 合使用(如P、Hn、UL、BLOCKQUOTE等) Hn、UL、BLOCKQUOTE等 ★也可以用CENTER代替DIV 也可以用CENTER代替DIV
第2章目录
【举例2 【举例2－4】文本标记综合示例
第2章 HTML语言基础 HTML语言基础
四、列表格式标记
1、有序列表 格式：<OL type=“符号类型”> <LI type=“符号类型”>……</LI> <LI type=“符号类型”>……</LI> …… </OL> 功能：建立有序列表
第2章目录
第2章目录
【举例】<Br>标记 【举例】<Br>标记
第2章 HTML语言基础 HTML语言基础
第二章HTML语言基础
第二章HTML编程基础HTML是超文本标记语言（Hypertext Markup Language）的缩写，是Web环境的语言基础。
浏览器的主要功能就是识别和解释HTML语言，从而决定网页内容的显示方式。
HTML只是一种描述性的标记语言，不是编程语言，没有复杂的语法和结构，因而非常简单易学。
2．1 构建HTML网页HTML文件是纯ASCII码文件，可以用任何纯文本编辑工具（如记事本）编写，一般使用Dreamweaver或FrontPage这些所见即所得的可视化工具更为方便。
2.1.1HTML页面的基本组成启动 Dreamweaver 时自动建立一个新的空白HTML文档。
切换到“代码”视图窗口，就可以看到以下代码：<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>无标题文档</title></head><body></body></html>从中可见，一个基本的HTML文档总是以标记<html>开始，以</html>结束。
其中用<head></head>和<body></body>把文档分为两个部分。
<head>与</head>之间的是文件头，文件头内包含关于文件的说明信息，这些信息并不在浏览器窗口中显示。
在<body>和</body>之间的内容是文档的体，包括文本、图形、窗体和框架等，都是窗口中要显示的内容。
HTML 文件结构如图2-1所示。
图2-1 HTML文件结构2.1.2HTML标记的特点(1)HTML标记均是用尖括号<>阔起来的，大多数标记是成对出现和使用的，有开始标记和对应的结束标记，结束标记在尖括号中使用反斜杠“/”，其用法格式为：<标记名>文本</标记>比如：<title>无标题文档</title>，这条语句的作用是在浏览器的标题栏显示“无标题文档”几个字。
HTML基础
• HTML标记标签通常被称为HTML标签 (HTML tag)HTML 标签是由尖括号包围的关键词，比 如 <html>
• HTML 标签通常是成对出现的，比如 <b> 和 </b> • 标签对中的第一个标签是开始标签，第二个标签 是结束标签 • 开始和结束标签也被称为开放标签和闭合标签
• "HTML 标签" 和 "HTML 元素" 通常都是描述 相同的意思。 • 但是严格来讲，一个 HTML元素包含了开始标 签与结束标签，如下实例:
• HTML 语言用于描述网页
• HTML 是指超文本标记语言: Hyper Text Markup Language • HTML 不是一种编程语言，而是一种标记语言 • 标记语言是一套标记标签 (markup tag) • HTML 使用标记标签来描述网页 • HTML 文档包含了HTML 标签及文本内容 • HTML 文档也叫做 web页面
• 注意：img元素是自关闭元素，不需要结束标 记。
<img src="school.png" width="104" height="142">
• alt 属性用来为图像定义一串预备的可替换的 文本。 • 替换文本属性的值是用户定义的。 • <img src="boat.gif" alt="Big Boat"> • 在浏览器无法载入图像时，浏览器将显示这个 替代性的文本而不是图像。 • 为页面上的图像都加上替换文本属性是个好习 惯，这样有助于更好的显示信息，并且对于那 些使用纯文本浏览器的人来说是非常有用的。
• 使用小写属性 • 完整的 HTML 属性列表: HTML 标签参考手册
HTML基础ppt课件
15
2.1 head容器的标记
3．meta元素 格式：
<meta name="text" http-equiv="text" content="text“ />
第1章 HTML基础
1
第1章 HTML基础
1 HTML文档结构 2 HTML基本标记的使用 3 超链接标记 4 HTML表格 5 HTML表单
2
1 HTML文档结构
在互联网中传送的文档，绝大部分使 用超文本标记语言编写，这些文档称为 HTML文档。
在基本HTML文档中，只允许两种元 素存在：一种是HTML标记，另一种则是 普通文本。
18
2.1 head容器的标记
5．script元素 格式：
<script type=“text/javascript”> 脚本语言代码段
3
1 HTML文档结构
HTML文档的组成结构如下：
4
1 HTML文档结构
一个完整的HTML文档通常由以下三部分组成：
1．HTML标记 格式：<html> … </html>
2．头部信息 格式：<head> … </head>
3．文本主体 格式：<body> … </body>
5
1 HTML文档结构
11
2.1 head容器的标记
第2章 HTML入门
图2-2 编辑HTML文档
图2-3 IE显示HTML网页内容
2.3 HTML编码基础
2.3.1 HTML文档的基本架构 • HTML文档的基本结构如下：
<html> <head> 文件头信息 </head> <body> 文件体信息 </body> </html> ——文件开始标记 文件头标记
2.4.1 文本格式
2．文字修饰标记
• HTML文档允许在要显示的文字两端添加各种文字修
饰标记，这些标记及其功能描述如下表 ：
2.4.1 文本格式
[例2]文字修饰标记——制作如图2-5所示的多格式网页 文本效果 。
图2-5字体修饰标记的应用
2.4.1 文本格式
代码如下：
<html> <head> <title>文字修饰标记</title> </head> <body> <B>粗体字</B><p> <I>斜体字</I><p> <U>加下划线</U><p> <sub>下标字效果</sub><p> <strike>带删除线字体</strike><p> <Strong>字体强调效果</strong><p> </body> </html>
2.4.2 段落格式
HTML基础知识
2.4 HTM L标记
2.图像标记<IMG>
在HTML中，使用IMG标记在网页中加入图像。它具有 两个基本属性src和alt，分别用于设置图像文件的位置和替 换文本。
上一页 下一页 返回
2.4 HTM L标记
2.4.6超链接标记
1.相对地址与绝对地址 URL 统一资源定位符，也被称为网页地址，是表示互联
上一页 下一页 返回
2.4 HTM L标记
2.4.3文本标记
1.<FONT> <FONT>标记用于控制网页上文字的字体，大小和颜色。
控制方式是利用属性设置得以实现的。 2.特殊符号
某些字符在HTML中具有特殊意义，如小于号(<)即定 义HTML标记的开始。这个小于号是不显示在最终看到的网 页单的。那如果希望在网页中显示一个小于号，该怎么办呢? 要在浏览器中显示这些特殊字符，就必须在HTML文档中使 用字符实体。
在<TD>和<TH>标记内使用colspan的取值表示水平 方向上合并的列数。
上一页 下一页 返回
2.4 HTM L标记
2.4.8表单标记
1.表单元素 <FORM>标记：用于在网页中创建表单区域，属于一
个容器标记，表示其他表单标记需要在它的包围中才有效。 其属性介绍如下。 action用来设置接收和处理浏览器递交的表单内容的服务器程 序的URL。 method：此属性告诉浏览器如何将数据发送给服务器，它指 定向服务器发送数据的方法(用POST方法还是用GET方法)。
上一页 下一页 返回
2.4 HTM L标记
2.4.10脚本标记
有时，网页中的一些特殊效果击要加入脚本语言才能够 实现，脚本语言是一种简化的编程语言，它可以生成许多的 网页特效，如滚动的文字、雪花效果、波浪效果等。‘常用 的脚本语言有3种，分别是JavaScript， VBScript和 Jscript。其中JavaS cript是IE不II Navigator都完全 支持的脚本语言，所以使用得最广泛。
第2章 HTML语言基础
<head> <script src="path/to/script.js" language="javascript" type="text/javascript"> </script> </head>
引用外部 文件
2.2.3 HTML中样式表的书写
级联样式表CSS可以精确指定网页元素位置，控制网页 外观以及创建特殊效果。 在网页上使用样式表有三种方法： ① 应用内嵌样式到各个网页元素。 ② 在网页上创建嵌入式样式表。 ③ 将网页链接到外部样式表。 1．内嵌样式 使用内嵌样式以应用层叠样式表属性到网页元素上。 例如段落标记符的内嵌样式属性如下： <p style="border-style: solid">
2.2.3 HTML中样式表的书写
2．嵌入式样式表 若只是定义当前网页的样式，可使用嵌入的样式表。
<HEAD><TITLE>字体属性示例</TITLE> <STYLE> <!-.s1{ font-family:黑体;font-size:x-large; font-style:italic } .s2{ font-size:larger} .s3{ font-variant:small-caps} .s4{ font-weight:bolder} .s5{ font:bolder italic 楷体_gb2312} --> </STYLE> </HEAD>
图2-1 简单的HTML文档
2.2 HTML文件的整体结构
2.2.1 HTML文件结构
一个完整的HTML文件结构如下: <html> 头部 <head>头部信息</head> <body>正文信息</body> 正文 </html>
第2章 HTML语言基础
2.1.2 HTML文件
【例2-1】简单的HTML文件。 <HTML> <HEAD> <TITLE> 简单的HTML文件 </TITLE> </HEAD> <BODY> 最简单的网页 </BODY> </HTML>
17
2.2 HTML语言的段落、超链接、图片标记
2.2.1 简单标记的认识与使用
表2-2 16种标准颜色
23
2.2.1 简单标记的认识与使用
例2-2 使用网页的背景色（bgcolor）属性，可以设定整个 网页的背景颜色；使用网页的文本色（text）属性，可以设 定整个网页文字的颜色。 <HTML> <HEAD> 这是主体之外的文本 <TITLE> 试试BODY标记的属性 </TITLE> </HEAD> <BODY bgcolor=greenyellow text=blue>
就其本质而言，是一个基于文本的编码标准，用于指示浏
览器以什么方式显示信息。 HTML是一种用于网页制作的排版语言，是Web最基本的构 成元素。HTML并非一种编程语言。 组成HTML的“命令”就是标记，它用符号“<”和“>”括起
来。
3
2.1.1 HTML概述
2. HTML的作用
① 格式化文本。 ② 建立超链接。
注意： ①并不是所有的标记都有属性，如换行标记<BR>。 ②根据需要可以用该标记的所有属性，也可以只用 需要的几个属性，在使用时，属性之间没有顺序。多 个属性之间用空格隔开。 属性和标记一样，都不区分大小写。但为了阅读方 便，本书用大写字母表示标记，小写字母表示属性。
HTML基础
《Web程序设计》
10
表2-1 BODY标记属性值
标记属性 background=URL bgcolor=colorvalue text=colorvalue link=colorvalue vlink=colorvalue alink=colorvalue bgproperties =fixed leftmargin=size 设置网页的背景图片 设置网页的背景颜色 设置文本的颜色 设置尚未被访问过的超文本链接的颜色，默认为蓝色 设置已被访问过的超文本链接的颜色，默认为紫色 设置超文本链接在被单击的瞬间的颜色，默认为红色 设置背景是否随滚动条滚动 设置网页左边的空白 功能
《Web程序设计》
预定义格式标记
23
《Web程序设计》
24
例 <HTML> <HEAD> <TITLE>显示<p>与<pre>的区别 </TITLE> </HEAD> <BODY> <P>春晓 春眠不觉晓，处处闻啼鸟。 夜来风雨声，花落知多少。 </P> <PRE width=1>春晓 春眠不觉晓，处处闻啼鸟。 夜来风雨声，花落知多少。 </PRE> </BODY> </HTML>
《Web程序设计》
2.1.2 HTML文档的结构
<HTML> <HEAD> 标题部分 </HEAD> <BODY> 正文部分 </BODY> </HTML> 每一个用尖括号“ < ”和“ > ” 括起来的部分称为一个标记，每一 个标记都必须有一个标记名称来作 为该标记的唯一标识。绝大部分的 标记都有其相关属性及属性值，取 值可以用双引号括起来 ( 也可以不 用) 大部分的标记都是成对出现的， 这类标记称为包容标记。个别标记 是单独出现的，这类标记称为空标 记。需要说明的是，HTML语言是不 区分大小写的 5 《Web程序设计》
超详细的HTML基础入门教程
超详细的HTML基础入门教程本文将为您提供一个超详细的HTML基础入门教程，以帮助您快速入门HTML。
1.HTML的基本结构HTML文档以`<!DOCTYPE html>`声明开始，这指定了文档使用的HTML 版本。
接下来，HTML文档的根元素是`<html>`元素，其中包含了文档的头部和主体。
- `<title>`元素定义了文档的标题，显示在浏览器的标题栏或书签中。
- `<meta>`元素提供了关于文档的元数据，如字符编码、视口设置和描述等。
- `<link>`元素用于导入外部样式表。
- `<style>`元素用于嵌入CSS样式。
- `<script>`元素用于嵌入或引用JavaScript代码。
-`<h1>`到`<h6>`元素用于定义标题，从大到小依次递减。
-`<p>`元素用于定义段落。
-`<a>`元素用于创建链接，将文本或图像变为可点击的。
- `<img>`元素用于插入图像。
- `<ul>`和`<ol>`元素用于定义无序列表和有序列表。
- `<li>`元素用于定义列表项。
- `<table>`元素用于创建表格。
- `<form>`元素用于创建表单，用于收集用户输入。
- `<input>`元素用于在表单中创建输入字段。
4.属性和值5.注释注释是用来添加对代码的解释或注释，以便开发者理解代码的作用和目的。
在HTML中，注释以`<!--`开始，以`-->`结束。
例如：```<!--这是一个注释-->```6.示例下面是一个简单的HTML示例：```html<!DOCTYPE html><html><head><title>我的第一个网页</title></head><body><p>这是我第一个网页的内容。
超文本标记语言(html)的基础知识
超文本标记语言(html)的基础知识超文本标记语言，即HTML（HyperText Markup Language），是一种用于创建网页和其他可在web浏览器中查看的信息的标准标记语言。
在这里，我们将初步介绍HTML的基础知识，包括HTML的定义、语法和一些常用的标签。
一、HTML的定义HTML是一种标记语言，它使用标记来创建网页的各个部分。
在HTML文档中，标记用于指示文本的结构和格式。
HTML文档包含视觉元素，例如标题、段落、列表、链接、图像和表格。
二、HTML的语法HTML文档由标签和内容组成。
标签告诉浏览器如何呈现文本。
标签通常成对出现，包围文本。
打开标记以开始效果，关闭标记以结束效果。
标签通常按照以下格式编写：<标记>内容</标记>三、HTML的常用标签1. 标题标签：用于定义HTML文档中的标题。
HTML中有六个级别的标题：<h1>到<h6>，其中<h1>是最大的标题。
2. 段落标签：用于定义HTML文档中的段落。
<p>标签用于标记段落的开始和结束。
3. 链接标签：用于在HTML文档中创建链接。
<a>标签可以将文本链接到其他网页、文件、电子邮件地址等。
4. 图像标签：用于将图像插入HTML文档。
<img>标签按以下格式编写：<img src="image.jpg" alt="图像" width="500" height="500">5. 列表标签：用于创建有序和无序列表。
<ul>标签用于创建无序列表，<ol>标签用于创建有序列表。
6. 表格标签：用于在HTML文档中创建表格。
<table>标签用于定义表格，<tr>标签定义表格行，<td>标签定义表格单元格。
第1章 HTML基础
表示页面所遵循的协 议
表示页面对于文档类 型的声明
14
DOCTYPE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"/TR/xhtml1/DTD/xhtml1-strict.dtd">
在此情况下使用：需要干净的标记，避免表现上的混乱。请不层叠样式表配合使用。
15
HTML的编码觃范
1.标签闭合：HTML中的所有标签都必须是闭合的
2.标签名小写 : 用小写字母来拼写标签名
3.属性值包含在双引号内：除特殊情冴，我们一定要用双引 号来包裹属性值。如： <div class=“myBox”></div> 4.标签的嵌套关系：有些标签属于其他标签的子标签，那么 如果父标签丌存在，则子标签页丌应存在。如：<td>在没有 <table>出现的时候，是绝对丌应该出现的
网页制作工具：
EditPlus：方便快捷、有语法高亮、行号提示、HTML代码快捷插入
；缺点是无语法自动提示，丌能所见即所得。
Dreameweaver：传统网页制作主流工具，语法自动提示、自动完 成，通过鼠标拖放可自动生成代码，所见即所得，但由于功能强大，
导致运行速度偏慢
32
我的第一个网页
制作你的第一个网页，内容随意 例如：
通过 JavaScript，可以重构整个 HTML 文档，可以添加、移除、改 变戒重排页面上的项目
要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所
有元素迚行访问的入口。这个入口，连同对 HTML 元素迚行添加、 移劢、改变戒移除的方法和属性，都是通过DOM来获得的
第九讲 HTML基础
第9讲 HTML基础
21
HTML标准单位
统一资源定位器(URL)[1]路径是一种 因特网资源地址的表示法。该数据里中 可以包括链接所需协议、链接主机的域 名或IP地址、链接主机的通讯端口 （port）号、主机文件的发布路径和文 件名称等。
[1] 由W3C对HTML 4.0的定义中，URL的描述为
“Universal Resource Identifier（URI）”。
第9讲 HTML基础
22
HTML标准单位
在HTML中，URL路径又分为两种形式： 绝对路径和相对路径。
绝对路径是将主机地址和主机上资源发布 目录的路径和资源名称进行完整的描述。 如:
<a href="/bbs/index.htm"> <a href="file:///c:/xitami/webpages/default.htm">
第9讲 HTML基础
13
HTML文档结构和常用元素
这三个元素一起构成完整的HTML文档结构模 板，所有的HTML文档都应该遵循这个模板：
<HTML> <HEAD> Header element </HEAD> <BODY> body of Document </BODY> </HTML>
第9讲 HTML基础
第9讲 HTML基础
28
块容器(续)
联系地址 <ADDRESS>text</ADDRESS> 特别指邮件地址，这个标记通常 用于标识文章开头的作者名行（作者姓 名）和电子邮箱地址。通常用比较小的 字体或斜体字表示，而且常使用<BR> 标记把地址的各个行分开。
HTML基础
</div> </body> </html>
整理课件
24
3 超链接标记
HTML用<a>来表示超链接，英文叫anchor， 一个链接的基本格式如下：
整理课件
17
2.1 head容器的标记
4．base元素 格式：
<base href="URL" target="text" />
base元素指定一个显式 URL 用于解析对于外部源
的链接和引用，如图像和样式表。当用户使用相对
URL请求文档时，超链接也会正确地执行。Target
指定文档中所有链接的默认窗口，该属性主要用在
<div>…<div>
定义标题, 其中:n=1,…,6。<h1>定义了最大 字号的标题, <h6>定义了最小字号的标题
段落标记，文档主体中两个段落之间插入换行
把图像插入到文档中，其中src属性给出图像地 址
定义超文本链接属性，并将结果返回给用户浏览 器
放置一个横穿浏览器窗口的水平线
在文本中强制换行
<!--注释开始, -->注释结束。注释中不能包含 注释
使用框架结构的网页中，使用框架结构，同一浏览
器窗口中可以容纳多个网页，同时在若干不同的框
架窗口中显示。
整理课件
18
2.1 head容器的标记
html基础试题
html基础试题HTML（Hypertext Markup Language）是一种用于创建网页的标记语言，它定义了网页的结构和内容。
HTML基础知识对于任何想要从事网页开发或设计工作的人来说都是必备的。
本篇文章将提供一些HTML的基础试题，以帮助你巩固和检验你的HTML知识。
一、HTML的基本结构1. 请写出HTML文档的基本结构。
2. HTML文档中<head>标签和<body>标签各起什么作用？3. DOCTYPE声明的作用是什么？它通常放置在HTML文档的哪个位置？二、HTML标签和元素4. 请说明HTML标签和元素的区别。
5. <a>标签用于创建超链接。
请描述如何使用<a>标签来创建一个在新标签页中打开的链接。
6. 以下是一个HTML段落的标签结构：<p>This is a paragraph.</p>请将其转换为没有标签的纯文本。
三、文本格式化和样式7. 如何在HTML中创建一个加粗的文本？8. 在HTML中，如何创建一个有序列表？9. 如何在HTML中创建一个带有样式的标题？四、图像和超链接10. 在HTML中，如何插入一张图像？11. 如何将图像转换为一个可点击的超链接？五、表格和表单12. 如何使用HTML创建一个表格？13. 如何在HTML中创建一个文本输入框？14. 如何使用HTML创建一个提交按钮？六、多媒体元素15. 在HTML中，如何嵌入一个视频？16. 如何在HTML中嵌入一个音频？七、HTML5新增元素17. HTML5中的<article>标签用于什么目的？18. HTML5中的<canvas>标签用于什么目的？19. HTML5中的<progress>标签用于什么目的？八、HTML实体和特殊字符20. 请写出HTML中表示版权符号（©）和注册商标符号（®）的实体代码。
HTML基础
属性 face size color
使用功能 默认值 设置文字使用的字体 宋体 3 设置文字的大小 设置文字的颜色 黑色
④水平分隔线标签<hr> 水平分隔线标签<hr>
background bgcolor leftmargin topmargin bgproperties text
其他常用标签t;p>及属性
标签所标识的文字， 由<p>标签所标识的文字，代表同一个段落的文字。不同段落间的间距等于连续加 标签所标识的文字 代表同一个段落的文字。 了两个换行符，也就是要隔一行空白行，用以区别文字的不同段落。 了两个换行符，也就是要隔一行空白行，用以区别文字的不同段落。它可以单独使 也可以成对使用。单独使用时，下一个<P>的开始就意味着上一个 的开始就意味着上一个<P>的结 用，也可以成对使用。单独使用时，下一个 的开始就意味着上一个 的结 良好的习惯是成对使用。 束。良好的习惯是成对使用。 格式： 格式： <p> <p align= 参数 参数> 其中,align是<p>标签的属性 有三个参数 标签的属性, 其中 是 标签的属性 有三个参数left center right。这三个参数设置 。 右位置的对齐方式. 段落文字的左 中 右位置的对齐方式
③文字格式控制标签<font> 文字格式控制标签<font>
<font>标签用于控制文字的字体，大小和颜色。控制方式是利用属性设 标签用于控制文字的字体，大小和颜色。 标签用于控制文字的字体 置得以实现的。 置得以实现的。 格式： 格式：<font face=值1 size=值2 color=值3〉文字 </font> 值 值 值 〉 说明：如果用户的系统中没有face属性所指的字体，则将使用默认字体。 说明：如果用户的系统中没有 属性所指的字体，则将使用默认字体。 属性所指的字体 size属性的取值为 属性的取值为1~7。也可以用“+”或“-”来设定字号的相对值。 来设定字号的相对值。 属性的取值为 。也可以用“ 或 来设定字号的相对值 color属性的值为：RGB颜色“#nnnnnn”或颜色的名称。 属性的值为： 颜色“ 或颜色的名称。 属性的值为 颜色 或颜色的名称 实例 Font标签的属性
HTML零基础入门教程
HTML零基础入门教程
第一部分：HTML基础知识
1.HTML的概念：
2.HTML文档的构成：
5.HTML注释：
注释可以在HTML文档中添加解释和说明，使用<!--注释内容-->的格式。
第三部分：HTML属性
1.属性的概念：
属性是用于指定HTML元素的额外信息，比如样式、行为等。
2.常用属性：
class属性可以用于指定元素的类别，id属性可以用于指定元素的唯一标识，style属性可以用于指定元素的样式。
3.链接属性：
href属性用于指定链接的URL地址，target属性用于指定链接在新窗口打开。
第四部分：HTML布局
1.块级元素：
块级元素占据一整行空间，常用的块级元素有<div>、<p>、<h1>等。
2.内联元素：
内联元素只占据其包裹内容的空间，常用的内联元素有<span>、<a>、<strong>等。
结束语：。
HTML语言基础
3．水平线标记<hr> 水平线是在网页上划出一条水平的分割线，用<hr>来标记 水平线。语法格式为： <hr align=left/center/right noshade size=？ width=？ color=？> Align：设置水平线的对齐方式。对齐方式有左对齐，居 中，右对齐三种。 noshade: 用来去除线段阴影。 Size：设置水平线的高度，以像素为单位。 Color：设置水平线的颜色。 Width：设置水平线的宽度，单位是像素或百分比，像素 是绝对大小，不会随着程序窗口的大小而改，百分比是相对于 程序窗口水平线所占的比例，会随着程序窗口的大小而改变。
4.3.2 使用背景图像 语法格式为： 语法格式为：
<body background = “url”>…</body> url是指图片文件的路径。 <body>是文件体标签，用来标识文件体的起止，是每个 HTML文件的主体部分。它有三个参数：text、bgcolor、 background.其中,text用来设置WEB页的文本色， bgcolor用 来设置背景色， background用来设置背景图像。 当bgcolor、background被设置后,背景色的效果不会显 示，除非浏览器在指定的路径下没有找到background中设置的 图片文件。 见案例9：背景文本颜色
4.1.1 HTML简介 HTML简介 1．围堵标记 ． 格式： 格式： <标记 标记>……</标记 标记> 标记 标记 2．单标记 ． 格式： 标记 标记> 格式：<标记 只有起始标记，没有结束标记。 只有起始标记，没有结束标记。最常用的单标记 它表示段内换行。 是<br>, 它表示段内换行。 3．标记属性 ． 格式： 标记 属性1 属性2 属性3……> 格式：<标记 属性 属性 属性 各属性间无前后顺序，属性也可省略， 各属性间无前后顺序，属性也可省略，当省略属 性时取标记的默认值。 性时取标记的默认值。
第二章_HTML基础
文件的基本结构
<html> <head> <title>网页标题</title> </head> <body> 网页正文 </body> </html> //文件开始 //文件头 //网页标题 //文件头结束 //文件体 //文件体结束 //文件结束
第一个HTML文件示例
效果图
第一个HTML文件示例
2.4.1 网页文字的颜色属性
页面文字颜色 text 语法： <body text=颜色值> 提示：所有颜色表示方式为两种：十六进制 （RGB）或英文颜色名称。如红色为red或 者#ff0000。 背景颜色 bgcolor 语法 <body bgcolor=颜色值>
2.4.2 网页背景属性 背景图片 background 语法 <body background=背景图片所在位 置> 提示：背景图片所在位置的路径必须要 描述正确，否则可能导致网页背景无法 正常预览。
第二章
HTML基础
第二章 HTML基础
要把信息发布到全球，就必须要使用一 种大多数计算机或者浏览器能够识别的 语言。 在Internet上，通常使用的发布语言是 HTML (HyperText Markup Language)。
本章内容
基 础 实 例
编辑与运行环境
基本语法结构及
文字颜色 网页背景 链接文字颜色 边距属性
文件结构
书写注意事项
2.1 编辑与运行环境
HTML语言是一个纯文本文件，用
户可以采用任何一个文本编辑器 (常用为释执行。
2.2 基本语法结构及文件结构 一个HTML文件是由一系列的元素和标 签组成。 元素指逻辑上同一的对象，例如标题、 网页主体等。 标签用来分割和描述这些元素。 •单独标签 –语法：<元素名称></元素名 称>
HTML从入门到精通 第1章 HTML入门
·2·HTML网页设计参考手册HTML的基本概念HTML的发展历史网页设计原则Dreamweaver简介在Dreamweaver中直接编写HTML网页制作技术日新月异，但都是以HTML为基础的。
HTML是浏览器识别网页的标记语言，可以说，没有它就没有丰富多彩的网页。
本章首先让读者对HTML有一个初步的认识，了解其概念、发展历史以及编写方法。
第1章HTML入门·3·1.1 HTML的基本概念1.1.1 HTML简介HTML的英文全称是Hyper Text Markup Language，直译为超文本标记语言。
它是全球广域网上描述网页内容和外观的标准。
HTML包含了一对打开和关闭的标记，在当中包含有属性和值。
标记描述了每个在网页上的组件，例如文本段落、表格或图像等。
事实上，HTML是一种因特网上较常见的网页制作标注性语言，而并不能算做一种程序设计语言，因为它缺少程序设计语言所应有的特征。
HTML通过IE等浏览器的翻译，将网页中所要呈现的内容、排版展现在用户眼前。
1.1.2 HTML的结构概念一个完整的HTML文件包括标题、段落、列表、表格以及各种嵌入对象，这些对象统称为HTML 元素。
在HTML中使用标签来分割并描述这些元素。
实际上可以说，HTML文件就是由各种HTML 元素和标签组成的。
一个HTML文件的基本结构如下：<html> 文件开始标记<head> 文件头开始的标记…文件头的内容</head> 文件头结束的标记<body> 文件主体开始的标记…文件主体的内容</body> 文件主体结束的标记</html> 文件结束标记从上面的代码结构可以看出，在HTML文件中，所有的标记都是相对应的，开头标记为< >，结束标记为</ >，在这两个标记中间添加内容。
有了标记作为文件的主干后，HTML文件中便可添加属性、数值、嵌套结构等各种类型的内容了。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
中软培训
HTML头部
中软培训
• HTML头均需要包含在<head></head>中， 可以在头中使用的标记包括<title>、 <meta>、<link>、<script>等等。 • <title>定义文档的标题，最终将显示在浏览 器标题栏上 • <meta>定义页面元信息，主要包含了搜索 信息 • <link>用于引入文件 • <script>指定页面脚本文件
META---HTTP-EQUIV
中软培训
• Pragma-cach模式： <Meta http-equiv="Pragma" Content="Nocach"> • Window-target 显示窗口的设定： <Meta http-equiv="Widow-target" Content="_top"> 可选值包括：_blank、_top、_self、_parent
中软培训
HTML基础
HTML基础
• • • • HTML简介 HTML文件结构 HTML头部 HTML主体
中软培训
HTML简介
中软培训
• HTML（Hyper Text Mark-up Language ） 即超文本标记语言，是 WWW的描述语言， 由 Tim Berners-lee提出。 • HTML语言使用标记将文本文档区分成不同 的逻辑部分，向浏览器提供文档的格式信 息。 • HTML语言是目前制作网页最流行的 语言 • 可以通过浏览器或文本编辑器查看HTML文 档
META----NAME
中软培训
• name属性用于描述页面内容，主要是向搜索引擎提供查 询关键字等 • Keywords－关键字： <Meta name=“Keywords” Content="vacation,greece"> <Meta name="Keywords" Lang="FR" Content="vacances,grè:ce,soleil"> • Description－简介： <Meta name="Description" Content="你网页的简述"> • Author－作者： <Meta name="Author" Content="张三，abc@"> • Copyright (版权)
• Content-Type-文档类型 <Meta http-equiv="Content-Type" Content="text/html; Charset=gb2312"> • Content-Language-文档语言 <Meta http-equiv="Content-Language" Content="zh-CN">
表格作用
中软培训
• 表格在页面上最主要的作用其实不是绘制 实际中使用的表格，更多情况下是为了使 用页面看起来更规整，而将页面各部分放 置到表格中
列表
• 无序列表 <UL> <LI>姓名 <LI>生日 <LI>星座 </UL> • 有序列表 <OL> <LI>姓名 <LI>生日 <LI>星座 </OL>
Meta元素
中软培训
• META标签分两大部分：HTTP标题信息 (HTTP-EQUIV)和页面描述信息(NAME) • HTTP-EQUIV 定义响应报头信息，如页面 编码、缓存模式等等 • NAME定义页面基本信息，这些信息是提供 给网络搜索引擎的，搜索引擎通过这些信 息可以找到页面
META---HTTP-EQUIV
表格位置
中软培训
• 表格的位置： 表格的位置由<table>元素的align属性决定， 可选值包括left、center、right。 • 表格内文字的位置 表格内文字的位置是由<td>、<th>的align 和valign决定的，valign可选值包括top、 middle、bottom
表格背景
表格举例
<table> <tr> <th>Food</th> <th>Drink</th> <th>Sweet</th> </tr> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> </table>
中软培训
表格尺寸
中软培训
• 表格边框 默认情况下，表格是无边框的，加边框是通过<table>标记 的border属性 • 表格尺寸 表格的尺寸是由<table>标记的width属性和height属性设 置，可以设置成绝对值，也可以设置成相对值 • 表元间隙 行与列的每个交叉点都是一个表元，表元与表元间的间隙 大小是由<table>标记的cellspacing设置的 • 表元中空白尺寸 每个表元内，除了文字外的空白空间大小由cellpadding决 定
HTML简介
中软培训
• HTML是一种标记语言，其标记化的思想源于 SGML。 • SGML是Standard Generalized Markup Language的简写，它是定义标记语言的标准，包 括HTML、XML在内所有的标记语言原则都应由 SGML定义。 • XML与HTML不同在于，HTML中可以使用哪些标 记是固定的，而XML则可以定义XML文档中可以 使用的标记，是SGML的一个子集。
字体
中软培训
• 标题字 <h#> 文字 </h#> # =1，2，3，4，5，6 • 字体大小 <font size=#> 文字</font> #=1, 2, 3, 4, 5, 6, 7 or +#, -# • 字体颜色 <font color=#> 文字 </font> #=“#rrggbb” 16 进制数码，或者是下列预定义色彩 Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,Fuchsia, White, Green, Purple, Silver, Yellow, Aqua • 客户端字体 <font face="#, #, ..., #">..</font> #=客户端可获得的字体
中软培训
列表
• 有序列表的类型： <OL type=“A” > <LI>姓名 <LI>生日 <LI>星座 </OL> type可以指定为A、a、1、i、I
中软培训
链接
中软培训
• 外部链接 <a href=>中软</a> <a href=“1.htm”>查看？</a> 前者为绝对路径，后者为相对路径。 • 内部链接 <a href=“#1”>查看第一部分</a> <a name=“1”>
META---HTTP-EQUIV
中软培训
• refresh--刷新 <Meta http-equiv="Refresh" Content="30"> <Meta http-equiv="Refresh" Content="5; Url="> • expires-期限 <Meta http-equiv="Expires" Content="0"> <Meta http-equiv="Expires" Content="Wed, 26 Feb 1997 08:21:57 GMT"> 数字表示多长时间后失效
中软培训
图片
中软培训
• <img>标记用来在页面中插入图片，其语法形式： <img src=#> #=图片URL地址 <img alt=#> #=未读入图象时，在图象位置显示的 文字；图像显示后，当鼠标放在图片上所显示的 文字。 • 图片位置： <img align=#> #=left, center, right, top, middle, bottom • 图片边框： <img border=#> #=value数字，图像边的宽度
HTML主体
中软培训
• HTML主体是HTML页面中最终要显示出来 的内容部分，主体应该包含在 <body></body>中 • 可以在主体中输出文本、插入图片、表格、 表单等等。
体属性
中软培训
• 背景颜色 <body bgcolor="red"> 可以直接写颜色英文名，也可以采用#rrggbb的形式，基 本#号后面的RGB各色彩的深度 • 背景图片 <body background＝"back-ground.gif"> 给出图片文件位置，如图片小于页面时，将循环填充 • 背景音乐 <bgsound src=“background_sound.mid” loop=“-1”> 注意：这是一个单独标记，要放到<head>中使用 • topmargin，leftmargin指定边界宽度