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

2.1 文字与段落排版

2.1.1 段落标签

在HTML（HyperText Markup Language，超文本标记语言）中，用于定义段落的标签是<p>。这个标签用于创建文本的一个段落。每个<p>标签内的内容默认会在其前后添加一些垂直间距（即外边距），以区分不同的段落。段落标签的语法为：

属性align:设置段落文字在网页上的对齐方式，center(居中) left(左对齐) right(右对齐)，默认left。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<p align="center">第一段</p>
		<p align="left">第二段</p>
		<p align="right">第三段</p>
		<p>第四段</p>
	</body>
</html>

本例代码效果图如下：

2.1.2 标题标签

HTML中的标题标签用于定义网页内容的标题。这些标题标签按照重要性递减的顺序，从 <h1> 到 <h6>。<h1> 是最重要的标题，通常用于主标题或页面标题，而 <h6> 是最不重要的标题，可能用于小节标题或次要内容。

标题标签的用途

结构清晰：通过不同级别的标题，可以帮助读者和搜索引擎更好地理解网页的结构和内容层次。
SEO（搜索引擎优化）：搜索引擎使用标题标签来索引网页内容，<h1> 标签尤为重要，因为它通常表示页面的主要主题。
无障碍性：屏幕阅读器等辅助技术依赖标题标签来识别页面内容的结构，从而帮助视障用户更好地理解网页

标题标签的语法为：

<h# align="left center right">标题文字<h#>

属性align:设置段落文字在网页上的对齐方式，center(居中) left(左对齐) right(右对齐)，默认left。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<h1 align="center">标题一</h1>
		<h2 align="left">标题二</h2>
		<h3 align="right">标题三</h3>
		<h4>标题四</h4>
		<h5>标题五</h5>
		<h6>标题六</h6>
	</body>
</html>

本例代码效果图如下：

2.1.3 换行标签

在HTML中，换行标签通常指的是<br>标签（代表“break”的缩写）。这个标签用于在文本中插入一个简单的换行（即，不进行段落的分隔，只是换行），而不是开始一个新的段落。<br>标签是一个空元素，意味着它不需要结束标签。换行标签的语法：

文字<br />

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<p>
           江西应用工程职业学院<br />
           校训：爱国明志，敢为人先
		   </p>
	</body>
</html>

本例代码效果图如下：

2.1.4 水平线标签

在HTML中，用于创建水平线的标签是<hr>。这个标签主要用于在文档中插入一条水平线，通常用于分隔文档中的不同部分，如章节、段落或内容块。<hr>标签是一个空元素，意味着它不需要结束标签（即不需要</hr>）。

<hr>标签的基本用法：
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
	<p>
		江西应用工程职业学院<br />
		校训：爱国明志，敢为人先
	<!-- 水平线标签 -->
	<hr />
	<hr color="pink"/>
	<hr size="20px" color="ccccff"/>
	</p>
	</body>
</html>

本例代码效果图如下：

2.1.5 预格式化标签

在HTML中，用于预格式化的标签是<pre>。<pre>标签会保留文本中的空格、制表符（tab）和换行符，正如文本在源代码中所写的那样显示在页面上。这对于显示程序代码、ASCII艺术或任何需要精确格式控制的文本非常有用。

<pre>标签内的文本通常显示为等宽字体（monospaced font），这有助于保持字符之间的对齐，使得代码或文本更容易阅读。

<pre>标签的基本用法。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
       <pre>
			江西应用工程职业学院
			校训：
			      爱国明志，
			      敢为人先。
		</pre>
	</body>
</html>

本例代码效果图如下：

2.1.6 缩排标签

<blockquote>标签通常包含来自另一个源的引用，如书籍、报纸、网站等。它可以帮助读者区分原始内容和引用内容，并且有时浏览器会默认添加一些样式（如引号、缩进或不同的字体）来突出显示这些内容。

标题标签的语法为：

<blockquote>文本</blockquote>

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
        
		<blockquote>汇成立于2018年，10年来的，凭借独创的特卖模式，精选全球正品发货，深度折扣，
		在电子商务研究中心2018年6月发布的“2017年度中国网络零售市场数据监测报告”中
		全球汇在B2C市场交易份额方面发展势头良好，继续保持第三位。
		唯品会是全球最大的特卖电商，以及中国第三大电商。</blockquote>	
		
	</body>
</html>

本例代码效果图如下：

2.1.7 案例

使用文字与段落的基本排版知识制作“全球汇商城简介页面”。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<h1 align="center">100%正品 十重保障</h1>
		<hr color="deeppink"/>
		<p>
			   全球汇成立于2018年，10年来的，凭借独创的特卖模式，精选全球正品发货，深度折扣，在电子商务研究中心2018年6月发布的“2017年度中国网络零售市场数据监测报告”中
			全球汇在B2C市场交易份额方面发展势头良好，继续保持第三位。
			   唯品会是全球最大的特卖电商，以及中国第三大电商。			
		</p><br />
		全球汇承诺：
		<blockquote>
			全球直采：资源保障，全球布局 直采全世界好货。<br />
			入仓全检：质检保障，独立自理仓库 坚持入仓全检。<br />
			自营物流：物流保障，自营物流封闭操作 全程可溯。<br />
			假货必赔：第三方保障，中国人保正品保险，假货必赔。<br />
		</blockquote>
	</body>
</html>

本例浏览效果图如下：

2.2 超链接

2.2.1 超链接简介

HTML（HyperText Markup Language，超文本标记语言）是用于创建网页和网页应用程序的标准标记语言。超链接（Hyperlinks）是HTML中一个非常重要的概念，它允许用户点击一个链接跳转到不同的页面或页面内的某个部分。超链接不仅限于文本，还可以是图片、按钮等元素。

超链接的基本语法

超链接主要通过<a>标签来定义，其基本语法如下：

<a href="URL">链接文本或图片</a>

href属性指定了链接的目标地址（URL）。它可以是同一网站内的页面地址，也可以是另一个网站的地址。
链接文本或图片是用户点击的部分，可以是普通的文本，也可以是<img>标签定义的图片等

2.2.2 超链接的应用

1.锚点标签

在HTML中，锚点（Anchor）标签通常指的是<a>标签的一种特殊用法，它不仅可以用来创建指向其他网页或网站的超链接，还可以用来创建指向同一页面内某个部分的链接。这种在同一页面内部进行跳转的链接，通常被称为页面内的锚点链接。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
        <a href="http://www.baidu.com">百度一下</a>
	</body>
</html>

2.指向其他页面的超链接

在HTML中，指向其他页面的超链接是通过<a>标签（anchor标签）实现的。<a>标签的href属性用于指定链接的目标URL。当用户在网页中点击这个链接时，浏览器会加载并显示href属性中指定的URL所指向的页面。

代码如下：

<a href="about.html">关于我们</a>

在这个例子中，<a>标签的href属性被设置为"about.html"，这是指向同一网站目录下名为about.html的文件的链接。用户点击“关于我们”这几个字时，浏览器就会尝试加载并显示about.html页面的内容。

3.指向书签的超链接

在HTML中，指向书签（也称为锚点）的超链接允许用户点击链接后直接跳转到同一页面上的特定部分。要实现这一点，你需要在目标元素上使用id属性作为书签的标识符，并在<a>标签的href属性中使用#后跟该id值来创建指向该书签的链接。

代码如下：

<a href="几号名">热点文本</a>

4.指向下载文件的超链接

在HTML中，指向下载文件的超链接与指向网页的超链接类似，但href属性中包含了要下载文件的URL。当用户点击这样的链接时，浏览器会尝试下载指定的文件，而不是在浏览器中打开它（这取决于文件的类型以及浏览器的设置）。

代码如下：

<a href="file.pdf" download="desiredFilename.pdf">下载文件</a>

5.指向电子邮件的超链接

在HTML中，指向电子邮件的超链接并不是直接通过<a>标签的href属性中的URL来实现的，因为电子邮件不是一个网页地址。但是，你可以使用mailto:协议来创建一个指向电子邮件的超链接。当用户点击这样的链接时，他们的默认邮件客户端（如Outlook、Gmail的网页版或Apple Mail）会被打开，并创建一个新的邮件，邮件的收件人地址已经预先填写好了。

代码如下：

<a href="mailto:[email protected]">发送电子邮件给某人</a>

2.3 图像

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

1、常见网页图像格式

JPEG（JPG）
- 特点：JPEG格式对色彩的信息保留较好，支持丰富的色彩和渐变效果，适用于照片和其他具有复杂色彩和细节的图像。
- 使用要点：JPEG采用有损压缩技术，可以在保证一定质量的前提下减小文件大小，适合在网页上展示高质量的图片，但需要注意避免过度压缩导致图像质量下降。
PNG
- 特点：PNG格式支持无损压缩，适用于需要清晰边缘的图像，如图标、按钮等。PNG-24还支持真彩色和透明度，非常适合需要透明背景的图像。
- 使用要点：PNG格式的文件通常比JPEG大，因此在选择使用PNG格式时需要考虑网页的加载速度。对于需要透明背景的图像，PNG是首选格式。
GIF
- 特点：GIF格式最多只能存储256色，因此色彩表现不如JPEG和PNG丰富。但其优势在于可以保存透明背景和动画效果，非常适合用于简单的动画图像或表情包。
- 使用要点：GIF格式的文件通常较小，适合在网络上快速传输。但由于色彩限制，它不适合用于色彩丰富的图像。
SVG
- 特点：SVG是可缩放矢量图形，与像素图像不同，SVG文件的大小不会因放大而失真。它非常适合用于图标、标志等需要清晰呈现的图像。
- 使用要点：SVG格式的文件可以通过文本编辑器进行编辑，具有高度的可编辑性和可访问性。在响应式设计中，SVG能够保持图像的清晰度，提升用户体验。
PSD
- 特点：PSD是Photoshop的专用格式，里面可以存放图层信息、通道、遮蔽等多种设计稿。对于前端开发人员来说，可以直接从上面复制文字、获得图片，还可以测量大小距离。
- 使用要点：PSD格式主要用于设计过程中的图像编辑和保存设计稿，不建议直接在网页中使用。如果需要在网页上展示PSD格式的图像，需要先将其导出为其他适合网页的格式。

2、使用要点

选择合适的格式：根据图像的类型和用途选择合适的格式。例如，对于照片和复杂图像，JPEG是较好的选择；对于需要透明背景的图像，PNG或SVG更合适；对于简单的动画或表情包，GIF是不错的选择。
优化图像：在将图像上传到网页之前，需要对其进行优化以减小文件大小，提高加载速度。这包括调整图像尺寸、压缩图像质量、去除不必要的元数据等。
遵守版权法规：在使用图像时，需要确保拥有合法的使用权，避免侵犯他人的版权。如果需要使用他人的图像，应事先获得授权或购买合法授权的图像。
考虑响应式设计：在响应式网页设计中，需要确保图像能够适应不同设备和屏幕尺寸的显示需求。这可以通过使用CSS媒体查询、图片懒加载等技术来实现。

2.3.2 图像标签

HTML中用于插入图像的标签是<img>。这个标签允许你在网页上嵌入图片。<img>标签是一个空元素，意味着它不需要结束标签（即没有</img>）。相反，所有必要的信息都包含在标签的属性中。

<img>标签的主要属性包括：

src（必需）：指定图像的URL地址。这是图像文件的路径，可以是相对路径或绝对路径。
alt（推荐）：为图像提供替代文本。如果图像因为某种原因无法显示（比如网络问题或用户使用了屏幕阅读器），alt属性中的文本将被显示或读出。这对于提高网站的可访问性非常重要。
width 和 height：设置图像的宽度和高度。这些值可以是像素值（如width="100"）或百分比（如width="50%"）。虽然这些属性不是必需的，但指定它们可以帮助浏览器更好地布局页面，因为浏览器可以在图像加载之前预留出空间。
title：提供图像的额外信息，当鼠标悬停在图像上时，这些信息会以工具提示的形式显示

<img>标签的语法格式：

<img src="图像的URL路径" />

1.图像的替换文本说明

在HTML中，图像的替换文本（Alternative Text）是通过<img>标签的alt属性来提供的。这个属性对于图像无法显示的情况特别重要，因为它为图像提供了替代的文本说明。这些情况可能包括：

图像文件不存在：如果指定的图像文件路径错误或文件本身不存在，浏览器将不会显示图像，而是显示alt属性中提供的文本。
网络问题：如果用户的网络连接出现问题，导致图像无法加载，alt文本将作为图像的占位符显示。
屏幕阅读器：对于使用屏幕阅读器的视障用户来说，alt文本是他们了解图像内容的重要途径。屏幕阅读器会读取alt属性中的文本，以便用户能够理解图像所传达的信息。
搜索引擎优化（SEO）：搜索引擎无法直接“看到”图像，但它们可以读取alt文本。因此，为图像提供描述性的alt文本有助于搜索引擎理解图像的内容，并可能提高网站在搜索结果中的排名。

包含alt属性的<img>标签的语法格式：

<img src="beautiful-landscape.jpg" alt="壮观的山脉和湖泊景色">

2.设置图像大小

在<img>标签中使用width和height属性来直接设置图像的大小。

代码如下：

<img src="img/1cfbb8a14e27ecc109a84a690fc7cea.jpg" width="100" height="100"  />

3. 图像的边框

在<img>标签的style属性中直接使用CSS的border属性来添加边框。

代码如下：

<img src="img/1cfbb8a14e27ecc109a84a690fc7cea.jpg" width="100" height="100" border="100" />

2.3.3 图像的超链接

在HTML中，你可以将图像（<img>标签）包裹在超链接（<a>标签）内，以创建可点击的图像链接。当用户点击图像时，浏览器会导航到你在<a>标签的href属性中指定的URL。

代码如下：

<a href="https://www.example.com" target="_blank">  
    <img src="image.jpg" alt="点击这里访问示例网站">  
</a>

2.3.4 设置网页背景图像

在网页中可以利用图像作为背景，但是要注意不要让背景图像影响网页内容的显示，因为背景图像只是起到渲染网页的作用。此外，背景图片最好不要设置边框，这样有利于生成无缝背景。背景属性将背景设置为图像。属性值为图片的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。

格式：

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

2.3.5 图文混排

在HTML中实现图文混排，主要涉及到<img>标签（用于插入图像）与文本内容的排列。图文混排可以通过CSS（层叠样式表）来控制图像和文本的相对位置、间距、对齐方式等，以达到预期的视觉效果。

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!-- 图文混排 -->
		<h1 align="center">江西应用工程职业学院</h1>
		<hr color="#ff0000" size="20"/>
		<img src="img/sg.png" align="right"/>
		<p>
			江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。<br />
			办学宗旨：以人为本 培养高素质高技能人才<br />
			校训：爱国明志  敢为人先<br />
			校园精神：诚朴坚卓  达谦智勇<br />
		</p>
	</body>
</html>

示例效果图如下：

2.4 列表

2.4.1 无序列表

HTML中的无序列表是通过<ul>（unordered list）标签来定义的，每个列表项则是通过<li>（list item）标签来定义的。无序列表中的项目默认以圆点（bullet points）作为标记，但你可以通过CSS来改变这些标记的样式。

下面是一个简单的无序列表的HTML示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
       <ul>
       	<li>无序列表第一项</li>
       	<li>无序列表第二项</li>
       	<li>无序列表第三项</li>
       </ul>
	</body>
</html>

代码效果图如下：

2.4.2 有序列表

HTML中的有序列表（Ordered List）是通过<ol>标签来定义的，而列表中的每个项目则是通过<li>（list item）标签来指定的。与无序列表（<ul>）不同，有序列表中的项目会按照数字顺序（默认为1, 2, 3...）自动编号。

下面是一个简单的无序列表的HTML示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<ol >
			<li>有序列表第一项</li>
			<li>有序列表第二项</li>
			<li>有序列表第三项</li>
		</ol>
	</body>
</html>

代码效果图如下：

2.4.3 定义列表

HTML中的定义列表（Definition List）是一种用于展示术语及其定义或描述的列表。它通过使用<dl>（definition list）、<dt>（definition term）和<dd>（definition description）标签来创建。<dl>标签定义了一个定义列表，<dt>标签定义了列表中的术语（或名称），而<dd>标签则提供了该术语的定义或描述。

下面是一个定义列表的HTML示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!-- 定义列表 -->
		<dl>
			<dt>院校名称：</dt>
			<dd>江西应用工程职业学院</dd>
			<dt>办学宗旨：</dt>
			<dd>以人为本 培养高素质高技能人才</dd>
			<dt>校训：</dt>
			<dd>爱国明志  敢为人先</dd>
			<dt>校园精神：</dt>
			<dd>诚朴坚卓  达谦智勇</dd>
		</dl>
	</body>
</html>

代码效果图如下：

2.4.4 嵌套列表

HTML中的嵌套列表允许你在一个列表内部创建另一个列表。这对于组织具有层次结构的信息非常有用，比如菜单、目录或任何需要分组的列表项。你可以在一个无序列表（<ul>）或有序列表（<ol>）内部嵌套另一个无序列表或有序列表。

下面是一个嵌套列表的HTML示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<!-- 定义列表 -->
		<dl>
		<!-- 嵌套列表 -->
		<h2>全球汇支付向导</h2>
		<ul type="circle">
			<li>货到付款</li>
			<li>微信支付</li>
			<li>支付宝</li>
			<li>网银在线</li>
		</ul>
		<hr />
		<li>网银在线支付步骤：</li>
		<ol>
			<li>选择您要使用的网上银行：</li>
			<li>显示您的应付总价，单击“确认无误，付款”；</li>
			<li>确定您在银行的预留信息，单击“确定”按钮：</li>
			<li>输入您的网银账户，登录密码，验证码；</li>
			<li>支付成功，提示“已完成付款”。</li>
		</ol>
		<hr />
		<li>联系我们</li>
		<dl>
			<dt>E-mail:</dt>
			<dd>worldall@ 163.com</dd>
			<dt>传真:</dt>
			<dd>0750-3118888</dd>
			<dt>地址:</dt>
			<dd>广东省江门市江海区五邑路</dd>
		</dl>
		</ul>
		</dl>
	</body>
</html>

代码效果图如下：

2.5 综合案例

本章综合前面学习的网页制件排版知识，可以利用文字与段落排版、超链接、图像和列表设置。

代码如下：

<!--综合案例.html-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset=" UTF-8">
		<title>无线吸尘器说明书</title>
	</head>
	<body>
		<h1>Dyson V8 absolute 无线吸尘器</h1>
		<hr color=" deeppink" />
		<ul style=" font-size :25px">
			<li type="square" style="color:deeppink">商品参数</li>
			<p syle="fon-size:25px">吸尘器类别:手持式吸尘器<br>功率:500W<br />
			储尘类型:旋风尘盒/尘桶<br />吸尘类型:千/湿吸均可<br>
			适用面积:91m'-150 m’<lr/>产品特色:除端,HEPA 滤网<br/>
			线长:充电式(无线)<lr />吸嘴类型:圓毛刷<br />
			适川环境:厨房,地板,地毯,床铺,汽车,沙发,凭砖,酒店<br/>售后服务:海外进口商品不支持内联保,无法享受与产地同等售后服务<br />
			品牌名称:Dyson<hr />商品名称:我家那闺女 Dyson V8 absolule 无线吸尘器<br />
			产地:马来西亚<br/>商品编号:V8mbsoluleUS<br/></p>
			<li lype="gquure" slyle="color:deeppink">商品展示</li></ul>
			<img src="img/1.jpg" "iille=" 无线手持吸尘器”align="middle" />
			<h2>产品信息</h2>
			<p slyle="font-size:25px;">品牌:Dyson 戴森<br />
				品名:无线手持吸尘器美版<br />
				型号:V8 Absolule<br />
				吸力:高达 115 空气瓦特<br />
				使用时间:普通模式约40分钟、MAX模式约7分钟<br />
				(电动驱动吸头在非 MAX模式下运行约25分钟)<br />
				充电时间:约5小时<br />
				产品尺寸:长 124.4厘米,宽18厘米,高22.4厘米<br />
				重量:2.61 公斤<br />
				容量:0.54 升<br />
				吸头配件:软绒滚简吸头、升级版直驱吸头、缝隙吸头、<br />
				电动床褥吸头、二合一吸头、软除尘毛吊<br />
				产品特点;电力升级、新形式集尘桶、双层放射式气旋、HEPA<br />
				过滤系统、噪声分贝更小<br />
			<p>
			<h2>产品特点</h2>
			<img src="img/tedian.JPG" width="750" height=" 450" />
			<h2>戴森科技,英国品质</h2>
			<p slyle="font-size:25px">戴森 V8 美版无绳吸尘器高配版,新的动力设计。<br />
				有助吸除家中四处的过敏原,吸附99.97%小至0.3微米的微尘,<br />
				运行时间高达 40分钟,2款地板吸头及4款配件吸头,清洁空间高达291平米。
			</p><img src="img/left.JPG" align=" le" width=" 350" height=" 290" /><br /><br />
			<h1>HEPA 过滤系统<br />
				吸附微尘 99.97%小至0.3微米<br />
				米的微尘,减少过敏原回流空至<br />
				气中。<br /></h1>
				<br />
				<br />
				<img src="img/canbin.jpg">
				<blockquote slyle=" fonl-size : 25px">宮网地址:<a href=" https://shop. dyson. c"> https ://shop. dyson.cn/</a></blockquote>
			</h1>
	</body>
</html>
</body>
</html>

本案例效果图如下

标签：网页,标签,列表,HTML,超链接,图像,第二章,排版
From： https://blog.csdn.net/2301_79780386/article/details/142252487

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

2.1 文字与段落排版

2.1.1 段落标签

2.1.2 标题标签

2.1.3 换行标签

2.1.4 水平线标签

2.1.5 预格式化标签

2.1.6 缩排标签

2.1.7 案例

2.2 超链接

2.2.1 超链接简介

2.2.2 超链接的应用

1.锚点标签

2.指向其他页面的超链接

3.指向书签的超链接

4.指向下载文件的超链接

5.指向电子邮件的超链接

2.3 图像

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

1、常见网页图像格式

2、使用要点

2.3.2 图像标签

1.图像的替换文本说明

2.设置图像大小

3. 图像的边框

2.3.3 图像的超链接

2.3.4 设置网页背景图像

2.3.5 图文混排

2.4 列表

2.4.1 无序列表

2.4.2 有序列表

2.4.3 定义列表

2.4.4 嵌套列表

2.5 综合案例

相关文章

赞助商

阅读排行

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

2.1 文字与段落排版

2.1.1 段落标签

2.1.2 标题标签

2.1.3 换行标签

2.1.4 水平线标签

2.1.5 预格式化标签

2.1.6 缩排标签

2.1.7 案例

2.2 超链接

2.2.1 超链接简介

2.2.2 超链接的应用

1.锚点标签

2.指向其他页面的超链接

3.指向书签的超链接

4.指向下载文件的超链接

5.指向电子邮件的超链接

2.3 图像

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

1、常见网页图像格式

2、使用要点

2.3.2 图像标签

1.图像的替换文本说明

2.设置图像大小

3. 图像的边框

2.3.3 图像的超链接

2.3.4 设置网页背景图像

2.3.5 图文混排

2.4 列表

2.4.1 无序列表

2.4.2 有序列表

2.4.3 定义列表

2.4.4 嵌套列表

2.5 综合案例

相关文章

赞助商

阅读排行

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