HTMLの001フロントエンドの基礎

その他 2019-10-11 22:25:24 訪問数: null

ディレクトリ

、HTML入門

1.1 Webサービスの本質

import socket


sk = socket.socket()

sk.bind(("127.0.0.1", 8080))
sk.listen(5)


while True:
    conn, addr = sk.accept()
    data = conn.recv(8096)
    conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
    conn.send(b"<h1>Hello world!</h1>")
    conn.close()

要求元のブラウザ - > HTTPプロトコルは - >サーバがリクエストを受信 - >レスポンスがサーバから返された - >ブラウザにサーバーHTMLファイルの内容は - >ブラウザがページをレンダリング

何1.2 HTML？

  • HTML（ハイパーテキストマークアップ言語、HTML）は、Webページを作成するために使用されるマークアップ言語です。
  • ルールブラウザは、私たちはページ、ルールに従って、当社のウェブサイトをレンダリングするブラウザを書くルールに従って、本質的に認識可能です。異なるブラウザのために同じラベルの異なる解釈を有することができます。（互換性の問題）
  • ウェブページのファイル名の拡張子：.htmlを.htmのか

何1.3 HTMLではないでしょうか？

HTMLはマークアップ言語（マークアップ言語）で、それはプログラミング言語ではありません。

HTMLは、Webページを記述するためのタグを使用しています。

1.4 HTML文書の構造

最も基本的なHTMLドキュメント：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>css样式优先级</title>
</head>
<body>

</body>
</html>

  1. HTML5文書の<！DOCTYPE HTML>宣言。

  2. <html>、</html>これは、マークインとマーク文書です。その中でルート要素のHTMLページ、文書（ヘッド）と、本体（ボディ）のヘッドです。

  3. <head>、</head>これは、HTMLドキュメントの始まりを定義します。それらの間のコンテンツは、ドキュメントウィンドウのブラウザでは表示されません。これは、文書の元（メタ）データが含まれています。

  4. 、

    ページタイトルは、ブラウザのタイトルバーに表示される定義します。

  5. <body>、</body>テキストは、ページコンテンツの本体との間に表示されます。

注意：中国のWebページを使用するために必要と<meta charset="utf-8">そうでない場合は文字化けします、声明を。デフォルトのエンコードGBKに設定し、一部のブラウザでは、その後、あなたがする必要があります<meta charset="gbk">。

1.5 HTMLフォーマット・タグ

  • HTMLタグは、前述したように、角括弧で囲まれたキーワードです<html>, <div>他の
  • ：HTMLタグは、通常のようなペアで来る<div>と</div>、最初のラベルが第二のタグが最後で、始まりです。終了タグはスラッシュます。
  • そこに提示されたラベルの別の部分のような、またある：<br/>、<hr/>、<img src="1.jpg" />というように。
  • 属性の数を持つことができるラベルは、属性はなしかもしれません。

タグの構文：

  • <タグの属性名= 1「」属性値1「」属性2 = 『』属性値2「......」>コンテンツセクション
  • <タグ属性名= 1 "" 属性値1 "" 属性2 = "" 属性値2 "......" />

いくつかの非常に重要な特性：

  • ID：固有のID定義されているタグ、独自のHTMLドキュメントツリー
  • クラス：html要素（クラス名）（CSSスタイルクラス名）のための1つまたは複数のクラス名を定義します
  • スタイル：指定された要素のインラインスタイル（CSSスタイル）

1.6 HTMLのコメント

<!--注释内容-->

母親のコードを注意してください。

1.7ラベル

ラベルが配置する前に、<！DOCTYPE>宣言は、HTMLドキュメントの最初の行でなければなりません。

<！DOCTYPE>宣言は、HTMLタグではなく、それが書かれた命令を使用して、ページのどのウェブブラウザのHTMLバージョンに関する表示です。

二、HTMLタグを使用

2.1は、共通のラベルを頭

タグ 意味
<title></title> ページタイトルを定義します
<style></style> 内部スタイルシートの定義
<script></script> コードまたはカスタムJS JSファイルのインポート外部
<link/> 外部スタイルシートファイルやWebサイトのアイコンの導入
<meta/> オリジナルのウェブページ情報の定義

METAタグ

メタタグの説明：

<meta>要素は、検索エンジンの更新頻度とキーワードのページ（マタ情報）、および説明に関するメタ情報を提供します。

<meta>ラベルは、任意のコンテンツが含まれていない文書の上に位置しています。

<meta>ユーザーによって提供される情報は表示されません。

メタタグからなる：metaタグには2つの属性があり、彼らはHTTP-当量と名前属性である、異なる属性が異なるパラメータ値を持って、これらの異なるパラメータ値が異なるページ機能を実現しています。

1.http-equiv属性：HTTPファイルの先頭の役割に相当し、それは正しく、対応する属性値のコンテンツをWebコンテンツを表示するために役立つブラウザ、いくつかの有用な情報に戻すことができ、コンテンツが実際のコンテンツです各変数のパラメータ。

<!--指定文档的编码类型(需要知道)-->

<meta http-equiv="content-Type" charset=UTF8">

<!--2秒后跳转到对应的网址，注意引号(了解)-->

<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">

<!--告诉IE以最高级模式渲染文档(了解)-->

<meta http-equiv="x-ua-compatible" content="IE=edge">

2.name特性：主にウェブページを記述するために使用される、対応するコンテンツの属性値、主コンテンツのコンテンツ情報と分類情報を見つけるために検索エンジンロボットを容易にすることです。

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">

<meta name="description" content="老男孩教育Python学院">

2.2身体一般的に使用されるタグ内に

基本的なタグ（インラインブロックレベルのタグおよびラベル）

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<p>段落标签</p>

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<!--换行-->
<br>

<!--水平线-->
<hr>

特殊文字

コンテンツ コード対応
ブランク &nbsp;
> &gt;
< &lt;
＆ &amp;
¥ &yen;
著作権© &copy;
登録® &reg;

divタグやラベルがまたがります

divタグはブロックレベル要素を定義するために使用され、実用的な意義がありません。主にCSSスタイルを通じてそれに異なった性能を与えること。
スパンはない実用的な意義のインライン（内側の線）の要素を定義するために使用されます。主にCSSスタイルを通じてそれに異なった性能を与えること。

ブロックレベル要素とインライン要素との間の差：
別個のラインスタートレンダリング要素に基づいて、いわゆるブロック要素は、インライン要素は、新しい行を受けません。別のWebページでこれらの2つの要素を挿入すると、ページ上の任意の影響を与えることはありません。
これらの2つの要素が生まれたCSSスタイルのために特別に定義されています。

注意：

ネストされたタグについて：ブロック要素は、典型的には、いくつかのインライン要素やブロック要素を含んでいてもよいが、要素は、インラインブロック要素を含めることはできません、それは他のインライン要素を含めることができます。

pはブロックレベルのタグのラベルを含めることはできません、ラベルは、p pタグを含めることはできません。

imgタグ

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

ラベル

ハイパーリンクのラベル

Webページからのいわゆるハイパーリンクがゴールへの接続点との間の関係を意味し、この目標は、別のWebページであることができ、それが同じページ上の別の場所することができ、それはまたしても、画像、電子メールアドレス、ファイル、またはすることができアプリケーション。

什么是URL？
URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。
URL举例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html

URL地址由4部分组成
第1部分：为协议：http://、ftp://等 
第2部分：为站点地址：可以是域名或IP地址
第3部分：为页面在站点中的目录：stu
第4部分：为页面名称，例如 index.html
各部分之间用“/”符号隔开。
<a href="http://www.baidu.com" target="_blank" >点我</a>

href属性は、リンク先ページのアドレスを指定します。アドレスは、いくつかのタイプがあります

  • 絶対URL -別のサイトへのポイント（など= HREFなど" http://www.jd.com）
  • 相対URL - 正確なパスで、現在のサイト（HREF =「index.htmを」）を指し
  • アンカーURL - ページのアンカーへのポイント（HREF =「＃トップ」）

ターゲット：

  • _blankは、新しいタブで開いてランディングページを意味し、
  • _selfは現在のタブでランディングページを開くことを意味し

リスト

1.順不同リスト

プロパティのタイプ：

  • ディスク（黒丸、デフォルト値）
  • 円（白丸）
  • 四角（黒四角）
  • なし（ノースタイル）
<ul type="disc">
　　<li>第一项</li>
　　<li>第二项</li>
</ul>

2.順序付きリスト

プロパティのタイプ：

  • 番号のリストは、デフォルト値
  • キャピタルレター
  • 小文字
  • Ⅰ首都ローマ
  • Ⅰ小文字のローマ
<ol type="1" start="2">
　　 <li>第一项</li>
　　 <li>第二项</li>
</ol>

3.タイトルのリスト

<dl>
　　<dt>标题1</dt>
　　　　<dd>内容1</dd>
　　<dt>标题2</dt>
　　　　<dd>内容1</dd>
　　　　<dd>内容2</dd>
</dl>

テーブル

データテーブルは、複数のセルが別の行を形成し、ジェリー部は、テキストコンテンツ、リスト、パターン、形、数字、記号、テキスト、および他のプレフォームなどを含んでいてもよい、テーブルは行で構成され、二次元空間です。
テーブルの最も重要な目的は、カテゴリデータを示す表です。クラスデータテーブルは、データのテーブル形式最も適切な組織（すなわち、行と列に編成）を指します。

属性：

  • ボーダー：テーブルのボーダー。
  • CELLPADDING：パディング
  • CELLSPACING：余白。
  • 幅：ピクセルの割合（長さと幅は、好ましくは、CSSで設定されています）。
  • ROWSPAN：どのくらいの垂直クロスセルライン
  • COLSPAN：どのように多くの列のセルスパン（つまり、マージされた細胞です）

テーブルの基本的な構造：

<table>
　　<thead>
　　　　<tr>
　　　　　　<th>序号</th>
　　　　　　<th>姓名</th>
　　　　　　<th>爱好</th>
　　　　</tr>
　　</thead>
　　<tbody>
　　　　<tr>
　　　　　　 <td>1</td>
　　　　　   <td>Egon</td>
　　　　　　 <td>杠娘</td>
　　　　</tr>
　　　　<tr>
　　　　　　  <td>2</td>
　　　　　　　<td>Yuan</td>
            <td>日天</td>
　　　　</tr> 　　
　　</tbody>
</table>

形

特徴：

Webサーバーと対話するためにユーザを有効にすると、サーバーへの転送のためのデータを形成します

フォームは、などのテキストフィールド、チェックボックス、ラジオボタン、送信ボタンなどの入力ラベル、一連のを含めることができます

フォームはまた、テキストエリア、選択フィールドセットとラベル・タグが含まれていてもよいです。

フォームのプロパティ

プロパティ 説明
受け入れ、文字セット 提出フォームで使用するために指定：文字セット（ページの文字セットデフォルト）。
アクション 所定の用紙が提出されている住所（URL）（提出ページ）。
オートコンプリート ブラウザの規定は、自動的に（：上のデフォルト）のフォームを完了する必要があります。
ENCTYPE 提出された所定の符号化されたデータ（デフォルト：URLエンコード）。あなたは、ファイルをアップロードする必要がある場合にenctype =「multipart / form-データを 」
方法 規制提出フォームはHTTPメソッドを使用します（デフォルト：GET）。
名前 （：document.forms.name使用DOMのための）認識の所定のフォームに名前を付けます。
NOVALIDATE 規定のブラウザはフォームを検証しません。
ターゲット （：_selfデフォルト）アクションに定める目的は、アドレスを属性。

フォーム要素

基本的な考え方：
動的なWebサイトのコンテンツを作成することが非常に重要であるので、HTMLは、HTMLのフォーム要素、より複雑な部品、多くの場合、フォームやスクリプト、動的なページ、データ処理と組み合わせた他の機能です。
一般的な情報フォームを入力し、ユーザーを収集するために使用される
フォームの作品を：
訪問者がWebフォームを閲覧しながら、必要な情報を記入して、提出するボタンを押すことができています。この情報は、インターネットを介してサーバに送信されます。
エラーがある場合は、データを処理するために、サーバ上の特別なプログラムは、エラーメッセージを返し、エラーを修正するように依頼します。データが完全かつ正確である場合には、入力サーバは、フィードバック情報を完了します。

入力

<input>要素の種類に応じて様々な形態の変化を属性します。

プロパティ説明：

  • フォームが送信される違い、「キー」、およびIDに注意してください。名前
  • 値：フォームの対応する項目の値が送信されます
    • タイプ=「ボタン」、「リセット」「送信」、コンテンツのテキストがボタンの上に表示されている場合
    • タイプ=「テキスト」、「パスワード」、「隠された」、初期値入力ボックスなど
    • タイプ=「チェックボックス」、「ラジオ」、「ファイル」、入力に関連付けられた値
  • 点検：ラジオとチェックボックスは、デフォルトのエントリで選択されています
  • 読み取り専用：テキストと設定読み取り専用パスワード
  • 無効：すべての入力が適用されます
typeプロパティの値 症状 コード対応
テキスト 単一行のテキスト入力 <input type="text" />
パスワード パスワード入力ボックス <input type="password" />
日付 日付入力ボックス <input type="date" />
チェックボックス ボックスにチェックを入れます <input type="checkbox" checked="checked" />
無線 チェックボックス <input type="radio" />
提出する [送信]ボタンを <input type="submit" value="提交" />
リセット リセットボタン <input type="reset" value="重置" />
ボタン プッシュボタン <input type="button" value="普通按钮" />
隠されました 隠された入力ボックス <input type="hidden" />
ファイル テキスト選択ボックス <input type="file" />

タグを選択

プロパティ説明：

  • 複数：ブール型プロパティ、および複数の選択肢に設定し、それ以外の場合は、デフォルトのラジオ
  • 無効：無効
  • selected：默认选中该项
  • value：定义提交时的选项值
<form action="" method="post">
　　<select name="city" id="city">
　　　　<option value="1">北京</option>
　　　　<option selected="selected" value="2">上海</option>
　　　　<option value="3">广州</option>
　　　　<option value="4">深圳</option>
　　</select>
</form>

label标签

定义：<label> 标签为 input 元素定义标注（标记）。
说明：

  1. label 元素不会向用户呈现任何特殊效果。
  2. <label> 标签的 for 属性值应当与相关元素的 id 属性值相同。
<form action="">
    <label for="male">male</label>
    <input type="radio" name="sex" value="male " id="male" checked="checked">
    
    <label for="female">female</label>
    <input type="radio" name="sex" value="female" id="female">
</form>

textarea多行文本

属性说明：

  • name：名称
  • rows：行数
  • cols：列数
  • disabled：禁用
<textarea name="memo" cols="30" rows="10"> 默认内容 </textarea>

标签的总结

块级元素：

  1. 总是从新的一行开始
  2. 高度、宽度都是可控的
  3. 宽度没有设置时，默认为100%
  4. 块级元素中可以包含块级元素和行内元素
<h1>...</h1>  标题一级
<h2>...</h2>  标题二级
<h3>...</h3>  标题三级
<h4>...</h4>  标题四级
<h5>...</h5>  标题五级
<h6>...</h6>  标题六级
<hr>  水平分割线
<p>...</p>  段落
<ul>...</ul>  无序列表
<ol>...</ol>  有序列表
<dl>...</dl>  定义列表
<table>...</table>
<form>...</form>  表单
<div>...</div>

块级大多为结构性标记

行内元素：

  1. 和其他元素都在一行
  2. 高度、宽度以及内边距都是不可控的
  3. 宽高就是内容的高度，不可以改变
  4. 行内元素只能行内元素，不能包含块级元素
<span>...</span>
<a>...</a>  链接
<br>  换行
<b>...</b>  加粗
<strong>...</strong>  加粗
<img >  图片
<i>...</i>  斜体
<em>...</em>  斜体
<del>...</del>  删除线
<u>...</u>  下划线
<input>...</input>  文本框
<textarea>...</textarea>  多行文本
<select>...</select>  下拉列表

行内大多为描述性标记

おすすめ

転載: www.cnblogs.com/XuChengNotes/p/11655231.html
おすすめ
ランキング
Web側のオンラインクラウド編集ソリューション
2つのシナリオでのJVMチューニングケース（基本テンプレートの概要-G1）-ピット概要ハイライト21を踏む（週に1回更新）
Node Sass は現在の環境のバインディングを見つけることができませんでした
RabbitMQのコマンドラインの使用方法は、手動でキューrabbitmqadminを作成します
币圈韭菜十大致命操作（八）热爱幻想，无视现实
Wide Face+YOLOV7 顔検出
shrioの研究ノート
Eclipseは「：不明なMavenの設定の問題」を示します
6512. [3.18] GDOI2020シミュレーションツリーとパス
不像总结的总结
アーカイブ
もっと
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(35)
2024-04-29(5)
2024-04-28(12)

コードワールド

© 2018 codetd.com