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

下载本文档

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

文档简介

第3章文字与段落广州松田职业学院主讲教师：杨本胜主要内容对网页中的文字格式化对网页中的段落格式化课堂任务实例效果图3.1添加文字文字是网页的基础部分，可以通过一些HTML标记实现对文字的格式化。在HTML文件中，添加文字内容的方式与在word、记事本等中添加文字的方式相同，在需要输入文字的地方输入即可，但是需要添加在<body>与</body>标记之间。具体内容包括浏览器中要显示的文字、空格符、特殊符号以及注释语句。3.1添加文字<!--程序3-1--><html><head><title>在网页中添加文字</title></head><body>床前明月光，

疑是地上霜。

举头望明月，

低头思故乡</body></html>3.1添加文字3.1标题字标题字就是以几种固定的字号去显示文字。在HTML中，定义了六级标题，从一级到六级，每级标题的字体大小依次递减。基本语法：<h#align="left|center|right">标题文字</h#>3.1标题字<!--程序3-2--><html><head><title>在网页中添加标题字</title></head><body><h1>一、我国失业统计制度存在问题的成因</h1><h2>1.1历史的原因</h2><h3>1.1.1制度历史原因</h3></body></html>3.1标题字3.2文字样式文字样式在网页中添加文字后，可以设置其字体、字号、颜色等属性，利用<font>标记或<basefont>标记都可以实现。提示样式建议使用css定义3.2.1普通文字标记文字样式定义利用<font>可以对网页文字的字体、字号、颜色进行定义。基本语法：<fontface=""size=""color="">…</font>3.2.1普通文字标记<!--程序3-6--><html><head><title>设置文字的字体、字号、颜色</title></head><body><center><fontface=“黑体”size=6color=“red”>我们是一个团体，不会丢下谁，不会落下谁。共同奋进！！</font></center></body></html>3.2.1普通文字标记3.3段落标记段落标记p<p>是HTML文档中最常见的标记，<p>用来起始一个段落。基本语法：<p>段落文字</p>3.3段落标记<!--程序3-6--><html><head><title>段落标记</title></head><body><palign="center"><b><fontsize="3">静夜思</font></b></p><palign="center"><fontsize="2">李白</font></p> </body></html>3.4水平分隔线水平分割线水平线可以作为段落与段落之间的分隔线，使得文档结构清晰，层次分明。基本语法：<hrwidth=""size=""color=""align="">水平线的宽度，可以是确定的像素值，也是窗口的百分比水平线的高度，只能是像素值3.4水平分隔线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%">3.4水平分隔线14：这就组成了我们的家——多媒体专业。15：<hrwidth="60"align="left">16：在这个容器里，我们碰撞着，摩擦着，产生了各色各样的灵感，活力与情绪。17：<hrsize="6"width="30%"align="center"noshadecolor="red">18：</center>19：</body>20：</html>3.4水平分隔线3.5添加特殊符号特殊符号特殊符号和空格一样，也是通过在HTML文件中输入符号代码来添加。使用特殊符号可以将键盘上没有的字符输出出来。基本语法：&…..©前缀字符名称后缀3.5添加特殊符号<!--程序3-4--><html><head><title>在网页中添加特殊符号</title></head><body><center>版权所有©<!--加入了版权符号的符号代码--></body></html>3.5添加特殊符号3.8添加空格空格通常情况下，HTML会自动删除文字内容中的多余空格，不管文字中有多少空格，都被视做一个空格。比如：两个字之间加了10个空格，HTML会截去9个空格，只保留一个。为了在网页中增加空格，可以明确使用“

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

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

介绍HTML，CSS，JAVASCRIPT  的专业书籍。</body></html>3.8添加空格3.9上标、下标在数学公式中，上标和下标的使用比较广泛，比如x1，x2，y1，y2等。基本语法：<sup>…</sup><sub>…</sub>3.9上标、下标<!--程序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>3.9上标、下标3.10设置地址文字地址文字<address><address>标记用来表示HTML文档的特定信息，如：E-mail、地址、签名、作者、文档信息等。通常显示为斜体。基本语法：<address>…</address>3.10设置地址文字<!--程序3-11--><html><head><title>设置地址文字</title></head><body>

给我们写信:<address>wangtao@</address></body></html>3.10设置地址文字3.10换行标记换行标记可以使用<br>来控制段落中文字的换行显示。一般，浏览器会根据窗口的宽度自动将文本进行换行显示，如果想强制浏览器不换行显示，可以使用<nobr>标记。若希望在<nobr>标记中的文字强制换行，则可以使用<wbr>。基本语法：<br><nobr>…</nobr><wbr>…</wbr>3.10换行标记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>3.10换行标记3.10居中标记居中标记如果希望网页中的段落居中显示，可以采用标记<center>。该标记也可以使图片等网页元素居中显示。基本语法：<center>…</center>3.10居中标记<!--程序3-15--><html><head><title>居中对齐标记</title></head><body><center>《关于我们》</center><center> </center><center>五十个不同的分子，在不同状态下进入了同一容器，这就组成了我们的家——多媒体专业。<!--文字内容自动居中对齐--></center><center> </center></body></html>3.10居中标记3.11小实例本节给出一个唐诗欣赏的页面，在这个实例中综合运用本章所介绍的标记对普通文字进行格式化。3.11小实例<!--程序3-21--><html><head><title>文字网页</title></head><body>3.11小实例这是写远客思乡之情的诗，诗以明白如话的语言雕琢出明静醉人的秋夜的意境。它不追求想象的新颖奇特，也摒弃了辞藻的精工华美；它以清新朴素的笔触，抒写了丰富深曲的内容。境是境，情是情，那么逼真，那么动人，百读不厌，耐人寻绎。无怪乎有人赞它是“妙绝古今”。</body></html>3.11小实例小结本章介绍了文字与段落的格式设置。主要内容包括文字内容标记、文字样式标记、文字修饰标记、段落修饰标记的使用。1.在浏览器显示的文字内容编写在<body>和</body>标记之间，内容包括普通的文字、空格符号和特殊符号以及页面的注释语句，标题字标记<h>

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

温馨提示

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

最新文档

评论

0/150

提交评论