html5学习之路_002-优快云博客

本文详细介绍了HTML中的块元素与内联元素的特点，并通过实例展示了如何使用CSS对这些元素进行样式定制，包括颜色、布局等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

html块

html块元素

块元素在显示时，通常会以新行开始

如：<h1>、<p>、<ul>

html内联元素

内联元素头通常不会以新行开始

如：<b>、<a>、<img>

html<div>元素

<div>元素也被称为块元素，其主要的是组合html元素的容器

html<span>元素

<span>元素是内联元素，可作为文本的容器

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>块元素</title>
    <link rel="stylesheet" type="text/css" href="mycss02.css">
</head>
<body>
    <!-- 块 -->
    <p>hello</p>
    <h3>world</h3>
    <b>这是一个</b>
    <a>zheshiyige </a>
    <div id="divID">
        <p>hello world</p>
        <a href="http://baidu.com">点击我</a>
    </div>
    <div id="divspan">
        <p><span>这是一个测试</span>程序编后话</p>
    </div>
</body>
</html>

<p>hello</p>、<h3>world</h3>是块元素，他们之间不会在同一行，有新行开始。<b>这是一个</b>、<a>zheshiyige </a>不会换行，如图：

div通过css设置，设置一个id，id="divID"，通过<link rel="stylesheet" type="text/css" href="mycss02.css"> </head>引入，就可以在css中设置编辑

#divID a {
    color: red;
}
#divID p{
    color: gold;
}
#divspan span{
    color: magenta;
}

上述就是css的内容，其中#divID a { color: red; }定义了<a></a>中的内容颜色为red，<p></p>中的颜色为gold；<span></span>中颜色为magenta。如图：

本站文章为 宝宝巴士 SD.Team 原创，转载务必在明显处注明：（作者官方网站：宝宝巴士 )

转载自【宝宝巴士SuperDo团队】 原文链接: http://www.cnblogs.com/superdo/p/4752981.html

转载于:https://www.cnblogs.com/superdo/p/4752981.html