HTML例子_html典型-CSDN博客

HTML编程例子

HTML_div和span

<html>
    <head>
        <title>HTML-DIV和SPAN</title>
        <meta content="text/html;charset=utf-8">
    </head>
    <body>
        <div>我是一个div</div>
        我是一个div
        <span>我是一个SPAN</span>
        我是SPAN
    </body>
</html>
 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12

这里写图片描述

HTML_div和span

<html>
    <head>
        <title>
            HTML图片标签
        </title>
        <meta content="text/html;charset=UTF-8">
    </head>
    <body>
        <!--
            IMG标签的src属性是图片的地址：
                1.本地图片
                2.网络图片
        -->
        <img src="img/1.jpg" width="800" height="500" alt="照片介绍" title="鼠标悬停介绍"/>
    </body>
</html>
 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

这里写图片描述

Table标签

<html>
    <head>
        <title>Table标签</title>
        <meta content="text/html;charset=UTF-8">
    </head>
    <body>
        <center>员工信息</center>
        <br><br><br>
        <!--
            hr是HTML页面中的横线
        -->
        <!--
            color的值有三种写法：
                1.颜色的英文名称
                2.十六进制
                3.RGB(255,255,255)
        -->
        <hr color="red">
        <!--
            表格：是table标签
            align标签是：是否居中或居左或居右
            center、left、right
            width、hieght:值也可以写成百分比
        --->
        <table border="1px" width="50%" height="30%" align="center">
            <!--
                行tr:table row
            -->
            <tr>
                <!--
                    td：是列也叫作单元格，table data
                -->
                <td>物理</td>
                <td>化学</td>
                <td>生物</td>
            </tr>
            <tr>
                <!--
                    td：是列也叫作单元格，table data
                -->
                <td>物理</td>
                <td>化学</td>
                <td>生物</td>
            </tr>
            <tr>
                <!--
                    td：是列也叫作单元格，table data
                -->
                <td>物理</td>
                <td>化学</td>
                <td>生物</td>
            </tr>
        </table>
    </body>
</html>
 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

这里写图片描述

HTML—table

<html>
    <head>
        <title>HTML——table-02</title>
        <meta content="text/html;charset=UTF-8">
    </head>
    <body>
        <table border="1px" width="30%" height="40%">
            <thead>
                <tr>
                    <th align="center">员工编号</th>
                    <th align="center">员工姓名</th>
                    <th align="center">员工薪水</th>
                </tr>
            </thead>
            <tbody>
                <tr align="center">
                    <td>7788</td>
                    <td>SMIth</td>
                    <td>800</td>
                </tr>
                <tr align="center">
                    <td>7788</td>
                    <td>SMIth</td>
                    <td>800</td>
                </tr>
                <tr align="center">
                    <td>7788</td>
                    <td>SMIth</td>
                    <td>800</td>
                </tr>
            </tbody>
            <tfoot>
                <tr align="center">
                    <td>表脚</td>
                    <td>表脚</td>
                    <td>表脚</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>
 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

这里写图片描述

HTML_背景图片

<html>
    <head>
        <title>HTML背景图片</title>
        <meta content="text/html;charset=UTF-8">
    </head>
    <!--
        background的值可以写本地图片
            1.相对路径
            2.绝对路径
        网络图片
        https://www.baidu.com/img/baidu_jgylogo3.gif
    -->
    <body background="http://pic29.photophoto.cn/20131204/0034034499213463_b.jpg" style="background-repeat:no-repeat;">

    </body>
</html>
 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

这里写图片描述

HTML_背景颜色

<html>
    <head>
        <title>HTML背景颜色</title>
        <meta content="text/html;charset=UTF-8">
    </head>
    <body bgcolor="yellow">

    </body>
</html>
 
 
 
 1
2
3
4
5
6
7
8
9

背景图片纯色

<html>
    <head>
        <title>HTML背景颜色</title>
        <meta content="text/html;charset=UTF-8">
    </head>
    <body bgcolor="yellow">

    </body>
</html>
 
 
 
 1
2
3
4
5
6
7
8
9

这里写图片描述

HTML_标题字和预留格式

<html>
    <head>
        <title>HTML标题字和预留格式</title>
        <meta content="text/html;charset=UTF-8">
    </head>
    <body>
        <center>以下为标题字</center>
        <h1>标题字</h1>
        <h2>标题字</h2>
        <h3>标题字</h3>
        <h4>标题字</h4>
        <h5>标题字</h5>
        <h6>标题字</h6>

        <br>
        <pre>
        <!--
            pre是预留格式标签：原样输出用户输入的文本内容
            大于号：&gt;
            小于号：&lt;
        -->
        for(int i = 0;i &gt; 10 ; i++){
            System.out.println(i);
        }
        </pre>
        <!--
            空格：&nbsp;
        -->
        张&nbsp;&nbsp;三
        <br>
        王大五
    </body>
</html>
 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

这里写图片描述

HTML_表单

<html>
    <head>
        <title>HTML表单</title>
        <meta content="text/html;charset=utf-8">
    </head>
    <body>
        <!--
            namen属性：设置表单的名称
            action属性：表单发送请求的路径
            mehtod属性：表单提交的方式：get(默认)、post(相对比get请求是安全的，因为它提交请求的参数在浏览器地址栏中看不到)
        -->
        <form name="userForm" action="http://localhost:8080/oa/login" method="post">
            用户名：
                <!--
                    input标签通过type属性分为以下：
                        1。文本输入框标签，type类型为：text
                        2.密码输入框，type为password
                        3.单选框，name属性的值必须保证一致，type类型为radio
                        4.多选框，name属性的值必须保证一致，type类型为checkbox
                        5.提交按钮，type类型为submit，submit按钮提交当前所在的表单，submit按钮
                            必须写在form表单之内
                        6.重置按钮，type类型为reset，重置按钮也必须放到form表单内
                        7.普通按钮，type类型为button

http协议多个参数之间是通过&进行连接的
http://localhost:8080/oa/login?
username=zhangsasn&password=11111&gender=f&interest=sport&interest=food&grade=bk&introduce=student
                -->
                <!--
                    input 标签name属性的值是http协议传送数据中的key的值

                -->
                <input name="username" type="text" />
                <br><br>
            密&nbsp;&nbsp;码：
                <input type="password" name="password" />
                <br><br>
            性&nbsp;&nbsp;别：
                <input type="radio" name="gender" value="f" />男
                <input type="radio" name="gender" value="m" checked/>女
                <BR><br>
            兴&nbsp;&nbsp;趣：
                <input type="checkbox" name="interest" value="sport"/>运动
                <input type="checkbox" name="interest" value="food" checked/>美食
                <input type="checkbox" name="interest" value="music"/>音乐
                <input type="checkbox" name="interest" value="sleep" checked/>睡觉
                <input type="checkbox" name="interest" value="travel"/>旅游
                <br><br>
            学&nbsp;&nbsp;历：
                <!--
                    select为下拉选择框：每一个选项的值是option来表示
                -->
                <select name="grade">
                    <option value="gz">高中</option>
                    <option value="dz" selected>大专</option>
                    <option value="bk">本科</option>
                    <option value="ss">研究生</option>
                </select>
                <br><br>
            简&nbsp;&nbsp;介：
                <textarea name="introduce" cols="30" rows="5"></textarea>
                <br><br>
                <input type="submit" value="提交"/>
                <input type="reset" value="重置"/>
        </form>
            <input type="submit" value="注册"/>
            <input type="button" value="注册1" />
    </body>
</html>
 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

这里写图片描述

HTML_表单02

这里写图片描述

<html>
    <head>
        <title>HTML表单-02</title>
        <meta content="text/html;charset=utf-8">
    </head>
    <body>
        <form id="userForm" name="userForm" action="http://127.0.0.1:8080/oa/login" method="get">
            用户名：
                <input type="text" name="username" value="zhangsan"/>
                <br><br>
            用户名2：
                <input type="text" name="username2" size="50" maxlength="10"/>
                <br><br>
            用户名3：
                <input type="text" name="username3" value="zhangsan" readonly/>
                <br><br>
            用户名4：
                <input type="text" name="username4" value="zhangsan" disabled/>
                <br><br>
                <!--
                    input标签type类型为hidden是隐藏标签
                -->
                <input type="hidden" name="id" value="10001"/>
                <br><br>
            文件上传：
                <input type="file" name="file"/>
                <br><br>

                <input type="submit" value="提交"/>
        </form>
    </body>
</html>
 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

HTML_表格颜色

这里写图片描述

<html>
    <head>
        <title>HTML表格颜色</title>
        <meta content="text/html;charset=UTF-8">
    </head>
    <body>
        <table border="1px" width="20%" height="30%" bgcolor="blue">
            <tr bgcolor="red">
                <!--
                    修饰字体的标签：font
                    font标签的属性：size修饰字体大小
                    color:是修饰字体的颜色
                -->
                <td><font size="30px" color="yellow">1</font></td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
            </tr>
            <tr>
                <td bgcolor="green">5</td>
                <td>6</td>
                <td>7</td>
                <td>8</td>
            </tr>
            <tr>
                <td>9</td>
                <td>10</td>
                <td>11</td>
                <td bgcolor="gray">12</td>
            </tr>
        </table>
    </body>
</html>
 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

超链接

这里写图片描述

<html>
    <head>
        <title>HTML超链接</title>
        <meta content="text/html;charset=UTF-8">
    </head>
    <body>
        <!--
            超链接的标签为a,属性是href
            href中的值可是网络URL
            也可以是本地的页面
        -->
        <a href="http://www.baidu.com">百度</a>
        <br>
        <a href="http://www.tmall.com">天猫</a>
        <br>
        <!--
            target属性的值：
                _self(在当前窗口打开新页面)、_blank(在新窗口打开页面)
        -->
        <a href="HTML_背景图片.html" target="_blank">HTML_背景图片</a>
        <br>
        <a href="http://www.taobao.com"><img src="img/taobao.png" alt="淘宝" title="点我到淘宝"/></a>
        <br>
        <a href="http://www.taobao.com"><img src="img/2.gif" alt="小人" title="点我点我"/></a>
    </body>
</html>
 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

HTML_格式标签

这里写图片描述

<html>
    <head>
        <title>HTML格式标签</title>
        <meta content="text/html;charset=utf-8">
    </head>
    <body>
        <b>粗体字</b>
        <br>
        <i>斜体字</i>
        <br>
        <ins>插入字</ins>
        <br>
        <del>删除字</del>
        <br>
        10<sup>2</sup>
        <br>
        H<sub>2</sub>O
    </body>
</html>
 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

HTML_行列合并

这里写图片描述

<html>
    <head>
        <title>HTML行合并和列合并</title>
        <meta content="text/html;charset=UTF-8">
    </head>
    <body>
        <table border="1px" width="30%" height="30%">
            <tr>
                <td>1</td>
                <td>2</td>
                <td rowspan="2">3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>

            </tr>
            <tr>
                <td colspan="2">7</td>

                <td>9</td>
            </tr>
        </table>
    </body>
</html>
 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

html框架

这里写图片描述

<html>
    <head>
        <title>HTML框架</title>
        <meta content="text/html;charset=UTF-8">
        <frameset cols="30%,*">
            <frameset rows="30%,*">
                <frame src="left_up.html" name="f1"></frame>
                <frame src="http://www.jd.com" name="f2"></frame>
            </frameset>
            <frame src="http://www.taobao.com" name="f3"></frame>
        </frameset>
    </head>
</html>
 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13

框架2

这里写图片描述

<html>
    <head>
        <title>HTML框架-02</title>
        <meta content="text/html;charset=utf-8">
    </head>
    <body>
        <iframe src="http://www.baidu.com" ></iframe>
    </bodY>
</html>
 
 
 
 1
2
3
4
5
6
7
8
9

列表

这里写图片描述

<html>
    <head>
        <title>HTML列表</title>
        <meta content="text/html;charset=UTF-8">
    </head>
    <body>
        <ul type="circle">
            <li>中国
                <ul>
                    <li>北京
                        <ul>
                            <li>海淀区</li>
                            <li>大兴区</li>
                        </ul>
                    </li>
                    <li>上海</li>
                    <li>广州</li>
                </ul>
            </li>
            <li>美国</li>
            <li>日本</li>
        </ul>

        <ol type="i">
            <li>中国
                <ol>
                    <li>河南省</li>
                    <li>河北省</li>
                </ol>
            </li>
            <li>美国</li>
        </ol>
    </body>
</html>
 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

HTML_锚点

这里写图片描述

<html>
    <head>
        <title>HTML锚点</title>
        <meta content="text/html;charset=utf-8">
    </head>
    <body>
        <a href="#four">第四回合</a>
        <p>
        锚点锚点锚点锚
        </p>
        <p>
        锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点
        </p>
        <p>
        锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点
        </p>
        <p>
        锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点
        锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点
        </P>
        <p>
        <a name="four">第四回合</a>
        锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点
        锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点
        点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点锚点
        </P>
    </body>
</html>
 
 
 
 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

9917