ソフトウェアテスト | HTMLの共通知識

ウェブとは何ですか

webとはworld Wide Webの略で、グローバル・ワイド・エリア・ネットワークと呼ばれ、通称WWWと呼ばれています。ユーザーにとっては、実際には複数の Web ページから構成されるサービス (Web) です。

ウェブは現在のインターネットとして理解できます。私たちにとって、それはウェブサイトのサービスそのものです。Web サイトは、複数の Web ページから構成されるサービスと考えることができます。

Web フロントエンドは、Web サイトのフロントページのコンテンツを担当します。Web ページは、フロントエンドエンジニアが HTML 言語を使用して作成したファイルで、テキスト、画像、ハイパーリンク、オーディオ、ビデオなどが含まれています。

注:ハイパーテキストマークアップ言語 (HTML) は、Web コンテンツを記述するために使用されるコンピューター言語です。

HTMLとは

HTML (Hyper Text Markup Language) は、Web ページを記述するために使用されるコンピュータ言語です。

HTML開発

インターネットの初期には HTML は存在せず、ネットワークを通じて送信できるのは最も単純なテキストコンテンツのみでした。ユーザーの要求の高まりと技術の継続的な開発により、テキスト以外のコンテンツを表現できる言語である HTML1.0 がリリースされました。その後、ゆっくりと発展して、現在 H5 と呼ばれている現在の HTML5 になりました。

HTMLビューア

テスト中に、対応する HTML コードを表示するツールを使用する必要がある場合があります。ここではブラウザに付属の開発者ツールを使用できます。このツールを開くショートカットキーは F12 です。

開発者ツールは非常に強力なツールです。HTML の表示と変更、js のデバッグ、css の変更、ネットワークデータの表示、パフォーマンステストの実行が可能です。非常に多用途です。Web テストでは、必ず習得しなければならないツールです。

HTML ソースコードを表示するには、開発者ツールの要素インターフェイスに入るだけです。ここでは、Web ページ上の要素を見つけて、Web ページ全体の HTML ソースコードを表示できます。

HTMLの基本構造

基本構造

Web ページは HTML 言語を使用して作成されます。HTML 言語で Web ページを作成する場合、デフォルトで存在しなければならない構造がいくつかあり、この構造を Web ページ (HTML) スケルトンと呼びます。

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

</body>
</html>

HTMLの基本タグ

ラベル

タグは HTML 言語の発明者によって人為的に定義された「単語」であり、異なるタグは異なる機能を表します。

ラベルには 2 つの一般的な形式があります。

ダブルタブ:<标签名称></标签名称>
単一ラベル:<标签名 />

共通ラベル

todo：加入 demo（done）

<!DOCTYPE html>: 現在のドキュメントのタイプが HTML であることをブラウザに宣言します。
<html> との間のテキストは</html> Web ページを説明します。<html>これは Web ページ内で最大のタグであり、ルートタグと呼ばれます
<head> Webページのヘッダーの記述により </head> 、ブラウザが読み取れるように内部のコンテンツが記述されます。
<meta charset="UTF-8"> 現在の Web ページの表示エンコーディングが設定されていることを示します
<title> とで囲まれた文字</title> がWebページのタイトルとなり、中の内容がブラウザのタブページに表示されます。
<body></body> とで囲まれたテキストが Web ページの本文となり、その中のコンテンツがブラウザの空白領域に表示されます
<div> Web ページ内のと </div> の間の領域の区切りブロックまたはセクションを定義します。
<h1> とで囲まれたテキストが</h1> タイトルとして表示されます
<p> との間のテキストは</p> 段落として表示されます

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>网页标题</title>
  </head>
  <body>
    <div>
      <h1>我的第一个网页</h1>
      <p>网页中的内容</p>
    </div>
  </body>
</html>

ラベルのプロパティ

todo：加入 demo(done)

HTML タグには属性を含めることができます。属性は、HTML 要素に関する詳細情報を提供します。プロパティは常に、次のように名前と値のペアとして表示されますname="value"。

属性の基本的な形式は次のとおりです。<标签名属性1="属性值1" 属性2="属性值2"></标签名>

各タグには複数の属性を含めることができます。属性は、タグ名の後の開始タグに記述する必要があります。属性間に順序の区別はありません。タグ名と属性、および属性と属性を区切るにはスペースを使用します。どの属性にもデフォルト値があります。この属性を省略すると、デフォルト値が使用されます。

HTML には、グローバル属性など、すべてのタグで使用できる属性が多数あります。さらにイベント属性があり、イベントはさまざまな操作として理解できます。さまざまな操作で、定義できる特別なプロパティもあります。最後に、各タグにはいくつかの固有のプロパティがあります。

たとえば、一般的なグローバル属性は次のとおりです。

class: 要素のクラス名を指定します。
id: 要素の一意の ID を指定します。

<! DOCTYPE html>
<html lang="en">
   <head>
     <meta charset="UTF-8" />
      <title>网页标题</title>
    </head>
    <body>
      <div id="first" class="content">网页中的内容</div>
     </body>
   </html>

最後に: 熱心なファンに恩返しするために、完全なソフトウェアテストビデオ学習チュートリアルを作成しました。必要な場合は、無料で入手できます。 【保证100%免费】

完全なマテリアルセットの入手方法: 下の小さなカードをクリックして自分で入手してください