美文网首页傲视苍穹H5_VIP专题HTML+CSS前端干货
HTML_行内元素、块级元素、空元素

HTML_行内元素、块级元素、空元素

作者: Miss____Du | 来源:发表于2015-01-25 17:28 被阅读1017次
    • 内联元素
    • 叫法有内联元素、内嵌元素、行内元素、直进式元素
    • 一般都是基于语义级(semantic)的基本元素,它只能容纳文本或者其他内联元素,通常被包括在块元素中使用。
    • 内联元素有这些
      • a - 锚点
        abbr - 缩写
        the <abbr title="world wield web constium">W3C</abbr>is important;
        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
        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
        (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>

    • 块级元素
    • address - 定义文档或文章的作者的联系信息,不要局限于地址,以斜体的形式展现。
      <address>Written by miss_du</address>.jpg
      blockquote - 标签定义块引用,左右两边会自动进行缩进
      俗话说得好
      <blockquote>
      笨鸟先飞
      </blockquote>
      blockquote.jpg
      dir - 目录列表
      <dir>
      <li>第一章</li>
      <li>第二章</li>
      <li>第三章</li>
      </dir>
      dir.jpg
      dl>dt+dd-定义列表,这个经常用,就不距离啦
      ul>li-定义无须列表
      ol>li-定义有序列表
      div常用的块级元素,用于css布局。
      (fieldest,legend)-组合表单中的相关元素
      <fieldset id="">
      <legend>性别</legend>
      女:<input type="radio" name="" id="" value="" />
      男:<input type="radio" name="" id="" value="" />
      </fieldset>
      fieldset.jpg
        form - 交互表单
        h1 ~h6
        hr - 水平分隔线
        noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容
       noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)
       pre - 格式化文本,,主要用于显示源码。
      <pre>
      <a>
      显示源码了么?
      </a>
      </pre>
      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>
      • 需要注意:caption元素在表格中重复会折行,但是脱离表格,重复不会折行。

    相关文章

      网友评论

        本文标题:HTML_行内元素、块级元素、空元素

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