第3讲HTML语言的基本标签与对应的属性(1)
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
值：scroll/alternate/slide Scroll：自右向左走动的文字 Alternate：左右摆动的文字 Slide：自左到右一次停止的文字
实例：跑马灯01.html
HTML 跑马灯效果
Marquee标签属性： 6、 loop 设置跑动文字的圈数
loop=100跑马次数：循环100次，如不写默认为一直 循环 loop=-1就是表示你的跑马灯的循环次数是无限次，直 到你关闭网页。
主讲：张玉彬
4
知识点回顾
✓ 什么是HTML语言？ Html 的全称是”超文本标记语言”(Hyper text
Markup Language) 是一种标记语言,不需要编译,直 接由浏览器执行。
注意：html不是编程语言，而是一种描述性的标记语言！
主讲：张玉彬
5
知识点回顾 ✓HTML文档的结构
主讲：张玉彬
HTML 跑马灯效果
Marquee标签属性： 6、 scrollamount 设置跑动文字移动速度
பைடு நூலகம்scrolldelay 设置跑动文字移动延时
scrollamount 表示运动速度，值是正整数，默认为6 scrolldelay 表示停顿时间，值是正整数，默认为0， 单位是毫秒 实例：03.html
✓ 组成网页的常用元素 ✓ 在一个网页中，通常由文本、图像、超链接、表单等
元素组成。
网站结构分析
✓ 下面简单介绍组成网页元素的作用。 ✓ 1．文本
文本一直是最重要的信息载体与交流工具，网页中的 信息一般以文本为主。在网页中可以通过字体、大小 、颜色、底纹、边框等来设置文本的属性。用户还可 以在网页中设计各种各样的文字列表，来清晰表达一 系列项目。在图 中文本链接部分的文本也可看做是文 字列表，只不过每个列表项通过超链接连接到与该列 表项相关的网页。
网站结构分析
✓ 什么是网站
所谓网站(Website)，就是指在网际网路（因特网 ）上，根据一定的规则，使用HTML等工具制作的用 于展示特定内容的相关网页的集合。简单地说，网站 是一种通讯工具，就像布告栏一样，人们可以通过网 站来发布自己想要公开的资讯（信息），或者利用网 站来提供相关的网路服务（网络服务）。
</MARQUEE> 之间。 ✓ 实例：跑马灯1.html
HTML 跑马灯效果
Marquee标签属性 1、direction 文字走动方向 值：left , right , top , down
解释：direction 表示文字的走动方向，可分上下左右四 种，具体看实例：跑马灯.html
HTML 跑马灯效果
HTML 跑马灯效果
Marquee标签属性：边距的设置 4、 hspace 设置文字的水平边距
vspace 设置文字的上边距
hspace、vspace 表示元素到区域边界的水平距离和垂直 距离，值是正整数，单位是像素 实例：跑马灯文字.html
HTML 跑马灯效果
Marquee标签属性： 5、 behavior 设置文字的运动方式
✓ 4．表单 表单是用来收集站点访问者信息的域集。站点访问者 填写表单的方式是输入文本、单击单选按钮与复选框 ，以及从下拉菜单中选择选项。在填写好表单之后， 站点访问者便送出所输入的数据，该数据就会根据所 设置的表单处理程序，以各种不同的方式进行处理。
✓ 5．表格 ✓ 表格是网页排版的灵魂。使用表格排版是现在网页的
记不起作用，表现为文本形式。04.html
文字的设置
✓ 文字是网页设计的基础部分，设置好文字的样式，可以起到事半功倍的效果，通 常可以使用两种方法。 第1种方法是直接使用HTML标记进行设置，如:使用粗体标记<B>将文本 设置为加粗样式。 第2种方法是使用css，层叠样式表。 HTML定义了6级标题，1-6级，标题文字随级数增大依次减小。
网站结构分析
✓ 什么是网页
网页（英文：Web page）是一个文件，他存放在世界 某个角落的某一部计算机中，而这部计算机必须是与 互联网相连的。网页经由网址（ URL ）来识别与存 取，当我们在浏览器输入网址后，经过一段复杂而又 快速的程序，网页文件会被传送到你的计算机，然后 再通过浏览器解释网页的内容，再展示到你的眼前。 是万维网中的一“页”，通常是HTML格式（文件扩 展名为.html或.htm）。网页通常用图像档来提供图 画。网页要透过网页浏览器来阅读。
主要制作形式。通过表格可以精确地控制各网页元素 在网页中的位置。表格并非指网页中直观意义的表格 ，范围要更广一些。表格是HTML 语言中的一种元素 ，主要用于网页内容的排列，组织整个网页的外观。 通过在表格中放置相应的图片或其他内容，即可有效 地组合成符合设计效果的页面。有了表格的存在，网 页中的元素得以方便地固定在设计的位置上。一般表 格的边线不在网页中显示。
02.html
文字的设置
✓ <B>设置文字以粗体的方式显示。语法<B>…</B> ✓ <I> 设置文字以斜体显示。语法<I>…</I> ✓ <EM>效果同<l>语法<EM>…</EM> ✓ <SUP>设置文字以上标文本效果显示。语法<SUP>…</SUP> ✓ <SUB>设置文字以下标文本效果显示。语法<SUB>…</SUB> ✓ <U>设置文字以下划线显示。语法<U>…</U> ✓ <S>设置文字以删除线显示。语法<S>…</S>
HTML 超链接
✓ 超链接是一个网站的重要元素之一，一个网站由多个页面组成， 各页面之间是通过超链接来确定相互关系的，每个页面的地址都 不同。
✓ 格式:<A>这是一个连接</A> href 设置超链接目标地址URL name 在html文档中建立特定位置的名称 target 设置被链接的网页打开时的窗口 _blank/_parent/_self/_top accesskey 设置超链接的快捷键 title 设置超链接的说明文字 style 运用css样式设置超链接文字样式 07.html
<h1>h1的效果</h1> <h2>h2的效果</h2> <h3>h3的效果</h3> <h4>h4的效果</h4> <h5>h5的效果</h5> <h6>h6的效果</h6>
01.html 利用align 属性可以实现标题文字水平方向左、中、右的对齐方式。 align=“left / center / right”
斜杠的标记（如:<html>）开始，以有斜杠的标记（
如:</html>）结束。比如，<table>表示一个表格的
开始，</table>表示一个表格的结束。在HTML中，
标记的大小写作用相同，如<TABLE>和<table>都是
表示一个表格的开始。
返回
主讲：张玉彬
8
知识点回顾
之所以称为“单标记”，是因为它只需单独 使用就能完整地表达意思，这类标记的语法是 ： <标记名称> 最常用的单标记是<br>，它表示换行。
✓ 6．动画 ✓ 动画是网页上最活跃的元素，通常制作优秀、创意出
众的动画是吸引浏览者的最有效的方法。网页中的 Banner 一般都是动画的形式。网页中除了这些最基本 的元素，还包括横幅广告、字幕、悬停按钮、日戳、 计数器、音频、视频等。
HTML段落设置
✓ <P>段落标记，一般情况下在每个段落的前面加上一个<P>标记 可以区分段落，又可以换行。
✓ 2．图像 今天看到的丰富多彩的网页，都是因为有了图像，可见 图像在网页中的重要性。在网页中既可以通过图像的 形式表达主题，也可以通过图像对网页起一个装饰作 用。用于网页中的图片一般为JPG 格式和GIF 格式， 即以.jpg(或.jpeg)和.gif 为后缀的文件。
✓ 3．超链接 超链接是网站的灵魂，从一个网页指向另一个目的端 的链接。例如，指向另一个网页或相同网页上的不同 位置。这个目的端通常是另一个网页，但也可以是一 幅图片、一个电子邮件地址、一个文件、一个程序或 者也可以是本页中的其他位置。超链接可以是文本或 者图片，图 中既有文本链接，又有图像链接，还可以 通过导航栏进行超链接。
6
知识点回顾
✓HTML基本语法
标记语法
1、什么是标记 2、标记类型和语法
*单标记 *双标记
主讲：张玉彬
7
知识点回顾
HTML用于描述功能的符号称为“标记”。比如
<html>、<head>、<body>等，都是标记，<html>标
记表示HTML文档的开始。标记在使用时必须用尖括
号“<>”括起来，有些标记必须成对出现，以开头无
Marquee标签属性 2、 bgcolor 设置文字背景颜色
解释： bgcolor 设置文字背景颜色，默认为白色，也可 设置你喜欢的任意颜色，具体看实例：跑马灯背景 .html
HTML 跑马灯效果
Marquee标签属性 3、 height 设置跑动文字的高度
width 设置跑动文字的宽度
解释：默认width=100% height为标签内元素的高度 具体看实例：跑马灯文字.html
主讲：张玉彬
返回
9
知识点回顾
✓ 3.HTML 的缺陷 ✓ 如果我们的网页不仅仅是上例中的四个标题，或者说
有非常多的标题。如果希望都将标题都变成“红色”， 那么对与整个网站来说，工作量势必非常的繁重。 ✓ 例：第一讲中的1-2.html
知识点回顾
✓ Css的概念及其控制方法 Css（cascading style sheet）,中文名称是：层叠样式
网站结构分析
✓ Web站点主页的成分 Web站点主页应具备的基本成分包括： 页头：准确无误地标识你的站点和企业标志； Email地址：用来接收用户垂询； 联系信息：如普通邮件地址或电话； 版权信息：声明版权所有者等。 充分利用已有信息，如客户手册．公共关系文档．技 术手册和数据库等。
网站结构分析
第二讲 HTML的基本标签与对应的属性
HTML语言简介、简单的利用CSS控制页面
温故而知新
知识点回顾
✓什么是HTML语言？ ✓HTML文档的结构 ✓HTML基本语法 ✓Css及其控制页面的方法
主讲：张玉彬
3
知识点回顾
一个网站有多个网页组成，我们的这些网页内容都 是靠这些HTML代码来布局的， HTML是搭建网页 的基础语言，如果不了解HTML就不能灵活的实现 想要的网页效果。更别提做网站了。
✓ <BR>之后的文字将在下一行显视。 ✓ <HR>设置水平线。 ✓ <center>标记所有包含的内容，将以居中对齐的方式显示在网页
中。 ✓ < PRE >标签可以把原文件中的空格,回车,换行,tab键表现出来 ✓ <NOBR>标记将取消浏览器由于窗口大小变化而换行。 ✓ <XMP>在HTML文档中加入<XMP>标记，使标记内的HTML标
✓ 导航 ✓ 由于人们习惯于从左到右、从上到下阅读，所以
主要的导航条应放置在页面左边，对于较长页面来说 ，在最底部设置一个简单导航也很有必要（只要两项 就够了：主页|页面顶部）。 ✓ 确定一种你满意的模式之后，最好将这种模式应 用到同一网站的每个页面，这样，浏览者就知道如何 寻找信息。
网站结构分析
03.html
文字的设置
✓ <FONT>控制的字体、大小和文字。 语法： <FONT face=“字体”,size=“文字大小”,color=“颜 色值”>…</FONT> face 控制文字使用的字体 size 控制文字的大小 color 设置文字颜色
HTML 跑马灯效果
✓ <MARQUEE> 标记可使文字产生跑动的效果 ✓ 方法： 把要滚动的文字写在<MARQUEE> 与
表，用于控制网页样式并允许将样式信息与网页内容 分离的一种标记性语言。 例：第一讲中1-3.html文件 看CSS的作用 ✓ 1.行内样式（1-5.html） ✓ 2.内嵌式（1-6.html） ✓ 3.链接式（1-7.html） ✓ 4.导入样式（1-8.html）
主讲：张玉彬
12
第二讲 HTML的基本标签与对应的属性
HTML语言简介、简单的利用CSS控制页面
主要内容
✓ 网站结构分析 ✓ HTML段落设置 ✓ HTML 文字设置 ✓ HTML 跑动文（跑马灯）设置 ✓ HTML 超链接设置
网站结构分析
✓ 网页简介 ✓ 什么是网页 ✓ 关于网站 ✓ 构成网页的元素
网站结构分析
✓ 网页简介
网页是构成网站的基本元素，是承载各种网站应用的 平台。通俗的说，您的网站就是由网页组成的。如果 您只有域名和虚拟主机而没有制作任何网页的话，您 的客户仍旧无法访问您的网站。
实例：跑马灯01.html
HTML 跑马灯效果
Marquee标签属性： 6、 loop 设置跑动文字的圈数
loop=100跑马次数：循环100次，如不写默认为一直 循环 loop=-1就是表示你的跑马灯的循环次数是无限次，直 到你关闭网页。
主讲：张玉彬
4
知识点回顾
✓ 什么是HTML语言？ Html 的全称是”超文本标记语言”(Hyper text
Markup Language) 是一种标记语言,不需要编译,直 接由浏览器执行。
注意：html不是编程语言，而是一种描述性的标记语言！
主讲：张玉彬
5
知识点回顾 ✓HTML文档的结构
主讲：张玉彬
HTML 跑马灯效果
Marquee标签属性： 6、 scrollamount 设置跑动文字移动速度
பைடு நூலகம்scrolldelay 设置跑动文字移动延时
scrollamount 表示运动速度，值是正整数，默认为6 scrolldelay 表示停顿时间，值是正整数，默认为0， 单位是毫秒 实例：03.html
✓ 组成网页的常用元素 ✓ 在一个网页中，通常由文本、图像、超链接、表单等
元素组成。
网站结构分析
✓ 下面简单介绍组成网页元素的作用。 ✓ 1．文本
文本一直是最重要的信息载体与交流工具，网页中的 信息一般以文本为主。在网页中可以通过字体、大小 、颜色、底纹、边框等来设置文本的属性。用户还可 以在网页中设计各种各样的文字列表，来清晰表达一 系列项目。在图 中文本链接部分的文本也可看做是文 字列表，只不过每个列表项通过超链接连接到与该列 表项相关的网页。
网站结构分析
✓ 什么是网站
所谓网站(Website)，就是指在网际网路（因特网 ）上，根据一定的规则，使用HTML等工具制作的用 于展示特定内容的相关网页的集合。简单地说，网站 是一种通讯工具，就像布告栏一样，人们可以通过网 站来发布自己想要公开的资讯（信息），或者利用网 站来提供相关的网路服务（网络服务）。
</MARQUEE> 之间。 ✓ 实例：跑马灯1.html
HTML 跑马灯效果
Marquee标签属性 1、direction 文字走动方向 值：left , right , top , down
解释：direction 表示文字的走动方向，可分上下左右四 种，具体看实例：跑马灯.html
HTML 跑马灯效果
HTML 跑马灯效果
Marquee标签属性：边距的设置 4、 hspace 设置文字的水平边距
vspace 设置文字的上边距
hspace、vspace 表示元素到区域边界的水平距离和垂直 距离，值是正整数，单位是像素 实例：跑马灯文字.html
HTML 跑马灯效果
Marquee标签属性： 5、 behavior 设置文字的运动方式
✓ 4．表单 表单是用来收集站点访问者信息的域集。站点访问者 填写表单的方式是输入文本、单击单选按钮与复选框 ，以及从下拉菜单中选择选项。在填写好表单之后， 站点访问者便送出所输入的数据，该数据就会根据所 设置的表单处理程序，以各种不同的方式进行处理。
✓ 5．表格 ✓ 表格是网页排版的灵魂。使用表格排版是现在网页的
记不起作用，表现为文本形式。04.html
文字的设置
✓ 文字是网页设计的基础部分，设置好文字的样式，可以起到事半功倍的效果，通 常可以使用两种方法。 第1种方法是直接使用HTML标记进行设置，如:使用粗体标记<B>将文本 设置为加粗样式。 第2种方法是使用css，层叠样式表。 HTML定义了6级标题，1-6级，标题文字随级数增大依次减小。
网站结构分析
✓ 什么是网页
网页（英文：Web page）是一个文件，他存放在世界 某个角落的某一部计算机中，而这部计算机必须是与 互联网相连的。网页经由网址（ URL ）来识别与存 取，当我们在浏览器输入网址后，经过一段复杂而又 快速的程序，网页文件会被传送到你的计算机，然后 再通过浏览器解释网页的内容，再展示到你的眼前。 是万维网中的一“页”，通常是HTML格式（文件扩 展名为.html或.htm）。网页通常用图像档来提供图 画。网页要透过网页浏览器来阅读。
主要制作形式。通过表格可以精确地控制各网页元素 在网页中的位置。表格并非指网页中直观意义的表格 ，范围要更广一些。表格是HTML 语言中的一种元素 ，主要用于网页内容的排列，组织整个网页的外观。 通过在表格中放置相应的图片或其他内容，即可有效 地组合成符合设计效果的页面。有了表格的存在，网 页中的元素得以方便地固定在设计的位置上。一般表 格的边线不在网页中显示。
02.html
文字的设置
✓ <B>设置文字以粗体的方式显示。语法<B>…</B> ✓ <I> 设置文字以斜体显示。语法<I>…</I> ✓ <EM>效果同<l>语法<EM>…</EM> ✓ <SUP>设置文字以上标文本效果显示。语法<SUP>…</SUP> ✓ <SUB>设置文字以下标文本效果显示。语法<SUB>…</SUB> ✓ <U>设置文字以下划线显示。语法<U>…</U> ✓ <S>设置文字以删除线显示。语法<S>…</S>
HTML 超链接
✓ 超链接是一个网站的重要元素之一，一个网站由多个页面组成， 各页面之间是通过超链接来确定相互关系的，每个页面的地址都 不同。
✓ 格式:<A>这是一个连接</A> href 设置超链接目标地址URL name 在html文档中建立特定位置的名称 target 设置被链接的网页打开时的窗口 _blank/_parent/_self/_top accesskey 设置超链接的快捷键 title 设置超链接的说明文字 style 运用css样式设置超链接文字样式 07.html
<h1>h1的效果</h1> <h2>h2的效果</h2> <h3>h3的效果</h3> <h4>h4的效果</h4> <h5>h5的效果</h5> <h6>h6的效果</h6>
01.html 利用align 属性可以实现标题文字水平方向左、中、右的对齐方式。 align=“left / center / right”
斜杠的标记（如:<html>）开始，以有斜杠的标记（
如:</html>）结束。比如，<table>表示一个表格的
开始，</table>表示一个表格的结束。在HTML中，
标记的大小写作用相同，如<TABLE>和<table>都是
表示一个表格的开始。
返回
主讲：张玉彬
8
知识点回顾
之所以称为“单标记”，是因为它只需单独 使用就能完整地表达意思，这类标记的语法是 ： <标记名称> 最常用的单标记是<br>，它表示换行。
✓ 6．动画 ✓ 动画是网页上最活跃的元素，通常制作优秀、创意出
众的动画是吸引浏览者的最有效的方法。网页中的 Banner 一般都是动画的形式。网页中除了这些最基本 的元素，还包括横幅广告、字幕、悬停按钮、日戳、 计数器、音频、视频等。
HTML段落设置
✓ <P>段落标记，一般情况下在每个段落的前面加上一个<P>标记 可以区分段落，又可以换行。
✓ 2．图像 今天看到的丰富多彩的网页，都是因为有了图像，可见 图像在网页中的重要性。在网页中既可以通过图像的 形式表达主题，也可以通过图像对网页起一个装饰作 用。用于网页中的图片一般为JPG 格式和GIF 格式， 即以.jpg(或.jpeg)和.gif 为后缀的文件。
✓ 3．超链接 超链接是网站的灵魂，从一个网页指向另一个目的端 的链接。例如，指向另一个网页或相同网页上的不同 位置。这个目的端通常是另一个网页，但也可以是一 幅图片、一个电子邮件地址、一个文件、一个程序或 者也可以是本页中的其他位置。超链接可以是文本或 者图片，图 中既有文本链接，又有图像链接，还可以 通过导航栏进行超链接。
6
知识点回顾
✓HTML基本语法
标记语法
1、什么是标记 2、标记类型和语法
*单标记 *双标记
主讲：张玉彬
7
知识点回顾
HTML用于描述功能的符号称为“标记”。比如
<html>、<head>、<body>等，都是标记，<html>标
记表示HTML文档的开始。标记在使用时必须用尖括
号“<>”括起来，有些标记必须成对出现，以开头无
Marquee标签属性 2、 bgcolor 设置文字背景颜色
解释： bgcolor 设置文字背景颜色，默认为白色，也可 设置你喜欢的任意颜色，具体看实例：跑马灯背景 .html
HTML 跑马灯效果
Marquee标签属性 3、 height 设置跑动文字的高度
width 设置跑动文字的宽度
解释：默认width=100% height为标签内元素的高度 具体看实例：跑马灯文字.html
主讲：张玉彬
返回
9
知识点回顾
✓ 3.HTML 的缺陷 ✓ 如果我们的网页不仅仅是上例中的四个标题，或者说
有非常多的标题。如果希望都将标题都变成“红色”， 那么对与整个网站来说，工作量势必非常的繁重。 ✓ 例：第一讲中的1-2.html
知识点回顾
✓ Css的概念及其控制方法 Css（cascading style sheet）,中文名称是：层叠样式
网站结构分析
✓ Web站点主页的成分 Web站点主页应具备的基本成分包括： 页头：准确无误地标识你的站点和企业标志； Email地址：用来接收用户垂询； 联系信息：如普通邮件地址或电话； 版权信息：声明版权所有者等。 充分利用已有信息，如客户手册．公共关系文档．技 术手册和数据库等。
网站结构分析
第二讲 HTML的基本标签与对应的属性
HTML语言简介、简单的利用CSS控制页面
温故而知新
知识点回顾
✓什么是HTML语言？ ✓HTML文档的结构 ✓HTML基本语法 ✓Css及其控制页面的方法
主讲：张玉彬
3
知识点回顾
一个网站有多个网页组成，我们的这些网页内容都 是靠这些HTML代码来布局的， HTML是搭建网页 的基础语言，如果不了解HTML就不能灵活的实现 想要的网页效果。更别提做网站了。
✓ <BR>之后的文字将在下一行显视。 ✓ <HR>设置水平线。 ✓ <center>标记所有包含的内容，将以居中对齐的方式显示在网页
中。 ✓ < PRE >标签可以把原文件中的空格,回车,换行,tab键表现出来 ✓ <NOBR>标记将取消浏览器由于窗口大小变化而换行。 ✓ <XMP>在HTML文档中加入<XMP>标记，使标记内的HTML标
✓ 导航 ✓ 由于人们习惯于从左到右、从上到下阅读，所以
主要的导航条应放置在页面左边，对于较长页面来说 ，在最底部设置一个简单导航也很有必要（只要两项 就够了：主页|页面顶部）。 ✓ 确定一种你满意的模式之后，最好将这种模式应 用到同一网站的每个页面，这样，浏览者就知道如何 寻找信息。
网站结构分析
03.html
文字的设置
✓ <FONT>控制的字体、大小和文字。 语法： <FONT face=“字体”,size=“文字大小”,color=“颜 色值”>…</FONT> face 控制文字使用的字体 size 控制文字的大小 color 设置文字颜色
HTML 跑马灯效果
✓ <MARQUEE> 标记可使文字产生跑动的效果 ✓ 方法： 把要滚动的文字写在<MARQUEE> 与
表，用于控制网页样式并允许将样式信息与网页内容 分离的一种标记性语言。 例：第一讲中1-3.html文件 看CSS的作用 ✓ 1.行内样式（1-5.html） ✓ 2.内嵌式（1-6.html） ✓ 3.链接式（1-7.html） ✓ 4.导入样式（1-8.html）
主讲：张玉彬
12
第二讲 HTML的基本标签与对应的属性
HTML语言简介、简单的利用CSS控制页面
主要内容
✓ 网站结构分析 ✓ HTML段落设置 ✓ HTML 文字设置 ✓ HTML 跑动文（跑马灯）设置 ✓ HTML 超链接设置
网站结构分析
✓ 网页简介 ✓ 什么是网页 ✓ 关于网站 ✓ 构成网页的元素
网站结构分析
✓ 网页简介
网页是构成网站的基本元素，是承载各种网站应用的 平台。通俗的说，您的网站就是由网页组成的。如果 您只有域名和虚拟主机而没有制作任何网页的话，您 的客户仍旧无法访问您的网站。