博主信息
博文 11
粉丝 2
评论 0
访问量 10337
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
html文档结构与常用标签--2019-07-02 22:00
烦帅不防晒
原创
859人浏览过

html文件中的所有元素,都需要标签来修饰,标签是必不可少的。

一、文档结构

    <!doctype html>  声明

<head>...</head>  头部部分,浏览器查看

<body>...</body>身体部分,用户查看

二、无序列表的基本使用

实例

    <ul>回收
        <li>冰箱</li>
        <li>彩电</li>
        <li>空调</li>
    </ul>
运行实例 »

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

三、表格的用法以及行列合并的应用

实例

   <table border="1" cellspacing="0" width="300px" align="letf">
        <caption>回收价格</caption>
        <thead>
          <tr bgcolor="silver">
              <td>序号</td>
              <td>产品</td>
              <td>单价</td>
              <td>数量</td>
              <td>总价</td>
          </tr>
        </thead>
        <tbody align="center">
          <tr>
              <td>1</td>
              <td>冰箱</td>
              <td>100</td>
              <td>1</td>
              <td>100</td>
          </tr>
          <tr>
              <td>2</td>
              <td>彩电</td>
              <td>50</td>
              <td>3</td>
              <td>150</td>
          </tr>
          <tr>
              <td>3</td>
              <td>空调</td>
              <td>200</td>
              <td>2</td>
              <td>400</td>
          </tr>
          <tr>
              <td colspan="3">总计</td>
              <td>6</td>
              <td>650</td>
          </tr>
        </tbody>
    </table>

运行实例 »

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

四、表单以及常用控件元素的使用

实例

<h3>报名信息填写</h3>
<form action="" method="get" name="register">
    <p>
        <label for="usename">账号:</label>
        <input type="text" name="usename" id="usename" placeholder="不超过8字符" maxlength="8">
    </p>
    <p>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" >
    </p>
    <p>
        <label for="age"> 年龄:  </label>
        <input type="number" id="age" name="age" min="20" max="80">
    </p>
    <p>
        <label for="birthplace">出生地</label>
        <select name="birthplace" id="birthplace" >
            <option value="0">请选择</option>
            <option value="1">京津翼</option>
            <option value="2">黔东南</option>
            <option value="3">其他</option>
        </select>
    </p>
    <p>
        <label for="game">爱好:</label>
        <input type="checkbox" id="game" name="hobby" value="game" checked>
        <label for="game">游戏</label>
        <input type="checkbox" id="book" name="hobby" value="book" >
        <label for="book">看书</label>
    </p>
    <p>
        <label for="male">性别:</label>
        <input type="radio" name="gender" id="man">
        <label for="man"> 男</label>
        <input type="radio" name="gender" id="male">
        <label for="male">女</label>
    </p>
    <p>
        <label for="comment">简介:</label><br>
        <textarea name="comment" id="comment" maxlength="80" rows="10" cols="30" placeholder="不超过80字符"></textarea>
    </p>
    <p>
        <input type="submit"name="submit"value="提交">
        <input type="reset" name="reset" value="重置">
    </p>
</form>

运行实例 »

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




批改状态:合格

老师批语:完成的很好
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学