第3章 使用网页基本标签

合集下载

网页基本标记

网页基本标记

网页基本标记<!DOCTYPE html><!-- -->注释标记<html></html> 头标记<title></title> 标题<meta></meta> 元标记<meta charset = “utf-8”> utf-8 /GBK/gb2312 编码属性:authorkeywordsdescriptionother<body></body> 内容属性:bgcolor背景颜色text 文本颜色link 链接颜色vlink已经访问了的链接颜色alink正在被点击的链接颜色可包含标记(部分)<h1></h1>标题<hn></hn> 1<=n<=6<br>换行<hr>横线&nbsp; &#160; 空格&lt; &#60; <&gt; &#62; >&amp; &#38; &和号&quot; &#34; 引号&apos; &#39; ‘撇号&cent; &#162; 分&pound; &#163; 磅&yen; &#165; 元&euro; &#8364; 欧元&sect; &#167; 小节&copy; &#169; 版权&reg; &#174; 注册商标&trade; &#8482; 商标&times; &#215; 乘号&divide; &#247; 除号文档格式标记1. 格式标记<br> 强制换行(打几个br就是空几行)<p></p> 段落<center></center> 居中<pre></pre> 预格式(不改变原来样子)<ul></ul>无序列表标记(小点)<ol></ol>有序列表标记(数字)<li></li> 列表项目<li value =”X”></li>(定初始值)<dl><dt><dd> 定义型列表<hr> 水平分割线<div> 分区显示标记2. 文本标记<hn></hn> 标题标记<font></font> 字体标记sizecolorface(#ff0000)<b></b> 加粗<i></i> 斜体<u></u>下划线字体<sub></sub> 下标<sup></sup> 上标<tt></tt> 打印机字体标记<cite></cite> 引用方式的字体<em></em> 强调,斜字体<strong></strong> 强调,粗字体<small></small> 小型字体<big></big> 大型字体3. 图像标记<img>src 路径(相对,绝对)D:\width 宽度height 高度border 边框alt4. 超链接<a href= “”target=”打开方式”name=”页面锚点名称”></a>Target属性:_blank 新窗口(前一个窗口不关) 当前窗口_parent 父窗口_top 顶层窗口5. 表格标记<table></table>属性:widthheightborderalign 表格显示方式leftcenterrightcellspacing 单元格之间距离cellpadding 单元格内容与单元格之间距离framevoid 无边框above 仅有顶部below 仅有底部hsides 有顶部与底部lhs 仅有左侧rhs 仅有右侧vsides 仅有左右侧box 全部4边rulesnone 无分割线all 所有分割线rows 行分割线clos 列分割线groups<caption></caption><tr></tr> 行标记bgcoloralign<td></td> 单元格标记bgcoloralignvalignwidthheightrowspancolspan框架不在body里面<frameset></frameset>cols “*,*” “%,%,%”rows “*,*” “%,%,%”frameborder 边框border 边框大小<frame></frame>src 引用文件name 框架名称noresize 不能调整框架scrolling 滚动条autoyesnoframeborder1。

html常用的标签及使用总结

html常用的标签及使用总结

html常用的标签及使用总结HTML是超文本标记语言,用于创建网页的标准标记语言。

它使用标签来定义网页的内容和结构。

在HTML中,标签是由尖括号(<>)括起来的关键词,常常成对出现,其中一个是开始标签,另一个是结束标签。

下面是HTML中常用的标签及其使用方式的总结。

1. <html>:整个HTML文档的根元素,包含了整个网页的内容。

2. <head>:位于<html>标签之内,用于定义网页的头部信息,比如标题、样式表、脚本和字符编码等。

3. <title>:位于<head>标签之内,用于定义网页的标题,显示在浏览器的标题栏或者书签中。

4. <body>:位于<html>标签之内,用于定义网页的主体内容,包含了所有可见的网页元素。

5. <h1> - <h6>:用于定义标题的标签,从最大的标题<h1>到最小的标题<h6>。

6. <p>:用于定义段落的标签,一般用来包含文本内容。

7. <a>:用于定义超链接的标签,通过href属性指定链接的地址和target属性指定在新窗口中打开链接还是在当前窗口中打开链接。

8. <img>:用于插入图像的标签,通过src属性指定图像的URL。

9. <div>:用于定义文档中的块级元素,常用于对网页进行布局。

10. <span>:用于定义文档中的内联元素,常用于对文本的样式进行设置。

11. <ul>:用于定义无序列表的标签,通过在<li>标签内部定义列表项。

12. <ol>:用于定义有序列表的标签,通过在<li>标签内部定义列表项。

13. <li>:用于定义列表项的标签,通常包含在<ul>或<ol>中。

网页设计常用的标签

网页设计常用的标签

Body attributes
文 档 整 体 属 性
<body bgcolor=?> Sets the background color,
using name or hex value 设 置 背 景 颜 色, 使 用 名 字 或 十 六 进 制 值
<body text=?> Sets the text color, using
<cite></cite> Creates a citation, usually
italic 创 建 一 个 引 用, 通 常 是 斜 体
<em></em> Emphasizes a word (with italic
or bold) 加 重 一 个 单 词( 通 常 是 斜 体 加 黑 体)
stylesheets 一 个 用 来 排 版 大 块HTML 段 落 的 标 签, 也 用 于 格 式 化 表
Graphical elements
图 形 元 素
<img src="name"> Adds an image 添 加 一 个 图 像
<img src="name" align=?> Aligns an image: left, right,
<a href="#NAME"></a> Links to that target location
from elsewhere in the document 创 建 一 个 指 向 位 于 文 档 内 部 靶 位 的 链 接
Formatting

Html网页标签实例教程

Html网页标签实例教程

HTML 简介实例什么是HTML?HTML 是用来描述网页的一种语言。

•HTML 指的是超文本标记语言(H yper T ext M arkup L anguage)•HTML 不是一种编程语言,而是一种标记语言 (markup language)•标记语言是一套标记标签 (markup tag)•HTML 使用标记标签来描述网页HTML 标签HTML 标记标签通常被称为HTML 标签(HTML tag)。

•HTML 标签是由尖括号包围的关键词,比如<html>•HTML 标签通常是成对出现的,比如<b> 和</b>•标签对中的第一个标签是开始标签,第二个标签是结束标签•开始和结束标签也被称为开放标签和闭合标签HTML 文档= 网页•HTML 文档描述网页•HTML 文档包含HTML 标签和纯文本•HTML 文档也被称为网页Web 浏览器的作用是读取HTML 文档,并以网页的形式显示出它们。

浏览器不会显示HTML 标签,而是使用标签来解释页面的内容:例子解释•<html> 与</html> 之间的文本描述网页•<body> 与</body> 之间的文本是可见的页面内容•<h1> 与</h1> 之间的文本被显示为标题•<p> 与</p> 之间的文本被显示为段落HTML 入门您需要什么在w3school,您不需要任何工具就可以学习HTML。

•您不需要任何HTML 编辑器•您不需要web 服务器•您不需要网站编辑HTML在本教程中,我们使用纯文本编辑器来编辑HTML。

我们认为这是学习HTML 的最佳方式。

然而,专业的web 开发者常常对Dreamweaver 或FrontPage 这样的HTML 编辑器情有独钟,而不是编写纯文本。

创建自己的测试网页如果您希望直接学习HTML,请跳过本章的其余内容。

网页制作案例教程 清华大学出版社 教学课件第3章 HTML基础

网页制作案例教程 清华大学出版社 教学课件第3章 HTML基础

文本字体、大小、颜色属性,主要是通过在<font>标签 中设置face、size、color的值,设置文本的字体、大 小和颜色。
案例3-13文本字体属性应用

3、<hr>标签的属性


在<hr>标签中,通过设置width和size属性,用来控制 水平线的长度和宽度,默认情况下,水平线的宽度是 100%,1像素的高度,在设置宽度和高度时可以是确 定的像素值也可以是占窗口的百分比。 color属性可以设置水平线的颜色,颜色表示和字体 颜色的表示相同.

表格标签、属性、单元格以及表格嵌套应用 框架基本结构、分割方式、属性及链接、浮动 窗口
本章学习导航

HTML标签的学习,是初学者掌握网页制作的 入门技术,也是后续学习创建静态、动态网站 必备基础知识,了解JavaScript的基本标签、 属性运用及作用,并使用它们制作精美的网页 ,是初学者掌握本章内容的基本要求。 本章内容在全书知识结构中所处位置如图所示
3.1.2 HTML基本结构及书写规范

1、HTML基本结构

在HTML中,由<>和</>括起来的文本叫做“标签”,<> 表示开始标签;</>表示结束标签,开始标签和结束标签配 对使用,它们之间的部分是该标签的作用域,比如 <html></html>等。HTML就是以这些标签来控制内容的显 示方式。

8)注释标签 在HTML文档中用来表示注释的标签为<!-- 注释内容-->

案例3-10 注释标签应用 9)水平分割线标签hr <hr>标签是水平线标签,用于段落和段落之间的分割, 使文档结构清晰明了,使文字的编排更整齐。加入一 个<hr>标签,就加入了一条默认的水平线。

第3章 HTML语言基础

第3章  HTML语言基础

在起始标记和结尾标记中间的部分是元素体。 每一个元素都有名称和可选择的属性,元素 的名称和属性都在起始标记内标明。比如体
<body backgroud="background.gif"> <h2>示例</h2> 这是一个示例<p>
</body>
第一行是体元素的起始标记,它标明体 元素从此开始。由于所有的标记都具有相同 的结构,因此仔细分析这个标记的各个部分, 就能对标记的写法有一个大概了解。 < 起始标记开始
第3章 HTML语言基础
本章要点: 网页设计的基本原则 HTML语言及其基本语法
HTML(Hyper Text Markup Language, 即超文本标记语言)是一种用来制作超文 本文档的简单标记语言。用HTML编写的 超文本文档称为HTML文档,它能独立于 各种操作系统平台(如UNIX,WINDOWS 等)。自1990年以来HTML就一直被用作 WWW上的信息表述语言,用于描述网页 的格式设计和它与WWW上其它网页的链 接信息。
(5)定期更新网页内容。每隔一定时间就 对网页内容和版面设计进行较大幅度的更新, 从而吸引访问者的注意力。这不失为增加来 访次数的好方法。 (6)注意网站内容的搭配。在首页中尽量 使之美观大方,直观又丰富。其它网页要与 首页有很好的搭配效果。
(7)考虑不支持某些功能的浏览器。随着 网页设计技术的不断进步,在网页中经常会 使用一些特殊的技术,使得网页的功能更加 丰富,看起来也更加美观。但是不可排除一 些用户使用过时的浏览器浏览这些网页,这 就需要为这些特殊的功能部分添加替代性文 字,避免误将程序代码显示出来。 (8)对多媒体文件实施有限的限制。尽管 网络多媒体技术有了很大的发展,但由于网 络速度的限制,就要求一个网页设计者在设 计网页时要充分考虑到所添加多媒体部分的 大小和必要性。

《网页制作》教案

《网页制作》教案

《网页制作》教案第一章:网页制作基础知识1.1 教学目标让学生了解网页制作的基本概念让学生掌握HTML和CSS的基本语法让学生了解网页制作的基本流程1.2 教学内容网页制作基本概念介绍HTML和CSS的基本语法介绍网页制作的基本流程介绍1.3 教学方法讲授法:讲解网页制作的基本概念、HTML和CSS的基本语法演示法:演示网页制作的基本流程1.4 教学评估课堂练习:让学生编写简单的HTML和CSS代码课后作业:让学生完成一个简单的网页制作任务第二章:HTML基本标签2.1 教学目标让学生掌握HTML的基本标签及其使用方法2.2 教学内容文本标签:`<p>`、`<h1>` ~ `<h6>`、`<br>`等图片标签:`<img>`标签:`<a>`列表标签:`<ul>`、`<ol>`、`<li>`、`<dl>`、`<dt>`、`<dd>`2.3 教学方法讲授法:讲解各个标签的作用和基本属性练习法:让学生通过练习掌握各个标签的使用方法2.4 教学评估课堂练习:让学生编写含有文本、图片、和列表的HTML代码第三章:CSS样式设计3.1 教学目标让学生掌握CSS的基本语法和使用方法让学生了解常用的CSS选择器和属性3.2 教学内容CSS基本语法:选择器、属性、值、注释内联样式:`style`属性内部样式表:`<style>`标签外部样式表:`.css`文件常用的CSS选择器和属性:`id`、`class`、`tag`、`attribute`等3.3 教学方法讲授法:讲解CSS的基本语法和常用选择器、属性练习法:让学生通过练习掌握内联样式、内部样式表和外部样式表的使用方法3.4 教学评估课堂练习:让学生编写含有内联样式、内部样式表和外部样式表的HTML代码第四章:布局与设计4.1 教学目标让学生掌握HTML和CSS的布局与设计方法4.2 教学内容盒模型:`margin`、`padding`、`border`、`width`、`height`等浮动布局:`float`、`clear`等定位:`position`、`top`、`right`、`bottom`、`left`等响应式设计:媒体查询、`max-width`、`min-width`等4.3 教学方法讲授法:讲解盒模型、浮动布局、定位和响应式设计的基本概念和用法练习法:让学生通过练习掌握各种布局与设计方法4.4 教学评估课堂练习:让学生编写一个具有多种布局与设计效果的网页代码第五章:网页特效与交互5.1 教学目标让学生掌握HTML和CSS实现简单网页特效与交互的方法5.2 教学内容鼠标悬停效果:`:hover`伪类动画与过渡:`animation`、`transition`等事件处理:`onclick`、`onmouseover`、`onmouseout`等JavaScript基础:变量、函数、条件语句、循环语句等5.3 教学方法讲授法:讲解鼠标悬停效果、动画与过渡、事件处理和JavaScript基础练习法:让学生通过练习掌握各种网页特效与交互的实现方法5.4 教学评估课堂练习:让学生编写一个具有鼠标悬停效果、动画与过渡、事件处理和简单交互的网页代码第六章:表单与数据验证6.1 教学目标让学生掌握HTML表单的基本用法让学生了解CSS在表单设计中的应用让学生学会使用JavaScript进行数据验证6.2 教学内容表单标签:`<form>`、`<input>`、`<textarea>`、`<select>`等表单属性:`type`、`name`、`value`、`placeholder`等CSS在表单设计中的应用:`label`、`fieldset`、`legend`等数据验证方法:正则表达式、JavaScript函数6.3 教学方法讲授法:讲解表单标签、属性和CSS在表单设计中的应用演示法:演示数据验证的实现方法练习法:让学生通过练习掌握表单和数据验证的实现方法6.4 教学评估课堂练习:让学生编写一个具有表单和数据验证功能的网页代码第七章:多媒体与嵌入式内容让学生掌握HTML中多媒体和嵌入式内容的基本用法7.2 教学内容音频和视频标签:`<audio>`、`<video>`图片标签:`<img>`嵌入式内容:`<iframe>`、`<embed>`、`<object>`多媒体属性:`src`、`controls`、`autoplay`、`loop`等响应式多媒体:`max-width`、`height`、`srcset`等7.3 教学方法讲授法:讲解多媒体和嵌入式内容的标签和属性练习法:让学生通过练习掌握多媒体和嵌入式内容的实现方法7.4 教学评估课堂练习:让学生编写一个含有音频、视频、图片和嵌入式内容的网页代码第八章:JavaScript进阶8.1 教学目标让学生掌握JavaScript的基本语法和高级特性让学生学会使用JavaScript进行复杂交互设计8.2 教学内容基本语法:变量、函数、条件语句、循环语句等对象和数组:`document`、`window`、`Array`、`Object`等事件处理:`addEventListener`、`attachEvent`等高级特性:闭包、原型链、异步编程(Promise、async/awt)等讲授法:讲解JavaScript的基本语法和高级特性练习法:让学生通过练习掌握JavaScript编程方法8.4 教学评估课堂练习:让学生编写一个利用JavaScript实现复杂交互功能的网页代码第九章:网页优化与性能提升9.1 教学目标让学生了解网页优化的重要性让学生掌握网页优化的方法和技巧9.2 教学内容代码优化:减少代码体积、提高代码效率资源优化:图片压缩、雪碧图、CSS Sprites、CDN等性能检测工具:浏览器开发者工具、PageSpeed Insights、Lighthouse等响应式设计:媒体查询、`max-width`、`min-width`等9.3 教学方法讲授法:讲解网页优化方法和技巧实践法:让学生使用性能检测工具进行实际网页性能分析9.4 教学评估课后作业:让学生分析并优化一个实际存在的网页性能问题第十章:网页制作项目实战10.1 教学目标让学生学会将所学知识应用于实际项目培养学生独立完成网页制作的能力10.2 教学内容项目选题:选择一个实际网页制作项目项目分析:分析项目需求、功能模块、技术选型等项目实施:按照分析结果进行网页制作项目评价:评价项目的完成情况、性能、可维护性等10.3 教学方法讲授法:讲解项目选题、分析和评价的方法实践法:让学生独立完成实际项目10.4 教学评估课后作业:让学生提交完成的实际项目并进行评价重点和难点解析1. 第五章:网页特效与交互2. 第六章:表单与数据验证3. 第八章:JavaScript进阶4. 第九章:网页优化与性能提升5. 第十章:网页制作项目实战全文总结和概括:本文针对《网页制作》教案中的五个章节进行了重点和难点的解析。

快速入门学习HTML网页标记语言

快速入门学习HTML网页标记语言

快速入门学习HTML网页标记语言第一章:HTML简介HTML(HyperText Markup Language)是一种用于创建网页结构和内容的标记语言。

它使用标签来描述文本、图像和其他媒体的结构和展示方式。

HTML是构建Web页面的基础,几乎所有的网页都使用HTML来呈现内容。

第二章:HTML的基本结构HTML文档由开始标签`<html>`和结束标签`</html>`包裹,其中`<html>`标签是整个HTML文档的根元素。

在`<html>`标签内,还有`<head>`和`<body>`两个标签。

第三章:文本标签HTML提供了一系列的文本标签,用于定义和格式化文本内容。

常用的文本标签有`<h1>`到`<h6>`用于定义标题,`<p>`用于定义段落,`<a>`用于创建超链接等。

这些标签可以用于改变文本的样式、字体、颜色等。

第四章:图像标签HTML的`<img>`标签用于在网页中插入图像。

该标签包含两个重要的属性:`src`属性用于指定图像的URL,`alt`属性用于指定图像无法显示时的替代文本。

第五章:列表标签HTML提供了两种列表标签:有序列表`<ol>`和无序列表`<ul>`。

有序列表使用`<li>`标签定义每个列表项,并按照顺序进行编号。

无序列表中的列表项则使用`<li>`标签定义,并使用符号或图形进行标记。

第六章:表格标签HTML的`<table>`标签用于创建表格。

表格由行`<tr>`和单元格`<td>`组成。

通过设置表格的属性,我们可以控制表格的样式、边框、宽度等。

第七章:表单标签HTML的表单标签非常重要,用于创建用户输入的表单,例如文本框、复选框、单选按钮、下拉列表等。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

3.5.1
什么是超链接
超链接是指从一个网页指向一个目标的连接关系,这个目标可以是另一 个网页,也可以是相同网页上的不同位置,还可以是一个图片、一个电子邮 件地址、一个文件,甚至是一个应用程序。而用来超链接的对象,可以是一 段文本或者是一个图片。
3.5.2
超链接<a>标签
超链接由源地址和目标地址文件构成,当访问者单击某个超链接时,浏 览器会自动从相应的目标地址检索网页并显示在浏览器中。如果链接的对象 不是网页而是其他类型的文件,浏览器会自动调用本机上的相关程序打开访 问的文件。
最终文件:光盘\最终文件\第3章\3-5-4.html 视频:光盘\视频\第3章\3-5-4.swf
3.5.5
超链接标签中的其他属性设置
在网页文件中,默认情况下超链接在原来的浏览器窗口中打开,HTML 技术提供了target属性来控制打开的目标窗口。
本章主要向读者介绍了HTML中一些基本标签的使用方法和技巧,通过 这些基本标签的应用,可以在网页中对文字和图片进行排版和设置,从而使 网页中的文字和图片的效果更加美观。完成本章内容的学习,读者需要掌握 网页中基本标签的使用和设置方法,并能够在实际制作页面的过程中灵活运 用。
实战练习——在网页中创建链接 3.5.4 网页中的特殊超链接
超链接还可以进一步扩展网页的功能,比较常用的有发送电子邮件、空 链接和下载链接等。创建以上链接只需修改链接的href值。
实战练习——在网页中创建特殊超链接
最终文件:光盘\最终文件\第3章\3-5-3.html 视频:光盘\视频\第3章\3-5-3.swf
3.1.3
文字倾斜<i>和<em>标签
标签<i>能够使作用范围内的文字倾斜;<em>是强调标签,它的效果 也是使文字倾斜,目前比<i>标签使用更加频繁。
3.1.4
文字下画线<u>标签
<u>标签的使用和粗体以及斜体标签类似,可以使用该标签作用于需要 添加下画线的文字。
实战练习——为文字添加加粗、倾斜和下画线修饰 3.1.5 其他文字修饰标签
实战练习——设置网页文本的对齐
最终文件:光盘\最终文件\第3章\3-2-5.html 视频:光盘\视频\第3章\3-2-5.swf
列表形式在网页设计中占用比较大的比例,它的特点是显示信息非常整 齐直观,便于用户理解。在本节中将向读者介绍HTML中用于创建项目列表 、编号列表和定义列表的相关标签。
3.3.1
设计网页离不开字体的设置,恰当的字体运用能够丰富网页的内容, 美化文字的视觉效果。本节从文字的细节修饰着手,使读者轻松把握 HTML的各种字体格式的变化,制作出更加精美的网页。
3.1.1
文字样式<font>标签
<font>标签可以用来设置文字的颜色、字体和 大小,是网页设计的常用属性。可以通过<font>标 签中的face属性设置不同的字体,可以通过size属 性来设置文字的字体大小,还可以通过color属性来 设置文字的颜色。
网页中文字的排行很大程度上决定了一个网页是否美观。对于网页中的 大段文字,通常采用分段、分行和加空格等方式进行规划。本节从段落的细 节设置入手,使读者学习后能利用标签轻松自如地规划文字排版。
3.2.1
文本分段<p>标签
HTML标签中最常用的标签是段落标签<p>, 这个标签非常简单,但是却非常重要,因为这是一 个用来划分段落的标签,几乎在所有网页中都会用 到。
最终文件:光盘\最终文件\第3章\3-4-2.html 视频:光盘\视频\第3章\3-4-2.swf
超链接是网页中最重要、最根本的元素之一,是从一个网页或文件到另 一个网页或文件的链接,包括图像或多媒体文件,还可以指向电子邮件地址 或程序。在网页中创建链接,就可以把Internet中众多的网站和网页联系起 来,构成一个有机的整体。网站中的每一个网页都是通过超链接的形式关联 在一起的,如果页面之间是彼此独立的,那么这样的网站将无法正常运行。
3.2.3
标题<h1>至<h6>标签
标题是网页中不可缺少的一个元素,为了 凸显标题的重要性,标题的样式比较特殊。 HTML技术保存了一套针对标题的样式标签,按 照文字尺寸从大到小排列分别是从<h1>到<h6>。
实战练习——设置文本标题 3.2.4 水平线<hr>标签
HTML提供了修饰用的水平分割线,在很 多场合中可以轻松使用,不需要另外作图。同 时可以在HTML中为水平线添加颜色、大小、粗 细等属性。
最终文件:光盘\最终文件\第3章\3-2-3.html 视频:光盘\视频\第3章\3-2-3.swf
实战练习——在网页中插入水平线 3.2.5 文本对齐设置
段落文字在不同的时候需要不同的对齐方 式,默认的对齐方式是左对齐。<p>标签的对齐 属性为align。
最终文件:光盘\最终文件\第3章\3-2-4.html 视频:光盘\视频\第3章\3-2-4.swf
为了满足不同需求,HTML还有其他用来修饰文字的标签,比较常用 的有上标格式标签<sup>、下标格式标签<sub>和删除线标签<strike>等。
实战练习——为文字添加上标和删除线
最终文件:光盘\最终文件\第3章\3-1-4.html 视频:光盘\视频\第3章\3-1-4.swf
最终文件:光盘\最终文件\第3章\3-1-5.html 视频:光盘\视频\第3章\3-1-5.swf
最终文件:光盘\最终文件\第3章\3-3-1.html 视频:光盘\视频\第3章\3-3-1.swf
实战练习——制作编号有序列表
最终文件:光盘\最终文件\第3章\3-3-2.html 视频:光盘\视频\第3章\3-3-2.swf
3.3.3
使用<dl>标签创建定义列

列表的另外一种形式是定义列表,定义 列表形式特别,用法也特别,定义列表中每 个标签都是成对出现的,它在网页布局中的 应用也是非常广泛。 定义列表由<dl>、<dt>和<dd>3个标签 组成,<dt>和<dd>标签包含在<dl>标签内, 不同的是标签<dt></dt>定义的是标题,而标 签<dd></dd>定义的是内容。
最终文件:光盘\最终文件\第3章\3-3-3.html 视频:光盘\视频\第3章\3-3-3.swf
实战练习——制作复杂新闻列表
图像作为网页元素的组成部分,在今天的网页设计中发挥着越来越大的 作用。本节将学习如何控制图片在网页中的显示。
3.4.1
面。
图像<img>标签
有了图像文件后,就可以使用<img>标签将图像插入到网页中,美化页
使用<ul>标签创建项目列表
HTML的列表元素是一个由列表标签封闭 的结构,包含的列表项由<li></li>组成。
实战练习——制作新闻列表 3.3.2 使用<ol>标签创建编号列表
编号列表采用标签<ol></ol>,每一个列表 项被包含在<li></li>标签内,所有的列表项被包 含在<ol></ol>标签内。使用编号列表可以让列 表项按照明确的顺序排列。
实战练习——使用<font>标签设置网 页文字效果 3.1.2 文字加粗<b>和<strong>标签
最终文件:光盘\最终文件\第3章\3-1-1.html 视频:光盘\视频\第3章\3-1-1.swf
网页中对于需要强调的内容很多使用了加粗的 方法,以使文字更加醒目。可以实现加粗效果的标 签是<b>标签和<strong>标签,其中<strong>标签 被称为特别强调标签,目前比<b>标签使用更频 繁。
3.5.3
相对链接和绝对链接
相对路径最适合网站的内部链接。只要是属于同一网站,即使不在同一 个目录中,相对路径也非常的适合。 绝对路径为文件提供完整的路径,包括使用的协议(如http、ftp、rtsp 等)。一般常见的绝对路径如、ftp://202.113.234.1/等。
3.2.2
文本分行<br>标签
当文字到达浏览器的边界后将自动换行,但 是当调整浏览器的宽度时,文字换行的位置也相应 发生变化,格式就会显得混乱,因此在网页中添加 换行标签是必要的。
实战练习——为网页中的文本进行分 段和分行处理
最终文件:光盘\最终文件\第3章\3-2-2.html 视频:光盘\视频\第3章\3-2-2.swf
实战练习——在网页中插入图像 3.4.2 图文混排
当图片和文字在一起时,可以通过HTML代码设置图文混排。<img>标 签的align属性定义了图像相对于周围元素的水平和垂直对齐方式。
实战练习——制作图文介绍页面
最终文件:光盘\最终文件\第3章\3-4-1.html 视频:光盘\视频\第3章\3-4-1.swf
相关文档
最新文档