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 のオンライン書籍ベストセラー ランキングでは、この種の情報表示では
- タグを使用して順序付きリストを作成して表示できます。文法:
- の各項目の前にシリアル番号が付きます。シリアル番号はデフォルトです。 1 から始めます
3. レイアウトにおける div の役割を理解します
Web ページの作成プロセス中に、いくつかの独立した論理部分をタグに入れることができます。 ;div> タグ コンテナのように機能します。
文法:論理部分を特定する: 論理部分は何ですか?これは、ページ上の相互に関連する要素のセットです。たとえば、Web ページの独立した列セクションは、典型的な論理部分です。<div>…</div>
ログイン後にコピー
4. ロジックを明確にするために div に名前を付けます
前のセクションでは、独立した論理部分を作成するためにいくつかのタグをに挿入しました。ロジックを明確にするために、この独立した論理部分に名前を設定し、id 属性を使用してに一意の名前を付けることができます。これは、各人が固有の ID 番号を持っているようなものです。私たちのアイデンティティを識別するものであり、一意である必要があります。構文:table タグ、Web ページ上のテーブルを認識します<div id="版块名称">…</div>
ログイン後にコピー
テーブルを作成する 4 つの要素:
table、tbody、tr、th、td
1、…
:テーブル全体タグで始まり、
タグで終わります。
2. : テーブルのコンテンツが多い場合、テーブルは少しダウンロードされて表示されますが、 タグが追加されると、テーブルはすべてのテーブルの内容が表示されるまで待ちます。右側のコードエディターのコードなど。
3.… : テーブルの行なので、tr のペアが複数あり、テーブルには複数の行があります。
4.: テーブル内のセルには、複数の のペアが含まれており、1 行に何列あるかを示します。
5.… : テーブルの先頭のセル、テーブルヘッダー。
6. テーブル内の列の数は、行内のデータ セルの数によって異なります。概要:
1. CSS スタイルが追加される前に、表の表は表の行なしでブラウザーに表示されます
2. 表のヘッダー、つまり th タグ内のテキストは、デフォルトで太字 および 中央揃えで表示されます。
6. CSS スタイルを使用してテーブルに境界線を追加します
テーブル CSS スタイルを追加する前のテーブルには境界線がありません。これは後でセルの結合に関する知識ポイントを説明するのに不便なので、このセクションでは表にいくつかのスタイルを追加し、枠線を追加します。
右側のコードエディターに次のコードを追加します:上記のコードは、CSS スタイル コードを使用して、1 ピクセルの太さの黒い境界線を th セルと td セルに追加します。<style type="text/css">table tr td,th{border:1px solid #000;}</style>ログイン後にコピー
7. キャプションタグ、表にタイトルと要約を追加します
要約要約の内容はブラウザには表示されません。その機能は、表の可読性 (意味化) を高め、検索エンジンが表の内容をよりよく理解できるようにすること、また、スクリーン リーダーが特別なユーザーが表の内容を読みやすくできるようにすることです。
タイトル语法：<table summary="表格简介文本">
ログイン後にコピーテーブルの内容を説明するために使用されます。タイトルはテーブルの上部に表示されます。
文法:
rree
このウェブサイトの声明この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
アサシンのクリードシャドウズ：シーシェルリドルソリューション3週間前 By DDDWindows11 KB5054979の新しいものと更新の問題を修正する方法2週間前 By DDDAtomfallのクレーンコントロールキーカードを見つける場所3週間前 By DDDR.E.P.O.で節約説明した（そしてファイルを保存）1 か月前 By 尊渡假赌尊渡假赌尊渡假赌アサシンクリードシャドウ - 鍛冶屋を見つけて武器と鎧のカスタマイズを解除する方法4週間前 By DDD
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
Gmailメールのログイン入り口はどこですか？
7566
15
CakePHP チュートリアル
1386
52
Steamのアカウント名の形式は何ですか
87
11
NYTの接続はヒントと回答です
28
105
See all articles
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
HTMLは初心者のために簡単に学ぶことができますか？
Apr 07, 2025 am 12:11 AM
HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
ビューポートメタタグとは何ですか？レスポンシブデザインにとってなぜそれが重要なのですか？
Mar 20, 2025 pm 05:56 PM
この記事では、モバイルデバイスのレスポンシブWebデザインに不可欠なViewportメタタグについて説明します。適切な使用により、最適なコンテンツのスケーリングとユーザーの相互作用が保証され、誤用が設計とアクセシビリティの問題につながる可能性があることを説明しています。
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
この記事では、＆lt; iframe＆gt;外部コンテンツをWebページ、その一般的な用途、セキュリティリスク、およびオブジェクトタグやAPIなどの代替案に埋め込む際のタグの目的。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
HTMLでの開始タグの例は何ですか？
Apr 06, 2025 am 12:04 AM
Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。
<ol> <li>信息</li> <li>信息</li> ......</ol>
例:
以下は人気のコース ダウンロード ランキングです:
<ol> <li>前端开发面试心法 </li> <li>零基础学习html</li> <li>JavaScript全攻略</li></ol>
- Web ページに表示されるデフォルトのスタイルは通常、次のとおりです。
