HTML入门02-一些基本的标签及特点

我将它们分为三类:普通标签、表格、列表

普通标签里有:

1.<h>、<p>、<a>、<img>、<hr>、<br>标签

2.文本格式化标签<b><strong><em>、<i>、<small>、<big>、<sub>、<sup>、<ins>、<del>

列表包括:有序列表、无序列表、自定义列表

具体使用和特点在代码中

<html>
    <head>
        <meta charset="utf-8">
        <title>HTML标签</title>
    </head>
    <body>
        <h1><a href="#Normal">普通标签</a></h1>
        <h1><a href="#Table">表格</a></h1>
        <h1><a href="#List">列表</a></h1>
        <div id="Normal">
            <h2>h:标题:从h1到h6重要性依次递减,双标签</h2>
            <p>p:段落标签,双标签</p>
            <a href="#Link">a:链接</a></br>
            <br><img src="#"><a href="#Photo">img:图片标签</a>
            <hr>hr:水平线,单标签,无关闭
            <br>换行,单标签</br>
            <div>文本格式化标签
            <b>b:加粗字体</b>
            <strong>strong:定义加重语气</strong>
            <em>em:定义着重文字</em>
            <i>i:定义斜体字</i>
            <small>small:定义缩小字</small>
            <big>big:定义放大字</big>
            <sub>定义下标字</sub>
            <sup>定义上标字</sup>
            <ins>定义插入字</ins>
            <del>定义删除字</del>
        </div>  <!--文本格式标签-->
            <div>
            <pre>
                pre  :
                对空格和空行进行控制
                (很代码内的空行空格格式一致)
            </pre>
            当鼠标移动至缩写处时,将显示完整内容
            <abbr title="Suoxie">Sx</abbr>实现缩写
            <acronym title="DaXieSuoXie">DXSX</acronym>实现大写缩写
            <bdo>从右向左显示文字</bdo>
            <q>短引用语</q>
        </div>  <!--引用、缩写、右向左显示文本、pre格式控制标签-->
            <div>常用属性
            <br>class:元素可有一个或多个类名(样式文件使用)
            <br>id:每个元素该属性值唯一
            <br>style:行内样式
            <br>title:额外信息(工具条)
        </div>  <!--常用属性-->
            <div id="Link">
                <h2>链接:</h2>
                <br>双标签。标签内容随意,访问位置随意</br>
                <br>属性herf=""指出链接地址;内容可以为网址;可以为以该属性值为ID值的标签ID;可以为网址+ID;可以为mailto:邮箱,发送邮件;</br>
                <br>属性target=""说明新链接的打开方式(_blank:在新窗口打开;_self:在原窗口打开(默认))</br>
            </div>
            <div id="Photo">
                <h2>图片:</h2>
                <br>单标签</br>
                <br>属性src=""指出图片的URL地址</br>
                <br>属性alt,无法载入图片时显示的替代信息</br>
                <br>属性width;height,指定图片宽高</br>
                <br>创建图片映像:定义图像后添加usemap属性,只为对应map的name属性值;使用map标签定义图像地图;最后在map标签中使用area标签定义图像地图中可点击的区域,area中需要包括的属性有:shape:(rect:矩形;circle:圆形;poly:多边形);coords:(左上角坐标,宽高;圆心坐标,半径;各顶点坐标)</br>
                <br>属性align和浮动的使用在h4后就不再支持,对应的效果选用CSS实现</br>
                <br>属性align控制图片在所在文本行的垂直位置(bottom:底部,默认;middle:居中;top:顶部),该属性在h4中被废弃,可使用CSS替代</br>
            </div>
        </div>
        <div id="Table">
            <table>
                <tr>
                    <th>0</th> <th>1</th> <th>2</th>
                </tr>
                <tr>
                    <td>[0,0]</td> <td>[0,1]</td> <td>[0,2]</td>
                </tr>
                <tr>
                    <td>[1,0]</td> <td>[1,1]</td> <td>[1,2]</td>
                </tr>
                <tr>
                    <td>[2,0]</td> <td>[2,1]</td> <td>[2,2]</td>
                </tr>
            </table>
            <br>表格标签table;行标签tr;表头标签th;每格标签td
            <br>table属性border="数值",边框宽度,默认值为0;属性cellpadding=""设置单元格边距(单元格元素和边框的距离);属性celllspacing=""设置单元格间距(单元格之间的距离)
            <br>caption标签给表格提供了标题
            <br>th需放在tr中,格式和td一致
            <br>td内容随意,可以为文本、图片、列表、段落、表单、水平线、表格
            <br>跨列单元格(或表头)需设置属性colspan="所跨列数";跨行单元格(或表头)需设置属性rowspan="所跨行数"
        </div>
        <div id="List">
            <br>类型:有序、无序、自定义
            <h4>无序列表</h4>
            <ul>
                <li>无序01</li>
                <li>无序02</li>
                <li>无序03</li>
            </ul>
            <br>无序列表的类型:由属性style控制(list-style-type:disc,圆点列表;list-style-type:circle,圆圈列表;list-style-type:square,方形列表)
            <h4>有序列表</h4>
            <ol>
                <li>有序01</li>
                <li>有序02</li>
                <li>有序03</li>
            </ol>
            <br>有序列表的类型:由type属性控制(A:大写字母;a:小写字母;I:罗马大写字母;i:罗马小写字母)
            <br>ol可设置start属性,该属性值为序号的初始值
            <dl>
                <dt>列表项01</dt>
                <dd>定义01</dd> <dd>定义02</dd> <dd>定义03</dd>
                <dt>列表项02</dt>
                <dd>定义01</dd> <dd>定义02</dd> <dd>定义03</dd>
            </dl>
        </div>
    </body>
</html>

  

猜你喜欢

转载自www.cnblogs.com/C-bj/p/12119395.html