Webの基本的な紹介

1 web 就是 world wide web 的缩写，称之为全球广域网，俗称 WWW。 

2 我们可以将 web 理解为就是当前的一种互联网。对于我们来说更多的就是网站服务。 

3 网站我们可以认是由多个网页组合在一起而形成一种服务。 

4 web 前端就是来负责一个网站当中前台网页里的内容。 

5 网页就是由前端工程师使用 HTML 语言编写而成的一种文件，它里面会包含 文字 图片超链接 声音 视频......（ 网页本质就是一个 html 文件 ）

1.3HTMLの基本的な紹介

1.定義

ハイパーテキストマークアップ言語ハイパーテキストマークアップ言語。つまり、表現できるだけでなく、

ただのテキスト。

2.HTML言語開発の歴史

1．在互联网最初的时候是没有 HTML 的，我们只能通过网络传输最简单的文字内容 

2．随着用户的要求越来越多，同时也是我们的技术的不断发展，就出了一种可以表达文字 

内容之外的语言---HTML1.0 

3．在最初的时候就是 html1.0----xhtml1.0( 过渡 )----xhtml2.0( 放弃 )------html5

1.4HTMLページスケルトン

1このウェブページは私たちがHTML言語で書いています。

2 Webページを作成するにはHTML言語を使用する必要があるため、対応する書き込みコードを機能させる必要があります。

（Hbuilder）

3 HTML言語を使用してWebページを作成する過程で、デフォルトでいくつかの構造が存在する必要があることがわかります。

この構造は、Webページ（html）スケルトンと呼ばれます

注意：

1. DocType html : 向浏览器声明当前的文档是 Html 类型。 
2. html ： 它是网页当中最大的一个标签，我们称之为根标签 
3. head : 网页头的部，它里面的内容是写给浏览器看的。 
4. meta : 如果有 charset 那就表示在设置当前网页的显示编码 
5. title： 网页的标题，它里面的内容会在浏览器的标签页上显示 
6. body： 网页主体，它里面的内容会显示在浏览器的空白区域内。

1.5Hbuilderツールの使用法

(省略)

1.6HTML構文とタグの基本的な紹介

1.HTMLタグ

いわゆるタグは、HTML言語の発明者によって人為的に定義されたいくつかの「単語」であり、中国語に相当します。

言葉。

2.文法

文法は、これらの「単語」をどのように解析または書き込むかについての規則を定義するために使用されます。

3.HTMLタグの一般的なタグと基本的な構文

1.1。HTMLタグを人為的にシングルタグとダブルタグに分割します

<标签名称></标签名称> 

<标签名 />

2.2。一般的なタグ：

（1）标题标签 :在 html 当中人为定义了六种标题分别 h1-h6,它们都是双标签。在一个网页当中，我们只允许出现一个 h1。 

（2）段落标签：p 双标签 

（3）换行标签： br 单标签 

（4）空格： & nbsp;

3.3。ラベル作成文法

（1）HTMLでは、複数のタグを相互にネストできますが、クロスネストはできません。

1.7画像タグ

1.文法

<img src="地址" />

注意：

1. img 是一个单标签，它的作用是可以在网页当中插入图片。 
2. src 是 img 标签的属性，它里面的值称之为属性值，具体用来表示想要加载的图片存 在哪里。 
3. 标签的身上可以有属性，属性名与标签名之间用空格隔开。 
4. 属性值与属性名之间用 单等号 连接 
5. 一个标签的身上可以有多个属性，之间都用空格隔开。

2.写真の一般的な属性

1. Src 设置图片所在位置 
2. Alt 当图片加载失败的时候会显示它里面的文字 
3. Width/height 分别用来设置图片宽和 高，如果只设置了宽度或者高度，那么另外一边会自动缩放。 
4. Title 当鼠标悬停在图片上的时候会显示它里面的文字

1.8リンクラベル

1.文法

<a href="目标地址"> 内容 </a>

第二に、役割

現在のページから新しいページに実現できますジャンプ操作

3、属性

1. Target 这个属性可以设置新页面在哪个窗口打开，当值为_blank 的时候可以在新窗口打开
2. Href 的属性值设置为 # 的时候，可以设置为空链接，它的作用就是当用户点的时候不会发生跳转。

1.9パス

いわゆるパスは、特定のリソースを見つけるためにプログラムコードで「移動」したパスと見なすことができます。例えば：

		C:/Users/Administrator/Desktop/_book\img\2.png.

1つの絶対パス

绝 对 路 径 一 般 是 以 盘 符 为 起 点 来 进 行 查 找 ， 或 者 就 是 一 个 绝 对 URL 地 址 。 
https://www.baidu.com/img/bd_logo1.png ，
但是在实际的工作中，我们不建议大家使用绝对路径。

第二に、相対パス

相対パスとは、開始点として特定の既知のファイルに関連するリソースを検索することを指します。

1.10相対パスの使用

パスは普遍的な存在です。パスの使用法を説明する例として、検索画像を使用する必要があります。実際の作業では、相対パスで使用される周波数が最も高くなります。相対パスを、同じレベルのパス、下位レベルのパス、上位レベルのパスの3つのタイプに人為的に分割します。（例として画像を探す意味は、相対パスを使用してHTMLファイルの外部の画像をHTML Webページに挿入することです。したがって、ここでの相対的な開始点はHTML Webページです）

同じレベルのパス：同じレベルは、HTMLページとターゲット画像が同じレベルのディレクトリにあることを意味します。同じレベルのパスを使用する場合は、

ターゲットイメージの名前をsrcに書き込むだけです。

従属パス：従属は、htmlファイルの従属ディレクトリ内の画像を指します。このとき、/を使用する必要があります

下に移動して検索します。（下）

上位パス：画像がhtmlファイルの上位ディレクトリにある場合は、... /を使用して戻って検索する必要があります。この

注意：

1. 上述的路径规则虽然都是以查找图片为例，但是总结的规律适用于其它类型资源的 

查找。 

2. / 表示向下级查找，可以无限级穿透。 
3. ../ 表示向上级返回，同样可以无限级返回。

1.11フォームの基本的な紹介

フォームは、インターネット上でユーザー情報を収集するために使用される構造です。これを実現するために、タグはHTMLで事前に定義されています。ラベル名はフォームであり、二重ラベルであり、フォームフィールドと呼ばれます。

<form action="" method=""></form>

注意：

1. form 标签就是 HTML 当中定义好的一个用来表示整个表单结构的双标签，我们称之 为表单域。 
2. form 默认就相当于一张"白纸"，如果想让它收集用户的相关信息，HTML 里又准备 了很多的表单标签。这些标签里 使用最多的一个叫 input 。 
3. action 属性值表示将当前表单中的数据提交到哪些。 
4. method 属性值表示以 什么样试来提交当前表单中的数据。最常见的就是 get,post 。其中 get 方式就是指将数据在 URL 中进行提交，这种方式是明文。所以相对不安全。而 POST 方式就是指将数据写在 HTTP 请求的 请求体当中( )。

1.12一般的なフォーム要素

Fromタグは、特定のフォーム全体の定義のみを担当します。フォーム内のユーザーデータを収集する場合は、さらにいくつかの機能が必要です。

ユーザーが入力して入力できるようにするモジュール。現時点では、HTMLは、ユーザーが入力を完了できるように多くのフォームタグを定義しています。

に。最も一般的なフォームタグはInputです。これは、タグ名がinputと呼ばれ、HTMLがpassに設定されているためです。

type属性は区別するために使用されます。

1. 文本输入框： <input type="text" /> 
2. 密码输入框: <input type="password " /> 
3. 提交按钮： <input type="submit" /> 
4. 单选框： <input type="radio" /> 
5. 复选框: <input type="checkbox" /> 
6. 文本域: <textarea rows="行数" cols="列数"></textarea> 
7. 下拉框： <select><option value="">选项 1</option> </select>
8. 重置按钮： <input type="reset" /> 
9. 普通按钮: <input type="button" value="按钮" />

1.13フォーム要素の詳細に注意してください

name属性：フォームはさまざまなフォーム要素を介してデータを収集します。このプロセスでは、多くのフォーム要素名が入力と呼ばれます。これらのデータがバックグラウンドに直接送信されると、これらのデータを区別できないという問題が発生します。区別するためにどの番号がどのフォームアイテムに属しているか。Inputにname属性を人為的に設定しました。このように、データがバックエンドに到達すると、次の形式になります。
```
username="syy" 

 pwd="123"

 gender="男".... 
```
値：その機能は、いくつかのフォーム要素（テキスト入力ボックス、送信ボタン、リセット）のデフォルトの表示コンテンツを定義することです。

ボタン、通常のボタン）

チェック済み：これは属性であり、その属性値は属性名と同じです。一部の無線とチェックボックスをデフォルトで選択するように設定するために使用されます。
選択済み：これは、属性値が属性名と等しい属性でもあります。ドロップダウンオプションに追加して、オプションがサイレントであることを認識します。

選択を受け入れます。

1.14CSSの基本的な紹介

1つは、Web標準です。

いわゆるWeb標準とは、Webページの記述を標準化するためのシステムの要件を指します。これはW3C組織によって策定されています。

Webページの構造、スタイル、および動作を分離する必要があります。

第二に、名詞の説明

1．结构：就是通过 HTML 标签搭建的网页的结构。 

2．样式：就是通过 CSS 对当前的网页结构进行修饰和美化 

3．行为：通过 JS 让网页可以理解用户的一些操作。从而用户与网页之间产生交互。

1.15CSSの基本的な使用

1.定義

Cssは、中国ではカスケードスタイルシート、カスケードスタイルシート、スタイルシートと呼ばれています。その機能は、現在のWebページを変更することです。

HTML要素。

2.基本的な手順

CSSとHTMLは、2つの独立した言語と見なすことができます。CSSを使用してHTMLを操作する場合は、これ

最初に2つの間の関係を確立する必要があります。

このとき、HTMLにはstyleというタグ（ダブルタグ）が用意されています。

時間はCSSコードの記述に使用できます。共通の保存場所は、headタグのtitleタグの下にあります。

CSSセレクターを使用して操作する要素を見つけ、スタイルを設定します（styleタグで記述）

1.16CSSを体験する

一般的なCSS要素の属性：

widthは、要素の幅の単位がpxであることを定義します。

高さは高さを定義し、

background-color背景色を設定します。

CSSコード記述の固定構文：

セレクター{CSSコード}
開発フェーズでは、CSSスタイルを別々の行に記述し、各行を==; ==で終了することをお勧めします。

1.17CSSセレクター

1.定義

いわゆるCSSセレクターは、特定の要素を選択するためにCSSで定義されている固定構文です。その役割

スタイルを設定する要素を選択するだけです。

第二に、CSSセレクターの分類

CSSには多くの種類のセレクターがあり、単純なセレクターと複合セレクターの2つのカテゴリーに人為的に分類しています。

3つのシンプルなセレクター：

タグ名セレクター：特定のHTMLタグ名から要素を選択します。【現在のウェブページのすべての名前を呼び出します

単語のすべてのタグが選択されます]

クラス名セレクター：タグクラス名で要素を選択します
IDセレクター：ID名で要素を選択します。

1.18クラス名セレクター

1.クラス名セレクターが必要な理由

HTMLタグの種類が限られているため、完全なWebページでは、書き込みと実装のために多くのタグを組み合わせる必要があります。

そのため、同じ名前のタグがWebページに複数回表示される場合があります。これらのラベルを同じ名前で設定する場合

さまざまなスタイルを設定します。その場合、タグ名セレクターを直接使用する方法はありません。この場合、使用できます

クラス名セレクター。

次に、クラス名セレクターを使用する基本的な手順

HTMLページの構造を定義してから、選択する要素にクラス属性を設定します。
一緒に選択したい要素に同じクラス属性値（クラス名）を設定します
この時点で、スタイルタグの固定構文に従ってクラス名を呼び出すだけで済みます：.class name

1.19Idセレクター

1.IDセレクターが必要なのはなぜですか

一連の要素から1つの要素のみを選択する場合は、idセレクターを使用できます。この

IDは個人のID番号と同じです。

2、IDセレクターの使用

選択する要素にid属性を設定します。
このid属性に値を設定します。これをid名と呼びます。
固定構文によるスタイルの呼び出し：#id名{}
注：同じ名前のID値をWebページに表示できないようにする必要があります[有効ですが、表示できません]

1.20単純なセレクターの要約

デフォルトでは、タグ名セレクターとクラス名セレクターは一度に複数の要素を選択でき、ID名セレクターは一度に1つしか選択できません。

要素。

タグにはクラス名とID名の両方を含めることができ、2つの属性値は同じにすることができます。
ラベルには複数のクラス名を同時に設定でき、複数のクラス名はスペースで区切る必要があります。
IDセレクターに関しては、同じID名はページに1回しか表示できません。

1.21ID名とクラス名の命名規則

名前を純粋な数字にすることも、数字で始めることもできません（ただし、多くの場合、数字で終わります）
名前を中国語にすることはできません
パッケージの特殊文字に名前を付ける（-_）
名前を付けるときは名前に注意してください

1.22要素の表示タイプ

HTML自体には多くの要素が定義されており、これらの要素はデフォルトでWebページに表示されるときに存在します。

デフォルトの状態。たとえば、一部の要素はデフォルトで幅と高さの属性に影響を与えません。また、一部の要素にはデフォルトで独自の線があります。

表示。この現象を要素表示タイプと呼びますが、覚えておくために、要素表示タイプをブロック要素、インライン要素、インラインブロック要素の3種類に人為的に分けています。

ブロック要素：同時に複数のブロック要素がある場合、各ブロック要素は独自の行に表示され、デフォルトでは

その幅と高さのプロパティが機能します。

インライン要素：同時に複数のインライン要素がある場合、これらの要素は1行に表示されます。

自動ラインフォールディング以上。デフォルトでは、その幅と高さのプロパティは機能しません

インラインブロック要素：複数のインラインブロック要素が同時に保存されている場合、これらの要素はデフォルトで1行に表示されます

その幅と高さの属性が機能します。

注：どの要素がインラインで、どの要素がブロックで、どの要素がインラインブロックであるかを記憶する必要はありません。

1.23レイアウトラベルの補足

divタグ。HTMLで定義されたdoubleタグ（DIV + CSS）です。人工的に体だと思います

最大の製品のラベル。

スパンタグは、主にテキストを配置するために使用されるダブルタグでもあり、これは非常に小さいと人為的に考えています。
ブラウザが正常に解析できないため、タイトルを段落タグで囲むことはできません。

1.24要素の表示型変換

Webページのレイアウトの過程で、いくつかの「特別なモジュール」に遭遇することがよくあります。この種のモジュールでは、以前のモジュール

一般的なタグの中には、使用時に「セマンティック」と表示されるものと、対応しないものがあるため、対応するタグを使用できます。

設計ドラフトとして表示できるように、強制的に型変換します。CSSには表示属性があります

さまざまな値を設定して、要素タイプの変換を完了することができます。

ブロック要素に変換します：display：block;
インラインブロックに変換：display：inline-block
インライン要素に変換：display：inline; none

1.25シンプルセレクターウェイト

重み：同じ要素のスタイルを設定する場合、CSSセレクターのタイプが異なれば制御能力も異なることが理解できます。
単純なセレクターの場合：IDセレクター「クラス名セレクター」タグ名セレクター

1.26CSS機能

同じ重みの場合、同じ要素の後に記述されたCSSスタイルは、最初に記述されたCSSスタイルを上書きします。【カバレッジ】
CSSの定義には継承の特徴があり、子要素は親要素のいくつかのスタイルを継承します[継承]

（1）すべてのCSSプロパティを継承できるわけではありません。

（2）すべてのタイプの要素が祖先要素のスタイルを継承するわけではありません（継承は通常、ブロック要素で発生します）

（3）継承とは、子要素で使用できる祖先要素のスタイルを指します
同じ要素に対する同じセレクターのCSS制御機能には、長所と短所があります。【優先】

1.27コンパウンドセレクター

1.なぜ複合セレクターが必要なのですか

実際の純生産プロセスでは、多くの構造階層が深くネストされていることが多く、この構造モジュールは

多くの人が同じラベル名を使用しています。したがって、現時点では、複合セレクターを使用して、これらの単純な選択肢を組み合わせることができます。

デバイスが結合されます。これにより、要素を簡単に選択できます。

2.一般的な複合セレクター：

1.1。子孫セレクター：このタイプのセレクターは、特定の要素で始まり、それを祖先として使用し、その後下方向に続きます

検索を実行して、その下の子孫要素を選択します。

開始要素の子孫要素... {スタイルの設定}

注意：

1. 后代选择器当中的每个部分都可以采用任意的简单选择器代替。 
2. 不同的部分之间要用空格隔开。 
3. ...... 就表示可以不停的向下层查找。

2.2。パラレルセレクター：複数のセレクターをコンマで接続することを意味します。つまり、これらの要素を同時に選択してから、同じスタイルを設定します。各パーツのセレクターは、任意のタイプのセレクターで構成できます。

1.28セレクターの重みの要約

単純なセレクター：ID名「クラス名」要素名
複合セレクター：理解する必要があるのは、複合セレクターが他の複数のタイプのセレクターで構成されていることです。

比較のために、単純なセレクターごとに値を人為的に定義します。つまり、Id（100）class（10）

ele（1）、これらの3つの値は重み値とも呼ばれ、それらを取得した後、現在のセレクターに表示される重み値のみが表示されます

加算を実行すると、最終結果はセレクターの重みになります。値が大きいほど、重みが大きくなります。

重み比は、同じ要素に対する異なるセレクターの制御力の比較であることに注意してください（継承の影響を区別するため）

1.29CSSファイルの保存場所

CSSコードは、私たちがさまざまな場所に配置できます。通常、インラインCSS、外部リンクCSS、インラインCSSの3つの記述方法があります。

埋め込みCSSとは、HTMLページにCSSコードを記述することです。
外部CSSは、外部の独立したCSSファイルにCSSコードを書き込むことを指します。
インラインCSSとは、特定のHTMLタグにCSSコードを記述することです。

注意：

ページをレンダリングするブラウザの原則に従って、HTMLファイルの先頭にCSSコードを書き込むことを選択します。
外部CSS書き込み方法を使用する場合、外部の独立したCSSファイルにスタイルタグを書き込む必要はありません。同時に

CSSファイルは、linkタグを介して特定のHTMLファイルに導入する必要があります。rel属性を省略しないでください

[]

上記の3つのCSSファイルの保存場所では、行のCSSの重みが最も高くなりますが、外部リンクと内部

誰が埋め込まれているのか（重量）よりも大きくなければならないということはなく、その制御能力はそれぞれが使用するセレクターパワーに完全に依存します

重量。

特定のスタイルのパワーを直接最大にしたい場合は、CSSコードの最後に設定するだけで済みます

セットする

P{ color:pink!important; }

1.9オーディオタグ

<audio autoplay controls loop> 
降级的说明性文字 
<source src="格式 1 路径" /> 
....... 
</audio>

注意：

オーディオは、サウンドリソースモジュールを定義するために使用されるダブルタグです。
自動再生は、自動再生を設定するために使用されます。
コントロールは、現在のデバイスの再生コントロールを呼び出します。
loop現在のオーディオループを再生するように設定します。
音声のテキストはデフォルトでは表示されず、現在のブラウザがこのタグをサポートしていない場合にのみテキストが表示されます

語。

1.30一般的なテキストスタイル

行の高さ：line-height、行の高さのサイズを現在の要素の高さに設定すると、1行のテキストは次のようになります。

現在の要素を垂直方向に中央揃えする効果。

水平方向の配置：text-align：左|中央|右。それぞれ、現在のボックス内のテキストの水平方向の配置を示します。
フォントサイズ：font-size、単位はpxです。通常の状況では、ブラウザには最小の表示フォントがあります。
フォントの太さ：font-weight。キーワードまたは値（100〜900）を設定できます。キーワードには、通常の場合は通常、太字の場合は太字があります。
フォント名：font-family、一般的に使用されるものは「MicrosoftYahei」と「Heidi」です
フォントの色：色、色の単語、または16進数を設定できます。

1.31テキストシャドウ

1.書体の略語

フォント：テキストの太さ/線の高さのフォント名。

フォント：太字20px / 200px'Microsoft Yahei ';

2.CSS3のテキストシャドウ

テキストシャドウ：xyrカラー;

テキストシャドウ：0px 0px0px赤;

注意：

xは、水平方向の影のオフセットを表し、負の値に設定できます。正と負はサイズを示すのではなく、方向のみを示します。

右の水平は正、左の水平は負、単位はピクセルです

yは垂直方向の影のオフセットを表し、垂直上向きは負、下向きは正です
rは影のぼけ度を表し、値が大きいほど影のぼけが大きくなり、単位はpxになります。
色は影の色を表します
C3では、テキストの段落に複数の影のレイヤーをコンマで区切って含めることができ、各レイヤーで異なるパラメーター間にスペースを使用できます

グリッドが分離されました。

1.32遷移属性

遷移属性の役割は、要素のデフォルトスタイルと最終的なスタイル変更の間のプロセスを生成することです。C3にtransitionという新しいプロパティを追加しました

Transition: all 1s linear 0s;

注意：

1. 第一个参数的作用是设置元素身上的哪些属性产生过渡，一般用 all 表示所有的属 

性都过渡。 

2. 第二个参数的作用设置过渡需要时长，单位是 s 不要省略 
3. 第三个参数的作用设置过渡的动画形式，linear 表示匀速 
4. 第四个参数设置当前过渡等待多久之后才会执行( 延时 )。即使为 0 ，单位也不能 

省。 

5. :hover 选择某个元素被鼠标移上时的状态。 
6. transition 这个属性既可以添加在元素默认状态，也可以添加在鼠标移上状态，区别 

就是第二种做法在鼠标离开的时候不会在有过渡变化。