第2章-----网页制作的排版方法

最新推荐文章于 2024-09-29 09:14:30 发布

2301_80447228

最新推荐文章于 2024-09-29 09:14:30 发布

阅读量664

点赞数 27

文章标签： html

本文链接：https://blog.csdn.net/2301_80447228/article/details/142252059

版权

2.1 文字与段落的排版方法

2.1.1 段落标签

align" "属性：设置对齐方式 left左对齐 center居中对齐 right右对齐

2.1.2标题标签

<h1>标题1

<h2>标题2

<h3>标题3

<h4>标题4

包含关系

2.1.3换行标签

<p>江西应用工程职业学院<br/ >

校训：爱国明志，敢为人先

<p>

2.1.4水平线标签

<hr/ >

2.1.5 预格式化标签

<pre>
江西应用工程职业学院
校训：爱国明志敢为人先
</pre>

展示所有空格

2.1.6缩排标签

<blockquote>
第2章-----网页制作的排版方法
</blockquote>

2.1.7 案例

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

2.2超链接

2.1.1超链接简介

2.1.1.1超链接的定义

2.1.1.2超链接的分类

2.1.1.3路径

2.2.2超链接的应用

2.2.2.4指向书签的超链接

建立标签<a name="p"></a>

使用标签

2.2.2.4指向下载文件的超链接

2.2.2.5指向电子邮件的超链接

2.3 图像

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

2.3.1.1常见的网页图像格式

gif png jpeg

2.3.1.2使用网页图像的要的

大小尽量8k以下，图像不要太多，要用相对路径

2.3.2图像标签

2.3.2.2设置图像大小

2.3.2.3图像的边框

（标签，大小，边框，可以同时设置)

2.3.3图像超链接

2.3.4网页背景

2.4列表

2.4.1无序列表

<ul>
           <li>无序列表第一项</li>
           <li>无序列表第二项</li>
           <li>无序列表第三项</li>
       </ul>

2.4.1.2在<li>后指定符号的样式

<ul type="circle">
           <li>无序列表第一项</li>
           <li type="square">无序列表第二项</li>
           <li>无序列表第三项</li>
       </ul>

2.4.3定义列表

<dl>
           <dt>院校名称：</dt>
           <dd>江西应用工程职业学院</dd>
           <dt>办学宗旨：</dt>
           <dd>以人文本培养高素质高技能人才</dd>
           <dt>校训:</dt>
           <dd>爱国明志，敢为人先</dd>
       </dl>

效果图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<a name="p"></a>
		<h1  align="right">标题一</h1>
		        <h2  align="center">标题二</h2>
		
		<h3  align="left">标题三</h3>
		<p>江西应用工程职业学院<br/ >
		
		 校训：爱国明志，敢为人先
		<hr/ >
		
		<hr color="#ffc0cb"/ >
		<hr size="20px"  color="#aaccff"/><!//书第29页颜色>
		<pre>
江 西 应 用 工 程 职 业 学 院
校训：    爱国明志    敢为人先
		</pre>
		<blockquote>
			第2章-----网页制作的排版方法
		</blockquote>
		
		<a href="https://www.baidu.com">百度一下</a>
		<a href="login.html">登录</a>
		<a href="register.html">注册</a>	
		<a href="#p">段落</a>
		<a href="文件名.zip">下载</a>
		<a href="mailto:120....09@qq.com">联系方式</a>
		<img src="img/manba.jpg"  title="black manba"/>
		<img src="img/manba.jpg" width="200" height="600">
		<img src="img/manba.jpg" border="100"/>
		<a href="http://www.baidu.com"><img src="img/manba.jpg" title="百度一下"/>
		<ul>
			<li>无序列表第一项</li>
			<li>无序列表第二项</li>
			<li>无序列表第三项</li>
		</ul>
		<ul type="circle">
			<li>无序列表第一项</li>
			<li type="square">无序列表第二项</li>
			<li>无序列表第三项</li>
		</ul>
		<dl>
			<dt>院校名称：</dt>
			<dd>江西应用工程职业学院</dd>
			<dt>办学宗旨：</dt>
			<dd>以人文本 培养高素质高技能人才</dd>
			<dt>校训:</dt>
			<dd>爱国明志，敢为人先</dd>
		</dl>
		
	</body>
</html>