drawing-bed
/
frontend
/
html-element.html

<!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>一级标题</h1>
    ...
    <h6>最小六级标题</h6>
    <p>这是段落</p>
    <br> (换行)
    <hr> (水平线)
    <!-- 这是注释 -->


    <b>粗体文本</b>
    <i>斜体文本</i>
    <em>This text is emphasized</em>
    <strong>This text is strong</strong>
    <code>计算机代码</code>
    <pre>预格式化文本,它会保留所有空格和换行</pre>


    <style type="text/css">
        h1 {color:red;}
        #tips {color:orange;}
        .app {color: green;}
    </style>
    <div class="app">文档中的块级元素</div>
    <span>文档中的内联元素</span>


    <a href="https://cnblogs.com/dallas98" target="_blank">我的博客,target属性定义了新开一个标签页</a>
    <a href="www.example.com"><img src="URL" alt="这是图片替换文本"></a>
    <a href="mailto:email@email.com">发送email</a>
    书签：
    <a id="tips">提示部分</a>
    <a href="#tips">跳到提示部分</a>


    无序列表
    <ul>
        <li>项目</li>
        <li>项目</li>
    </ul>

    有序列表
    <ol>
        <li>第一项</li>
        <li>第二项</li>
    <ol>


    <table border="1">
        <!-- tr:row td:data th:head表头-->
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
    </table>


    表单
    <form action="action.php">
        First name: <input type="text" name="firstname"><br>
        Last name: <input type="password" name="lastname">
    </form>

    <form action="" method="get">
        <!-- name属性定义了是否为一组表单 -->
        <input type="radio" name="sex" value="male">Male<br>
        <input type="radio" name="sex" value="female">Female
        <input type="submit" value="提交">
    </form>


    内联框架
    <iframe src="demo.html" width="600" height="300">内联框架</iframe>

    frameset框架不能与body同时出现
    <frameset cols="25%,75%">
        <frame src="frame_a.html">
        <frame src="frame_b.html">
    </frameset>


    <img loading="lazy" src="URL" alt="替换文本" height="50px" width="30px">

    <video width="320" height="240" controls>
        <!-- 定义一个视频，并有不同的视频资源 -->
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.ogg" type="video/ogg">
        您的浏览器不支持Video标签。
    </video>

    <audio src="URL">音频资源</audio>

</body>
</html>