HTMLメモ(1)_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTMLメモ(1)_html/css_WEB-ITnose

Jun 24, 2016 am 11:33 AM

HTML

2015-8-31

HTML HyperText Markup Language (ハイパーテキストマークアップ言語)

は純粋なテキストタイプの言語です。 Web ページ上のコンテンツを識別するには、山括弧付きの「タグ」を使用します。

Web ページのデザインに使用されるマークアップ言語

この言語で書かれ、拡張子として .html または .htm が付くファイル

ブラウザによって解釈および実行されます

HTML ページでは、スクリプト言語で書かれたプログラムセグメントをネストできます。例: VBScript、JavaScript

HTML 基本構文

1. マークアップ構文

関数を記述するために使用される HTML 記号は、<p>、<h1> など、「タグ」と呼ばれます。タグの使用山かっこ (<>) で囲む必要があります

閉じたタイプのタグと閉じていないタイプのタグがあります

閉じた: 開始と終了を持つペアで表示され、二重タグとも呼ばれます。例: <a></a>

非閉鎖: 開始のみで終了はなく、単一ラベルとも呼ばれます。例: <br>、<hr>、<img>

2. 要素、つまりタグ

各山括弧で囲まれた部分

例えば、<body> で囲まれた部分;</body> これは body 要素と呼ばれます

要素は小さなラベルのようなもので、Web ドキュメントのさまざまな部分を識別するために使用されます

要素にはテキストコンテンツやその他の要素を含めることも、空にすることもできます。前に説明した空のタグ

要素のネスト

要素を相互にネストして、より複雑な構文を形成することができます

注: ネストされたタグの順序に注意してください。コードはインデントされる必要があります。

属性と値 3.

属性は要素を変更するために使用されます

<タグ名属性名="属性値" 属性名="属性値"></タグ名>

属性の宣言は開始タグに配置する必要があります; 要素には複数の属性が含まれる場合があります。複数の属性の順序は区別されません

各属性には値があります

属性と属性値は等号で接続されます。

< p align=”center”>これは P</p>

標準属性 (パブリック属性、共通属性):

ほとんどのタグが持つ属性、

例: id (タグの定義) 一意の識別名)

タイトル (現在のラベルが配置されている領域にマウスを移動したときに表示されるテキスト)

クラス (スタイルシート内の指定されたクラススタイルを参照)

スタイル (現在のラベルのインラインスタイルを定義します)

4. コメント

コメントはドキュメントの編集時にのみ表示され、ブラウザーがページを表示するときには表示されません

適切なコードを追加するのは良いコーディング習慣です。コードにコメントを追加します

コメントを追加するための構文は次のとおりです:

<!- - コメントのテキスト内容-->

追記: "" の間にあるもの。 " はブラウザに表示されません。コメントを他のコメント内にネストすることはできません。コメントを <> タグに埋め込むことはできません。

5、HTML および XHTML、HTML5

1999 年 12 月 24 日、W3C は標準 HTML4 を推奨しました。 01

標準

は HTML4.01 とほぼ同じです。HTML のより厳密で純粋なバージョンです

HTML5 の目標は、より簡潔な HTML コードです (厳密な要件はなくなり、互換性が保証されます)

6。 HTML ドキュメントの数

ドキュメントタイプ宣言 <!DOCTYPE html>

<html>ドキュメント全体の要素を含む

<head>ページヘッダー

<body>ページの主要部分

-- ---------------------------------------------------- -------

2015-9-01

1. <head >

機能: Web ページのヘッド、主に Web ページの説明情報が含まれます。

① Web ページのタイトル <title></title>

---タイトルタグには属性がありません。 Web ページには最大でもタイトルしか含めることができません。

② Webページのエンコード形式

デフォルトのエンコード: ISO-8859-1

メタタグ別

m タグ & lt; メタ charset = "utf-8"/& gt;

& & & lt; (JavaScript) スクリプト;script></script>

⑥外部 js (JavaScript) スクリプトを導入します

⑦キーワード、説明などのその他の要素を宣言します

Web ページの説明とキーワードを追加します。メタ: 一般に、情報を説明するステートメント。

常用属性：http-equiv(编码) content name charset（编码）

添加关键<meta name=”keywords” content=”关键字描述”/>

添加描述 <meta name=”description” content=”描述内容”/>

2、文本标记

作用：文本是网页上的重要部分；直接书写的文本会用浏览器的样式显示；包含在标记中的文本则会被显示为标记所拥有的样式。

特殊字符：通过转义字符(改变了单词的原有的意思，被解释成一种全新的含义)来表示特殊符号.

空格：

< ：< 小于

> ：> 大于

¥ ：¥ 人民币

©：© 企业标识

“：" 引号

文本样式：对文本进行修饰。

<b>...</b> 加粗

<i>...</i>倾斜

<u>...</u>下划线

<s>...</s>删除线

<sup>...</sup>上标

<sub>...</sub>下标

3、标题元素 <hn> </hn>

标题元素让文字以醒目的方式显示，旺旺用于文章的标题

<h1></h1> 一级标题

<h2></h2> 二级标题

<h6></h6> 六级标题

4、段落元素 <p></p>

P提供了结构化文本的方式，具备一定的格式。

与其他文本用换行区分；添加垂直空白距离，作为段落的间距

P标签的常用属性：align：文本在p标签内的水平对齐方式

align=”center/left/right”

5、换行标记 <br>

在任何地方创建手工换行

6、分区元素

多用于布局；方便以后对文本添加不同的样式

块分区元素：该元素会自动占一行

インラインパーティション要素: 多くのインライン要素は折り返されず、1 行で表示されます

7. ブロックレベルの要素とインライン要素

ブロックレベルの要素: div、 p、hr、hn、ol、ul....

関数: Web ページのレイアウトに主に使用されます

インライン要素: span、b、s、u、i、sub、sup....

関数: 周囲テキスト、テキストに効果を追加するのに便利です

8. 分割線 <hr>

機能: Web ページ上に水平線を作成します。空のタグ。ブロックレベルの要素に属します。

よく使用される属性: size: 水平線のサイズ、太さ

width: 水平線の長さ。 (値は特定の値またはパーセンテージにすることができます(ブラウザのサイズに応じて調整できます))

align: 水平方向の配置 (中央、左、右)

color: カラー

9. pre&gt ;</pre>

ソースファイル内のスペースと改行を保持します

1. 画像とリンク

URL: ネットワーク上のリソースを識別するために使用されます

テキスト、画像、音声ビデオファイル、段落、その他のハイパーテキスト

はパスであり、現在の場所からターゲットの場所へのルートを指します

Web ページには主に 3 つの形式のパスがあります:

絶対パス: から始まる完全なファイル最上位ディレクトリのパス

例: E:LXD_silenceHTML5BasicDay01demo01.html。

完全な URL 構成: プロトコル (http://); ホスト名またはドメイン名 (www.baidu.com); ::: Http://www.baidu.com/img/logo.gif

機能: いいえ現在のリソースパスが何であっても、絶対パスを使用して必要なリソースをいつでも見つけることができます。

相対パス: 現在のファイルの場所を基準としたファイルの相対的な場所を指します。これには、ディレクトリ名が含まれるか、現在のディレクトリから始まるファイルが見つかるパスを指します。

同じレベルで名前を使用します。子レベルのディレクトリを入力します。

ルート相対パス: /image/user.jpg

2. 画像要素 <img> を使用します。ページに画像を追加する <img> 要素は空のタグです <img />

属性: src: 画像を表示するパスを指定します

width: 画像の幅

height: 画像の高さ

: 画像上に表示されているテキストにマウスを移動します

alt: 画像が表示されていない場合のテキスト

3. リンク要素 <a></a>

ハイパーリンクを作成するには、<a> 要素を使用します。構文は次のとおりです:

属性: href: リンク URL

target: target、可能な値は _blank (open新しいウィンドウで)、_self (Web ページが配置されているページで開きます)

name: アンカー名

さまざまな形式のリンク:

① ダウンロードリソース: <a href=”bac.rar ”>ダウンロード</a>

② ページジャンプ: <a href=”abc.html”>ウェブページ</a>

③メールリンク: <a href=”mailto:zhaoxu@ tarena.com.cn”>お問い合わせください

</a> ;

④ ページに戻る空のリンク: <a href=”#”></a>

⑤ JavaScript へのリンク: &lt ;a href=”javascript”>JS</a>

アンカークリック

次の方法でアンカーポイントを定義します: HTMLのアンカーポイントは、HTML文書内の特定の位置にあるマークに相当します

アンカーを定義しますpoint: <a name=”anchorname”></a>

アンカーポイントにジャンプ: <a href=”#anchor name”></a>

他のアンカーポイントにジャンプ: &lt ;a href=”ページurl#アンカー名”>&lt ;/a>

2015-9-02

4. テーブル要素 <table></table>

の役割テーブル: 固定フォーマットによる情報のレイアウト。

<table>でテーブルを定義します

行を定義します<tr>

列を定義します<td> (セル)

テーブルに配置されるすべてのコンテンツはtdに配置する必要があります

<table>&lt ;/table>プロパティ

境界線のプロパティ: 境界線の境界線の幅

bordercolor 境界線の色

サイズ: 幅幅高さ高さ (絶対値またはパーセンテージにすることができます)

背景: bgcolor 背景色背景画像

詳細: 水平方向の配置を揃えます

セル間隔セル間の距離 (セルの外側の余白)

cellpaddingセル内のテキストとセルの境界線 (セルの内側の余白) の間の距離

<tr></tr>プロパティ

高さ

align セル内のコンテンツ水平方向の位置 (左/中央/右) )

valign セル内のコンテンツの垂直位置 (上/中/下)

<td></td> プロパティ

width width height

bgcolor 背景色

align 水平位置揃え valign 垂直位置整列

列の列のスパン

行の行のスパン

<caption></caption>属性

<caption>表のタイトル</caption> タイトルのデフォルトは表の上の中央に配置されます。 table タグの直後

<th></th> 属性

td と同じレベルの列タイトル (th はヘッダー、デフォルトは中央揃えで太字)

行のグループ化

ヘッダー行グループ化: thead

テーブル本体行グループ化: tbody

テーブルフッター行グループ化: tfoot

5. 構造マーク

header ドキュメントヘッダー、ページヘッダー (使用率が高く、同じページで複数回使用可能)

nav ナビゲーションは通常、ページ内のメインナビゲーションを作成するために使用されます。

section ドキュメントのセクション。ドキュメントのメインコンテンツ (頻繁に使用され、複数回使用できます)

aside メインコンテンツから独立したコンテンツ。サイドバー、サイドナビゲーションなど...

article 文書内で引用されたテキストの段落。記事、投稿、ブログなど...

footer 記事の終わり (頻繁に使用されます)

順序付きリスト: <ol></ol>

< : type: A / a / I / i / 1 シーケンスのスタイルを定義します (a/A/I/i/1)

start リスト項目の開始番号を定義します

リスト項目: <li> ;/li>

順序なしリスト: <ul></ul>

<ul>属性: ディスク/円/正方形 (実線の円、中空の円、正方形)

スタイル

リスト項目: <li></li>

定義リスト: <dl></dl>

それらのほとんどは、グラフィックとテキストの混合のスタイル効果に表示されます

<dl> 定義リスト

< dt></dt> リストタイトル(画像挿入可)

</dl>

① フォームタグ: <form></form> (フォームに配置されていないデータはサーバーに送信できません)

属性: action アクション (サーバーサイド開発者による、データを処理するサーバーのプログラムアドレス)

デフォルトでこのページに送信します。)

メソッドフォームがサーバーにデータを送信する方法

(平文または暗号テキスト)、デフォルト値: get

値: post データをサーバーに送信します。暗号文の形式、

転送されるデータの長さに制限なし

Get 平文の形式でサーバーにデータを送信します、

転送されるデータの長さを 2kb に制限します

name の名前を定義しますフォーム

enctype フォームデータのエンコード方法

②フォーム要素(コントロール)

機能: 特にユーザーデータを受け入れるための

1.Input要素

type: type

<input type=”text” / > テキストボックス。ユーザーによる通常のデータ入力を受け入れます

<input type=”password” /> パスワードボックス。

このコントロールを使用してパスワードを入力します

<input type="checkbox" />注: name 属性は一貫している必要があります

機能: フォームをサーバーに送信するために使用されます

<input type=””> リセットボタン。

機能: すべてのフォーム要素をデフォルト値に復元します

2、textarea 複数行テキストフィールド

3、select および option

4、その他の要素

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットツール Tags

コード&IT

オーディオ

仕事

マーケティング

AI検出器

チャットボット

デザイン&アート

ホットな記事タグ

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7307

Java チュートリアル

1623

CakePHP チュートリアル

1344

Laravel チュートリアル

1259

PHP チュートリアル

1207

Related knowledge

公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？ Mar 04, 2025 pm 12:32 PM

公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？ Mar 17, 2025 pm 12:27 PM

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？

WebページのPNG画像にストローク効果を効率的に追加する方法は？ Mar 04, 2025 pm 02:39 PM

WebページのPNG画像にストローク効果を効率的に追加する方法は？

＆lt; iframe＆gt;の目的は何ですかタグ？使用する際のセキュリティ上の考慮事項は何ですか？ Mar 20, 2025 pm 06:05 PM

＆lt; iframe＆gt;の目的は何ですかタグ？使用する際のセキュリティ上の考慮事項は何ですか？

＆lt; datalist＆gt;の目的は何ですか要素？ Mar 21, 2025 pm 12:33 PM

＆lt; datalist＆gt;の目的は何ですか要素？

＆lt; meter＆gt;の目的は何ですか要素？ Mar 21, 2025 pm 12:35 PM

＆lt; meter＆gt;の目的は何ですか要素？

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？ Mar 17, 2025 pm 12:20 PM

HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？

IFramesを使用することのセキュリティへの影響は何ですか？また、どのようにそれらを軽減できますか？ Mar 18, 2025 pm 02:51 PM

IFramesを使用することのセキュリティへの影響は何ですか？また、どのようにそれらを軽減できますか？

See all articles