网页设计与制作第二章
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
本章内容
第一页
上一页
下一页
最后页
退出
HTML基础 文本格式标记 列表标记 多媒体元素标记 超链接标记 表格标记 表单标记 框架标记 CSS样式 案例解析
HTML基础
第一页
上一页
下一页
最后页
退出
本章的引例是利用HTML标记实现的，本节首先介绍HTML基础 知识。 HTML是Hypertext Markup Language的英文缩写，其含义为 超文本标记语言。 一、 基本概念 超文本（Hypertext）：被定义了某些特征的普通文本。 HTML标记（Markup）：用于标识页面中各部分的符号。在 HTML中每个用来作标记的符号都是一条命令，它告诉浏览器如何显 示信息。所有的标记都必须用尖括号（即小于号“<”和大于号“>”） 括起来。 HTML标记的属性：大多数标记都拥有一个属性集，通过这些 属性可以对作用的内容进行更多的控制。 HTML语言（Language）：即超文本标记语言，在HTML文档 中，以超文本格式，利用标记及其属性进行网页设计的语言，它有 自己特定的语法规则。 HTML文档：即页面，它是文本文档，其扩展名为.htm或.html。
下一页
最后页
退出
width
添加红色水平线：<hr color="#ff0000"> 添加无阴影红色实线： <hr noshade color="#ff0000"> 添加无阴影、宽度为5的红色实线： 指定线的宽度，单位为像素。 <hr noshade color="#ff0000" size=5 > 指定线的长度，单位为像素或百分比(占 添加宽度为5、长度为100的红色实线： <hr color="#ff0000" size=5 w idth=100 > 页面宽度的百分比)。
上一页
下一页
size
最后页
<font face="隶书" size=4>字体设置为隶书4号 字</font> <font face="隶书" size=4 color=red>字体设置 为隶书4号红色</font> <font face="隶书" size=4 color=red title ="字体 设置">字体设置为隶书4号红色</font>
下一页
最后页
删除线
退出
大字体 小字体
2.2 文本格式标记
字型标记和字符样式标记是用示例：
第一页
上一页
下一页
最后页
退出
<html> <head><title>字型标记的应用</title></head> <body> <h3 align=“center”>字型标记</h3> <p><b>这些字符为粗体</b><br> <i>这些字符为斜体</i><br> <u>这些字符加下划线</u><br> <b><u><i>粗体、斜体、加下划线 </i></u></b><br> 上标示例：X<sup>2</sup>Y<sup>2</sup>=9<br> 下标示例：X<sub>2</sub>=4或H<sub>2</sub>0 <br> 删除线应用示例：<s>删除</s> </body> </html>
退出
2.2 文本格式标记
第一页
2.2.2 换行标记
换行标记的作用是使该标记后面的文 本换行显示。换行标记为<br>，换行标记 没有需要设置的属性。
上一页
下一页
最后页
退出
2.2 文本格式标记
第一页
上一页
下一页
最后页
退出
2.2.3 段落标记 段落标记的作用是使该标记后面的文 本另起一段，而且下一段内容同前一段之 间要空一行显示。段落标记可以为单标记 <p>，也可以为双标记<p>…</p>。使用 双标记时，段落的内容放在<p>…</p>之 间，使用单标记时，<p>放在段落末尾。 段落标记的常用属性为align，用于设置段 落对齐方式。
2.2 文本格式标记
水平线标记使用示例：
第一页
上一页
下一页
最后页
<html><head><title>字体和水平线的设置</title></head> <body> <h3 align="center">字体标记</h3> <hr align=left size=4 width=100> <font color=red face=黑体 size=4>红色、黑体、4号字</font> <hr noshade color="red"> <font color=#ff0000 face=黑体 size=3>红色、黑体、3号字 </font> <hr> <font color=green face=楷体 size=2 title="红色、楷体、2号字 ">红色、楷体、2号字</font><br> </body></html>
2.2 文本格式标记
第一页
上一页
2.2.7 水平线标记 水平线标记的作用是在文档中插入一条水平线， 美化页面。水平线标记为<hr>，该标记为单标记。 通过设置水平线标记属性，可以修改水平线样式。 水平线标记属性如下表所示。
属性名 align 作用 指定水平线对齐方式，其值为left、right 和center，默认值为center。 color 指定线的颜色。 noshade 指定该属性，添加一条无阴影的实线。 size 示例 添加左对齐线条：<hr align="right">
2.2 文本格式标记
第一页
上一页
下一页
最后页
标题标记应用示例： <html> <head><title>标题标记应用示例</title></head> <body> <h3 align=center >这是标题实验</h3> <h1 align=left>这是一级标题左对齐</h1> <h2 align=right>这是二级标题右对齐</h2> <h3>这是三级标题</h3><h4>这是四级标题</h4> <h5>这是五级标题</h5><h6>这是六级标题</h6> </body> </html>
退出
2.2 文本格式标记
2.2.5 字型标记
第一页
上一页
下一页
最后页
退出
字型标记用于设置字型标记之间的文本样式，如加 粗、斜体、加下划线等。 加粗标记为<b>…</b>或<strong>…</strong>； 斜体标记为<i>…</i>； 下划线标记为<u>…</u>。 如果要使文本以粗体、斜体和下划线形式显示，加粗、 斜体和下划线标记要嵌套使用。 注意： ①下划线标记尽可能避免使用，以防与超级链接混淆； ②标记可以嵌套使用，但嵌套不能交叉。
退出
2.2 文本格式标记
第一页
上一页
2.2.8 预定义标记 预定义标记的作用是将标记包含的信息按输入格式显示。在 HTML文档中，如果不使用预定义标记，通过键盘输入的连续的多个 空格或回车，将被识别为一个空格。预定义标记为<PRE>…</PRE>。 预定义标记使用示例： <html><head><title>预定义标记的应用示例</title></head> <body> <h4 align="center"><pre>的作用 </h4> <pre> 窗前明月光 疑是地上霜 举头望明月 低头思故乡。 </pre> </body></html>
HTML基础
第一页
上一页
下一页
最后页
退出
使用标记或标记属性时应注意以下几点： ①属性一定要包含在标记中。 ②一个标记中可以包含多个属性，属性之间至少 用一个空格隔开。 ③属性值可以用双引号括起来，也可以省略双引 号。 ④颜色属性值的表示方法有两种：一种是使用英 文颜色单词表示，如red、blue等；另一种是使用 六位十六进制数值格式#rrggbb表示，其中rr、 gg和bb分别表示红、绿、蓝三基色的两位十六进 制数据。 ⑤多个标记可以写在同一行。
2.2 文本格式标记
2.2.4 字体标记
第一页
字体标记作用是设置标记之间文本的字体、大小、颜色等。字 体标记为<font>…</font>，该标记的常用属性及其作用如下表所 示。
字体标记的属性 face 作用 用于设置字体标记之间文本 的字体，其值为“宋体”、 “楷体”……等。 用于设置字体标记之间文本 的大小，其值为1、2、3…… 等。 用于设置字体标记之间文本 的颜色，颜色设置同body标 记的bgcolor属性。 用于设置鼠标指向字体标记 之间文本时的提示信息，如 图2-4(C)所示。 示例 <font face="隶书">字体设置为隶书</font>
网页设计与制作
——HTML语言
李京文
教学目标
第ຫໍສະໝຸດ Baidu页
上一页
下一页
最后页
退出
1．熟悉HTML标记语言的基础知识 2．熟悉HTML语法基础 3．掌握文本格式相关标记的使用 4．掌握有序列表和无序列表的设置与使用 5．掌握表格的设置及表格的使用 6．掌握表单及表单控件的使用 7．掌握超链接的类型和超链接的设置 8．熟悉图像、音乐及滚动字幕的插入与设置 9．熟悉框架的使用 10．熟练的利用标记编写页面代码
color
退出
title
2.2 文本格式标记
以下为换行标记、段落标记和字体标记应用示例：
第一页
上一页
下一页
最后页
<html> <head><title>字体标记应用示例</title></head> <body> <h3 align=“center”>字体标记</h3> <font color=“red” face=黑体 size=4>红色、黑体、4号字 </font><br> <font color=#ff0000 face=黑体 size=3>红色、黑体、3号字 </font><p> <font color=“green” face=楷体 size=2 title=“绿色、楷体、2 号字”>绿色、楷体、2号字</font><br> </body> </html>
下一页
最后页
退出
2.2 文本格式标记
第一页
2.2.9 特殊字符的插入
要使页面在没有进行预定义的情况下 显示连续的多个空格、版权符号©或注册 符号®等，在页面设计时，可以使用两种 方式来输入这些特殊符号：即使用字符实 体名称或数字表示方式。
上一页
下一页
最后页
退出
2.3 列表标记
常用的列表方式有二种：有序列表和无序列表。
HTML基础
第一页
上一页
下一页
最后页
退出
二、HTML文档的基本结构 1．HTML结构标记 HTML文档都是由HTML标记构成的， 一个基本的HTML文档通常包括以下三对顶 级标记。 (1)HTML标记<html>…</html> (2)头部标记<head>…</head> (3)主体标记<body>…</body>
2.2 文本格式标记
第一页
上一页
2.2.6 字符样式标记 字符样式标记的作用是设置上下标、删 除线等。字符样式标记如表所示。
样式 标记 <sup>…</ sup > <sub>…</ sub> <strike>…</ strike> 或<s>…</s> <big>…</ big> <small>…</ small> 示例 X2在HTML文档中表示为： “X<sup>2</ sup >” X2在HTML文档中表示为： “X<sub>2</ sub >” X在HTML文档中表示为： “<strike>X</ strike>”或表示为 “<s>X</s>” 上标 下标
第一页
2.3.1有序列表标记
上一页
下一页
最后页
退出
有序列表标记的作用是使各列表项前面显示阿拉伯 数字、大小写罗马数字或大小写字母。有序列表标记有 两部分，一部分定义有序列表，标记为<ol>…</ol>；另 一部分定义列表项，该标记可以为单标记为<li>，也可 以为双标记<li>…</li>，定义有序列表完整的语法格式 如下： <ol type=1|a|A|I|i start=n title=提示信息> <li type="1|a|A|I|i" title=提示信息>列表项1</li> …… <li type="1|a|A|I|i" title=提示信息>列表项n</li> </ol>
HTML基础
第一页
上一页
下一页
最后页
退出
2．HTML文档的基本结构 <html> <head> <title>……</title> </head> <body> …… </body> </html>
2.2 文本格式标记
第一页
上一页
下一页
最后页
退出
文本是页面上出现较多的信息，利用HTML 标记可以设置文本，以满足用户要求。 2.2.1 标题标记 标题标记的作用是设置文档的各级标题。标 题标记为<hn>…</hn>，其中n的取值是1~6， <h1>…</h1>定义一级标题，字体最大； <h6>…</h6>定义六级标题，字体最小。标题 标记的常用属性是align，用于定义标题的对齐方 式。