web前端 -- h5 -- 簡易新聞列表

我們通過之前的基礎知識，仿照百度新聞列表寫一個自己的簡易新聞列表。先看看百度新聞大概樣式：

1.1. 在title標簽里寫上新聞列表，可以在瀏覽器上頭顯示

<title>簡易新聞列表</title>


1.2. 在body里的h1標簽寫入內容：熱點要聞。我們再去網上下載一張箭頭圖片（圖片命名為icon_jiantou.PNG，放在與index同路徑下的img文件夾里。），一並寫在h1里面。


```html

熱點要聞 

---

```

2.1. 添加帶符號的列表,我們用到一個新標簽: ul。在列表中可能會有若干個列表項，每個列表項我們用 li 表示。

<ul>
	<li>主席會見德國總統</li>
	<li>強業興農</li>
	<li>5G基站</li>
</ul>

2.2. 我們回到頁面上觀察。


2.3. 點擊鼠標發現，上圖顯示的內容文字是不可以點擊的。跟百度新聞的文字內容不一樣，百度新聞可以打開新的頁面。我們可以用到一個新的標簽屬性來解決，叫做超鏈接（把新聞的url地址復制過來，粘貼在href后面）。

<ul>
	<li><a href="http://news.cctv.com/2019/09/06/ARTI4E6Acb5MtTgYswiOZHEQ190906.shtml">主席會見德國總統</a></li>
	<li><a href="http://news.cctv.com/2019/09/06/ARTIu7zidAWHhEI3NQXtCEHL190906.shtml">強業興農</a></li>
	<li><a href="http://baijiahao.baidu.com/s?id=1643943135034764037">5G基站</a></li>
    <!--a標簽是雙標簽-->
</ul>

3.1. 通過前面的步驟我們已經會做一個簡易新聞列表了。但是我不想用符號來顯示列表，想把列表改為數字，可以這樣做：

<ol>
	<li><a href="http://news.cctv.com/2019/09/06/ARTI4E6Acb5MtTgYswiOZHEQ190906.shtml">主席會見德國總統</a></li>
	<li><a href="http://news.cctv.com/2019/09/06/ARTIu7zidAWHhEI3NQXtCEHL190906.shtml">強業興農</a></li>
	<li><a href="http://baijiahao.baidu.com/s?id=1643943135034764037">5G基站</a></li>
</ol>

這個時候就變成數字排序了：


4.1. 簡單總結一下這個案例中的知識點：

1）超鏈接：屬性名字是href，要填寫打開網頁的地址

<a href="http://news.cctv.com/2019/09/06/ARTI4E6Acb5MtTgYswiOZHEQ190906.shtml">主席會見德國總統</a>

2）圖片標簽：屬性src中填寫的是圖片路徑

<img src="img/icon_jiantou.PNG">

3）ul / ol和 li 的列表組合：

<ul>
	<li>列表項目1</li>
	<li>列表項目2</li>
	<li>列表項目3</li>
	<li>列表項目···</li>
</ul>
<!--ul是無序列表，ul換成ol是有序列表-->

注：由於會檢測到敏感詞匯，某些地方出現的文字會與圖片內容不符。