20201122--html块级元素

最新推荐文章于 2023-07-19 09:33:36 发布

Lele--E

最新推荐文章于 2023-07-19 09:33:36 发布

阅读量180

点赞数

分类专栏： web前端 # html

本文链接：https://blog.csdn.net/qq_43411930/article/details/109906122

版权

web前端同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

html

1 篇文章 0 订阅

订阅专栏

html常用块级标签

1.块级元素
2.内联元素
3.内联块元素

块级元素

描述: 如果不加css样式,独占一行

<div>、<p>、<h1>~<h6>、<ol><li>、<ul><li>、<dl><dt><dd>、<table><tr><td>、<address>、<blockquote> 、<form>

div和p标签的区别
1.div里面还可以包含大量的代码块,p里面一般就是内联元素
2.div可以嵌套p,p不能嵌套div
基本上都会使用到div

h1~h6详情
1.h1~h6分别对应着标题一到标题六,都是默认加粗
2.字体大小font-size分别是 24px,22px,18px,16px,12px,10px

ol,ul详情
1.ol表示有序列表,ul表示无序列表,都是嵌套li标签来使用
2.一般ul的使用情况较多,配合css使用可以用于导航栏、侧边栏

**<br />**为换行单标签

dl,dt,dd详情
1.dl嵌套dt,dd标签
2.dd默认 margin-inline-start: 40px;
底部可以使用

address
通常斜体显示地址内容

blockquote
blockquote标签定义摘自另一个源的块引用。浏览器通常会对blockquote元素进行缩进。

form
表单,通常会进行验证里面还包含其他元素,比如 input标签 button标签

效果图
在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
    <div>我是一个div</div>
    <p>我是一个p标签</p>
    <h1>标题一</h1>
    <h2>标题二</h2>
    <h3>标题三</h3>
    <h4>标题四</h4>
    <h5>标题五</h5>
    <h6>标题六</h6>
    <ol>
      <li>有序列表</li>
      <li>ol嵌套li标签</li>
    </ol>
    <br />
    <ul>
      <li>无序列表</li>
      <li>ul嵌套li标签</li>
    </ul>
    <dl>
      <dt>我是dt</dt>
      <dd>我是dd</dd>
    </dl>

    <table>
      <tr>
        <td>td1</td>
        <td>td2</td>
      </tr>
    </table>

    <address>
      address标签 湖南省长沙市麓谷
    </address>

    <blockquote>blockquote</blockquote>

    <form action="">
      <input type="text" value="我是input">
      <button>我是button</button>
    </form>
  </body>
</html>