zoukankan      html  css  js  c++  java
  • HTML标签,简单归纳

    列表标签

    有序列表:

    <ol><li></li></ol>

    无序列表:

    <ul><li></li></ul>  //属性:font-weight字体粗细

    表格:

    <table>

      <thead><tr><td></td></tr></thead>  //tr行 td列

      <tbody><tr><td></td></tr></tbody>

    </table>

    HTML5新标签

    1.<figure></figure>  //来画类似于照片墙的标签

    eg:<figure>

        <img src=""/>

        <figcaption>橘子</figcaption>  //figcaption就是figure的标题

        <p>这是一个橘子</p>

           </figure>

    2.<section></section>  //新闻的展示,内容的展示

    eg:<section>

        <nav></nav>

        <figure></figure>

        <div></div>

      </section>

    <datalist></datalist>  //当输入输入类似或相同的名字时会弹出类似或相同的名字选项

    eg:<input type="text" list="searchList"/>

      <datalist id="searchList">

        <option value="10086">中国移动客服电话<option>

        <option value="10010">中国联通客服电话<option>

        <option value="10000">中国电信客服电话<option>

      </datalist>

    <details></details>  //折叠样式标签

    eg:<datails>

        <summary>武汉突降暴雨</summary>

        今天武汉市突然下起暴雨,令出行市民措手不及!

      </datails>

    audio和video  //音频和视频标签

      controls 显示播放条

      autoplay 自动播放

      loop 单曲循环

      preload 预加载

      source可以替换src

    eg:<audio loop autoplay controls muted preload>

        <source src="tq.ogg" type="audio/ogg">

        <source src="tq.mp3" type="audio/mpeg">

        <source src="tq.wav" type="audio/wav">

      </audio>

      <video poster="../img/i.jpg" src="" loop autoplay controls muted preload >  //poster点开视频首先显示的图片

      </video>

    <form></form>表单

    eg:<form action-"" method="post"></form>

      action 提交的路径

      method 提交的方式,有两种post和get。关于post和get两种提交方式的区别,我已在之前的一篇随笔做过说明。

    <a></a>超链接标签

    eg:<a href="http://www.baidu.com"></a>

    另外的用法:<a href="#mao">你是谁?(点击则可以获取答案!)</a>

          <div id="mao">

            答案:不知道,哈哈哈!

          </div>

    <em></em>  <i></i>  //都表示斜体

    <sup></sup>  //上标和下标

    以上只是HTML标签的部分,简单归纳。如有错误之处,尽请谅解,请帮忙指出,谢谢!

    新手上路,请多多关照,笑脸

  • 相关阅读:
    和2018年年初做管理系统的不同(vuex)
    项目中使用package-lock.json锁版本问题
    沟通协作:避免犯低级错误,开发前沟通清楚所有细节
    学会学习:高效学习方式(使用vscode-snippet有感)
    关于学习,避免没必要的熬夜的思考
    pc端布局的一点思考
    学习掌握一个新东西
    要想有价值,首先要乐于去解决每一个问题
    problem: 记一次聊天框的表情包弹框不显示的找问题过程
    abp-159,js最理想的继承——寄生组合式继承
  • 原文地址:https://www.cnblogs.com/ljyweb/p/7966877.html
Copyright © 2011-2022 走看看