HTML+CSS勉強記(3) - タグを理解する(2)_html/css_WEB-ITnose-htmlチュートリアル-php.cn

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 のオンライン書籍ベストセラーランキングでは、この種の情報表示では

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

ログイン後にコピー

例:

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

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

ログイン後にコピー

の各項目の前にシリアル番号が付きます。シリアル番号はデフォルトです。 1 から始めます

3. レイアウトにおける div の役割を理解します
Web ページの作成プロセス中に、いくつかの独立した論理部分を
タグに入れることができます。 ;div> タグコンテナのように機能します。

文法:
```
<div>…</div>
```
ログイン後にコピー
論理部分を特定する: 論理部分は何ですか?これは、ページ上の相互に関連する要素のセットです。たとえば、Web ページの独立した列セクションは、典型的な論理部分です。

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

前のセクションでは、独立した論理部分を作成するためにいくつかのタグを
に挿入しました。ロジックを明確にするために、この独立した論理部分に名前を設定し、id 属性を使用して
に一意の名前を付けることができます。これは、各人が固有の ID 番号を持っているようなものです。私たちのアイデンティティを識別するものであり、一意である必要があります。構文:
<div id="版块名称">…</div>
ログイン後にコピー
table タグ、Web ページ上のテーブルを認識します

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

table、tbody、tr、th、td

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

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

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

4. : テーブル内のセルには、複数ののペアが含まれており、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
関連ラベル：
HTML+CSS学习笔记（3）- 认识标签（2）

ソース：php.cn

前の記事：css priority_html/css_WEB-ITnose 次の記事：CSS の 5 つの主要なフォントファミリ (私にとって筆記体の手書きフォントファミリの方が魅力的です)_html/css_WEB-ITnose

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
- NullPointerException とは何ですか?どのように修正すればよいですか?
  
  2024-10-22 09:46:29
- 初心者からプログラマーへ: 旅は C の基礎から始まります
  
  2024-10-13 13:53:41
- PHP による Web 開発のロックを解除する: 初心者ガイド
  
  2024-10-12 12:15:51
- C の謎を解く: 新人プログラマーのための明確でシンプルな道
  
  2024-10-11 22:47:31
- コーディングの可能性を解き放つ: まったくの初心者のための C プログラミング
  
  2024-10-11 19:36:51
- 内なるプログラマーを解き放つ: まったくの初心者のための C
  
  2024-10-11 15:50:41
- C で生活を自動化する: 初心者向けのスクリプトとツール
  
  2024-10-11 15:07:41
- PHP を簡単に: Web 開発の最初のステップ
  
  2024-10-11 14:21:21
- Python で何でも構築: 創造性を解き放つための初心者ガイド
  
  2024-10-11 12:59:11
- コーディングの鍵: 初心者のための Python の力を解き放つ
  
  2024-10-11 12:17:31
最新の問題

function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";

から 2024-04-29 11:01:01

0

3

2080

Google Chromeのモバイル版を表示する方法こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?

から 2024-04-23 00:22:19

0

11

2242

子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。最初の 2 つの文は実行可能ですが、最後の文は実装できません。

から 2024-04-19 15:37:47

0

1

1888

親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');

から 2024-04-18 23:52:34

0

1

1767

CSS マインドマッピングに関するコースウェアはどこにありますか? コースウェア

から 2024-04-16 10:10:18

0

0

1805
関連トピック
詳細>