フロントエンドの成長記録初日

この記事では、主に次の側面について説明します
。1。フロントエンドのコンテンツ
2.一般的なブラウザとそのカーネル3.html
の基本構造とタグ
4.imageimgタグの使用法5.htmlでの
いくつかの一般的な相対パス

1.はじめに

フロントエンドには、主に次の3つのコンテンツが含まれています。
1. html：Webページに実際に存在するテキスト、写真、入力ボックス、ボタン、オーディオ、およびビデオは、htmlのカテゴリに属します。
2. css：HTMLを飾るコンテンツです
3. javaScript（jsと呼ばれる）：Webページのインタラクションのコンテンツは通常jsです
一般的なブラウザとそのカーネル：
1. IE：トライデントカーネル
2. Firefox：geckoカーネル
3. サファリ：ウェブキットカーネル
4. Chrome：webkitのブランチブリンクカーネル
Web標準
Web標準は、Web書き込みを標準化するためにWorld Wide Web Consortium（W3C）によって策定された一連の標準であり、主に次の内容が含まれています。
1. 構造：html
2. パフォーマンス：css
3. 動作：javascript

二、 HTML

HTML HTML（ハイパーテキストマークアップ言語）の概要：ハイパーテキストマークアップ言語。主に、HTMLタグを使用して、Webページ内のテキスト、画像、ボタン、およびその他のコンテンツを記述するために使用されます。
HTMLの学習は、その中のさまざまなタグ/タグ/要素を学習しています。

html基本タグ

	    <!DOCTYPE html>  
	    <html lang="en">
	    <head>
	        <meta charset="UTF-8">
	        <title></title>
	    </head>
	    <body>     
	    </body>
	    </html>

HTMLの基本的なタグの説明
1. <！DOCTYPE html>：バージョンタイプ宣言。作成している言語のバージョンをブラウザに通知します。
2. <html> </ html>：ヘッド<head> </ head>タグとbody <body> </ body>タグを含むWebページのルートタグ
3. <head> </ head>：headタグ、Webページの構成情報について、このタグのコンテンツをWebページに直接反映することはできません
4. <meta>：文字セット文字セットなどのヘッダー情報を構成するために使用されます。一般的な文字セットは次のとおりです。
  1. utf-8：現在、世界のすべての国を含む最も一般的な文字。
  2. gb2312：6763人の男性を含む単純な中国人
  3. BIG5：香港、マカオ、台湾で使用されている伝統的な中国語
  4. GBK：すべての中国語の文字を含み、GB2312の拡張であり、従来の文字をサポートし、gb2312と互換性があります
5. <title> </ title>：タイトルタグ。タグの内容はブラウザタブに表示されます
6. <body> </ body>：bodyタグ。ウェブページに直接表示されるすべてのコンテンツは、このタグの下に書き込む必要があります。
HTMLで一般的に使用されるタグ
1. <h1> </ h1>：タイトルタグ、合計6レベル
2. <hr>：水平線ラベル
3. <p> </ p>：段落タグ
4. <font> </ font>：テキストラベル
5. <br>：Newlineタグ
6. <！–コメント–>
7. <img>：画像タグ
ラベルの種類
1. ダブルタグ：<body> </ body>タグ、<p> </ p>タグ、<h1> </ h1>タグなどの開始と終了のタグ
2. 単一のタグ（自己終了タグ）：開始タグは1つだけです。例：<hr>タグ、<br>タグ、<img>タグ
タグ間の関係
1. ネスト/包含/祖先と子孫の関係。例：<html> <body> </ body> </ html>の関係
2. 並列/兄弟/兄弟関係。例：<head> </ head>タグと<body> </ body>タグの関係

画像タグとその属性
画像の挿入は<img>タグでマークされ、構文は次のとおりです。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <img src="图片的路径" 
         width="设置图片的宽度，默认单位px,当单独分别设置宽度或者高度时,宽高会跟着等比例缩放" 
         height="设置图片的高度，默认单位px,当单独分别设置宽度或者高度时,宽高会跟着等比例缩放" 
         border="设置图片的边框" 
         title="用于设置鼠标悬停时的提示文字" 
         alt="当图片加载不出来时，出现的提醒文字">
    </body>
    </html>

パス：Webページと他のファイル間の場所の関係
パスは大文字と小文字を区別しません

相対パス

同じレベルの相対パス

同じフォルダにWebページと他のファイルを書き込む方法は2つあります。

    <!DOCTYPE html>  
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>   
          <!--第一种  -->
          <img src="mm.jpg">
          <!-- 第二种 ./表示当前文件所在目录-->
          <img src="./mm/jpg">
    </body>
    </html>

次のレベルの相対パス

他のファイルが別のディレクトリにある場合は、ディレクトリの名前を正確に記述し、複数ある場合はいくつか書き込む必要があります。

ディレクトリ名/ディレクトリ名/.../ファイル名は、マウスをダブルクリックするのと同じです

    <!DOCTYPE html>  
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>   
          <img src="wc/1/mm.jpg">
    </body>
    </html>

相対パス

ウェブページが他のフォルダにある場合は、前のレベルに戻って、いくつかのレベルに戻る必要があります
…/…/…/ファイル名。これは、マウスクリックによって返されるアクションです。

	                <!DOCTYPE html>  
	                <html lang="en">
	                <head>
	                    <meta charset="UTF-8">
	                    <title></title>
	                </head>
	
	                <body>   
	                      <img src="../../../mm.jpg">
	                </body>
	                </html>

エラーがある場合は、お気軽に訂正してください。ご不明な点がございましたら、メッセージを残してご相談ください。

フロントエンドの成長記録初日

おすすめ