body标签小汇总

@我是东山啊

已于 2022-07-20 20:44:39 修改

阅读量110

点赞数 4

分类专栏： web 文章标签：前端 css css3

于 2022-07-19 21:37:58 首次发布

本文链接：https://blog.csdn.net/m0_53404077/article/details/125880719

版权

web 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

今日汇总

markdown

#标题1-######标题6（#后面必须跟空格）
-+*/1.2.3 无序列表/有序列表（后面同上，必须加空格）
@[TOC]（这里写目录标题）（不用加空格，符号要用英文键盘）

快捷指令

*——重复

<!-- tr*3 -->
    <tr></tr>
    <tr></tr>
    <tr></tr>

2. >——嵌套

<!-- tr>td -->
    <tr>
        <td></td>
    </tr>

{}——内容

<!-- tr>td>{pp} -->
    <tr>
        <td>pp</td>
    </tr>

$——递增

<!-- tr*8>{q$} -->
    <tr>q1</tr>
    <tr>q2</tr>
    <tr>q3</tr>
    <tr>q4</tr>
    <tr>q5</tr>
    <tr>q6</tr>
    <tr>q7</tr>
    <tr>q8</tr>

5. +——并列

<!-- ol+ul -->
    <ol></ol>
    <ul></ul>

()——整体

`<!-- (ol+ul)*3 -->
    <ol></ol>
    <ul></ul>
    <ol></ol>
    <ul></ul>
    <ol></ol>
    <ul></ul>

6个常用标签

div——块（换行）
p——段落（比div多了上下外边距16px）
span——隔离标签，行内元素——没有任何样式
br——强制换行没有结束标签每一个标签都有默认样式 br看不见样式，有换行效果
hr——水平分割线
h1-h6 ——六级标题（换行、加粗、字体大小更改） h1-2em（32px）h4-em（相当于普通字体大小 16px）

<!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>Document</title>
</head>
<body>
    <div>块（换行）</div><div>块（换行）</div>
    <hr>
    <p>段落（比div多了上下外边距16px）</p><p>段落（比div多了上下外边距16px）</p>
    <hr>
    <span>隔离标签，行内元素——没有任何样式</span><span>隔离标签，行内元素——没有任何样式</span>
    <hr>
    强制换行 没有结束标签  每一个标签都有默认样式 br看不见样式，有换行效果<br>
    强制换行 没有结束标签  每一个标签都有默认样式 br看不见样式，有换行效果<br>
    <hr>
    <h1>我是一级标题</h1>
    <h2>我是二级标题</h2>
    <h3>我是三级标题</h3>
    <h4>我是四级标题</h4>
    <h5>我是五级标题</h5>
    <h6>我是六级标题</h6>
</body>
</html>

运行代码如下：
在这里插入图片描述

8个文本排版标签

b/strong——加粗
i/em——加斜
sup/sub——上标/下标
u/del——下划线/删除线`

<!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>Document</title>
</head>
<body>
    <b>加粗</b> <strong>加粗</strong>
    <i>加斜</i> <em>加斜</em>
    字<sup>上标</sup>  字<sub>下标</sub>
    <u>下划线</u>  <del>删除线</del><br>
    H<sub>2</sub>CO<sub>3</sub>=2H<sup>+</sup>+CO<sub>3</sub><sup><span style="font-weight:bold;">2</span>-</sup>
</body>
</html>

运行代码如下：
在这里插入图片描述

6个列表标签

ul——无序列表（实心圆点）
ol——有序列表（有序号）
li——列表项目
dl——自定义列表
dt——自定义列表项目
dd——自定义列表项目说明

<!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>Document</title>
</head>
<body>
        <ul>
        <li>湖南</li>
        <li>湖北</li>
        <li>广西</li>
        </ul>
        <ol>
            <li>河南</li>
            <li>河北</li>
            <li>山东</li>
        </ol>
    
        <dl>
            <dt>html</dt>
            <dd>html是网页的骨架</dd>
            <dt>css</dt>
            <dd>css是网页的皮肤</dd>
            <dt>javascript</dt>
            <dd>javascript是网页的血液</dd>
            <dl>
                <dt>vue</dt>
                <dd>vue是可以拿一万块的框架</dd>
                <dt>react</dt>
                <dd>react是vue的哥哥</dd>
            </dl>
        </dl>
</body>
</html>

运行代码如下：
在这里插入图片描述

style样式

color——文字的颜色
background-color——背景颜色
font-size——文字的大小
font-weight 100-900——文字的粗细
dispaly——block/inline（块元素div/行内元素span） inline-block（行内块不会换行但可以给宽高）
border：1px soild（直线） dotted（虚线）red——边框（宽度线型颜色）
margin/padding——外边距/内补

<!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>Document</title>
</head>
<body>
    <span style="color: red; background-color: aquamarine; ">文字颜色和背景颜色</span>
    <hr>
    <span style="font-size: 30px; font-weight: 600; ">文字的大小文字的粗细</span>
    <hr>
    <div style="display: inline;">div变身span</div>
    <div style="display: inline;">div变身span</div>
    <hr>
    <span style="display: block;">span变身div</span>
    <span style="display: block;">span变身div</span>
    <hr>
    <span style="border: 2px dotted red;">边框演示</span>
    <hr>
    <div style="color: red; font-size: 30px; border: 4px solid black; width: 200px; height: 200px; margin: 50px; padding: 30px;">内外边距</div>
</body>
</html>