精通HTML5+CSS3+JavaScript网页设计(视频教学版)(第2版)
上QQ阅读APP看书,第一时间看更新

2.1 添加文本

网页中的文本可以分为两大类:一类是普通文本,另一类是特殊字符文本。

2.1.1 普通文本

所谓普通文本是指汉字或者在键盘上可以输出的字符。读者可以在Dreamweaver CC代码视图的<body>标记部分直接输入,或者在设计视图下直接输入。

如果有现成的文本,可以使用复制的方法把其他窗口中需要的文本复制过来。在粘贴文本的时候,如果只希望把文字粘贴过来,而不需要粘贴文档中的格式,可以使用Dreamweaver CC的“选择性粘贴”功能。

“选择性粘贴”功能只在Dreamweaver CC的设计视图中起作用,因为在代码视图中粘贴的仅文本,不会有格式。例如,将Word文档表格中的文字复制到网页中,而不需要表格结构,其操作方法为选择【编辑】➢【选择性粘贴】选项或按下快捷键Shift+Ctrl+V,弹出【选择性粘贴】对话框,在对话框中选中【仅文本】单选按钮即可,如图2-1所示。

图2-1 【选择性粘贴】对话框

2.1.2 特殊文字符号

目前,很多行业上的信息都出现在网络上,每个行业都有自己的行业特性,如数学、物理和化学都有特殊的符号。如何在网页上显示这些特殊字符是本节将要讲述的内容。

在HTML中,特殊字符以“&”开头,以“;”结尾,中间为相关字符编码。例如,大括号和小括号被用于声明标记,因此如果在HTML代码中出现“<”和“>”符号,就不能直接输入了,需要当作特殊字符处理。在HTML中,用“<”代表符号“<”,用“>”代表符号“>”。例如,输入公式"a>b",在HTML中需要表示为“a>b”。

HTML中还有大量这样的字符,例如空格、版权等,常用特殊字符如表2-1所示。

表2-1 常用特殊字符

在编辑化学公式或物理公式时,使用特殊字符的频度非常高。如果每次输入时都去查询或者要记忆这些特殊特号的编码,工作量是相当大的,在此为读者提供以下技巧:


(1)在Dreamweaver CC的设计视图下输入字符,如输入a>b这样的表达式,可以直接输入。对于部分键盘上没有的字符可以借助“中文输入法”的软键盘。在中文输入法的软键盘上单击鼠标右键,弹出特殊类别项(如图2-2所示),选择所需类型,如选择“数学符号”,弹出数学相关符号(如图2-3所示),单击相应按钮即可输入。

图2-2 特殊符号分类

图2-3 数学符号

(2)文字与文字之间的空格如果超过一个,那么从第2个空格开始都会被忽略掉。快捷地输入空格的方法如下:将输入法切换成“中文输入法”,并置于“全角”(Shift+空格)状态,直接击键盘上的空格键即可。

(3)对于上述两种方法都无法实现的字符,可以使用Dreamweaver CC的【插入】菜单实现。选择【插入】➢HTML➢【特殊字符】菜单命令,在所需要的字符中选择,如果没有所需要的字符,就选择【其他字符】选项。

技巧提示

尽量不要使用多个“&nbsp”来表示多个空格,因为多数浏览器对空格的距离的实现是不一样的。

2.1.3 文本特殊样式

在文档中经常会出现重要文本(加粗显示)、倾斜文本、上标和下标文本等。

1.重要文本

重要文本通常以粗体显示、强调方式显示或加强调方式显示。HTML中的<b>标记、<em>标记和<strong>标记分别用来实现这三种显示方式。


【例2.1】(实例文件:ch02\2.1.html)

在IE 11.0中预览,效果如图2-4所示,实现了文本的三种显示方式。

图2-4 重要文本预览效果

2.倾斜文本

HTML中的<i>标记实现了文本的倾斜显示。放在<i></i>之间的文本将以斜体显示。


【例2.2】(实例文件:ch02\2.2.html)

在IE 11.0中预览,效果如图2-5所示,其中文字以斜体显示。

图2-5 倾斜文本预览效果

技巧提示

HTML中的重要文本和倾斜文本标记已经过时,是需要读者忘记的标记,这些标记都应该使用CSS样式来实现。随着后面学习的深入,读者会逐渐发现,即使HTML和CSS实现相同的效果,但是CSS所能实现的控制远远比HTML要细致、精确得多。

3.上标和下标文本

在HTML中用<sup>标记实现上标文字,用<sub>标记实现下标文字。<sup>和<sub>都是双标记,放在开始标记和结束标记之间的文本会分别以上标或下标形式出现。


【例2.3】(实例文件:ch02\2.3.html)

在IE 11.0中预览,效果如图2-6所示,分别实现了上标和下标文本显示。

图2-6 上标和下标预览效果