HTML__内联元素与块元素

html4.0时代,html的元素类型分内联元素(inline element)和块元素(block-level element)。

第一、内联元素

内联元素是是一种基于语义级的基本元素,一般只能容纳文本和其他内联元素。

下面的元素都是内联元素:

b(字体加粗) kbd(代表文字从键盘录入) q(引用文字) big(字号比周围字体大一号) strong(重要文字,在盲文阅读设备中,会重点读,界面显示效果为加粗) script(脚本)i(文字斜体)samp(极少用,连字符)span(用于组合其他内联元素)small(比周围字体小一号)time(html5中的新标签,用于标记时间,目前浏览器都不支持)sub(定义下标文本,显示为其他文字高度一半)tt(告诉浏览器,字体必须等宽)var(告诉浏览器,这是变量)sup(定义上标文本)abbr(代表是长单词或短语的缩写)a(超链接)button(按钮)acronym(缩写,HTML5中已弃用,请使用abbr替代)bdo(可定义文本方向)input(基本输入框)cite(定义引用的文档)br(换行符)label(文本标签,但是有个牛逼的特性,利用for属性,可以绑定其他元素,使得鼠标点击该标签时,被绑定元素获得焦点)code(定义源码文本)img(图片文本)select(下拉选择组件)dfn(definition and usage,定义一个概念的定义处,一般的在一个文档中最先出现的地方)map(定义一个客户端的图形映射)textarea(文本输入框)em(定义需要强调的文字,一般用斜体表示)object(定义一个嵌入的对象)

登录后复制

第二 块元素

块元素一般是其他元素的容器元素,用于布局,需要放在body标签里面。

下面都是块元素:

立即学习“前端免费学习笔记(深入)”;

address(定义了文章拥有者的联系信息)figure(定义独立的流内容,例如图片、视频)noscript(定义如果浏览器不支持脚本语言时显示的内容)article(定义文章内容)footer(定义文档底部)ol(ordered list)aside(aside content,可用做侧栏)form(input form)output(定义form的输出)blockquote(定义引用于别处的内容)h1,h2,h3,h4,h5,h6(标题)p(段落)canvas(画布)header(页眉)pre(preformatted text,定义预格式化内容)dd(definition description)hgroup(对标题进行组合)section(定义页眉的区域)p(文档分割)hr(定义分割线)table(表格)dl(definistion list)li(list item)tfoot(table footer)fieldset(field set label)main(contains the central content to this document)ul(unordered list)figcaption(figure caption)nav(contains navigation links)video(video player)

登录后复制

第三 内联与块元素的区别

默认,块元素会新起一行,而内联元素会在行内

通常,块元素的内部结构要比内联元素复杂,块元素内部可能包含内联元素和其他块元素。

更多HTML__内联元素与块元素 相关文章请关注PHP中文网!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2836373.html

(0)
上一篇 2025年3月9日 06:14:06
下一篇 2025年3月2日 23:08:57

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 全面了解html.css溢出

    全面了解html.css溢出 XML/HTML Code复制内容到剪贴板 p{ height: 110px; width: 250px; border: 1px solid red; } .a{overflow: visible; } .b…

    编程技术 2025年3月9日
    200
  • 浅谈HTML代码中的空格和空行

    html 代码中的所有连续的空格或空行(换行)都会被显示为一个空格。 例子1:(文本内容中的连续空格) 代码 这段文本中,输入连续的空格          大概输入了十个。 登录后复制 显示效果:“格”和“大”之间的是个空格显示出来只是一个…

    2025年3月9日
    200
  • 举例讲解HTML中iframe和frame的区别

    不知道你在项目中用过frameset属性没有,frameset这个属性是在去年我在一个在线客服系统制作中用过,因为客服系统要有固定的布局,上面一块,下面一块等等,当时就是用的frameset和frame。在我用完了这些属性之后,我才明白了i…

    编程技术 2025年3月9日
    200
  • HTML中三种定位relative,absolute,fixed后,盒子的百分比宽度及位置易错点

    1 . 相对定位relative:顾名思义,相对定位是相对于自己的位置来进行偏移,如下图:                    以盒子中心为基准,为每条边的正方向,例:       向右移动20px :  代码为left:20px;或者r…

    2025年3月9日
    200
  • Html 制作相册

    本文主要讲述采用html5+jquery+css 制作相册的小小记录。 主要功能点: Html5进行布局 调用jQuery(借用官网的一句话:The Write Less, Do More)极大的简化了JavaScript编程 CSS 样式…

    2025年3月9日
    200
  • 特殊字符html,css转义大全

    使用方法:  这些字符属于unicode字符集,所以,你的文档需要声明为utf-8; 下面符号列表的后面有两列编号,它们并不太一样,第一列是用于html的,你需要在前面加上符号; 第二列可以用于css文件中,但是需要用反斜杠转义; 第二列也…

    编程技术 2025年3月9日
    200
  • 有关HTML表格边框的设置小技巧

    下面小编就为大家带来一篇有关html表格边框的设置小技巧。小编觉得挺不错的,现在分享给大家,也给大家做个参考 对于很多初学HTML的人来说,表格 是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解。 一般我们用表格的时候总会给它个…

    2025年3月9日 编程技术
    200
  • 使用语义化标签去写你的HTML 兼容IE6,7,8

    下面小编就为大家带来一篇使用语义化标签去写你的html 兼容ie6,7,8。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧 HTML5增加了更多语义化的标签,如header,footer,nav……让我们在页面编…

    2025年3月9日
    200
  • HTML九宫格布局实现方法

    网站布局多样化是我们前端的拿手菜!最近看到uc浏览器的默认标签页使用的就是九宫格布局。就研究了下,在这里,我就分享一下代码,共同学习下!效果如下: nbsp;html>        全兼容的HTML九宫格布局            …

    2025年3月9日
    200
  • 一些HTML代码的编写风格建议小结

    省略资源文件的协议 建议省略掉图片, 媒体文件, 样式和脚本 URL 中的协议部分 (http:, https:), 省略掉协议部分后, 资源文件将继承页面 URL 的协议. 不但可以防止内容混用的问题, 还可以减小页面的尺寸. 比如: 引…

    2025年3月9日
    200

发表回复

登录后才能评论