块级元素 ：独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽；
行内元素 ：可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高！
其中还有一种结合两种模式有点的显示模式：
行内块元素 ：结合的行内和块级的有点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示；
特点：可以多个标签存在一行，不能直接设置行内标签的高度、宽度、行高以及顶和底边距，完全靠内容撑开宽高！
a 标签：主要用来链接一个其他的网页；
span 标签：主要用来对行内的文字进行一些样式以及其他的 *** 作；
em 标签：一般用来对文字进行强调，使用斜体体现出来；
strong 标签：一般用来对文字进行强调，使用加粗字体体现出来；
img 标签：图片引用标签，其中 src属性中写入图片的地址；
var 标签：JavaScript中命名变量的标签。
特点：独占一行，对高度、宽度、行高以及顶和底边距都可设置的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽；
p 标签：段落标签，段落文字使用，默认格式：段尾进行换行；
div 标签：划分块的主要使用标签；
ul 标签：无序列表的主标签，后面的标号为圆点（黑色）；
ol 标签：有序列表的主标签，后面一般跟有序的1,2,3,4,5...；
li 标签：列表中的主体使用标签
dl 标签：自定义标签的主标签；
dt 标签：自定义标签的表头；
dd 标签：自定义标签的表头的解释（描述）信息；
h1~h6 ：6级标题标签、字体的大小依次变小。
特点：结合的行内和块级的有点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示；
+++++++++++++++++++++++++++++++++++++++++
各种标签之间的转换
1、块级标签转换为行内标签： display:inline
2、行内标签转换为块级标签： display:block
3、转换为行内块标签： display：inline-block
在这之前有说过 text-align这个属性是否生效，原因是块级标签如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽，那么在100%的宽度中居中生效；但是行内元素的宽完全是靠内容撑开，所以宽度就是内容撑开的宽
基本上就是这个属性之间的转换！
1、在HTML基础中，单标签就是由一个标签组成的。例如<br>、<hr>、<img>、<input>、<param>、<meta>、<link>。
2、而双标签则是由“开始标签”和“结束标签”两部分构成（这两部分是相同的）。例如<html>、<head>、<title>、<body>、<table>、<tr>、<td>、<span>、<p>、<form>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<object>、<style>、<b>、<u>、<strong>、<i>、<div>、<a>、<script>、<center>（双标签的一部分）。
据了解，HTML标签是HTML语言中最基本的单位，同时HTML标签还是HTML（标准通用标记语言下的一个应用）最重要的组成部分。
扩展资料
HTML基础标签基于特性的分类
在HTML基础中，标签又被称为元素，根据标签特性可以分为块标签、行内(内联)标签和行内块标签。
1、块标签：默认情况下独占一行，宽度为父级的100%；支持设置宽高；支持上下左右的margin、padding值。
2、行内标签：与其他元素并列在一行；不支持设置宽高，宽度随内容撑开；支持左右方向的margin、padding。
3、行内块标签：与其他元素并列在一行；支持设置宽高；支持上下左右的margin、padding值。
参考资料：百度百科-html标签
HTML 文档和 HTML 元素是通过 HTML 标签进行标记的，HTML 标签由开始标签和结束标签组成，下面我们来看一下HTML中常用的块状标签。什么是块级标签？我们可以通过一个简单的方式来判定，那就是在网页上单击右键选择“审查元素”,在审查元素当中显示为可折叠的就是块状标签.
1.jpg
那么常见的块状标签有哪些呢？
标题标签
<h1></h1>、<h2></h2>、<h3></h3>......以此类推，其中，规范的写法里<h1></h1>在一个页面当中仅出现一次，也就是页面标题。
代码如下
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
效果如下
2.jpg
段落标签
<p></p>有时候会出现没有换行的情况，那么可以使用换行标签<br></br>
水平线标签
<hr></hr>
效果如下：
3.jpg
有序列表标签
就是会按照1、2、3......或者其它递进方式排列
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
显示效果
4.jpg
无序列表标签
每一个列表都是一样的标示
代码如下
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）