HTML入门&CSS_hm

HTML语法规范

<!DOCTYPE html>
<!--
    1. 上面是一个文档声明 
    2. 根标签 html
    3. html文件主要包含两部分. 头部分和体部分
        头部分 : 主要是用来放置一些页面信息
        体部分 : 主要来放置我们的HTML页面内容
    4. 通过标签来对内容进行描述,标签通常都是由开始标签和结束标签组成  
    5. 标签不区分大小写, 官方建议使用小写
    
-->
<html>
    <head>
        <!--meta 网站的配置信息-->
        <!--指定浏览器打开页面的编码方式-->
        <meta charset="utf-8" />
        <!--指定网站标题-->
        <title>入门案例01</title>
        Hello world !指定浏览器打开页面的编码方式
    </head>
    <body>
        Hello world !指定浏览器打开页面的编码方式
    </body>
</html>

 

 

标签

1、标题标签:<h1></h1>,范围:1~6,否则显示为普通文本

 

2、分割线标签:<hr/>

 

3、font标签:修改文字显示

            font 标签常用属性
                color: 颜色
                size : 改变字体大小  范围:1~7
                face : 字体
            <标签  属性的名称="属性的值">

 

4、粗体标签<b></b>      <strong></strong>带语义:

5、斜体:<i></i>             <em></em>带语义:

6、图片标签:

1         <!--
2             常用属性:
3                 src : 指定图片路径
4                 width : 指定图片宽度
5                 height : 图片高度
6                 alt : 文件加载失败时的提示信息
7         -->
8         <img src="../img/mv.jpg" width="500px" alt="这张图片可能加载问题" />

 

7、无序列表标签

 1        <!--无序列表
 2             ul
 3                 li 列表项
 4             type属性 . 小圆圈, 小方块, 默认小黑点
 5         -->
 6         <ul type="square">
 7             <li>百度</li>
 8             <li>新浪微博</li>
 9             <li>黑马程序员</li>
10         </ul>

 

 

8、有序列表

 1         <!--
 2             有序列表
 3             常用属性:
 4                 type : 指定序号的类型
 5                 start : 从几开始,必须得写数字
 6         -->
 7         <ol type="a" start="2">
 8             <li>百度</li>
 9             <li>新浪微博</li>
10             <li>黑马程序员</li>
11         </ol>

 

 

9、超链接标签:<a href="url路径" target="窗口打开方式">文字</a>

_self:默认打开方式,在当前窗口打开

_blank:新一个标签页打开页面

示例:友情链接

1  <ul>
2     <li style="display: inline;"><a href="http://www.baihe.com" target="_blank">百合网</a></li>
3     <li style="display: inline;"><a href="http://www.jiayuan.com">世纪家园</a></li>
4     <li style="display: inline;">珍爱网</li>
5     <li style="display: inline;">非诚勿扰</li>
6  </ul>

 

10、表格标签

 

        <!--
            table
                常用属性:
                    border : 指定边框
                    width  :     宽度
                    height :     高度
                    bgcolor:    背景色
                    align    :  对齐方式
                    
                tr 标签:行
                td 标签:单元
            
        -->

 

合并单元格

1         <!--
2             表格的合并
3                 colspan :  跨列 
4                 rowspan :  跨行
5         -->

 

 

示例:网站首页

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6         <!--
  7             1. 创建一个8行一列的表格
  8             2. 第一部份: LOGO部分: 嵌套一个一行三列的表格
  9             3. 第二部分: 导航栏部分 : 放置5个超链接
 10             4. 第三部分: 轮播图 
 11             5. 第四部分: 嵌套一个三行7列表格
 12             6. 第五部分: 直接放一张图片
 13             7. 第六部分: 抄第四部分的
 14             8. 第七部分: 放置一张图片
 15             9. 第八部分: 放一堆超链接
 16         -->
 17     </head>
 18     <body>
 19         <!--1. 创建一个8行一列的表格-->
 20         <table width="100%">
 21             <!--2. 第一部份: LOGO部分: 嵌套一个一行三列的表格-->
 22             <tr>
 23                 <td>
 24                     <table ="" cellspacing="" cellpadding="" width="100%">
 25                         <tr>
 26                             <td><img src="img/logo2.png"/></td>
 27                             <td><img src="img/header.png"/></td>
 28                             <td>
 29                                 <a href="#">登录</a>
 30                                 <a href="#">注册</a>
 31                                 <a href="#">购物车</a>
 32                             </td>
 33                         </tr>
 34                     </table>
 35                 </td>
 36             </tr>
 37             
 38             <!--3. 第二部分: 导航栏部分 : 放置5个超链接-->
 39             <tr bgcolor="black">
 40                 <td height="50px">
 41                     <a href="#"><font color="white">首页</font></a>
 42                     <a href="#"><font color="white">手机数码</font></a>
 43                     <a href="#"><font color="white">电脑办公</font></a>
 44                     <a href="#"><font color="white">工程仪器</font></a>
 45                     <a href="#"><font color="white">只能家具</font></a>
 46                     <a href="#"><font color="white">工程仪器</font></a>
 47                 </td>
 48             </tr>
 49             
 50             <!--4. 第三部分: 轮播图 ?-->
 51             <tr>
 52                 <td><img src="img/1.jpg" width="100%"/></td>
 53             </tr>
 54             
 55             <!--5. 第四部分: 嵌套一个三行7列表格-->
 56             <tr>
 57                 <td>
 58                     <table ="" cellspacing="" cellpadding="" width="100%" height="500px">
 59                         <tr>
 60                             <td colspan="7"><h3>最新商品<img src="img/title2.jpg"></h3></td>
 61                         </tr>
 62                         <tr align="center">
 63                             <!--左边大图的-->
 64                             <td rowspan="2" width="206px" height="480px">
 65                                 <img src="products/hao/big01.jpg"/>
 66                             </td>
 67                             <td colspan="3" height="240px" width="125px">
 68                                 <img src="products/hao/middle01.jpg" width="100%" height="100%"/>
 69                             </td>
 70                             <!--<td>
 71                                 <img src="" width="100%"/>
 72                                 <p>洗衣机</p>
 73                                 <p><font color="red">$998</font></p>
 74                             </td>-->
 75                             <td>
 76                                 <img src="products/hao/small06.jpg" />
 77                                 <p>洗衣机</p>
 78                                 <p><font color="red">$998</font></p>
 79                             </td>
 80                             <td>
 81                                 <img src="products/hao/small06.jpg" />
 82                                 <p>洗衣机</p>
 83                                 <p><font color="red">$998</font></p>
 84                             </td>
 85                             <td>
 86                                 <img src="products/hao/small06.jpg" />
 87                                 <p>洗衣机</p>
 88                                 <p><font color="red">$998</font></p>
 89                             </td>
 90                         </tr>
 91                         <tr align="center">
 92                             <td>
 93                                 <img src="products/hao/small06.jpg" />
 94                                 <p>洗衣机</p>
 95                                 <p><font color="red">$998</font></p>
 96                             </td>
 97                             <td>
 98                                 <img src="products/hao/small06.jpg" />
 99                                 <p>洗衣机</p>
100                                 <p><font color="red">$998</font></p>
101                             </td>
102                             <td>
103                                 <img src="products/hao/small06.jpg" />
104                                 <p>洗衣机</p>
105                                 <p><font color="red">$998</font></p>
106                             </td>
107                             <td>
108                                 <img src="products/hao/small06.jpg" />
109                                 <p>洗衣机</p>
110                                 <p><font color="red">$998</font></p>
111                             </td>
112                             <td>
113                                 <img src="products/hao/small06.jpg" />
114                                 <p>洗衣机</p>
115                                 <p><font color="red">$998</font></p>
116                             </td>
117                             <td>
118                                 <img src="products/hao/small06.jpg" />
119                                 <p>洗衣机</p>
120                                 <p><font color="red">$998</font></p>
121                             </td>
122                         </tr>
123                     </table>
124                 </td>
125             </tr>
126             
127             <!--6. 第五部分: 直接放一张图片-->
128             <tr>
129                 <td><img src="products/hao/ad.jpg" width="100%"/></td>
130             </tr>
131             
132             <!--7. 第六部分: 抄第四部分的-->
133             <tr>
134                 <td>
135                     <table ="" cellspacing="" cellpadding="" width="100%" height="500px">
136                         <tr>
137                             <td colspan="7"><h3>最热商品<img src="img/title2.jpg"></h3></td>
138                         </tr>
139                         <tr align="center">
140                             <!--左边大图的-->
141                             <td rowspan="2" width="206px" height="480px">
142                                 <img src="products/hao/big01.jpg"/>
143                             </td>
144                             <td colspan="3" height="240px" width="125px">
145                                 <img src="products/hao/middle01.jpg" width="100%" height="100%"/>
146                             </td>
147                             <!--<td>
148                                 <img src="" width="100%"/>
149                                 <p>洗衣机</p>
150                                 <p><font color="red">$998</font></p>
151                             </td>-->
152                             <td>
153                                 <img src="products/hao/small06.jpg" />
154                                 <p>洗衣机</p>
155                                 <p><font color="red">$998</font></p>
156                             </td>
157                             <td>
158                                 <img src="products/hao/small06.jpg" />
159                                 <p>洗衣机</p>
160                                 <p><font color="red">$998</font></p>
161                             </td>
162                             <td>
163                                 <img src="products/hao/small06.jpg" />
164                                 <p>洗衣机</p>
165                                 <p><font color="red">$998</font></p>
166                             </td>
167                         </tr>
168                         <tr align="center">
169                             <td>
170                                 <img src="products/hao/small06.jpg" />
171                                 <p>洗衣机</p>
172                                 <p><font color="red">$998</font></p>
173                             </td>
174                             <td>
175                                 <img src="products/hao/small06.jpg" />
176                                 <p>洗衣机</p>
177                                 <p><font color="red">$998</font></p>
178                             </td>
179                             <td>
180                                 <img src="products/hao/small06.jpg" />
181                                 <p>洗衣机</p>
182                                 <p><font color="red">$998</font></p>
183                             </td>
184                             <td>
185                                 <img src="products/hao/small06.jpg" />
186                                 <p>洗衣机</p>
187                                 <p><font color="red">$998</font></p>
188                             </td>
189                             <td>
190                                 <img src="products/hao/small06.jpg" />
191                                 <p>洗衣机</p>
192                                 <p><font color="red">$998</font></p>
193                             </td>
194                             <td>
195                                 <img src="products/hao/small06.jpg" />
196                                 <p>洗衣机</p>
197                                 <p><font color="red">$998</font></p>
198                             </td>
199                         </tr>
200                     </table>
201                 </td>
202             </tr>
203             
204             <!--8. 第七部分: 放置一张图片-->
205             <tr>
206                 <td><img src="img/footer.jpg" width="100%"/></td>
207             </tr>
208             
209             <!--9. 第八部分: 放一堆超链接-->
210             <tr align="center">
211                 <td>
212                     <a href="#">关于我们</a>
213                     <a href="#">联系我们</a>
214                     <a href="#">招贤纳士</a>
215                     <a href="#">法律声明</a>
216                     <a href="#">友情链接</a>
217                     <a href="#">支付方式</a>
218                     <a href="#">配送方式</a>
219                     <a href="#">服务声明</a>
220                     <a href="#">广告声明</a>
221                     <br />
222                     Copyright © 2005-2016 传智商城 版权所有
223                 
224                 </td>
225             </tr>
226         </table>
227     </body>
228 </html>
View Code

 

 

 

表单标签

 1         <!--
 2             表单标签
 3                 action : 直接提交的地址
 4                 
 5                 method : 
 6                         get 方式  默认提交方式 ,会将参数拼接在链接后面 , 有大小限制 ,4k
 7                         post 方式  会将参数封装在请求体中, 没有这样的限制
 8                         
 9             
10             input :
11                 type: 指定输入项的类型
12                     text : 文本
13                     password :  密码框
14                     radio :        单选按钮
15                     checkbox :  复选框
16                     file      : 上传文件
17                     submit   : 提交按钮
18                     button      : 普通按钮
19                     reset     : 重置按钮
20                     hidden  : 隐藏域
21                     
22                     date    : 日期类型
23                     tel     : 手机号
24                     number   : 只允许输入数字
25                     
26                 placeholder : 指定默认的提示信息
27                 name : 在表单提交的时候,当作参数的名称
28                 id : 给输入项取一个名字, 以便于后期我们去找到它,并且操作它
29             
30             textarea : 文本域, 可以输入一段文本
31                         cols : 指定宽度
32                         rows : 指定的是高度
33             
34             select  : 下拉列表
35                 option : 选择项
36         -->

 输入框提示文字

            <!--文本输入框-->
            用户名: <input type="text" name="username" id="username" placeholder="请输入用户名" /><br />

 

 

 

单选标签

1             性别: <input type="radio" name="sex" />2                  <input type="radio" name="sex"  />3                  <input type="radio" name="sex" />

 

 

多选标签

1             爱好:
2                 <input type="checkbox" />抽烟
3                 <input type="checkbox" />喝酒
4                 <input type="checkbox" />烫头
5                 <input type="checkbox" />撸代码
6                 <input type="checkbox" />大宝剑
7     

 

 

下拉列表标签

1             籍贯    :
2                 <select>
3                     <option>--请选择--</option>
4                     <option>湖北</option>
5                     <option>内蒙古</option>
6                     <option>火星</option>
7                 </select>

 

frameset标签

 使用frameset标签,不要使用body标签

    <frameset rows="15%,*">
        <frame src="aaa.html" />
        <frameset cols="15%,*">
            <frame src="bbb.html"/>
            <frame src="ccc.html" name="rightFrame"/>
        </frameset>
    </frameset>

 

将制定的页面在rightFrame的位置打开
<a href="data.html" target="rightFrame">收件箱</a>

 

示例:注册页面

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6         <!--
  7             1. 创建一个8行一列的表格
  8             2. 第一部份: LOGO部分: 嵌套一个一行三列的表格
  9             3. 第二部分: 导航栏部分 : 放置5个超链接
 10             4. 第三部分: 轮播图 
 11             5. 第四部分: 嵌套一个三行7列表格
 12             6. 第五部分: 直接放一张图片
 13             7. 第六部分: 抄第四部分的
 14             8. 第七部分: 放置一张图片
 15             9. 第八部分: 放一堆超链接
 16         -->
 17     </head>
 18     <body>
 19         <!--1. 创建一个8行一列的表格-->
 20         <table width="100%">
 21             <!--2. 第一部份: LOGO部分: 嵌套一个一行三列的表格-->
 22             <tr>
 23                 <td>
 24                     <table ="" cellspacing="" cellpadding="" width="100%">
 25                         <tr>
 26                             <td><img src="img/logo2.png"/></td>
 27                             <td><img src="img/header.png"/></td>
 28                             <td>
 29                                 <a href="#">登录</a>
 30                                 <a href="#">注册</a>
 31                                 <a href="#">购物车</a>
 32                             </td>
 33                         </tr>
 34                     </table>
 35                 </td>
 36             </tr>
 37             
 38             <!--3. 第二部分: 导航栏部分 : 放置5个超链接-->
 39             <tr bgcolor="black">
 40                 <td height="50px">
 41                     <a href="#"><font color="white">首页</font></a>
 42                     <a href="#"><font color="white">手机数码</font></a>
 43                     <a href="#"><font color="white">电脑办公</font></a>
 44                     <a href="#"><font color="white">工程仪器</font></a>
 45                     <a href="#"><font color="white">只能家具</font></a>
 46                     <a href="#"><font color="white">工程仪器</font></a>
 47                 </td>
 48             </tr>
 49             
 50             
 51             
 52             <tr>
 53                 <td background="image/regist_bg.jpg" height="500px">
 54                     <table border="" cellspacing="" cellpadding="" width="60%" height="80%" border="5px" bgcolor="white" align="center">
 55                         <tr>
 56                             <td>
 57                                 <form action="注册页面.html" method="post">
 58                                     <table width="60%" align="center">
 59                                         <tr>
 60                                             <td colspan="2"><font color="blue" size="5">会员注册</font> USER REGISTER</td>
 61                                         </tr>
 62                                         <tr>
 63                                             <td>用户名:</td>
 64                                             <td>
 65                                                 <input type="text" placeholder="请输入用户名"/>
 66                                             </td>
 67                                         </tr>
 68                                         <tr>
 69                                             <td>密 码:</td>
 70                                             <td>
 71                                                 <input type="password" placeholder="请输入密码" />
 72                                             </td>
 73                                         </tr>
 74                                         <tr>
 75                                             <td>性 别:</td>
 76                                             <td>
 77                                                 <input type="radio" name="gender" /> 78                                                 <input type="radio" name="gender" /> 79                                             </td>
 80                                         </tr>
 81                                         <tr>
 82                                             <td>地址:</td>
 83                                             <td>
 84                                                 <select name="address">
 85                                                     <option>-请选择-</option>
 86                                                     <option value="beijing">北京</option>
 87                                                     <option value="shanghai">上海</option>
 88                                                 </select>
 89                                             </td>
 90                                             <tr>
 91                                                 <td></td>
 92                                                 <td colspan="">
 93                                                     <input type="submit" value="注册" />
 94                                                 </td>
 95                                             </tr>
 96                                         </tr>
 97                                     </table>
 98                                 </form>
 99                             </td>
100                         </tr>
101                     </table>
102                 </td>
103             </tr>
104             
105             <!--8. 第七部分: 放置一张图片-->
106             <tr>
107                 <td><img src="img/footer.jpg" width="100%"/></td>
108             </tr>
109             
110             <!--9. 第八部分: 放一堆超链接-->
111             <tr align="center">
112                 <td>
113                     <a href="#">关于我们</a>
114                     <a href="#">联系我们</a>
115                     <a href="#">招贤纳士</a>
116                     <a href="#">法律声明</a>
117                     <a href="#">友情链接</a>
118                     <a href="#">支付方式</a>
119                     <a href="#">配送方式</a>
120                     <a href="#">服务声明</a>
121                     <a href="#">广告声明</a>
122                     <br />
123                     Copyright © 2005-2016 传智商城 版权所有
124                 
125                 </td>
126             </tr>
127         </table>
128     </body>
129 </html>
View Code

 

 

示例:网站后台页面

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <frameset rows="15%,*">
        <frame src="a.html"/>
        <frameset cols="15%,*">
            <frame src="b.html" />
            <frame src="c.html" name="tag"/>
        </frameset>
    </frameset>
</html>

 

a.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h3>a.html页面</h3>
    </body>
</html>

 

b.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <a href="https://www.baidu.com" target="tag">百度</a><br />
        <a href="https://www.hao123.com" target="tag">hao123</a><br />
        <a href="https://www.xiaohua.com" target="tag">X</a><br />
    </body>
</html>

 

c.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h3>c.html页面</h3>
    </body>
</html>

 

示例:网站首页使用CSS

  1 <!DOCTYPE html>
  2 <html>
  3 
  4     <head>
  5         <meta charset="UTF-8">
  6         <title></title>
  7         <!--
  8             1. 创一个最外层div
  9             2. 第一部份: LOGO部分: 嵌套三个div
 10             3. 第二部分: 导航栏部分 : 放置5个超链接
 11             4. 第三部分: 轮播图 
 12             5. 第四部分: 
 13             6. 第五部分: 直接放一张图片
 14             7. 第六部分: 抄第四部分的
 15             8. 第七部分: 放置一张图片
 16             9. 第八部分: 放一堆超链接
 17         -->
 18         <style type="text/css">
 19             .logo{
 20                 float: left;
 21                 width: 33%;
 22                 height: 60px;
 23                 line-height: 60px;
 24                 border: 1px solid red;
 25                 /*border-width: 1px;
 26                 border-style: solid;
 27                 border-color: red;*/
 28             }
 29             .amune{
 30                 color: white;
 31                 text-decoration: none;
 32                 height: 50px;
 33                 line-height: 50px;
 34             }
 35             .product{
 36                 float: left;
 37                 text-align: center;
 38                 width: 25%;
 39                 height: 240px;
 40             }
 41         </style>
 42     </head>
 43 
 44     <body>
 45         <!--1. 创一个最外层div-->
 46         <div id="">
 47             
 48             <!--2. 第一部份: LOGO部分: 嵌套三个div-->
 49             <div>
 50                 <div class="logo">
 51                     <img src="img/logo2.png"/>
 52                 </div>
 53                 <div class="logo">
 54                     <img src="image/header.jpg"/>
 55                 </div class="logo">
 56                 <div class="logo">
 57                     <a href="#">登录</a>
 58                     <a href="#">注册</a>
 59                     <a href="#">购物车</a>
 60                 </div>
 61             </div>
 62             
 63             <!--清除浮动-->
 64             <div style="clear: both;"></div>
 65             
 66             <!--3. 第二部分: 导航栏部分 : 放置5个超链接-->
 67             <div style="background-color: black;height: 50px;">
 68                 <a href="#" class="amune">首页</a>
 69                 <a href="#" class="amune">手机数码</a>
 70                 <a href="#" class="amune">电脑办公</font></a>
 71                 <a href="#" class="amune">工程仪器</a>
 72                 <a href="#" class="amune">只能家具</a>
 73                 <a href="#" class="amune">工程仪器</a>
 74             </div>
 75             
 76             <!--4. 第三部分: 轮播图--> 
 77             <div>
 78                 <img src="img/1.jpg" width="100%"/>
 79             </div>
 80             
 81             <!--5. 第四部分:-->
 82             <div>
 83                 <div><h2>最新商品<img src="img/title2.jpg"/></h2></div>
 84                 <div id="" style="width: 15%; height: 480px; float: left;">
 85                     <img src="products/hao/big01.jpg" width="100%" height="100%" />
 86                 </div>
 87                 <div id="" style="width: 84%; height: 480px; float: left;">
 88                     <div style="height: 240px; width: 50%; float: left;">
 89                         <img src="products/hao/middle01.jpg" height="100%" width="100%"/>
 90                     </div>
 91                     <div class="product">
 92                         <img src="products/hao/small08.jpg"/>
 93                         <p>高压锅</p>
 94                         <p style="color: red;">¥998</p>
 95                     </div>
 96                     <div class="product">
 97                         <img src="products/hao/small08.jpg"/>
 98                         <p>高压锅</p>
 99                         <p style="color: red;">¥998</p>
100                     </div>
101                     <div class="product">
102                         <img src="products/hao/small08.jpg"/>
103                         <p>高压锅</p>
104                         <p style="color: red;">¥998</p>
105                     </div>
106                     <div class="product">
107                         <img src="products/hao/small08.jpg"/>
108                         <p>高压锅</p>
109                         <p style="color: red;">¥998</p>
110                     </div>
111                     <div class="product">
112                         <img src="products/hao/small08.jpg"/>
113                         <p>高压锅</p>
114                         <p style="color: red;">¥998</p>
115                     </div>
116                     <div class="product">
117                         <img src="products/hao/small08.jpg"/>
118                         <p>高压锅</p>
119                         <p style="color: red;">¥998</p>
120                     </div>
121                 </div>
122             </div>
123             
124             <!--6. 第五部分: 直接放一张图片-->
125             <div >
126                 <img src="products/hao/ad.jpg" width="100%"/>
127             </div>
128             
129             <!--7. 第六部分: 抄第四部分的-->
130             <div></div>
131             
132             <!--8. 第七部分: 放置一张图片-->
133             <div>
134                 <img src="image/footer.jpg" width="100%"/>
135             </div>
136             
137             <!--9. 第八部分: 放一堆超链接-->
138             <div style="text-align: center;">
139                 <a href="#">关于我们</a>
140                 <a href="#">联系我们</a>
141                 <a href="#">招贤纳士</a>
142                 <a href="#">法律声明</a>
143                 <a href="#">友情链接</a>
144                 <a href="#">支付方式</a>
145                 <a href="#">配送方式</a>
146                 <a href="#">服务声明</a>
147                 <a href="#">广告声明</a>
148                     
149                 <br />
150                     
151                 Copyright © 2005-2016 传智商城 版权所有
152             </div>
153             
154         </div>
155     </body>
156 
157 </html>
View Code

 

 

 

 

zwy

posted @ 2019-02-11 15:15  zwyk  阅读(74)  评论(0)    收藏  举报