HTML菜鸟入门7

最新推荐文章于 2024-07-22 22:37:58 发布

小笨要阳光

最新推荐文章于 2024-07-22 22:37:58 发布

阅读量313

点赞数

分类专栏： html 文章标签： html 块标签内联标签 block inline

本文链接：https://blog.csdn.net/xiaobenyaoyangguang/article/details/77606678

版权

html 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>无标题文档</title>
<style>
body,p,h1,h2,dl,dd{margin:0;font-size:12px;}
body{border:1px solid red;}
ol,ul{list-style:none;}
a{text-decoration:none;}
</style>
</head>
<body>
<p>段落</p>
<h1>标题1</h1>
<h2>标题2</h2>
<dl>
<dt>
定义列表标题
</dt>
<dd>定义列表项1</dd>
<dd>定义列表项2</dd>
<dd>定义列表项3</dd>
</dl>
<div>块</div>
<ol>
<li>列表1</li>
<li>列表2</li>
<li>列表2</li>
</ol>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表2</li>
</ul>
<img src="1.png" alt="猫咪"/>
<a href="#"><img src="1.png" alt="猫咪"/></a>
<span>区分样式</span>
<strong>强调(粗体)</strong>
<em>强调(斜体)</em>
<a href="#">a标签（链接，下载，锚点）</a>
</body>
</html>

运行结果分析：

块属性标签

1.默认独占一行显示
这里写图片描述

内联/内嵌/行内属性标签

1.默认同行可以继续和同类标签显示
这里写图片描述

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>无标题文档</title>
<style>
div,span{background:red;}
</style>
</head>
<body>
<span>区分样式</span>
<span>区分样式</span>
<span>区分样式</span>
<div>块</div>
<div>块</div>
<div>块</div>
</body>
</html>

运行结果分析：

块属性标签

2.没有宽度时，默认撑满一排显示
这里写图片描述

内联/内嵌/行内属性标签

2.内容撑开宽度
这里写图片描述

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>无标题文档</title>
<style>
div,span{background:red;width:100px;height:100px;}
</style>
</head>
<body>
<span>区分样式</span>
<span>区分样式</span>
<span>区分样式</span>
<div>块</div>
<div>块</div>
<div>块</div>
</body>
</html>

运行结果显示：
这里写图片描述
运行结果分析：

块属性标签

3.支持宽高属性

内联/内嵌/行内属性标签

3.不支持宽高属性

代码1：padding（外边距）

这里写代码片<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>无标题文档</title>
<style>
div,span{background:red;width:100px;height:100px;}
span{padding:100px;}
</style>
</head>
<body>
<span>区分样式</span>
<span>区分样式</span>
<span>区分样式</span>
<div>块</div>
<div>块</div>
<div>块</div>
</body>
</html>

代码2：margin（外边距）

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>无标题文档</title>
<style>
div,span{background:red;width:100px;height:100px;}
span{margin:100px;}
</style>
</head>
<body>
<span>区分样式</span>
<span>区分样式</span>
<span>区分样式</span>
<div>块</div>
<div>块</div>
<div>块</div>
</body>
</html>

运行结果：
这里写图片描述

内联/内嵌/行内属性标签

支持外边距（margin:100px;）的正常显示：
span标签的显示结果会距离上下左右各100px
支持内边距（padding:100px;）的正常显示：span标签的显示结果会距离上下左右各100px将显示的块往下挤200px
4.不支持上下的margin和padding

块属性标签

4.支持所有css命令

代码1：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>无标题文档</title>
<style>
div,span{background:red;width:100px;height:100px;}
</style>
</head>
<body>
<span>区分样式</span>
<span>区分样式</span>
<span>区分样式</span>
<div>块</div>
<div>块</div>
<div>块</div>
</body>
</html>

代码2：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>无标题文档</title>
<style>
div,span{background:red;width:100px;height:100px;}
</style>
</head>
<body>
<span>区分样式</span><span>区分样式</span>
<span>区分样式</span>
<div>块</div>
<div>块</div>
<div>块</div>
</body>
</html>

运行结果显示：
这里写图片描述

内联/内嵌/行内属性标签

5.代码换行被解析（换行会默认解析为空格）

内联标签和块标签的转换

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>无标题文档</title>
<style>
div,span{background:red;width:100px;height:100px;}
span{display:block;}
div{display:inline;}
</style>
</head>
<body>
<span>区分样式</span><span>区分样式</span>
<span>区分样式</span>
<div>块</div>
<div>块</div>
<div>块</div>
</body>
</html>

结果：
这里写图片描述

小笨要阳光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML菜鸟入门7

代码：<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><title>无标题文档</title><style>body,p,h1,h2,dl,dd{margin:0;font-size:12px;}body{border:1px solid red;}
复制链接

扫一扫

专栏目录