2.1 文字与段落排版
2.1.1 段落标签
段落标签<p>是HTML格式中特有的段落元素，在HTML格式里不需要在意文章每行的宽度，不必担心文字是不是太长了而被截掉、 会根据窗口的宽度自动转换到下一行。
段落标签的语法为:
<p align="left l center l right">文字/p>
属性align:设置段落文字在网页上的对齐方式，包括left(左对齐)、center(居中)和right(右对齐).默认为left。
格式中的“|”表示“或者”，即多项选其一。
<body>
<p align="center">段落标签</p>
<p align="right">作者：小沐在学习</p>
<p align="left">我在左边哦</p>
</body>
2.1.2 标题标签
标题使用<hl>至<h6>标签进行定义。 <hI>定义最大的标题，<h6>定义最小的标题HTML会自动在标题前后添加一个额外的换行。
标题文字标签的格式为:
<h# align="left l center l right">标题文字</h#>
属性align:设置标题在页面中的对齐方式，包括left (左对齐)、center(居中)或right(右对齐)，默认为left。
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
2.1.3 换行标签
<br/>放在任意一行中都会使该行换行，如果<br/>放在一行的末尾，可以使后面的文字、图像、表格等显示于下一行， 而又不会在行与行之间留下空行，即强制文本换行。
换行标签的语法:
文字<br/>
下面代码有段落标签和换行标签的例子，供大家直观感受二者的区别。
<body>
<h3>《登高》</h3>
风急天高猿啸哀，渚清沙白鸟飞回。<p/>
<!--<p>标签-->
无边落木萧萧下，不尽长江滚滚来。<br/>
<!--<br/>标签-->
万里悲秋常作客，百年多病独登台。<br/>
艰难苦恨繁霜鬓，潦倒新停浊酒杯。<br/>
</body>
2.1.4 水平线标签
当浏览器解释到HTML文档中的<hr/>标签时，会在此处换行，并加入一条水平线段。
水平线标签的格式为:
<hr align=" left I center I right" size="横线粗细" width="横线长度" color="横线色彩" noshade=" noshade"/>
属性color:设定线条色默认为黑色。色彩可以用相应的英文名称或以"#"引导的一个十六进制代码表示。
属性noshade:规定水平线的颜色呈现为纯色，而不是有阴影的颜色。
| 色彩 | 色彩英文名称 | 十六进制代码 |
|---|---|---|
| 黑色 | black | #000000 |
| 蓝色 | blue | #0000ff |
| 棕色 | brown | #a52a52 |
| 青色 | cyan | #00ffff |
| 灰色 | gray | #808080 |
| 绿色 | green | #008000 |
| 乳白色 | ivory | #fffff0 |
| 橘黄色 | orange | #ffa500 |
| 粉红色 | pink | #ffc0cb |
| 红色 | red | #ff0000 |
| 白色 | white | #ffffff |
| 黄色 | yellow | #ffff00 |
| 深红色 | crimson | #cd061f |
| 黄绿色 | greenyellow | #0b6eff |
| 紫色 | purple | #800080 |
| 淡紫色 | lavender | #dbdbf8 |
<body>
<p align="center">关于2016届信息与计算机学院优秀毕业生的名单</p>
<hr color="red"/>
<!--水平线标签-->
<p align="center">13软件技术1班（3名）:张三，李四，王五<br/>
13计算机应用2班（3名）:张四，李三，王六<br/>
</body>
2.1.5 预格式化标签
<pre>标签可定义预格式化的文本。被包围在<pre>标签中的文本通常会保留空格和换行符，而文本也会呈现为等宽字体。
预格式化标签的语法为:
<pre>文本块</pre>
<body>
<pre>
预格式化标签
保留： 空格和换行
</pre>
</body>
2.1.6 缩排标签
<blockgquote>标签可定义一个块引用。<blockquote>与<blockquote>之间的所有文本都
会从常规文本中分离出来，经常会在左、右两边进行缩进，而且有时会使用斜体。也就是
说，块引用拥有它们自己的空间。
缩排标签的语法为:
<blockquote>文本</blockquote>
<body>
这里有一段长文本引用：
<blockquote>
雨是最寻常的，一下就是三两天。可别恼。看，像牛毛，像花针，像细丝，密密地斜织着，人家屋顶上全笼着一层薄烟。树叶子却绿得发亮，小草也青得逼你的眼。傍晚时候，上灯了，一点点黄晕的光，烘托出一片安静而和平的夜。乡下去，小路上，石桥边，有撑起伞慢慢走着的人；还有地里工作的农夫，披着蓑，戴着笠的。他们的草屋，稀稀疏疏的，在雨里静默着。
</blockquote>
*请注意，浏览器在blockquote标签前后添加了换行，并增加了外边框。
</body>
2.1.7 案例
<body>
<h1 align="center">杜甫</h1>
<!--标题标签-->
<p align="right">出生日期：712年2月12日</p>
<!--段落标签-->
<hr color="pick"/>
<!--水平线标签-->
代表作：《登高》等<br/>
<!--换行标签-->
<pre>
《登高》
风急天高猿啸哀，渚清沙白鸟飞回。
无边落木萧萧下，不尽长江滚滚来。
万里悲秋常作客，百年多病独登台。
艰难苦恨繁霜鬓，潦倒新停浊酒杯。
</pre>
<!--预格式化标签-->
<h2 align="center">白话翻译</h2>
<blockquote>
秋风急秋气高猿声凄哀，洲渚清沙滩白鸟儿回旋。落叶一望无际萧萧堕下，长江不见尽头滚滚涌来。万里悲秋感慨长期漂泊，一生多病独自登上高台。深为憾恨鬓发日益斑白，困顿潦倒病后停酒伤怀。
</blockquote>
<!--缩排标签-->
</body>
2.2 超链接
2.1.1 超链接简介
(1) 超链接的定义
所谓超链接(Hyperlink),是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页。
(2)超链接的分类
根据超链接目标文件的不同，超链接可分为页面超链接、锚点超链接和电子邮件超链接等； 根据超链接单击对象的不同，超链接可分为文字超链接、图像超链接和图像映射等。
(3)路径
创建超链接时必须了解链接与被链接文本的路径。在一个网站中，路径通常有3种表示方式:绝对路径、根目录相对路径和文档目录相对路径。
绝对路径就是主页上的文件或目录在硬盘上真正的路径(URL和物理路径)。
根目录相对路径是指从站点根文件夹到被链接文档经过的路径。
文档目录相对路径。它是相对于某个基准目录的路径，以当前文件所在的路径为起点，进行相对文件的查找。相对路径适合于创建网站内部链接。
2.2.2 超链接的应用
2.2.2.1 锚点标签<a>···</a >
HTML使用<a>标签来建立一个链接，通常<a>标签又称为锚。建立超链接的标签以<a> 开始，以</a >结束。
<a>标签的语法:
<a href=" " title="指向链接显示的文字" target="窗口名称">文本文字</a >
2.2.2.2 指向其他页面的超链接
<body>
<a href="register.html">注册页面</a>
<a href="login.html">登录页面</a>
<a href="http://baidu.com">百度</a>
</body>
2.2.2.3 指向书签的超链接
创建指向其他页面的超链接，就是在当前页面与其他相关页面之间建立超链接。
<body>
<a href="#one">1.《绝句》</a>
<a href="#two">2.《登高》</a>
<hr color="red"/>
<a name="one">《绝句》</a>
<pre>
两个黄鹂鸣翠柳，
一行白鹭上青天。
窗含西岭千秋雪，
门泊东吴万里船。
</pre>
<a name="two">《登高》</a>
<pre>
风急天高猿啸哀，渚清沙白鸟飞回。
无边落木萧萧下，不尽长江滚滚来。
万里悲秋常作客，百年多病独登台。
艰难苦恨繁霜鬓，潦倒新停浊酒杯。
</pre>
</body>
点击2.《登高 》，画面跳转到《登高》
2.2.2.4 指向下载文件的超链接
如果希望制作下载文件的超链接，只需在链接地址处输入文件所在的位置，当浏览户单击超链接后，浏览器会自动判断文件的类型，以做出不同情况的处理。
指向下载文件的超链接语法:
<a href=" ">热点文本</a>
<body>
<a href="https://www.dcloud.io/hbuilderx.html">下载hbuilder</a>
</body>
2.2.2.5 指向电子邮件的超链接
网页中电子邮件地址的超链接，可以使网页浏览者将有关信息以电子邮件的形发送给电子邮件的接收者，通常情况下，接收者的电子邮件地址位于网页页面的底部。
指向电子邮件超链接的语法:
<a bhref="mailto:E-mail地址">热点文本</a >
<body>
<a href="mailto:480351268@qq.com">小沐在学习</a>
</body>
2.3 图像
2.3.1 网页图像的格式及使用要点
(1).图像文件的格式很多，但一般在网页中使用的图片格式并不多，主要有GIF，JPEG，PNG。
(2).使用网页图像的要点
高质量的图像因其图像体积过大，不太适合网络传输。一般在网页设计中选图像不要超过8KB,如必须选用较大图像时，可先将其分成若干小图像，显示时再通过将这些小图像拼合起来。
网页中的动画并非越多越好，页面中应合理使用动画，太炫酷的动画会分散网站访客的注意力。
如果在同一文件中多次使用相同的图像时，最好使用相对路径查找该图像。相
2.3.2 图像标签
在HTML中，用<img>标签在网页中添加图像，图像是以嵌入的方式添加到网页中的。
图像标签的格式:
< img src="图像文件名" alt="替代文字title="鼠标悬停提示文字"width="图像宽度"height-"图像高度”border="边框宽度"align="环绕方式|对齐方式"/>
<body>
<img src="img/蔡徐坤.png"/>
</body>坤坤素材
ps：网速太慢会导致图片加载不出哦
2.3.2.1 设置图像大小
<body>
<img src="img/蔡徐坤.png" width="200px" height="300px"/>
</body>坤坤变瘦了
2.3.2.2 图像的边框
<body>
<img src="img/蔡徐坤.png" border="50px"/>
</body>坤坤的超绝黑色边框
<body>
<img src="img/蔡徐坤.png" border="50px" title="ikun"/>
</body>光标一放，ikun闪现。
2.3.3 图像超链接
图像也可作为超链接热点，单击图像则跳转到被链接的文本或其他文件。
语法: <a href="URL"> img src="图像文件名"/>/a>
<body>
<a href="http://baidu.com"><img src="img/蔡徐坤.png" "/>
</body>点击坤坤
跳转百度
2.3.4 设置网页背景图像
背景属性将背景设置为图像。属性值为图片的URL。如果图像尺寸小于浏览器窗口， 那么图像将在整个浏览器窗口进行复制。格式:
<body back ground="背景图像路径">
设置网页背景图像应注意以下要点:
(1)背景图像是否增加了页面的加载时间，背景图像文件大小不应超过10KB。
(2)背景图像是否与页面中的其他图像搭配良好。
(3)背景图像是否与页面中的文字颜色搭配良好。
<body>
<body background="img/蔡徐坤.png" "/>
</body>
2.3.5 图文混排
<head>
<meta charset="utf-8" />
<title>图文混排</title>
</head>
<body>
<h1 align="center">江西应用工程职业学院</h1>
<hr />
<img src="img/b.png" width="250" height="350" align="right" alt="学院描述"/>
江西应用工程职业学院系一所经江西省政府批准、中国教育部备案、面向全国招生的国有公办全日制普通高职院校，隶属江西省教育厅。<br />
办学宗旨：以人为本 培养高素质高技能人才<br />
校训：爱国明志 敢为人先<br />
校园精神：诚朴坚卓 达谦智勇<br />
</body>
2.4 列表
2.4.1 无序列表
无序列表，就是列表中列表项的前导符号没有一定的次序，而是用黑点、圆圈和方框等一些特殊符号标识。无序列表并不是使列表项杂乱无章，而是使列表项的结构更清晰、更合理。
当创建一个无序列表时，主要使用HTML的<ul>标签和<li>标签来标记。其中<u>标务标识一个无序列表的开始；<li>标签标识一个无序列表项。格式:
<ul type ="符号类型">
<li type="符号类型1">第一个列表项</li>
<li type="符号类型2">第二个列表项</li>
......
</ul>
<body>
<li>无序列表第一项</li>
<li>无序列表第二项</li>
<li>无序列表第三项</li>
</body>
2.4.1.1 在<ul>后指定符号的样式
<body>
<ul type="circle">
<li>无序列表第一项</li>
<li>无序列表第二项</li>
<li>无序列表第三项</li>
</ul>
</body>
2.4.1.2 在<li>后指定符号的样式
<body>
<ul type="circle">
<li>无序列表第一项</li>
<li type="square">无序列表第二项</li>
<li>无序列表第三项</li>
</ul>
</body>
2.4.2 有序列表
<body>
<ol>
<li>有序列表第一项</li>
<li>有序列表第二项</li>
<li>有序列表第三项</li>
</ol>
</body>
给有序列表设置样式
2.4.3 定义列表
定义列表又称为释义列表或字典列表，定义列表不是带有前导字符的列项目，而是一列实物以及与其相关的解释。当创建一个定义列表时，主要用到3个HTML标签:<dl>标签<1利<d标签。可以使用小1创建自定义列表，使用小利(d定义列表中具体的数招一般情况下使用dt定义列表的二级列表项，也可以认为是dd 的一个概要信息，使用dd来定义最底层的列表项。
格式:
<dl>
<dt>.......第-个标题项......</di>
<dd>......对第一个标题项的解释文字.....</dd>
<dt>.....第二个标题项.....</dt>
<dd>.....对第二个标题项的解释文字......</dd>
</dl>
<body>
<dt>院校名称：江西应用工程职业学院</dt>
<dt >办学宗旨:</dt>
<dd >以人为本 培养高素质高技能人才</dd>
<dt>校训：</dt>
<dd>爱国明志 敢为人先</dd>
<dt>校园精神：</dt>
<dd>诚朴坚卓 达谦智勇</dd>
</body>
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>
扫一扫
928
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
