zoukankan      html  css  js  c++  java
  • HTML块级元素和行级元素

    1、块级元素 行级元素?
    块级(block)元素的特点:
    ①总是在新行上开始;
    ②高度,行高以及外边距和内边距都可控制;
    ③宽度缺省是它的容器的100%,除非设定一个宽度;
    ④它可以容纳内联元素和其他块元素。

    内联(inline)元素的特点:
    ①和其他元素都在一行上;
    ②高,行高及外边距和内边距不可改变;
    ③宽度就是它的文字或图片的宽度,不可改变;
    ④内联元素只能容纳文本或者其他内联元素。

    2、块级元素:块级大多为结构性标记

    =============常用有=============

    <address>...</adderss>   

      <center>...</center>  地址文字

      <h1>...</h1>  标题一级

      <h2>...</h2>  标题二级

      <h3>...</h3>  标题三级

      <h4>...</h4>  标题四级

      <h5>...</h5>  标题五级

      <h6>...</h6>  标题六级

      <hr>  水平分割线

      <p>...</p>  段落

      <pre>...</pre>  预格式化

      <blockquote>...</blockquote>  段落缩进   前后5个字符

      <marquee>...</marquee>  滚动文本

      <ul>...</ul>  无序列表

      <ol>...</ol>  有序列表

      <dl>...</dl>  定义列表

      <table>...</table>  表格

      <form>...</form>  表单

      <div>...</div>

    拓展:

    div:文档节
    section:文档节
    nav:导航
    header:页眉
    article:文章
    aside:文章侧栏
    footer:页脚
    details:元素的细节
    summary:details元素可见的标题
    dialog:对话框窗口
    h1,h2,h3,h4,h5,h6:标题
    p:段落
    ul:无序列表
    ol:有序列表
    dir:目录列表
    li:项目
    dl:列表
    dt:列表项目
    dd:项目描述
    menu:命令的菜单,列表
    menuitem:菜单项目
    command:命令按钮
    form:表单
    fieldset:围绕元素的边框(可用于表单内元素分组)
    legend:在边框上的标题
    select:选择列表(内联元素)
    optgroup:组合选择列表选项
    option:选择列表选项(也可做datalist选项)
    datalist:下拉列表(id要与input中list属性值绑定)
    table:表格
    caption:表格标题
    thead:组合表头内容(th)
    tbody:组合主体内容(td)
    tfoot:组合表注内容(td)
    tr:表格行
    th:表头单元格
    td:表格单元
    col:表格列属性;(空标签)
    colgroup:表格格式化列组;
    iframe:内联框架
    figure:媒介内容分组
    figcaption:figure标题
    map:图像映射
    area:图像区域
    canvas:图形容器(脚本来绘制图形)
    video:视频
    source:媒介源
    track:文本轨道
    audio:声音内容
    br:换行(空标签)
    hr:水平分割线(空标签)
    pre:格式文本
    blockquote:块引用
    address:文档联系信息
    center:居中文本(不赞成使用)
    spacer:在水平和垂直方向插入空间(空元素)


    3、行级(内联)元素:行内大多为描述性标记

    =============常用有=============

    <span>...</span>

      <a>...</a>  链接

      <br>  换行

      <b>...</b>  加粗

      <strong>...</strong>  加粗

      <img >  图片

      <sup>...</sup>  上标

      <sub>...</sub>  下标

      <i>...</i>  斜体

      <em>...</em>  斜体

      <del>...</del>  删除线

      <u>...</u>  下划线

      <input>...</input>  文本框

      <textarea>...</textarea>  多行文本

      <select>...</select>  下拉列表

    拓展:
    span:内联容器
    abbr:缩写
    em:强调
    strong:粗体强调
    mark:突出显示的文本
    b:粗体
    i:斜体
    bdi:文本方向
    bdo:文字方向
    big:大字体
    small:小字体
    sup:上标
    sub:下标
    del:被删除的文本
    strike:删除线
    s:删除线
    ins:被插入的文本
    u:下划线
    nobr:禁止换行
    wbr:单词换行时机(空标签)
    tt:打字机文本
    kbd:键盘文本
    time:日期/时间
    cite:引用
    q:短引用("")
    font:字体设定(不常用)
    acronym:缩写(html5不支持)
    dfn:字段(不常用)
    a:锚点
    img:图片
    embed:内嵌(空标签)
    label:input标记(点击文本触发控件)
    input:输入框
    button:按钮
    keygen:生成秘钥(空标签)
    textarea:多行文本输入框
    output:输出结果
    ruby:中文注音
    rt:注音
    rp:浏览器不支持ruby元素显示的内容
    progress:进度条
    meter:度量
    var:定义变量
    code:计算机代码文本
    samp:计算机代码样本
    select:下拉列表

    原文摘自: https://blog.csdn.net/u013063153/article/details/52524132

  • 相关阅读:
    C++对象之间的赋值运算符
    WebService--导出excel并将excel发送到邮箱
    jakarta-oro-2.0.8.jar-----------JAVA FTP相关
    排序函数sort用法简介
    2013年第四届蓝桥杯全国软件大赛本科A组c++预赛 题目及参考答案
    2012年第三届蓝桥杯全国软件大赛c++预赛 题目及参考答案
    数论学习小记 其之三 Gcd与Lcm
    平面分割问题小结
    数论学习小记 其之二 同余及常用数论定理
    数论学习小记 其之一 基础数学
  • 原文地址:https://www.cnblogs.com/eastwjn/p/9040975.html
Copyright © 2011-2022 走看看