第3-2章 文字及段落_第1页
第3-2章 文字及段落_第2页
第3-2章 文字及段落_第3页
第3-2章 文字及段落_第4页
第3-2章 文字及段落_第5页
已阅读5页，还剩71页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

文字与段落主要内容对网页中的文字格式化对网页中的段落格式化添加文字文字是网页的基础部分，可以通过一些HTML标记实现对文字的格式化。在HTML文件中，添加文字内容的方式与在word、记事本等中添加文字的方式相同，在需要输入文字的地方输入即可，但是需要添加在<body>与</body>标记之间。具体内容包括浏览器中要显示的文字、空格符、特殊符号以及注释语句。添加文字<!--程序3-1--><html><head><title>在网页中添加文字</title></head><body>这是一本介绍HTML，CSS，JAVASCRIPT的专业书籍。</body></html>添加文字标题字标题字就是以几种固定的字号去显示文字。在HTML中，定义了六级标题，从一级到六级，每级标题的字体大小依次递减。基本语法：<h#align="left|center|right">标题文字</h#>标题字<!--程序3-2--><html><head><title>在网页中添加标题字</title></head><body><h1align="center">一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4align=left>四级标题</h4><h5align=center>五级标题</h5><h6align=right>六级标题</h6></body></html>标题字添加空格空格通常情况下，HTML会自动删除文字内容中的多余空格，不管文字中有多少空格，都被视做一个空格。比如：两个字之间加了10个空格，HTML会截去9个空格，只保留一个。为了在网页中增加空格，可以明确使用“

”表示空格。这种使用代码控制的方式与在文本编辑软件中通过输入空格键来添加空格的方式不同。基本语法：

添加空格<!--程序3-3--><html><head><title>在网页中添加空格</title></head><body>这是一本

介绍HTML，CSS，JAVASCRIPT  的专业书籍。</body></html>添加空格添加特殊符号特殊符号特殊符号和空格一样，也是通过在HTML文件中输入符号代码来添加。使用特殊符号可以将键盘上没有的字符输出出来。基本语法：&&©<<>>"双引号（英文）

空格C添加特殊符号<!--程序3-4--><html><head><title>在网页中添加特殊符号</title></head><body><center>版权所有©<!--加入了版权符号的符号代码--></body></html>添加特殊符号注释语句注释可以在HTML文档中添加注释，增加代码的可读性，便于以后维护和修改。访问者在浏览器中是看不见这些注释的，只有在用文本编辑器打开文档源代码时才可见。基本语法：<comment>…</comment>或<!--…-->注释语句<!--程序3-5--><html><head><title>在网页中添加添加注释</title></head><body><comment>body标记是主体内容</comment><center><pre><!--pre代表原样显示排版格式-->我们永远的家——多媒体专业！</pre><center></body></html>注释语句文字样式文字样式在网页中添加文字后，可以设置其字体、字号、颜色等属性，利用<font>标记或<basefont>标记都可以实现。提示样式建议使用css定义普通文字标记文字样式定义利用<font>可以对网页文字的字体、字号、颜色进行定义。基本语法：<fontface=""size=""color="">…</font>普通文字标记<!--程序3-6--><html><head><title>设置文字的字体、字号、颜色</title></head><body><center><fontface=“黑体”size=6color=“red”>我们是一个团体，不会丢下谁，不会落下谁。共同奋进！！</font></center></body></html>普通文字标记基底文字标记<basefont>标记在制作网页前，可以先使用<basefont>标记对整个网页文字进行一个基本的定义，主要包括字体、字号和颜色，当网页中没有另外定义文字样式时，就自动套用<basefont>定义的样式，定义将影响整个HTML页面。基本语法：<basefontface=""size=""color="">基底文字标记01：<!--程序3-7-->02：<html>03：<head>04：<title>整个网页文字的字体、字号和颜色基本定义</title>05：<basefontface="黑体"size=5color="red">06：</head>07：<body>08：<center>09：学校将于近期举办校园卡拉OK大赛<br>10：<fontsize=+3color="green">11：学校将于近期举办校园卡拉OK大赛12：</font>基底文字标记13：<br>14：<fontsize=–2>15：学校将于近期举办校园卡拉OK大赛16：</font>17：</center>18：</body>19：</html>基底文字标记粗体、斜体、下划线

基本语法：<b>…</b><i>…</i><u>…</u>粗体、斜体、下划线<!--程序3-8--><html><head><title>文字的加粗、斜体和下划线</title></head><body><center><fontcolor=“#FF0000”size=3><b>这些文字是粗体的</b></font><br><i>这些文字是斜体的</i><br><u>这些文字带有下划线</u></center></body></html>粗体、斜体、下划线删除线基本语法：<del>…</del>语法说明置于<del>标记中的文字将被加上删除线删除线<!--程序3-8--><html><head><title>给文字添加删除线</title></head><body>作者信箱由<del>junmeihao@</del>更改为hongmei@<!--添加删除线--></body></html>删除线图3-9给文字添加删除线上标、下标在数学公式中，上标和下标的使用比较广泛，比如x1，x2，y1，y2等。基本语法：<sup>…</sup><sub>…</sub>上标、下标<!--程序3-9--><html><head><title>上标、下标的实现</title></head><body><h2>解下面的代数方程式</h2>x<sup>2</sup>-3x+2=0<br>解：x<sub>1</sub>=2;x<sub>2</sub>=1<br></body></html>上标、下标设置文字标注文字标注在HTML文件中，可以在文字上方添加说明，并以缩小的字号显示。基本语法：<ruby>被说明文字<rt>文字的标注</rt><ruby>设置文字标注<!--程序3-10--><html><head><title>在文字上方标注说明</title></head><body><ruby>第二十九届奥运会在北京举行<rt>2008</rt></ruby></body></html>设置文字标注设置地址文字地址文字<address><address>标记用来表示HTML文档的特定信息，如：E-mail、地址、签名、作者、文档信息等。通常显示为斜体。基本语法：<address>…</address>设置地址文字<!--程序3-11--><html><head><title>设置地址文字</title></head><body>

给我们写信:<address>wangtao@</address></body></html>设置地址文字设置等宽文字等宽文字为了使网页中的文字显示更加整齐、美观，可以使用以下标记进行设置。基本语法：<tt>…</tt>设置等宽文字01：<!--程序3-12-->02：<html>03：<head>04：<title>设置等宽文字</title>05：</head>06：<body>07：<h2>成功源于努力去克服困难</h2>08：<p><tt>Successgrowsoutofstrugglestoovercomedifficulties.</tt></p>设置等宽文字09：<p><samp>Successgrowsoutofstrugglestoovercomedifficulties.</samp></p>10：<p><code>Successgrowsoutofstrugglestoovercomedifficulties.</code></p>11：<p><kbd>Successgrowsoutofstrugglestoovercomedifficulties.</kbd></p>12：</body>13：</html>设置等宽文字段落文字的组合就是段落，段落就是格式上统一的文本。下面介绍和段落相关的HTML标记。段落标记段落标记在文本编辑器中输入的回车和额外空格将被HTML忽略，所以要在网页中开始一个段落需要通过使用标记<p>来实现。由<p>标记所标识的文字，代表同一个段落的文字。不同段落间的间距等于连续加了两个换行符，用以区别文字的不同段落。基本语法：<p>…</p>段落标记<!--程序3-13--><html><head><title>段落</title></head><body><p>五十个不同的分子，在不同状态下进入了同一容器，这就组成了我们的家——多媒体专业。在这个容器里，我们碰撞着，摩擦着，产生了各色各样的灵感，活力与情绪。</p>段落标记<p>在不地碰撞和摩擦中，分子也不断地变化，成长着，最终可走出这个容器，勇敢地面对、挑战外面的世界。不管外面如何复杂、艰难，请大家彼此珍惜这段我们相逢相识相知的日子，在这里我们痛过笑过哭过，不论是苦的还是甜的，这都是我们年轻的见证。</p></body></html>段落标记换行标记换行标记可以使用<br>来控制段落中文字的换行显示。一般，浏览器会根据窗口的宽度自动将文本进行换行显示，如果想强制浏览器不换行显示，可以使用<nobr>标记。若希望在<nobr>标记中的文字强制换行，则可以使用<wbr>。基本语法：<br><nobr>…</nobr><wbr>…</wbr>换行标记01：<!—程序3-14-->02：<html>03：<head>04：<title>换行</title>05：</head>06：<body>07：<p>08：无换行标记：在这个容器里，我们碰撞着，摩擦着，产生了各色各样的灵感，活力与情绪。09：<br>有换行标记：<br>在这个容器里，<br>10：我们碰撞着，<br>摩擦着，<br>产生了各色各样的灵感，<br>活力与情绪。11：</p>12：<nobr>五十个不同的分子，在不同状态下进入了同一容器，这就组成了我们的家——13：媒体专业。<wbr>在这个容器里，我们碰撞着，摩擦着，产生了各色各样的灵感，活14：与情绪。</wbr></nobr>15：</body>16：</html>换行标记居中标记居中标记如果希望网页中的段落居中显示，可以采用标记<center>。该标记也可以使图片等网页元素居中显示。基本语法：<center>…</center>居中标记<!--程序3-15--><html><head><title>居中对齐标记</title></head><body><center>《关于我们》</center><center> </center><center>五十个不同的分子，在不同状态下进入了同一容器，这就组成了我们的家——多媒体专业。<!--文字内容自动居中对齐--></center><center> </center></body></html>居中标记水平分隔线水平分割线水平线可以作为段落与段落之间的分隔线，使得文档结构清晰，层次分明。基本语法：<hrwidth=""size=""color=""align="">水平分隔线01：<!--程序3-16-->02：<html>03：<head>04：<title>水平分隔线</title>05：</head>06：<body>07：<center>08：关于我们09：<hr>10：五十个不同的分子，11：<hrsize="6">12：在不同状态下进入了同一容器，13：<hrwidth="40%">水平分隔线14：这就组成了我们的家——多媒体专业。15：<hrwidth="60"align="left">16：在这个容器里，我们碰撞着，摩擦着，产生了各色各样的灵感，活力与情绪。17：<hrsize="6"width="30%"align="center"noshadecolor="red">18：</center>19：</body>20：</html>水平分隔线预格式化标记预格式化标记浏览器在显示HTML页面时候，通常会将页面中所有的额外空白和回车进行压缩，并根据窗口宽度自动换行。要想保留原始文字排版的格式，可以通过<pre>标记来实现。基本语法：<pre>…</pre>预格式化标记01：<!--程序3-17-->02：<html>03：<head>04：<title>原样显示文字标记</title>05：</head>06：<body>07：<pre>08：请记住我们是一个团体，09：10：不会丢下谁，11：12：不会落下谁。13：14：共同奋进！！15：</pre>16：</body>17：</html>预格式化标记忽略html标记忽略标记在HTML文件中，利用<xmp>标记，可以使得该标记后面的HTML标记的作用被忽略，直接显示在页面中。基本语法：<xmp>…</xmp>忽略html标记<!--程序3-19--><html><head><title>忽略HTML标记</title></head><body>

基本语法：内容<br><br>

作用：设置显示字号。

<br><br>

示例：

<br><br><xmp><h3>这是h3标记的例子</h3></xmp></body></html>忽略html标记设置段落缩进段落缩进利用段落的缩进，可以增加段落的层次效果。基本语法：<blockquote>…</blockquote>设置段落缩进01：<!--程序3-18-->02：<html>03：<head>04：<title>段落缩进</title>05：</head>06：<body>07：关于我们<br>08：<blockquote>09：<p>五十个不同的分子，在不同状态下进入了同一容器，</p><!--缩进了5个字符-->10：</blockquote>11：<blockquote><blockquote>12：<p>这就组成了我们的家——083007班。<p>13：</blockquote></blockquote>14：<!--缩进了10个字符-->15：</body>16：</html>设置段落缩进小实例本节给出一个唐诗欣赏的页面，在这个实例中综合运用本章所介绍的标记对普通文字进行格式化。小实例<!--程序3-21--><html><head><title>文字网页</title></head><body><h2align=center>唐诗欣赏</h2><hrwidth="100%"size="1"color="#00ffee"><palign="center"><b><fontsize="3">静夜思</font></b></p><palign="center"><fontsize="2">李白</font></p> <palign="center"><b>床前明月光，<br>

疑是地上霜。<br>

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论