ガールフレンドに PHP と HTML の学習方法を教える①
- WBOYオリジナル
- 2016-06-23 13:34:291080ブラウズ
[目次]
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 ページには 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个尖括号括起来，如93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1。
Ⅲ.html标签多数是双标签，包含起始标签和结束标签。如，双标签b，包含起始标签a4b561c25d9afb9ac8dc4d70affff419和结束标签0d36329ec37a2cc24d42c7229b69747a。
双标签中间的文本是Html标签的内容。如，双标签b，a4b561c25d9afb9ac8dc4d70affff419hello,world0d36329ec37a2cc24d42c7229b69747a，a4b561c25d9afb9ac8dc4d70affff419和0d36329ec37a2cc24d42c7229b69747a中间的文本是b标签的内容。
Ⅳ.少数html标签为单标签。如，df250b2156c434f3390392d09b1c9563、231a563c997aa9e3e0ae614bd16728b0、3ce8c4d7b079e6a00186f2ad9381e71e、73a3ca28445b1c625f2086a50cb8c7df。
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 | 规定元素的额外信息（可在工具提示中显示） |
如，9a5e5042d33fbcacce1680dcf8ce06ff。
3.3 Html符号实体
一些字符在 HTML 中拥有特殊的含义，比如小于号 (88b1c018d667315917c7551569484fe9
| ￠ | 分 | ¢ | ¢ |
| £ | 镑 | £ | £ |
| ¥ | 日圆 | ¥ | ¥ |
| § | 节 | § | § |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
三、HTML标签
1. HTML文档注释
1.1 HTML文档注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器解析显示html文档内容时会忽略注释。也就是说，读者/用户并不会看到注释的内容。
语法：8696906cb4e06302a9b00ba4c3476132
包含在f69bf4a9fcda7e39ab7680cbdd8ba73f之间的内容就是注释的内容。
提示：合理地使用注释可以对代码编辑工作产生帮助。
1.2 如何查看HTML文档源码/源文件
在浏览网页时，遇到精美的网页，可能会在惊叹设计者对网页的制作时，也会想要将这种设计应用到自己的网页开发当中，这时便要了解如何在浏览网页时，查看HTML文档的源码。
您是否有过这样的经历，当你看到一个很棒的站点，你会很想知道开发人员是如何将它实现的？
你有没有看过一些网页，并且想知道它是如何做出来的呢？
要揭示一个网站的技术秘密，其实很简单。单击浏览器的“查看”菜单，选择“查看源文件”即可。随后你会看到一个弹出的窗口，窗口内就是实际的 HTML 代码。
2. HTML标签??html
2.1 介绍
html标签用于告知浏览器，当前解析的文档是一个html文档。
html标签为双标签，开始标签100db36a723c770d327fc0aef2ce13b1和结束标签73a6ac4ed44ffec12cee46588e518a5e之间的内容（即html标签的内容），构成html文档的内容。
html标签的内容包含2个部分：头部（head）和主体（body）。
文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。
绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
这些标签可用在 head 部分：dde6fb694e6711ae5e6f381704c04ae4, 2cdf5bf648cf2f33323966d7f58a7f3f, e8e496c15ba93d81f6ea4fe5f55a2244, 3f1c4e4b6b16bbbd69b2ee476dc4f83a, c9ccee2e6ea535a969eb3f532ad9fe89, 以及 b2386ffb911b14667cb8f0f91ea547a7。
其中title标签定义文档的标题，为了能够准确表示html文档信息内容，head部分必须包含title标签。
文档的主体包含了文档需要呈现给读者/用户的全部内容。
body包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。
可用在主体部分的标签有很多很多，下面会陆续介绍常用在主体部分的标签。
2.2 案例
代码：demo2.html，位于C:\html目录下。<html><head> <!-- 下面这部分是为了让页面显示中文时不出现乱码 --> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <!--文档标题--> <title>demo2</title></head><body> body标签之间的文本为html文档的主体</body></html>测试
使用浏览器打开demo2.html文件，显示效果如下图：
说明：
Ⅰ.地址栏显示demo2.html文件的本地存放地址；
Ⅱ.标题栏显示头部部分title标签的内容；
Ⅲ.内容区显示主体部分body标签的内容。
3. HTML常用标签[body部分]??标题
3.1 介绍
标题（Heading）是通过 4a249f0d628e2318394fd9b75b4636b1 - 4e9ee319e0fa4abc21ff286eeb145ecc 等标签来表示的，常用来表示文章的标题。
具体标题标签有h1、h2、h3、h4、h5和h6，随着编号的逐渐增大，标题标签的内容大小和粗细会逐渐减小。
标题标签属于块级标签，浏览器会自动地为块级标签后添加一个空行，也就是有换行的显示效果。
提示：
请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
3.2 案例：标题标签的使用
代码：demo3.html，位于C:\html\目录下<html><head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>demo3</title></head><body> <h1>一号标题</h1> <h2>二号标题</h2> <h3>三号标题</h3> <h4>四号标题</h4> <h5>五号标题</h5> <h6>六号标题</h6></body></html>测试
使用浏览器打开demo3.html，本地运行Html文档。
说明：
Ⅰ.从浏览器内容区的显示效果可以看出，标题标签随着编号的逐渐增大，标题标签的内容大小和粗细会逐渐减小。
Ⅱ.可以看出不同标题标签处在不同的行，这是因为标题标签属于块级标签，浏览器会自动地为块级标签添加一个空行，显示为换行的效果。
4. HTML常用标签[body部分]??水平线
4.1 介绍
231a563c997aa9e3e0ae614bd16728b0标签为单标签。
231a563c997aa9e3e0ae614bd16728b0 标签用于在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
通常使用水平线 (f32b48428a809b51f04d3228cdf461fa 标签) 来分隔文章中的小节（但并不是唯一的办法）。
4.2 案例：水平线标签的使用
代码：demo4.html，位于C:\html\目录下。<html><head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>demo4</title></head><body><h3>何以笙箫默</h3>既然琴瑟起，何以笙箫默。<hr />悄悄是别离的笙箫，沉默是今晚的康桥。</body></html>测试
使用浏览器本地运行demo4.html文件，选中demo4.html，单击右键选择浏览器打开。
说明：
“何以笙箫默”为文章的标题；“既然琴瑟起，何以笙箫默。”为文章的内容；“悄悄是别离的笙箫，沉默是今晚的康桥。”为文章第二小节的内容。
5. HTML常用标签[body部分]??段落
5.1 介绍
段落标签p为双标签。
段落标签p用来描述html文档中的一段内容。
段落标签p属于块级标签/元素。
浏览器会自动地为块级标签添加一个空行，显示为换行的效果。
提示：
使用内容为空的段落标签e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3 去插入一个空行是个坏习惯。用换行标签df250b2156c434f3390392d09b1c9563代替它！也就是说，不要使用段落标签来达到换行的效果，段落标签的内容也该是一大段文本内容。
5.2 案例：段落标签的使用
代码：demo5.html，位于C:\html目录下。<html><head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>demo5</title></head><body><h3>再别康桥</h3><p>但我不能放歌，</p><p>悄悄是离别的笙箫；</p><p>夏虫也为我沉默，</p>沉默是今晚的康桥。<p></p>悄悄是别离的笙箫，沉默是今晚的康桥。</body></html>测试
使用浏览器打开demo5.html，显示效果如下：
说明：对比demo5.html的源码，可以看出使用“
6. HTML常用标签[body部分]??控制文本显示格式
6.1 介绍
在HTML开发中，很多时候都需要控制文本的显示显示格式，如，斜体字、加粗、下划线，文本是代码时显示为代码的格式等。这时就会使用到下面的标签。
文本格式化标签| a4b561c25d9afb9ac8dc4d70affff419 | 定义粗体文本。 |
| 3d49bde0e0b2e042578ad34140b6c48e | 定义大号字。 |
| 907fae80ddef53131f3292ee4f81644b | 定义着重文字。 |
| 5a8028ccc7a7e27417bff9f05adf5932 | 定义斜体字。 |
| d015d241ae6d34c34210679b5204fe85 | 定义小号字。 |
| 8e99a69fbe029cd4e2b854e244eab143 | 定义加重语气。 |
| b96cac025db4031319c29e1eb68f19d6 | 定义下标字。 |
| 2cdea26b4c3988e37d674b56660962a7 | 定义上标字。 |
| 426be984ffbbb815d7d88e3543a85d91 | 定义插入字。 |
| 823db3943044a0a9a620ada8d4b1d965 | 定义删除字。 |
| 2e44d2d3284d23d932e1fd85f3d4cf3a | 不赞成使用。使用 823db3943044a0a9a620ada8d4b1d965 代替。 |
| 533df51242d4fe18c58d599b7d69a4e4 | 不赞成使用。使用 823db3943044a0a9a620ada8d4b1d965 代替。 |
| 88f336217b3880082bb52d49b5de60a5 | 不赞成使用。使用样式（style）代替 |
当显示在页面中的内容为一段代码时，需要保留代码中的显示格式（缩进、换行、空格）时，就可以使用下面的这些标签。
|标签| 描述|
|----|------|
|ffbe95d20f3893062224282accb13e8f| 定义计算机代码。|
|5e4e803d53d659f332070b5d4aa430db| 定义键盘码。|
|640f40fb452cf109989689670c5a4003 定义计算机代码样本。|
|78f983dbc27872ba42409adefe5049d9| 定义打字机代码。|
|b7f90f73cad438258bf67e62f79b2113| 定义变量。|
|e03b848252eb9375d56be284e690e873| 定义预格式文本。|
|eca8cfce48cd8f3ae6cb7e888344fec6| 不赞成使用。使用 e03b848252eb9375d56be284e690e873 代替。|
|3ebc223d94886c7b1607d2157549579c| 不赞成使用。使用 e03b848252eb9375d56be284e690e873 代替。|
|43e1fc467495bab219a3286f74139f6a| 不赞成使用。使用 e03b848252eb9375d56be284e690e873 代替。|
6.2 案例：文本格式化标签的使用
代码：demo6.html，位于C:\html目录下。<html><head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>demo6</title></head><body> <h3>文本格式化标签</h3> 普通 <b>加粗</b> <big>加大</big> <em>着重</em> <i>斜体</i> <strong>加重</strong> <sub>下标</sub> <sup>上标</sup> <ins>插入字</ins> <del>删除字</del></body></html>测试
使用浏览器打开demo6.html，显示效果如下：