zoukankan      html  css  js  c++  java
  • 学习笔记——关于HTML(含HTML5)的块级元素和行级(内联)元素总结

    1.首先我们要知道什么是块级元素和行级内联)元素?

       块级(block)元素的特点:

    ①总是在新行上开始;

    ②高度,行高以及外边距和内边距都可控制;

    ③宽度缺省是它的容器的100%,除非设定一个宽度;

    ④它可以容纳内联元素和其他块元素。

     

       内联(inline)元素的特点:


    ①和其他元素都在一行上;


    ②高,行高及外边距和内边距不可改变;


    ③宽度就是它的文字或图片的宽度,不可改变;

    ④内联元素只能容纳文本或者其他内联元素。

    2.好的,我们来看看块级元素:

    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:内联容器
    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:下拉列表

    如有错误或疏漏之处还请大家指正,谢谢!

  • 相关阅读:
    “百度杯”CTF比赛 九月场 code
    初识thinkphp(3)
    i春秋CTF web题(1)
    初识thinkphp(2)
    初识thinkphp(1)
    0MQ底层队列设计
    0MQ文档导读
    LF模式是个坑,ZeroIce中间件让你体会这个痛
    0xe7f001f0!?NDK调试过程,无故抛出SIGSEGV。
    KDevelop
  • 原文地址:https://www.cnblogs.com/happywonter/p/5783085.html
Copyright © 2011-2022 走看看