html5行级标签,8、html5哪些标签时块级、行内、行内块？2021-01-30

一、块级标签

div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr、blockquote、address、table、menu、pre

HTML5：header、section、article、footer等

块级元素独占一行，当没有设置宽高时，它默认设置为100%(其宽度自动填满其父元素宽度)

块级元素允许设置宽高，width、height、margin、padding、border都可控制

注：块级元素设置了width宽度属性后仍然独占一行

块级元素可以包行内元素、块级元素

二、行内元素

span、img、a、label、code、input、abbr、em、b、big、cite、i、q、textarea、select、small、sub、sup，strong、u

button(display：inline-block)

行内元素不能独占一行，与其他行内元素排成一行，其宽度随元素的内容变化而变化

行内元素不能设置width、height、margin、padding

行内元素默认宽度为其content宽度

行内元素只能包括文字或行内元素、行内块元素，不能包括块级元素

display：inline-block：行内块元素与行内元素属性基本相同即不能独占一行，但是可以设置width及height

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

有一些特别的行内元素可设置宽高(行内块元素：1行上可以显示多个元素、默认宽度就是本身的宽度、可以设置宽高)

替换元素：< img>、< input>、< textarea>、< select>、< object>

这些元素与其他行内元素不同的是，它有内在尺寸。因为它像是一个框，比如img元素，它能显示出图片是由于src的值，在审查元素时就不能直接看到图片，而input是输入框或是复选框也是因为其type的不同。

这种需要通过属性值显示的元素，其本身是一个空元素，像一个空的框架

将行内元素分行显示或将块级元素同行显示

display:block -- 显示为块级元素(块级元素默认样式)

display:inline -- 显示为行内元素(行内元素默认样式)

display:inline-block -- 显示为行内块元素，表现为同行显示并可修改宽高内外边距等属性(行内块元素默认属性)

常将

元素加上display:inline-block样式，原本垂直的列表就可水平显示

有些特殊的块级元素不能包含块级元素,只能包含行内元素：h1~h6、p、dt

html5行级标签,8、html5哪些标签时块级、行内、行内块？2021-01-30相关推荐

HTML 行内元素与块级元素
目录 1.HTML 行内元素与块级元素 2.常用的 display 值 3.行内元素和块级元素盒模型区别 4.块级元素与 overflow 5.实践 1.HTML 行内元素与块级元素 ...
HTML5 在a标签内放置块级元素
原文地址:HTML5: Wrap Block-Level Elements with A's 原文日期: 2010年06月26日翻译日期: 2013年08月22日对比起XHTML来说,HTML5通 ...
HTML5 行内元素有哪些,块级元素有哪些, 空元素有哪些?
前端面试题(8) 打卡: 2021-5-2 HTML HTML5 行内元素有哪些,块级元素有哪些, 空元素有哪些? (1)行内元素 inline element a - 锚点 b - 粗体 ( 不推荐 ...
php识别html5,CSS_在IE6/7/8下识别html5标签(让老式浏览器识别html5)，识别html5标签： html5添加了许 - phpStudy...
在IE6/7/8下识别html5标签(让老式浏览器识别html5) 识别html5标签: html5添加了许多语义化的标签,比如,,什么的,当时看到这些标签的时候心想html5估计很多老式IE浏览器都 ...
【HTML5】HTML语法和基本常用标签（字符集）
一.HTML语法规则 HTML 标签是由尖括号包围的关键词,例如<html>. 围堵标签(双标签): 有开始标签和结束标签.如 <html> </html> 自闭合 ...
html5的a能不能放div,从a标签为什么不能包含div标签-了解HTML5元素分类与内容模型...
我们知年有这只制明个手近天点里要它出水机近天点道按新的 HTML 规范,已经不按 inline 和 block 来区分元素类型了.所以我们在a标签里面使用div标签时候会发现a标签并不能通过改变css ...
html标签api,html5新增标签+API介绍
新增标签 1.embed embed标签是html5新增的标签,用来嵌入内容,比如插件等,常用于视频文件的播放(为外部应用程序定义容器). 这篇文章介绍了embed的常用属性,基本都是定义播放器的一些 ...
HTML5清除2个div标签的空白,DIV标签里面IMG图片下方留有空白怎么办
我们很多个人博客网站都会广告位投放一些图片广告,在网页设计中,图片是不可缺少的素材,但是在 div 标签里面放入 img 图片的话,有时候会在图片的下方出现一行空间的区域,如果单纯的图片不醒目或是图片 ...
什么是HTML语义化标签？为什么要用H5语义化标签？HTML5语义化标签有哪些
对于大部分初学者来说,可能无法理解,明明在学习的时候,用div标签就能构成页面,为什么要用h5语义化标签?可能有一些前端工作者对HTML标签语义化的概念也不是很清楚,那么究竟什么是HTML语义化标 ...

html5行级标签,8、html5哪些标签时块级、行内、行内块？2021-01-30

html5行级标签,8、html5哪些标签时块级、行内、行内块？2021-01-30相关推荐

最新文章

热门文章