当前位置：网站首页>Block elements, inline elements (
elements, span elements)

Block elements, inline elements (
elements, span elements)

2022-08-02 06:19:00 【Colorful Great Iron Ape】

HTML区块元素:

HTML内联元素:

HTML<div>元素

span元素

HTML区块元素:

eg:<h1><p><ul><table>

HTML内联元素:

eg:<b>加粗 <td><a><img>

Specifically click on the link below

(27条消息) HTML 区块元素_csdn123t的博客-CSDN博客_html 区域元素

HTML<div> 元素

HTML <div> 元素是块级元素,它可用于组合其他 HTML 元素的容器.
<div> 元素没有特定的含义.除此之外,由于它属于块级元素,the browser willDisplay line breaks before and after.
如果与 CSS 一同使用,<div> Elements can be used for large blocks of content设置样式属性.
<div> Another common use of elements is文档布局.它取代了使用表格定义布局的老式方法.使用 <table> 元素进行文档布局不是表格的正确用法.<table> 元素的作用是显示表格化的数据.

具体代码实现：

<div style="border:1px dashed red;width:500px;margin-bottom:50px;position: relative;left: 400px;">

The same we will the table below、The list is also divided into a block.

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My first web page</title>
</head>
<body>
    <div style="border:1px dashed red;width:500px;margin-bottom:50px;position: relative;left: 400px;">
        <h2>LY python 练习</h2>
        <h3>hahahaahhahhahahaha</h3>
        <p>hello world ,练习web加油加油,<span style="color:red">LY</span></p>
        <a href="https://blog.csdn.net/weixin_47314602?type=blog" target="_blank">小渣渣主页面</a>
        <br/>
        <img src="C:\Users\1\Pictures\Saved Pictures\aa.jpg" width="100">
    </div>
    <div style="border:1px dashed red;width:500px;margin-bottom:50px;position: relative;left: 400px;">
    <table border="1" cellpadding="5">
        <tr>
            <th>data1</th>
            <th>data2</th>
            <th>data3</th>
        </tr>
        <tr>
            <td>11</td>
            <td>22</td>
            <td>33</td>
        </tr>
        <tr>
            <td>111</td>
            <td>222</td>
            <td>333</td>
        </tr>
    </table>
    <ol>
        <li>情深缘浅</li>
        <li>情非得以</li>
        <li>纸短情长</li>
    </ol>
    <ol   start="10">
        <li>说散就散</li>
        <li>绿色</li>
        <li>三生三世</li>
    </ol>
    <ul>
        <li>我曾</li>
        <li>鼓楼先生
            <ul>
                <li>汉斯</li>
                <li>男</li>
                <li>32</li>
            </ul>
        </li>
        <li>寒鸦少年</li>
    </ul>
</div>
</body>
</html>

展示图：

span元素

HTML <span> 元素是内联元素,可用作文本的容器
<span> 元素也没有特定的含义.
当与 CSS 一同使用时,<span> element can be used forPart of the text sets style properties.

Add to this piece of codespan

<p>hello world ,练习web加油加油,<span style="color:red">LY</span></p>

 <div style="border:1px dashed red;width:500px;margin-bottom:50px;position: relative;left: 400px;">
        <h2>LY python 练习</h2>
        <h3>hahahaahhahhahahaha</h3>
        <p>hello world ,练习web加油加油,<span style="color:red">LY</span></p>
        <a href="https://blog.csdn.net/weixin_47314602?type=blog" target="_blank">小渣渣主页面</a>
        <br/>
        <img src="C:\Users\1\Pictures\Saved Pictures\aa.jpg" width="100">
    </div>

We can see the display imageLYThis place turns red.