初心者のためのHTMLの基本。 初心者のためのHTMLとCSSの基本。 言語を無料で学ぶ方法
基本HTML これらは、HTML言語の基本的な規則、HTMLページの構造の説明、HTML要素間のHTML文書の構造内の関係です。
HTML文書は通常のテキスト文書で、通常のテキストエディタのように作成できます。 （ノート）そして専門の照明コードを備えた （メモ帳++、Visual Studioコードなど）。 HTMLドキュメントには拡張子.htmlがあります。
HTML文書は、HTML要素とテキストのツリーで構成されています。 各要素は、初期文書の初期（開く）と最終（閉鎖）タグ（まれな例外を持つ）で示されます。
スタートタグ 要素が始まる場所、最終 - それが終わる場所を示します。 閉じる タグの名前の前にスラッシュを追加することによって形成されます。<имя тега> … 。 初期タグと閉じるタグの間には、タグ内容の内容があります。
単一のタグはコンテンツを直接保存できない、それは属性値として規定されています。たとえば、タグなど テキストのボタンを作成します ボタン 内部。
タグは互いに投資することができます、例えば
テキスト
。 投資するとき、彼らの閉鎖の順序に従うべきです。 （「Matryshka」の原則）たとえば、次のエントリが正しくありません。テキスト
.HTML要素には属性（すべてのHTML要素に適していて、それら自身）があります。 属性はDiscovery要素タグに書き込まれ、属性名\u003d "value"の形式で指定された名前と値を含みます。 属性を使用すると、指定されている項目のプロパティと動作を変更できます。
各要素には、複数のクラス値と1つのID値だけを割り当てることができます。 複数のクラス値はスペースを介して記録されます。
ブラウザはHTML文書を閲覧（解釈）し、その構造（DOM）を構築し、このファイルに含まれる命令に従って表示する（スタイル、スクリプト）。 マークアップが正しい場合は、HTML要素を含むHTMLページがブラウザウィンドウに表示されます - ヘッドライン、テーブル、イメージなど。
解釈プロセス （解析） Webページがブラウザに完全にロードされる前に始まります。 ブラウザは、CSSを処理し、スタイルシートをページ要素と一緒に処理しながら、最初からHTML文書を順番に処理します。
HTML文書は2つのセクションで構成されています - タグ間
… そして意味のある部分 - タグ間 … .Webページの構造
1. HTML文書構造
HTML言語は、文書広告タイプの広告ファイルに含まれている規則に従います。 （文書型定義、またはDTD）。 DTDは、特定のHTMLタイプに対してどのタグ、属性およびそれらの値が有効であるかを決定するXMLドキュメントです。 HTMLのバージョンごとに独自のDTDがあります。
DOCTYPE。 Webページブラウザの正しい表示を担当します。 DocType HTMLバージョン（HTMLなど）だけでなく、インターネット上の対応するDTDファイルも定義します。
タグの内側にある要素 、いわゆる文書の木を形成する オペレーティングドキュメントモデル、DOM（ドキュメントオブジェクトモデル）。 同時に要素で それはルート要素です。
図。 1.最も簡単なWebページ構造 Webページ要素の相互作用を理解するためには、いわゆる検討が必要です 「関連関係」 要素の間に。 複数の入れ子要素の間の関係は、親、子会社、および看護に分けられます。
祖先 - 他の要素に入る要素。 図1、すべての要素の祖先です 。 同時に要素で
それに含まれているすべてのタグの先祖です。,
, ,
子孫 - 1種類以上の項目の内側にある要素。 例えば、
子孫です 、要素同時に子孫です
そして .親子 - 下位レベルの他の要素、およびそれらの上のツリーに関連付けられている要素。 図1。
そして 。 鬼ごっこ親のみです .
娘の要素 - 上位レベルの他の要素に直接従属する要素。 図1のみアイテムのみ
, ,
そして
看護要素 - 1レベルのいわゆる要素を持つ共通の親要素を持つ要素。 図1。
そして - 要素だけでなく1つのレベルの要素 , そして
彼ら自身の看護の中にいます。
1.1。 素子
1.2。 素子
セクション
... ページに関する技術情報が含まれています。タイトル、説明、検索エンジン用のキーワード、エンコードなど 入力された情報はブラウザウィンドウに表示されませんが、ブラウザがページの処理方法を示すデータが含まれています。1.2.1。 素子 </h4>
<p>義務的なタグのセクション <head> タグです <title> 。 このタグの内側にあるテキストは、Webブラウザのタイトルバーに表示されます。 ヘッダーの長さは、タイトルに完全にフィットするには60文字以下になる必要があります。 ヘッダーテキストには、Webページの内容の最も完全な説明が含まれている必要があります。</p>
<h4>1.2.2。 素子 <meta></h4>
<p>任意の断面タグ <head> 同じタグです <meta> 。 これにより、HTML文書の作成者、HTML文書の作成者、およびメタデータのその他のプロパティのページの内容とキーワードの説明を設定できます。 素子 <head> いくつかの要素を含めることができます <meta> 使用される属性によっては、さまざまな情報があります。</p><p>
<meta name="description" content="ページコンテンツの説明">
<meta name="keywords" content="カンマを通るキーワード">
</p><p>ページとキーワードのコンテンツ記述は、例えばロシア語と英語で、複数の言語で同時に示されています。</p><p>
<meta name="description" lang="ru" content="ページコンテンツの説明">
<meta name="description" lang="en" content="説明。">
<meta name="keywords" lang="ru" content="カンマを通るキーワード">
<meta name="keywords" lang="en" content="キーワード">
</p><p>タグを使う <meta> 検索エンジンによるWebページのインデックスを禁止または許可することができます。</p>
<p>
<meta name="robots" content="index, follow">
</p><p>
<meta name="robots" content="index, nofollow">
</p><p>
<meta name="robots" content="noindex, nofollow">
</p><p>指定された期間にページを自動的に再起動するには、更新値を使用する必要があります。</p><p>
<meta content="30">
</p><p>ページは30秒後に再起動されます。 訪問者を別のページに転送するには、URLパラメータにURLを指定する必要があります。</p><p>
<meta content="0; url=http://yandex.ru/">
</p><table class="t3"> 表2.タグ属性 <meta>
<tbody><tr><th style="width: 20%;">属性</th>
<th></th>
</tr><tr><td> 文字コード。</td>
<td>現在のHTML文書の文字のエンコードを指定します。 <meta charset="UTF-8">
</td>
</tr><tr><td> コンテンツ</td>
<td>値に応じて、http-equivまたはname属性に関連付けられている値を決定する任意のテキストが含まれています。</td>
</tr><tr><td> http-qq.</td>
<td>このWebページ上のブラウザのアクションを制御します（HTTPヘッダーと同等）。 ページを表示するとき、ブラウザは属性で指定された指示に従います。 <br> default-styleページで使用する優先スタイルを指定します。 content属性には、要素識別子を含める必要があります <link> これはCSSスタイルテーブル、または要素識別子を参照します<style> , содержащего таблицу стилей.<br>
refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы" .<br>
Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд:<br>
<meta content="30"> <br>
Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url:<br>
<meta content="0; url=http://mail.ru/">
</td>
</tr><tr><td> name
</td>
<td>Ассоциируется со значением, содержащемся в атрибуте content . Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv , charset или itemprop .<br>
application-name указывает название веб-приложения, используемого на странице.<br>
author указывает имя автора документа в свободном формате.<br>
description определяет краткое описание к содержимому страницы, например:<br>
<meta name="description" content="Описание содержимого страницы"> <br>
generator указывает один из пакетов программного обеспечения, используемого для создания документа, например:<br>
<meta name="generator" content="WordPress 4.0"> .<br>
keywords содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например:<br>
<meta name="keywords" content="Ключевые слова через запятую"> .<br><i>Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator , googlebot , publisher , robots , slurp , viewport , хотя ни одно из них еще не было официально принято.
</i>
</td>
</tr></tbody></table><h4>1.2.3. Элемент <style></h4>
<p>Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.</p>
<p>Внутрь этого элемента можно записывать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.</p><p>
<style type="text/css">
.paper {
width: 200px;
height: 300px;
background-color: #ef4444;
color: #666666;
}
</p><p>Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:</p><p>
<div class="paper">
...
</div>
</p><p>CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style , например:</p><p>
<h4>1.2.4. Элемент <link></h4>
<p>Задать стили для документа можно также при помощи другого способа - записать их в отдельный файл с расширением.css , например, style.css .</p>
<p>Подключить файл со стилями к веб-странице можно двумя способами:<br>через
директиву @import url</p><p>
<!DOCTYPE html>
<html>
<head>
<style>
@import url(style.css);
</style>
<meta>
<title>
要素を使う 。 要素は閉じるタグを必要としません。 この要素は、現在のページと他の文書の関係を決定します。 ページ上にいくつかの要素があるかもしれません。 レコードには次の形式があります。
| 属性 | description |
|---|---|
| クロスフォリジン。 | サイトから画像を抽出するときに、CORを使用するかどうかを指定します（他のドメインリソースへのWebページアクセスを可能にするブラウザテクノロジ）。 匿名 - クロスドメインクエリでは、ブラウザは要求が実行されるドメイン名を含む原点ヘッダーを自動的に追加します。 サーバーがAccess-Control-Allow-Origin：*（または星の代わりにドメイン名）に応答しない場合、画像負荷がブロックされます。 use-credentials - アクセス制御許可証を使用してサーバーが認証情報を提供しない場合：true、その後、画像負荷がブロックされます。 |
| href。 | タグのmain属性は、値として、スタイルを持つファイルへのパスです。 |
| hreflang。 | リンクがある文書内のテキストの言語を指定します。 |
| メディア | 参照リソースを適用する必要があるデバイスの種類を定義します。 |
| non | RANDING変数はサーバー上でランダムに生成され、これは内容を保護するために埋め込みスタイルを使用するための規則を設定します。 属性値 - テキスト文字列。 |
| rel。 | 属性は、現在の文書と参照がそうである文書の関係を決定します。 代替 - 同じ文書へのリンク（たとえば、印刷ページ、翻訳、ミラー、RSSまたはAtom形式のリボン）のようにリンクします。 . アーカイブ - リンク上の文書が歴史的な関心を表すことを示します。 リンクは、レコード、文書、その他の材料の集まりを示すことがあります。 作成者の作者についてのページへのリンクまたは作者の連絡先の詳細を含むページへのリンク。 先祖がない場合は、リンクである記事の最も近い祖先でのBookmark Reference、または要素に最も密接に関連しています。 外部は、リンクがこのサイトの一部ではないページがあることを示すために使用されます。 最初に、文書シーケンスから最初の文書につながるリンクを指定します。 証明書を含む文書への参照を参照してください。 アイコン現在のドキュメントに使用されるアイコンへのパスを定義します。 最後に、ドキュメントのシーケンス内の最後の文書につながるリンクを指定します。 ドキュメントの著作権情報へのライセンス参照。 次に、この文書がシリーズの一部であり、このシリーズの次の文書をもたらすことを示しています。 nofollowは、リンクがページの作成者によって承認されていないこと、またはリンクがコマーシャルであることを示します。 NOREFERRERは、リクエストソースのURLを含むクライアント要求ヘッダがリンク中に送信されてはならないことを示します。 PingBack Pingback Serverアドレスを指定します。これにより、ブログがそれにリンクしているサイトに自動的に通知することができます。 プリフェッチは、ファイルがリンクがリードされるように事前に保持されるべきであることを示します。 PREVこの文書がシリーズの一部であること、およびこのシリーズのリンクが前の文書につながることを示します。 検索参照文書に検索インターフェースと関連リソースが含まれていることを示します。 サイドバーは、可能であれば参照文書がブラウザの追加のコンテキストに表示され、ハイパーリンクをクリックするとウィンドウを開いてブックマークパネルへのリンクを追加します。 この文書のスタイルシートとして使用される外部ファイルへのスタイルシートのリンク。 タグハイパーリンクがこのドキュメントにつながるラベルがあることを示します。 アップは、ページが階層構造の一部であり、ハイパーリンクが構造内のより高いレベルのリソースをもたらすことを示します。 |
| サイズ | ビジュアルディスプレイのアイコンのサイズを指定します。 sizes属性はREL \u003d "ICON"でのみ使用され、次の意味を実行できます。 幅は高さです。スペースで区切られたサイズのリストを定義します。各サイズは形式でなければなりません - 高さの幅（アイコンの寸法はピクセル単位で設定されています）。 ; どんなアイコンでも任意のサイズに拡張できます。 |
| 題名 | リンクのタイトルまたは代替スタイルテーブルのセットの名前を指定します。 属性値 - テキスト。 |
| タイプ | リンクがある文書のMIMEタイプを指定します。 この場合、値「text / css」が必要です。 |
