HTML---body

最新推荐文章于 2024-02-09 05:00:00 发布

风从北方来

最新推荐文章于 2024-02-09 05:00:00 发布

阅读量216

点赞数

分类专栏： HTML 文章标签： HTML body标签

本文链接：https://blog.csdn.net/beifangdefengchuilai/article/details/80341643

版权

HTML 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

body标签中可有：图标，p标签，h系列，div标签，span标签，div标签，input系列，form标签，textarea标签，select标签，a标签，img标签，列表标签，表格标签，lable标签，field标签。

input系列：

<form action="http://localhost:8888/index" method="GET">
 <input type="text" name="user"/>
 <input type="password" name="pwd">
 <input type="button" value="登录1">
 <input type="submit" value="登录2">
</form>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form enctype="multipart/form-data">
        <div>
            <textarea name="stu_information">学生基本信息调查</textarea>   <!--多行文本-->

            <br/>
            <input type="text" name="user"/>
            <p>&nbsp请选择性别：</p>
            男：<input type="radio" name="gender" value="1"/>
            女：<input type="radio" name="gender" value="2"/>
            <p>&nbsp请选择来自城市：</p>
                <select name="from_city" size="9" > <!--添加multiple="multiple"表示可多选-->
                    <option value="1">北京</option>
                    <option value="2">上海</option>
                    <option value="3">西安</option>
                    <option value="4" >榆林</option>  <!--添加selected="selected"表示默认选择项-->
                </select>
            <p>&nbsp喜欢课程：</p>
            English:<input type="checkbox" name="course" value="1"/>
            Chinese:<input type="checkbox" name="course" value="2"/>
            Manual:<input type="checkbox" name="course" values="3" checked="checked"/>
            Programming:<input type="checkbox" name="course" values="4"/>
            <p>&nbsp上传文件</p>
            <input type="file" name="fname">
        </div>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
    </form>



</body>

a标签：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="#i1">第一章</a>     <!--a标签 herf="网址"表示跳转到网址；但herf="#某个标签的ID"也可以，同样是跳转-->
    <a href="#i2">第二章</a>
    <a href="#i3">第三章</a>
    <a href="#i4">第四章</a>

    <div id="i1" style="height:600px;">第一章的内容</div>
    <div id="i2" style="height:600px;">第二章的内容</div>
    <div id="i3" style="height:600px;">第三章的内容</div>
    <div id="i4" style="height:600px;">第四章的内容</div>
    <a href="https://www.taobao.com">
        <img src="1.jpg" title="购物" style="height:200px;width:200px" alt="购物">  <!--alt在图片出错时，会显示-->
    </a>
</body>
</html>

列表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>      <!--ul,li模型是开头以点形式的列表-->
        <li>姓名</li>
        <li>班级</li>
        <li>性别</li>
        <li>年龄</li>
    </ul>
    <ol>   <!--ol,li模型是开头以1. 2. 3.等形式的列表-->
        <li>姓名</li>
        <li>班级</li>
        <li>性别</li>
        <li>年龄</li>
    </ol>
    <dl>   <!--dl:dt,dd模型形式是：dt为表头，dd为内容-->
        <dt>aaa</dt>
        <dd>aaa</dd>
        <dd>aaa</dd>
        <dd>aaa</dd>
        <dt>aaa</dt>
        <dd>aaa</dd>
        <dd>aaa</dd>
        <dd>aaa</dd>
    </dl>

</body>
</html>

表格：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--table标签表示表格标签，下包括tr标签表示行标签，tr标签下的td标签表示行中内容标签，如1行2列等-->
    <table border="1">
        <tr>
            <td>主机名</td>
            <td>端口</td>
            <td>操作</td>
        </tr>
        <tr>
            <td>0.0.0.0</td>
            <td>80</td>
            <td>
                <a herf="d2.html">查看详细</a>
                <a herf="#">修改</a>
            </td>
        </tr>
        <tr>
            <td>1.1.1.1</td>
            <td>90</td>
            <td>yeah</td>
        </tr>
    </table>


</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--一个table包括thead和tbody两部分，thead下行写法：tr标签中用th标签；tbody下依旧是tr标签下用td标签-->
    <table border="1">
        <thead>
            <tr>
                <th>表头1</th>
                <th>表头2</th>
                <th>表头3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td colspan="2">2</td>   <!--合并两列单元格-->
            </tr>

            <tr>
                <td rowspan="2">1</td>   <!--合并两行单元格-->
                <td>2</td>
                <td>3</td>
            </tr>

            <tr>
                <td>2</td>
                <td>3</td>
            </tr>

        </tbody>

    </table>

</body>
</html>

风从北方来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML---body

body标签中可有：图标，p标签，h系列，div标签，span标签，div标签，input系列，form标签，textarea标签，select标签，a标签，img标签，列表标签，表格标签，lable标签，field标签。input系列：&lt;form action="http://localhost:8888/index" method="GET"&gt; &lt;input type="t...
复制链接

扫一扫