【オリジナルチュートリアル】HTML_html/css_WEB-ITnoseを飲み込む

まず、angularJS コースは 3 つの主要なモジュールに分かれています:

HTML/CSS/JS の基礎、

angularJS の詳細な説明、

angualrJS のいくつかの実践的なフレームワークの説明。

その中で、最初のモジュールは、フロントエンド開発技術をある程度理解しているが、それに慣れていない子供たちを対象としており、このコースの性質上、HTML/CSS の基礎を学びます。と強調した。 2 番目に大きいモジュールは、フロントエンド テクノロジ HTML/CSS/JS をある程度理解し、Web ページを構築できる子供を対象としています。 3 番目の主要なモジュールは、コースの小さなイースターエッグ部分です。楽しみにしていてください。

このレッスンでは、HTML と CSS の基本を説明します。また、後で JS についても詳しく説明します。その結果、最終的には angularJS をよりよく学び、より高い給料を得ることができます。

それで、HTML とは何ですか? このレッスンでは、HTML の服をレイヤーごとに剥がして楽しんでいきます。

HTML はハイパーテキスト マークアップ言語 (HTML) であり、Web コンテンツを構造化し、意味と目的を与えるために使用できるコーディング言語です。

ブラウザにコンテンツの表示方法を指示します。 HTML は、コンテンツ (テキスト、画像、言語、ビデオなど) と「プレゼンテーション」(テキストが何色で表示されるかなど、コンテンツがどのように表示されるか) を分離します。

HTML は、事前定義された一連の要素を使用してコンテンツ フォームを識別します。 要素には、コンテンツを含めたり表現したりするための複数のタグが含まれています。タグは山かっこで表され、終了タグ (コンテンツの終わりを示すために使用) の前にスラッシュが付きます。例えば、例はいいですよ、これだけ申し上げました。

次の例は、HTML 段落要素を含む段落を示しています。とてもハンサムな ！ (これは段落です)94b3e26ee717c64999d7867364b1b4a3

このコンテンツを Web ブラウザで表示すると、次のように表示されます:

Le 先生はとてもハンサムです! (これは段落です)

ブラウザはマークアップを使用して、マークアップ内のコンテンツを表示する方法を示します。コンテンツを含む要素には、他の要素も含めることができます。たとえば、強調要素 (907fae80ddef53131f3292ee4f81644b) を段落要素で囲むことができます。 94b3e26ee717c64999d7867364b1b4a3

表示すると次のようになります:

Le先生はとてもハンサムです!

このとき、HTML はこのようにさまざまな山かっこタグで構成されているのかと質問する学生もいました。いいえ、それだけではありません。一般に、山かっこ内のコンテンツの前にあるスラッシュは、HTML ではオプションですが、XML モードの HTML 要素を含む XHTML では必須です。

上の例を見て、HTML 要素を解析してみましょう:

この要素の主な部分は次のとおりです:

開始タグ: これには要素の名前 (ここでは p ) が含まれ、 で囲まれています。開いた

閉じた

山括弧

。これは、要素が登場する場所、この場合は段落の先頭からであることを意味します。

終了タグ: 開始タグと似ていますが、要素名の前にスラッシュが含まれる点が異なります。これが要素の終わり、この場合は段落の終わりであることを示します。

コンテンツ: これは要素のコンテンツであり、この場合は入力されたテキスト自体です。
1. 要素: 開始タグ、終了タグ、コンテンツの組み合わせが完全な要素です。
2. 要素は、次のような Attribute 属性を持つことができます:
4. Attributes (属性) には、要素に関する追加情報が含まれますが、それ自体はコンテンツ (Content) に表示される必要はありません。この例では、要素に識別名を指定して要素をさらにスタイル設定したり、その他の操作を実行したりできる場合に、クラス タグが使用されます。

属性には以下を含める必要があります:

1. 属性と要素名または前の属性 (複数ある場合) の間のスペース
2. 等号が続く属性の名前
3. 引用符で囲まれた属性値

埋め込みネスト要素:

要素を他の要素の中に配置することができます。これはネストと呼ばれます。特に Le 先生がハンサムだと思う場合は、「true」を 55e45d9c29f179ad10ebfb64cd002473Le先生8e99a69fbe029cd4e2b854e244eab143とてもハンサム128dba7a3a77be0113eb0bea6ea0a5d0! 94b3e26ee717c64999d7867364b1b4a3

ネストについて注意すべき点が 1 つあります。もちろん、開始と終了のない (空の) 単一タグの場合は、要素が別のレイヤー内に正しくネストされていることを確認する必要があります。要素）、他人を罠にはめることはできず、他人によってのみ罠にかかることができます。

正しいネストを明確に示すには、要素が正しく開始および終了する必要があります。正しくネストされていない場合、ブラウザは表現したい内容を推測しようと最善を尽くしますが、期待した結果が得られない可能性が高いため、これは行わないでください。

空の要素:

空の要素は、上記の a1f02c36ba31691bcfe87b2722de723b の空の要素と同様に、コンテンツを含まないタグです。HTML コードの f6ec3c9aaf8fa94338982de265a5e780

この要素には 2 つの属性が含まれていますが、a376092e9406724d5c271fcc648ed25a の終了タグはなく、Any コンテンツもありません。これは、イメージ タグには有効なコンテンツが含まれておらず、その役割はその場所にイメージを埋め込むことであるためです。

HTML ドキュメントの解析

上でいくつかの基本的な HTML 要素を紹介しましたが、それらは個別には何の役割も果たしません。次に、それらを組み合わせて完全な HTML ページを形成する方法を見てみましょう。 Index.html ファイルを作成し、IDE で開き、その中に次の内容を書き込みます。 (index.html ファイルと同じディレクトリに image フォルダーを作成し、その中に hello.png という名前のファイルを置きます。 )

8b05045a5be5764f313ed5b9168a17e6100db36a723c770d327fc0aef2ce13b1

09477266eebbc8a01f42387ae29e71dd

9c3bca370b5104690d9ef395f2c5f8d1

6c04bd5ca3fcae76e30b72ad730ca86d 2f29a3e3e475cad1dbb5c7c2100c6fba


クリックしてブラウザで表示しますコードの一部を変更して効果を確認できます。これは、言語の学習にさらに役立ちます。今後のコースでも、コードを変更してプログラミング能力を向上させるコードを書き続けます。これは非常に効果的です。自分。

さて、ここにあります:

8b05045a5be5764f313ed5b9168a17e6 — ドキュメントタイプの説明 (doctypes)。 HTML の初期の頃 (1991/2 年頃)、Doctype 仕様は、リンクが特定のルールに従うように自動的にスペルチェックやその他の便利な操作を行うことにより、HTML ページを適切な HTML として動作させるために使用されました。しかし、現在では誰もそれらに注目せず、発展を続けるための歴史的遺物としてのみ機能しています。

100db36a723c770d327fc0aef2ce13b173a6ac4ed44ffec12cee46588e518a5e — この要素にはページ全体のコンテンツが含まれており、ルート要素と呼ばれることもあります。

93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 — この要素にはページに関連するすべての情報が含まれますが、ユーザーには表示されません。これには、検索エンジンで検索したいキーワードやページの説明、CSSのスタイルシートや文字エンコードの宣言などが含まれます。

6c04bd5ca3fcae76e30b72ad730ca86d36cc49f0c466276486e50c850b7e4956 — この要素には、テキスト、画像、ビデオ、ゲーム、再生可能なオーディオ トラックなど、ユーザーに表示するコンテンツが含まれます。

09477266eebbc8a01f42387ae29e71dd — この要素は、ドキュメントで使用する必要がある文字エンコーディング (UTF-8 など) を指定します。これには、人間に知られている多くの言語の文字が含まれます。基本的に UTF-8 はあらゆるテキスト コンテンツを処理できます。文字エンコーディングを設定しない理由はなく、将来発生する可能性のある問題を回避できます。

b2386ffb911b14667cb8f0f91ea547a76e916e0f7d1e588d4f442bf645aedb2f — この要素は、ページのタイトルを設定し、ブラウザーのタブに表示され、ページをお気に入りまたはお気に入りに追加するときにデフォルト名として使用されます。

画像:

画像要素に戻りましょう:

b80971337df13de1dba5403391dcbbaf 前に述べたように、これは埋め込まれています。これは、画像ファイルへのパスを含む src (source) 属性を通じて行われます。ただし、この芸術的要素には、alt (代替) 属性も含める必要があります。この属性は、画像が一部のユーザーに表示されない場合、次のような理由が考えられます。目が見えない、または視覚障害がある。重度の視覚障害を持つ一部のユーザーは、スクリーン リーダーを使用して alt 属性のコンテンツを読み上げることがよくあります。

コード内のいくつかのエラーにより、画像が表示されません。

alt属性のポイントは「画像を説明できるテキスト」です。 alt 内のコンテンツは、読まれたときにユーザーに十分な視覚的意味を伝える必要があります。したがって、上記の説明は実際には正確ではありません。ここでコードを変更して、画像に対してより適切な説明を提供します。ここで注意点があります。今後会社に行くと、この alt 属性をあまり書きたくないプログラマが多いかもしれません。ただし、これを書くのは良い習慣です。靴は忘れずに少しずつ積み重ねていくのが良い習慣です。

1. テキストのマークアップ
2. このセクションには、テキストをマークアップするための基本的な HTML 要素がいくつか含まれています。

Title

Title 要素を使用すると、コンテンツのタイトルとサブタイトルを指定できます。本にメインタイトルがあり、各章にタイトルがあり、さらに小さなタイトルがあるのと同じように、HTML ドキュメントにもタイトルがあります。 HTML には、 4a249f0d628e2318394fd9b75b4636b1 ～ 4e9ee319e0fa4abc21ff286eeb145ecc の 6 レベルの見出しが含まれていますが、多くても 3 ～ 4 つしか使用しないでしょう。

そうです

今すぐ試して、a1f02c36ba31691bcfe87b2722de723b 要素の上に適切なタイトルを追加してください。

段落

上で説明したように、e388a4556c0f65e1904146cc1a846bee 要素は段落を指定するために使用されます。これを使用して通常のテキスト コンテンツを指定できます:

<h1>My main title</h1><h2>My top level heading</h2><h3>My subheading</h3><h4>My sub-subheading</h4>

サンプル コンテンツ

を 1 つまたはいくつかの段落に追加し、a1f02c36ba31691bcfe87b2722de723b 要素の下に配置します。

リスト

Web 上の多くのコンテンツはリストであるため、HTML には特別なリスト要素がいくつかあります。マークされるリストには通常、少なくとも 2 つの要素が含まれます。最も一般的に使用されるリストの種類は、順序付きリストと順序なしリストです。

1. 无序列表 中项目的顺序并不重要，就像购物列表。这些内容被包括在一个 ff6d136ddc5fdfeffaf53ff6ee95f185 元素里。
2. 有序列表 中项目的顺序很重要，就像一个食谱。这些内容被包括在一个 c34106e0b4e09414b63b2ea253ff83d6 元素里。

列表内的每个项目被包括在一个 25edfb22a4f469ecb59f1190150159c6 (list item)元素里。

所以，如果我们像要将下面的段落碎片改成一个列表：

e388a4556c0f65e1904146cc1a846beeAt skylor , we’re a global community of technologists, thinkers, and builders working together ... 94b3e26ee717c64999d7867364b1b4a3

我们可以这样做：

e388a4556c0f65e1904146cc1a846beeAt skylor , we’re a global community of94b3e26ee717c64999d7867364b1b4a3

   
ff6d136ddc5fdfeffaf53ff6ee95f185 
  25edfb22a4f469ecb59f1190150159c6technologistsbed06894275b65c1ab86501b08a632eb
  25edfb22a4f469ecb59f1190150159c6thinkersbed06894275b65c1ab86501b08a632eb
  25edfb22a4f469ecb59f1190150159c6buildersbed06894275b65c1ab86501b08a632eb929d1f5ca49e04fdcb27f9465b944689

e388a4556c0f65e1904146cc1a846beeworking together ... 94b3e26ee717c64999d7867364b1b4a3

尝试添加一个有序列表和无序列表到你的示例页面。

链接

链接非常重要 — 它们让 Web 成为了 WEB（万维网）。要植入一个链接，我们需要使用一个简单的link — 3499910bf9dac5ae3c52d5ede7383485 — a 是 "anchor" （锚）的缩写。要将一些文本添加到链接中，只需如下几步：

1. 添加一些文本。我们选择“Mozilla Manifesto”。
2. 将文本包含在 3499910bf9dac5ae3c52d5ede7383485 元素内，就像这样：

   3499910bf9dac5ae3c52d5ede7383485 skylor 5db79b134e9f6b82c0b36e0489ee08ed

3. 赋予 3499910bf9dac5ae3c52d5ede7383485 元素一个 href 属性，就像这样：

   6170e8999ab19ec641e0422470b16d5c skylor o5db79b134e9f6b82c0b36e0489ee08ed

4. 把你想要链接的网址放到 href 属性内：

   <ahref="https://www.cnblog/skylor">skylor/a>

如果你在网址开始部分省略了  https:// 或者  http:// 协议，你可能会得到错误的结果。在完成一个链接后，点击它并确保它去向了你指定的网址。

当然上面列下了一些标记，还有很多部分标签没有列出来，这些都详细讲一遍的话不是本课程要干的事，学习angularjs初步掌握上面我说将的HTML的基础知识，后面见到新的标记我会再稍微讲解下，一句话，听懂上面这么多，你就具备学习angularJS 的HTML方面的知识。而我们知道，现在的各大网站上网页都是唯美唯美的。这些美美的网页通过上面这些，当然是不能做出来的，HTML是个架子，我们需要在架子上面放些装饰，做点动画，下面的课程我们会简单讲解下CSS艺术花园，以及JS的花样基础。学完这些，就可以开始我们的angularJS的正式课程了。谢谢您的观看，谢谢支持，下期见。