网页设计文字与段落
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<html> <head> <title>回车</title> </head> <body>
刚刚过去的2006年对博文视点的发展来说是意 义非凡的一年，<br>在市场不断变化，道路并不 平坦的一年中，博文视点能够稳住军心，坚持自 己的出版方向，逐渐成为IT出版界的旗舰级机构。 </body> </html>
《登金陵凤凰台》<br> 李白<br>
<hr> 凤凰台上凤凰游，凤去台空江自流。<br> 吴宫花草埋幽径，晋代衣冠成古丘。<br> 三山半落青天外，二水中分白鹭洲。<br> 总为浮云能蔽日，长安不见使人愁。<br> </body> </html>
3.1 HTML基本标签
◆ 网页效果
3.1.1 设置标题
2 设置基底网址<base>
<html> <head> <base href=“http://www. Broadview. com.cn”
target=“_self”> </head> <body>
2007年1月16日，电子工业出版社<A href="index">博文视点 </A>公司召开了“博文视点三周年庆典暨颁奖晚会”。 刚刚过去的2006年对博文视点的发展来说是意义非凡的一年， 在市场不断变化，道路并不平坦的一年中，博文视点能够稳住 军心，坚持自己的出版方向，逐渐成为IT出版界的旗舰级机构。
</body>
3.2.1 文字格式化
◆ 实例代码
<html> <head> <title>简单修饰文字</title> </head> <body> <b>《登金陵凤凰台》</b><br> <i>李白</i><br> <hr> <u>凤凰台上凤凰游，凤去台空江自流。</u><br> <b>吴宫花草埋幽径，晋代衣冠成古丘。</b><br> <i>三山半落青天外，二水中分白鹭洲。</i><br> <u>总为浮云能蔽日，长安不见使人愁。</u><br> </body> </html>
</body> </html>
课前复习
2 设置基底网址<base>
课前复习
3 主体内容<body>
主体内容<body>的属性有：设置页面背景bgcolor、 设置页面边距topmargin、leftmargin、rightmargin、 bottommargin和设计正文颜色text。
<body>作为HTML文件主体的标签，有且只有一个， 当需要设置多个<body>的属性时，参照2.2.2，标记属性的 语法： <标记名字 属性1 属性2 属性3 … >
课前复习
1 设置页面标题<title>
➢ 基本语法
<html> <head>
<title>与</title>之间输入的是 页面的标题， 而不是主体的内 容，每个页面有且只有一个。 此标题显示在浏览器的左上角。
<title>请在此输入标题名</title>
</head>
<body>
</body>
</html>
3.1.4 水平分割线
◆ 网页效果
3.1.5 部分标签
部分标签<div>可以将文档分割成独立的、不同的 部分。在<div>标签中定义的文本内容，实际上与没有 在<div>标签中定义的文本内容没有什么区别，但可对 <div>标签进行样式的定义，如引入align属性或使用 CSS。
◆ 基本语法
<div>内容</div>
<html> <head> <title>设置标题</title> </head> <body >
<h1 align=right>1级标题</h1> <h2 align=center>2级标题</h2> <h3>3级标题</h3> <h4>4级标题</h4> <h5>5级标题</h5> <h6>6级标题</h6> </body> </html>
第3章 文字与段落
3.1 HTML基本标签 3.2 HTML输出格式 3.3 HTML字体设置
3.1 HTML基本标签
3.1.1 设置标题 3.1.2 定义段落 3.1.3 换行标签 3.1.4 水平分割线 3.1.5 部分标签 3.1.6 注释标签
3.1 HTML基本标签
在HTML网页中添加文字
3.1.2 定义段落
◆ 网页效果
3.1.3 换行标签
在HTML文档中，无法用多个回车、空格、 〈Tab〉键来调整文档段落的格式。要用HTML的 标记来强制换行、分段。
强制换行标记<br>放在一行的末尾，可以使后 面的文字、图片、表格等显示于下一行，而又不会 在行与行之间留下空行，即强制文本换行。由于浏 览器会自动忽略原始码中空白和换行的部分，这使 <br>成为最常用的标记之一。
3.1.6 注释标签
◆ 网页效果
3.2 HTML输出格式
3.2.1 文字格式化 3.2.2 计算机输出格式 3.2.3 引文和定义
3.2.1 文字格式化
HTML中提供了很多元素用来对HTML输 出方式进行修饰，如加粗、斜体等。
标签 <b> <i> <big> <small> <sup> <sub> <u>
3.1.2 定义段落
◆ 语法说明
在HTML文件中，<p>标记是一个段落标记符号， 利用<p>标记可以对网页中的文字信息进行段落的定 义，但不能进行段落格式的定义。
段落标记<p>的属性align用来设置段落的对齐方式， 其取值可以为left、center、right或justify，分别表示 居左、居中、居右、两端对齐。缺省时默认为left。
HTML 4.01与XHTML标准中提供了6个级别的标题， 标题标签被定义在<h1>到<h6>范围内，其中<h1>为最 大标题， <h6>为最小标题。
基本语法:
<h1>内容</h1> <h2>内容</h2> <h3>内容</h3> <h4>内容</h4> <h5>内容</h5> <h6>内容</h6>
3.1.3 换行标签
◆ 基本语法
<body> 输入要显示的文字内容<br> 继续输入要显示的内容 </body>
3.1.3 换行标签
◆ 语法说明 在HTML文件中，利用<br>标记可以
插入换行符。浏览器解释时，从该处换行。 换行标记单独使用，可使页面清晰、整齐。
3.源自文库.3 换行标签
◆ 实例代码
课前复习
2 设置基底网址<base>
➢ 基本语法
<html>
href用于设置网页文件链接 的地址; target用于设置页 面显示的目标窗口。
<head>
<base href=“文件路径” target=“目标窗 口”>
</head>
<body>
</body>
</html>
课前复习
2 设置基底网址<base> ➢ 语法说明
<title>设置水平线</title> </head> <body> 宽度为60像素，高度为10像素，居左对齐 <hr width="60 " size="10" align="left" color="red"> 宽度为60%，高度为1像素，居右对齐，颜色为浅蓝色，无 阴影效果 <hr width="60%" size="1" align="right" color="#00ffee" noshade> </body> </html>
href用于设置网页文件链接的地址
target用于设置页面显示的目标窗口。
target属性值及描述：
属性值 _blank _self _parent _top
描述 在新窗口中打开被链接文档。 在被点击时的同一框架中打开被链接文档（默认）。 在父框架中打开被链接文档。 在窗口主体中打开被链接文档。
课前复习
常见的文字格式化标签
说明 加粗文字 斜体文字 加大文字 缩小文字 上标文字 下标文字 下划线
标签 <ins> <del> <s> <strike> <strong> <em>
说明 插入文字 删除文字 删除线 删除线 加强文字 强调文字
3.2.1 文字格式化
◆ <b>、<i>、<u>基本语法
<body> 普通文字的显示<br> <b>加粗的文字</b><br> <i>斜体文字</i><br> <u>添加下划线文字</u><br>
3.1.5 部分标签
<html> <head> <title>段落</title> </head> <body> <div align=center>《登金陵凤凰台》<br>李白<br></div> <hr> <p> 凤凰台上凤凰游，凤去台空江自流。 吴宫花草埋幽径，晋代衣冠成古丘。 三山半落青天外，二水中分白鹭洲。 总为浮云能蔽日，长安不见使人愁。 </p> </body> </html>
3.1.1 设置标题
默认情况下，标题为左对齐方式显示，目前大多数浏 览器支持align属性，即支持左对齐、右对齐、居中对齐 方式。
基本语法:
<hn align=“属性值”>内容</ hn >
Align的属性值：
Left：左对齐 Center：居中对齐 Right ：右对齐
3.1.1 设置标题
◆ 实例代码
课前复习
3 主体内容<body>
<html> <head> <title>第一个网页</title> <meta name=keyword content=“实验、考察”> </head> <body text="white" bgcolor=“blue“ topmargin=20
leftmargin=20 rightmargin=20 bottommargin=20 > 课堂练习 </body> </html>
3.1.1 设置标题
◆ 网页效果
3.1.2 定义段落
段落标记<P>定义一个新段落的开始。<P>标记不 但能使后面的文字换到下一行，还可以使两段之间多一空 行。由于一段的结束意味着新一段的开始，所以使用<P> 也可省略结束标记。段落标记会在段落中加上额外的空行。
◆ 基本语法
<body> <p>内容 </p> </body>
一个强制换段标记<p>可以看作是两个强制换行标 记<br>。
3.1.2 定义段落
◆ 实例代码
<html> <head> <title>段落</title> </head> <body> 《登金陵凤凰台》<br> 李白<br> <hr> <p> 凤凰台上凤凰游，凤去台空江自流。 吴宫花草埋幽径，晋代衣冠成古丘。 三山半落青天外，二水中分白鹭洲。 总为浮云能蔽日，长安不见使人愁。 </p> </body> </html>
◆ 语法说明
给代码添加注释语句时，<！-->或 <comment>可以放在HTML文件的任何地方， 都不会在网页中被显示出来。
3.1.6 注释标签
◆ 实例代码
<html> <head> <!--请在此添加注释语句!--> <title>添加注释</title> </head> <body> <!--下面是李白的诗!--> 《登金陵凤凰台》<br>李白<br> <hr> 凤凰台上凤凰游，凤去台空江自流。<br> 吴宫花草埋幽径，晋代衣冠成古丘。<br> 三山半落青天外，二水中分白鹭洲。<br> 总为浮云能蔽日，长安不见使人愁。<br> <comment>李白的诗结束</comment> </body> </html>
◆ 基本语法
<body> 请在此处添加文字！ </body>
3.1 HTML基本标签
◆ 语法说明
在网页中添加文字，只要在 <body></body>之间，需要插入文字 的地方输入文字就可以实现。
3.1 HTML基本标签
◆ 实例代码
<html> <head> <title>添加文字</title> </head> <body >
3.1.5 部分标签
3.1.6 注释标签
像很多程序语言一样，HTML文件也提供注解 功能。浏览器会忽略此标记中的文字（可以是很 多行）而不作显示。通常使用“注释”为文中的 不同部分加上说明，以方便日后阅读和修改。
注释标记的格式为： <!-- 注释内容 -->或<comment>
注释内容不局限于一行，长度也不受限制。 即结束标识符不必与开始标识符在同一行上。
3.1.6 注释标签
◆ 基本语法
<html> <head> <!--请在此添加注释语句！--> <title>添加注释<title> </head> <body> <!--请在此添加注释语句！--> <comment>此处也可以添加注释语句</comment> </body> </html>
3.1.6 注释标签
3.1.3 换行标签
◆ 网页效果
3.1.4 水平分割线
水平分割线是HTML中的基础标签，通常用 来将网页中相同的部分分割成一组，使网页层 次更加清晰。 ◆ 基本语法：
<body>
<hr>
</body>
3.1.4 水平分割线
水平分割线的属性
3.1.4 水平分割线
◆ 实例代码
<html> <head>
刚刚过去的2006年对博文视点的发展来说是意 义非凡的一年，<br>在市场不断变化，道路并不 平坦的一年中，博文视点能够稳住军心，坚持自 己的出版方向，逐渐成为IT出版界的旗舰级机构。 </body> </html>
《登金陵凤凰台》<br> 李白<br>
<hr> 凤凰台上凤凰游，凤去台空江自流。<br> 吴宫花草埋幽径，晋代衣冠成古丘。<br> 三山半落青天外，二水中分白鹭洲。<br> 总为浮云能蔽日，长安不见使人愁。<br> </body> </html>
3.1 HTML基本标签
◆ 网页效果
3.1.1 设置标题
2 设置基底网址<base>
<html> <head> <base href=“http://www. Broadview. com.cn”
target=“_self”> </head> <body>
2007年1月16日，电子工业出版社<A href="index">博文视点 </A>公司召开了“博文视点三周年庆典暨颁奖晚会”。 刚刚过去的2006年对博文视点的发展来说是意义非凡的一年， 在市场不断变化，道路并不平坦的一年中，博文视点能够稳住 军心，坚持自己的出版方向，逐渐成为IT出版界的旗舰级机构。
</body>
3.2.1 文字格式化
◆ 实例代码
<html> <head> <title>简单修饰文字</title> </head> <body> <b>《登金陵凤凰台》</b><br> <i>李白</i><br> <hr> <u>凤凰台上凤凰游，凤去台空江自流。</u><br> <b>吴宫花草埋幽径，晋代衣冠成古丘。</b><br> <i>三山半落青天外，二水中分白鹭洲。</i><br> <u>总为浮云能蔽日，长安不见使人愁。</u><br> </body> </html>
</body> </html>
课前复习
2 设置基底网址<base>
课前复习
3 主体内容<body>
主体内容<body>的属性有：设置页面背景bgcolor、 设置页面边距topmargin、leftmargin、rightmargin、 bottommargin和设计正文颜色text。
<body>作为HTML文件主体的标签，有且只有一个， 当需要设置多个<body>的属性时，参照2.2.2，标记属性的 语法： <标记名字 属性1 属性2 属性3 … >
课前复习
1 设置页面标题<title>
➢ 基本语法
<html> <head>
<title>与</title>之间输入的是 页面的标题， 而不是主体的内 容，每个页面有且只有一个。 此标题显示在浏览器的左上角。
<title>请在此输入标题名</title>
</head>
<body>
</body>
</html>
3.1.4 水平分割线
◆ 网页效果
3.1.5 部分标签
部分标签<div>可以将文档分割成独立的、不同的 部分。在<div>标签中定义的文本内容，实际上与没有 在<div>标签中定义的文本内容没有什么区别，但可对 <div>标签进行样式的定义，如引入align属性或使用 CSS。
◆ 基本语法
<div>内容</div>
<html> <head> <title>设置标题</title> </head> <body >
<h1 align=right>1级标题</h1> <h2 align=center>2级标题</h2> <h3>3级标题</h3> <h4>4级标题</h4> <h5>5级标题</h5> <h6>6级标题</h6> </body> </html>
第3章 文字与段落
3.1 HTML基本标签 3.2 HTML输出格式 3.3 HTML字体设置
3.1 HTML基本标签
3.1.1 设置标题 3.1.2 定义段落 3.1.3 换行标签 3.1.4 水平分割线 3.1.5 部分标签 3.1.6 注释标签
3.1 HTML基本标签
在HTML网页中添加文字
3.1.2 定义段落
◆ 网页效果
3.1.3 换行标签
在HTML文档中，无法用多个回车、空格、 〈Tab〉键来调整文档段落的格式。要用HTML的 标记来强制换行、分段。
强制换行标记<br>放在一行的末尾，可以使后 面的文字、图片、表格等显示于下一行，而又不会 在行与行之间留下空行，即强制文本换行。由于浏 览器会自动忽略原始码中空白和换行的部分，这使 <br>成为最常用的标记之一。
3.1.6 注释标签
◆ 网页效果
3.2 HTML输出格式
3.2.1 文字格式化 3.2.2 计算机输出格式 3.2.3 引文和定义
3.2.1 文字格式化
HTML中提供了很多元素用来对HTML输 出方式进行修饰，如加粗、斜体等。
标签 <b> <i> <big> <small> <sup> <sub> <u>
3.1.2 定义段落
◆ 语法说明
在HTML文件中，<p>标记是一个段落标记符号， 利用<p>标记可以对网页中的文字信息进行段落的定 义，但不能进行段落格式的定义。
段落标记<p>的属性align用来设置段落的对齐方式， 其取值可以为left、center、right或justify，分别表示 居左、居中、居右、两端对齐。缺省时默认为left。
HTML 4.01与XHTML标准中提供了6个级别的标题， 标题标签被定义在<h1>到<h6>范围内，其中<h1>为最 大标题， <h6>为最小标题。
基本语法:
<h1>内容</h1> <h2>内容</h2> <h3>内容</h3> <h4>内容</h4> <h5>内容</h5> <h6>内容</h6>
3.1.3 换行标签
◆ 基本语法
<body> 输入要显示的文字内容<br> 继续输入要显示的内容 </body>
3.1.3 换行标签
◆ 语法说明 在HTML文件中，利用<br>标记可以
插入换行符。浏览器解释时，从该处换行。 换行标记单独使用，可使页面清晰、整齐。
3.源自文库.3 换行标签
◆ 实例代码
课前复习
2 设置基底网址<base>
➢ 基本语法
<html>
href用于设置网页文件链接 的地址; target用于设置页 面显示的目标窗口。
<head>
<base href=“文件路径” target=“目标窗 口”>
</head>
<body>
</body>
</html>
课前复习
2 设置基底网址<base> ➢ 语法说明
<title>设置水平线</title> </head> <body> 宽度为60像素，高度为10像素，居左对齐 <hr width="60 " size="10" align="left" color="red"> 宽度为60%，高度为1像素，居右对齐，颜色为浅蓝色，无 阴影效果 <hr width="60%" size="1" align="right" color="#00ffee" noshade> </body> </html>
href用于设置网页文件链接的地址
target用于设置页面显示的目标窗口。
target属性值及描述：
属性值 _blank _self _parent _top
描述 在新窗口中打开被链接文档。 在被点击时的同一框架中打开被链接文档（默认）。 在父框架中打开被链接文档。 在窗口主体中打开被链接文档。
课前复习
常见的文字格式化标签
说明 加粗文字 斜体文字 加大文字 缩小文字 上标文字 下标文字 下划线
标签 <ins> <del> <s> <strike> <strong> <em>
说明 插入文字 删除文字 删除线 删除线 加强文字 强调文字
3.2.1 文字格式化
◆ <b>、<i>、<u>基本语法
<body> 普通文字的显示<br> <b>加粗的文字</b><br> <i>斜体文字</i><br> <u>添加下划线文字</u><br>
3.1.5 部分标签
<html> <head> <title>段落</title> </head> <body> <div align=center>《登金陵凤凰台》<br>李白<br></div> <hr> <p> 凤凰台上凤凰游，凤去台空江自流。 吴宫花草埋幽径，晋代衣冠成古丘。 三山半落青天外，二水中分白鹭洲。 总为浮云能蔽日，长安不见使人愁。 </p> </body> </html>
3.1.1 设置标题
默认情况下，标题为左对齐方式显示，目前大多数浏 览器支持align属性，即支持左对齐、右对齐、居中对齐 方式。
基本语法:
<hn align=“属性值”>内容</ hn >
Align的属性值：
Left：左对齐 Center：居中对齐 Right ：右对齐
3.1.1 设置标题
◆ 实例代码
课前复习
3 主体内容<body>
<html> <head> <title>第一个网页</title> <meta name=keyword content=“实验、考察”> </head> <body text="white" bgcolor=“blue“ topmargin=20
leftmargin=20 rightmargin=20 bottommargin=20 > 课堂练习 </body> </html>
3.1.1 设置标题
◆ 网页效果
3.1.2 定义段落
段落标记<P>定义一个新段落的开始。<P>标记不 但能使后面的文字换到下一行，还可以使两段之间多一空 行。由于一段的结束意味着新一段的开始，所以使用<P> 也可省略结束标记。段落标记会在段落中加上额外的空行。
◆ 基本语法
<body> <p>内容 </p> </body>
一个强制换段标记<p>可以看作是两个强制换行标 记<br>。
3.1.2 定义段落
◆ 实例代码
<html> <head> <title>段落</title> </head> <body> 《登金陵凤凰台》<br> 李白<br> <hr> <p> 凤凰台上凤凰游，凤去台空江自流。 吴宫花草埋幽径，晋代衣冠成古丘。 三山半落青天外，二水中分白鹭洲。 总为浮云能蔽日，长安不见使人愁。 </p> </body> </html>
◆ 语法说明
给代码添加注释语句时，<！-->或 <comment>可以放在HTML文件的任何地方， 都不会在网页中被显示出来。
3.1.6 注释标签
◆ 实例代码
<html> <head> <!--请在此添加注释语句!--> <title>添加注释</title> </head> <body> <!--下面是李白的诗!--> 《登金陵凤凰台》<br>李白<br> <hr> 凤凰台上凤凰游，凤去台空江自流。<br> 吴宫花草埋幽径，晋代衣冠成古丘。<br> 三山半落青天外，二水中分白鹭洲。<br> 总为浮云能蔽日，长安不见使人愁。<br> <comment>李白的诗结束</comment> </body> </html>
◆ 基本语法
<body> 请在此处添加文字！ </body>
3.1 HTML基本标签
◆ 语法说明
在网页中添加文字，只要在 <body></body>之间，需要插入文字 的地方输入文字就可以实现。
3.1 HTML基本标签
◆ 实例代码
<html> <head> <title>添加文字</title> </head> <body >
3.1.5 部分标签
3.1.6 注释标签
像很多程序语言一样，HTML文件也提供注解 功能。浏览器会忽略此标记中的文字（可以是很 多行）而不作显示。通常使用“注释”为文中的 不同部分加上说明，以方便日后阅读和修改。
注释标记的格式为： <!-- 注释内容 -->或<comment>
注释内容不局限于一行，长度也不受限制。 即结束标识符不必与开始标识符在同一行上。
3.1.6 注释标签
◆ 基本语法
<html> <head> <!--请在此添加注释语句！--> <title>添加注释<title> </head> <body> <!--请在此添加注释语句！--> <comment>此处也可以添加注释语句</comment> </body> </html>
3.1.6 注释标签
3.1.3 换行标签
◆ 网页效果
3.1.4 水平分割线
水平分割线是HTML中的基础标签，通常用 来将网页中相同的部分分割成一组，使网页层 次更加清晰。 ◆ 基本语法：
<body>
<hr>
</body>
3.1.4 水平分割线
水平分割线的属性
3.1.4 水平分割线
◆ 实例代码
<html> <head>