H5的段落标签、图片标签、列表标签与链接标签

段落标签

（1）<p>段落标签</p>

（2）<nobr>强制不换行标签，会出现滚动条</nobr>

（3）<pre>保留原始排版标签</pre>

图片标签

图片标签的常用属性有以下6个：

（1）src：路径

（2）alt：提示文字

（3）width,height:宽度与高度

（4）border：边框

（5）vspace：垂直间距

（6）hspace:水平间距

注意：插入图片时，尽量使用相对路径。

列表标签

列表有三种类型，有序列表、无序列表和定义列表。列表的主要标签有：<ul>、<ol>、<dir>、<dl>、<menu>、<dt>、<dd>、<li>。

<ul>：无序的，unordered，采用符号标致序列，属性为type，表示项目符号，可选项为circle、disc和square。

<ol>：有序的，ordered，采用序号标致序列，属性为start和type。

一、有序列表，利用标签<ol>和<li>，前者当容器，后者当项目。设置的属性为start与type，分别负责开始编码和编码类型。

 <div name='例题5'>
        <h5>例题5-列表做调查问卷</h5>
        <div>
            <ol>
                <li>你喜欢的cp是哪一个？
                    <ol start='1' type='A'>
                        <li>南硕</li>
                        <li>糖锡</li>
                        <li>国旻</li>
                        <li>珍锡</li>
                    </ol>
                </li>
                <li>为什么喜欢这个cp？
                    <ol start='2' type='A'>
                            <li>长得好</li>
                            <li>比较真</li>
                            <li>太无聊</li>
                            <li>没理由</li>
                    </ol>
                </li>
            </ol>
        </div>

效果图：

二、无序列表

无序列表，使用<ul>和<li>标签。前者当容器，后者当项目。使用type属性，负责编码类型。

三、定义列表

定义列表，Definition Lists，主要用于解释名词。定义列表包含两个层次的列表，第一层是要解释的名词，第二层是具体的解释。

用到的标签为<dl>、<dt>和<dd>。<dl></dl>标识了列表的开始与结束范围，<dt></dt>是列表第一层，表示要解释的名词，该名词也可以是图片。<dd></dd>是列表的第二层，表示具体的解释，一个名词可以有多个解释，因此，一个<dt>对标签后面，可以跟着多个<dd>对。

基本语法格式：

 <div>
            <dl>
                <dt>名词1</dt><dd>解释1</dd>
                <dt>名词2</dt><dd>解释2</dd>
                <dt>名词3</dt><dd>解释3</dd>
            </dl>
        </div>

效果图：

一个<dt>标签下面可以跟着多个<dd>标签。淘宝的商品简介就是定义列表做的。商品图片为<dt>标签，商品详情为多个<dd>标签。他们被<dl>标签包裹在里面。

<div class='bg'>
            <dl>
                <dt>
                        <img src='./Marry.jpg' class='imgStyle' alt='南硕结婚' />
                </dt>
                <dd>
                    <font  class='priceIcon'>￥</font>
                    <font class='price'>1,000,000,000,00</font>
                </dd>
                <dd>
                    <font class='fontStyle'>南硕cp</font>
                    <font class='fontStyle'>铁打的cp</font>
                </dd>
            </dl>
        </div>

.bg{
    background: pink;
}
.imgStyle{
    width:10%;
}
/* ￥图标 */
.priceIcon{
    color:#c00;
    font: size 5;
}
/* 价格 */
.price{
    color:rgb(87, 214, 155);
    font: size 5;
}
/* 字体样式 */
.fontStyle{
    font-size: 1.5em;
}

效果图：

链接标签

一、文本链接

一个网站往往由多个页面组成，页面之间根据连接确定相互的导航关系，从而实现网站互联。

文本连接，hypertextlink，通常简称为超链接（hyperlink），是指文档中的文字或图像，与另一个文档链接在一起。链接元素可以是文字，也可以是图片或者其他页面元素。其中，href是hypertextreference的缩写。

链接地址可以是绝对地址，也可以是相对地址。

绝对路径：文件在硬盘上的真正路径。缺点：需要输入更多的内容，文件被移动后，需要重新设置所有的相关路径。

相对路径：最适合网站的内部链接。优点：站点文件夹所在服务器地址发生改变时，文件夹内的所有内部链接都不会出问题。

二、书签链接

如果浏览器的页面内容较多，页面过长，需要不断地拖动滚动条。如果在该网页上建立目录，只要单击目录上的项目就能实现网页相应位置的跳转，这就是书签链接。

书签链接分两步走：一是建立书签，二是为书签制作链接。

<a name='top'>页面顶部</a>

<a href=“#top”>回到顶部</a>