块级元素、行内元素直观记忆

最新推荐文章于 2023-01-14 16:09:24 发布

小鱼小鱼干

最新推荐文章于 2023-01-14 16:09:24 发布

阅读量201

点赞数

分类专栏：前端踩坑路漫漫面试官常问文章标签：块级元素、行内元素

本文链接：https://blog.csdn.net/weixin_43361722/article/details/103503833

版权

前端踩坑路漫漫同时被 2 个专栏收录

96 篇文章 7 订阅

订阅专栏

面试官常问

11 篇文章 0 订阅

订阅专栏

左边为块级元素，右边为行内元素

在这里插入图片描述

行内元素特点是不换行，写了双份的更直观。代码如下：

<!DOCTYPE html>
<head>
    <meta charset = "utf-8">
    <title>HTML5 Demo</title>
<body>
    <!-- 块级元素 -->
    <div style="width: 50%; float: left;border-right: medium double rgb(250,0,255);">
        <h2>h1--h6：一级标题到六级标题</h2>
        <div>最常用的：div</div>
        <p>p段落标签</p>
        <ul>
            <li>ul li是块级元素吗</li>
            <li>他是</li>
        </ul>
        <ol>
            <li>ol li是块级元素吗</li>
            <li>他也是</li>
        </ol>
        <table border="1">
            <tr>
                <th>th表头</th>
                <th>th表头</th>
            </tr>
            <tr>
                <td>tr表格行</td>
                <td>td表格单元</td>
            </tr>
        </table>
        <br/>
        <table border="1">
            <tr>
                <th>th表头</th>
                <th>th表头</th>
            </tr>
            <tr>
                <td>tr表格行</td>
                <td>td表格单元</td>
        </table>
        <pre>
            pre1112
            12123
            45
        </pre>
        <form>
            Form:<input type="text" name="firstname" value="Mickey">
            <input type="submit" value="Submit">
        </form> 
        <form>
                Form:
            <label for="male">Male</label>
            <input type="radio" name="sex" id="male" />
            <label for="female">Female</label>
            <input type="radio" name="sex" id="female" />
            </form>
        <hr color="red">
    </div>
    <!-- 行内元素 -->
    <div style="width: 44%; float: right;    padding: 20px;">
        <a href="https://www.baidu.com/">a超链接</a>
        <a href="https://www.hao123.com/">a超链接</a>
        <span>span<i>iii</i></span>
        <span>span</span>
        <input type="text" name="input" id="" value="value">
        <input type="text" name="input2" value="value2">
        <button>button</button>
        <button>button2</button>
        <!-- <br> -->
        <textarea name="textarea" id="" cols="20" rows="5">textarea多行文本输入框</textarea>
        <textarea name="textarea" id="" cols="20" rows="5">textarea多行文本输入框</textarea>
        <select>
            <option value="volvo">select</option>
            <option value="saab">Saab</option>
            <option value="opel">Opel</option>
            <option value="audi">Audi</option>
        </select>
        <select>
        <option value="volvo">select</option>
        <option value="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
        </select>
        <em>em</em>
        <em>em</em>
        <i>i</i>
        <i>i</i>
        <strong>strong</strong>
        <strong>strong</strong>
        <code>code</code>
        <code>code</code>
    </div>
</body>
</head>

小鱼小鱼干

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
块级元素、行内元素直观记忆

左边为块级元素，右边为行内元素行内元素特点是不换行，写了双份的更直观。代码如下：<!DOCTYPE html><head> <meta charset = "utf-8"> <title>HTML5 Demo</title><body>  <...
复制链接

扫一扫