HTMLの概要と構造

1. HTMLの概要

HTMLは次のいずれかの言語、HTMLは、ハイパーテキストのハイパーリンクを指し、タグはラベルを参照し、Webページを作成するために使用される言語であることを意味し、ハイパーテキストマークアップ言語速記の最初の文字でありますラベル組成、この言語に細工されたファイルの保存は、テキストファイル、ファイル拡張子HTMLまたはHTM、HTMLファイルは、Webページ、テキストの表示を開くには、エディタでhtmlファイルで、テキストエディットを使用することができますですそれはあなたがブラウザを開くと、ブラウザがウェブページの表示が別のページに1つのページのリンクからジャンプすることができ、Webページにレンダリングされたファイルの内容を記述したラベルに続く、です。

2. htmlの基本的な構造

次のように基本的な構造をHTML：

<!DOCTYPE html>
<html lang="en">
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          网页显示内容
    </body>
</html>

最初の行は、文書宣言、第二列、「」ラベルとの最後の行、「全体として定義するHTML文書」の言語である、LANG = 『EN』「」タブ「= LANG」英語で定義されたページは、中国のように定義されました「ZH-CN」」は、それは一般的に統計的な分析として使用され、何の定義には影響を与えません。ラベルは「」と「」ラベルは、ページヘッダの責任であり、その最初のレベルのサブ要素「」ラベルでフォーマット定義セットのページ、チェーンのCSSスタイルファイルやJavaScriptファイルのコーディングを含むいくつかの設定、設定を定義しますコンテンツがページ上に表示されていない、コンテンツのタイトルが内部「ページに表示されるコンテンツを書く」、タイトルバーに表示されます。

HTMLドキュメントタイプ

一般に使用される2つのドキュメントタイプ1.0 XHTMLで、HTML5
、XHTML 1.0
、XHTML 1.0は、現在、多くのウェブサイトはまだこのバージョンを使用して、HTML5の前に人気のバージョンです。
HTML：：XT +タブの文書作成方法崇高なテキストのこのバージョンの
ドキュメントの例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title> xhtml 1.0 文档类型 </title>
</head>
<body>

</body>
</html>

HTML5の
PC側が1.0をXHTMLすることができ、HTML5、HTML5を使用することができる下位互換性があり
崇高なテキストの作成方法と、ドキュメントのこのバージョンでは：HTML：！5 +タブまたは+タブ
文書の例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> html5文档类型 </title>
</head>
<body>

</body>
</html>

二つの文書の違い

ドキュメントのエンコーディング宣言とステートメント
HTML5は、タグ要素と要素の属性を追加しました

HTML注
HTMLドキュメントのコードは、コードの記述および説明されたコメントを挿入することができる、コメントの内容がページに表示されていない、HTMLコードを挿入コメント以下、ショートカットキーは/ CTRL +で

<!-- 这是一段注释  -->

htmlの一般的に使用されたタグ

1. HTMLのタイトルタグ

<H1>、<H2>、<H3>、<H4>、<H5>、<H6>により、ラベルの6種類のページレベルの見出しを定義することができます。ように<H1> <H2>続いてメインタイトルとして使用して、<H3>続いて、そして：見出しのレベルの6種類は、例えば、文書の6ディレクトリ階層です。検索エンジンは、インデックス付きページの構造と内容にタイトルを使用するので、タイトルを使用してページが非常に重要です。

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>

2. HTMLの段落タグ

<P>タグは、以下のように、段落間のピッチ間隔このデフォルトを使用する、テキストの段落、デフォルトの垂直方向の間隔を含む段落を定義します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>段落</title>
</head>
<body>
    <p>HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超
    文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的
    标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。
    </p>

    <p>一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方
    式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网
    页可以从一个网页链接跳转到另外一个网页。</p>
</body>
</html>

3. HTMLのブレークタグ

セグメントに文字コード、直接レンダリングされたウェブページ内のコードの改行に望んでいた場合はラップ、このラップを認識しない、改行コードを強制的に段落コード<brの/>に挿入することができ、次のようです

<p>
一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br />
文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br />
渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
</p>

4. HTML文字エンティティ

セグメントに文字コードの文字の間にスペースがより多くのスペースが必要な場合は、次のように、Webページにレンダリングされたコードでより多くの中空空間は、あなたが複数のスペースを表示したい場合は、あなたがスペース文字エンティティを使用することができ、空白が表示されます：

<!--  在段落前想缩进两个文字的空格，使用空格的字符实体：&nbsp;   -->
<p>
&nbsp;&nbsp;一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br />
文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br />
渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。</p>

ページに表示される「<」と「>」、ラベルに誤解される表示する「<」と「>」の文字エンティティはページ上の例えば、それらを使用することができます。

<!-- “<” 和 “>” 的字符实体为 &lt; 和 &gt;  -->
<p>
    3 &lt; 5 <br>
    10 &gt; 5
</p>

5. HTMLタグブロック

<div>タグブロック要素は、コンテンツを示す、特別な意味論は存在しません。
タグラインでの<span>要素、短い行の内容を示し、具体的な意味はありません。

スタイルを含む6 htmlタグ

<em>のタグライン内の要素、音色の強調のための単語
用語集を表すタグライン要素内の<I>
<B>タグライン内の要素は、キーワードまたは製品名を表します
タグライン内の<strong>要素、非常に重要な要素を表します

7. HTML意味タグ

セマンティックタグは、つまり、マルチユース意味タグのレイアウトは、検索エンジンは、ウェブサイトでそれらを含めるために、文書の構造を理解し、これらのラベルを認識するための時間をクロールするとき。たとえば：H1タグは見出し段落は、Pタグは、ULは、Liはラベルのリストである、ある、ラベルを示しているリンクA、DL、DT、DD定義リストなど、これ以上の意味タグ。

8. HTMLイメージタグ

<img>タグは、それが単独で使用されるラベルである、ウェブページ上の画像を挿入することができ、それが一般的に使用される属性は、次のとおりです。

src属性精細画像参照アドレス
alt属性の定義画像のロードに失敗したときに、検索エンジンはテキストを使用します表示されるテキストは、写真を含め、盲目の写真を認識するようにブラインドスクリーンリーダーソフトウェアは、テキストを読み込むので、このプロパティは非常に重要です。

<img src="images/pic.jpg" alt="产品图片" />

8. HTML絶対および相対パス

以下のような外部ファイルは、あなたは、ファイルアドレスへの参照を定義する外部ファイルには、絶対と相対アドレスに変換などの外部スタイルシート、JavaScriptや、参照アドレスへの参照が含まれて参照する必要がWebページ上の画像を挿入します。

絶対アドレス：ディスクへの相対ファイルのアドレスを検索します
相対アドレス：参照されたファイルのアドレス検索するための参照ファイル自体に対する
ので、ディスクの最上位ディレクトリの変更の絶対アドレスを、相対パスは、この問題は発生しません、ファイル全体の移行ファイルで見つけることができません。相対パスに定義ヒント：
カレントディレクトリのpic.jpg画像を表し、あなたはこの使用を省略することができます「./ pic.jpg」：「./」など、現在のファイルのディレクトリことを示しています。
「../」など、現在のファイルがディレクトリ内のディレクトリに配置されていることを示しています「../画像/ pic.jpgは」pic.jpg写真画像に、現在のディレクトリのフォルダの親ディレクトリ内のファイルを表し。

9. HTMLリンクタグ

<A>タグはそれが一般的に使われて、Webページ上のリンクアドレスを定義する属性は次のとおりです。

href属性は、ジャンプアドレスを定義します
マウスオーバーポップアップのタイトルを定義する場合、プロンプトテキストボックス属性
ターゲット属性定義ウィンドウのリンク開いた位置
- TARGET =「_自己」のデフォルト値は、元の開いた位置に、元のページに代わる新しいページ
- ターゲット=「_空白は、」新しいページが新しいブラウザウィンドウで開きます開きます
```
<a href="#"></a> 
<a href="http://www.baidu.com/" title="跳转到百度首页">百度</a>
<a href="2.html" target="_blank">测试页面2</a>
```

10. HTMLリスト

順序付きリスト

コンテンツリストのページ数で定義され、次のコードと組み合わせて使用<OL> <LI>を用いて実施することができます。

<ol>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ol>

ページのリストに生成された、実際の開発ではあまり使用の各項目順序付きリストに1,2,3番号を押します。

順序なしリスト

番号の付いていないコンテンツのリストがページ上に定義することができます。<UL>、<LI>次のように、使用して達成されます。

<ul>
    <li><a href="#">新闻标题一</a></li>
    <li><a href="#">新闻标题二</a></li>
    <li><a href="#">新闻标题三</a></li>
</ul>

小さいアイコンになり、各プロジェクトで、Webページのリストに生成された、小さなアイコンが異なるブラウザ上でさまざまな効果を示し、それは、一般的に、所望のアイコンならば、それはカスタムアイコンのスタイルを使用することができ、スタイルにデフォルトのアイコンを削除します同じブラウザ上で異なる表示を達成するように、そのようなリストの実際の開発は、一般的に使用されます。

定義リスト

多くの場合、用語の定義のリストを定義するために使用されます。<のDI>タグには、全体のリストを示します。<Dtと> Titleタグの定義された用語。<DD>タグは、用語の説明です。次のように<DL>は、複数のタイトルを持っていると解釈できます。

<dl>
    <dt>html</dt>
    <dd>负责页面的结构</dd>

    <dt>css</dt>
    <dd>负责页面的表现</dd>

    <dt>javascript</dt>
    <dd>负责页面的行为</dd>

</dl>

11.htmlフォーム

フォームは、ユーザ入力の種類を収集するために使用され、以下のように、ラベル、タグ、および関連する属性の異なるタイプからなる形態が使用されます。

タグはフォーム全体の面積<form>を定義する
アクションフォームのデータ属性は、アドレス定義
モード属性は、フォームの送信方法、一般的に「獲得」モードと「ポスト」モードを定義します
<ラベル>タグに定義されたテキストラベルのフォーム要素
<input>タグは、一般的な形式の要素を定義します

タイププロパティ
- タイプ=「テキスト」に定義された単一行のテキスト入力ボックス
- パスワード入力ボックスを定義するタイプ=「パスワード」
- タイプ=「ラジオ」に定義されたラジオボタン
- タイプ=「チェックボックス」チェックボックスが定義されています
- タイプ=「ファイル」のファイルをアップロードするために定義されています
- 定義を提出するタイプ=「送信」ボタン
- タイプは、=の定義をリセットするためのボタンを「リセット」
- 一般的なボタンを定義するタイプ=「ボタン」
- src属性精細画像アドレスと、送信ボタン絵のように定義される=「画像」と入力
- タイプ=「隠し」の値を格納するために使用される、隠しフォームフィールドを定義します
フォーム要素で定義された値属性
name属性は、データを送信するときに、この名前がキーの名前で、フォーム要素の名前を定義します

<テキストエリア>タグは複数行のテキスト入力ボックスを定義します
タグは要素がドロップダウンメニューを定義する<選択>
<オプション>タグ

フロントエンド開発の-htmlコア知識