HTML+CSS勉強記(3) - タグを理解する(2)_html/css_WEB-ITnose

1. ul を使用してニュース情報リストを追加します

Web を閲覧すると、ニュース リストや画像リストなどの多くの情報リストが Web ページ上にあることがわかります。これらのリストは ul を使用して完成させることができます。 -liタグ。 ul-li は、順不同の情報のリストです。

文法:

<ul>  <li>信息</li>  <li>信息</li>   ......</ul>

例:

<ul>  <li>精彩少年</li>  <li>美丽突然出现</li>  <li>触动心灵的旋律</li></ul>

Web ページ上で ul-li によって表示されるデフォルトのスタイルは、一般的に次のとおりです。各 li にはその前にドットが付いています。

2. ol を使用して書籍売上ランキング リストを追加します。

Web ページ上に情報の連続リストを表示したい場合はどうすればよいでしょうか?たとえば、Dangdang のオンライン書籍ベストセラー ランキングでは、この種の情報表示では c34106e0b4e09414b63b2ea253ff83d6 タグを使用して順序付きリストを作成して表示できます。文法:

<ol>   <li>信息</li>   <li>信息</li>   ......</ol>

例:

以下は人気のコース ダウンロード ランキングです:

<ol>   <li>前端开发面试心法 </li>   <li>零基础学习html</li>   <li>JavaScript全攻略</li></ol>

c34106e0b4e09414b63b2ea253ff83d6Web ページに表示されるデフォルトのスタイルは通常、次のとおりです。25edfb22a4f469ecb59f1190150159c6 の各項目の前にシリアル番号が付きます。シリアル番号はデフォルトです。 1 から始めます

3. レイアウトにおける div の役割を理解します

Web ページの作成プロセス中に、いくつかの独立した論理部分を dc6dce4a544fdca2df29d5ac0ea9906b タグに入れることができます。 ;div> タグ コンテナのように機能します。

文法:

<div>…</div>

論理部分を特定する: 論理部分は何ですか?これは、ページ上の相互に関連する要素のセットです。たとえば、Web ページの独立した列セクションは、典型的な論理部分です。

4. ロジックを明確にするために div に名前を付けます

前のセクションでは、独立した論理部分を作成するためにいくつかのタグを dc6dce4a544fdca2df29d5ac0ea9906b に挿入しました。ロジックを明確にするために、この独立した論理部分に名前を設定し、id 属性を使用して dc6dce4a544fdca2df29d5ac0ea9906b に一意の名前を付けることができます。これは、各人が固有の ID 番号を持っているようなものです。私たちのアイデンティティを識別するものであり、一意である必要があります。構文:

<div  id="版块名称">…</div>

table タグ、Web ページ上のテーブルを認識します

テーブルを作成する 4 つの要素:

table、tbody、tr、th、td

1、f5d188ed2c074f8b944552db028f98a1…f16b1740fad44fb09bfe928bcc527e08:テーブル全体 f5d188ed2c074f8b944552db028f98a1 タグで始まり、f16b1740fad44fb09bfe928bcc527e08 タグで終わります。

2. 92cee25da80fac49f6fb6eec5fd2c22aca745a59da05f784b8811374296574e1: テーブルのコンテンツが多い場合、テーブルは少しダウンロードされて表示されますが、92cee25da80fac49f6fb6eec5fd2c22a タグが追加されると、テーブルはすべてのテーブルの内容が表示されるまで待ちます。右側のコードエディターのコードなど。

3. a34de1251f0d9fe1e645927f19a896e8…fd273fcf5bcad3dfdad3c41bd81ad3e5: テーブルの行なので、tr のペアが複数あり、テーブルには複数の行があります。

4. b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf: テーブル内のセルには、複数の b6c5a531a458a2e790c1fd6421739d1cb90dd5946f0946207856a8a37f441edf のペアが含まれており、1 行に何列あるかを示します。

5. …: テーブルの先頭のセル、テーブルヘッダー。

6. テーブル内の列の数は、行内のデータ セルの数によって異なります。概要:

1. CSS スタイルが追加される前に、表の表は表の行なしでブラウザーに表示されます

2. 表のヘッダー、つまり th タグ内のテキストは、デフォルトで

太字 および 中央揃えで表示されます。

6. CSS スタイルを使用してテーブルに境界線を追加します

テーブル CSS スタイルを追加する前のテーブルには境界線がありません。これは後でセルの結合に関する知識ポイントを説明するのに不便なので、このセクションでは表にいくつかのスタイルを追加し、枠線を追加します。

右側のコードエディターに次のコードを追加します:

<style type="text/css">table tr td,th{border:1px solid #000;}</style>

上記のコードは、CSS スタイル コードを使用して、1 ピクセルの太さの黒い境界線を th セルと td セルに追加します。

7. キャプションタグ、表にタイトルと要約を追加します

要約

要約の内容はブラウザには表示されません。その機能は、表の可読性 (意味化) を高め、検索エンジンが表の内容をよりよく理解できるようにすること、また、スクリーン リーダーが特別なユーザーが表の内容を読みやすくできるようにすることです。

    语法：<table summary="表格简介文本">

タイトル

テーブルの内容を説明するために使用されます。タイトルはテーブルの上部に表示されます。

文法:

rree

---