首页  >  文章  >  web前端  >  HTML中3种常见元素的详细介绍

HTML中3种常见元素的详细介绍

零下一度
零下一度原创
2017-05-09 14:17:572148浏览
  • 内联元素

    • a - 锚点
      abbr - 缩写

      the <abbr title="world wield web constium">W3C</abbr>is important;

      abbr.jpg

      abbr.jpg

      b - 粗体(不推荐)、strong - 粗体强调、em - 斜体重要{均是双标签}
      在没有其他合适标签更合适时,才应该把 a4b561c25d9afb9ac8dc4d70affff419 标签作为最后的选项。HTML5 规范声明:应该使用 4a249f0d628e2318394fd9b75b4636b1 - 4e9ee319e0fa4abc21ff286eeb145ecc 来表示标题,使用907fae80ddef53131f3292ee4f81644b标签来表示强调的文本,应该使用8e99a69fbe029cd4e2b854e244eab143 标签来表示重要文本。
      这些也都可通过font-weight属性来设置。
      bdo 定义文本方向
      df250b2156c434f3390392d09b1c9563 rtl:  dbf1cfb45ce9cb70350514feaa715da8here is some text2751a04becceb7f2391ee604e81e89d3 df250b2156c434f3390392d09b1c9563 ltr:  f88073c947ea43d5bb27baf80adfc1e9here is some text2751a04becceb7f2391ee604e81e89d3

      dbo.jpg

      dbo.jpg

      big - 较原来字体大一号。3d49bde0e0b2e042578ad34140b6c48e3d49bde0e0b2e042578ad34140b6c48e12cb47d890eb8c521d3966d2b2263ef112cb47d890eb8c521d3966d2b2263ef112
      br - 换行0c6dc11e160d3b678d68754cc175188a df250b2156c434f3390392d09b1c9563clear属性
      cite - 引用,斜体显示
      code - 计算机代码(在引用源码的时候需要)
      dfn - 定义字段
      i - 斜体
      img - 图片
      input - 输入框
      kbd - 定义键盘文本
      samp - 定义范例计算机代码
      var - 定义变量
      q - 短引用
      small - 小字体文本
      span - 常用内联容器,定义文本内区块
      label - 表格标签
      del-删除部分
      ins-新插入部分
      select - 项目选择
      sub - 下标
      sup - 上标
      textarea - 多行文本输入框
      iframe-创建包含另一个文档的内联框架

          <iframe src="block_elements.html" width="" height=""></iframe>
    • iframe.jpg

      iframe.jpg

      (map,area)-带有可点击区域的图像映射

         < img src="../../LG/image/ff8080814aecc157014aecdf36aa002a.jpg" width="300px" border="0" usemap="#test" alt="test" />
         <map name="test" id="test">
          <area shape="circle" coords="20,20,50" href="block_elements.html" alt="" />
          </map>
    • 叫法有内联元素、内嵌元素、行内元素、直进式元素

    • 一般都是基于语义级(semantic)的基本元素,它只能容纳文本或者其他内联元素,通常被包括在块元素中使用。

    • 内联元素有这些


  • 块级元素

    • 需要注意:caption元素在表格中重复会折行,但是脱离表格,重复不会折行。

    • address - 定义文档或文章的作者的联系信息,不要局限于地址,以斜体的形式展现。

      208700f394e4cf40a7aa505373e0130bWritten by miss_duf6b6163991889e046b98f3ad8b2fe548.jpg

      208700f394e4cf40a7aa505373e0130bWritten by miss_duf6b6163991889e046b98f3ad8b2fe548.jpg

      blockquote - 标签定义块引用,左右两边会自动进行缩进

      俗话说得好
      <blockquote>
          笨鸟先飞
      </blockquote>

      blockquote.jpg

      blockquote.jpg

      dir - 目录列表

      <dir>
          <li>第一章</li>
          <li>第二章</li>
          <li>第三章</li>
      </dir>

      dir.jpg

      dir.jpg

      dl>dt+dd-定义列表,这个经常用,就不距离啦
      ul>li-定义无须列表
      ol>li-定义有序列表
      p常用的块级元素,用于css布局。
      (fieldest,legend)-组合表单中的相关元素

      <fieldset id="">
          <legend>性别</legend>
          女:<input type="radio" name="" id="" value="" />
          男:<input type="radio" name="" id="" value="" />
      </fieldset>

      fieldset.jpg

      fieldset.jpg

        form - 交互表单
        h1 ~h6
        hr - 水平分隔线
        noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
       noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
       pre - 格式化文本,,主要用于显示源码。

      <pre class="brush:php;toolbar:false">
          &lt;a&gt;
          显示源码了么?
          &lt;/a&gt;            
      

      pre.jpg

      pre.jpg

       table - 表格

      <table border="" cellspacing="" cellpadding="">
          <caption>hello</caption>
          <thead style="background: black;color: #fff;">
              <tr>
                  <th>Header</th>
                  <th>Header</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>Data</td>
                  <td>Data</td>
              </tr>
          </tbody>
      </table>

【相关推荐】

1. 免费html在线视频教程

2. html开发手册

3. php.cn原创html5视频教程

以上是HTML中3种常见元素的详细介绍的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn