您的当前位置:首页正文

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

来源:个人技术集锦
  • 内联元素

  • a - 锚点
    abbr - 缩写

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

    abbr.jpg

    abbr.jpg

    b - 粗体(不推荐)、strong - 粗体强调、em - 斜体重要{均是双标签}
    在没有其他合适标签更合适时,才应该把 <b> 标签作为最后的选项。HTML5 规范声明:应该使用 <h1> - <h6> 来表示标题,使用<em>标签来表示强调的文本,应该使用<strong> 标签来表示重要文本。
    这些也都可通过font-weight属性来设置。
    bdo 定义文本方向
    <br /> rtl: <bdo dir="rtl">here is some text</bdo> <br /> ltr: <bdo dir="ltr">here is some text</bdo>

    dbo.jpg

    dbo.jpg

    big - 较原来字体大一号。<big><big>12</big></big>
    br - 换行<br> <br />clear属性
    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 - 定义文档或文章的作者的联系信息,不要局限于地址,以斜体的形式展现。

    <address>Written by miss_du</address>.jpg

    <address>Written by miss_du</address>.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>
     <a>
     显示源码了么?
     </a> 
    </pre>

    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视频教程

    显示全文