《《html文字与段落》PPT课件.ppt》由会员分享，可在线阅读，更多相关《《html文字与段落》PPT课件.ppt（74页珍藏版）》请在金锄头文库上搜索。
1、Company nameWEB编程基础编程基础第第3章章 文字与段落文字与段落清华大学出版社清华大学出版社主要内容对网页中的文字格式化对网页中的文字格式化对网页中的段落格式化对网页中的段落格式化3.1.1添加文字l文字是网页的基础部分，可以通过一些HTML标记实现对文字的格式化。在HTML文件中，添加文字内容的方式与在word、记事本等中添加文字的方式相同，在需要输入文字的地方输入即可，但是需要添加在与标记之间。具体内容包括浏览器中要显示的文字、空格符、特殊符号以及注释语句。3.1.1添加文字在网页中添加文字在网页中添加文字这是一本介绍这是一本介绍HTML，CSS，JAVASCRIPT的专业书
2、籍。的专业书籍。 3.1.1添加文字3.1.2标题字l标题字，就是以几种固定的字号去显示文字。在HTML中，定义了六级标题，从一级到六级，每级标题的字体大小依次递减。 基本语法： 标题文字3.1.2标题字在网页中添加标题字在网页中添加标题字一级标题一级标题二级标题二级标题三级标题三级标题四级标题四级标题五级标题五级标题六级标题六级标题 3.1.2标题字3.1.3添加空格l通常情况下，HTML会自动删除文字内容中的多余空格，不管文字中有多少空格，都被视做一个空格。比如：两个字之间加了10个空格，HTML会截去9个空格，只保留一个。为了在网页中增加空格，可以明确使用“ ”表示空格。这种使
3、用代码控制的方式与在文本编辑软件中通过输入空格键来添加空格的方式不同。 基本语法： 3.1.3添加空格在网页中添加空格在网页中添加空格这是一本这是一本 介绍介绍HTML，CSS，JAVASCRIPT 的专业书籍。的专业书籍。 3.1.3添加空格3.1.4添加特殊符号l特殊符号和空格一样，也是通过在HTML文件中输入符号代码来添加。使用特殊符号可以将键盘上没有的字符输出出来。 基本语法： &.© 3.1.4添加特殊符号在网页中添加特殊符号在网页中添加特殊符号版权所有版权所有© 3.1.4添加特殊符号3.1.5注释
4、语句l可以在HTML文档中添加注释，增加代码的可读性，便于以后维护和修改。访问者在浏览器中是看不见这些注释的，只有在用文本编辑器打开文档源代码时才可见。 基本语法： 或 3.1.5注释语句llll在网页中添加添加注释在网页中添加添加注释llbody标记是主体内容标记是主体内容lll我们永远的家我们永远的家l多媒体专业！多媒体专业！llll 3.1.5注释语句3.2文字样式文字样式l在网页中添加文字后，可以设置其字体、字号、颜色等属性，利用标记或标记都可以实现。3.2.1普通文字标记l利用可以对网页文字的字体、字号、颜色进行定义。 基本语法： 3.2.1普通文字标记设置文字的字体、字号、颜色设置
5、文字的字体、字号、颜色我们是一个团体，我们是一个团体，不会丢下谁，不会落下谁。共同奋进！不会丢下谁，不会落下谁。共同奋进！ 3.2.1普通文字标记3.2.2基底文字标记l在制作网页前，可以先使用标记对整个网页文字进行一个基本的定义，主要包括字体、字号和颜色，当网页中没有另外定义文字样式时，就自动套用定义的样式，定义将影响整个HTML页面。 基本语法： 3.2.2基底文字标记01：02：03：04： 整个网页文字的字体、字号和颜色基本整个网页文字的字体、字号和颜色基本定义定义05： 06：07：08： 09： 学校将于近期举办校园卡拉学校将于近期举办校园卡拉OK大赛大赛10： 11： 学校将于近
6、期举办校园卡拉学校将于近期举办校园卡拉OK大赛大赛12： 3.2.2基底文字标记13： 14： 15： 学校将于近期举办校园卡拉学校将于近期举办校园卡拉OK大赛大赛16： 17： 18：19： 3.2.2基底文字标记3.3.1粗体、斜体、下划线l 基本语法： 3.3.1粗体、斜体、下划线文字的加粗、斜体和下划线文字的加粗、斜体和下划线这些文字是粗体这些文字是粗体的的这些文字是斜体的这些文字是斜体的 这些文字带有下划线这些文字带有下划线 3.3.1粗体、斜体、下划线3.3.2删除线l基本语法： 3.3.2删除线给文字添加删除线给文字添加删除线作者信箱由作者信箱由更改更改为为 3.3.2删除线图3
7、-9给文字添加删除线3.3.3上标、下标l在数学公式中，上标和下标的使用比较广泛，比如x1，x2，y1，y2等。 基本语法： 3.3.3上标、下标上标、下标的实现上标、下标的实现解下面的代数方程式解下面的代数方程式x2-3x+2=0解：解：x1=2; x2=13.3.3上标、下标3.3.4设置文字标注l在HTML文件中，可以在文字上方添加说明，并以缩小的字号显示。 基本语法： 被说明文字 文字的标注 3.3.4设置文字标注在文字上方标注说明在文字上方标注说明第二十九届奥运会在北京举行第二十九届奥运会在北京举行2008 3.3.4设置文字标注3.3.5设置地址文字l标记用来表示HTML文档的特定
8、信息，如：E-mail、地址、签名、作者、文档信息等。 基本语法： 3.3.5设置地址文字设置地址文字设置地址文字 给我们写信给我们写信: 3.3.5设置地址文字3.3.6设置等宽文字l为了使网页中的文字显示更加整齐、美观，可以使用以下标记进行设置。 基本语法： 3.3.6设置等宽文字01：02：03：04： 设置等宽文字设置等宽文字05：06：07： 成功源于努力去克服困难成功源于努力去克服困难08： Success grows out of struggles to overcome difficulties.3.3.6设置等宽文字09： Success grows out of stru
9、ggles to overcome difficulties.10： Success grows out of struggles to overcome difficulties.11： Success grows out of struggles to overcome difficulties.12：13： 3.3.6设置等宽文字3.4段落段落l文字的组合就是段落，段落就是格式上统一的文本。下面介绍和段落相关的HTML标记。3.4.1段落标记l在文本编辑器中输入的回车和额外空格将被HTML忽略，所以要在网页中开始一个段落需要通过使用标记来实现。由标记所标识的文字，代表同一个段落的文字。不
10、同段落间的间距等于连续加了两个换行符，用以区别文字的不同段落。 基本语法： 3.4.1段落标记段落段落五十个不同的分子，在不同状态下进入了同一容器，五十个不同的分子，在不同状态下进入了同一容器，这就组成了我们的家这就组成了我们的家多媒体专业。在这个容器里，多媒体专业。在这个容器里，我们碰撞着，摩擦着，产生了各色各样的灵感，活力与我们碰撞着，摩擦着，产生了各色各样的灵感，活力与情绪。情绪。3.4.1段落标记 在不地碰撞和摩擦中，分子也不断地变化，成长着，在不地碰撞和摩擦中，分子也不断地变化，成长着，最终可走出这个容器，勇敢地面对、挑战外面的世界。最终可走出这个容器，勇敢地面对、挑战外面的世界。不
11、管外面如何复杂、艰难，请大家彼此珍惜这段我们相逢不管外面如何复杂、艰难，请大家彼此珍惜这段我们相逢相识相知的日子，在这里我们痛过笑过哭过，不论是苦的相识相知的日子，在这里我们痛过笑过哭过，不论是苦的还是甜的，这都是我们年轻的见证。还是甜的，这都是我们年轻的见证。 3.4.1段落标记3.4.2换行标记l可以使用来控制段落中文字的换行显示。一般，浏览器会根据窗口的宽度自动将文本进行换行显示，如果想强制浏览器不换行显示，可以使用标记。若希望在标记中的文字强制换行，则可以使用。 基本语法： 3.4.2换行标记01：02：03：04： 换行换行05：06：07：08：无换行标记：在这个容器里，我们碰撞着
12、，摩擦着，产生了各色各样的灵感，活力与情绪。：无换行标记：在这个容器里，我们碰撞着，摩擦着，产生了各色各样的灵感，活力与情绪。09：有换行标记：有换行标记：在这个容器里，在这个容器里，10：我们碰撞着，：我们碰撞着，摩擦着，摩擦着，产生了各色各样的灵感，产生了各色各样的灵感，活力与情绪。活力与情绪。11：12：五十个不同的分子，在不同状态下进入了同一容器，这就组成了我们的家五十个不同的分子，在不同状态下进入了同一容器，这就组成了我们的家13：媒体专业。：媒体专业。在这个容器里，我们碰撞着，摩擦着，产生了各色各样的灵感，活在这个容器里，我们碰撞着，摩擦着，产生了各色各样的灵感，活14：与情绪。：
13、与情绪。15：16： 3.4.2换行标记3.4.3居中标记l如果希望网页中的段落居中显示，可以采用标记。该标记也可以使图片等网页元素居中显示。 基本语法： 3.4.3居中标记居中对齐标记居中对齐标记关于我们关于我们 五十个不同的分子，在不同状态下进入了同一容器，这就组五十个不同的分子，在不同状态下进入了同一容器，这就组成了我们的家成了我们的家多媒体专业。多媒体专业。 3.4.3居中标记3.4.4水平分隔线l水平线可以作为段落与段落之间的分隔线，使得文档结构清晰，层次分明。 基本语法： 3.4.4水平分隔线01：02：03：04： 水平分隔线水平分隔线05：06：07：0
14、8：关于我们：关于我们09：10：五十个不同的分子，：五十个不同的分子，11：12：在不同状态下进入了同一容器，：在不同状态下进入了同一容器，13：3.4.4水平分隔线14：这就组成了我们的家：这就组成了我们的家多媒体专业。多媒体专业。15：16：在这个容器里，我们碰撞着，摩擦着，产生了各色各样的灵感，活力与情绪。：在这个容器里，我们碰撞着，摩擦着，产生了各色各样的灵感，活力与情绪。17：18：19：20： 3.4.4水平分隔线3.4.5预格式化标记l浏览器在显示HTML页面时候，通常会将页面中所有的额外空白和回车进行压缩，并根据窗口宽度自动换行。要想保留原始文字排版的格式，可以通过标记来实现
15、。 基本语法： 3.4.5预格式化标记01：02：03：04： 原样显示文字标记原样显示文字标记05：06：07：08： 请记住我们是一个团体，请记住我们是一个团体，09： 10： 不会丢下谁，不会丢下谁，11：12： 不会落下谁。不会落下谁。13： 14： 共同奋进！共同奋进！15：16：17： 3.4.5预格式化标记3.4.6忽略html标记l在HTML文件中，利用标记，可以使得该标记后面的HTML标记的作用被忽略，直接显示在页面中。 基本语法： 3.4.6忽略html标记忽略忽略HTML标记标记 基本语法：基本语法：内容内容 作用：设置显示字号。作用：设置显示字号。 示例：示例： 这是这
16、是h3标记的例子标记的例子 3.4.6忽略html标记3.4.7设置段落缩进l利用段落的缩进，可以增加段落的层次效果。 基本语法： 3.4.7设置段落缩进01：02：03：04：段落缩进段落缩进05：06：07： 关于我们关于我们08： 09： 五十个不同的分子，在不同状态下进入了同一容器，五十个不同的分子，在不同状态下进入了同一容器，10： 11： 12： 这就组成了我们的家这就组成了我们的家083007班。班。13： 14： 15：16：3.4.7设置段落缩进3.5小实例小实例l本节给出一个唐诗欣赏的页面，在这个实例中综合运用本章所介绍的标记对普通文字进行格式化。 3.5小实例小实例文字网
17、页文字网页唐诗欣赏唐诗欣赏 静夜思静夜思李白李白 床前明月光，床前明月光， 疑是地上霜。疑是地上霜。 举头望明月，举头望明月， 低头思故乡。低头思故乡。 【简析简析】3.5小实例小实例 这是写远客思乡之情的诗，诗以明白这是写远客思乡之情的诗，诗以明白如话的语言雕琢出明静醉人的秋夜的意境。它不追求想象的新颖奇特，也如话的语言雕琢出明静醉人的秋夜的意境。它不追求想象的新颖奇特，也摒弃了辞藻的精工华美；摒弃了辞藻的精工华美；它以清新朴素的笔触，抒写了丰富深曲的它以清新朴素的笔触，抒写了丰富深曲的内容。境是境，情是情，那么逼真，那么动人，百读
18、不厌，耐人寻绎。内容。境是境，情是情，那么逼真，那么动人，百读不厌，耐人寻绎。无怪乎有人赞它是无怪乎有人赞它是“妙绝古今妙绝古今”。版权版权©:版权所有，违者必究版权所有，违者必究E-mail: 3.5小实例小实例小结小结 本章介绍了文字与段落的格式设置。主要内容包括文字内 容标记、文字样式标记、文字修饰标记、段落修饰标记的 使用。1. 在浏览器显示的文字内容编写在和标 记之间，内容包括普通的文字、空格符号和特殊符号以及 页面的注释语句，标题字标记在HTML中，定义了六 级标题；2. 文字修饰标记可实现网页文字的斜体、加粗、上标、下标、大小字号、下划线、删除线、等宽、地址等设置； 3. 段落格式设置可实现段落对齐方式、换行、预格式化、水 平线设置、换行等设置。Company nameWEB编程基础编程基础
