`

htm块元素和内联元素

阅读更多

html元素可以分为三大类:顶级、块级、行级(内联)

1. Top-level element 【顶级元素】:    { html, body, frameset }

属于高级块级元素.  

 

2. Block-level element 【块级元素】:   { p, h1~h6, div, ul,li }

以块显示的元素,高度宽度都是可以设置的。

块级元素比较霸道,默认状态下每次都占据一整个行,前后的内容也必须再新起一行显示。

块级元素也能变成行级元素,那就是通过css的display:inline;和float来实现。

 

3. Inline element 【内联元素】: { a, br, em, img, li, span }

通俗点来说就是文本的显示方式,内联元素的高度宽度是不可以设置的,其宽度和高度就是根据自身文字或者图片的宽度延展得来。

内联元素的显示特点就是像文本一样的显示,不会独自占据一个行。

行级元素可以通过css的display:block和float属性更改成块级元素

 

block元素的特点

1、元素前后都要换行

2、高度,行高以及外边界和内边距都可控制

3、宽度缺省是它的容器的100%,除非设定一个宽度。

4、它可以容纳内联元素和其他块元素

 

inline元素的特点

1、和其他行内元素都在一行上;

2、高,行高及上下外边界不可改变;(左右边界、内边距都可以改)

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

4、内联元素只能容纳文本或者其他内联元素

 

行内元素与块级元素有什么不同?

width / heigh

行级元素设置宽高无效,它的宽高仅会因内容的大小和多少而延展

块级元素可以任意设置宽高

padding / margin

行级元素的内边距和外边界左右设置有效,但是上下边界无效

块级元素是构成一个html的主要和关键元素, 而任意一个块级元素均可以用盒子模型来说明.

span{

line-height:2;

font-size:40px;

background:red;

padding:1px 50px;

margin:10px;

width:1000px;

height:200px;

}

<div> 

  <span>ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网</span>

  <span>ez编程网ez编程网ez编程网ez编程网ez编程网ez编程网ez</span>

  <span>编程网ez编程网ez编程网ez编程网</span>

 

</div>

 

常见块元素(block element)

◎ address - 地址

◎ blockquote - 块引用

◎ center - 居中对齐块

◎ dir - 目录列表

◎ div - 常用块级容器,也是css layout的主要标签

◎ dl - 定义列表

◎ fieldset - form控制组

◎ form - 交互表单

◎ h1 - 大标题

◎ h2 - 副标题

◎ h3 - 3级标题

◎ h4 - 4级标题

◎ h5 - 5级标题

◎ h6 - 6级标题

◎ hr - 水平分隔线

◎ isindex - input prompt

◎ menu - 菜单列表

◎ noframes - frames可选内容,(对于不支持frame的浏览器显示此区块内容)

◎ noscript - 可选脚本内容(对于不支持script的浏览器显示此内容)

◎ ol - 排序表单

◎ p - 段落

◎ pre - 格式化文本

◎ table - 表格

◎ ul - 非排序列表(无序列表)

 

常见内联元素(inline element)

◎ a - 锚点

◎ abbr - 缩写

◎ acronym - 首字

◎ b - 粗体(不推荐)

◎ bdo - bidi override

◎ big - 大字体

◎ br - 换行

◎ cite - 引用

◎ code - 计算机代码(在引用源码的时候需要)

◎ dfn - 定义字段

◎ em - 强调

◎ font - 字体设定(不推荐)

◎ i - 斜体

◎ img - 图片

◎ input - 输入框

◎ kbd - 定义键盘文本

◎ label - 表格标签

◎ q - 短引用

◎ s - 中划线(不推荐)

◎ samp - 定义范例计算机代码

◎ select - 项目选择

◎ small - 小字体文本

◎ span - 常用内联容器,定义文本内区块

◎strike - 中划线

◎ strong - 粗体强调

◎ sub - 下标

◎ sup - 上标

◎ textarea - 多行文本输入框

◎ tt - 电传文本

◎ u - 下划线

◎ var - 定义变量

分享到:
评论

相关推荐

    《javaScrip开发技术大全》源代码

    • sample08.htm 使用外部脚本文件和嵌入的JavaScript代码 • sample09.htm 边加载边解析的JavaScript代码 • sample10.htm 先加载后解析的JavaScript代码 • sample11.htm 单行注释语句 • sample12.htm 多行注释...

    清华大学 htm教程

    9. **区块元素与内联元素**:区块元素如`&lt;div&gt;`会占据一整块区域,内联元素如`&lt;span&gt;`只占据自身内容的宽度。 10. **样式控制**:虽然HTML主要关注结构,但可以通过`&lt;style&gt;`标签或`&lt;link&gt;`引入外部CSS文件来添加...

    CSS里的各种水平垂直居中基础写法心得总结

    介绍一下行内元素和块级元素,这个很重要,因为有的属性只能用于块元素,而有的正好相反,在一定的情况下,它们也可以相互转换,比如用display来进行设置。 行内元素(又叫内联元素inline element): ①不占据一整行...

    纯CSS3三维立体方块动画特效.zip

    可能在`index.html`中包含了HTML结构和内联的CSS与JavaScript,而`说明.htm`和`说明.txt`则提供了关于如何使用这个特效的详细说明和指导。 总的来说,这个压缩包中的特效展示了CSS3的强大功能,尤其是3D变换和动画...

    HTML点击方块得分小游戏.zip

    "HTML点击方块得分小游戏"文件很可能是游戏的主文件,包含了HTML、CSS和JavaScript代码的组合,可能使用了内联样式或外部样式表,以及内联脚本或外部脚本文件。 这个小游戏展示了Web开发的基本原理,同时体现了...

    疯狂攻击鼠标.rar

    `index.htm`很可能是项目的主要入口文件,包含了HTML结构和内联JavaScript,而`说明.htm`可能提供了关于如何使用或理解该项目的详细信息。 总之,"疯狂攻击鼠标"这个项目展示了JavaScript在创建互动网页特效方面的...

    网站

    HTML元素可以分为三类:块级元素、内联元素和行内块元素,它们决定了元素在页面上的显示方式。 1. 块级元素:如`&lt;div&gt;`、`&lt;p&gt;`、`&lt;h1&gt;`-`&lt;h6&gt;`,它们会在页面上占据整行,并且默认情况下,新的块级元素会另起一行...

    css样式API

    CSS的“层叠”特性意味着样式可以来自多个源,如外部样式表、内部样式块和内联样式。样式冲突时,根据权重决定最终应用的样式,权重越高,优先级越大。权重由选择器类型决定,ID选择器权重最高,类、属性和伪类次之...

    HTML5颜色匹配小游戏代码.zip

    在提供的压缩包中,`index.html`是游戏的主要页面,包含了HTML结构和可能的内联CSS及JavaScript。`说明.htm`或`说明.txt`文件可能包含了游戏的使用说明或者开发者注释,解释了代码的工作原理和如何运行游戏。 要...

    CSS语法手册

    3. **绝对定位**:元素脱离文档流,相对于最近的已定位祖先元素(如果没有,则相对于初始包含块)定位。 4. **固定定位**:元素相对于浏览器窗口定位,即使页面滚动,元素位置不变。 5. **Flexbox**和**Grid**布局...

    HTML_tags.rar_html tags

    内联元素如`&lt;span&gt;`、`&lt;a&gt;`和`&lt;strong&gt;`只占据自身内容的宽度,可以在同一行内排列。 9. **表格标签(Table Tags):** `&lt;table&gt;`用于创建表格,`&lt;tr&gt;`定义行,`&lt;td&gt;`定义单元格,`&lt;th&gt;`定义表头单元格。 10. **...

    html习题附答案-!#!¥%@) (3).docx

    12. **块级元素与内联元素**:`&lt;h1&gt;`、`&lt;p&gt;`和`&lt;div&gt;`是块级元素,而`&lt;span&gt;`是内联元素,不适用于块状属性。正确答案是`(B)`。 13. **框架集**:`&lt;frameset&gt;`标签用于创建框架布局,`cols`属性定义列,`rows`属性...

    caidan.rar_javascript

    在压缩包中的"发一个弹性菜单,垂直的那种.htm"文件很可能是示例代码,它可能包含HTML结构、内联CSS和JavaScript代码。HTML可能定义了菜单的DOM元素,CSS为这些元素提供了初始样式,而JavaScript部分则通过添加事件...

    html习题附答案-!#!¥%@) (3).pdf

    - `&lt;span&gt;`是内联标签,不适用于块状元素属性,`(B)`错误。 13. HTML框架: - `&lt;frameset&gt;`标签用于创建框架布局,题目中展示了两层嵌套的框架集,分别用于行和列布局。具体分析不在题目范围内,但可以确定代码...

    德州21点扑克牌HTML5源码

    1. `index.htm`:这是网页的主入口文件,通常包含HTML结构,定义了页面的基本元素和框架,可能还包括内联CSS和JavaScript代码。 2. `html5中文网- HTML5资源分享平台.url`:这可能是一个快捷方式链接,指向一个HTML5...

    MyFirstHtmlProj:我的第一个存储库

    根据W3c,我们不应该在内联元素中创建块级元素 )。 图片出现错误 onerror =“ this.onerror = null; this.src =' ://placeimg.com/200/300/animals';” 跨原点属性 &lt;iframe src =“ demo_iframe_sandbox_form....

    JAVA SCRIPT

    dk.htm、说明.htm、daikuan.htm可能是HTML文件,其中可能包含了内联JavaScript代码或引用了外部JS文件。下载说明.txt可能是关于如何使用这些文件的指南,而daikuan可能是一个JavaScript文件,包含了实际的代码示例。...

    纯javascript制作的俄罗斯方快游戏有兴趣的朋友可以参考

    【压缩包子文件的文件名称列表】只有一个文件:game.htm,这通常是一个HTML文件,其中包含了游戏的HTML结构以及内联的JavaScript代码。在这个文件中,开发者可能使用了HTML5的canvas元素或者DOM操作来绘制游戏画面,...

Global site tag (gtag.js) - Google Analytics