网页设计文字与段落

网页设计与开发HTMLCSSJavaScript网页设计文字与段落全文共94页，当前为第1页。课前复习1设置页面标题<title>基本语法<html><head><title>请在此输入标题名</title></head><body></body></html><title>与</title>之间输入的是页面的标题，而不是主体的内容，每个页面有且只有一个。此标题显示在浏览器的左上角。网页设计文字与段落全文共94页，当前为第2页。课前复习2设置基底网址<base>基本语法<html><head>

<basehref=“文件路径”

target=“目标窗口”></head><body></body></html>href用于设置网页文件链接的地址;target用于设置页面显示的目标窗口。网页设计文字与段落全文共94页，当前为第3页。课前复习2设置基底网址<base>语法说明href用于设置网页文件链接的地址target用于设置页面显示的目标窗口。target属性值及描述：属性值描述_blank在新窗口中打开被链接文档。_self在被点击时的同一框架中打开被链接文档（默认）。_parent在父框架中打开被链接文档。_top在窗口主体中打开被链接文档。网页设计文字与段落全文共94页，当前为第4页。课前复习2设置基底网址<base><html><head><basehref=“http://www.Broadview.”target=“_self”>

</head><body>2007年1月16日，电子工业出版社<Ahref="index">博文视点</A>公司召开了“博文视点三周年庆典暨颁奖晚会”。

刚刚过去的2006年对博文视点的发展来说是意义非凡的一年，在市场不断变化，道路并不平坦的一年中，博文视点能够稳住军心，坚持自己的出版方向，逐渐成为IT出版界的旗舰级机构。</body></html>网页设计文字与段落全文共94页，当前为第5页。课前复习2设置基底网址<base>网页设计文字与段落全文共94页，当前为第6页。课前复习3主体内容<body>

主体内容<body>的属性有：设置页面背景bgcolor、设置页面边距topmargin、leftmargin、rightmargin、bottommargin和设计正文颜色text。

<body>作为HTML文件主体的标签，有且只有一个，当需要设置多个<body>的属性时，参照2.2.2，标记属性的语法：<标记名字属性1属性2属性3…>

网页设计文字与段落全文共94页，当前为第7页。课前复习3主体内容<body><html><head><title>第一个网页</title><metaname=keywordcontent=“实验、考察”></head><bodytext="white"bgcolor=“blue“topmargin=20leftmargin=20rightmargin=20bottommargin=20

>课堂练习</body></html>网页设计文字与段落全文共94页，当前为第8页。第3章文字与段落3.1HTML基本标签3.2HTML输出格式3.3HTML字体设置网页设计文字与段落全文共94页，当前为第9页。3.1HTML基本标签3.1.1设置标题3.1.2定义段落3.1.3换行标签3.1.4水平分割线3.1.5部分标签3.1.6注释标签网页设计文字与段落全文共94页，当前为第10页。3.1HTML基本标签在HTML网页中添加文字基本语法<body>请在此处添加文字！</body>网页设计文字与段落全文共94页，当前为第11页。3.1HTML基本标签语法说明在网页中添加文字，只要在<body></body>之间，需要插入文字的地方输入文字就可以实现。网页设计文字与段落全文共94页，当前为第12页。3.1HTML基本标签实例代码<html><head><title>添加文字</title></head><body>

《登金陵凤凰台》<br>李白<br>

<hr>凤凰台上凤凰游，凤去台空江自流。<br>吴宫花草埋幽径，晋代衣冠成古丘。<br>三山半落青天外，二水中分白鹭洲。<br>总为浮云能蔽日，长安不见使人愁。<br></body></html>网页设计文字与段落全文共94页，当前为第13页。3.1HTML基本标签网页效果网页设计文字与段落全文共94页，当前为第14页。3.1.1设置标题HTML4.01与XHTML标准中提供了6个级别的标题，标题标签被定义在<h1>到<h6>范围内，其中<h1>为最大标题，<h6>为最小标题。基本语法:<h1>内容</h1><h2>内容</h2><h3>内容</h3><h4>内容</h4><h5>内容</h5><h6>内容</h6>网页设计文字与段落全文共94页，当前为第15页。3.1.1设置标题

默认情况下，标题为左对齐方式显示，目前大多数浏览器支持align属性，即支持左对齐、右对齐、居中对齐方式。基本语法:<hnalign=“属性值”>内容</hn>Align的属性值：Left：左对齐Center：居中对齐Right：右对齐网页设计文字与段落全文共94页，当前为第16页。3.1.1设置标题实例代码<html><head><title>设置标题</title></head><body><h1align=right>1级标题</h1><h2align=center>2级标题</h2><h3>3级标题</h3><h4>4级标题</h4><h5>5级标题</h5><h6>6级标题</h6></body></html>网页设计文字与段落全文共94页，当前为第17页。3.1.1设置标题网页效果网页设计文字与段落全文共94页，当前为第18页。3.1.2

定义段落

段落标记<P>定义一个新段落的开始。<P>标记不但能使后面的文字换到下一行，还可以使两段之间多一空行。由于一段的结束意味着新一段的开始，所以使用<P>也可省略结束标记。段落标记会在段落中加上额外的空行。基本语法

<body>

<p>内容</p></body>网页设计文字与段落全文共94页，当前为第19页。3.1.2

定义段落语法说明在HTML文件中，<p>标记是一个段落标记符号，利用<p>标记可以对网页中的文字信息进行段落的定义，但不能进行段落格式的定义。段落标记<p>的属性align用来设置段落的对齐方式，其取值可以为left、center、right或justify，分别表示居左、居中、居右、两端对齐。缺省时默认为left。一个强制换段标记<p>可以看作是两个强制换行标记<br>。网页设计文字与段落全文共94页，当前为第20页。3.1.2

定义段落实例代码<html><head><title>段落</title></head><body>《登金陵凤凰台》<br>李白<br><hr>

<p>凤凰台上凤凰游，凤去台空江自流。吴宫花草埋幽径，晋代衣冠成古丘。三山半落青天外，二水中分白鹭洲。总为浮云能蔽日，长安不见使人愁。

</p></body></html>网页设计文字与段落全文共94页，当前为第21页。3.1.2

定义段落网页效果网页设计文字与段落全文共94页，当前为第22页。3.1.3

换行标签在HTML文档中，无法用多个回车、空格、〈Tab〉键来调整文档段落的格式。要用HTML的标记来强制换行、分段。强制换行标记<br>放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行，即强制文本换行。由于浏览器会自动忽略原始码中空白和换行的部分，这使<br>成为最常用的标记之一。网页设计文字与段落全文共94页，当前为第23页。3.1.3

换行标签基本语法<body>输入要显示的文字内容<br>继续输入要显示的内容</body>网页设计文字与段落全文共94页，当前为第24页。3.1.3

换行标签语法说明在HTML文件中，利用<br>标记可以插入换行符。浏览器解释时，从该处换行。换行标记单独使用，可使页面清晰、整齐。网页设计文字与段落全文共94页，当前为第25页。3.1.3

换行标签实例代码<html><head><title>回车</title></head><body>

刚刚过去的2006年对博文视点的发展来说是意义非凡的一年，<br>在市场不断变化，道路并不平坦的一年中，博文视点能够稳住军心，坚持自己的出版方向，逐渐成为IT出版界的旗舰级机构。</body></html>网页设计文字与段落全文共94页，当前为第26页。3.1.3

换行标签网页效果网页设计文字与段落全文共94页，当前为第27页。3.1.4水平分割线水平分割线是HTML中的基础标签，通常用来将网页中相同的部分分割成一组，使网页层次更加清晰。基本语法：<body>

<hr></body>网页设计文字与段落全文共94页，当前为第28页。3.1.4水平分割线水平分割线的属性网页设计文字与段落全文共94页，当前为第29页。3.1.4水平分割线<html><head><title>设置水平线</title></head><body>宽度为60像素，高度为10像素，居左对齐<hrwidth="60"size="10"align="left"color="red">宽度为60%，高度为1像素，居右对齐，颜色为浅蓝色，无阴影效果<hrwidth="60%"size="1"align="right"color="#00ffee"noshade></body></html>实例代码网页设计文字与段落全文共94页，当前为第30页。3.1.4水平分割线网页效果网页设计文字与段落全文共94页，当前为第31页。3.1.5部分标签

部分标签<div>可以将文档分割成独立的、不同的部分。在<div>标签中定义的文本内容，实际上与没有在<div>标签中定义的文本内容没有什么区别，但可对<div>标签进行样式的定义，如引入align属性或使用CSS。基本语法

<div>内容</div>网页设计文字与段落全文共94页，当前为第32页。3.1.5部分标签<html><head><title>段落</title></head><body>

<divalign=center>《登金陵凤凰台》<br>李白<br></div><hr><p>凤凰台上凤凰游，凤去台空江自流。吴宫花草埋幽径，晋代衣冠成古丘。三山半落青天外，二水中分白鹭洲。总为浮云能蔽日，长安不见使人愁。

</p></body></html>网页设计文字与段落全文共94页，当前为第33页。3.1.5部分标签网页设计文字与段落全文共94页，当前为第34页。3.1.6注释标签

像很多程序语言一样，HTML文件也提供注解功能。浏览器会忽略此标记中的文字（可以是很多行）而不作显示。通常使用“注释”为文中的不同部分加上说明，以方便日后阅读和修改。

注释标记的格式为：

<!--注释内容-->或<comment>

注释内容不局限于一行，长度也不受限制。即结束标识符不必与开始标识符在同一行上。网页设计文字与段落全文共94页，当前为第35页。3.1.6注释标签基本语法<html><head>

<!--请在此添加注释语句！--><title>添加注释<title></head><body><!--请在此添加注释语句！--><comment>此处也可以添加注释语句</comment></body></html>网页设计文字与段落全文共94页，当前为第36页。3.1.6注释标签语法说明给代码添加注释语句时，<！-->或<comment>可以放在HTML文件的任何地方，都不会在网页中被显示出来。网页设计文字与段落全文共94页，当前为第37页。3.1.6注释标签实例代码<html><head><!--请在此添加注释语句!--><title>添加注释</title></head><body><!--下面是李白的诗!-->《登金陵凤凰台》<br>李白<br><hr>凤凰台上凤凰游，凤去台空江自流。<br>吴宫花草埋幽径，晋代衣冠成古丘。<br>三山半落青天外，二水中分白鹭洲。<br>总为浮云能蔽日，长安不见使人愁。<br><comment>李白的诗结束</comment></body></html>网页设计文字与段落全文共94页，当前为第38页。3.1.6注释标签网页效果网页设计文字与段落全文共94页，当前为第39页。3.2HTML输出格式3.2.1文字格式化3.2.2计算机输出格式3.2.3引文和定义网页设计文字与段落全文共94页，当前为第40页。3.2.1文字格式化HTML中提供了很多元素用来对HTML输出方式进行修饰，如加粗、斜体等。标签说明标签说明<b>

加粗文字

<ins>

插入文字

<i>

斜体文字

<del>删除文字

<big>

加大文字

<s>

删除线

<small>

缩小文字

<strike>

删除线

<sup>

上标文字

<strong>

加强文字

<sub>

下标文字

<em>

强调文字

<u>

下划线

常见的文字格式化标签网页设计文字与段落全文共94页，当前为第41页。3.2.1文字格式化<b>、<i>、<u>基本语法<body>

普通文字的显示<br>

<b>加粗的文字</b><br>

<i>斜体文字</i><br>

<u>添加下划线文字</u><br></body>网页设计文字与段落全文共94页，当前为第42页。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>网页设计文字与段落全文共94页，当前为第43页。3.2.1文字格式化网页效果网页设计文字与段落全文共94页，当前为第44页。3.2.1文字格式化<big>、<small>基本语法<body><big>加大的文字</big>

<small>缩小的文字</small></body>网页设计文字与段落全文共94页，当前为第45页。3.2.1文字格式化<big>、<small>语法说明1、浏览器将<big>和</big>之间的字符或文字显示为比周围字符或文字大一号的字体，若字符或文字已经为最大号字体（7号字体）时，<big>标签不起作用。2、浏览器将<small>和</small>之间的字符或文字显示为比周围字符或文字缩小一号的字体，若字符或文字已经为最小号字体（1号字体）时，<small>标签不起作用。网页设计文字与段落全文共94页，当前为第46页。3.2.1文字格式化实例代码<html><head><title>添加文字</title></head><body>《登金陵凤凰台》<br>李白<br><hr><big>凤凰台上凤凰游，凤去台空江自流。</big><br>吴宫花草埋幽径，晋代衣冠成古丘。<br><small>三山半落青天外，二水中分白鹭洲。</small><br>总为浮云能蔽日，长安不见使人愁。<br></body></html>网页设计文字与段落全文共94页，当前为第47页。3.2.1文字格式化网页效果网页设计文字与段落全文共94页，当前为第48页。3.2.1文字格式化<sup>、<sub>基本语法<body>

^上标内容<br>

_下标内容<br></body>网页设计文字与段落全文共94页，当前为第49页。3.2.1文字格式化语法说明在HTML文件中，成对的标记可以表示上标，利用成对的标记表示下标。网页设计文字与段落全文共94页，当前为第50页。实例代码3.2.1文字格式化<html><head><title>确定文字上下标</title></head><body>

解下面方程：<br>x²-3x+2=0<br>

解：x₁=1;x₂=1<br></body></html>网页设计文字与段落全文共94页，当前为第51页。网页效果3.2.1文字格式化网页设计文字与段落全文共94页，当前为第52页。3.2.1文字格式化<strike>、<s>、<del>基本语法<body>

<strike>需添加删除线的文字</strike><s>需添加删除线的文字</s><del>需添加删除线的文字</del></body>网页设计文字与段落全文共94页，当前为第53页。3.2.1文字格式化语法说明<strike>标签用来标记删除字符或文字，其作用和<s>标签相同。而在HTML4.01中不推荐使用<strike>、<s>标签；XHTML1.0严密型DTD不支持<strike>、<s>标签，而使用<del>标签代替。网页设计文字与段落全文共94页，当前为第54页。3.2.1文字格式化<html><head><title>添加删除线</title></head><body>《登金陵凤凰台》<br>李白<br><hr>凤凰台上凤凰游，凤去台空江自流。<br><strike>吴宫花草埋幽径，晋代衣冠成古丘。</strike><br><s>三山半落青天外，二水中分白鹭洲。</s><br><del>总为浮云能蔽日，长安不见使人愁。</del><br></body></html>网页设计文字与段落全文共94页，当前为第55页。3.2.1文字格式化网页效果网页设计文字与段落全文共94页，当前为第56页。3.2.1文字格式化<strong>、<em>、<ins>基本语法<body>

<strong>需加强的文字</strong>

<em>需强调的文字</em><ins>需插入的文字</ins></body>网页设计文字与段落全文共94页，当前为第57页。3.2.1文字格式化<strong>、<em>、<ins>语法说明1、<em>强调在该标签中包含的字符或文字，样式效果类似于<i>标签。

2、<strong>标签设置的字符或文字的效果与<b>标签类似，但<strong>和<em>都是用来强调文本。但<strong>比<em>强调程度更高一点。3、<ins>标签与<del>标签相对应，用来在文档主体内容中的指定位置插入字符或文字。网页设计文字与段落全文共94页，当前为第58页。3.2.2计算机输出格式常见的计算机输出格式标签标签说明标签说明<code>

计算机代码

<samp>

计算机代码

<kbd>

键盘字符

<var>变量

<tt>

电报文字或单一间隙文字

<pre>

预格式化文本网页设计文字与段落全文共94页，当前为第59页。3.2.2计算机输出格式<code>、<kdb>、<samp>、<tt>、<var>标签基本语法：<body><code>计算机代码格式</code><kdb>键盘字符格式</kdb><var>变量格式</var><tt>电报文字效果</tt><samp>计算机代码格式</samp></body>网页设计文字与段落全文共94页，当前为第60页。3.2.2计算机输出格式实例代码<html><head><title>设置等宽文字</title></head><body><code>thisisacat!</code><br><kdb>thisisaduck!</kdb><br><var>thisisachick!</var><br><tt>thisisadog!</tt><br><samp>thisisahen!</samp><br></body></html>网页设计文字与段落全文共94页，当前为第61页。3.2.2计算机输出格式网页效果网页设计文字与段落全文共94页，当前为第62页。3.2.2计算机输出格式

预格式化标签<pre>可以使浏览器按照预先设置好的格式的显示文本。<pre>基本语法<body>

<pre>预格式化内容</pre></body>网页设计文字与段落全文共94页，当前为第63页。3.2.2计算机输出格式语法说明在HTML文件中，利用<pre>标记不仅可以定义网页文字中的段落，还可以对段落格式进行定义，文本按照已格式化好的样式进行显示。网页设计文字与段落全文共94页，当前为第64页。3.2.2计算机输出格式实例代码<html><head><title>预格式化</title></head><body>

<pre>

登鹳鹊楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。

</pre></body></html>网页设计文字与段落全文共94页，当前为第65页。3.2.2计算机输出格式网页效果网页设计文字与段落全文共94页，当前为第66页。3.2.3引文和定义常见的引文和定义标签标签说明标签说明<abbr>

定义英文缩写

<address>

定义地址<acronym>

定义中文缩写

<bdo>定义文字顺序<blockquote>

定义缩进

<dfn>

定义的期限<q>定义短篇引用的开始<cite>定义引证网页设计文字与段落全文共94页，当前为第67页。3.2.3引文和定义

<abbr>标签用来显示一个词组或单词的缩写，<acronym>标签用来显示一个中文词组的缩写字头。<abbr>、<acronym>基本语法<body><abbrtitle=“英文全称”>缩写内容</abbr><acronymtitle=“中文全称”>缩写内容</acronym></body>网页设计文字与段落全文共94页，当前为第68页。3.2.3引文和定义语法说明<abbr>标签与<acronym>标签可以显示缩写词组的缩写词，通过title属性定义一个完整的词组，当鼠标停留在缩写内容上时，将显示title属性定义的完整的词组网页设计文字与段落全文共94页，当前为第69页。3.2.3引文和定义实例代码<html><head><title>添加缩写</title></head><body><abbrtitle="BritishBroadcastingCorpration">BBC</abbr><br><acronymtitle="中华人民共和国">中国</acronym></body></html>网页设计文字与段落全文共94页，当前为第70页。3.2.3引文和定义网页效果网页设计文字与段落全文共94页，当前为第71页。3.2.3引文和定义<blockquote>标签定义了长文字的引用，通常是一个或几个段落一起引用，浏览器通常以两段缩进的方式显示这些文本内容。HTML标准对文本块的长度没有限制，若文本块过长，通常与<q>标签配合使用。<q>标签用来定义短引用，一些浏览器还不支持<q>标签。<blockquote>、<q>基本语法<body>

<blockquote>需要缩进的文本块</blockquote>

<q>需要缩进的文本块</q></body>网页设计文字与段落全文共94页，当前为第72页。3.2.3引文和定义<html><head><title>设置段落缩进</title></head><body>《登金陵凤凰台》<br>李白<br><hr><blockquote>凤凰台上凤凰游，凤去台空江自流。</blockquote>吴宫花草埋幽径，晋代衣冠成古丘。<br><blockquote>三山半落青天外，二水中分白鹭洲。</blockquote>总为浮云能蔽日，长安不见使人愁。</body></html>网页设计文字与段落全文共94页，当前为第73页。3.2.3引文和定义网页效果网页设计文字与段落全文共94页，当前为第74页。3.2.3引文和定义

<cite>标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。引用的文本将以斜体显示。

基本语法

<cite>这里面显示引文</cite>

网页设计文字与段落全文共94页，当前为第75页。3.2.3引文和定义<blockquote>的cite属性可以用来标识所引用的文字来源于哪个文档。基本语法：<body>

<blockquotecite=“url”>文本块</blockquote></body>网页设计文字与段落全文共94页，当前为第76页。3.2.3引文和定义<html><head><title>设置段落缩进</title></head><body>《登金陵凤凰台》<br>李白<br><hr><blockquotecite="">凤凰台上凤凰游，凤去台空江自流。</blockquote>吴宫花草埋幽径，晋代衣冠成古丘。<br>三山半落青天外，二水中分白鹭洲。<br>总为浮云能蔽日，长安不见使人愁。</body></html>网页设计文字与段落全文共94页，当前为第77页。3.2.3引文和定义

<address>标签用来标识地址、签名或文档的作者等信息，与其他文本区分开来。当使用<address>标签时，定义的地址信息以斜体样式进行显示。<address>基本语法<body>

<address>地址信息</address></body>网页设计文字与段落全文共94页，当前为第78页。3.2.3引文和定义语法说明在HTML文件中，利用成对<address></address>标记就可以将网页需要显示的地址文字突出显示在页面的左下角。网页设计文字与段落全文共94页，当前为第79页。3.2.3引文和定义实例代码<html><head><title>设置地址文字</title></head><body>

书中有不恰当的地方，请您及时与我们联系：<br>

<address>电子工业出版社</address><br>

<address>E-mail:market@</address><br></body></html>网页设计文字与段落全文共94页，当前为第80页。3.2.3引文和定义网页效果网页设计文字与段落全文共94页，当前为第81页。3.2.3引文和定义

<bdo>标签用来定义文字显示的顺序，通过dir属性来实现改变文字的顺序显示，该属性取值为“rtl”与“ltl”。默认的文字显示顺序是从左到右，即“ltl”。<bdo>基本语法<body>

<bdodir=“”>内容</bdo></body>网页设计文字与段落全文共94页，当前为第82页。3.2.3引文和定义<html><head><title>设置文字显示顺序</title></head><body><p>如果您的浏览器支持bi-directionaloverride(bdo)，下一行会从右向左输出(rtl)；</p><bdodir="rtl">HereissomeHebrewtext</bdo></body></html>实例代码网页设计文字与段落全文共94页，当前为第83页。3.2.3引文和定义网页效果网页设计文字与段落全文共94页，当前为第84页。3.3HTML字体设置3.3.1设置字体大小3.3.2设置字体颜色3.3.3设置字体样式网页设计文字与段落全文共94页，当前为第85页。3.3HTML字体设置字体标签<font>

在网页中为了增强页面的层次，其中的文字可以用不同的字体、字号、颜色。字体标签<font>用来设定文字的字体、字号和颜色。基本语法<body>

<fontface=“”size=“”color=“”></font></body>网页设计文字与段落全文共94页，当前为第86页。3.3.1设置字体大小1、绝对字体大小size属性使用数字来设置文字的绝对字体大小。数字的取值范围从1～7，size取1时最小，取7时最大。例如<fontsize=3>2、相对