简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 7.2 html常用标签 div p h table form等
Blogger Information
Blog 36
fans 4
comment 3
visits 31578
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
7.2 html常用标签 div p h table form等
大灰狼的博客
Original
829 people have browsed it

1.jpg2.jpg3.jpg

实例

<!DOCTYPE html> <!--申明html版本 h5-->
<html lang="zh-CN"> <!--当lang设置为zh-CN 简体中文 设置为en 浏览器可能会提示 是否需要翻译按钮 比如谷歌-->
<head> <!--head区域主要是给浏览器和搜索引擎提供网页相关信息-->
    <meta charset="UTF-8">
    <!--设置网页字符集 常见utf-8 是***码 就是中日韩美等做网页都可以用这个都能正常显示，gb2312简体中文 BIG5繁体中文 还有很多 -->
    <title>7.2 HTML标签练习 ul ol table、form</title>
    <!--这个是标题浏览器标签会显示 通多代码还能在标题前面加个小图标 当然js还能让标题动态变化哦-->
</head>
<body> <!--body区域的信息是显示给用户看的区域。-->
    <div style="text-align: center"><h1>基础标签练习</h1></div>
    <div>
        <h2>我是有序列表 ol是块级元素</h2>
        <ol>
            <li>我是无序列表1</li>
            <li>我是无序列表2</li>
            <li>我是无序列表3</li>
            <li>我是无序列表4</li>
            <li>我是无序列表5</li>
            <li>我是无序列表6</li>
            <li>我是无序列表7</li>
            <li>我是无序列表8</li>
            <li>我是无序列表9</li>
            <li>我是无序列表10</li>
        </ol>
        <br>
        <h2>我是无序列表 ul也是块级元素 对了li也是块级元素</h2>
        <ul>
            <li><a href="#">我是无序列表1</a></li>
            <li><a href="#">我是无序列表2</a></li>
            <li><a href="#">我是无序列表3</a></li>
            <li><a href="#">我是无序列表4</a></li>
            <li><a href="#">我是无序列表5</a></li>
            <li><a href="#">我是无序列表6</a></li>
            <li><a href="#">我是无序列表7</a></li>
            <li><a href="#">我是无序列表8</a></li>
            <li><a href="#">我是无序列表9</a></li>
            <li><a href="#">我是无序列表10</a></li>
        </ul>
        <hr>
        <p>
            <h3>html块级元素</h3>
            块级元素在浏览器显示时，通常会以新行来开始（和结束）。<br>
            比如：h1到h6, p, ul,ol,li ,table 等等
            <h4>块级元素有以下几个特点：</h4>
            <ol>
                <li>总是另起一行（特立独行）</li>
                <li>可以设置其宽度、高度，内外边距</li>
                <li>在不手动设置宽度的情况下，宽度默认为所在容器的100%（即容器宽度）</li>
                <li>可以容纳行内元素和其他块元素。</li>
            </ol>
        </p>
        <p>
            <h3>html行内元素 也叫 行级元素</h3>
             行内元素在显示时通常不会以新行开始。<br>
             比如：b, td, a,span等等
        </p>
        <p>
        <h3>html行内块元素</h3>
        行内块元素多个标签会显示在一行但是又支持设置内边距、外边距等。<br>
        比如：input img等等
        </p>
        <hr>
        <div style="text-align: center">
            <table border="0" cellspacing="1" cellpadding="10" bgcolor="#808080">
                <!--border表格边框 cellspacing 单元格间距 cellpadding 单元格内边距 bgcolor 背景颜色-->
                <caption><h2>课程表</h2></caption><!--caption表格标题-->
                <thead><!--表格头部 页眉-->
                    <tr>
                        <td></td>
                        <td>星期1</td>
                        <td>星期2</td>
                        <td>星期3</td>
                        <td>星期4</td>
                        <td>星期5</td>
                        <td>星期6</td>
                        <td>星期7</td>
                    </tr>
                </thead>
                <tbody><!--表格主体 内容-->
                <tr>
                    <td rowspan="4">上午</td>
                    <td>语文</td>
                    <td>语文</td>
                    <td>语文</td>
                    <td>语文</td>
                    <td>语文</td>
                    <td colspan="2" rowspan="4">睡懒觉</td>
                    <!--colspan 规定单元格可横跨的列数 rowspan规定单元格可横跨的行数-->
                </tr>
                <tr>

                    <td>数学</td>
                    <td>数学</td>
                    <td>数学</td>
                    <td>数学</td>
                    <td>数学</td>
                </tr>
                <tr>

                    <td>物理</td>
                    <td>物理</td>
                    <td>物理</td>
                    <td>物理</td>
                    <td>物理</td>
                </tr>
                <tr>
                    <td colspan="5">老师们上课不要打扰睡觉的同学影响他们长身体</td>
                </tr>

                <tr>
                    <td rowspan="4">下午</td>
                    <td>化学</td>
                    <td>化学</td>
                    <td>化学</td>
                    <td>化学</td>
                    <td>化学</td>
                    <td colspan="2" rowspan="4">找不见人</td>
                    <!--colspan 规定单元格可横跨的列数 rowspan规定单元格可横跨的行数-->
                </tr>
                <tr>
                    <td>美术</td>
                    <td>美术</td>
                    <td>美术</td>
                    <td>美术</td>
                    <td>美术</td>
                </tr>
                <tr>

                    <td>音乐</td>
                    <td>音乐</td>
                    <td>音乐</td>
                    <td>音乐</td>
                    <td>音乐</td>
                </tr>
                <tr>
                    <td colspan="5">德智体美劳全面发展样样不精通</td>
                </tr>
                </tbody>
                <tfoot><!--表格底部 页脚-->
                    <tr>
                        <td >备注</td>
                        <td colspan="5">老师不可以私下调课 尤其是让体育老师替课</td>
                        <td colspan="2">家长监管</td>
                    </tr>
                </tfoot>
            </table>
            <style>
                td{background: #ffffff;}
            </style>
        </div>
        <br>
        <hr>
        <br>
        <div>
            <h2>表单</h2>
            <form action="/form.php" method="post">
                <!-- action 属性值是一个url地址 表示将数据提交***。method属性值有post和get post隐藏提交安全 get通过网址传送参数 有长度限制 包含密码的不可以用get提交不安全 -->
                <p>
                    <label for="userid">账号：</label><input type="text" name="userid" id="userid" placeholder="请输入账号" autofocus>
                    <!--autofocus 设置自动焦点位置 name属性值让程序知道数据应该插入到那个表的那个字段里 -->
                </p>
                <p>
                    <label for="password">密码：</label><input type="password" name="password" id="password" placeholder="请输入密码">
                    <!-- input 的id在当前网页不能重复 就像人的***号码一样 是这个元素的唯一识别码。placeholder是输入框的提示信息但是兼容性并不好 ie等浏览器还要靠js来设置-->
                </p>
                <p>
                    <label for="email">邮箱：</label><input type="email" name="email" id="email" placeholder="请输入邮箱" required>
                    <!--required属性是必填的意思 当然你可能会看到 required="required"这种方式其实与直接写required一个意思等价。只有页面声明为h5才可以简写一个单词 required 其他属性也是 -->
                </p>
                <p>
                    <label for="age">年龄：</label><input type="number" name="age" id="age" min="5" max="80">
                    <!--label标签有个for属性作用是 label元素被点击后 for值关联的input等标签会获得焦点被选中状态 -->
                </p>
                <p>
                    <label for="shengri">生日：</label><input type="date" name="shengri" id="shengri">
                </p>
                <p>
                    <label for="kc">课程：</label>
                    <select name="kc" id="kc">
                        <option value="0">请选择</option>
                        <option value="h5">html5</option>
                        <option value="js">JavaScript</option>
                        <option value="tp">thinkPHP</option>
                        <!--这里的option元素还可以通过 optgroup标签来进行分组哦-->
                     </select>
                </p>
                <p>
                    <label for="">爱好：</label>
                    <input type="checkbox" name="ah[]" value="game" id="game"><label for="game">玩游戏</label>
                    <input type="checkbox" name="ah[]" value="kdy" id="kdy"><label for="kdy">看电影</label>
                    <input type="checkbox" name="ah[]" value="gj" id="gj"><label for="gj">逛街</label>
                    <input type="checkbox" name="ah[]" value="pb" id="pb" checked><label for="pb">泡吧</label>
                    <!--input 类型为checkbox时是复选框 一组复选框的name值必须是一样的哦-->
                </p>
                <p>
                    <label for="">性别：</label>
                    <input type="radio" name="xb" value="nan" id="nan"><label for="nan">男</label>
                    <input type="radio" name="xb" value="nv" id="nv"><label for="nv">女</label>
                    <input type="radio" name="xb" value="bm" id="bm"><label for="bm">保密</label>
                    <!--input的类型为radio时为单选按钮name值需要一样才能起到单选效果哦 -->
                </p>
                <p>
                    <label for="jj">简介</label><textarea name="jj" id="jj" cols="30" rows="5"  maxlength="50" placeholder="精简介绍自己50个字以内。"></textarea>
                    <!--textarea是文本域 常见的备注框 留言框 使用较多。cols规定文本区内的可见宽度 rows规定文本区内的可见行数 maxlength规定最多输入多少字符  readonly属性可以设置为只读 比如查看时候用只能看不能改-->
                </p>
                <p>
                    <input type="submit" value="提交">  <input type="reset" value="重置">
                </p>
                <p></p>
            </form>
        </div>
        <br><br><br><br><br>
    </div>
</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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！