html列表与图片应用

/1.在html文档中使用特殊字符

• 空格          &nbsp；
• 版权号       &copy；(圈内是C）
• 注册商标    ®(圈内是R)
• “              "
• &             &amp；
• <              &qt；

注释： <p>&nbsP;&nbsp;&nbsP;&nbsp;从现在开始，...</p>         结果是：    从现在开始，...

&It；p&qt；&It；/p&qt;这是什么？                        结果是：<p><p>这是什么？

2.列表的标记

(1)无序列表

• <ul  type="项目符号类型">
•      <li type="项目符号类型">内容1</li>
•      <li> 内容2</li>
• </ul>                                                                                                                                      

例如：<ul type="circle">

              <li>她很美</li>

              <li>她很善良</li>

               ...

        </ul>

注释：  参数值                描述

            disc                 实心圆

            circle               空心圆

            square             实心方块

(2)有序列表

• <ol  start="列表起点" type="项目符号类型">
•     <li>内容1</li>
•     <li>内容2</li>
•       ...
• </ol>

例如:<ol type="a" start="26">

            <li>你很美</li>

            <li>你很善良</li>

              ...

       </ol>

   显示结果：z.你很美

                aa.你很善良

注释： 属性名称                属性值                   说明

               type                       1             表示以1,2,3,4来表示

                                       a             表示以a,b,c,d来表示

                                       A             表示以A,B,C,D来表示

                                        i             表示以i，ii，iii来表示

                                        I             表示以I,II,III来表示

（3）定义列表

• <dl>
•       <dt>标题1</dt>
•       <dd>内容1</dd>
•       <dd>内容2</dd>

        </dl>                                                                                                                                         例如：<dl>

              <dt>电脑整机</dt>

              <dd>笔记本</dd>

              <dd>上网本</dd>

              <dd>平板电脑</dd>

        </dl>

显示结果:  电脑整机

                       笔记本

                       上网本

                       平板电脑

注释：<dl></dl>定义列表

        <dt></dt>表示一个项目

        <dd></dd>表示一个项目下的更详细的内容的解释

3.图片

     <img src="图片的路径"/>

• 如果当前文档和目标文档位置平行，则直接书写目标文档全称。
• 如果当前文档和目标文档所在文件夹位置平行，则书写为 文件夹名称/目标文档全称。
• 如果当前文档所在文件夹和目标文档位置平行，则书写为../目标文档全称。

注释: 图片与网页在同一个文件夹内,<img src="01.png"/>

        图片所在的文件夹与网页在同一个文件夹内,<img src="图片文件夹名/01.png"/>

        图片所在的文件夹与网页所在的文件夹在同一个文件夹内,<img src="../../01.png"/>   ../表示向上一级。

 

 4.  属性名称             属性值                                  说明

        src                    UPL                                图片的路径

        alt                     文本                        规定图片的替代文本【图片无法显示时】

       title                   文本                        鼠标悬停时显示的内容

       width            像素/百分比                        设置图片宽

       height           像素/百分比                        设置图片高

       border               数字                              设置图象边框

       align                  left                          图片靠左，文字靠右

                                right                        图片靠右，文字靠左

                                top                             文字垂直居上靠

                              middle                           文字垂直居中

                              bottom                         文字垂直居下（默认）

        vspace               像素                         定义图像顶部和底部的空白（垂直边距）

        hspace               像素                         定义图像左侧和右侧的空白（水平边距）