前情提要：说来话长，但我长话短说，后端作业涉及前端，学都学了，顺便做个前端作业吧/(ㄒoㄒ)/~~

目录

一、课堂内容
1.标题
2.空格
3.超链接
4.加粗
5.换行
6.大小标题
7.列表（无序 有序 自定义）
8.表单
9.下拉式列表
10.按钮

二、拓展内容
1.css鼠标事件
2.页面跳转
3.给图片加超链接

一、课堂内容

1.标题

<title>这里写标题，会显示在标题栏中哦</title>

2.空格

&nbsp

3.超链接

<a href="https://www.bilibili.com/">哔哩哔哩</a>

↑直接跳转页面

<a href="https://www.bilibili.com/"target="_blank">哔哩哔哩</a>

↑打开新页面

4.加粗

<b></b>

5.换行

<br>

6.大小标题

<h1 class="title">这里输入H1标题</h1>
<h2 class="title">这里输入H2标题</h2>

7.列表

<ul>
<li>张三</li>
<li>李四</li>
</ul>

↑无序列表，效果如下：

• 张三
  -李四

<ol>
<li>张五</li>
<li>李六</li>
</ol>

↑有序列表，效果如下：

1. 张五
2. 李六

<dl>
<dt>Coffee</dt>
<dd>-black hot drink</dd>
<dt>Milk</dt>
<dd>-white cold drink</dd>
</dl>

↑ 自定义列表
Coffee
-black hot drink
Milk
-white and drink

8.表单

<div>
<form name="user" action="" method="">
username:<input type="text" name="username" maxlength="10"><br/>
<!--text指任意文本 maxlength指最长长度-->
password:<input type="password" name="password"><br/>
<!--password输入会显示为黑点-->
remember me:<input type="checkbox" name="remember"><br/>
<!--单选框-->
</form>
</div>

9.下拉列表

 <div>

 下拉列表

 a
 b

 </div>

10.按钮

<div style="width:450px;height:250px;background:    ">
<button class="btn">
按钮一
</button>
</div>

二、其他拓展

1.css鼠标事件

<style>
    div{
        overflow:hidden;
        float:left;
        margin:10px;
    }
    div img{
        transition:all.4s;
    }
    div img:hover{
        transform:scale(1.2);
        cursor:pointer;
    }
</style>

2.页面跳转

<script>
        function pageJump(){
            window.location.href="Untitled-2.html"
        }
    </script>
    <div style="width:100px; height:50px;">
        <input type="button" value="下一页！！"onclick="pageJump()">
        </div>

3.给图片加超链接

<div>
<a href=(网址)" target="_blank"><img src="图片地址" width="350" height="200"></a>
</div>

王春雨