ウェブフロントエンド - H5 - 簡単ニュース一覧

Baiduのニュースをモデルにする前に、私たちの基本は、独自のシンプルなニュースリストのリストを書き込みます。スタイルについてのBaiduのニュースを見てみましょう:

1.1。タイトルタグ内のニュースのリストに書き込み、ブラウザ上に表示することができます

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

ホットニュース:体含有量の1.2は、H1タグに書かれています。私たちは、内部に書かれたH1と一緒に、矢印(icon_jiantou.PNGという名前の画像は、パスフォルダとインデックスにIMGファイルを置く。)の画像をダウンロードするためにオンラインに行きます。

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

UL:2.1我々は新しいラベルを使用し、署名したリストを追加します。リストのリスト項目、我々は、Liを使用し、各リスト項目の数があるかもしれません。

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

2.2。私たちは、バック・ページ上で観察します。

2.3。地図上に表示されるテキストをクリックすることができない見つけ、マウスをクリックしてください。テキストコンテンツとBaiduのニュースは同じではありませんが、Baiduのニュースは新しいページを開くことができます。我々は(ニュースの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)ハイパーリンク:属性名は、開いているWebページのアドレスを埋めるために、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是有序列表-->

、敏感な単語を検出することにより、画像の内容と一致していない表示されるテキストの一部:注意してください。

おすすめ

転載: www.cnblogs.com/hefeifei/p/11628283.html
おすすめ