Blogger Information
Blog 18
fans 0
comment 0
visits 12070
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html文档结构与常用标签-702
XXXX.的博客
Original
549 people have browsed it
  1. 无序列表--------无序列表与有序列表最大的区别是无序列表的编号需要手动编写。


  • 实例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>列表</title>
    </head>
    <body>
    <h1>班级统计</h1>
    <ul>
        <li>1,电信,41</li>
        <li>2,电气,35</li>
        <li>3,物理,40</li>
    </ul>
    </body>
    <ol>
        <li>电信,41</li>
        <li>电气,35</li>
        <li>物理,40</li>
    </ol>
    </html>

    运行实例 »

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

    2.表格--------①td-单元格;tr-行;cellspacing-间隙折叠

  • ②水平方向上的合并 (colspan);垂直方向(rowspan)

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
<h1>班级统计</h1>
<ul>
    <li>1,电信,41</li>
    <li>2,电气,35</li>
    <li>3,物理,40</li>
</ul>
<table border="1" cellspacing="0" bgcolor="#ffe4c4"align="left">
    <caption>班级统计</caption>
    <thead>
    <td>编号</td>
    <td>班级</td>
    <td>人数</td>

<tbody>
<tr>
    <td width="50">1</td>
    <td width="50">电信</td>
    <td width="50">41</td>
</tr>
<tr>
    <td width="50">1</td>
    <td width="50">电气</td>
    <td width="50">35</td>
<tr>
    <td width="50">1</td>
    <td width="50">物理</td>
    <td width="50">40</td>
</tr>
</tbody>
    <tfoot>
    <tr>
        <td colspan="2" align="center">总计:</td>
        <td>116</td>
    </tr>
    </tfoot>
</table>
</body>
</html>

运行实例 »

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

  • 3.表单----①for与id绑定点击前面文本也能自动定位;②复选框-checkbox,单选框-radio,文本域-textarea,提交-submit,重置-reset

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<h3>用户注册</h3>
<form action="" method="get" name="register">
    <p>
        <label for="username">账号:</label>
     <input type="text" id="username" name="username" placeholder="不超过八个字符" autofocus ><!placeholder提示信息>
    </p>
    <p>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password"placeholder="6-12个字母或数字" >
    <p>
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email"placeholder="examplexxxxxxx@mail.com"required >
    </p>
    <p>
        <label for="age">年龄:</label>
        <input type="number" id="age" name="age"min="16" max="70" >
    </p>
    <p>
        <label for="birthday">年龄:</label>
        <input type="date" id="birthday" name="birthday" >
    </p>
    <p>
        <label for="course">课程:</label>
        <select name="course" id="course" size="1">
            <option value="1">选择</option>
            <option value="2">语文</option>
            <option value="3">数学</option>
            <option value="4">英语</option>
            <option value="5">物理</option>

        </select>
        <p>
    <label for="game">爱好:</label>
    <input type="checkbox" name="hobby[]" value="game" id="game">
    <label for="game">打游戏</label>
    <input type="checkbox" name="hobby[]" value="programe" id="programe">
    <label for="programe">敲代码</label>
    <input type="checkbox" name="hobby[]" value="movies" id="movies" checked>
    <label for="movies">看电影</label>
    <p>
    <label for="female">性别:</label>
    <input type="radio"name="gender" value="male" id="male" ><label for="male">男生</label>
    <input type="radio"name="gender" value="female" id="female" ><label for="female">女生</label>
    <input type="radio"name="gender" value="secrecy" id="secrecy" ><label for="secrecy">保密</label>
    <p>
    <label for="comment">简介:</label>
    <textarea name="comment" id="comment"cols="30" rows="10" maxlength="30" placeholder="不超过30字"></textarea>
    <p>
    <input type="submit" id="submit" value="提交">
    <input type="reset" id="reset" value="重置">

</p>
</form>

</body>
</html>

运行实例 »

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

4,html文档结构

<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
</head>
<body>

</body>
</html>

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post