Web前端开发实例教程——HTML5 CSS3 JavaScript 第3章 编辑网页文档.pptVIP

第3章 编辑网页文档 Web前端开发实例教程 ——HTML5+CSS3+JavaScript 3.1 文字与段落排版 3.1.1 段落标签p…/p 段落标签放在段落的头部和尾部，用于定义一个段落。p…/p标签不但能使后面的文字换到下一行，还可以使两段之间多加一空行，相当于br/br/标签。段落标签的格式为： p align=left|center|right 文字 /p 【例3-1】列出包含p标签的多种属性，本例文件3-1.html在浏览器中显示的效果如图3-1所示。 3.1 文字与段落排版 3.1.2 强制换行标签br / 网页内容并不都是像段落那样，有时候没有必要用多个p标签去分割内容。如果编辑网页内容只是为了换行，而不是从新段落开始的话，可以使用br/标签。强制换行标签的格式为： 文字 br / 【例3-2】制作珠宝商城联系方式的页面。本例文件3-2.html的显示效果如图3-2所示。 3.1 文字与段落排版 3.1.3 标题标签h#…/h# 在页面中，标题是一段文字内容的核心，所以总是用加强的效果来表示。网页中的信息可以分为主要点、次要点，可以通过设置不同大小的标题，增加文章的条理性。标题文字标签的格式为： h# align=left|center|right 标题文字 /h# 【例3-3】列出HTML中的各级标题，本例文件3-3.html在浏览器中显示的效果如图3-3所示。 3.1 文字与段落排版 3.1.4 水平线标签hr / 在页面中插入一条水平标尺线（horizontal rules），可以将不同功能的文字分隔开，看起来整齐、明了。水平线标签的格式为： hr align=left|center|right size=横线粗细 width=横线长度 color=横线色彩 noshade= noshade / 【例3-4】hr/标签的基本用法，本例文件3-4.html在浏览器中显示的效果如图3-4所示。 3.1 文字与段落排版 3.1.5 缩排标签blockquote blockquote标签可定义一个块引用。blockquote与/blockquote之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进，而且有时会使用斜体。缩排标签的格式为： blockquote文本/blockquote 【例3-5】blockquote标签的基本用法，本例文件3-5.html在浏览器中显示的效果如图3-5所示。 3.1 文字与段落排版 3.1.6 珠宝商城关于我们页面 【例3-6】使用文字与段落的基本排版知识制作珠宝商城关于我们页面，本例文件3-6.html在浏览器中显示的效果如图3-6所示。 3.2 超链接 3.2.1 超链接简介 所谓的超链接（hyperlink）是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。 超链接除了可链接文本外，也可链接各种媒体，如声音、图像和动画等，通过它们可以将网站建设成一个丰富多彩的多媒体世界。 3.2 超链接 3.2.2 超链接的应用 根据超链接目标文件的不同，超链接可分为页面超链接、锚点超链接、电子邮件超接链等；根据超链接单击对象的不同，超链接可分为文字超链接、图像超链接、图像映射等。 1．锚点标签a…/a a标签的格式为： a href=URL target=打开窗口方式 热点 /a 3.2 超链接 3.2.2 超链接的应用 2．指向其他页面的链接 （1）链接到同一目录内的网页文件 a href=目标文件名.htm 热点文本 /a 其中，“目标文件名”是链接所指向的文件。 （2）链接到下一级目录中的网页文件 a href=子目录名/目标文件名.htm 热点文本 /a （3）链接到上一级目录中的网页文件 a href=../目标文件名.htm 热点文本 /a （4）链接到同级目录中的网页文件 a href=../子目录名/目标文件名.htm 热点文本 /a 3.2 超链接 3.2.2 超链接的应用 3．指向本页中的链接 要在当前页面内实现超链接，需要定义两个标签：一个为超链接标签，另一个为书签标签。 （1）超链接标签 超链接标签的格式为： a href=#记号名 热点文本 /a （2）书签标签 书签就是用a标签对文本作一个记号。如果有多个链接，对不同目标文本要设置不同的书签名。书签名在a标签的name属性中定义，格式为： a name=记号名 目标文本附近的字符串 /a 3.2 超链接 3.2.2 超链接的应用 4．指向下载文件的链接 如果链接到的文件不是HTML文件，则该文件将作为下载文件，其格式为： a