HTML常见标签

常用标签

标题标签

        <h1>一级标签</h1>
        <h2>二级标签</h1>
        <h3>三级标签</h1>
        <h4>四级标签</h1>
        <h5>五级标签</h1>
        <h6>六级标签</h1>

//注意：无效标签会按照纯文本内容展示在页面上

段落标签

<p>我好像在哪儿见过你</p>

文本标签

        <!--
            知识点:文本标签
            
            span:文本标签
            br:换行标签
            hr:分割线标签
        -->
        <span>我好像在哪儿见过你</span>
        <br />
        <span>我听见了你的声音</span>
        <hr />

图片标签

        <!--
            知识点:图片标签
            
            img:图片标签
                src:图片资源属性
                width:宽属性
                height:高属性
                
            注意:
                100px 表示100像素
                30%       表示占页面宽度的百分比
        -->
        
        <img src="../img/01.jpg" width="100px" height="120px" />
        <br />
        <img src="../img/01.jpg" width="30%" />
        <br />
        <img src="https://b0.bdstatic.com/fb0392d8c9bd8656cca4983f62c39007.jpg@h_1280" width="30%" />

无序列表

        <!--
            知识点:无序列表
            ul:无序列表
                type:列表的类型
                    circle:空心圆
                    disc:实心圆 
                    square:实心方块
            li:项
        -->
        
        <h3>上课注意事项</h3>
        <ul type="square">
            <li>不能睡觉</li>
            <li>不能玩手机</li>
            <li>不能打游戏</li>
            <li>不能浏览与课程无关的网页</li>
        </ul>

有序列表

        <!--
            知识点：有序列表
            
            ol：有序列表
                type：列表的类型
                    1-阿拉伯数字
                    a-小写英文
                    A-大写英文
                    i-小写罗马数字
                    I-大写罗马数字）
            li：项
        -->
        
        <ol type="I">
            <li>aaa</li>
            <li>bbb</li>
            <li>ccc</li>
            <li>ddd</li>
        </ol>

定义列表

        <dl>
            <dt>
                <h1>薛之谦</h1>
                <img src="../img/01.jpg" width="100px" />
            </dt>
            <dd>
                <p>1983年7月17日出生于上海</p>
                <p>毕业于格里昂酒店管理学院</p>
                <p>华语流行乐男歌手、影视演员、音乐制作人</p>
                <p>2005年，因参加选秀节目《我型我秀》而正式出道</p>
                <p>2006年6月12日，发行个人首张同名专辑《薛之谦》</p>
                <p>随后凭借歌曲《认真的雪》获得广泛关注</p>
            </dd>
        </dl>

列表案例

        <!--
            注意：HTML标签可以无限层嵌套！！！
        -->
        
        <ul>
            <li>
                <h3>荤菜</h3>
                <ol>
                    <li>回锅肉</li>
                    <li>鲜椒兔</li>
                    <li>酸菜鱼</li>
                    <li>冷锅兔</li>
                    <li>宫保鸡丁</li>
                    <li>水煮肉片</li>
                </ol>
            </li>
            <li>
                <h3>素菜</h3>
                <ol>
                    <li>家乡豆腐</li>
                    <li>酸辣土豆丝</li>
                    <li>土豆丝炒洋芋</li>
                    <li>西红柿炒番茄</li>
                </ol>
            </li>
            <li>
                <h3>汤类</h3>
                <ol>
                    <li>丝瓜汤</li>
                    <li>皮蛋黄瓜汤</li>
                    <li>翡翠白玉汤</li>
                    <li>胡豆瓣酸菜粉丝汤</li>
                </ol>
            </li>
        </ul>

超链接

       <!--
            知识点:超链接
            
            a:超链接
                href:链接地址
                target:跳转方式
                    _self:表示在当前页面跳转
                    _blank:表示新增卡页跳转
        -->
        
        <!--跳转到本地页面-->
        <a href="08_列表案例.html" target="_blank">跳转到列表案例</a>
        <a href="08_列表案例.html" target="_self">跳转到列表案例</a>
        
        <!--跳转到外部页面-->
        <a href="http://www.baidu.com">跳转到百度页面</a>
        
        <!--图片超链接-->
        <a href="07_定义列表.html">
            <img src="../img/01.jpg" width="100px" />
        </a>

锚链接

        <!--导航栏-->
        <a href="#new01">法治</a>
        <a href="#new02">国际</a>
        <a href="#new03">娱乐</a>
        
        <a name="new01"></a><!--下锚点-->
        <h1>法治新闻</h1>
        <h1>法治新闻</h1>
        <h1>法治新闻</h1>
        <h1>法治新闻</h1>
        <a name="new02"></a><!--下锚点-->
        <h1>国际新闻</h1>
        <h1>国际新闻</h1>
        <h1>国际新闻</h1>
        <h1>国际新闻</h1>
        <a name="new03"></a><!--下锚点-->
        <h1>娱乐新闻</h1>
        <h1>娱乐新闻</h1>
        <h1>娱乐新闻</h1>
        <h1>娱乐新闻</h1>

表格

        <!--
            table - 表格
                border：设置边框（1表示1像素）
            tr - 行
            th - 列（居中、加粗）
            td - 列（向左对齐）
        -->
        <table border="1" width="300px">
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
            <tr>
                <td>小明</td>
                <td>男</td>
                <td>13</td>
            </tr>
            <tr>
                <td>小刚</td>
                <td>男</td>
                <td>13</td>
            </tr>
            <tr>
                <td>小强</td>
                <td>男</td>
                <td>13</td>
            </tr>
            <tr>
                <td>小凯</td>
                <td>男</td>
                <td>13</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>女</td>
                <td>13</td>
            </tr>
        </table>

原文地址：https://blog.csdn.net/secret010/article/details/140208932

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！