ガールフレンドに PHP と HTML の学習方法を教える①-PHPチュートリアル-php.cn

[目次]

Web デザインのための HTML を簡単に扱える

1. HTML の概要

HTML (Hyper Text Markup Language)、つまり Hyper Text Markup Language。現在、インターネット上で最も広く使用されている言語であり、Web ドキュメントを構成する主要な言語です。

HTML テキストは、HTML で構成される説明的なテキストであり、HTML コマンドでテキスト、グラフィック、アニメーション、サウンド、表、リンクなどを図解/説明できます。

HTML の構造は、head と body の 2 つの部分で構成されます。head にはブラウザが必要とする情報が記述され、body には説明が必要な具体的な内容が含まれます。

1.1 HTML とは何ですか?

HTML は、Web ページを作成することを主な目的としています。 HTML言語の記述により、Webページ上にテキスト、画像、動画、音声などのコンテンツを表示することができます。

1.2 HTML でできること

HTML は、テキスト、グラフィック、アニメーション、サウンド、表、リンク、その他のコンテンツを含めて美しい Web ページを形成できる

静的 Web ページ

を作成できます。 Web ページは、静的 Web ページ
(html ページ) と動的 Web ページ (php/jsp/asp/asp.net/cgi ページ) に分けられます。

静的 Web ページ

: ユーザーにコンテンツ情報を提示するために使用され、データに関してユーザーと対話することはできません。静的 Web ページには Flash アニメーションコンテンツが含まれていたり、JavaScript Web ページを通じて「動的効果」を生成したりできますが、それでも静的 Web ページです。

動的 Web ページ

: ユーザーにコンテンツを提示するだけでなく、ユーザーとデータをやりとりすることもできます。静的 Web ページとの違いは、動的 Web ページには「機能」があることです。例えば、ユーザー投稿機能を実現するには、動的Web技術を利用してユーザーの投稿内容を受信し、プログラム処理によりユーザーの投稿内容をフォーラムに表示する必要があります。 2. HTML 開発の歴史

2.1 HTML 開発の歴史

ティム・バーナーズ・リー、World Wide Web の父、HTML の設計者、W3C 組織の創設者。

1993 年にマークアップ言語の初版、

html2.0 が 1996 年に W3C 推奨標準、

xhtml1.0 が 2001 年に W3C 推奨標準、 .1;
2008 年の HTML5...

説明: 1999 年に、HTML は徐々に XML に向かって発展し、xhml が登場しました。 xhtml は html の拡張バージョンとして理解できます。 html の文法要件は単純ですが、xml の文法要件は非常に厳密であり、html から xml への移行の中間と見なすことができます。

2.2 W3C 組織の紹介

W3C は英語の World Wide Web Consortium の略称で、W3C 評議会またはワールドワイドウェブコンソーシアムと訳されます。 W3C は、World Wide Web の発明者であるティムバーナーズリーによって 1994 年 10 月に MIT コンピュータサイエンス研究所に設立されました。

W3C 組織は、HTML、XHTML、CSS、XML などの標準を策定するネットワーク標準を専門とする非営利組織です。 W3C のメンバーには、テクノロジー製品およびサービスのメーカー、コンテンツプロバイダー、グループユーザー、研究所、標準設定組織、政府部門が含まれており、World Wide Web の開発方向について合意に達するために協力しています。

2.3 HTML と XHTML の違い

開発方向: html→xhtml→xml。

HTML 言語自体にはいくつかの欠陥があります (たとえば、コンテンツとスタイルを分離できない、タグが 1 つである、データを再利用できないなど)。XML の台頭により、XML はますます国際的に認知されるようになりました。 HTML の欠点を補うために XML を使用したいと考えていますが、現在、HTML に基づいて作成された Web ページが何千もあり、それを完全に XML に置き換えることは非常に難しいため、W3C 組織は 2000 年に XHTML1.0 を発表しました。

XHTML 標準を確立する目的は、HTML から XML への移行をよりスムーズにすることです。

3. HTML の動作原理

3.1 HTML ファイルの実行方法

HTML ファイルを実行するには、

ローカル操作

と

リモートアクセス

操作の 2 つの方法があります。

ローカルで実行

: HTML ファイルを選択し、マウスを右クリックしてブラウザで開くを選択し、実行結果を確認します。 HTML ファイルは、コンピュータのディスク上の任意のフォルダに保存できます。リモート操作: ブラウザのアドレスバーに「リモートサーバーのIPアドレス+パス+HTMLファイル名」を入力して、指定したHTMLファイルにアクセスして実行します。 HTML ファイルは、Apache サービスの www/htdocs フォルダーなど、サーバー内の指定されたフォルダーに保存する必要があります。ケース: C:html ディレクトリにある
demo.html (コンピューターの C ドライブを開き、C ドライブに html という名前の新しいフォルダーを作成します)、次のコードを記述します。

<html><head>	<meta http-equiv="content-type" content="text/html;charset=utf-8">	<title>HTML运行方式</title></head><body>Hello,world</body></html>

ログイン後にコピー

ブラウザ関連の知識 ブラウザを使用して、demo.html ファイルを開きます。ここでは ie11 ブラウザを使用しています。ブラウザの情報は次のとおりです。

ブラウザ構成の紹介

: ie11 ブラウザを例として説明します。ブラウジングデバイスの構成。

地址栏；输入地址可以访问网页。
标题栏；显示网页的标题。
常用/快捷命令栏；第一个表示快捷打开主页，第二个表示快捷收藏网页，第三个表示快捷设置。
菜单栏；通过菜单栏可以对浏览器进行设置。
收藏栏；显示用户收藏的网页。
命令栏；
状态栏；显示浏览网页时的页面状态。
内容区。
最大化、最小化、关闭按钮位于浏览器的右上角；可以最大化、最小化、关闭浏览器窗口。
下拉按钮；当内容区有很多的显示内容，浏览器内容区因窗口大小限制，无法一次性显示页面全部内容。浏览器的右侧会出现一个下拉按钮，鼠标拖动下拉按钮可以查看更多的内容。

本地运行

选中带有html后缀名的文件→单击鼠标右键→打开方式→选择浏览器。
运行结果如下：

说明：浏览器地址栏显示C:\html\demo.html，其中“C:\html\”为demo.html文件存放的磁盘路径，demo.html为文件的名称。

远程运行

浏览器地址栏输入“远程服务器的IP地址+路径+html文件名”访问执行指定html文件。

说明：
Ⅰ.127.0.0.1是服务器的ip地址，/html是demo.html文件在服务器下的存放路径，demo.html为html文件的名称。
Ⅱ.本案例中，使用的服务器是apache，demo.html文件存放在apache服务器指定的文件夹www下的html文件夹中。apache服务器的使用，在后续的PHP课程中再继续介绍。

3.2 .htm 还是 .html 文件后缀？

当您保存 HTML 文件时，既可以使用 .htm 也可以使用 .html 文件后缀。
区别：
Ⅰ.访问一个远程网站时，该网站服务器目录下同时有index.html和index.html，默认优先访问.html后缀的文件。
Ⅱ..htm后缀是因为很久前的软件后缀名只允许包含3个字母。html后缀是为了兼容以前的dos系统“8.3”命名规范，即文件名8个字符，后缀名3个字符。
Ⅲ.对于如今的软件，2种后缀名的html文件都可以正常执行。

二、HTML基本概念

1. html开发工具选择

html网页开发其实很简单，使用windows系统自带的记事本就可以进行。
当然，也可以较为简单的编辑器，如sublime Text，edit plus，vim，frontpage，dreamweaver。
也可以使用集成的开发工具（IDE），如zend studio，eclipse等。（笔者使用的是sublime text2）

2. html文件的基本结构

<html><head></head><body>	<标签 属性1="属性值" 属性2="属性值" ...>内容</标签>	<标签 属性1="属性值" /></body></html>

ログイン後にコピー

3. 什么是Html标签

一个html文档（文件），由多个html标签组成。
html标签也被称为html元素或html标记，这仅仅只是个人的习惯不同，其实这几种叫法并没有区别。
所以，元素、标记和标签其实是一个意思。

3.1 html标签/元素

结构：

<标签 属性1="属性值" 属性2="属性值" ...>内容</标签><标签 属性1="属性值" />

ログイン後にコピー

说明：
Ⅰ.html文档由多个html标签组成
Ⅱ.html标签用2个尖括号括起来，如。
Ⅲ.html标签多数是双标签，包含起始标签和结束标签。如，双标签b，包含起始标签和结束标签。
双标签中间的文本是Html标签的内容。如，双标签b，hello,world，和中间的文本是b标签的内容。
Ⅳ.少数html标签为单标签。如，
、

、、。

3.2 Html标签属性

Html标签通常都有多个属性，给属性设置不同的属性值可以控制Html标签在浏览器中的显示效果。
HTML标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以“名称/值”的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。

使用小写属性：
属性和属性值对大小写不敏感。不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。而 XHTML 要求使用小写的属性/属性值。

始终为属性值加引号：
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：
name='Bill "HelloWorld" Gates'，name的属性值为Bill "HelloWorld" Gates。

适用于大多数 HTML标签的属性：

属性值描述

class	classname	规定元素的类名（classname）
id	id	规定元素的唯一 id
style	style_definition	规定元素的行内样式（inline style）
title	text	规定元素的额外信息（可在工具提示中显示）

如，。

3.3 Html符号实体

一些字符在 HTML 中拥有特殊的含义，比如小于号 (<) 用于定义 HTML 标签的开始。
如果我们希望浏览器正确地显示这些字符，我们必须在 HTML 源码中插入字符实体。
字符实体有三部分：
一个和号 (&)，一个实体名称，或者 # 和一个实体编号，以及一个分号 (;)。即“&实体名称;”或“&#实体编号;”。
使用实体名称而不是实体编号的好处在于，名称相对来说更容易记忆。而这么做的坏处是，并不是所有的浏览器都支持最新的实体名称，然而几乎所有的浏览器对实体编号的支持都很好。

注意：
: 实体名称对大小写敏感。如，&表示符号“&”，而&Amp;不能准确表示符合“&”。
: 要在 HTML 文档中显示小于号（<），我们需要这样写：< 或者 <

空格

空格是 HTML 中最普通的字符实体。
通常情况下，HTML 会裁掉文档中的空格。不管使用空格键添加多少个空格，浏览器解析HTML文档显示时，只会显示1个空格。所以，如果需要显示多个空格时，就要使用到，可以在文档中增加空格。

最常用的字符实体显示结果描述实体名称实体编号

	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	'(IE不支持)	'

其他字符实体显示结果描述实体名称实体编号

￠	分	¢	¢
£	镑	£	£
¥	日圆	¥	¥
§	节	§	§
©	版权	©	©
®	注册商标	®	®
×	乘号	×	×
÷	除号	÷	÷

三、HTML标签

1. HTML文档注释

1.1 HTML文档注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器解析显示html文档内容时会忽略注释。也就是说，读者/用户并不会看到注释的内容。
语法：
包含在之间的内容就是注释的内容。
提示：合理地使用注释可以对代码编辑工作产生帮助。

1.2 如何查看HTML文档源码/源文件

在浏览网页时，遇到精美的网页，可能会在惊叹设计者对网页的制作时，也会想要将这种设计应用到自己的网页开发当中，这时便要了解如何在浏览网页时，查看HTML文档的源码。
您是否有过这样的经历，当你看到一个很棒的站点，你会很想知道开发人员是如何将它实现的？
你有没有看过一些网页，并且想知道它是如何做出来的呢？
要揭示一个网站的技术秘密，其实很简单。单击浏览器的“查看”菜单，选择“查看源文件”即可。随后你会看到一个弹出的窗口，窗口内就是实际的 HTML 代码。