2.1 文字与段落排版
2.1.1 段落标签
<p></p>标签
<p align=“”>...</p>：设置对齐方式，有三种对齐方式
<p align=“center”>...</p>：居中对齐
<p align=“left”>...</p>：左对齐
<p align=“right”>...</p>：右对齐
如果没有设置对齐方式，那就是默认对齐方式（左对齐）。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
D<p align="center">第一行</p>
<p align="right">第二行</p>
<p align="left">第三行</p>
<p>第四行</p>
</body>
</html>
2.1.2 标题标签
<h1>...</h1>:标题标签(一级标题)，里面可以有很多个二级标题
<h2>...</h2>:二级标题，里面可以有很多三级标题
<h3>...</h3>:三级标题，里面可以有很多四级标题
<h4>...</h4>:四级标题，里面可以有很多五级标题
<h5>...</h5>:五级标题，里面可以有很多六级标题
<h6>...</h6>:六级标题
所有标题有一个默认的加粗变大效果，由一级到六级逐渐变小
标题标签也可以使用align对齐方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>一级</h1>
<h2>二级</h2>
<h3>三级</h3>
<h4>四级</h4>
<h5>五级</h5>
<h6>六级</h6>
</body>
</html>
2.1.3 换行标签
<p>...</p>:如果想要在p标签里面实现换行，可以使用<br/>。
换行标签会比p标签更紧凑，不会跟p标签的空隙那么大。
第一行是使用了<br/>标签，而第二行是只有p标签。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>
你好<br/>
第二行
</p>
<p>你好</p>
<p>第二行</p>
</body>
</html>
2.1.4 水平线标签
<hr/>水平线标签,默认为黑色，且细
<hr color=“#”/>：可以更改颜色（尽量避免使用英文单词，而是用编码）（编码如下）
<hr size="20px"/>：可以更改水平线的粗细
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<hr size="9" color="#dbdbf8"/>
</body>
</html>2.1.5 预格式化标签
<pre>...<pre>:被pre标签包裹的内容在编写使换行会有效果，但是p标签里面不会有。不仅让换行有效果，还会让空格有效果，Tab也会有效果（上一小节的水平线效果截图也在这里）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<pre>
你好
第二行
<pre>
</body>
</html>
2.1.6 缩排标签
<blockquote>...</blockquote>:缩排标签也叫快引用标签，默认有一个边框，把内容包住，但是我们看不见，跟p标签比可以空出两边的内容。可以用来当做引用名人名言或者领导说的话。
<blockquote>...</blockquote>
<p>...</p>太长了不好截屏，但是格式如上所示。
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.1.1 超链接简介
2.1.1.1 超链接的定义
超链接的定义是从一个网页指向另一个目标的链接目标，此目标可以是另一个网页，或者网页中的其他位置，图片和电子邮件地址等。
2.1.1.2 超链接的分类
根据目标文件不同有：页面超链接，锚点超链接，电子邮件链接等。
根据单机对象不同有：文字超链接，图像超链接。图像映射等。
2.1.1.3 路径
URL——统一资源定位器，指的是每一个网址都具有的独立的地址。创建超链接时需要了解链接与被链接文本的路径，在一个网站中，路径通常有三种表示方式。
绝对路径：绝对路径是文件或者目录在硬盘上的真正的路径，例如D:\wed\index.html就代表了index,html文件的物理绝对路径；http://www.hao123.com/index,html代表了URL的绝对路径。
2.2.2 超链接的应用
超链接的另一个叫法是锚，是使用<a>标签标记的。
2.2.2.1 锚点标签<a>···</a >
<a href="...">...</a>
<a href="register.html">注册</a>
<a href="login.html">登录</a>2.2.2.2 指向其他页面的超链接
href后面可以填写链接“http://.....com”亦或者html形式去的内部写的超文本代码链接（形式如上所示）
2.2.2.3 指向书签的超链接
定义书签，给它打标签，然后跳转到打标签的位置（书签是一种标记）。
<a name="p">...</a>：给这个代码打上p“标签”，之后使用<a href="#p">...</a>告诉浏览器我要转到书签去，转到p这个书签去，而不是其他地方。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a name="p"></a>
<a>这是p标签</a>
<a href="#p">转到p标签页面</a>
</body>
</html>2.2.2.4 指向下载文件的超链接
写文件名，不能写链接。格式还是<a href="文件名.zip">...</a>之后加上拓展名，指向下载的文件。
<a href="111.zip">下载</a>2.2.2.5 指向电子邮件的超链接
比如<a href="mailto:邮箱号">联系我</a>这种格式，最后具体填什么由自己打就行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="mailto:a742962580@163.com">联系我</a>
</body>
</html>超链接的指向样式基本是<a href="...">...</a>的形式，由href指向某位置，然后因为各种指向方向不同，其中的格式差别也会很大。
2.3 图像
2.3.1 网页图像的格式及使用要点
2.3.1.1 常见的网页图像格式
有三种格式GIF，JPEG，PNG
JPEG比jpg大小要小，也可以用jpg，但是推荐用JPEG
2.3.1.2 使用网页图像的要点
尽量用小一点的图，因为小图加载会更快，尽量小于8KB。（说一句题外话，PS设计图片的时候也可以尽量用小一点的点缀，不要太大，因为加载会过慢。）
图片不用太多，因为文字的重点，图片是点缀，不分主次不太好。
尽量使用相对路径
2.3.2 图像标签
<img.../>:图像标签，属性不分前后，只要是编辑的同一个图片，分多行或者写在一行都可以。
<img src=""/>:路径标签通过<img src="img/sys.jpg"/>图片一定要放到img文件夹里面，其次是路径里对应的名字和后缀名一定要正确，这样才能成功
<img title=""/>:在此标签里面输入的字符，加载网页后鼠标悬停在图片处可以浮现出对应的字符。
<img align=""/>:对齐方式，上面有写，略
<img src="img/1.png" width="350px" height="200px" border="10px" title="小吴的爱心"/>
2.3.2.1 图像的替换文本说明
2.3.2.2 设置图像大小
<img width=""/>:指的是图像的宽度
<img height=""/>:设置的是图像的高度
图片的高宽是有比例的，设置的高宽尽量按照比例走。
2.3.2.3 图像的边框
<img border=""/>:给图片一个值，设置图片的边框
2.3.3 图像超链接
<a href="http//:....com"><img src="img/1.png" /></a>
先前是把文字变成超链接点进去的入口，现在是以图片的形式跳转，点击图片即可跳转到自己现需要跳转到的网页。
2.3.4 设置网页背景图像
网页的内容都<body>标签里面，设置网页背景水印也在这里，
<body background="img/....(.png/.jpg)">:注意路径和名称，千万不要打错
2.3.5 图文混排
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图文混排</title>
</head>
<body>
<h1 align="center">吾辈修士，何俱也<h1/>
<hr color="#ff0000" size="15px"/>
<img src="img/1.png" align="right" width="950px" height="550px">
<h1>
证天地<br/>
诛邪祟<br/>
以天地鉴我明心<br/>
以诸邪铸我天路<br/>
天通之路证我心<br/>
万般邪祟皆虚妄<br/>
我心澄澈<br/>
万法不侵<br/>
</h1>
</body>
</html>
形式以及结果都如上所示
2.4 列表
2.4.1 无序列表
列表前方的图像是点或者圆，而不是序号。无序列表并不是使列表杂乱无章，而是使其看起来更清晰合理。
2.4.1.1 在<ul>后指定符号的样式
<ul type="disc">：符号为实心圆点
<ul type="disc">
<li>无序一</li>
<li>无序二</li>
<li>无序三</li>
</ul>
<ul type="circle">：符号为空心圆点
<ul type="circle">
<li>无序一</li>
<li>无序二</li>
<li>无序三</li>
</ul>
<ul type="square">：符号为方块
<ul type="square">
<li>无序一</li>
<li>无序二</li>
<li>无序三</li>
</ul>
<ul img src="graph,gif">：符号为指定的图片文件（书上的，暂时没有弄出来）后续搜索也没有头绪
2.4.1.2 在<li>后指定符号的样式
<li type="disc">
<li >...(数量效果同上述<ul>相似)（格式如下所示）
<ul>
<li type="disc">无序一</li>
<li type="circle">无序二</li>
<li type="square">无序三</li>
</ul>
2.4.2 有序列表
有序列表和无序列表及其相似，<li>是列表项，决定它是有序还是无序的取决于前面的<ul>或者<ol>
有序列表格式是
<ol>
<li>有序一</li>
<li>有序二</li>
<li>有序三</li>
</ol>有序列表的类型（在这里就不展示了，毕竟就算使用记事本也可以看看的）：
<ol type="1">：序号为数字
<ol type="A">：序号为大写英文字母
<ol type="a">：序号为小写英文字母
<ol type="I">：序号为大写罗马字母
<ol type="i">：序号为小写罗马字母
2.4.3 定义列表
和有序无序不一样，里面比较适合放有标题有内容的东西。如下所示会很容易明白
<dt>院校名称：</dt>
<dd>剑修百彩宗</dd>
<dt>办学宗旨：</dt>
<dd>于危难救世，于繁世退凡</dd>
<dt>校训：</dt>
<dd>诛邪祟，铸明心</dd>
<dt>校园精神：</dt>
<dd>踏歌行，证吾无上道心</dd>
2.4.4 嵌套列表
在列表中嵌套定义，有序和无序列表。注意，在写代码的时候一定要注意缩进，这样的话可以很容易寻找到哪一行对应哪一行。不管是什么类型的计算机语言，都要注意缩进来达到美观，而且便于自己查看代码哪里出错。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌套列表</title>
</head>
<body>
<h2>全球汇支付向导</h2>
<ul type="circle">
<li>全球汇支付方式</li>
<ul type="disc">
<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>
</body>
</html>
2.5 综合案例——无线吸尘器说明书
接下来就是结合上述内容开始的案例试炼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" >
<title>无线吸尘器说明书</title>
</head>
<body>
<hl>DysonV8 absolute无线吸尘器</hl>
<hr color= " deeppink" />
<ul style =" font-size:25px" > https:/
<li type=" square"style=" color:deeppink" >商品参数</li>
<p style=" font-size:25px" >
吸尘器类别:手持式吸尘器<br/>
功率:500 W<br/>
储尘类型:旋风尘盒/尘桶<br/>
吸尘类型:干/湿吸均可<br/>
适用面积:91 m-150 m<br/>
产品特色:除螨,HEPA滤网<br/>
线长:充电式(无线)<br/>
吸嘴类型:圆毛刷<br/>
适用环境:厨房,地板,地毯,床铺,汽车,沙发,瓷砖,酒店<br/>
售后服务:海外进口商品不支持国内联保,无法享受与产地同等售后服务<br/>
品牌名称:Dyson<br/>
商品名称:我家那闺女 Dyson V8 absolute 无线吸尘器<br/>
产地:马来西亚<br/>
商品编号:V8absoluteUS</p>
<li type="square" style=" color: deeppink" >商品展示</li>
</ul>
<img src="img/1.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/>
过滤系统、噪声分贝更小</p>
<h2>产品特点</h2>
<img src="img/tedian.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/left.JPG"align="left"width="350"height="290"/><br/><br/><h1>
HEPA 过滤系统<br/>
吸附微尘 99.97%小至 0.3 微米<br/>
米的微尘,减少过敏原回流空至<br/>
气中。<br/></h1>
<br/>
<br/>
<br/>
<br/>
<img src="img/canbin.jpg">
<blockquote style="font-size:25px">官网地址:<a href="https://shop.dyson.cn/">https://shop. dyson. cn/</a ></blockquote>
</hl>
</body>
</html>
扫一扫
1283
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
