html常用标签

实例
<!-- 1.标题与段落 -->

<div>

     <h1>开源软件是什么</h1>

 

     <h2>开源软件是什么</h2>

 

     <h3>开源软件是什么</h3>

 

     <h4>开源软件是什么</h4>

 

     <h5>开源软件是什么</h5>

 

     <h6>开源软件是什么</h6>

 

    <p>什么是开源软件？开源软件是免费提供软件源代码（用编程语言编写的字符串）的软件</p>

    <p>什么是开源软件？开源软件是免费提供软件源代码（用编程语言编写的字符串）的软件</p>

    <hr>

    <!-- 水平分隔线 -->

</div>

<!-- 2.文本修饰 -->

<div>

    <p>什么是开源软件？<strong style="background-color: brown;color: white;">开源软件</strong>是免费提供软件源代码（用编程语言编写的字符串）的软件</p>

    <p>什么是开源软件？<em style="color: red">开源软件</em>是免费提供软件源代码（用编程语言编写的字符串）的软件</p>

</div>

<!-- 3.列表 -->

<div>

     <h3>购物清单</h3>

 

    <ul>

        <li>1. 暖手宝一个, 30元, 被窝太冷</li>

        <li>2. 笔记本电脑一台, 5000, 学php编程</li>

        <li>3. 充气娃娃一个(波波款), 2000, 孤枕难眠</li>

    </ul>

    <hr>

    <ol>

        <li>暖手宝一个, 30元, 被窝太冷</li>

        <li>笔记本电脑一台, 5000, 学php编程</li>

        <li>充气娃娃一个(波波款), 2000, 孤枕难眠</li>

    </ol>

    <dl> <dt>什么是开源软件</dt>

 

        <dd>是免费提供软件源代码（用编程语言编写的字符串）的软件</dd>

        <dd>是免费提供软件源代码（用编程语言编写的字符串）的软件</dd>

    </dl>

</div>

<!-- 4.表格 -->

<table border="1" cellpadding="5" cellspacing="0" width="500">

    <caption>购物车</caption>

    <thead>

        <tr bgcolor="lightblue">

            <th>序号</th>

            <th>名称</th>

            <th>价格</th>

            <th>用途</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <th>1</th>

            <th>暖手宝一个</th>

            <th>30元</th>

            <th>被窝太冷</th>

        </tr>

        <tr>

            <th>2</th>

            <th>笔记本电脑一台,</th>

            <th>5000</th>

            <th>学php编程</th>

        </tr>

        <tr>

            <th>3</th>

            <th>充气娃娃一个(波波款),</th>

            <th>600</th>

            <th>用途</th>

        </tr>

    </tbody>

</table>

<hr>

<!-- 5.表单 -->

 <h3>用户注册</h3>

 

<form action="" method="GET">

    <div>

        <label for="username">用户名：</label>

        <input type="text" id="username" name="username" value="" placeholder="用户名不能少于二位">

    </div>

    <div>

        <label>密码：

            <input type="password" name="password" placeholder="密码必须要6位以上">

        </label>

    </div>

    <div>

        <input type="radio" name="gender" value="male" id="male" checked="">

        <label for="male">男</label>

        <input type="radio" name="gender" value="female" id="female">

        <label for="female">男</label>

    </div>

    <div>

        <input type="checkbox" name="hobby[]" value="game" id="game">

        <label for="game">打游戏</label>

        <input type="checkbox" name="hobby[]" value="game1" id="game1">

        <label for="game1">打球</label>

        <input type="checkbox" name="hobby[]" value="game2" id="game2">

        <label for="game2">看书</label>

    </div>

    <div>

        <label for="edu">我的学历</label>

        <select name="edu" id="edu" value="3">

            <option value="1">小学</option>

            <option value="1">中学</option>

            <option value="1" selected="">大学</option>

        </select>

    </div>

    <div>

        <label for="common">留言</label>

        <textarea name="common" id="common" cols="30" rows="10" placeholder="不超过100个字"></textarea>

        <input type="submit" value="注册">

        <input type="reset" value="重置">

        <button type="button">提交</button>

    </div>

</form>

<!-- 6.图片 -->

<img src="static/images/zly.jpg" alt="图片" width="300">

<!-- 7.视频 -->

<video src="static/images/demo.mp4" controls="controls" width="300"></video>






运行实例 »
点击 "运行实例" 按钮查看在线实例