• 第 3 章 HTML5 网页中的文本和图像


        文字和图像是网页中最主要、最常用的元素

        在互联网高速发展的今天,网站已经成为一个展示与宣传自我的通信工具(公司或个人可以通过网站介绍公司的服务与产品或介绍自己)。这些都离不开网站中的网页,而网页的内容主要是通过文字和图像来体现的

    3.1 在网页中添加文本

        在网页中添加文本的方法有很多,按照文字的类型,可以分为普通文本的添加和特殊字符文本的添加两种。

      3.1.1 普通文本的添加

        普通文本是指汉字或者在键盘上可以直接输入的字符。

        如果有现成的文本,可以使用复制、粘贴的方法,把需要的文本从其他窗口中复制过来。

      3.1.2 特殊字符文本的添加

        ……

    3.2 文本排版

      3.2.1 换行标记 <br>

      3.2.2 段落标记 <p>

      3.2.3 标题标记 <h1> ~ <h6>

    3.3 文字列表

        文字列表可以有序地编排一些信息资源,使其结构化和条理化,并以列表的样式显示出来,以便浏览者能更加快捷地获得相应的信息。

      3.3.1 建立无序列表 <ul>

         无序列表的项目排列没有顺序,只以符号作为分项标识。

         无序列表使用一对 <ul></ul> 标记其中每一个列表项使用 <li></li>

         在无序列表中,使用 <ul></ul> 标记标识这一个无序列表的开始和结束,<li> 则表示一个列表项的开始,在一个无序列表中可以包含多个列表项,并且 <li> 可以省略结束标记。

      3.3.2 建立不同类型的无序列表

         <ul type="disc">……</ul>

         <ul type="circle">……</ul>

         <ul type="square">……</ul>

      3.3.3 建立有序列表 <ol>

      3.3.4 建立不同类型的有序列表

      3.3.5 建立嵌套列表

         嵌套列表是网页中常用的元素,使用 <ul> 标签可以制作网页中的嵌套列表。—— 在 <li> 的部分使用 <ul>

      3.3.6 自定义列表

         在 HTML5 中还可以自定义列表。自定义列表的标签是 <dl> 。—— 在 <dl> 里可以定义 <dt></dt>,<dd></dd> 等标签

    3.4 网页中的图像 <img>

        图片是网页中不可缺少的元素,巧妙地在网页中使用图片,可以为网页增色不少。

        网页支持多种图片格式,并且可以对插入的图片设置宽度和高度。(网页中使用的图像可以是 GIF、JPEG、BMP、TIFF、PNG 等格式的图像文件,其中使用最广泛的主要是 GIF 和 JPEG 两种格式)

      3.4.1 在网页中插入图像

         图像可以美化网页,插入图像使用单标记 <img>

         img 标记的属性及描述如下:

            alt    定义有关图形的短描述

            src    要显示的图像的 url

            height   定义图像的高度

            width     设置图像的宽度

         在插入图片是,用户可以将其他文件夹或服务器的图片显示到网页中。(不知道相对路径相对的是不是当前的页面)

      3.4.2 设置图像的宽度和高度

         在 HTML 文档中,还可以设置插入图片的显示大小,一般是按原始尺寸显示,但也可以任意显示尺寸。

         设置图像尺寸分别用属性 width(宽度)和 height(高度)—— 当只为图片设置一个尺寸属性时,另外一个尺寸就以图片原始的长宽比例来显示。

         图片的尺寸单位可以选择百分比或数值。(百分比为相对尺寸,数值是绝对尺寸)

      3.4.3 设置图像的提示文字 —— 通过设置 alt 属性

         为图像添加提示文字可以方便搜索引擎的检索,除此之外,如果图像没有成功下载,在图像的位置上也会显示提示文字。

      3.4.4 将图片设置为网页背景

         在插入图片时,用户可以根据需要,将某些图片设置为网页的背景。(GIF 和 JPEG 文件均可用作 HTML 背景)(如果图像小于页面,图像会进行重复)

      3.4.5 排列图像

         在网页的文字中,如果插入了图片,这时就可以对图片进行排序。常用的排序方式为居中、底部对齐、顶部对齐几种。(通过 aligh 属性实现)

    3.7 疑难解惑

      疑问1:换行标记和段落标记有什么区别?

         换行标记是单标记,不能写结束标记。(段落标记是双标记,可以省略结束标记,也可以不省略)

         默认情况下,段落之间的距离和段落内部的行间距是不同的,段落间距比较大,行间距比较小。

         HTML 无法调整段落间距和行间距如果希望调整它们,就必须使用 CSS

      疑问2:无序列表 <ul> 元素的作用是什么?

         无序列表元素主要用于条理化和结构化文本信息。

         在实际开发中,无序列表在制作导航菜单时使用广泛。(导航菜单的结构一般都使用无序列表来实现

  • 相关阅读:
    jsTree展开根节点 设置用户图标
    Js图片缩放代码 鼠标滚轮放大缩小 图片向右旋转
    MySQL删除重复数据
    200道物理学难题——001 三只蜗牛
    慎用GetOpenFileName
    Windows7隐藏字体
    Windows 位图
    Windows 调色板
    C++模板特化
    使用Visual Studio制作安装包
  • 原文地址:https://www.cnblogs.com/zhangchaoran/p/8135546.html
Copyright © 2020-2023  润新知