【オリジナルチュートリアル】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 段落要素を含む段落を示しています。とてもハンサムな ！ (これは段落です)

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

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

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

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

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

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

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

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

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

閉じた

山括弧

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

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

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

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

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

埋め込みネスト要素:

要素を他の要素の中に配置することができます。これはネストと呼ばれます。特に Le 先生がハンサムだと思う場合は、「true」を 要素で囲むことができます。これは、この単語が特に強調されることを意味します。

Le先生とてもハンサム!

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

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

空の要素:

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

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

HTML ドキュメントの解析

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

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

さて、ここにあります:

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

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

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

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

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

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

画像:

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

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

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

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

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

Title

Title 要素を使用すると、コンテンツのタイトルとサブタイトルを指定できます。本にメインタイトルがあり、各章にタイトルがあり、さらに小さなタイトルがあるのと同じように、HTML ドキュメントにもタイトルがあります。 HTML には、

～

の 6 レベルの見出しが含まれていますが、多くても 3 ～ 4 つしか使用しないでしょう。

そうです

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

段落

上で説明したように、

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

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

サンプル コンテンツ

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

リスト

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

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

     列表内的每个项目被包括在一个

   • (list item)元素里。

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

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

     我们可以这样做：

     At skylor , we’re a global community of

     
     
     
     
     • technologists
     
     
     • thinkers
     
     
     • builders
     
     
     

     working together ...

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

     链接

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

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

        skylor

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

        skylor o

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

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

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

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