フロントエンドHTMLとCSSの基礎知識を体系的に解説した必読の書

フロントエンド

1 フロントエンドとは何ですか?

フロントエンドとは、PC、モバイル、その他のブラウザーで実行され、ユーザーが閲覧する Web ページを表示する Web サイトのフロントエンド部分です。インターネット技術の発展、HTML5、CSS3、およびフロントエンド フレームワークのアプリケーションにより、クロスプラットフォームのレスポンシブ Web デザインがさまざまな画面解像度に適応できるようになり、完璧な動的デザインがユーザーに非常に高いユーザー エクスペリエンスをもたらすことができます。

フロントエンド テクノロジーは、一般にフロントエンド デザインとフロントエンド開発に分けられます。フロントエンド デザインは一般に Web サイトのビジュアル デザインとして理解でき、フロントエンド開発は Web サイトのフロントエンド コードの実装です。基本的な HTML、CSS、JavaScript を含む Web サイト

2 フロントエンド開発のためのテクノロジースタック

HTML

• ハイパーテキストマークアップ言語

• 「ハイパーテキスト」とは、ページに画像、リンク、その他の情報を含めることができることを意味します-音楽やプログラムなどのテキスト要素

• はページの構造を完成させる責任があります

CSS

• カスケードスタイルシート

• はスタイルデザイン、スタイル、美しさを担当します。ページ

JavaScript

• ブラウザ上で作成して実行できるブラウザスクリプト言語プログラム

• 適切なプログラミング言語

• は、ページの特殊効果を作成し、ブラウザのAPI( BOM)、ページコンテンツの操作と変更(DOM)、バックエンドからのデータ取得(Ajax)、ページのレンダリングなど

• jQueryはJavaScriptのライブラリです

• Vue、Angular、ReactなどはJavaScript フレームワーク

HTML5 の基本

1.HTML

1.1 HTML とは

• HTML が使用される Web マークアップを作成する言語

• HTML は、Hypertext Markup Language の英語の略称、つまり Hypertext Markup です言語

• HTML言語は、コンパイルを必要とせず、ブラウザで直接実行できるマークアップ言語です

• HTMLファイルはテキストですファイルには、いくつかのHTML要素、タグなどが含まれています

• HTMLファイルファイル名のサフィックスを使用する必要があります

• HTML はサイズに依存しないため、小文字を使用することをお勧めします

• HTML は W3C です

• HTML は (World Wide Web Consortium) によって管理されていますWEB テクノロジーの世界への鍵

1.2 開発履歴

• HTML はバージョン 2.0 から始まりました。実際、1.0 の正式な仕様は存在しません。1993 年 6 月に Internet Engineering Task Force (IETF) として公開されました。 3 月のドラフト (標準ではない) HTML 2.0 — 1995 年 11 月に RFC 1866 として発行され、2000 年 6 月に RFC 2854 が発行された後、廃止されたと宣言されました

• HTML 3.2 — — 1997 年 1 月 14 日、W3C 推奨標準

• HTML 4.0 — 1997 年 12 月 18 日、W3C 推奨標準

• HTML 4.01 (マイナー改善) — 1999 年 12 月 24 日、W3C 推奨標準

• HTML 5 - 2014 年 10 月 28 日、W3C 推奨標準 (現在は HTML5 を使用しています) )

1.3 HTML5 の起源

• HTML5 ドラフトの前身は Web Applications 1.0 と呼ばれ、2004 年に WHATWG によって提案され、2007 年に W3C によって承認され、新しい HTML ワーキング チームが設立されました。

• HTML 5 の最初の公式ドラフトは、2008 年 1 月 22 日に発表されました。 HTML5 はまだ開発中です。ただし、最新のブラウザのほとんどはすでに HTML5 をある程度サポートしています。

• 2012 年 12 月 17 日、World Wide Web Consortium (W3C) は、多数のネットワーク関係者の努力を凝縮した HTML5 仕様が正式に完成したと正式に発表しました。 W3C のスピーチによると、「HTML5 はオープン Web ネットワーク プラットフォームの基礎です。」

• 2013 年 5 月 6 日に、HTML 5.1 の正式なドラフトが発表されました。この仕様は、World Wide Web の中核言語であるハイパーテキスト マークアップ言語 (HTML) を初めて改訂した 5 番目のメジャー バージョンを定義しています。このバージョンでは、新しい要素の相互運用性を向上させるために、Web アプリケーション作成者を支援する新機能が継続的に導入されています。

• 2014 年 10 月 29 日、World Wide Web コンソーシアムは、8 年近くの努力を経て、標準仕様がついに完成したと発表しました。

1.4 HTML5 の利点

1. 使いやすさを向上させ、ユーザーフレンドリーなエクスペリエンスを向上させる
2. 開発者が重要なコンテンツを定義するのに役立ちます。サイトにさらに多くのマルチメディア要素 (ビデオとオーディオ) を導入します
4. Web サイトのクロールとインデックス作成に関しては、SEO に非常に適しています。 (検索エンジン);
6. モバイルアプリケーションやゲームで広く使用されます。
1.5 HTML5互換性
Internet Explorer 9以降
chrome、Safari、opera、Firefox、およびwekkitをコアとするさまざまな国内ブラウザ
2 基本的なHTML構文

2.1タグ

* タグは HTML の最も基本的な単位であり、重要なコンポーネントです

• * 通常、 の 2 つの山括弧を使用します

* タグは閉じられています (ペアまたはペアになっていない 2 つの形式)。

* 双标签（成对）： 可以加内容标签名> 如：`

内容` 显示开始结束

* 单标签（不成对）： 两个单标签内不可加内容 如： `
`   ,   `

---

`   里面的左斜杠可以省略

* 标签大小写都可以，推荐使用小写

* 对与HTML标签来将，最重要的是语义

2.2 HTML标签属性

• HTML属性一般都出现在HTML的开始标签中, 是HTML标签的一部分。

• 标签可以有属性,它包含了额外的信息.属性的值一定要在双引号中。

• 标签可以拥有多个属性。

• 属性由属性名和值成对出现。

• 语法格式如下：

标签名>

单标签

双标签

2.3 HTML代码格式

任何回车或空格在源代码中都是不起作用，一般标签嵌套用缩进所以在编写HTML代码时，都可以使用回车或者空格进行代码排版，这样可以使代码清晰，也便于团队合作。必须保持严格的缩进规则，以Tab键为准。

2.4 HTML 注释

 

可以在里面写单行注释，也可以写多行

注释里的！符号和-- 要连起来不能空格

2.5 HTML实体

注意：用来表示特殊符号，跟转义字符有像

• &nbsq; 表示一个空格

• <表示特殊符号 <

• > 表示符号

• ©表示版权符号 ©上海公安 版权号333333455

• ¥表示人民币符号 ¥1000

• &表示实体本身& 如果是空格则就显示& 如果是符号 则&符号

3 HTML常用标签

文档声明

3.1 主体结构

•  此元素可告知浏览器其自身是一个 HTML 文档。

• 用于定义文档的头部，它是所有头部元素的容器,对文件的描述。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

• 代表文件内容,定义文档的主体

3.2HEAD头部标签

• 双标签内写标题，网页标题

• 标签为页面上的所有链接规定默认地址或默认目标

• 写在最上面，因为下面有输入字符，指定网页的元信息可指定字符编码，关键字，描述信息属性：charset , name ,content

            指定编码

• 导入css 文档，或者指定的网页图标 属性 src ， type ，rel

从文件导入css 

h1{

color: red;

}

• <script></script>标签用于定义客户端脚本，比如 JavaScript。script 元素既可以包含脚本语句，也可以通过 src 属性指向外部脚本文件。

<script></script>

alert('OK')

排3.3 タグ & LT; & LT;/Hn & GT; 出力

• ---

  区切り文字

• セマンティクスのないタグ

削除された内容には下線が付きます
/ Hellonihao Hello

• CSS基本構文

CSSを使用
リンクは外部CSSファイルを紹介します

mm

pt

CSSカラー単位

colorName: 赤/緑/青/紫/オレンジ/黄/ピンク/スカイブルー

• rgb番号 rgb(34,45,23) rgb(20%, 57%, 100%)
  16進数 #abcdef #f90 #ccc
• 5 CSSセレクター
  #タグ名セレクター
• tagName {
  }

# クラス名

.className {

}

#IDセレクター

#idName {

}

# グローバルセレクター

* {

}

# 結合された子孫要素

selector selector .list li

# 結合された子要素

selector>selector .list>li

# グループ

selector, selector, selector h1,h2,p ,.list

# 複数の条件 .item.frist_item

p .item

6 セレクター優先度

ID > タグ名 > フォントファミリー: "Arial"、"Helvetica"、"宋体"サンセリフ; またはセリフフォント serif

font-size フォントサイズ 10px 1.3em は問題ありません

font-weight 標準/太字フォント幅のデフォルトと太字

フォントスタイル標準/斜体フォントスタイルのデフォルトitalic

font-variant normal/small-capsデフォルトの小さなキャップ

単語間隔の単語スペース

文字間隔の文字 1px 2em 2 単語スペース

text-align: left / center /right テキストの水平方向の配置左中央左揃え

vertical-align: ベースライン / middle .... 画像とテキストのデフォルトの垂直方向の配置方法は中央です

line-height 行の高さが 1 行の場合、高さは行の高さと同じになります。左揃えになります。

text-decoration: none/overline/underline/line-through テキスト装飾のデフォルトは上線、下線、取り消し線です。

text-indent : テキストの最初の行をインデントします。

word-wrap: Break-word 単語が長すぎるか、URL を折り返すことができます

overflow-wrap ワードラップのエイリアス CSS3

white-space pre pre-wrap 予約済みテキストが境界に達したら折り返す

• 関連記事:

• フロントエンドの基礎(ゼロ)CSSの基礎

• フロントエンド初心者のための学習メモ - html/css/jsの基礎知識のポイント

• 関連ビデオ:

HTML と CSS の基本的な入門ビデオ チュートリアル - 無料のオンライン ビデオ チュートリアル

以上がフロントエンドHTMLとCSSの基礎知識を体系的に解説した必読の書の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。