HTML
2015-8-31
HTML HyperText Markup Language (ハイパーテキスト マークアップ言語)
は純粋なテキスト タイプの言語です。 Web ページ上のコンテンツを識別するには、山括弧付きの「タグ」を使用します。
Web ページのデザインに使用されるマークアップ言語
この言語で書かれ、拡張子として .html または .htm が付くファイル
ブラウザによって解釈および実行されます
HTML ページでは、スクリプト言語で書かれたプログラムセグメントをネストできます。例: VBScript、JavaScript
HTML 基本構文
1. マークアップ構文
関数を記述するために使用される HTML 記号は、
、
閉じたタイプのタグと閉じていないタイプのタグがあります
閉じた: 開始と終了を持つペアで表示され、二重タグとも呼ばれます。例:
非閉鎖: 開始のみで終了はなく、単一ラベルとも呼ばれます。例:
、
2. 要素、つまりタグ
各山括弧で囲まれた部分
例えば、
で囲まれた部分; これは body 要素と呼ばれます要素は小さなラベルのようなもので、Web ドキュメントのさまざまな部分を識別するために使用されます
要素にはテキスト コンテンツやその他の要素を含めることも、空にすることもできます。前に説明した空のタグ
要素のネスト
要素を相互にネストして、より複雑な構文を形成することができます注: ネストされたタグの順序に注意してください。コードはインデントされる必要があります。
属性と値 3.
属性は要素を変更するために使用されます
<タグ名 属性名="属性値" 属性名="属性値">
属性の宣言は開始タグに配置する必要があります; 要素には複数の属性が含まれる場合があります。複数の属性の順序は区別されません
各属性には値があります
属性と属性値は等号で接続されます。< p align=”center”>これは P
標準属性 (パブリック属性、共通属性):
ほとんどのタグが持つ属性、
例: id (タグの定義) 一意の識別名)
タイトル (現在のラベルが配置されている領域にマウスを移動したときに表示されるテキスト)
クラス (スタイル シート内の指定されたクラス スタイルを参照)
スタイル (現在のラベルのインライン スタイルを定義します)
4. コメント
コメントはドキュメントの編集時にのみ表示され、ブラウザーがページを表示するときには表示されません
適切なコードを追加するのは良いコーディング習慣です。コードにコメントを追加します
コメントを追加するための構文は次のとおりです:
追記: "" の間にあるもの。 " はブラウザに表示されません。コメントを他のコメント内にネストすることはできません。コメントを <> タグに埋め込むことはできません。
5、HTML および XHTML、HTML5
1999 年 12 月 24 日、W3C は標準 HTML4 を推奨しました。 01
標準
は HTML4.01 とほぼ同じです。HTML のより厳密で純粋なバージョンです
HTML5 の目標は、より簡潔な HTML コードです (厳密な要件はなくなり、互換性が保証されます)6。 HTML ドキュメントの数
ドキュメント タイプ宣言
ドキュメント全体の要素を含む
ページ ヘッダー
ページの主要部分
-- ---------------------------------------------------- -------
2015-9-01
1.
機能: Web ページのヘッド、主に Web ページの説明情報が含まれます。
① Web ページのタイトル
---タイトル タグには属性がありません。 Web ページには最大でもタイトルしか含めることができません。
② Webページのエンコード形式
デフォルトのエンコード: ISO-8859-1
メタタグ別
m タグ & lt; メタ charset = "utf-8"/& gt;
& & & lt; (JavaScript) スクリプト;script>
⑥外部 js (JavaScript) スクリプトを導入します
⑦キーワード、説明などのその他の要素を宣言します
Web ページの説明とキーワードを追加します。メタ: 一般に、情報を説明するステートメント。
常用属性：http-equiv(编码) content name charset（编码）
添加关键
添加描述
2、文本标记
作用：文本是网页上的重要部分；直接书写的文本会用浏览器的样式显示；包含在标记中的文本则会被显示为标记所拥有的样式。
特殊字符：通过转义字符(改变了单词的原有的意思，被解释成一种全新的含义)来表示特殊符号.
空格：
< ：< 小于
> ：> 大于
¥ ：¥ 人民币
©：© 企业标识
“：" 引号
文本样式：对文本进行修饰。
... 加粗
...倾斜
...下划线
...删除线
...上标
...下标
3、标题元素
标题元素让文字以醒目的方式显示，旺旺用于文章的标题
一级标题 二级标题.
.
六级标题4、段落元素
P提供了结构化文本的方式，具备一定的格式。
与其他文本用换行区分；添加垂直空白距离，作为段落的间距
P标签的常用属性：align：文本在p标签内的水平对齐方式
align=”center/left/right”
5、换行标记
在任何地方创建手工换行
6、分区元素
多用于布局；方便以后对文本添加不同的样式
块分区元素：该元素会自动占一行
インライン パーティション要素: 多くのインライン要素は折り返されず、1 行で表示されます
7. ブロック レベルの要素とインライン要素
ブロック レベルの要素: div、 p、hr、hn、ol、ul....
関数: Web ページのレイアウトに主に使用されます
インライン要素: span、b、s、u、i、sub、sup....
関数: 周囲テキスト、テキストに効果を追加するのに便利です
8. 分割線
機能: Web ページ上に水平線を作成します。空のタグ。ブロックレベルの要素に属します。
よく使用される属性: size: 水平線のサイズ、太さ
width: 水平線の長さ。 (値は特定の値またはパーセンテージにすることができます(ブラウザのサイズに応じて調整できます))
align: 水平方向の配置 (中央、左、右)
color: カラー
9. 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. 画像要素属性: src: 画像を表示するパスを指定します
width: 画像の幅
height: 画像の高さ
: 画像上に表示されているテキストにマウスを移動します
alt: 画像が表示されていない場合のテキスト
3. リンク要素ハイパーリンクを作成するには、 要素を使用します。構文は次のとおりです:
Text
属性: href: リンク URL
target: target、可能な値は _blank (open新しいウィンドウで)、_self (Web ページが配置されているページで開きます)
name: アンカー名
さまざまな形式のリンク:
① ダウンロード リソース: ダウンロード
② ページジャンプ: ウェブページ
③メールリンク: お問い合わせください
④ ページに戻る空のリンク:
⑤ JavaScript へのリンク: < ;a href=”javascript”>JS
アンカークリック
次の方法でアンカーポイントを定義します: HTMLのアンカーポイントは、HTML文書内の特定の位置にあるマークに相当します
アンカーを定義しますpoint:
アンカーポイントにジャンプ:
他のアンカーポイントにジャンプ: < ;a href=”ページurl#アンカー名”>< ;/a>
2015-9-02
4. テーブル要素
の役割テーブル: 固定フォーマットによる情報のレイアウト。
| (セル) テーブルに配置されるすべてのコンテンツはtdに配置する必要があります
|
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
