DIV元素

最新推荐文章于 2023-08-31 10:54:52 发布

「已注销」

最新推荐文章于 2023-08-31 10:54:52 发布

阅读量1.7k

点赞数 1

分类专栏： HTML 文章标签： HTML DIV

本文链接：https://blog.csdn.net/sinat_37976731/article/details/79616233

版权

HTML 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

HTML块级标签

HTML 块元素

大多数 HTML 元素被定义为块级元素或内联元素。

“块级元素”译为 block level element，而“内联元素”译为 inline element。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

例子：<h1>, <p>, <ul>, <table>

常用HTML块级标签

有序列表标签

<ol>
    <li>列表项1</li>
    <li>列表项2</li>
</ol>

无序列表标签

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
</ul>

定义描述标签

<dl>
    <dt>标题</dt>
    <dd>描述1</dd>
</dl>

HTML <div> 元素（分区标签）

HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器，对网页进行分块布局。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。<div>元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML 类

对 HTML 进行分类（设置类），使我们能够为元素的类定义 CSS 样式。

为相同的类设置相同的样式，或者为不同的类设置不同的样式。

Example1

<html>
<head>

<!-- 设置样式-->
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>

<body>

<div id="discription" class="cities">
<h2>London</h2>

<p>
London is the capital city of England. 
It is the most populous city in the United Kingdom, 
with a metropolitan area of over 13 million inhabitants.
</p>

</div>

</body>
</html>

Example2

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DIV对象练习</title>

<!-- 样式 -->
<style type="text/css">
.divClass {
    height: 200px;
    background-color: #FFF000
}
</style>
</head>
<body>

    <!--
        div：区块
        a：超链接
            属性href表示目标页面的地址，也可以是本地HTML文件的地址
            属性target：值"_self"表示在当前页面打开链接，值"_blank"表示在新窗口打开链接

    -->
    <div id="test" class="divClass" align="center">
        <h1>Hello World</h1>
        <hr>
        <a href="http://www.sohu.com" target="_self">搜狐</a><br>
        <a href="stuSystem.html">学生管理系统</a><br>
    </div>
</body>
</html>