内联元素与块级元素的转换 块元素(block element)和内联元素(inline element)都是html规范中的概念。在加入了CSS控制以后,可以改变块元素和内联元素之间的差异。...CSS中还有一个dipslay:inline-block,显示为内联块元素,表现为同行显示并可修改宽高内外边距等属性。...内联元素与块级元素列表 3.1 块级元素列表 TypeNoteaddress定义地址caption定义表格标题dd定义列表中定义条目div定义文档中的分区或节dl定义列表dt定义列表中的项目fieldset...标签定义 HTML 表格tbody标签表格主体(正文)td表格中的标准单元格tfoot定义表格的页脚(脚注或表注)th定义表头单元格thead标签定义表格的表头tr定义表格中的行 3.2 行内元素列表...TypeNotebutton按钮del定义文档中已被删除的文本iframe创建包含另外一个文档的内联框架(即行内框架)ins标签定义已经被插入文档中的文本map客户端图像映射(即热区)objectobject
, 28 1月 2021 作者 847954981@qq.com 前端学习, 我的编程之路 Html—内联标签和块状标签及简单标签整理 在html中有两种标签 像行内短语/图片.../加粗等被称为内联标签,此标签不会为自己的内容占据新的一行,即此标签的内容会承接在上一个标签之后(同一行)。...像段落/标题/节等标签被称为块状标签,此标签会为自己的内容占据新的一行(即换行)。可以设置宽高。...如果需要图片能够在新的一行显示,可以用包裹标签来实现 内联标签 行内短语 图片 (<img scr=”图片地址”) 加粗 链接 (<a href...标签简单整理
仅供学习,转载请注明出处 html块标签 1、 标签 块元素,表示一块内容,没有具体的语义。 2、 标签 行内元素,表示一行中的一小段内容,没有具体的语义。...DOCTYPE html> <!...含样式和语义的标签 1、 标签 行内元素,表示语气中的强调词 2、 标签 行内元素,表示专业词汇 3、 标签 行内元素,表示文档中的关键字或者产品名 4、 标签...DOCTYPE html> 胖子老板:肥仔白,买包槟榔啦!... 浏览器展示如下: ?
在网页设计与开发中,HTML作为构建内容的基础,其元素根据显示特性的不同被分为两大类:块级元素(Block-level Elements)和内联元素(Inline Elements)。...一、块级元素与内联元素概述 块级元素 块级元素在页面中独占一行,其宽度默认为100%,可以设置宽高,并且会自动换行。...忽视默认样式 块级元素和内联元素都有其默认的内外边距和字体样式,忽视这些默认样式可能导致布局不一致。例如,标签有默认的上下外边距,直接在段落间插入可能会造成意外的空白。 3....DOCTYPE html> 块级与内联元素示例 原本为块级的现在表现为内联 四、总结 理解并熟练掌握块级元素与内联元素的特性和使用,是每一位前端开发者的基本功。
仅供学习,转载请注明出处 块元素、内联元素、内联块元素 元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种元素的特性,才能熟练的进行页面布局。...块元素 块元素,也可以称为行元素,布局中常用的标签如:div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素,它在布局中的行为: 支持全部的样式 如果没有设置宽度,默认的宽度为父级宽度100%...内联元素 内联元素,也可以称为行内元素,布局中常用的标签如:a、span、em、b、strong、i等等都是内联元素,它们在布局中的行为: 支持部分样式(不支持宽、高、margin上下、padding上下...这三种元素,可以通过display属性来相互转化,不过实际开发中,块元素用得比较多,所以我们经常把内联元素转化为块元素,少量转化为内联块,而要使用内联元素时,直接使用内联元素,而不用块元素转化了。...DOCTYPE html> div{
专栏介绍 【前端网页】 目前主要更新HTML,一起学习一起进步。...本期介绍 本期主要介绍HTML块标签以及框架标签 文章目录 1.HTML基本语法(二) 1.1块标签:span 1.2块标签:div 2.自学扩展 2.1...框架标签 1.HTML基本语法(二) 1.1块标签:span 行级的块标签,用于在效果中 一行上定义一个块,进行内容显示。...② Span 不会自动换行 适用于少量数据展示 示例: 效果: 1.2块标签:div 块级的块标签,用于在效果中 定义一块,默认占满一行,进行内容的显示...2.1.1 框架标签: 标签,是框架设置布局标签,专门用于页面的布局和划分。
“仅供学习,转载请注明出处” html块标签 1、 标签 块元素,表示一块内容,没有具体的语义。 2、 标签 行内元素,表示一行中的一小段内容,没有具体的语义。...DOCTYPE html> 浏览器运行如下: 含样式和语义的标签 1、 标签 行内元素,表示语气中的强调词 2、 标签 行内元素,表示专业词汇 3、 标签 行内元素,表示文档中的关键字或者产品名 4、 胖子老板:肥仔白,买包槟榔啦!... 浏览器展示如下: 语义化的标签 “语义化的标签,就是在布局的时候多使用有语义的标签,搜索引擎在爬网的时候能认识这些标签,理解文档的结构,方便网站的收录
DOCTYPE html> Title div标签是块级元素,独占一行,前后自动换行 <!...注意:不可以设置宽高,其宽度随着内容增加,高度随字体大小而改变,内联元素可以设置外边界,但是外边界不对上下起作用,只能对左右起作用,也可以设置内边界,但是内边界在ie6中不对上下起作用,只能对左右起作用...2、块级元素不能放在P标签里 3、有几个特殊的块级元素只能包含内联元素,不能包含块级元素如h1-6,p,dt 4、li标签可以包含div 5、块级元素与块级元素并列,内联元素与内联元素并列...-->
image.png 步骤1:问候一下div标签 首先,让我们一起认识一下div标签,这是一个极为常用的块级标签。所谓的块级标签,就是高度为0,宽度100%的标签,也就是说,它是独占一行的!...DOCTYPE html> 第三讲 效果是...image.png 我靠,真TM惨,宽度和高度都是0,这个标签是HTML捡来的么?别急,我们给span标签里面加一点料。 听说双拾壹什么都便宜,那你能不能跟我在一起,就当便宜我。...步骤3:图片img是什么标签 网页中是可以引入图片的,在html中,我们用img标签来引入图片。 标签有两个必需的属性:src 和 alt。...步骤4:行内标签与块级标签的转换 首先,继续上一个问题,怎样让行内标签换行,最简单的办法:div不是块级标签吗?那直接在外面套一层div不就好了? <!
HTML表格 代码实例: ...> 网页效果图: 详解 表格由(双标签)标签包裹; (双标签)标签代表所创建的表格有多少行; (双标签)标签代表所创建的表格以及所在的行有多少列; 中写内容,会显示在所在的单元格中...内联框架 代码实例: 单双标签都行;
html中的标签 标签 也可以叫 元素。所以我们常说:html标签 或 html元素,比如 标签。...html中的的内容是由 html 的各种元素构成的,比如文字、图片、视频、超链接等等,都是html的元素。...一、语法 [内容] 或者 html的元素必须以开始,然后以结束 比如: 我是按钮 三、代码实战 新建 html 文件 02-tags.html ,编写下方程序,运行看看效果吧 <!
DOCTYPE html> Document ...3.注意点 和H系列标签/p标签还有Hr标签不一样, img标签不会独占一行 如果我们手动指定了img标签显示的图片的宽度和高度, 有可能会导致图片变形, 那么如果又想指定宽度和高度, 又不想让图片变形...我们可以只指定宽度和高度其中的一个值即可 只要指定了高度, 系统会自动根据高度计算出宽度, 只要指定了宽度, 系统会自动根据宽度计算出高度, 并且都是等比拉伸的, 也就是说不会变形 4.img中的其它属性...width: 宽度 height: 高度 所以在img标签中width/height这两个属性的作用, 就是用来告诉img标签将来需要显示的图片有多宽有多高 如果img标签没有指定需要显示的图片的宽高..., 那么系统会按照图片默认的宽高来显示 如果img标签指定的宽高, 那么系统会按照指定的宽高来显示 title: 用于告诉浏览器, 当鼠标悬停在图片上时, 需要弹出的描述框中显示什么内容 alt其实是英文
h5d-sectioning-flowchart.jpg 图来自 html5doctor 拓展阅读 lets talk about semantics
Meta标签是HTML语言head区的一个辅助性标签,它位于HTML文档头部的head标记和title标记之间,它提供用户不可见的信息。...我现将前端页面开发经常用到的meta标签内容整理成文,加入了移动端web开发meta信息,供需要时查阅。...-8"> 该 meta 标签定义了 HTML 页面所使用的字符集为 utf-8 ,就是万国码。...而目前我们一般推荐使用第一种写法,也是HTML5使用的写法。...6、Pragma禁止本地缓存 设定网页不保存在缓存中,每次访问都刷新页面。这样设定,访问者将无法脱机浏览。
文章目录 一、链接标签 二、注释标签 HTML 常用的标签有如下类型 : 排版标签 文本格式化标签 图像标签 链接标签 , 其中 链接涉及到 相对路径 与 绝对路径问题 ; 一、链接标签 ----...文件页面 , 如 index.html ; 首页 ; 空链接 : 如果没有确定链接目标 , 设置 # 值 , 该链接暂时是空链接 ; <a href=...没有任何效果 ; 点击链接 4 , 跳转到博客页面 ; 点击链接 5 , 原窗口保留 , 在新窗口显示博客页面 ; 二、注释标签 ---- 如果在 HTML 页面中进行 代码注释 ,...则可以使用 注释标签 ; 在 注释标签 中的内容 , 不显示在页面 中 ; 注释是给 程序员 看的 , 用于标注代码作用 ; 通常情况下 , 都在代码的上方一行位置添加注释 ; 注释代码示例 : <!
什么是容器标签?在HTML开发中我们常常会使用一类标签作为容器放置一些内容,我们把这类标签称之为容器标签,可以作为容器标签的包括列表标签、表格标签、框架标签、布局标签,在这里我们就来总结下这些内容。...列表标签 View Code 在HTML中提供了三种列表形式,即无序列表、有序列表以及自定义列表。其中无序列表的应用场景最多,自定义列表几乎没有被使用,有序列表只是在特殊的场合中使用。...框架标签 框架是互联网早期的标签,现在开发中基本上已经不再使用了,但是在一些早期的网站中还可以看到这些内容,所以有必要了解这些内容。常见的框架标签包括、两种,下表是我们整理的一些框架相关的代码。...布局标签 所谓布局标签,很简单就是用来实现网页布局的 ? 这些标签,是现在设计网页中重要的HTML标签。...不过值得说明的是这些标签没有实际的语义,只是作为容器来放置一些内容,所以建议在实际开发中不要滥用,否则的话HTML的结构会特别复杂,代码也会特别多。 感谢阅读 喜欢看小编文章的点个订阅或者喜欢!
DOCTYPE html>:html5中定义该文档是html文档 2、文本标签 文本标签是和文本相关的标签,包括: 注释: ? 6、块标签 次此处简单介绍div和span标签,后续一般配合css使用。 【举例】:div 和 span 标签 <!...--div 每一个div占一行,块级标签 span 文本信息在一行展示,行内标签,内联标签 --> 百度 一下 ...7、语义化标签 html5中,为了提高程序的可读性,使用的标签,一般也是结合css一起使用。 【举例】使用header、footer <!...8、表格标签 html中表格的形式,先有行,然后每个行中定义单元格。
#HTML标签 刚开始学HTML发现有很多标签是只有一个的,比如这种。 然而也有很多是由两对尖括号组成的,下面就来总结一下吧!...##单标签: ---- #双标签: <
HTML表格的创建 先是一段表格代码: ...> 详解: 表格由(双标签)标签包裹; (双标签)标签代表所创建的表格有多少行; (双标签)标签代表所创建的表格以及所在的行有多少列; 中写内容,会显示在所在的单元格中...HTML内联框架 单双标签都行; ps:主要用于在网页中划出一个窗口显示另外的网页。
一、iframe标签 在HTML中,我们可使用iframe标签来创建包含另外一个文档的内嵌框架(即行内框架、内联框架)。 1.何为内嵌框架? 内嵌框架就是在当前页面再嵌入另外一个网页。...DOCTYPE html> ...DOCTYPE html> ...3.语义化 其实涉及内嵌框架的标签还有 frameset、frame,但这些在HTML5标准中已被舍弃。 对于内嵌(内联)框架,只需掌握iframe标签标签即可。...此外,在HTML5标准中iframe标签还被赋予了很多新的定义,自己一定要去看看。
领取专属 10元无门槛券
手把手带您无忧上云