ホームページ > 記事 > ウェブフロントエンド > フロントエンド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 年近くの努力を経て、標準仕様がついに完成したと発表しました。
2.1タグ
* 通常、< と > の 2 つの山括弧を使用します
* 双标签(成对):<标签名> 可以加内容标签名> 如:`
* 单标签(不成对):<标签名/> 两个单标签内不可加内容 如: `
` , `
* 标签大小写都可以,推荐使用小写
* 对与HTML标签来将,最重要的是语义
2.2 HTML标签属性
HTML属性一般都出现在HTML的开始标签中, 是HTML标签的一部分。
标签可以有属性,它包含了额外的信息.属性的值一定要在双引号中。
标签可以拥有多个属性。
属性由属性名和值成对出现。
语法格式如下:
<标签名 属性名1="属性值" 属性名2="属性值" ... 属性名N="属性值">
标签名>
单标签
双标签
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
<script></script>标签用于定义客户端脚本,比如 JavaScript。script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。
<script></p> <p>alert('OK')</p> <p></script>
排3.3 タグ & LT; & LT;/Hn & GT; 出力CSS基本構文