0
点赞
收藏
分享

微信扫一扫

前端---基础标签

魔都魅影梅杜萨 2022-02-04 阅读 56

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>常用标签</title>
    </head>
    <body>
        <!--
            标题标签
            h1~h6   大小依次递减
        -->

    

    <h1>标题1</h1>
        <h2>标题2</h2>
        <h3>标题3</h3>
        <h4>标题4</h4>
        <h5>标题5</h5>
        <h6>标题6</h6>


        
        
        <!--
            段落标签
                p标签     会自动换行
                块级元素        
        -->

      

  <p>这是一个段落1</p>
        <p>这是一个段落2</p>


        
        
        <!--
        换行标签
        br   单行标签
        <br><br/>
        -->

       
        
                
        <!--
        水平线标签
            hr  单标签
            常用属性
                color  颜色
                size  粗细
                width  长度<百分比   或   像素值>
        -->            

      

  <hr>
        <hr color="aqua" size="3" width="50%" align="left">


        
        
        <!--
        列表
            有序列表
                <ol><li></li></ol>
            无序列表
                <ul><li></li><ul>
        -->
       

 <ul type="square">
            <li>周杰伦</li>
            <li>林俊杰</li>
        </ul>
        <ol type="1">
            <li>周杰伦</li>
            <li>林俊杰</li>
        </ol>


        
        <!--
        div标签
            块级元素
            默认占全部的宽度  有多少内容高度占多少
            可以设置div的宽 width  高 height
            对齐方式---align---left---right--center
        -->
     

   <div style="width:100px;height: 100px;"align="center">这是一个div</div>
        1111


        
        
        <!--
            span标签
                行内元素(不会自动换行)                
        -->

       

 <span>这是一个span</span>


        
        
        
        <!--
            格式化标签
                color  字体颜色
                size  字体尺寸
                face  字体风格
                pre
                    欲格式化标签   保留空格和换行
                b  加粗
                i 倾斜
                u 下划线
                del 中划线
                sup 上标
                sub 下标
        -->

       

 <font color="aqua"size="5"face="楷体">Hello World</font>        
        <pre>
            Hello World
        </pre>
        <p><b>烦死</b><i>了一</i><u>天天</u>的</p>
        H<sub>2</sub>O


        
        
        <!--
        a标签
            超链接标签,由于链接到一个新的URL
            常用属性:
                href:需要跳转的地址(必须属性))
                target:窗口打开的方式
                    _self:当前窗口(默认)
                    _blank:在空白窗口
            作为锚点:
                a标签的name属性
                    <a name="top"></a>
                其他的id属性值
                    <div id="top"></div>
                锚点的使用
                    <a href="#top"></a>
        -->

     

   <a href="http://www.baidu.com" target="_blank">百度</a>
        <hr>
        <h2 id="znjl">早年经历<br>
        *****************
        **************
        ***********</h2>
        <a href="#">回到到顶部</a>
        <a href="#znjl">早年经历</a>
        


        
        <!--
        img标签
            向网页中嵌入一张图片
            
            常用属性:
                src:需要引入的图片的地址(必须属性)
                alt:当图片破损或不存在时,显示的文本
                title:当图片悬停在图片上时显示的文本
                width:图片的宽度
                height:图片的高度
                border:图片的边框
        -->

       

 <img src="img/bd.png"width="500" height="500" border="2" title="点击了解更多">
        


        <!--
        表格标签:
            table:表格
            tr:行
            td:标准单元格
            th:表头(字体居中、加粗效果)
            
            table的属性
                width  表的宽度
                border 边框
                align  对齐方式
                style="border-collapse:collapse;合并表格的边框
        -->

       

 <table width="400px" align="center"border="1"style="border-collapse:collapse;">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
            <tr align="center" bgcolor="aqua">
                <th>1</th>
                <th>张三</th>
                <th>18</th>
            </tr>
            <tr>
                <th>2</th>
                <th>宣传</th>
                <th>22</th>
            </tr>
            
        </table>
        


        
        
        
    </body>
</html>

举报

相关推荐

0 条评论