HTML-块级元素

最新推荐文章于 2025-09-27 16:37:54 发布

原创最新推荐文章于 2025-09-27 16:37:54 发布 · 473 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端

前言

今天我们学习块级元素！

一、块级元素的定义

块级元素总是从新行开始，浏览器会自动在元素前后添加-些空间(外边距)。块级元素总是占据可用的全部宽度(尽可能向左右两边扩展)。

两种常用的块级元素是:<p>和<div>

<p>元素在 HTML 文档中定义一个段落。

案列代码：

<p align="center">欢迎来到：<ins>计算机学院</ins></p>

<div>元素在HTML 文档中定义一个区块或部分。

案列代码：

<div style="border:1px solid black">标题</div>

二、常见属性标签

常见属性标签	h1	一级标题
	p	段落标签，用来描述网页中的段落内容
	div	用于页面区域的区分
	ul	定义无序列表
	ol	定义有序列表
	li	定义列表项，与ul/ol搭配使用
	dl	定义列表标签，与dt和dd一起使用

案列代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>标题1</h1>
   <div>
    <h2>标签2</h2>
    <p>段落</p>
   </div>
   <ul>
    <li>无序</li>
    <li>标签1</li>
   </ul>

   <ol type="A">
    <li type="A">有序</li>
    <li type="">标签2</li>
   </ol>
   <dl>
    <dt>列表</dt>
   </dl>
</body>
</html>

三、练习题解析

写出下面图片的源代码

此练习题运用了多种常见的属性标签，其中包括<h1>、<p>、<div>、<ins>、<hr>、<ul>、<ol>、<li>、<img>、<table>、<th>、<br>、<form>等。

练习题代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>块级元素</title>
</head>
<body>
    <h1 align="center">广东云浮中医药职业学院</h1>
        <p align="center">欢迎来到：<ins>计算机学院</ins></p>
    <hr>
        <ul>
            <a href=""><li>首页</li></a>
            <a href=""><li>关于我们</li></a>
            <a href=""><li>学生风采</li></a>
            <a href=""><li>联系方式</li></a>
        </ul>
    <hr>
        <article><h3>最新文章</h3></article>
        <section><h4>文章标题</h4></section>
        <section>这里是文章的内容简介。<br>可以使用<br>标签进行换行。</section>
        <section>    
            <img src="C:\Users\小吴\Desktop\学校logo.jpg" alt="" width="200" height="200">
        </section>
        <section>想了解广东云浮中医药职业学院：<a href="">点击这里</a></section>
            <h4>侧边栏</h4>侧边栏内容，如快速连接、广告等。<br>
            <table border="1">
                <tr>
                    <th>专业</th>
                    <th>链接</th>
                </tr>
                <tr>
                    <td>计算机应用技术</td>
                    <td>
                    <a href="">专业A详情</a>
                    </td>
                </tr>
                <tr>
                    <td>数字媒体技术</td>
                    <td>
                    <a href="">专业B详情</a>
                    </td>
                </tr>
            </table>
            <br>
            <b>联系我们</b><br>
            <form action="">
                姓名： <input type="text"><br>
                邮箱： <input type="text"><br>
                <input type="submit">
            </form>
<hr>
<footer>
    <p>版权所有 © 2024 广东云浮中医药职业学院计算机学院</p>
  </footer>
</body>
</html>