no-image

Day1 HTMLスターターノート


英語のHTMLのフルネームは、ウェブページのハイパーテキストマークアップ言語であるハイパーテキストマークアップ言語です。 HTMLはプログラミング言語ではなく記述的なマークアップ言語です。 これは、グローバルワイドエリアネットワーク上のWebページのコンテンツと外観を記述するための標準でもあります。

マークアップ言語として、ブラウザ自体に表示することはできません。 主にハイパーテキストのコンテンツ表示を記述するために使用されます。

HTMLの基本構造

完全なHTMLファイルには、タイトル、段落、リスト、表、およびさまざまな埋め込みオブジェクトが含まれます。これらのオブジェクトはまとめてHTML要素と呼ばれます。
HTMLファイルの基本的な構造は次のとおりです。

<html>ファイル開始タグ

<head>ヘッダーのヘッダータグ
…ファイルヘッダの内容

</ head>

<body>タグの本文が開始されます。

…文書本体の内容

</ body>ファイルbodyタグの終わり

</ html>ファイル終了タグ

htmlファイルでは、すべてのタグがペアで表示され、すべてが対応しています。開始タグは<>、終了タグは</>です。

メモ帳、メモ帳++、Dreamweaver、崇高なテキストなどを使用して、HTMLファイルを書き込む多くの方法があります。 これらはHTMLファイルを書くことができるツールです。

HTMLの基本的なマークアップ

完全なHTML文書は、<html>要素で定義された文書バージョン情報、<head>宣言で定義された文書ヘッダ、および<body>で定義された文書本文部分の3つの部分で構成されていなければなりません。 <head>はドキュメントの先頭にあるさまざまな宣言の要素として表示され、<body>の前に表示されます。 <body>は、文書の主な内容を表示するために使用されます。

HTMLヘッダーヘッド

HTML言語のhead要素には、タイトル、基本情報、メタ情報などが含まれている必要があります。 HTML
head要素は開始タグとして<head>と終了タグとして</ head>でマークされます。

意味:<head>要素のスコープはドキュメント全体です。 <head>要素は、<meta>メタ情報定義、ドキュメントスタイルシート定義、スクリプトを持つことがあり、HTML言語の先頭に定義されたコンテンツはWebページに直接表示されないことがよくあります。

文法形式:

<head> …… </ head>

HTMLタイトルタグのタイトル

HTMLページのタイトルは、一般にページの目的を示すために使用され、ブラウザのタイトルバーに表示されます。 HTML文書では、ヘッダー情報は<head>と</ head>の間に設定されます。 タイトルタグは<title>で始まり、</ title>で終わります。

文法形式:

<title> …… </ title>

HTMLメタタグメタ

meta要素によって提供される情報は、ページには表示されません。一般に、ページ情報、キーワード、リフレッシュなどの説明を定義するために使用されます。

HTMLでは、メタタグは終了タグを設定する必要はありません。単一の山括弧の中にメタコンテンツがあります。 HTMLページには複数のメタ要素が存在する可能性があります。

meta要素の属性はnameとhttpequivで、name属性は主に検索エンジンが検索して分類するWebページを記述するために使用されます。

ページキーワードを設定する

ページにキーワードを設定するという観点から、検索エンジン、検索情報はキーワードを入力することで実現します。

キーワードはウェブページでも非常に重要であり、ウェブサイトのログインプロセス全体の中で最も基本的で重要な部分であり、ウェブページの最適化の基礎でもあります。

ウェブページの閲覧中にキーワードを表示することはできず、検索エンジンの使用方法を提供するだけです。

文法形式:

<meta name = "keywords" content = "特定のキーワードを入力してください">

ページ記述の質問を設定する、編集ツールを定義する、著者の情報を設定する、単にメタステートメントで変更する。

文法形式:

<meta name = "description" content = "設定ページの説明">
<meta name = "generator" content = "ソフトウェア名の編集">
<meta name = "author" content = "著者名を入力">

ウェブページのテキストと言語を設定する

Webページでは、ブラウザが言語を正しく選択できるように、言語エンコーディングを設定する必要があります。 言語を手動で選択する必要はありません。

文法形式:

<meta http-equiv = "content-type" content = "text / html; charset = charset type" />

Http-equivは、HTTP通信プロトコルのヘッダを送信するために使用され、コンテンツ内の特定の属性値である。 Charsetは、Webページの内部コード言語、つまり文字セットのタイプを設定するために使用されます。一般的なものはGBコードで、charsetはgb2312(簡体字中国語)に設定されることがよくあります。 英語はISO-8859-1文字セットであり、その他の文字セットがあります。

ウェブページのタイミングジャンプを設定する

Webページの自動更新を実現するために、<meta>に定期的にジャンプを設定します。 これは、http-equivを更新するように設定することで実行できます。 コンテンツの属性値は、設定された時間である。

文法形式:

<meta http-equiv = "refresh" content = "ジャンプ時間; URL =ジャンプアドレス">

ジャンプ時間は主に秒単位です。

Webページの件名タグ本体

Webページの件名セクションには、処理されたすべての情報がブラウザに表示されます。 多くの属性は、Webページの件名セクションで設定することもできます。

(a)、ウェブページの背景色bgcolor

ウェブページの背景では、ほとんどのブラウザはデフォルトの白または灰色です。

文法形式:

<body bgcolor = "background color">

ここでの背景色は、名前付きカラーまたは16進数のカラー値です。

(b)ウェブページの背景画像の背景

文法形式:

<body background = "イメージアドレス">

画像のアドレスは、相対アドレスまたは絶対アドレスとすることができる。

(c)テキストカラーテキスト

テキストタグを使用してテキストの色を設定します。

文法形式:

<body text = "text color">

テキスト色の属性値は、設定されたページの背景色と同じです。

(d)、リンクテキスト属性リンク

Webページの重要かつ基本的な要素の1つは、ハイパーリンクです。 ウェブサイトの各ページは、ハイパーリンクによってリンクされています。

デフォルトでは、ブラウザはハイパーリンクテキストの色として青を使用し、訪問先のテキストは暗赤色に変わります。 linkパラメータを使用して、リンクテキストの色を変更することができます。

文法形式:

<body link = "color">

a。アクセスするテキストの色を設定するには、alinkを使用します。
b。訪問後にリンクテキストの色を設定するには、vlinkを使用します。

(5)、余白

マージンは、ウェブページ内のページとブラウザとの間の距離のために設定される。

文法形式:

<body topmargin =上余白の値leftmargin =左余白の値>

既定では、余白の値はピクセル単位です。

一般的なウェブサイトのページの左右のマージンは0に設定されているため、ページに余裕がないようです。

Webページの注釈の問題

コメントは、HTMLコードに挿入された記述テキストで、コードを解釈したり他の情報の入力を促したりします。 コメントはコード内にのみ表示され、ブラウザのページには表示されません。

役割:

設計者は、後続のコードの変更と保守作業を行うのに役立ちます。 また、デザイナーが以前に書かれたコンテンツをすばやく読み込むことも便利です。

文法形式:

<! – コメントの内容 – >

ネストされたコメントがある場合、2つのマーカの終わりの間のファイルが表示されます。

テキストと段落記号

タイトルワード
HTML文書は様々なレベルのタイトルを含み、様々なレベルのタイトルは<h2>〜<h6>要素によって定義される。 <h2>は最高レベルのタイトルで、<h6>は最低レベルです。

タイトルの単語の整列

デフォルトでは、見出しテキストは左詰めです。 もちろん、Webページの効果に合わせて異なるアラインメントがあります。

文法形式:

<align = align>

アライメントには3つのフォーマットがあります:

|属性値| |意味|
左| |左揃え|
右| |右揃え|
|センター||センターアライメント|

テキストの基本的な印

<font>タグは、フォント、フォントサイズ、色などの属性を制御するために使用され、HTMLの最も基本的なタグの1つです。

(a)フォント属性面

フォントのface属性は異なるフォントを設定し、設定されたフォントエフェクトは、対応するフォントを閲覧する前にブラウザにインストールする必要があります。

文法形式:

<font face = "Font Style">テキストコンテンツ</ font>

(b)サイズ属性サイズ
テキストの属性は、フォントの重要な属性の1つです。 <font>タグのsize属性は、見出しテキストタグが固定サイズのフォントサイズに設定されていることを除いて、通常のテキストのフォントサイズを設定するために使用されます。

文法形式:

<font size = "text size">文字のコンテンツ</ font>

sizeプロパティを設定するときには絶対と相対の2種類のプロパティがあります。 フォントサイズの絶対サイズを表す1〜7の整数。 -4から+4まで、フォントは3番目に比べて拡大され、縮小されます。

注:<font>タグとその属性は、周囲のテキストに影響を与える可能性があります。このタグは、テキストの文章、文章、単語、または単一の文字に適用できます。

(c)色属性色

文法形式:

<font color = "font color">文字のコンテンツ</ font>

color属性は、テキストの色を定義するために使用され、フォントのさまざまなスタイルを定義するために<font>要素の他の属性と組み合わせることができます。

テキストフォーマットのマークアップ

(A)、太字b、強

<b>と<strong>はHTMLの太字の書式設定の最も基本的な要素です。 <b>と</ b>の間のテキストまたは<strong>と</ strong>の間のテキストは、ブラウザで太字で表示されます。 要素の最初と最後の部分が必要です。終了タグがない場合、ブラウザは<b>から始まるすべてのテキストが太字であると考えます。

文法形式:

<b>テキストコンテンツ</ b>
<strong>テキストのコンテンツ</ strong>

<b>と<strong>は、テキストの任意の部分に挿入できるインライン要素です。

コード例:

<p> <b>テキストコンテンツ</ b> </ p>
<p> <strong>テキストのコンテンツ</ strong> </ p>

(b)、イタリック体のマークi、em、cite

<i>、<em>、および<cite>は、HTMLのイタリック体の書式設定の最も基本的な要素です。 <i>と</ i>の間のテキスト、<em>と</ em>の間のテキスト、<cite>と</ cite>の間のテキストは、ブラウザでイタリック体になります。ディスプレイ。

文法形式:

<i>イタリック体</ i>
<em>イタリック体のテキスト</ em>
<cite> Italic Text </ cite>

コード例:

<p>これは私の<em>スタジオ</ em> </ p>

(c)上付き文字マーク

以前はスーパースクリプトと呼ばれていた上付き文字フォント<sup>は、さまざまな数式、日常的なコンピューティングアプリケーション、ブックコメンタリー、さらにはいくつかの外国語スクリプトでも広く使用されていました。
<sup>要素はインライン要素でもあり、テキストの任意の場所にペアで表示され、ネストすることができます。 したがって、<sup>が<sup>で使用されている場合、 "superscript superscript"になります。

文法形式:

<sup>スーパースクリプト</ sup>

例えば:

(a + b)<sup> 2 </ sup> 2 <sup> 2 <sup> 2 <sup> + 2ab

(D)添え字サブ

添え字フォント<sub>はもともと添字と呼ばれていますが、さまざまな数式や化学式では、添え字フォントには幅広いアプリケーションがあります。
<sub>要素は、テキストの任意の場所にペアで表示できるインライン要素であり、複数の<sub>要素を同じテキストの段落に適用できます。
<sub>要素で<sub>を引き続き使用すると、適用されるテキストは「subscript subscript」になります。

文法形式:

<sub>サブスクリプトのコンテンツ<sub>

例えば:

H 2 Oの化学式における水

(5)大型および小型の小型サインの大型サイン

文法形式:

<big>大容量のコンテンツ</ big>大容量のタグ

<小>小型コンテンツ</ small>小文字iマーク

(6)uに下線を引く
<u>タグの使用方法は、太字とイタリックのタグに似ています。 主にテキストに下線を付ける必要があります。 文法は基本的に太字とイタリックと同じです。

段落記号p

文法形式:

<p>段落</ p>

段落マーカーには終了マーカーを付けることはできません。</ p>新しい段落マーカーはそれぞれ、前の段落の終わりで始まります。

改行記号brと改行記号nobr

改行タグの目的は、現在のテキストを2番目の段落なしで折り返すように強制することです。 <br>タグは改行を表し、複数のタグは連続して複数の改行を実装できます。

<br>テキストを分岐する唯一の方法。 <p>のような他のタグはテキストセグメントにすることができます。

nobrのラインマークはありません

文法形式:

<nobr>折り返しなし<nobr>

水平線

水平線hrを挿入する

水平線の役割はスプリットホライズンの役割を果たすことであり、ブラウザにラインを表示します。

水平線には、幅、高さなどの属性値もあります。

幅の幅

文法形式:

<hr width = "width">

水平線の幅は、決定されたピクセル値またはウィンドウのパーセンテージとすることができる。

高さのサイズ

文法形式:

<hr size = "height">

水平線の高さは、ピクセル値でなければなりません。

シャドウノシェードを削除

文法形式:

<hr noshade>

このプロパティが<hr>要素に書き込まれている場合、ブラウザはソリッドシェイプの水平線を表示しませんが、それ以外の場合はプロパティを設定する必要はありません。ブラウザはデフォルトで3次元図形を表示します。影付きの水平線。

水平線の色

文法形式:

<hr color = "Color">

ここのカラーコードは16進数の値です。

水平方向の位置合わせ

水平線は、デフォルトで中央に配置されています。水平線を左揃えまたは右揃えにするには、整列を設定する必要があります。

文法形式:

<hr align = "Alignment">

centerにはcenter、left、rightの3種類のアラインメントがあり、centerはデフォルトと同じ効果があります。

その他のタグ

中国語、英語などの言語を入力するほかに、¥、$、#などのスペースや特殊文字を入力することもできます。

スペースを挿入する:

文法形式:

&nbsp

ページには複数のスペースがありますが、1つは半角スペースを表し、複数のスペースはこのシンボルを複数回使用できます。

Webページの画像の問題

(a)画像ソースファイルsrc
src属性は、画像ファイルが置かれているパスに使用され、画像の不可欠な属性です。

文法形式:

<img src = "イメージファイルのアドレス">

srcパラメータは、イメージソースファイルが置かれているパスを設定するために使用されます。このパスは、相対パスまたは絶対パスです。

イメージのアドレスは、ファイルとhttp://キーワードをイメージのアドレスとして使用でき、イメージをWebページにロードするために使用できます。

(B)プロンプトテキストの画像alt

プロンプトテキストペアの役割は、イメージを説明することです。

このような状況は、多くの人々にはよく知られていると考えられています。 イメージの上にマウスを置くだけで、説明的なテキストが表示されます。これは、altタグを使用して実現されます。

文法形式:

<img src = "イメージファイルのアドレス" alt = "tip of text">

プロンプトのテキスト内容は中国語または英語のいずれかであり、言語形式は指定されていません。

(c)画像幅の幅と高さ

<img>要素が高さと幅を定義していない場合、画像は元のサイズに従って表示されます。

文法形式:

<img src = "イメージファイルのアドレス" width = "イメージの幅" height = "image height">

画像の幅と高さの単位はピクセルです。

(d)画像境界の境界

既定では、イメージには罫線がありません。borderプロパティを使用すると、イメージに罫線を追加できます。 ボーダーの幅を設定できますが、ボーダーの色は設定できません。
イメージにリンクが追加されていない場合、境界線の色は黒です。リンクがイメージに追加されると、境界線の色はリンクのテキスト色と同じになります。デフォルトは濃い青です。

文法形式:

<img src = "イメージファイルのアドレス" border = "イメージの境界線の幅">

境界の幅の単位はピクセルで、値が大きいほど境界が広くなります。

(5)画像の垂直マージンvspace

垂直マージンvspaceは、イメージとテキストの間の垂直マージンを調整するために使用されます。

文法形式:

<img src = "イメージファイルのアドレス" vspace = "vertical margin">

垂直マージンvspace属性の単位はピクセルです。

(6)画像hspaceの水平方向の間隔

イメージとテキストの水平距離は、hspaceパラメータで調整することができます。

文法形式:

<img src = "イメージファイルのアドレス" hspace = "horizo​​ntal margin">

水平マージンhspace属性はピクセル単位です。

(7)画像の配置

イメージとテキストの位置合わせは、align属性によって設定されます。alignには、絶対配置と相対配置の2つの配置があります。
絶対配置はテキストと同じ効果を持ち、中、左、右の3種類しかありません。
相対的な位置合わせとは、画像の1行のテキストに対する相対的な位置を指します。

文法形式:

<img src = "イメージファイルのアドレス" align = "text alignment">

属性の説明
ボトム———-画像の一番下が現在のラインの一番下に位置する
トップ————画像の上端が現在の行の上端と揃っている
Middle ———シートの水平中心線と現在の線の中心線の位置合わせ
左———–画像が左揃えになります。
Center ———-シートの水平中心線が現在の線の中心線に揃えられている
右———–画像が右揃えされている

イメージハイパーリンク

テキストへのハイパーリンクの追加に加えて、画像もハイパーリンクすることができます。

同じイメージの異なる部分を別のドキュメントにリンクすることもできます。これはホットゾーンリンクです。

画像のリンクはテキストのリンク方法と同じですが、すべて<a>タグを使用して行います。<a>と</a>の間に<img>タグを置きます。

文法形式:

<a href="link address"> <img src = "イメージファイルのアドレス"> </a>

hrefパラメータは、画像のリンクアドレスを設定するために使用されます。

<a>タグを使用すると、画像リンクとテキストリンクは同じです。
電子メールリンクを作成するには、電子メールアドレスの先頭にmailto://を追加する必要があります。
HTTPサイトにリンクするには、URLの前にhttp://プロトコルを使用する必要があります。

画像ホットゾーンリンク

HTMLでは、画像を複数のホットスポットに分割することができます。各ホットスポットチェーンは異なるWebページにリンクされています。

文法形式:

<img src = "イメージアドレス" usemap = "イメージイメージ名">

まず、画像ファイルに画像名を設定する必要があります。画像プロパティの<usemap>タグを使用して、参照する画像の名前を追加します。

ホットゾーンイメージとホットゾーンリンクのプロパティを定義する必要があるのは、次のとおりです。

文法形式:

<マップ名= "イメージイメージ名">
<エリア形状>ホットゾーン形状 "coords ="ホットゾーン座標 "href ="リンクアドレス ">
</ map>

以上は、中国の翻訳ツールで翻訳した中国の技術記事です

関連記事