HTML页面练习1

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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>新冠病毒传染防范措施</title>
        <h1 align="center">新冠病毒传染防范措施</h1>
        <!-- <body> -->
            <!-- <ol start="3"></ol> 有序列表从3开始 -->
            <!-- <ul>无序列表</ul> -->
            <body style="background:rgb(219, 243, 208)">
            <ol>
            <h2 align="center">时间: 2022-02-25<br>作者: xxxx</h2>
            <hr/>
            <li><h3>做好个人健康监测</h3></li>
                <ul><p>如有出现<mark>发热、干咳、乏力、咽痛、嗅 （味）觉减退、鼻塞、流涕、结膜炎、肌痛和腹泻</mark>等症状，要佩戴一次性医用口罩及以上级别口罩，及时到就近的发热门诊进行排查和诊疗，就医过程尽量避免乘坐公共交通工具。</p>
                </ul>
            <hr style="border:3px double rgb(31, 224, 215);" width="100%" align="center">
            <li><h3>切实做好个人防护</h3></li>
            <p>
                <ul>广大市民群众要做好个人防护。<i>在人员密集场所、密闭公共场所、搭乘公共交通时</i>，要<b>佩戴好口罩</b>。坚持<b>勤洗手、常通风、少聚集，吃熟食、用公筷、常清洁</b>等良好的卫生习惯，积极配合防控措施。</ul>
积极接种新冠病毒疫苗
            <hr style="border:3px double rgb(40, 202, 126);" width="100%" align="center">
            </p>
            <li><h3>积极接种新冠病毒疫苗</h3></li>
            <p>
                <ul>在没有接种禁忌症的情况下，符合条件的人员尽早接种新冠病毒疫苗，及早完成全程、加强免疫接种，保护自己和家人，尽快建立全民免疫屏障。</ul>
            </p>
            <hr/>
        </ol>
        </body>
    </head>
</html>

文本强调

文本强调
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
    <head>
        <boby>
        <meta charset="utf-8"/>
        <title>文本强调</title>
            <p align="center"><b>在大学 有个明确的目标很重要</b></p>
            <p align="center"><em>期次: 第1期</em></p>
                <small><strong>大学 </strong><span style="text-decoration: underline"><i> 是一个能锻炼自己、培养自己、证明自己的地方。</span></i>但并非每个人都能得偿所愿，在大学里，我们会遇到来自五湖四海的老师和同学。大学里也充满了许多诱惑，一不小心就会堕落和迷失自己，在大学里，有个明确的目标很重要！在平时看<cite>《时代》</cite>杂志时会希望自己也可以有个美丽的未来</small>
                <!-- <span style="text-decoration: underline">下划线</span> -->
        </head>
        </body>
    </head>
</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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>有序列表无序列表练习</title>
        <body>
            <ol>
            <li>苹果</li>
            <li>香蕉</li>
            <li>草莓</li>
            </ol>
            <hr>
            <ol start="18">
            <li>菠萝</li>
            <li>葡萄</li>
            <li>柚子</li>
            </ol>
            <hr>
            <ul type="circle">
            <li>咖啡</li>
            <li>奶茶</li>
            <li>牛奶</li>
            <li>红茶</li>
            </ol>
        </body>
    </head>
</html>

旁注

旁注
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>旁注</title>
    </head>

    <body>
        <!-- 在汉字上方添加拼音旁注 -->
        <ruby>燚<rt>yì</rt></ruby><br/>
        <!-- 在汉字右侧添加拼音旁注 -->
        <ruby>燚<rt><rp>(</rp>yì<rp>)</rp></rt></ruby>
    </body>
</html>

点击查特殊符号添加看教程

点击查特殊符号添加看教程
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>特殊符号添加</title>
</head>

<body>
    <p>
        <strong>反比例函数单调性</strong><br/>
        当k&gt;,图像分别位于第一、三象限,每一个象限内,从左往右,y随x的增大而减小;<br/>
        当k&lt;;0时,图像分别位于第二、四象限,每一个象限内,从左往右,y随x的增大而增大;<br/>
        当k&gt;0时,函数在x&lt;0上为减函数,在x&gt;0上同为减函数;
        当k&lt;;0时,函数在x&lt;0上为增函数,在x&gt;0上同为增函数。
    </p>
</body>
</html>

HTML练习2

HTML练习2
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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>计算机应用技术</title>
    </head>
    <body>
        <h1>计算机应用技术</h1>
        <ul type="circle">
            <li>专业名称: 计算机应用技术</li>
            <li>专业代码: 610201</li>
            <li>招生对象: 高中毕业或3+证书(文理科)</li>
        </ul>
        <p>
            <b>专业培养目标</b><br/>
            本专业以服务<b><span style="color:#FF0004">广东</span></b>和<b><span style="color:#FF0004">珠三角地区</span></b>经济社会发展为宗旨，面向各类企事业单位，培养德、智、体、美全面发展，具有良好的综合素质，系统地掌握计算机专业领域必备的基本理论知识和基本技能，能够完成职业典型工作任务，具备团队合作能力、沟通能力和社会责任感，能够直接进入相应工作岗位，熟练运用一到两种程序设计语言，掌握网络技术和计算机系统维护技术；能从事<span style="background-color:#5AC8F7">程序设计、数据库应用、计算机系统维护、网页制作与网站设计、技术支持与IT产品销售</span>等工作，具有创新精神、实践精神和良好职业道德的的高等应用型技术人才。<br/>
        </p>
        <b>专业核心能力</b>
        <ol>
            <li>具备编程开发能力，掌握PHP+MySQL或Jsp网络编程技术。</li>
            <li>具有使用Photoshop、Flash进行网页美工UI设计开发能力。</li>
            <li>具有使用HTML、Javascript、AJAX、jQuery等技术进行特效网页设计能力。</li>
            <li>具备移动互联网HTML5、CSS3响应式移动互联网开发能力。</li>
            <li>具备精通使用PHP+MySQL或Jsp编程技术进行编码能力。</li>
            <li>具有基于B/S架构的系统开发能力。</li>
            <li>具有Windows和Linux操作系统下软件布署和优化能力。</li>
        </ol>
        <small>学校地址</small>
        <small><address>xxxxxxxxxx</address></small>
    </body>
</html>

HTML练习3

HTML练习3
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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <body>
            <h2>卜算子·咏梅</h1>
            <small><b>毛泽东</b></small>
            <p>
                &nbsp;&nbsp;风雨送春归,<br/>
                &nbsp;&nbsp;飞雪迎春到。<br/>
                &nbsp;已是悬崖百丈冰,<br/>
                &nbsp;&nbsp;犹有花枝俏。<br/>
            </p>
            <p>
                &nbsp;&nbsp;俏也不争春,<br/>
                &nbsp;&nbsp;只把春来报。<br/>
                &nbsp;待到山花烂漫时,<br/>
                &nbsp;&nbsp;她在花丛笑。
            </p>
            <hr>
            <p>
                <small>毛泽东(<time>1893年12月26日-1976年9月9日</time>),字润之(原作咏芝,后改润芝),笔名子任。湖南湘潭人。</small>
            </p>
        </body>
    </head>
</html>

HTML练习4

HTML练习4
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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <body>
            <ol type="A">
                <h3><li>春季</li></h3>
                <!-- <ul style="list-style-type:square"> -->
                <ul type="square">
                    <!-- 方格实心点 -->
                    <li>2月</li>
                    <ul style="list-style-type:circle">
                        <!-- 空心圆 -->
                        <!-- <ul style="list-style-type:disc"></ul>实心点  -->
                        <li>立春</li>
                        <li>雨水</li>
                    </ul>
                    <li>3月</li>
                    <!-- <ul style="list-style-type:circle"> -->
                    <ul type="circle">
                        <li>惊蛰</li>
                        <li>春分</li>
                    </ul>
                    <li>4月</li>
                    <ul style="list-style-type:circle">
                        <li>清明</li>
                        <li>谷雨</li>
                    </ul>
                </ul>
                <li><b>夏季</b></li>
                <ul style="list-style-type:square">
                    <li>2月</li>
                    <ul style="list-style-type:circle">
                        <li>立夏</li>
                        <li>小满</li>
                    </ul>
                    <li>3月</li>
                    <ul style="list-style-type:circle">
                        <li>芒种</li>
                        <li>夏至</li>
                    </ul>
                    <li>4月</li>
                    <ul style="list-style-type:circle">
                        <li>小暑</li>
                        <li>大暑</li>
            </ol>
        </body>
    </head>
</html>

课堂练习Html页面注册等

HTML练习1丨基本信息录入
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
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>基本信息录入</title>
    </head>
    <body>
        <form>
            姓名:<input type="text" name="username" placholder="请输入用户名" size="50" maxlength="2"><br>
            密码:<input type="text" name="username" placholder="请输入密码" size="50" maxlength="2"><br>

            <p>性别:
                <input id="man" type="radio" checked="checked" name="sex"/>男
                <input type="radio" checked="woman" name="sex"/>女
                <input type="button" value="提交按钮">
            </p>
            所属学院:<input type="text" name="username" placholder="请输所属学院" size="45" maxlength="2"><br>

            <p>爱好:
                <input type="checkbox" value="sleep" name="hobby">看书
                <input type="checkbox" value="sleep" name="hobby">听歌
                <input type="checkbox" value="sleep" name="hobby">运动
                <input type="checkbox" value="sleep" name="hobby">游戏
                <input type="checkbox" value="sleep" name="hobby">美食
            </p>
            <tr>
                <td colspan="2" align="right">
                    <input type="submit" name="submit" value="提交">
                </td>
                <td><input type="reset" name="reset" value="重置"></td>
            </tr>
        </form>
    </body>
</html>

HTML练习2丨注册页面

HTML练习2丨注册页面
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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>注册页面</title>
    </head>
    <body>
        <form name="form1" action="" method="post">
        <table align="center" background="images/1000.jpeg">
            <tr>
                <td colspan="3" align="center"><h1>用户注册</h1></td> 
            </tr>
            <tr>
                <td align="right">用户名: </td>
                <td><input type="text" name="user"></td>
                <td rowspan="4" valign="bottom"><img src="images/100.jpg" width="150px" height="150px"></td>
            </tr>
            <tr>
                <td align="right">密码: </td>
                <td><input type="password" name="password"></td>
            </tr>
            <tr>
                <td align="right">确认密码: </td>
                <td><input type="password" name="password"></td>
            </tr>
            <tr>
                <td align="right">性别: </td>
                <td>
                男<input type="radio" name="sex" checked>
                女<input type="radio" name="sex">
            </td>
            </tr>
            <tr>
                <td align="right">邮箱: </td>
                <td colspan="2"><input type="text" name="email"></td>
            </tr>
            <tr>
                <td align="right">头像上传: </td>
                <td colspan="2"><input type="file" name="image"></td>      
            </tr>
            <tr>
                <td align="right">兴趣课程: </td>
                <td colspan="2">
                    <input type="checkbox" name="interest">程序设计
                    <input type="checkbox" name="interest">网页设计
                    <input type="checkbox" name="interest">影视动画
                    <input type="checkbox" name="interest">平面设计
                </td>
            </tr>
            <tr>
                <td colspan="2" align="right">
                    <input type="submit" name="submit" value="提交">
                </td>
                <td><input type="reset" name="reset" value="重置"></td>
            </tr>
        </table>
        </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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>读者留言版板</title>
    </head>
    <body>
        <form name="form2" action="" method="post">
        <table align="center" background="images/1000.jpeg" width="600px">
            <tr>
                <td colspan="2" align="center"><h1>读者留言板</h1></td>
            </tr>
            <tr>
                <td align="right">读者性别:</td>
                <td>
                    男<input type="radio" name="sex" value="man" checked>
                    女<input type="radio" name="sex" value="women">
                </td>
            </tr>
            <tr>
                <td align="right">读者年龄:</td>
                <td>
                    <select name="age">
                        <option>20~30岁</option>
                        <option selected>30~40岁</option>
                        <option>40~50岁</option>
                        <option>50~60岁</option>
                        <option>60岁以上</optgroup>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">读者职业:</td>
                <td>
                    <select name="status" size="6">
                        <option>教师</option>
                        <option selected>学生</option>
                        <option>职员</option>
                        <option>工人</option>
                        <option>快递员</option>
                        <option>自由职业</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">读者留言:</td>
                <td><textarea name="words" cols="45" rows="8"></textarea></td>
            </tr>
            <tr>
                <td align="right"><input type="submit" name="submit" value="提交"></td>
                <td><input type="reset" name="reset" value="重置"></td>
            </tr>
        </table>    
        </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
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<!-- saved from url=(0049)file:///C:/Users/Administrator/Desktop/index.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            label {
                display: block;
                font: 1rem 'Fira Sans', sans-serif;
            }

            input
            label {
                margin: 0.4rem 0;
            }
        </style>
        <!-- <style>
            input[type="text"], input[type="password"], select {
                text-align:right;
            }
            </style>             -->
        </head><body>
            <h1>填写基本资料（必填）</h1>
            <form>
                <label>登录账号：</label>
                <input type="text" name="username" placeholder="请输入账号" required="">
                <span>登录账号应由5-18位数字、字母、下划线组成</span><br><br>

                <!-- <label for="username">登录账号：</label>
                <input type="text" name="username" id="username" placeholder="请输入账号" required>
                <span>登录账号应由5-18位数字、字母、下划线组成</span><br><br> -->

                <label>账户密码：</label>
                <input type="password" name="password" placeholder="请输入密码" required="">
                <span>密码长度建议在6-20位之内</span><br><br>
            
                <label>确认密码：</label>
                <input type="password" name="confirm_password" placeholder="请输入密码" required="">
                <span>密码长度建议在6-20位之内</span><br><br>
            
                <label>昵称：</label>
                <input type="text" name="name" placeholder="请输入名称" required="">
                <span>昵称可以使用中文、英文、数字等，长度应在20位之间</span><br><br>
            
                <label>性别：</label>
                <input type="radio" name="gender" value="male" required="">男
                <input type="radio" name="gender" value="female" required="">女
                <input type="radio" name="gender" value="unknown" required="">保密<br><br>

                
                    <label for="start">生日:</label>
                    <input type="date" id="start" name="trip-start" max="2018-12-32"><br><br>
                
            
                <!-- <label>生日：</label>
                <select name="year">
                    <option value="">年</option>
                    <option value="1990">1990</option>
                    <option value="1991">1991</option>
                    <option value="1992">1992</option>
                    <option value="1993">1993</option>
                    <option value="1994">1994</option>
                    <option value="1995">1995</option>
                    <option value="1996">1996</option>
                    <option value="1997">1997</option>
                    <option value="1998">1998</option>
                    <option value="1999">1999</option>
                </select>
                <select name="month">
                    <option value="">月</option>
                    <option value="01">01</option>
                    <option value="02">02</option>
                    <option value="03">03</option>
                    <option value="04">04</option>
                    <option value="05">05</option>
                    <option value="06">06</option>
                    <option value="07">07</option>
                    <option value="08">08</option>
                    <option value="09">09</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                </select>
                <select name="day">
                    <option value="">日</option>
                    <option value="01">01</option>
                    <option value="02">02</option>
                    <option value="03">03</option>
                    <option value="04">04</option>
                    <option value="05">05</option>
                    <option value="06">06</option>
                    <option value="07">07</option>
                    <option value="08">08</option>
                    <option value="09">09</option>
                    <option value="10">10</option>
                    <option value="11">11</option>
                    <option value="12">12</option>
                    <option value="13">13</option>
                    <option value="14">14</option>
                    <option value="15">15</option>
                    <option value="16">16</option>
                    <option value="17">17</option>
                    <option value="18">18</option>
                    <option value="19">19</option>
                    <option value="20">20</option>
                    <option value="21">21</option>
                    <option value="22">22</option>
                    <option value="23">23</option>
                    <option value="24">24</option>
                    <option value="25">25</option>
                    <option value="26">26</option>
                    <option value="27">27</option>
                    <option value="28">28</option>
                    <option value="29">29</option>
                    <option value="30">30</option>
                    <option value="31">31</option>
                </select><br><br> -->
            
                <label>爱好：</label>
                <input type="checkbox" name="hobby[]" value="military">军事
                <input type="checkbox" name="hobby[]" value="science_fiction">科幻
                <input type="checkbox" name="hobby[]" value="fantasy">玄幻
                <input type="checkbox" name="hobby[]" value="romance">言情
                <input type="checkbox" name="hobby[]" value="magic">魔幻
                <input type="checkbox" name="hobby[]" value="urban">都市<br><br>
            
                <label>您的邮箱：</label>
                <input type="email" name="email" placeholder="请输入您的e-mali地址" required=""><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
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
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>大学生网购调查表</title>
    </head>
    <body>
        <form>
            <tr>
                <td colspan="2" align="center"><h1>大学生网购调查表</h1></td>
            </tr>
            <tr>
                <td>
                    <td align="right">1、性别：</td><br>
                    <!-- 男<input type="radio" name="sex" value="man" checked><br> -->
                    男<input type="radio" name="sex" value="man"><br>
                    女<input type="radio" name="sex" value="women"><br>
                </td>
            </tr>
            <!-- <p>1.性别:<br>
                <input id="man" type="radio" checked="checked" name="sex"/>男<br>
                <input type="radio" checked="woman" name="sex"/>女
            </p> -->
            <tr>
                <td>
                    <td align="right">2、所在年级</td><br>
                    <select name="year">
                        <option selected>大一</option>
                        <option>大二</option>
                        <option>大三</option>
                        <!-- <option>大四</option> -->
                    </select>
                </td>
            </tr><br>
            <tr>
                <td align="right">3、网购时，使用的付款方式</td>
                <td colspan="2"><br>
                    <input type="checkbox" name="interest">银行卡支付<br>
                    <input type="checkbox" name="interest">货到付款<br>
                    <input type="checkbox" name="interest">微信支付<br>
                    <input type="checkbox" name="interest">支付宝支付<br>
                    <input type="checkbox" name="interest">其他支付<br>
                </td>
            </tr>
            <tr>
                <td align="right">4、网购时，对于货物，你最喜欢的快递</td>
                <td colspan="2"><br>
                    <input type="checkbox" name="interest">圆通<br>
                    <input type="checkbox" name="interest">申通<br>
                    <input type="checkbox" name="interest">中通<br>
                    <input type="checkbox" name="interest">邮政<br>
                    <input type="checkbox" name="interest">优速<br>
                </td>
            </tr>
            <tr>
                <td align="right">5、你对网购有什么改善建议？</td>
                <br><td><textarea name="words" cols="45" rows="8" placeholder="输入你的建议:"></textarea></td><br>
            </tr>
            <tr>
                <td align="right"><input type="submit" name="submit" value="提交"></td>
                <td><input type="reset" name="teset" value="重置"></td>
            </tr>
        </form>
    </body>
</html>




<!-- label {
    display: block;
    font: 1rem 'Fira Sans', sans-serif;
}

input
label {
    margin: 0.4rem 0;
} -->

American Metric 电子产品调查问卷

American Metric 电子产品调查问卷
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
70
71
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>调查问卷</title>
    </head>
    <body>
    <form>
        <!-- <form name="form2" action="" method="post">
        <table align="center" background="images/1000.jpeg" width="600px"> -->
            <tr>
                <td colspan="2" align="center"><h1>American Metric 电子产品调查问卷</h1></td>
            </tr>
                <tr>
                    <td align="right">用户名: </td>
                    <td><input type="text" name="user"></td><br><br>
                    <!-- <td rowspan="4" valign="bottom"><img src="images/100.jpg" width="150px" height="150px"></td> -->
                </tr>
            </tr>
            <tr>
                <label for="start">购买日期:</label>
                <input type="date" id="start" name="trip-start" value="2018-01-01" max="2018-12-32"><br><br>
            </tr>
            <tr>
                <td align="right">电子邮件地址: </td>
                <td><input type="text" name="user"></td><br><br>
            </tr>
            <tr>
                <!-- <td align="right">手机号码: </td> -->
                <label for="telNO">手机号码:</label>
                <input id="telNO" name="telNO" type="tel" placeholder="输入必须是11位数字"><br><br>
            </tr>
            <tr>
                <td align="right">你是否查看过我们的在线产品目录? </td><br>
                <td>
                是<input type="radio" name="sex" checked>
                否<input type="radio" name="sex"><br><br>
            </td>
            <tr>
                <td align="right">如果查看过,您对那些产品有兴趣购买?(选择提供的产品)</td>
                <td colspan="2"><br>
                    <input type="checkbox" name="interest">大屏幕电视
                    <input type="checkbox" name="interest">音频设备
                    <input type="checkbox" name="interest">影视频设备
                    <input type="checkbox" name="interest">相机<br><br>
                </td>
            </tr>
            <tr>
                <br><td align="right">在填写订单之前,您还有什么问题,意见或建议?</td>
                <br><td><textarea name="words" cols="45" rows="8" placeholder="您的输入:"></textarea></td><br>
            </tr>
            <tr>
                <td align="right"><input type="submit" name="submit" value="提交"></td>
                <td><input type="reset" name="teset" value="重置"></td>
            </tr>
        </form>  
    </body>
</html>




<!-- label {
    display: block;
    font: 1rem 'Fira Sans', sans-serif;
}

input
label {
    margin: 0.4rem 0;
} -->

信息工程学院简介【无字版】

信息工程学院简介【无字版】
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>信息工程学院简介</title>
        <style type="text/css">
            h1{
                width: 600px;
                font-size: 38px;
                font-family: "微软雅黑";
                color: #fff;
                text-align: center;
                line-height: 2em;
                word-spacing: 10px;
                background-color: #154599;
                border-bottom: #E5CAB9 dashed 8px;
            }
        </style>
        <h1>信息工程学院简介</h1>
    </head>
</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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!-- <link href="news.css" rel="stylesheet" type="text/css"> -->
        <style type="text/css">
            body{
                font-size: 100%;
                background-color: #ebe7eb;
                display: flex;
                justify-content: center;
                height: 100vh;
            }

            div{
                width: 600px;
                font-family: Microsoft Yahei;
            }

            h1{
                width: 600px;
                font-family: Microsoft Yahei;
                font-size: 38px;
                color: #922016;
                text-align: center;
                line-height: 2em;
                word-spacing: 10px;
                border-bottom: #996 dashed 4px;
            }
            p{
                font-size: 1.2em;
                line-height: 1.8em;
                text-indent: 2em;
                color: #333;
            }
        </style>
    </head>
    <body>
        <div>
            <!-- <h1>创新学院简介</h1> -->
            <h1>信息工程学院简介</h1>
            <p>
                院系专业：广东创新科技职业学院信息工程学院 [1]  已开设计算机通信、软件、网络、电子信息工程技术、动漫制作技术6个专业14个专业方向，2016年招收电信服务与营销专业。计算机应用技术专业获得广东省高等职业教育重点（培育）专业立项、广东省民办教育专项资金高职院校专业建设项目立项，计算机应用技术专业实训基地获广东省高等职业教育实训基地项目立项。
            </p>
            <p>
                师资力量：广东创新科技职业学院信息工程学院经过五年的发展，在各方面都取得了长足的进步，在校学生数量连续递增。管理机构设置合理，有一支较高水平的专兼职教师队伍，其中专职教职工51名，专任教师48名；教授4名，副教授3名，高级工程师6名，副高以上职称占专职教师27%；双师型教师25名，占专职教师52%。
            </p>
            <p>
                教学资源：广东创新科技职业学院信息工程学院教学实训设备齐全，现有实训教学楼两栋，建有云计算技术实训室，计算机应用实训室、计算机网络技术实训室、信息安全实训室、综合布线实训室、电路基础实训室、电子技术实训室、电子生产工艺实训室、通信技术实训室、通信原理实训室、单片机实训室、微机组装与维护实训室、动漫设计与制作实训室，苹果计算机实训室、软件技术实训室、微电影设计制作室、录音室等共计20多间实训室，实训设备资产过千万元。
            </p>
            <p>
                办学宗旨：广东创新科技职业学院信息工程学院坚持以职业能力为核心，深化创新创业教育改革、创新教学模式，把学历教育、职业技能和职业资格认证三者紧密结合，走工学结合的人才培养模式。注重学生职业技能能力的培养，积极推行工程化、项目化教学，提高学生实践能力。
            </p>
            <p>
                科研成果：广东创新科技职业学院信息工程学院重视教学改革及科研工作，成果丰硕。教师现申报教学、科研项目，计算机应用技术专业获得多项省级项目，出编“十二五”职业教育国家规划教材——《网络操作系统应用（linux）（第3版）（高等教育出版社，2014年出版。编写出版6部高等职业教育计算机专业教材，校级立项优质课程6项，校内教改项目10余项，校内科研项目3项，省级科研项目达10余项，省级校外实践教育基地两项，教学成果（培育）项目1项。
            </p>
        </div>
    </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
@charset "utf-8";

body{
    font-size: 100%;
    background-color: #ebe7eb;
    display: flex;
    justify-content: center;
    height: 100vh;
}

div{
    width: 600px;
    font-family: Microsoft Yahei;
}

h1{
    width: 600px;
    font-family: Microsoft Yahei;
    font-size: 38px;
    color: #922016;
    text-align: center;
    line-height: 2em;
    word-spacing: 10px;
    border-bottom: #996 dashed 4px;
}
p{
    font-size: 1.2em;
    line-height: 1.8em;
    text-indent: 2em;
    color: #333;
}

第五周课表

第五周课表
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>第五周课表</title>
</head>~
<table botder="1" align="center">
  <caption>第五周课表</caption>
  <tr bgcolot="#CCCCCC">
    <th colspan="2">节次</th>
    <th>星期一</th>
    <th>星期二</th>
    <th>星期三</th>
    <th>星期四</th>
    <th>星期五</th>
  </tr>
  <tr>
    <td rowspan="2">上午</td>
    <td>第1~2节</td>
    <td bgcolor="#006600">HTML+CSS网页设计与制作</td>
    <td bgcolor="#FF0000">毛泽东思想和中国特色社会主义理论体系概论</td>
    <td bgcolor="#0066FF">计算机网络技术基础</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
  	<td>第3~4节</td>
  	<td>&nbsp;</td>
    <td bgcolor="#00FFCC">经典导读与实用写作</td>
    <td bgcolor="#FF6600">公共英语Ⅱ</td>
    <td>&nbsp;</td>
    <td bgcolor="#FF6600">公共英语Ⅱ</td>
  </tr>
  <tr>
    <td>第5~6节</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td bgcolor="#006600">MTML+CSS网页设计与制作</td>
    <td bgcolor="#FF0000">毛泽东思想和中国特色社会主义理论体系概论</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>第7~8节</td>
    <td bgcolor="#333333">面向对象程序设计</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td bgcolor="#FF9900">大学心理健康教育</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>第9~10节</td>
    <td>&nbsp;</td>
    <td bgcolor="#006600">HTML+CSS网页设计与制作</td>
    <td>&nbsp;</td>
    <td bgcolor="#FF00FF">美育课程</td>
    <td>&nbsp;</td>
    </tr>
  <table>
<body>
</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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图书借阅详细页面</title>
</head>

<body>
<table border="1">
	<caption>借阅详细</caption>
    <tr>
      <th>编号</th>
      <th>书名</th>
      <th>借阅时间</th>
      <th>应还时间</th>
    </tr>
    <tr>
       <td>T0155</td>
       <td>网页设计与制作</td>
       <td>2018/10/05</td>
       <td>2108/11/05</td>
    </tr>
    <tr>
       <td>T0976</td>
       <td>计算机基础</td>
       <td>2018/10/05</td>
       <td>2018/11/05</td>
    </tr>
    <tr>
       <td>T0933</td>
       <td>C语言程序设计</td>
       <td>2018/10/12</td>
       <td>2018/11/12</td>
    <tr>
</body>
</html>

HMTL练习5丨4/23

HMTL练习5丨4/23
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
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!-- <link href="css/dformat.css" rel="stylesheet" type="text/css"> -->
        <style>
            /* 下面是针对 html 和 body 标签的样式设置： 去除边距和内边距 */
            body {
                margin: 0;
                padding: 0;
                height: 100%;
                min-height: 100vh;
                background-color: #ccccff;
            }
            
            /* 下面是针对 h1 标题的样式设置：字体颜色为白色，背景颜色为蓝色，居中对齐，添加内边距为 15px */
            h1 {
                color: white;
                background-color: blue;
                text-align: center;
                padding: 15px;
            }
            
            /* 下面是针对 img 标签的样式设置：向左浮动，右边距离为 5px，添加虚线边框，边框颜色为 #999cc */
            img {
                float: left;
                margin-right: 5px;
                width: 128px;
                height: 128px;
                /* border: 1px dashed #9999cc; */
                display: block;
            }
            
            /* 下面是针对 p 段落的样式设置：
            字体大小为 12px，首行缩进为 2个字符大小，
            行高为 1.5，添加内边距为 5px，
            第一个段落添加右边线样式 3px 双实线，颜色为红色，
            背景颜色为 #ccccff，第二个段落添加右边线样式 3px 双实线，颜色为橙色 */
            p {
                font-size: 24px;  /*12px感觉好小啊！*/
                text-indent: 2em;
                line-height: 1.5em;
                padding: 5px;
                border-right: 3px double red; /* 第一个段落的右边线样式 */
                background-color: #ccccff;
                margin-top: 0;
                margin-bottom: 0;
            }
            p:nth-of-type(2) {
                border-right: 3px double orange; /* 第二个段落的右边线样式 */
            }
        </style>
    </head>
    <body>
        <h1>互联网发展的起源</h1>
        <img src="images/001.png" alt="卡布奇诺">
        <div style="font-size: 0;">
        <p>
            1969年，为了保障通信联络，美国国防部高级研究计划署ARPA资助建立了世界上第一个分组交换试验网ARPANET，连接美国四个大学。ARPANET的建成和不断发展标志着计算机网络发展的新纪元。
        </p><br>
        <p>
            20世纪70年代末到80年代初，计算机网络蓬勃发展，各种各样的计算机网络应运而生，如MILNET、USENET、BITNET、CSNET等，在网络的规模和数量上都得到了很大的发展。一系列网络的建设，产生了不同网络之间互联的需求，并最终导致了TCP/IP协议的诞生。
        </p>
    </div>
    </body>
</html>

HTML练习6丨4/23

HTML练习6丨4/23
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!-- <link href="css/dformat1.css" rel="stylesheet" type="text/css"> -->
        <style>
            /* 设置整个页面的背景色、字体大小和字体颜色 */
            body{
            background-color: #515A81;
            font-size: 100%;
            color: #FFFFFF;
            }

            /* 设置页面标题的样式 */
            h1{
            font-family: 黑体; /* 设置标题字体 */
            font-weight: bolder; /* 设置标题为粗体 */
            color: #FFFFFF; /* 设置标题字体颜色 */
            letter-spacing: 1em; /* 设置字母间距为 1em */
            background-color: #7d3e1e; /* 设置标题背景颜色 */
            padding: 10px; /* 添加标题内边距为 10px */
            text-align: center; /* 设置标题居中显示 */
            }

            /* 添加标题与正文之间的横线样式 */
            hr{
            color: #FFFFFF;
            }

            /* 设置小标题的样式 */
            h3{
            font-weight: bold; /* 设置小标题为粗体 */
            color: #c5967b; /* 设置小标题字体颜色 */
            }

            /* 设置正文中小标题的样式 */
            h4{
            text-align: right; /* 设置小标题居右显示 */
            color: #d8d7da; /* 设置小标题字体颜色 */
            font-family: 华文新魏; /* 设置小标题字体 */
            font-style: oblique; /* 设置小标题为斜体 */
            }

            /* 设置正文的样式 */
            p{
            line-height: 1.5em; /* 设置行高为 1.5em */
            }

            /* 设置中文内容的样式 */
            .zm{
            font-family: 宋体; /* 设置中文字体 */
            }

            /* 设置副标题的样式 */
            h2{
            text-align: center; /* 设置副标题居中显示 */
            color: #c5967b; /* 设置副标题字体颜色 */
            font-weight: bold; /* 设置副标题为粗体 */
            font-family: 黑体; /* 设置副标题字体 */
            text-decoration: underline; /* 添加副标题的下划线 */
            font-size: 28px;  /* 设置副标题的字体大小 */
            }

            /* 设置正文中右对齐的内容样式 */
            #right{
            text-align: right; /* 右对齐 */
            }

            /* 设置正文中首字母大写的内容样式 */
            #cap{
            text-transform: capitalize; /* 首字母大写 */
            text-decoration: underline; /* 添加下划线 */
            }
        </style>
    </head>
    <body>
        <h1>中国建筑有限公司西南分公司</h1>
        <h4>分类:行业动态</h4>
        <h3>绿色建筑有望高速发展将成万亿级“绿饭碗”</h3>
        <p>
            绿色建筑有望高速发展将成万亿级“绿饭碗”
摘要：绿色建筑正成为中国加快转变经济发展方式的新突破口。5月6日，财政部与住房和城乡建设部联合发布《关于加快推动我国绿色建筑发展的实施意见》(以下简称“实施意见”)，提出国家将通过财政激励机制等多种手段，对星级绿色建筑进行补贴，力争到2015年，新增绿色建筑.......  
        </p>
        <h4>分类:行业动态</h4>
        <h3>天津：101层地标性建筑开工</h3>
        <p>
            摘要：从天津开发区管委会获悉，昨日上午，本市重点服务业项目——“天津周大福中心”在泰达MSD正式开工。作为具有国际水平的地标性建筑，该中心建成后将成为天津国际化地标群的重要组成部分。
       据介绍，“天津周大福中心”位于天津开发区第一大街与新城西路交会处...  查看全文
        </p>
        <h4>分类:行业动态</h4>
        <h3>关于城市建筑文化个性创造的几点思考</h3>
        <p>
            摘要： 对城市建筑缺乏文化个性的遣责实际上很早就已经出现了。西方上世纪60年代出现的“后现代主义”思潮实际上即是起源于对现代建筑带来的千篇一律和缺乏人情的批判。改革开放以来，我国城市建设的快速发展使得城市建筑...  查看全文
        </p>
    </body>
</html>

HTML练习7丨4/23

HTML练习7丨4/23
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <!-- <link href="css/dformat1.css" rel="stylesheet" type="text/css"> -->
        <style>
            /* 设置整个页面的背景色、字体大小和字体颜色 */
            body{
            background-color: #515A81;
            font-size: 100%;
            color: #FFFFFF;
            }

            /* 设置页面标题的样式 */
            h1{
            font-family: 黑体; /* 设置标题字体 */
            font-weight: bolder; /* 设置标题为粗体 */
            color: #FFFFFF; /* 设置标题字体颜色 */
            letter-spacing: 1em; /* 设置字母间距为 1em */
            background-color: #7d3e1e; /* 设置标题背景颜色 */
            padding: 10px; /* 添加标题内边距为 10px */
            text-align: center; /* 设置标题居中显示 */
            }

            /* 添加标题与正文之间的横线样式 */
            hr{
            color: #FFFFFF;
            }

            /* 设置小标题的样式 */
            h3{
            font-weight: bold; /* 设置小标题为粗体 */
            color: #c5967b; /* 设置小标题字体颜色 */
            }

            /* 设置正文中小标题的样式 */
            h4{
            text-align: right; /* 设置小标题居右显示 */
            color: #d8d7da; /* 设置小标题字体颜色 */
            font-family: 华文新魏; /* 设置小标题字体 */
            font-style: oblique; /* 设置小标题为斜体 */
            }

            /* 设置正文的样式 */
            p{
            line-height: 1.5em; /* 设置行高为 1.5em */
            }

            /* 设置中文内容的样式 */
            .zm{
            font-family: 宋体; /* 设置中文字体 */
            }

            /* 设置副标题的样式 */
            h2{
            text-align: center; /* 设置副标题居中显示 */
            color: #c5967b; /* 设置副标题字体颜色 */
            font-weight: bold; /* 设置副标题为粗体 */
            font-family: 黑体; /* 设置副标题字体 */
            text-decoration: underline; /* 添加副标题的下划线 */
            font-size: 28px;  /* 设置副标题的字体大小 */
            }

            /* 设置正文中右对齐的内容样式 */
            #right{
            text-align: right; /* 右对齐 */
            }

            /* 设置正文中首字母大写的内容样式 */
            #cap{
            text-transform: capitalize; /* 首字母大写 */
            text-decoration: underline; /* 添加下划线 */
            }
        </style>
    </head>
    <body>
        <h1>行业动态</h1>
        <h4>当前位置：>>新闻中心</h4>
        <p>
            绿色建筑正成为中国加快转变经济发展方式的新突破口。财政部与住房和城乡建设部联合发布《关于加快推动我国绿色建筑发展的实施意见》(以下简称“实施意见”)，提出国家将通过财政激励机制等多种手段，对星级绿色建筑进行补贴，力（装配式住宅）争到2016年，新增绿色建筑面积10亿平方米以上，到2020年，绿色建筑占新建建筑比重超过30%。这预示着中国绿色建筑将进入高速发展时期。<br><br>

未来4年，像这样节能低碳、自然环保的绿色建筑，在北京将越来越多。按照规划，北京将在“十二五”期间新建绿色建筑3500万平方米。无独有偶，上海也于日前明确进一步推广绿色建筑，到2016年实现建筑总能耗增幅小于33%的节能目标。安徽则将于年内启动20余项绿色建筑示范项目，“十二五”时期，这个数字还将突破100项。<br><br>

这一剂“强心针”不仅将助力绿色建筑迅猛发展，还将拉动产业链形成规模效应。财政部副部长张少春分析，中国发展绿色建筑将有效带动新型建材、新能源等产业发展，有望撬动超过万亿元的绿色市场规模。住建部副部长仇保兴也曾预测，2020年前，我国用于节能建筑项目的投资将至少达1.5万亿元。专家认为，绿色建筑的鼓励政策将为节能服务业带来利好。中国人民大学环境学院教授宋国君告诉记者，“相关的技术、人才、市场都会发展起来，未来，‘绿饭碗’无疑会受到追捧”。<br><br>

周兴和实业有限公司的产品是属于SGC七防绿色环保复合建材，是一种造福人类的建筑材料，是迎合低碳时代要求的绿色建材。新型节能建材产品目前在市场中正在逐渐增多，比如，绿色环保建材、节能节水卫浴产品、环保石材、环保外墙砖等。节能环保产品在建材行业广阔的市场中前景令人看好。产品的销量也在不断上升，正逐渐受到消费者的青睐。绿色环保建筑是时代之需，发展绿色环保建筑能最大限度地节能、节地、节水、节材，减少污染，保护环境，改善居住舒适性、健康性和安全性，不仅是转变建筑业发展方式和城乡建设模式的重大问题，也直接关系群众的切身利益和国家的长远利益。
        </p>
</html>

HTML练习8丨1-1丨4/27

HTML练习8丨1-1丨4/27
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
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>安装可视门铃摄像头侵犯隐私？</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        text-align: center;
      }
      h1{
			font-family: Arial, sans-serif; /* 修改主标题字体 */
			text-align: center;
			display: block;
			width: 100%;
		}
      p {
        font-size: 18px;
        line-height: 1.6;
        margin: 20px auto;
        text-align: justify;
        max-width: 100%; /* 确保图片宽度适应页面 */
        height: auto; /* 确保图片高度适应比例 */
      }
    </style>
  </head>
  <body>
    <p><img src="images/001.jpg" alt="001"></p>
    <p style="text-align:center;">
        <h1>安装可视门铃摄像头侵犯隐私？</h1>
    </p>
    <p>
      为了生活安全，越来越多的人安装可视门铃摄像头进行监控。然而，这类具有不间断监控、摄录功能的设备监控范围过大，可能会收集邻居的隐私信息。最近，安徽省合肥市中级人民法院审结了一起个人信息保护纠纷案，认定一名业主安装可视门铃摄像头导致侵犯公民隐私权，判决予以拆除。
    </p>
    <p>
        <img src="images/002.jpg" alt="001" style="float: left; margin-right: 10px;">
      案件的争议焦点在于，业主安装的可视门铃摄像头监控范围可以覆盖邻居进出入户门前的走道区域。法院认为，走道区域虽然与一般公共区域不同，但因为是本层人员日常进出使用，所以被监控到的对象更为特定。委托安装该摄像头的人虽然初衷是为了保护个人安全，但因该摄像头具有录像存储功能，姜某某和廖某某的进出信息、访客情况等容易被拍摄到，因此属于个人隐私，应该受法律保护。虽然储某某和邓某称安装摄像头是为了保护财产安全，但他们在思考财产安全与他人隐私利益间的平衡时应该考虑到隐私权的重要性，而且也有其他方式可以达到财产安全防范的目的。因此，法院支持了姜某某和廖某某的主张，判决拆除该可视门铃摄像头，并驳回了上诉。
    </p>
    <p>
      在这个信息化时代，个人信息的保护变得越来越重要。本案涉及到安装可视门铃摄像头所保护的财产权益和隐私、个人信息保护的冲突。在对两者所保护的权益序位进行衡量时，我们更应该优先保护隐私和个人信息，体现法律“以人为本”的精神。
    </p>
    <p>
      因此，在安装、使用人工智能摄像头等智能家居产品时，应当避免超出合理的范围，应当尽到妥善的注意义务，并选择合理的安装方式和安装位置，以减少其不利影响，保护邻居的隐私权。</p>
  </body>
</html>

HTML练习9丨1-2丨4/27

HTML练习9丨1-2丨4/27
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
<!DOCTYPE html>
<html>
<head>
	<title>图文混排页面</title>
	<style>
		h1{
			color: #FF4500; /* 修改主标题颜色 */
			font-family: Arial, sans-serif; /* 修改主标题字体 */
			text-align: center;
			display: block;
			width: 100%;
		}
		h2{
			color: #FFA500; /* 修改副标题颜色 */
			font-family: Arial, sans-serif; /* 修改副标题字体 */
		}
		img {
			max-width: 100%; /* 确保图片宽度适应页面 */
			height: auto; /* 确保图片高度适应比例 */
		}
		body {
			background: linear-gradient(to right, #00ffff, #0066ff);
		}


	</style>
</head>
<body>
	<img src="images/001.jpg" alt="001">
	<h1>安装可视门铃摄像头侵犯隐私？</h1>
	<p> 为了生活安全，越来越多的人安装可视门铃摄像头进行监控。然而，这类具有不间断监控、摄录功能的设备监控范围过大，可能会收集邻居的隐私信息。最近，安徽省合肥市中级人民法院审结了一起个人信息保护纠纷案，认定一名业主安装可视门铃摄像头导致侵犯公民隐私权，判决予以拆除。</p>
	<img src="images/002.jpg" alt="001" style="float: left; margin-right: 10px;">
	<p>案件的争议焦点在于，业主安装的可视门铃摄像头监控范围可以覆盖邻居进出入户门前的走道区域。法院认为，走道区域虽然与一般公共区域不同，但因为是本层人员日常进出使用，所以被监控到的对象更为特定。委托安装该摄像头的人虽然初衷是为了保护个人安全，但因该摄像头具有录像存储功能，姜某某和廖某某的进出信息、访客情况等容易被拍摄到，因此属于个人隐私，应该受法律保护。虽然储某某和邓某称安装摄像头是为了保护财产安全，但他们在思考财产安全与他人隐私利益间的平衡时应该考虑到隐私权的重要性，而且也有其他方式可以达到财产安全防范的目的。因此，法院支持了姜某某和廖某某的主张，判决拆除该可视门铃摄像头，并驳回了上诉。</p>
  <h2>■法官说法■</h2>
  <p>
    在这个信息化时代，个人信息的保护变得越来越重要。本案涉及到安装可视门铃摄像头所保护的财产权益和隐私、个人信息保护的冲突。在对两者所保护的权益序位进行衡量时，我们更应该优先保护隐私和个人信息，体现法律“以人为本”的精神。
  </p>
  <p>
    因此，在安装、使用人工智能摄像头等智能家居产品时，应当避免超出合理的范围，应当尽到妥善的注意义务，并选择合理的安装方式和安装位置，以减少其不利影响，保护邻居的隐私权。</p>
</body>
</html>

HTML练习10丨2-1丨4/27

点击查看教程
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
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>敦煌壁画</title>
<style>
	body{
		font-size: 100%;
	}
	.container{
		width: 800px;
		margin: 0px auto;
		background-color: #F5E4E4;
		padding: 20px;
		font-size: 1.2em;
		border: 6px #000 double;
	}
	.container h2{
		text-align: center;
		color: #f30;
		font-family: "微软雅黑";
	}
	.container p{
		text-indent: 2em;
		line-height: 1.6em;
	}
	.container img{
		border: 2px #F79597 doshed;
		border-radius: 20px;
		float: left;
		margin-right: 10px;
		padding: 8px;
	}
	p.pic{
		text-align: center;
		text-indent: 0;
	}
	.pic img{
		float: none;
		border:none;
	}
</style>
</head>
<body>
	<div class="container">
    <h2>敦煌壁画：世界文明长河中的一颗璀璨明珠</h2>
    <p><img src="images/003.jpg" width="400">揭开佛教的神秘帷幔，敦煌壁画丰富多彩的佛国世界正是当时现实世界的折射。我们从壁画所看到的生产生活、民俗节庆、婚丧嫁娶、喜怒哀乐等人生百态，建筑、服饰、用具、工具等具有不同时代烙印的物质造型，构成敦煌中古时期活灵活现的社会文化发展演变的图谱。敦煌壁画所包涵和直接反映的文化、教育、经济、建筑、科技、医疗卫生、东西交流等丰富内涵，也不再是抽象的概念。这些不仅是东西文明交融的文化宝藏，而且还具有古代文明的博物馆功能。</p>
	<p>敦煌壁画中有神灵形象(佛、菩萨等)和俗人形象(供作人和故事画中的人物之分.这两类形象都来源于现实生活)但又各具不同性质。从造型上说.俗人形象富于生活气息，时代特点也表现得更鲜明;而神灵形象则变化较少，想象和夸张成分较多。从衣冠服饰上说，俗人多为中原汉装，神灵则多保持异国衣冠;晕染法也不一样，画俗人多采用中原晕染法，神灵则多为西域凹凸法。所有这些又都随着时代的不同而不断变化。</p>
    <p class="pic"><img src="images/004.jpg"><br>与造型密切相关的问题之一是变形。敦煌壁画继承了传统绘画的变形手法，巧妙地塑造了各种各样的人物、动物和植物形象。时代不同，审美观点不同，变形的程度和方法也不一样。早期变形程度较大，较多浪漫主义成分，形象的特征鲜明突出;隋唐以后，变形较少，立体感较强，写实性日益浓厚。</p>
    <p>变形的方法大体有两种:一种是夸张变形一以人物原形进行合乎规律的变化，即拉长成加灾。如北魏晚期或西魏时期的菩萨，大大增加了服、手指和颈项的长度，濒骨显露，用日之间的距离牧觅，嘴角上翘，形如花瓣;经过变形彻成为风流潇洒的"秀骨治像"。金刚力士则多在横向夸张，加粗肢体，缩短脖项，头圆肚大，棱眉鼓眼，强调体魄的健硕和超人的力量。这两种人物形象都是夸张的结果。</p>
</div>
</body>
</html>

HTML练习9丨2-2丨4/27

点击查看教程
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
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>安装可视门铃摄像头侵犯隐私？</title>
<style>
	body{
		font-size: 100%;
	}
	.container{
		width: 800px;
		margin: 0px auto;
		background-color: #F5E4E4;
		padding: 20px;
		font-size: 1.2em;
		border: 6px #000 double;
	}
	.container h2{
		text-align: center;
		color: #f30;
		font-family: "微软雅黑";
	}
	.container p{
		text-indent: 2em;
		line-height: 1.6em;
	}
	.container img{
		border: 2px #F79597 doshed;
		border-radius: 20px;
		float: left;
		margin-right: 10px;
		padding: 8px;
	}
	p.pic{
		text-align: center;
		text-indent: 0;
	}
	.pic img{
		float: none;
		border:none;
	}
</style>
</head>
<body>
	<div class="container">
    <h2>安装可视门铃摄像头侵犯隐私？</h2>
    <p><img src="images/001.jpg" width="400">为了生活安全，越来越多的人安装可视门铃摄像头进行监控。然而，这类具有不间断监控、摄录功能的设备监控范围过大，可能会收集邻居的隐私信息。最近，安徽省合肥市中级人民法院审结了一起个人信息保护纠纷案，认定一名业主安装可视门铃摄像头导致侵犯公民隐私权，判决予以拆除。</p>
	<p>案件的争议焦点在于，业主安装的可视门铃摄像头监控范围可以覆盖邻居进出入户门前的走道区域。法院认为，走道区域虽然与一般公共区域不同，但因为是本层人员日常进出使用，所以被监控到的对象更为特定。委托安装该摄像头的人虽然初衷是为了保护个人安全，但因该摄像头具有录像存储功能，姜某某和廖某某的进出信息、访客情况等容易被拍摄到，因此属于个人隐私，应该受index1-2丨图文混排页面.html法律保护。虽然储某某和邓某称安装摄像头是为了保护财产安全，但他们在思考财产安全与他人隐私利益间的平衡时应该考虑到隐私权的重要性，而且也有其他方式可以达到财产安全防范的目的。因此，法院支持了姜某某和廖某某的主张，判决拆除该可视门铃摄像头，并驳回了上诉。</p>
	<h2>■法官说法■</h2>
    <p class="pic"><img src="images/002.jpg"><br>在这个信息化时代，个人信息的保护变得越来越重要。本案涉及到安装可视门铃摄像头所保护的财产权益和隐私、个人信息保护的冲突。在对两者所保护的权益序位进行衡量时，我们更应该优先保护隐私和个人信息，体现法律“以人为本”的精神。</p>
    <p>因此，在安装、使用人工智能摄像头等智能家居产品时，应当避免超出合理的范围，应当尽到妥善的注意义务，并选择合理的安装方式和安装位置，以减少其不利影响，保护邻居的隐私权。</p>
</div>
</body>
</html>