html标签大合集（入门）

Y226774154

于 2024-08-23 20:21:54 发布

阅读量613

点赞数 26

文章标签： html css 前端

本文链接：https://blog.csdn.net/Y226774154/article/details/141473995

版权

一、标题<H1-6>，段落<p>,块<div>,分割线<hr>,换行<br>

示例：

<h1>一级标题</h1>
    <!-- 分割线 -->
    <hr>
    <h2>二级标题</h2>
    <!-- 分割线 -->
    <hr>
    <h3>三级标题</h3>
    <!-- 分割线 -->
    <hr>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
    <!-- 分割线 -->
    <hr>
    <div>块级元素，单独一块
        <p>段落段落段落段落段落段落段落段落段落段落段落段落
        <!-- 换行 -->
        <br>
        段落段落段落段落段落段落段落段落段落段落段落段落段落</p>
    </div>

二、字体相关标签

<div>
        <h1>字体相关标签</h1>
        <p>
            <span>普通文本</span>
            <b>粗体</b>
            <strong>粗体</strong>
            <i>斜体</i>
            <u>下划线</u>
            <del>删除线</del>
            <sup>2上标</sup>
            <sub>3下标</sub>
            H<sub>2</sub>CO<sub>3</sub> = 2H<sup>+</sup> + CO<sub>3</sub><sup>2-</sup>
        </p>
    </div>

三、列表

    <div>
        <h1>无序列表</h1>
        <!-- ul>li*3>{有序列表$} -->
        <ul>
            <li>无序列表1</li>
            <li>无序列表2</li>
            <li>无序列表3</li>
        </ul>
    </div>
    <div>
        <h1>有序列表</h1>
        <!-- ol>li*3>{有序列表$} -->
        <ol>
            <li>有序列表1</li>
            <li>有序列表2</li>
            <li>有序列表3</li>
        </ol>
    </div>

    <div>
        <h1>自定义列表</h1>
        <dl>
            <dt>项目1</dt>
            <dd>自定义列表项1</dd>
            <dt>项目2</dt>
            <dd>自定义列表项2</dd>
            <dt>项目3</dt>
            <dd>自定义列表项3</dd>
        </dl>
    </div>



    <!-- (div>(h1>{段落})+(p*3>{段落$})+div>{结尾})+div>(h1>{隔离})+span*5>{span$} -->

    <div>
        <h1>段落</h1>
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
        <div>结尾</div>
    </div>
    <div>
        <h1>隔离</h1>
        <span>span1</span>
        <span>span2</span>
        <span>span3</span>
        <span>span4</span>
        <span>span5</span>
    </div>

四、单元格

    <table border="10" cellspacing="10" cellpadding="10" align="center" width="80%">
        <tr>
            <th>表头单元格1</th>
            <th>表头单元格2</th>
            <th>表头单元格3</th>
        </tr>
        <tr>
            <td colspan="2">普通单元格11</td>
            <td>普通单元格2</td>
        </tr>
        <tr>
            <td>普通单元格1</td>
            <td colspan="2" rowspan="2">
                <table border="" width="100%">
                    <tr>
                        <td>列1</td>
                        <td>列2</td>
                    </tr>
                    <tr>
                        <td>列1</td>
                        <td>列2</td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>普通单元格1</td>
        </tr>
    </table>

五、插入音频，视频，图片，超链接

    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <span id="t666">666</span>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <span id="t888">888</span>
    <hr>
    <hr>
    <hr>
    <hr>
    <hr>
    <div>
        <h1>声音</h1>
        <audio src="./audio/bg1.mp3" controls></audio>
        <audio src="./audio/bg1.mp3" controls></audio>
        <audio src="./audio/bg1.mp3" controls></audio>

    </div>

    <div>
        <h1>视频</h1>
        <video src="./video/video.mp4" controls width="300"></video>
        <video src="./video/video.mp4" controls width="300"></video>
        <video src="./video/video.mp4" controls width="300"></video>

    </div>

    <div>
        <h1>图片</h1>
        <img src="./img/1.jpeg" alt="" width="300">
        <img src="./img/1111.jpeg" alt="图片飞走了" width="300">
        <img src="http://contentcms-bj.cdn.bcebos.com/cmspic/cbb49ae06c674b3aa70ba9b2026136d4.jpeg?x-bce-process=image/crop,x_0,y_0,w_1873,h_1031" alt="" width="300">

    </div>

    <div>
        <h1>超级连接</h1>
        <a href="http://www.baidu.com">百度</a>
        <a href="http://www.google.com">Google</a>
        <a href="./2.第一批标签.html">打开第一批标签</a>
        <a href="./3.第二批标签.html" target="_blank">打开第二批标签</a>
        <a href="#t666">充当锚点666</a>
        <a href="#t888">充当锚点888</a>
    </div>

六、框架标签

    <div>
        <h1>框架标签</h1>
        <p>可以嵌套其他页面</p>
        <iframe src="./1.helloworld.html" frameborder="0" width="33%" height="400"></iframe>
        <iframe src="./2.第一批标签.html" frameborder="0" width="33%" height="400"></iframe>
        <iframe src="./3.第二批标签.html" frameborder="0" width="33%" height="400"></iframe>

        <iframe src="https://csdn.net" frameborder="0" width="100%" height="500"></iframe>

    </div>

七、表单标签用于提交信息到服务器

<form action="http://httpbin.org/post" method="post">                                                                                                                                                                                           
        <div>
            <label for="un">用户名</label> <input required placeholder="请输入名字" name="username" id="un" type="text">
        </div>
        <div>
            <label for="pwd">密码</label>  <input name="password" id="pwd" type="password">
        </div>
        <div>
            <span>性别</span>
            <label for="man">男</label>  <input name="sex" value="man" checked id="man" type="radio">
            <label for="woman">女</label>  <input name="sex" value="women" id="woman" type="radio">
        </div>
        <div>
            <span>爱好</span>
            <label for="footbal">足球</label>  <input name="hobby" value="footbal" checked id="footbal" type="checkbox">
            <label for="basketball">篮球</label>  <input name="hobby" value="basketball" checked id="basketball" type="checkbox">
            <label for="newball">信球</label>  <input name="hobby" value="newball" id="newball" type="checkbox">
        </div>
        <div>
            <span>年纪</span> <input name="age" type="range" min="0" max="100" step="1">
        </div>
        <div>
            <span>喜爱颜色</span> <input name="color" type="color">
        </div>
        <div>
            <label for="more">附件</label> <input name="file" id="more" type="file">
        </div>

        <div>
            <span>居住地址</span>
            <select name="address">
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option  value="guangzhou">广州</option>
            </select>
        </div>
        <div>
            <span>学习语言</span>
            <select name="lang" multiple>
                <option value="python" >Python</option>
                <option value="c++" selected>C++</option>
                <option value="java" selected>Java</option>
            </select>
        </div>
        <div>
            <span>交友宣言</span>
            <textarea name="info" cols="100" rows="5"></textarea>
        </div>
        <div>
            <!-- <input type="submit" value="注册">  -->
             <input type="reset" value="清空">
            <button type="submit">注册</button>
        </div>
    </form>