2.1文字与段落排版
2.1.1段落标签
<p align="center">居中对齐
<p align="left">左对齐
<p align="rightr">右对齐
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p align="center">第一段</p>
<p align="left">第二段</p>
<p align="right">第三段</p>
</body>
</html>
2.1.2标题标签
<h1>一级标题</h1> 每级标题下面可以用包含其他级的标题
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
................................
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--< align="center">第一段</p>
<p align="left">第二段</p>
<p align="right">第三段</p>-->
<h1>一级标题</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
</body>
</html>
2.1.3 换行标签
<br/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--< align="center">第一段</p>
<p align="left">第二段</p>
<p align="right">第三段</p>-->
<!--<h1>一级标题</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>-->
<p>
你好！<br/>
你好！
</p>
</body>
</html>
2.1.4 水平线标签
<hr color="#ffc0cb"/> 设置颜色
<hr size="20px"> 设置宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--< align="center">第一段</p>
<p align="left">第二段</p>
<p align="right">第三段</p>-->
<!--<h1>一级标题</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>-->
<!--<p>
你好！<br/>
你好！
</p>-->
<hr size="30" color="#ffccc"/>
</body>
</html>
2.1.5预格式化标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--< align="center">第一段</p>
<p align="left">第二段</p>
<p align="right">第三段</p>-->
<!--<h1>一级标题</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>-->
<!--<p>
你好！<br/>
你好！
</p>-->
<!--<hr size="30" color="#ffccc"/>-->
<pre>
你好 hello
你好 hello
</pre>
</body>
</html>
2.1.6缩排标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--< align="center">第一段</p>
<p align="left">第二段</p>
<p align="right">第三段</p>-->
<!--<h1>一级标题</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>-->
<!--<p>
你好！<br/>
你好！
</p>-->
<!--<hr size="30" color="#ffccc"/>-->
<!--<pre>
你好 hello
你好 hello
</pre>-->
<blockquote>
我是在小学开始去网吧「上网冲浪」的，那时的电脑屏幕非常小，分辨率只有800×600像素（对比一下，iPhone8的分辨率是750x1334px），
网速也很慢，经常掉线或者加载失败。那时的网站性能和体验都不好，而现在网站设计和过去已经有了巨大的变化：注重用户体验、注重页面动效、
富媒体等设计让如今的网站体验并不比软件和手机 APP 差。加上个人电脑的普及，网站仍然是人机交互中非常重要的平台之一。
</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> 全球汇成立于2008年,10年来,凭借独创的特
卖模式,精选全球正品好货,深度折扣,在电子商务研究中心 2018年6月发布的"2017年度中国网络零售市
场数据监测报告"中,全球汇在B2C市场交易份额方面发展势头良好,继续保持第三位。<br/>
唯品会是全球最大的特卖电商,以及中国第三大电
商。<br/>
</p><br/>
全球汇诺：
<blockquote>
全球直采:货源保障,全球布局 直采全世界好货。<br/>
入仓全检:质检保障,独立自理仓库坚持入仓全检验。<br/>
自营物流:物流保障,自营物流封闭操作全程可溯。<br/>
假货必赔:第三方保障,中国人保正品保险,假货必赔。<br/>
</blockquote>
</body>
</html>
2.2超链接
2.2.1超链接的简介
1.超链接的定义
所谓超链接，指从一个·网页指向一个目标的链接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮电地址，一个文件，甚至是一个应用程序。
超链接除了可链接文本外，也可链接各种媒体，如声音、图像、和动画等，通过它们可以将网站建设成一个丰富多彩的多媒体世界。当网页中包含超链接时，其外观形式为彩色（一般为蓝色）且带下划线的文字或图像。单击这些文本或图像，可眺转到相应的位置。鼠标指针指向超链接时，将变成手形。
2.超链接的分类
3.路径
（1）绝对路径
（2）相对路径
2.2.2超链接应用
2.2.2.1描点标签
2.2.2.2指向其他页面的超链接
2.2.2.3指向书签的超链接
1.设立书签 <a name="p"></a>
2.指向书签 <a href="#p">段落</a>
2.2.2.4指向下载文件的超链接
<a href="文件名.zip">下载</a>
2.3图像
2.3.1网页图像的格式及使用要点
2.3.1.1常见的网页图像格式
2.3.1.2使用网页图像的要点
2.3.2图像标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a name="A"></a>
<!--<p align="center">第一段</p>
<p align="left">第二段</p>
<p align="right">第三段</p>-->
<!--<h1>一级标题</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>-->
<!--<p>
你好！<br/>
你好！
</p>-->
<!--<hr size="30" color="#ffccc"/>-->
<!--<pre>
你好 hello
你好 hello
</pre>-->
<!--<blockquote>
我是在小学开始去网吧「上网冲浪」的，那时的电脑屏幕非常小，分辨率只有800×600像素（对比一下，iPhone8的分辨率是750x1334px），
网速也很慢，经常掉线或者加载失败。那时的网站性能和体验都不好，而现在网站设计和过去已经有了巨大的变化：注重用户体验、注重页面动效、
富媒体等设计让如今的网站体验并不比软件和手机 APP 差。加上个人电脑的普及，网站仍然是人机交互中非常重要的平台之一。
</blockquote>-->
<!--<a href="register.html">注册</a>
<a href="login.html">登入</a>
<a href="#A"></a>-->
<img src="img/1.1.jpg" title="张三"/>
</body>
</html>
2.3.2.1图像的替换文本说明
2.3.2.2设置图像大小
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a name="A"></a>
<!--<p align="center">第一段</p>
<p align="left">第二段</p>
<p align="right">第三段</p>-->
<!--<h1>一级标题</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>-->
<!--<p>
你好！<br/>
你好！
</p>-->
<!--<hr size="30" color="#ffccc"/>-->
<!--<pre>
你好 hello
你好 hello
</pre>-->
<!--<blockquote>
我是在小学开始去网吧「上网冲浪」的，那时的电脑屏幕非常小，分辨率只有800×600像素（对比一下，iPhone8的分辨率是750x1334px），
网速也很慢，经常掉线或者加载失败。那时的网站性能和体验都不好，而现在网站设计和过去已经有了巨大的变化：注重用户体验、注重页面动效、
富媒体等设计让如今的网站体验并不比软件和手机 APP 差。加上个人电脑的普及，网站仍然是人机交互中非常重要的平台之一。
</blockquote>-->
<!--<a href="register.html">注册</a>
<a href="login.html">登入</a>
<a href="#A"></a>-->
<!--<img src="img/1.1.jpg" title="张三"/>-->
<img src="img/1.1.jpg" width="350px" height="200px"/>
</body>
</html>
2.3.2.3图像边框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a name="A"></a>
<!--<p align="center">第一段</p>
<p align="left">第二段</p>
<p align="right">第三段</p>-->
<!--<h1>一级标题</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>-->
<!--<p>
你好！<br/>
你好！
</p>-->
<!--<hr size="30" color="#ffccc"/>-->
<!--<pre>
你好 hello
你好 hello
</pre>-->
<!--<blockquote>
我是在小学开始去网吧「上网冲浪」的，那时的电脑屏幕非常小，分辨率只有800×600像素（对比一下，iPhone8的分辨率是750x1334px），
网速也很慢，经常掉线或者加载失败。那时的网站性能和体验都不好，而现在网站设计和过去已经有了巨大的变化：注重用户体验、注重页面动效、
富媒体等设计让如今的网站体验并不比软件和手机 APP 差。加上个人电脑的普及，网站仍然是人机交互中非常重要的平台之一。
</blockquote>-->
<!--<a href="register.html">注册</a>
<a href="login.html">登入</a>
<a href="#A"></a>-->
<!--<img src="img/1.1.jpg" title="张三"/>-->
<!--<img src="img/1.1.jpg" width="350px" height="200px"/>-->
<img src="img/1.1.jpg" border="100px"/>
</body>
</html>
2.3.3图像超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a name="A"></a>
<!--<p align="center">第一段</p>
<p align="left">第二段</p>
<p align="right">第三段</p>-->
<!--<h1>一级标题</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>-->
<!--<p>
你好！<br/>
你好！
</p>-->
<!--<hr size="30" color="#ffccc"/>-->
<!--<pre>
你好 hello
你好 hello
</pre>-->
<!--<blockquote>
我是在小学开始去网吧「上网冲浪」的，那时的电脑屏幕非常小，分辨率只有800×600像素（对比一下，iPhone8的分辨率是750x1334px），
网速也很慢，经常掉线或者加载失败。那时的网站性能和体验都不好，而现在网站设计和过去已经有了巨大的变化：注重用户体验、注重页面动效、
富媒体等设计让如今的网站体验并不比软件和手机 APP 差。加上个人电脑的普及，网站仍然是人机交互中非常重要的平台之一。
</blockquote>-->
<!--<a href="register.html">注册</a>
<a href="login.html">登入</a>
<a href="#A"></a>-->
<!--<img src="img/1.1.jpg" title="张三"/>-->
<!--<img src="img/1.1.jpg" width="350px" height="200px"/>-->
<!--<img src="img/1.1.jpg" border="100px"/>-->
<a href="http://www.baidu.com">
<img src="img/baidu.jpg">
</a>
</body>
</html>
2.3.4设置图像背景
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body background="img/baidu.jpg">
<a name="A"></a>
<!--<p align="center">第一段</p>
<p align="left">第二段</p>
<p align="right">第三段</p>-->
<!--<h1>一级标题</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>-->
<!--<p>
你好！<br/>
你好！
</p>-->
<!--<hr size="30" color="#ffccc"/>-->
<!--<pre>
你好 hello
你好 hello
</pre>-->
<!--<blockquote>
我是在小学开始去网吧「上网冲浪」的，那时的电脑屏幕非常小，分辨率只有800×600像素（对比一下，iPhone8的分辨率是750x1334px），
网速也很慢，经常掉线或者加载失败。那时的网站性能和体验都不好，而现在网站设计和过去已经有了巨大的变化：注重用户体验、注重页面动效、
富媒体等设计让如今的网站体验并不比软件和手机 APP 差。加上个人电脑的普及，网站仍然是人机交互中非常重要的平台之一。
</blockquote>-->
<!--<a href="register.html">注册</a>
<a href="login.html">登入</a>
<a href="#A"></a>-->
<!--<img src="img/1.1.jpg" title="张三"/>-->
<!--<img src="img/1.1.jpg" width="350px" height="200px"/>-->
<!--<img src="img/1.1.jpg" border="100px"/>-->
<!--<a href="http://www.baidu.com">
<img src="img/baidu.jpg">
</a>-->
</body>
</html>
2.3.5图文混排
2.4列表
2.4.1无序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a name="A"></a>
<!--<p align="center">第一段</p>
<p align="left">第二段</p>
<p align="right">第三段</p>-->
<!--<h1>一级标题</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>-->
<!--<p>
你好！<br/>
你好！
</p>-->
<!--<hr size="30" color="#ffccc"/>-->
<!--<pre>
你好 hello
你好 hello
</pre>-->
<!--<blockquote>
我是在小学开始去网吧「上网冲浪」的，那时的电脑屏幕非常小，分辨率只有800×600像素（对比一下，iPhone8的分辨率是750x1334px），
网速也很慢，经常掉线或者加载失败。那时的网站性能和体验都不好，而现在网站设计和过去已经有了巨大的变化：注重用户体验、注重页面动效、
富媒体等设计让如今的网站体验并不比软件和手机 APP 差。加上个人电脑的普及，网站仍然是人机交互中非常重要的平台之一。
</blockquote>-->
<!--<a href="register.html">注册</a>
<a href="login.html">登入</a>
<a href="#A"></a>-->
<!--<img src="img/1.1.jpg" title="张三"/>-->
<!--<img src="img/1.1.jpg" width="350px" height="200px"/>-->
<!--<img src="img/1.1.jpg" border="100px"/>-->
<!--<a href="http://www.baidu.com">
<img src="img/baidu.jpg">
</a>-->
<ul>
<li>无序列表第一项</li>
<li>无序列表第二项</li>
<li>无序列表第三项</li>
</ul>
</body>
</html>
2.4.1.1在<ul>v后指定符号的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a name="A"></a>
<!--<p align="center">第一段</p>
<p align="left">第二段</p>
<p align="right">第三段</p>-->
<!--<h1>一级标题</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>-->
<!--<p>
你好！<br/>
你好！
</p>-->
<!--<hr size="30" color="#ffccc"/>-->
<!--<pre>
你好 hello
你好 hello
</pre>-->
<!--<blockquote>
我是在小学开始去网吧「上网冲浪」的，那时的电脑屏幕非常小，分辨率只有800×600像素（对比一下，iPhone8的分辨率是750x1334px），
网速也很慢，经常掉线或者加载失败。那时的网站性能和体验都不好，而现在网站设计和过去已经有了巨大的变化：注重用户体验、注重页面动效、
富媒体等设计让如今的网站体验并不比软件和手机 APP 差。加上个人电脑的普及，网站仍然是人机交互中非常重要的平台之一。
</blockquote>-->
<!--<a href="register.html">注册</a>
<a href="login.html">登入</a>
<a href="#A"></a>-->
<!--<img src="img/1.1.jpg" title="张三"/>-->
<!--<img src="img/1.1.jpg" width="350px" height="200px"/>-->
<!--<img src="img/1.1.jpg" border="100px"/>-->
<!--<a href="http://www.baidu.com">
<img src="img/baidu.jpg">
</a>-->
<ul type="circle">
<li>无序列表第一项</li>
<li>无序列表第二项</li>
<li>无序列表第三项</li>
</ul>
</body>
</html> 
2.4.2有序列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a name="A"></a>
<!--<p align="center">第一段</p>
<p align="left">第二段</p>
<p align="right">第三段</p>-->
<!--<h1>一级标题</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>-->
<!--<p>
你好！<br/>
你好！
</p>-->
<!--<hr size="30" color="#ffccc"/>-->
<!--<pre>
你好 hello
你好 hello
</pre>-->
<!--<blockquote>
我是在小学开始去网吧「上网冲浪」的，那时的电脑屏幕非常小，分辨率只有800×600像素（对比一下，iPhone8的分辨率是750x1334px），
网速也很慢，经常掉线或者加载失败。那时的网站性能和体验都不好，而现在网站设计和过去已经有了巨大的变化：注重用户体验、注重页面动效、
富媒体等设计让如今的网站体验并不比软件和手机 APP 差。加上个人电脑的普及，网站仍然是人机交互中非常重要的平台之一。
</blockquote>-->
<!--<a href="register.html">注册</a>
<a href="login.html">登入</a>
<a href="#A"></a>-->
<!--<img src="img/1.1.jpg" title="张三"/>-->
<!--<img src="img/1.1.jpg" width="350px" height="200px"/>-->
<!--<img src="img/1.1.jpg" border="100px"/>-->
<!--<a href="http://www.baidu.com">
<img src="img/baidu.jpg">
</a>-->
<ol type="circle">
<li>无序列表第一项</li>
<li>无序列表第二项</li>
<li>无序列表第三项</li>
</ol>
</body>
</html>
2.4.3定义列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a name="A"></a>
<!--<p align="center">第一段</p>
<p align="left">第二段</p>
<p align="right">第三段</p>-->
<!--<h1>一级标题</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>-->
<!--<p>
你好！<br/>
你好！
</p>-->
<!--<hr size="30" color="#ffccc"/>-->
<!--<pre>
你好 hello
你好 hello
</pre>-->
<!--<blockquote>
我是在小学开始去网吧「上网冲浪」的，那时的电脑屏幕非常小，分辨率只有800×600像素（对比一下，iPhone8的分辨率是750x1334px），
网速也很慢，经常掉线或者加载失败。那时的网站性能和体验都不好，而现在网站设计和过去已经有了巨大的变化：注重用户体验、注重页面动效、
富媒体等设计让如今的网站体验并不比软件和手机 APP 差。加上个人电脑的普及，网站仍然是人机交互中非常重要的平台之一。
</blockquote>-->
<!--<a href="register.html">注册</a>
<a href="login.html">登入</a>
<a href="#A"></a>-->
<!--<img src="img/1.1.jpg" title="张三"/>-->
<!--<img src="img/1.1.jpg" width="350px" height="200px"/>-->
<!--<img src="img/1.1.jpg" border="100px"/>-->
<!--<a href="http://www.baidu.com">
<img src="img/baidu.jpg">
</a>-->
<!--<ol type="A">
<li>无序列表第一项</li>
<li>无序列表第二项</li>
<li>无序列表第三项</li>
</ol>-->
<dl>
<dt>学校名称：</dt> <!--定义项-->
<dd>江西XX高校</dd> <!--内容-->
<dt>办学宗旨：</dt>
<dd>爱国明志 敢为人先</dd>
</dl>
</body>
</html>
2.4.4嵌套列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>心语花店</title>
</head>
<body>
<h2>全部商品导航</h2>
<ul type="square">
<li>鲜花用途</li>
<ul type="circle">
<li>爱情鲜花</li>
<li>生日鲜花</li>
<li>友情鲜花</li>
<li>婚庆鲜花</li>
<li>祝贺鲜花</li>
<ul type="square">
<li>送恋人</li>
<li>送朋友</li>
<li>送客户</li>
</ul>
</ul>
</ul>
<ul type="square">
<li>鲜花花材</li>
<ul type="circle">
<li>玫瑰花</li>
<li>康乃馨</li>
<li>百合花</li>
<li>向日葵</li>
<li>紫罗兰</li>
<li>满天星</li>
</ul>
</ul>
<ul type="square">
<li>鲜花类别</li>
<ul type="circle">
<li>日常花束</li>
<li>创意花盒</li>
<li>韩式花束</li>
<li>手提花篮</li>
</ul>
</ul>
</body>
<html>
2.5综合案列——无线吸尘器说明书
<!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 style="font-size: 25px">吸尘器类别：手持式吸尘器<br/>功率：500W<br/>
储尘类型：旋风尘盒/尘桶<br/>吸尘类型：干/湿吸均可<br/>
适用面积:91 m'-150 m'<br/>产品特色:除螨,HEPA 滤网<br/>
线长:充电式(无线)<br/>吸嘴类型:圆毛刷<br/>
适用环境:厨房,地板,地毯,床铺,汽车,沙发,瓷砖,酒店<h/>售后服务;海外进口商品不支铸国内联保,无法享受与产地同等售后服务<br />
品牌名称:Dyson<br />商品名称:我家那闺女Dyson V8 ahsolule 无线吸尘器<br/>
产地:马来西亚<br/>商品编号:V8absoluteUS<br/></p >
<li type ="square" style="color:deeppink">商品展示</i></ul>
<img src="img/01.jpg" title="无线手持吸尘器” align="middle"/>
<h2>产品信息</h2>
<p style="font-size:25px;">品牌:Dyson 戴森<br/>
品名:无线手持吸尘器美版<br/>
型号:V8 Absolute<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/04.jpg" width=" 750" height="450"/>
<h2>戴森科技,英国品质</h2>
<p style="font-size:25px">戴森 V8 美版无绳吸尘器高配版,新的动力设计。<br/>
有助吸除家中四处的过敏原,吸附99.97%小至0.3微米的微尘,<br/>
运行时间高达 40分钟,2款地板吸头及4款配件吸头,清洁空间高达291平米。</p>
<img src="img/03.JPG" align="left" width =" 350" height =" 290" /><br/>
<br/>
HEPA过滤系统<br/>
吸附微尘99.97%小至0.3微米<br/>
米的微尘,减少过敏原回流空至<br/>
气中。<br/></h1>
<br/>
<br/>
<img src="img/02.jpg" align="right">
<blockquote style="font-size:25px">
官网地址：<a href="https://shop.dyson.cn/" >https://shop.dyson.cn/</a>
</blockquote>
</hl>
</body>
</html>
扫一扫
2342
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
