zoukankan      html  css  js  c++  java
  • HTML中块级行级元素小分类

    行内元素列表:

    <a>标签可定义锚

    <abbr>表示一个缩写形式

    <acronym>定义只取首字母缩写

    <b>字体加粗

    <bdo>可覆盖默认的文本方向

    <big>大号字体加粗

    <br>换行

    <cite>引用进行定义

    <code>定义计算机代码文本

    <dfn>定义一个定义项目

    <em>定义为强调的内容

    <i>斜体文本效果

    <img>向网页中嵌入一幅图像<input>输入框

    <kbd>定义键盘文本

    <label>标签为

    <input> 元素定义标注(标记)

    <q>定义短的引用

    <samp>定义样本文本

    <select>创建单选或多选菜单<small>呈现小号字体效果

    <span>组合文档中的行内元素

    <strong>语气更强的强调的内容

    <sub>定义下标文本

    <sup>定义上标文本

    <textarea>多行的文本输入控件

    <tt>打字机或者等宽的文本效果

    <var>定义变量

    块级元素列表:

    <address>定义地址

    <caption>定义表格标题

    <dd>定义列表中定义条目

    <div>定义文档中的分区或节

    <dl>定义列表

    <dt>定义列表中的项目

    <fieldset>定义一个框架集

    <form>创建 HTML 表单

    <h1>定义最大的标题

    <h2>定义副标题

    <h3>定义标题

    <h4>定义标题

    <h5>定义标题

    <h6>定义最小的标题

    <hr>创建一条水平线

    <legend>元素为 

    <fieldset>元素定义标题

    <li>标签定义列表项目

    <noframes>为那些不支持框架的浏览器显示文本,于 frameset 元素内部

    <noscript>定义在脚本未被执行时的替代内容

    <ol>定义有序列表

    <ul>定义无序列表

    <p>标签定义段落

    <pre>定义预格式化的文本

    <table>标签定义 HTML 表格

    <tbody>标签表格主体(正文)

    <td>表格中的标准单元格

    <tfoot>定义表格的页脚(脚注或表注)

    <th>定义表头单元格

    <thead>标签定义表格的表头

    <tr>定义表格中的行

    扩展资料:

    一,从概念的角度解释块级元素和行内元素

    1. 块级元素,一般都是从新行开始,它可以容纳行内元素和其他块元素,常见块级元素比如div/p等。“form”这个快元素比较特殊,他只能来容纳其他块元素

    2. 行内元素:也叫做内联元素,一般都是语义级别的基本元素,内联元素已办只能容纳文本或者其他内联元素

    块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都是从新行开始的。

    而当加了css控制以后,块元素可以变为内联元素,内联元素也可以变为块元素。

    二,块级元素和内联元素的区别

    1. 块级元素会独占一行,其宽度自动填满其父元素宽度

    行内元素不会独占一行,相邻的行内元素会排列到同一行里,直到一行排不下,才会换行,其宽度随元素的内容变化而变化,

    2. 一般情况下,块级元素可以设置width,height属性,行内元素设置width,height无效

    (注意,块级元素设置了width宽度属性后仍然是独占一行的)

    3. 块级元素可以设置margin,padding属性

    行内元素的水平方向的padding-left和padding-right都会产生边距效果,但是竖直方向上的padding-top和padding-bottom都不会产生边距效果

  • 相关阅读:
    第二阶段团队冲刺07
    第二阶段团队冲刺06
    第二阶段团队冲刺05
    深入浅出设计模式系列 -- UML类图
    Linux、Mac统计文件夹下的文件数目
    控制反转及依赖注入(IoC/DI)概念
    深入理解MySQL优化原理
    git config的全局和本地配置
    Vim命令速查表
    聊聊kafka的工作原理
  • 原文地址:https://www.cnblogs.com/dingxingxing/p/10610119.html
Copyright © 2011-2022 走看看