博客列表 >7.2 html常用标签 div p h table form等

7.2 html常用标签 div p h table form等

大灰狼的博客
大灰狼的博客原创
2019年07月04日 15:10:33836浏览

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>

运行实例 »

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


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议