首页 > 其他分享 >第二章 网页制作的排版方法

第二章 网页制作的排版方法

时间:2024-09-17 18:48:36浏览次数:3  
标签:第二章 网页 标签 语法 超链接 图像 文本 排版

2.1        文字与段落排版

2.1.1        段落标签

段落标签<p>是HTML格式中特有的段落元素,在HTML格式里不需要在意文章每行的宽度。
语法为:        <p align="left | center | right">文字<p>
属性align:        设置段落文字在网页上的对齐方式,包括left左对齐 ,center居中,right右对齐
默认为left。

2.1.2        标题标签

标题使用<h1>至<h6>标签进行定义,<h1>定义最大的标题,<h6>定义最小的标题,HTML会自动在标题前后添加一个额外的换行。
格式为:        <h #align=" left | center | right">标题文字</h#>
属性align:        设置标题在页面中的对齐方式,包括left左对齐 ,center居中,right右对齐
默认为left。

2.1.3        换行标签

<br/>标签会打断HTML文档中正常段落的行间距和换行。<br/>放在任意一行都会是该行换行,如果放在一行的末尾,可以后面的文字,图像,表格等显示于下一行。
格式为:        文字<br/>

2.1.4        水平线标签

水平线可以作为段落与段落之间的分隔线,使文档结构清晰,层次分明。当浏览器解释到HTML 文档中的<h >标签时,会在此处换行,并加入一条水平线段。
水平线标签的格式为:       <hr align = " left l center l right" size ="横线粗细" width ="横线长度" color="横线色彩"  noshade="noshade"/>
属性size:设定线条粗细,以像素为单位,默认值为2。
属性width:设定线段长度,可以是绝对值(以像素为单位)或相对值(相对于当前窗口的百分比)。所谓绝对值,是指线段的长度是固定的,不随窗口尺寸的改变而改变。所谓相对值,是指线段的长度相对于窗口的宽度而定,窗口的宽度改变时,线段的长度也随之增减,默认值为100%,即始终当前窗口。
属性color:设定线条色彩,默认为黑色。色彩可以用相应的英文名称或以“#”引导的一个十六进制代码来表示。

2.1.5 预格式化标签

<pre>标签可定义预格式化的文本。被包围在<pre>标签中的文本通常会保留空格和换行符,而文本也会呈现为等宽字体。<pre>标签的一个常见应用就是用来表示计算机的源代码预格式化标签的语法为:        <pre>文本块</pre>


2.1.6 缩排标签

<blockquote>与</ blockquote>之间的所有文本都<blockquote>标签可定义一个块引用,右两边进行缩进,而且有时会使用斜体。也就是会从常规文本中分离出来,经常会在左、右,块引用拥有它们自己的空间。
缩排标签的语法为:        <blockquote>文本</blockquote>


2.2 超链接

超链接在本质上属于网页的一部分,通过超链接将各个网页链接在一起后,才能构成一个网站。


2.2.1 超链接简介


1 超链接的定义
超链接是指从一个网页指向一个目标的连接关系,这个目标可以是一个网页,也可以是相同网页不同的位置,还可以是一个图片等
2 超链接的分类
根据超链接目标文件的不同,超链接可分为页面超链接,锚点超链接和电子邮件超链接等
根据超链接单击对象的不同,超链接可分为文字超链接,图像超链接和图像映射等。

3 路径
路径分为三种为绝对路径,根目录相对路径和文档目录相对路径。
绝对路径:就是主页上的文件或目录在硬盘上的真正路径。
根目录相对路径:是指从站点根目录文件夹到链接文档经过的路径。
文档目录相对路径:它是相对于某个基准目录的路径,以当前文件所在的路径为起点,进行相对文件的查找。


2.2.2 超链接的应用


1 锚点标签<a>···</a >
释义: 指向网页上的任何元素。
语法:<a herf=" url" title="指向链接显示的文字" target="窗口名称">文本文字</a>

2 指向其他页面的超链接
链接到同一目录内的网页文件:<a href="目标文件名.html">热点文本</a>。
链接到下一级目录内的网页文件:<a href="子目录名/目标文件名.html">热点文本</a>。
链接到上一级目录内的网页文件:<a href="./目标文件名.html">热点文本</a>。
链接到同级目录内的网页文件:<a href="../子目录名/目标文件名.html">热点文本</a>。

3 指向书签的超链接
书签就是用<a>标签对网页元素做一个记号,其功能类似于固定船的锚,又称锚点。
语法: <a name="记号名">目标文本附近的内容</a>
(1) 指向页面内书签的超链接  : <a href="记号名">热点文本</a>。
(2) 指向其他页面的超链接  :  <a href="目标文件名.html # 记号名">热点文本</a>

4 指向下载文件的超链接
语法为: <a href="下载文件名"> 热点文本</a>

5 指向电子邮件的超链接
语法为:<a href="mailto:E-mail地址">热点文本</a>


2.3 图像


2.3.1 网页图像的格式及使用要点


1 常见的网页图像格式
JPEG:   适合照片
PNG:   适合图形和背景
GIF;   支持动画

2 使用网页图像的要点
确保图片适中,加载速度快,并且有替代文本


2.3.2 图像标签

图像标签常用的属性


1 图像的替换文本说明
当图像无法显示时,alt属性提供一个替代文件。

2 设置图像大小
可以使用width和height属性来设置图像尺寸。
语法: <img src="images/waitao.jpg" width="150" height="200">。

3 图像的边框
可以用border属性为图像添加边框。单位为像素


2.3.3 图像超链接

图像也可以作为超链接热点,单击图像则跳转到被连接到的文件或文本。
语法:<a href="URL"><img src="图像文件名"/></a>


2.3.4 设置网页背景图像

语法为 <body background = "背景图像路径">


2.3.5 图文混排

图文混排技术是指设置图像与同一行中的文本,图像,插件或其他元素的对齐方式。


2.4 列表


2.4.1 无序列表

<ul>
<li></li>
<li></li>
<li></li>
</ul>

1 在<ul>后指定符号的样式
<ul type="disc">       符号为实心圆点
<ul type="circle">       符号为空心圆点
<ul type="square">       符号为方块
<ul type="graph,gif">       符号为指定的图片文件

2 在<li>后指定符号的样式
<li type="disc">       符号为实心圆点
<li type="circle">       符号为空心圆点
<li type="square">       符号为方块
<li type="graph,gif">       符号为指定的图片文件


2.4.2 有序列表

<ol>
<li></li>
<li></li>
<li></li>
</ol>


2.4.3 定义列表

格式为: 
<dl>
<dt>        第一个表题项        </dt>
<dd>        对第一个表题项解释的文字        </dd>
<dd>        第二个表题项        </dd>
<dd>        对第二个表题项解释的文字          </dd>
</dl>


2.4.4 嵌套列表
 

格式为: 
<ul>
        <li>项目一
          <ul>
                <li>子项目一</li>
                <li>子项目二</li>
          </ul>
        </li>
        <li>项目二</li>
</ul>

标签:第二章,网页,标签,语法,超链接,图像,文本,排版
From: https://blog.csdn.net/2402_87161397/article/details/142183810

相关文章

  • 计算机组成原理-第二章-定点数的编码表示以及扩展
    2.1定点数和浮点数表示日常生活中整数的小数点固定在最右方,可省略不写;而实数的小数点位置不固定,计算机内部数据中每一位只能是0或1,不可能出现小数点,因此计算机表示小数点通过约定小数点的位置实现。小数点位置约定在固定位置的称为定点数小数点位置可浮动的称为浮点数 因......
  • 这段HTML、CSS和JavaScript代码构成了一个简单的网页游戏,名为“Catch The Insect”
    这段HTML、CSS和JavaScript代码构成了一个简单的网页游戏,名为“CatchTheInsect”。以下是对代码的详细分析和说明:HTML部分基础结构:使用<!DOCTYPEhtml>声明文档类型,确保浏览器以标准模式渲染页面。<htmllang="en">标签定义了文档的语言为英语。<head>部分包含了字符集......
  • 在 fnOS上安装 KVM 虚拟化,并使用 Cockpit 网页管理虚拟机
    在fnOS系统上安装KVM虚拟化,并使用Cockpit进行网页管理,可以按照以下步骤进行:1.安装KVM虚拟化组件首先,更新软件列表和系统包:sudoaptupdate&&sudoaptupgrade-y安装KVM及相关工具软件:sudoaptinstallqemu-kvmlibvirt-daemon-systemlibvirt-clientsbridge-u......
  • 影刀RPA实战:网页爬虫之CSDN博文作品数据
    今天我们使用影刀来采集网页数据,影刀RPA是一款功能强大的自动化办公软件,它可以模拟人工的各种操作,帮助企业自动处理大量重复性、有逻辑规则的工作。影刀RPA在网页数据采集方面表现出色,能够实现对任何桌面软件、Web程序的自动化,包括ERP、浏览器、CRM、微信、钉钉等应用程序,以及......
  • Java开发环境 第二章(Java Developer environment on Windows 10 Chapter 2)
    第二章IdeaMaven安装与设置1.Idea安装(下载请至idea官网)一路默认,下一步至完成2.IdeaMaven配置a.idea注册码获取,还请自行搜索"idea激活码"或"idea破解"b.创建测试项目新建项目选择JDK项目位置c.配置Maven(maven仓库请自行搜索下载)注意修改sett......
  • Vue框架;Vue中的选择和循环结构;Vue数据类型;Vue中的事件和动态属性;Vue子组件通过导入在
    一,Vue简介        前端现在比较火的三大框架就是:vue,React,Angular。在国内使用最多的还是:    vue>React >Angular        Vue(发音为/vjuː/,类似view)是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建,并提......
  • flask+chartjs实现网页图表自动更新
    Python代码,后端程序提前安装flask,`pipinstallflask`fromflaskimportFlask,jsonify,render_templateimportrandomapp=Flask(__name__)@app.route('/')defindex():returnrender_template('index.html')@app.route('/data')def......
  • springboot+vue音乐微信小程序网页前9【程序+论文+开题】计算机毕业设计
    系统程序文件列表开题报告内容研究背景随着移动互联网技术的飞速发展,微信小程序作为一种轻量级的应用形态,凭借其无需下载、即用即走的特点,迅速渗透到人们日常生活的方方面面。音乐作为人们休闲娱乐、情感表达的重要方式,其数字化、移动化趋势日益显著。然而,市场上虽不乏各类......
  • Vue + Three.js魔法:让3D模型在你的网页上舞动起来!
    ......
  • 数学建模论文排版笔记——清风
    一、Word基础1.1常用功能和快捷键打印预览功能Insert键:有覆盖和插入功能Fn+F4:重复上一步Ctrl+X剪切:删除内容,并且复制Ctrl+Z:撤销上一步操作Ctrl+Y:恢复上一步操作Ctrl+鼠标左键:可以选择不同位置的文字Ctrl+Enter:分页符(用的很多,分割页面时用)Alt类的快捷键按下Alt后,会......