web front end - h5 - Easy news list

We basics before, modeled on Baidu news to write a list of your own simple news list. Take a look at Baidu news about style:

1.1. Write on the list of news in the title tag, can be displayed in the browser top

<title>简易新闻列表</title>

1.2 in the body content is written in the h1 tags: Hot News. We go online to download a picture of the arrow (picture named icon_jiantou.PNG, put the img file in the index with the path folder.), Together with written h1 inside.

<h1>热点要闻&nbsp;<img src="img/icon_jiantou.PNG"></h1>
<hr/> 
<!--hr表示以水平线分割-->
<!--注意：img是单标签，src后面跟的是图片的地址。-->

2.1 Add a list signed, we use a new label: ul. There may be a number of list items in the list, each list item We use li.

<ul>
    <li>主席会见德国总统</li>
    <li>强业兴农</li>
    <li>5G基站</li>
</ul>

2.2. We observe on the back page.

2.3. Click the mouse found that text is displayed on the map can not be clicked. Baidu news with text content is not the same, Baidu news may open a new page. We can use a new tag attributes to solve, called hyperlinks (copy the url address of news came, stuck behind 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. By the previous steps we can already do a simple list of the news. But I do not want to display a list of symbols, trying to read a list of numbers, you can do this:

<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>

This time it becomes a sort of digital:

4.1 briefly summarize knowledge of this case:

1) Hyperlink: Attribute name is href, to fill open a web page address

<a href="http://news.cctv.com/2019/09/06/ARTI4E6Acb5MtTgYswiOZHEQ190906.shtml">主席会见德国总统</a>

2) Image tag: src attribute to it is the image path

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

3) ul / ol li and a list of combinations:

<ul>
    <li>列表项目1</li>
    <li>列表项目2</li>
    <li>列表项目3</li>
    <li>列表项目···</li>
</ul>
<!--ul是无序列表，ul换成ol是有序列表-->

web front end - h5 - Easy news list

We basics before, modeled on Baidu news to write a list of your own simple news list. Take a look at Baidu news about style:

1.1. Write on the list of news in the title tag, can be displayed in the browser top

1.2 in the body content is written in the h1 tags: Hot News. We go online to download a picture of the arrow (picture named icon_jiantou.PNG, put the img file in the index with the path folder.), Together with written h1 inside.

2.1 Add a list signed, we use a new label: ul. There may be a number of list items in the list, each list item We use li.

2.2. We observe on the back page.

2.3. Click the mouse found that text is displayed on the map can not be clicked. Baidu news with text content is not the same, Baidu news may open a new page. We can use a new tag attributes to solve, called hyperlinks (copy the url address of news came, stuck behind href).

3.1. By the previous steps we can already do a simple list of the news. But I do not want to display a list of symbols, trying to read a list of numbers, you can do this:

This time it becomes a sort of digital:

4.1 briefly summarize knowledge of this case:

1) Hyperlink: Attribute name is href, to fill open a web page address

2) Image tag: src attribute to it is the image path

3) ul / ol li and a list of combinations:

Note: Due to detect sensitive words, some parts of the text that appears not match the picture content.

Guess you like