美文网首页
html基础标签

html基础标签

作者: stay丶gold | 来源:发表于2018-10-14 14:50 被阅读0次
    <!DOCTYPE html> <!--使用W3C标准-->
    <html>
    <head>
        <meta http-equiv="content-type" charset="UTF8"></meta><!-- 指定编码-->
        <meta name="keyword" content="测试"></meta><!-- 关键字检索-->
        <meta name="description" content="hahah"></meta><!-- 浏览器显示的描述-->
        <!--<meta http-equiv="Refresh" content="20;URL=https://www.sina.com.cn"></meta>--><!-- 20s后刷新,跳转到sina-->
        <title>标题</title>
        <link rel="apple-touch-icon" href="https//i3.sinaimg.cn/home/2013/0331/U586P30DT20130331093840.png"><!-- 标题显示的图标-->
    </head>
    <body>
    <div id="top">顶部</div>
    <h1>h1标签,加粗加大, 独占一行,块标签</h1>
    <h2>h2标签,加粗加大, 独占一行,块标签</h2>
    <h3>h3标签,加粗加大, 独占一行,块标签</h3>
    <h4>h4标签,加粗加大, 独占一行,块标签</h4>
    <hr><!-- 横线-->
    <p>p标签,段落标签,独占一行,块标签,可嵌套</p>
    <p>p标签,床前明月光</p>
    <p>p标签,床前明月光</p>
    <p>p标签,床前明月光</p>
    
    换行br标签,横线hr标签<br>
    <hr>
    <b>b标签,加粗</b>
    <strong>strong标签,加粗</strong><br>
    <hr><!-- 横线-->
    <strike>strike标签,横线</strike>
    <hr><!-- 横线-->
    <em>em标签,斜体</em>
    
    <hr><!-- 横线-->
    3<sub>3</sub><!-- 下角标-->
    2<sup>2</sup><!-- 上角标-->
    <hr>
    <div style="background-color: yellow">div标签鸡毛功能都没有,独占一行,块标签,可嵌套,就像一张白纸,所以刚好搭配css来渲染使用</div>
    <hr>
    <span style="background-color: yellow">内联标签span,只占该占用的部分</span>
    <hr>
    <!--特殊字符-->
    特殊字符&nbsp&nbsp&nbsp <a href="https://www.jb51.net/onlineread/htmlchar.htm">特殊字符表</a> <!--&nbsp 空格-->
    1&lt2        <!--&lt 小于<-->
    2&gt1         <!--&gt 大于>-->
    &copy         <!--©-->
    &reg         <!--®-->
    <hr>
    <b>块级标签可以嵌套块级标签和内联标签;内联标签只能嵌套文本和内联标签</b><br>
    <img src="http://www.chinadaily.com.cn/language_tips/images/attachement/jpg/site1/20070814/001125254635082b41be0a.jpg"
         alt="图片未加载" title="图片" width="300px" height="200px"></img>
    <br><a href="https://www.sina.com.cn/" target="_blank" name="哈哈哈">sina</a><!--target="_blank" 另外开一个窗口-->
    
    <hr>
    <ul><!--无序列表-->
        <li><a href="#C1">第一章</a></li>
        <li><a href="#C2">第二章</a></li>
        <li><a href="#C3">第三章</a></li>
    </ul>
    
    <h2><a name="C1">第一章</a></h2><!--name标签可做目录-->
    <p>本章讲解的内容是 ... ...</p>
    
    <h2><a name="C2">第二章</a></h2>
    <p>本章讲解的内容是 ... ...</p>
    
    <h2><a name="C3">第三章</a></h2>
    <p>本章讲解的内容是 ... ...</p>
    <hr>
    <ol><!--oder有序列表-->
        <li><a href="#C1">第一章</a></li>
        <li><a href="#C2">第二章</a></li>
        <li><a href="#C3">第三章</a></li>
    </ol>
    <hr>
    <dl>
        <dt>第一章</dt>
        <dd>第一节</dd>
        <dd>第二节</dd>
    </dl>
    <a href="#top">回到顶部</a> <!--#和id唯一对应-->
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:html基础标签

          本文链接:https://www.haomeiwen.com/subject/nugzaftx.html