まず、angularJS コースは 3 つの主要なモジュールに分かれています:
その中で、最初のモジュールは、フロントエンド開発技術をある程度理解しているが、それに慣れていない子供たちを対象としており、このコースの性質上、HTML/CSS の基礎を学びます。と強調した。 2 番目に大きいモジュールは、フロントエンド テクノロジ HTML/CSS/JS をある程度理解し、Web ページを構築できる子供を対象としています。 3 番目の主要なモジュールは、コースの小さなイースターエッグ部分です。楽しみにしていてください。
このレッスンでは、HTML と CSS の基本を説明します。また、後で JS についても詳しく説明します。その結果、最終的には angularJS をよりよく学び、より高い給料を得ることができます。
それで、HTML とは何ですか? このレッスンでは、HTML の服をレイヤーごとに剥がして楽しんでいきます。
HTML はハイパーテキスト マークアップ言語 (HTML) であり、Web コンテンツを構造化し、意味と目的を与えるために使用できるコーディング言語です。
ブラウザにコンテンツの表示方法を指示します。 HTML は、コンテンツ (テキスト、画像、言語、ビデオなど) と「プレゼンテーション」(テキストが何色で表示されるかなど、コンテンツがどのように表示されるか) を分離します。
HTML は、事前定義された一連の要素を使用してコンテンツ フォームを識別します。 要素には、コンテンツを含めたり表現したりするための複数のタグが含まれています。タグは山かっこで表され、終了タグ (コンテンツの終わりを示すために使用) の前にスラッシュが付きます。例えば、例はいいですよ、これだけ申し上げました。
次の例は、HTML 段落要素を含む段落を示しています。とてもハンサムな ！ (これは段落です)
このコンテンツを Web ブラウザで表示すると、次のように表示されます:
Le 先生はとてもハンサムです! (これは段落です)
ブラウザはマークアップを使用して、マークアップ内のコンテンツを表示する方法を示します。コンテンツを含む要素には、他の要素も含めることができます。たとえば、強調要素 () を段落要素で囲むことができます。
表示すると次のようになります:
Le先生はとてもハンサムです!
このとき、HTML はこのようにさまざまな山かっこタグで構成されているのかと質問する学生もいました。いいえ、それだけではありません。一般に、山かっこ内のコンテンツの前にあるスラッシュは、HTML ではオプションですが、XML モードの HTML 要素を含む XHTML では必須です。
上の例を見て、HTML 要素を解析してみましょう:
この要素の主な部分は次のとおりです:
開始タグ: これには要素の名前 (ここでは p ) が含まれ、 で囲まれています。開いた
閉じた山括弧
。これは、要素が登場する場所、この場合は段落の先頭からであることを意味します。
終了タグ: 開始タグと似ていますが、要素名の前にスラッシュが含まれる点が異なります。これが要素の終わり、この場合は段落の終わりであることを示します。
埋め込みネスト要素:
要素を他の要素の中に配置することができます。これはネストと呼ばれます。特に Le 先生がハンサムだと思う場合は、「true」を 要素で囲むことができます。これは、この単語が特に強調されることを意味します。
Le先生とてもハンサム!
ネストについて注意すべき点が 1 つあります。もちろん、開始と終了のない (空の) 単一タグの場合は、要素が別のレイヤー内に正しくネストされていることを確認する必要があります。要素）、他人を罠にはめることはできず、他人によってのみ罠にかかることができます。
正しいネストを明確に示すには、要素が正しく開始および終了する必要があります。正しくネストされていない場合、ブラウザは表現したい内容を推測しようと最善を尽くしますが、期待した結果が得られない可能性が高いため、これは行わないでください。
空の要素:
空の要素は、上記の の空の要素と同様に、コンテンツを含まないタグです。HTML コードの
この要素には 2 つの属性が含まれていますが、 の終了タグはなく、Any コンテンツもありません。これは、イメージ タグには有効なコンテンツが含まれておらず、その役割はその場所にイメージを埋め込むことであるためです。
HTML ドキュメントの解析
上でいくつかの基本的な HTML 要素を紹介しましたが、それらは個別には何の役割も果たしません。次に、それらを組み合わせて完全な HTML ページを形成する方法を見てみましょう。 Index.html ファイルを作成し、IDE で開き、その中に次の内容を書き込みます。 (index.html ファイルと同じディレクトリに image フォルダーを作成し、その中に hello.png という名前のファイルを置きます。 )
さて、ここにあります:
画像:
画像要素に戻りましょう:
コード内のいくつかのエラーにより、画像が表示されません。
alt属性のポイントは「画像を説明できるテキスト」です。 alt 内のコンテンツは、読まれたときにユーザーに十分な視覚的意味を伝える必要があります。したがって、上記の説明は実際には正確ではありません。ここでコードを変更して、画像に対してより適切な説明を提供します。ここで注意点があります。今後会社に行くと、この alt 属性をあまり書きたくないプログラマが多いかもしれません。ただし、これを書くのは良い習慣です。靴は忘れずに少しずつ積み重ねていくのが良い習慣です。
Title 要素を使用すると、コンテンツのタイトルとサブタイトルを指定できます。本にメインタイトルがあり、各章にタイトルがあり、さらに小さなタイトルがあるのと同じように、HTML ドキュメントにもタイトルがあります。 HTML には、
今すぐ試して、 要素の上に適切なタイトルを追加してください。
上で説明したように、
要素は段落を指定するために使用されます。これを使用して通常のテキスト コンテンツを指定できます:
<h1>My main title</h1><h2>My top level heading</h2><h3>My subheading</h3><h4>My sub-subheading</h4>
サンプル コンテンツ
を 1 つまたはいくつかの段落に追加し、 要素の下に配置します。
Web 上の多くのコンテンツはリストであるため、HTML には特別なリスト要素がいくつかあります。マークされるリストには通常、少なくとも 2 つの要素が含まれます。最も一般的に使用されるリストの種類は、順序付きリストと順序なしリストです。
列表内的每个项目被包括在一个
所以，如果我们像要将下面的段落碎片改成一个列表：
At skylor , we’re a global community of technologists, thinkers, and builders working together ...
我们可以这样做：
At skylor , we’re a global community of
working together ...
尝试添加一个有序列表和无序列表到你的示例页面。
链接非常重要 — 它们让 Web 成为了 WEB（万维网）。要植入一个链接，我们需要使用一个简单的link — — a 是 "anchor" （锚）的缩写。要将一些文本添加到链接中，只需如下几步：
<ahref="https://www.cnblog/skylor">skylor/a>
如果你在网址开始部分省略了 https:// 或者 http:// 协议，你可能会得到错误的结果。在完成一个链接后，点击它并确保它去向了你指定的网址。
当然上面列下了一些标记，还有很多部分标签没有列出来，这些都详细讲一遍的话不是本课程要干的事，学习angularjs初步掌握上面我说将的HTML的基础知识，后面见到新的标记我会再稍微讲解下，一句话，听懂上面这么多，你就具备学习angularJS 的HTML方面的知识。而我们知道，现在的各大网站上网页都是唯美唯美的。这些美美的网页通过上面这些，当然是不能做出来的，HTML是个架子，我们需要在架子上面放些装饰，做点动画，下面的课程我们会简单讲解下CSS艺术花园，以及JS的花样基础。学完这些，就可以开始我们的angularJS的正式课程了。谢谢您的观看，谢谢支持，下期见。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
