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

最新推荐文章于 2024-03-02 15:07:15 发布

weixin_30622107

最新推荐文章于 2024-03-02 15:07:15 发布

阅读量931

点赞数

原文链接：http://www.cnblogs.com/qingshanyici/p/10571945.html

版权

段落标签

（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;
}