內(nèi)容LongLongLong是一種情懷
本文是針對(duì)剛學(xué)編程的小白,都是一些基礎(chǔ)知識(shí),如果想了解更多深層一點(diǎn)的東西,歡迎移步本人博客!!
博客地址 點(diǎn)擊跳轉(zhuǎn)
在學(xué)習(xí)HTML5之前有幾點(diǎn)忠告給大家
1.HTML5要學(xué)習(xí)的內(nèi)容很多很雜,會(huì)越來越難,如果有人給你說H5一點(diǎn)都不難的話,那一定是坑你 ! 或者是對(duì)你有所圖.HTML5相對(duì)于別的語(yǔ)言來說可能稍微有點(diǎn)輕松,但是絕對(duì)不簡(jiǎn)單!
2.其實(shí),前期學(xué)H5的一些標(biāo)簽和樣式挺簡(jiǎn)單的,你會(huì)感覺很輕松 ! 但是后面的內(nèi)容會(huì)越來越難.
3.首先你得明白得學(xué)習(xí)一些什么東西,包括那些內(nèi)容.下面是我給大家羅列的全部?jī)?nèi)容
4.在你學(xué)習(xí)任何一門語(yǔ)言的時(shí)候,一定要有心里準(zhǔn)備和堅(jiān)韌不拔的毅力.
下面廢話不多話,直接上代碼
瀏覽器功能
- 將網(wǎng)頁(yè)渲染出來給用戶查看
- 可以讓用戶通過瀏覽器和網(wǎng)頁(yè)交互
- 瀏覽器內(nèi)核就是通常所說的渲染引擎笨篷,因?yàn)閮?nèi)核不同,所以存在兼容問題流译。
服務(wù)器
- 服務(wù)器就是超級(jí)計(jì)算機(jī)炊汤,頂級(jí)配置街州。服務(wù)器是用來存儲(chǔ)數(shù)據(jù)的一疯,24小時(shí)不斷電不關(guān)機(jī)的超級(jí)計(jì)算機(jī)灰粮。
什么是URL
**
http://127.0.0.1:80/index.html(完整的格式) http://URL協(xié)議類型
127.0.0.1服務(wù)器的IP地址
:80服務(wù)器的端口號(hào)
index.html需要訪問的資源名稱**
認(rèn)識(shí)HTML
- HTML 由HyperText(超文本) Markup(標(biāo)記) Language(語(yǔ)言)縮寫而來
- HTML只有一個(gè)作用,它是專門用來給文本添加語(yǔ)義的漏益。所以HTML被稱作“超文本標(biāo)記語(yǔ)言”蛹锰。
字符集
- 示例代碼 :
<meta charset="GBK"> GBK中文漢字 國(guó)標(biāo) 純中文網(wǎng)站
<meta charset="UTF-8"> UTF-8 國(guó)際通用 字庫(kù)很全
DTD文檔聲明
- 示例代碼 :
<!DOCTYPE html> 作用告訴瀏覽器 我是一個(gè)文檔
H系列標(biāo)簽
- 示例代碼 :
h1 h2 h3 h4 h5 h6 標(biāo)簽 只有h1到h6 主標(biāo)題 字體依次變小
<!--在瀏覽器上顯示一條分割線-->
<!--注意:獨(dú)占一行-->
<hr/>標(biāo)簽
<!--注意:在瀏覽器中獨(dú)占一行-->
<p>我是一段文本</p>
<!--快速添加前后標(biāo)簽--><!--選中文字,然后快捷鍵:Ctrl+Alt+T-->
注釋
<!--<p>我是段落</p>--> 工作中注釋非常重要 注釋的內(nèi)容不會(huì)顯示在頁(yè)面上
<!--快捷鍵:Ctrl + / -->
img標(biāo)簽和路徑問題
img標(biāo)簽是英文的縮寫绰疤,用來顯示一張圖片
img標(biāo)簽的格式
<img src = "">
src是英文 source 的縮寫宁仔,source:資源,src是用來告訴img標(biāo)簽需要顯示的圖片峦睡。
注意點(diǎn)
和H系列的標(biāo)簽不一樣,img標(biāo)簽不會(huì)獨(dú)占一行- 如果我們手動(dòng)指定圖片的寬度和高度权埠,會(huì)使圖片變形 如果不想圖片變形榨了,只指定一個(gè)值,系統(tǒng)會(huì)自動(dòng)自動(dòng)高度攘蔽,都是等比拉伸龙屉,不會(huì)變形
img包含的屬性 :
- **width:寬度 height:高度 width/height兩個(gè)屬性來控制圖片的高度和寬度 如果沒有指定寬度和高度,系統(tǒng)會(huì)默認(rèn)顯示 **
- **title:當(dāng)鼠標(biāo)懸停在圖片上的時(shí)候满俗,需要彈出的描述框中顯示什么內(nèi)容 **
- **alt:是英文alternate的縮寫 作用是:當(dāng)需要顯示的圖片找不到時(shí)转捕,顯示什么內(nèi)容。 **
路徑問題:
- 給src賦值有兩種方式
**1.通過相對(duì)路徑賦值相對(duì)路徑就是每次從.html中查找
2.同級(jí)就是圖片和.html存儲(chǔ)在同一個(gè)文件夾中格式:src="QRCode.jpg"含義:在.html文件所在的文件夾中查找名稱叫做QRCode.jpg的圖片
下級(jí)下級(jí)就是存儲(chǔ)圖片的文件夾和.html文件在同一個(gè)文件夾中格式:在.html文件所在的文件夾中找到名稱教程images的文件夾
上級(jí)上級(jí)就是存儲(chǔ)圖片的位置和存儲(chǔ)代碼的文件夾在同一個(gè)文件夾中格式:src="../QRCode.jpg"../代表跳出現(xiàn)在的文件夾從上級(jí)文件夾中查找名稱叫做QRCode.jpg的文件
3.通過絕對(duì)路徑賦值絕對(duì)路徑每次都是從指定的硬盤開始查找
4.注意:
路徑中不要出現(xiàn)中文唆垃,否則會(huì)導(dǎo)致無法顯示圖片
通過相對(duì)路徑指定五芝,不能跨硬盤**
換行標(biāo)簽
- 如何在HTML中換行,可以用br標(biāo)簽
- br標(biāo)簽的作用:換行
- br標(biāo)簽的格式:
- 注意點(diǎn):
- 多個(gè)br標(biāo)簽可以連續(xù)使用辕万,使用了幾個(gè)就會(huì)換幾行
- 由于HTML的作用就是給文本添加語(yǔ)義枢步,而br標(biāo)簽的語(yǔ)義是不另起一個(gè)段落換行沉删,而在企業(yè)中開發(fā)一般需要另起一個(gè)段落換行,所以開發(fā)中很少使用br標(biāo)簽醉途。
a標(biāo)簽
- 什么是a標(biāo)簽
- a標(biāo)簽的作用:就是用于控制頁(yè)面與玉面之間跳轉(zhuǎn)的
- a標(biāo)簽的格式:<a href="指定需要跳轉(zhuǎn)的目標(biāo)界面">需要給用戶查看的內(nèi)容</a>
- a標(biāo)簽中還有一個(gè)叫做target(目標(biāo))屬性矾瑰,這個(gè)屬性的作用是來控制如何跳轉(zhuǎn)頁(yè)面
- _self(當(dāng)前):當(dāng)前頁(yè)面跳轉(zhuǎn),不新建選項(xiàng)卡
- _blank(空白):重新打開一個(gè)新選項(xiàng)卡跳轉(zhuǎn)
- a標(biāo)簽中還有一個(gè)叫做title的屬性隘擎,和img標(biāo)簽中的title屬性是一樣的殴穴,都是用來控制鼠標(biāo)懸停時(shí)顯示的提示文本的
- 注意點(diǎn):
**1.a標(biāo)簽不僅可以讓文字可以點(diǎn)擊跳轉(zhuǎn),還可以讓圖片跳轉(zhuǎn)
2.一個(gè)a標(biāo)簽必須有一個(gè)href屬性货葬,不然無法實(shí)現(xiàn)跳轉(zhuǎn)
3.如果通過a標(biāo)簽的href屬性指定一個(gè)URL地址的時(shí)候采幌,前面必須加上(http:)//或(https://)
4.a標(biāo)簽除了可以指定網(wǎng)絡(luò)地址以外,還可以指定本地地址**
- 示例代碼 : 跳轉(zhuǎn)到另一頁(yè)
<a href="https://www.跳轉(zhuǎn)地址">內(nèi)容頁(yè)</a>
<a href="https://www.跳轉(zhuǎn)地址">
![](圖片地址)
</a>
- 示例代碼 : 本地跳轉(zhuǎn)
<a href="本地地址.html">內(nèi)容標(biāo)題.html</a>
- 示例代碼 : target
<a href="https://www.鏈接地址" target="_self">地址頁(yè)</a>
<a href="https://www.鏈接地址" target="_blank">地址頁(yè)</a>
- 示例代碼 : title
<a title="友情提示:會(huì)跳轉(zhuǎn)到百度糯米首頁(yè)">糯米</a>
base標(biāo)簽
- base(基礎(chǔ))標(biāo)簽就是專門用來統(tǒng)一指定當(dāng)前網(wǎng)頁(yè)中所有的超鏈接(a標(biāo)簽)需要如何打開
- 注意點(diǎn):
1.base標(biāo)簽必須寫在head標(biāo)簽的開始標(biāo)簽和結(jié)尾標(biāo)簽中間
2.如果既在base標(biāo)簽中指定了target宝惰,又在a標(biāo)簽中指定了target植榕,那么瀏覽器會(huì)按照a標(biāo)簽中指定的方式打開
- 示例代碼 :
<base target="_blank"> 控制整個(gè)頁(yè)面的跳轉(zhuǎn) 插入在head標(biāo)簽之中
<a href="https://www.跳轉(zhuǎn)地址" target="_self">比如百度糯米</a>
<a href="http://news.跳轉(zhuǎn)地址">比如百度新聞</a>
<a href="https://www.跳轉(zhuǎn)地址">比如hao123</a>
<a href="http://跳轉(zhuǎn)地址">比如百度地圖</a>
<a href="http://跳轉(zhuǎn)地址">比如百度貼吧</a>
<a href="http://跳轉(zhuǎn)地址">比如百度視頻</a>
假鏈接
- 假鏈接就是點(diǎn)擊之后不會(huì)跳轉(zhuǎn)頁(yè)面意義:在企業(yè)開前期,其他界面都沒有寫出來尼夺,所以不知道該往那里跳尊残,所以用假鏈接來代替。
- 開發(fā)到后期之后把假鏈接替換成真鏈接假鏈接的格式:1.#:點(diǎn)擊之后會(huì)自動(dòng)回到頁(yè)面頂部2.javascript:點(diǎn)擊之后不會(huì)自動(dòng)回到頂部
錨點(diǎn)
- 要想a標(biāo)簽跳轉(zhuǎn)到指定的位置淤堵,必須告訴a標(biāo)簽一個(gè)獨(dú)一無二的身份證號(hào)碼寝衫,這樣才能找到
- 如果給HTML中的標(biāo)簽綁定一個(gè)獨(dú)一無二的身份號(hào)碼呢? 在html中都有一個(gè)叫做id的屬性拐邪,id屬性是獨(dú)一無二的
- 想要跳轉(zhuǎn)到指定的位置分兩步
- 給目標(biāo)位置添加一個(gè)id屬性慰毅,然后指定一個(gè)獨(dú)一無二的值
- 告訴a標(biāo)簽需要跳轉(zhuǎn)到的目標(biāo)標(biāo)簽對(duì)用的獨(dú)一無二的身份證號(hào)碼是多少格式:
<a href="#center">跳轉(zhuǎn)到中部</a><h2 id="center">我是中部</h2>
- 注意點(diǎn):
1.通過a標(biāo)簽跳轉(zhuǎn)到指定位置的時(shí)候,是沒有過度動(dòng)畫效果的扎阶,直接一下就跳到指定位置
2.a標(biāo)簽除了可以跳轉(zhuǎn)到當(dāng)前界面的指定位置以后汹胃,還可以跳轉(zhuǎn)到其他界面的時(shí)候直接跳轉(zhuǎn)到指定位置格式:
- 示例代碼 :
<a href="13-錨點(diǎn)的測(cè)試界面.html#bottom" target="_blank">跳轉(zhuǎn)到錨點(diǎn)測(cè)試界面</a>
<h2 id="bottom">我是錨點(diǎn)測(cè)試界面3333</h2>
<a href="13-錨點(diǎn)的測(cè)試界面.html#bottom" target="_blank">跳轉(zhuǎn)到錨點(diǎn)測(cè)試界面</a>
<h2>我是頂部</h2>
<a href="#center">跳轉(zhuǎn)到中部</a>
<br/><br/><br/><hr/><br/><br/><br/><hr/><br/><br/><hr/><br/><br/><br/><hr/><br/><br/><br/><br/><br/><hr/><br/><br/><br/><br/><hr/><br/><br/><br/><hr/><br/><br/><br/><hr/><br/><br/><br/><br/><hr/><br/><br/><br/><hr/><br/><br/><br/><br/>
<h2 id="center">我是中部</h2>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<h2>我是底部</h2>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
無序列表
- 1.什么是列表標(biāo)簽列表標(biāo)簽就是用來給一對(duì)數(shù)據(jù)添加列表語(yǔ)義,告訴瀏覽器這堆數(shù)據(jù)是一個(gè)整體
- 2.HTML中列表標(biāo)簽的分類
- 2.1無序列表(最多)(unordered list)(ul的縮寫)
- 2.2有序列表(最少)(ordered list)
- 2.3定義列表(其次)(definition list)
- 3.無序列表的作用給一堆數(shù)據(jù)添加列表語(yǔ)義东臀,并且這一堆數(shù)據(jù)中所有的數(shù)據(jù)沒有先后之分先后之分:例如排行榜沒有先后之分:例如城市
- 4.無序列表格式
- 示例代碼 :
<ul>
<li>需要顯示的內(nèi)容</li>
</ul>
li其實(shí)就是list item(列表?xiàng)l目)的縮寫 list:(列表) item:(條目)
- 注意點(diǎn):
1.ul標(biāo)簽是用來給一堆數(shù)據(jù)添加語(yǔ)義的着饥,而不是給用來給它們前面添加小圓點(diǎn)的
2.ul標(biāo)簽和li標(biāo)簽是一個(gè)組合,一般情況同時(shí)出現(xiàn)惰赋,不會(huì)單個(gè)出現(xiàn)
3.ul標(biāo)簽和li標(biāo)簽是一個(gè)組合宰掉,所以u(píng)l標(biāo)簽中不推薦包含其他標(biāo)簽無序列表的
- 應(yīng)用場(chǎng)景
1.新聞列表
2.商品列表
3.導(dǎo)航條
- 示例代碼 :
<h2>中國(guó)的城市有那些</h2>
<ul>
<li>北京</li>
<li>上海</li>
<li>武漢</li>
<li>天津</li>
</ul>
練習(xí)
<hr width="500px" align="left">
<ul type="circle">
<li>男子幫前車拆穿碰瓷 遭"碰瓷黨"砸穿車窗</li>
<li>老鼠咬壞天然氣膠管 戶主點(diǎn)火做飯氣灶閃爆</li>
<li>小區(qū)業(yè)主和物業(yè)激戰(zhàn)多年 老師被逼成“潑婦”</li>
<li>體操美女不幸爆菊身亡!下體血肉模糊</li>
<li>小伙陷傳銷欲騙家人錢 PS剁手指照被識(shí)破(圖)</li>
</ul>
- 圖片展示
- ul標(biāo)簽中最好只放li標(biāo)簽赁濒,但是在企業(yè)開發(fā)中轨奄,li標(biāo)簽的內(nèi)容可能會(huì)很復(fù)雜,所以我們可以繼續(xù)在li標(biāo)簽中添加其他的標(biāo)簽拒炎,來豐富界面
總結(jié):
1.一定記住ul標(biāo)簽中最好只放li標(biāo)簽
2.但是li標(biāo)簽中還可以繼續(xù)添加其他的標(biāo)簽
3.無序列表中的li標(biāo)簽除了可以添加別的標(biāo)簽豐富界面以后挪拟,還可以添加ul標(biāo)簽ul中可以有l(wèi)i,li中又可以有ul
有序列表
- 無序列表的作用
- 給一堆數(shù)據(jù)添加列表語(yǔ)義枝冀,并且這一堆數(shù)據(jù)中所有的數(shù)據(jù)有先后之分
- 有序列表格式:
<ol>(ordered list縮寫)
<li>需要顯示的內(nèi)容</li>
</ol>
- 注意點(diǎn)和應(yīng)用場(chǎng)景都和ul的差不多
定義列表
- 定義列表的格式:
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
- dt和dd都是英文縮寫
1.dt是英文definition title的縮寫舞丛,所以dt的含義就是用來定義列表
2.dd是英文definition description的縮寫耘子,所以dd的含義就是用來定義標(biāo)題對(duì)應(yīng)的描述
-
定義列表的作用:
1.定義列表的作用
2.給一堆數(shù)據(jù)添加列表語(yǔ)義
3.先通過dt標(biāo)簽定義列表中的所有標(biāo)題,然后通過dd標(biāo)簽給每個(gè)標(biāo)題添加描述信息 -
定義列表的應(yīng)用場(chǎng)景
1.做網(wǎng)頁(yè)底部的相關(guān)信息
2.圖文混排 注意點(diǎn):
**1.和ul和ol一樣球切,dl和dt/dd是一個(gè)整體谷誓,所以他們一般都是同時(shí)出現(xiàn)的,不會(huì)單獨(dú)出現(xiàn)
2.和ul和ol一樣吨凑,由于dl和dt/dd是一組合標(biāo)簽捍歪,所以dl中建議只放dt和dd標(biāo)簽
3.一個(gè)dt可以沒有對(duì)應(yīng)的dd,也可以有多個(gè)對(duì)應(yīng)的dd鸵钝,但無論有或者沒有dd都不推薦使用糙臼,只推薦一個(gè)dt對(duì)應(yīng)一個(gè)dd
4.和li標(biāo)簽一樣,需要豐富界面時(shí)恩商,我們可以在dt和dd標(biāo)簽中繼續(xù)添加其他標(biāo)簽**
表格標(biāo)簽基本使用
以前很多網(wǎng)站都用表格標(biāo)簽做的变逃,表格標(biāo)簽是一個(gè)時(shí)代的代表
作用:用來給一堆數(shù)據(jù)添加表格語(yǔ)義
表格是一種數(shù)據(jù)的展現(xiàn)形式,當(dāng)數(shù)據(jù)量特別大的時(shí)候怠堪,用表格來展示的時(shí)候就會(huì)非常清晰表格標(biāo)簽的格式:
示例代碼 :
<table>
<tr>
<td>需要顯示的內(nèi)容</td>
</tr>
</table>
table代表整個(gè)表格揽乱,一對(duì)table標(biāo)簽就是一個(gè)表格
tr標(biāo)簽代表表格中的一行數(shù)據(jù),一對(duì)tr標(biāo)簽就是一行數(shù)據(jù)
td標(biāo)簽代表表格中一行的一個(gè)單元格粟矿,一對(duì)td標(biāo)簽就是一行中的一個(gè)單元格
- 注意點(diǎn)
1.表格標(biāo)簽中有一個(gè)邊框?qū)傩曰嗣蓿@個(gè)屬性決定了邊框的寬度,默認(rèn)情況下屬性值是0陌粹,所以看不到
2.表格標(biāo)簽和列表標(biāo)簽一樣撒犀,是一個(gè)組合標(biāo)簽,所以table/tr/td同時(shí)出現(xiàn)掏秩,不會(huì)單獨(dú)出現(xiàn)
表格標(biāo)簽的屬性
- 寬度和高度的屬性
1.可以給td標(biāo)簽和table標(biāo)簽使用
2.表格的寬度和高度默認(rèn)按照內(nèi)容的尺寸來調(diào)整或舞,也可以給table標(biāo)簽設(shè)置width和height來手動(dòng)指定
2.如果給td標(biāo)簽設(shè)置width和height屬性,會(huì)修改當(dāng)前單元格一行的寬度和高度蒙幻,不會(huì)影響整個(gè)表格
- 水平對(duì)齊和垂直對(duì)齊屬性
1.其中水平對(duì)齊可以給table和tr和td標(biāo)簽使用
2.垂直對(duì)齊只能對(duì)tr和td標(biāo)簽使用
3.給table標(biāo)簽設(shè)置align屬性嚷那,可以控制表格在水平方向的對(duì)齊
4.給tr標(biāo)簽設(shè)置align屬性,可以控制當(dāng)前行中單元格內(nèi)容的水平方向?qū)R
5.給td標(biāo)簽設(shè)置align屬性杆煞,可以控制當(dāng)前單元格內(nèi)容在水平方向的對(duì)齊方式
- 注意點(diǎn):
**1.如果td和tr中都設(shè)置了align屬性,那么單元格中的內(nèi)容會(huì)按照td中設(shè)置的來對(duì)齊
2.給tr標(biāo)簽設(shè)置valign屬性腐泻,可以控制當(dāng)前行中所有單元格的內(nèi)容决乎,在垂直方向的對(duì)齊方式
3.外邊距和內(nèi)邊距屬性 只能對(duì)table標(biāo)簽使用
4.外邊距就是單元格和單元格之間的距離 默認(rèn)情況下,外邊距的距離是2px
5.內(nèi)邊距就是表格中的內(nèi)容和單元格邊框之間的距離 默認(rèn)情況下內(nèi)邊距是1**
- 示例代碼 :
<table border="1" width="500px" height="300px" align="center" cellspacing="12" cellpadding="20">
<tr valign="bottom">
<td width="150px" height="50px">11</td>
<td valign="top">22</td>
</tr>
<tr align="center">
<td align="right">33</td>
<td>44</td>
</tr>
</table>
細(xì)線表格
- 在表格標(biāo)簽中想通過指定外邊距為0來實(shí)現(xiàn)細(xì)線表格是不行的派桩,
- 其實(shí)他是2條線合并成一條線构诚,看起來很不舒服的
- 細(xì)線表格的制作方式:
**1.給table標(biāo)簽設(shè)置
backgroundcolor
為黑色
2.給tr標(biāo)簽設(shè)置backgroundcolor
為白色
3.給table標(biāo)簽設(shè)置cellspacing = "1px"
**
注意點(diǎn):
table標(biāo)簽和tr標(biāo)簽以及td標(biāo)簽都支持bgcolor屬性示例代碼 :
<table bgcolor="black" cellspacing="1">
<tr bgcolor="white">
<td>1.1</td>
<td>1.2</td>
</tr>
<tr bgcolor="white">
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
- 圖片展示
表格標(biāo)簽的其他標(biāo)簽
表格的標(biāo)題
- 在表格標(biāo)簽中提供了一個(gè)專門用來設(shè)置表格標(biāo)題的標(biāo)簽,叫caption
-
只要將這個(gè)標(biāo)簽寫入表格當(dāng)中铆惑,它就會(huì)自動(dòng)居中
caption
標(biāo)簽一定要寫在table中范嘱,否則無效
caption
標(biāo)簽一定要跟在table標(biāo)簽后面
標(biāo)題單元格標(biāo)簽
- 在表格標(biāo)簽中提供了一個(gè)專門用來存儲(chǔ)每一列標(biāo)題的標(biāo)簽送膳,這個(gè)標(biāo)簽叫做th標(biāo)簽,只要將當(dāng)前列的標(biāo)題存 儲(chǔ)在這個(gè)標(biāo)簽當(dāng)中就會(huì)自動(dòng)居中+加粗
- 到此為止我們發(fā)現(xiàn)丑蛤,表格中有兩種單元格一種是td標(biāo)簽叠聋,一種th標(biāo)簽,th標(biāo)簽就是專門用來存儲(chǔ)當(dāng)前列 標(biāo)題的
單元格合并
<table bgcolor="black" cellspacing="1px" width="500px" height="300px" align="center">
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td colspan="2" rowspan="2"></td>
<!--<td></td>-->
</tr>
<tr bgcolor="white">
<td></td>
<!--<td colspan="2"></td>-->
<!--<td></td>-->
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
-
圖片展示