html块级标签有哪些(html块级元素和行内元素区别)
这篇文章给大家聊聊关于html块级标签有哪些,以及html块级元素和行内元素区别对应的知识点,希望对各位有所帮助,不要忘了收藏本站哦。
HTML行内元素和块状元素有哪些
.关于行内元素和块状元素的说明
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级”元素(block-level);而span元素的默认display属性值为“inline”,称为“行内”元素。div这样的块级元素,就会自动占据一定矩形空间,可以通过设置高度、宽度、内外边距等属性,来调整的这个矩形的样子;与之相反,像“span”“a”这样的行内元素,则没有自己的独立空间,它是依附于其他块级元素存在的,因此,对行内元素设置高度、宽度、内外边距等属性,都是无效的。
2.行内、块状元素区别:
(1).块级元素会独占一行,其宽度自动填满其父元素宽度
行内元素不会独占一行,相邻的行内元素会排列在同一行里,知道一行排不下,才会换行,其宽度随元素的内容而变化
(2).一般情况下,块级元素可以设置 width, height属性,行内元素设置width, height无效
(注意:块级元素即使设置了宽度,仍然是独占一行的)
(3).块级元素可以设置margin和 padding.行内元素的水平方向的padding-left,padding-right,margin-left,margin-right都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。(水平方向有效,竖直方向无效)
3.行内、块状元素:
块元素(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-定义变量
可变元素
可变元素为根据上下文语境决定该元素为块元素或者内联元素。
* applet- java applet
* button-按钮
* del-删除文本
* iframe- inline frame
* ins-插入的文本
* map-图片区块(map)
* object- object对象
* script-客户端脚本
html的标签类型有哪些
1.块元素(独占一行!即使通过css设置宽度width,也会占一行的位置)
块元素的居中问题
块级元素左右居中:先设置自身width;然后,margin: 0 auto;
div(无语义)
列表 ur/ol/li
段落 p
标题 h1-h6
自定义列表 dl/dt/dd
2.内联元素(行内)[不支持width, height, margin上下,padding上下]
子级内联元素之间有间隙,可以把父级元素font-size设置为0,子级单独设置font-size
内联元素居中:由于内联元素自身不支持width,使用在父级元素设置text-alian: center的解决方案
span(无语义)
超链接标签 a
src可以为空,但一定要写
常用内联元素
3.内联块元素(支持全部样式的内联元素)
可以把内联块元素看做内联元素的进化版,
通过设置float属性也会将元素转换为内联块
通过定位属性fix, absolute都可以将元素转换为内联块
设置样式 display: inline-block;
转换为内联块
html有哪些标签
常用标签<html></html>创建一个HTML文档<head></head>设置文档标题和其它在网页中不显示的信息<title></title>设置文档的标题<body></body>标记页面正文开始和结束,网页中要显示出来的东东,都应放在这对标签之间<h1></h1>最大的标题<pre></pre>预先格式化文本<u></u>下划线<b></b>黑体字<i></i>斜体字<tt></tt>打字机风格的字体<cite></cite>引用,通常是斜体<em></em>强调文本(通常是斜体加黑体)<strong></strong>加重文本(通常是斜体加黑体)<font size="" color=""></font>设置字体大小从1到7,颜色使用名字或RGB的十六进制值<BASEFONT></BASEFONT>基准字体标记<big></big>字体加大<SMALL></SMALL>字体缩小<STRIKE></STRIKE>加删除线<CODE></CODE>程式码<KBD></KBD>键盘字<SAMP></SAMP>范例<VAR></VAR>变量<BLOCKQUOTE></BLOCKQUOTE>向右缩排<DFN></DFN>述语定义<ADDRESS></ADDRESS>地址标记<sup></SUP>上标字<SUB></SUB>下标字<xmp>...</xmp>;固定宽度字体(在文件中空白、换行、定位功能有效)<plaintext>...</plaintext>;固定宽度字体(不执行标记符号)<listing>...</listing>固定宽度小字体<font color=00ff00>...</font>;字体颜色<font size=1>...</font>;最小字体<font style='font-size:100 px'>...</font>;无限增大格式标志标签<p></p>创建一个段落<p align="">将段落按左、中、右对齐<br>换行插入换行符<blockquote></blockquote>从两边缩进文本<dl></dl>定义列表<dt>放在每个定义术语词前<dd>放在每个定义之前<ol></ol>创建一个标有数字的列表<ul></ul>创建一个标有圆点的列表<li>放在每个列表项之前,若在<ol></ol>之间则每个列表项加上一个数字;若在<ul></ul>之间则每个列表项加上一个圆点;<div align=""></div>用来排版大块HTML段落,也用于格式化表<MENU>选项清单<DIR>目录清单<nobr></nobr>强行不换行<hr size='9' width='80%' color='ff0000'>水平线(设定宽度)<center></center>水平居中链接标志表格标志<a rel="external nofollow" href="URL"></a>创建超文本链接<a rel="external nofollow" href="mailtEMAIL">……</a>创建自动发送电子邮件的链接<a name="name"></a>创建位于文档内部的书签<a rel="external nofollow" href="#name"></a>创建指向位于文档内部书签的链接<BASE>文档中不能被该站点辨识的其它所有链接源的URL< LINK>定义一个链接和源之间的相互关系——此答案来自百度百科
OK,本文到此结束,希望对大家有所帮助。