教女友学PHP之HTML①

[TOC] 轻松搞定网页设计之html

一、HTML介绍

1. HTML概念

HTML(Hyper Text Markup Language)，即超文本标记语言。是目前网络上应用最为广泛的语言，是构成网页文档的主要语言。

HTML文本是由HTML组成的描述性文本，HTML命令可以说明/描述文字、图形、动画、声音、表格、链接等。

HTML的结构包括头部（head）、主体（body）两部分，其中头部描述浏览器所需的信息，而主体则包含需说明的具体内容。

1.1 HTML是什么

HTML是超文本标记语言，主要的用处是制作网页。通过HTML语言的描述，可以在网页上显示文字、图像、视频和声音等内容。

1.2 HTML可以做什么

HTML可以编写静态网页，该静态网页可以包含文字、图形、动画、声音、表格、链接等内容，从而构成一个精美的网页。
网页分为静态网页（html页面）和动态网页（php/jsp/asp/asp.net/cgi页面）。

静态网页：用于向用户呈现内容信息，不能与用户进行数据交互。静态网页中可能包含flash动画内容，或者是通过Javascript网页能够产生“动态效果”，但依旧还是静态网页。

动态网页：不仅能够向用户呈现内容，能够与用户进行数据交互。与静态网页的区别在于动态网页带有“功能”。如，用户发帖功能的实现，就需要使用到动态网页技术，接收用户提交的发帖内容，经过程序处理，将用户发的帖子内容显示在论坛中。

2. html发展历史

2.1 html发展历史

蒂姆·伯纳斯·李万维网之父，html的设计者，W3C组织的创始人。
1993年标记语言第一版；
1995年html2.0；
1996年html3.2 W3C推荐标准；
1999年html4.0.1 W3C推荐标准；
2000年xhtml1.0 W3C推荐标准；
2001年xhtml1.1；
2008年html5...

说明：1999年html逐渐向xml发展，出现了xhml。xhtml可以理解成html的加强版。html语法要求简单，而xml语法要求非常严格，xhtml可以算是html向xml过渡的中间物。

2.2 W3C组织介绍

W3C是英文world wide web consortium的缩写，译为W3C理事会或万维网联盟。W3C于1994年10月在麻省理工学院计算机科学实验室成立，创建者是万维网发明者Tim Berners-Lee。

W3C组织是专门制定网络标准的一个非盈利组织，像HTML、XHTML、CSS、XML的标准就是由W3C来制定。W3C会员包括生产技术产品及服务的产商、内容供应者、团体用户、研究实验室、标准制定机构和*部门，一起协同工作，致力于在万维网发展方向上达成共识。

2.3 HTML和XHTML的区别

发展方向：html→xhtml→xml。

html语言本身存在一些缺陷（比如，内容和样式不能分离，标记单一，数据不能复用等），随着XML的兴起，XML越来越受到国际认可，所以人们希望用XML来弥补HTML的不足，但是目前已有成千上万的网页都是基于Html编写的，使用XML来完全代替存在很大难度，于是W3C组织在2000年推出XHTML1.0。

建立XHTML标准的目的就是为了在HTML向XML过渡时更加平滑。

3. HTML运行原理

3.1 html文件的运行方式

html文件的运行有2种方式：本地运行和远程访问运行。
本地运行：选中html文件，单击鼠标右键选择使用浏览器打开，即可以看到执行结果。html文件可以存放到电脑磁盘上的任意文件夹中。

远程运行：浏览器地址栏输入“远程服务器的IP地址+路径+html文件名”访问执行指定html文件。html文件必须存放在服务器下指定的文件夹中，如apache服务下的www/htdocs文件夹中。

案例：

demo.html，位于C:\html\目录（打开电脑的C盘，在C盘新建一个名称为html的文件夹）下，写下如下代码。

	Hello,world

浏览器相关知识

使用浏览器打开demo.html文件，我这里的使用的是ie11浏览器，浏览器信息如下：

浏览器组成介绍：以ie11浏览器为例，介绍浏览器的组成。

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

本地运行

选中带有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文件的基本结构

	内容标签>	

3. 什么是Html标签

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

3.1 html标签/元素

结构：

内容标签>

说明：
Ⅰ.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 源码中插入字符实体。
字符实体有三部分：
一个和号 (&)，一个实体名称，或者 # 和一个实体编号，以及一个分号 (;)。即“&实体名称;”或“实体编号;”。
使用实体名称而不是实体编号的好处在于，名称相对来说更容易记忆。而这么做的坏处是，并不是所有的浏览器都支持最新的实体名称，然而几乎所有的浏览器对实体编号的支持都很好。

注意：
: 实体名称对大小写敏感。如，&表示符号“&”，而&Amp;不能准确表示符合“&”。
: 要在 HTML 文档中显示小于号（ 空格

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

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

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

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

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

三、HTML标签

1. HTML文档注释

1.1 HTML文档注释

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

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

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

2. HTML标签??html

2.1 介绍

html标签用于告知浏览器，当前解析的文档是一个html文档。
html标签为双标签，开始标签和结束标签之间的内容（即html标签的内容），构成html文档的内容。
html标签的内容包含2个部分：头部（head）和主体（body）。

头部（head）部分

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。
绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
这些标签可用在 head 部分：, , ,

主体（body）部分

文档的主体包含了文档需要呈现给读者/用户的全部内容。
body包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。
可用在主体部分的标签有很多很多，下面会陆续介绍常用在主体部分的标签。

2.2 案例

代码：demo2.html，位于C:\html目录下。

			body标签之间的文本为html文档的主体

测试

使用浏览器打开demo2.html文件，显示效果如下图：

说明：
Ⅰ.地址栏显示demo2.html文件的本地存放地址；
Ⅱ.标题栏显示头部部分title标签的内容；
Ⅲ.内容区显示主体部分body标签的内容。

3. HTML常用标签[body部分]??标题

3.1 介绍

标题（Heading）是通过

-

等标签来表示的，常用来表示文章的标题。
具体标题标签有h1、h2、h3、h4、h5和h6，随着编号的逐渐增大，标题标签的内容大小和粗细会逐渐减小。
标题标签属于块级标签，浏览器会自动地为块级标签后添加一个空行，也就是有换行的显示效果。
提示：
请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

3.2 案例：标题标签的使用

代码：demo3.html，位于C:\html\目录下

	
一号标题
	
二号标题
	
三号标题
	
四号标题
	
五号标题
	
六号标题

测试

使用浏览器打开demo3.html，本地运行Html文档。

说明：
Ⅰ.从浏览器内容区的显示效果可以看出，标题标签随着编号的逐渐增大，标题标签的内容大小和粗细会逐渐减小。
Ⅱ.可以看出不同标题标签处在不同的行，这是因为标题标签属于块级标签，浏览器会自动地为块级标签添加一个空行，显示为换行的效果。

4. HTML常用标签[body部分]??水平线

4.1 介绍

---

标签为单标签。

---

标签用于在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
通常使用水平线 (

---

标签) 来分隔文章中的小节（但并不是唯一的办法）。

4.2 案例：水平线标签的使用

代码：demo4.html，位于C:\html\目录下。

	
何以笙箫默
既然琴瑟起，何以笙箫默。
悄悄是别离的笙箫，沉默是今晚的康桥。

测试

使用浏览器本地运行demo4.html文件，选中demo4.html，单击右键选择浏览器打开。

说明：
“何以笙箫默”为文章的标题；“既然琴瑟起，何以笙箫默。”为文章的内容；“悄悄是别离的笙箫，沉默是今晚的康桥。”为文章第二小节的内容。

5. HTML常用标签[body部分]??段落

5.1 介绍

段落标签p为双标签。
段落标签p用来描述html文档中的一段内容。
段落标签p属于块级标签/元素。
浏览器会自动地为块级标签添加一个空行，显示为换行的效果。
提示：
使用内容为空的段落标签

去插入一个空行是个坏习惯。用换行标签
代替它！也就是说，不要使用段落标签来达到换行的效果，段落标签的内容也该是一大段文本内容。

5.2 案例：段落标签的使用

代码：demo5.html，位于C:\html目录下。

	
再别康桥
但我不能放歌，
悄悄是离别的笙箫；
夏虫也为我沉默，
沉默是今晚的康桥。
悄悄是别离的笙箫，沉默是今晚的康桥。

测试

使用浏览器打开demo5.html，显示效果如下：

说明：对比demo5.html的源码，可以看出使用“

”也有换行的显示效果，但不推荐这样使用。

6. HTML常用标签[body部分]??控制文本显示格式

6.1 介绍

在HTML开发中，很多时候都需要控制文本的显示显示格式，如，斜体字、加粗、下划线，文本是代码时显示为代码的格式等。这时就会使用到下面的标签。

文本格式化标签 标签 描述

	定义粗体文本。
	定义大号字。
	定义着重文字。
	定义斜体字。
	定义小号字。
	定义加重语气。
	定义下标字。
	定义上标字。
	定义插入字。
	定义删除字。
	不赞成使用。使用 代替。
	不赞成使用。使用 代替。
	不赞成使用。使用样式（style）代替

“计算机输出”标签

当显示在页面中的内容为一段代码时，需要保留代码中的显示格式（缩进、换行、空格）时，就可以使用下面的这些标签。
|标签| 描述|
|----|------|
|| 定义计算机代码。|
|| 定义键盘码。|
| 定义计算机代码样本。|
|| 定义打字机代码。|
|| 定义变量。|
|

| 定义预格式文本。|
|| 不赞成使用。使用 
 代替。|
|| 不赞成使用。使用 <pre class="brush:php;toolbar:false"> 代替。|<br>|<xmp>| 不赞成使用。使用 <pre class="brush:php;toolbar:false"> 代替。|</pre></xmp></pre></plaintext></pre></listing></pre></var></tt></samp></kbd></code></p>   <h4 class="mt-10">6.2 案例：文本格式化标签的使用</h4> 代码：demo6.html，位于C:\html目录下。   <pre class="precsshui">	<meta http-equiv="content-type" content="text/html;charset=utf-8"><title>demo6</title><h3>文本格式化标签</h3>	普通	<b>加粗</b>	<big>加大</big>	<em>着重</em>	<i>斜体</i>	<strong>加重</strong>	<sub>下标</sub><sup>上标</sup>	<del>删除字</del></pre> 测试   <p>使用浏览器打开demo6.html，显示效果如下：</p>					</div>
															<div class="tags">
						相关标签：												<a href="/t/%E6%95%99%E5%A5%B3%E5%8F%8B%E5%AD%A6PHP%E4%B9%8BHTML%E2%91%A0/" target="_blank">
							教女友学PHP之HTML①						</a>
											</div>
															<div class="info-pre-next">
						<p>
							上一篇：							<a href="/article/1154035.html">
								hhvm - 性能对决：php7 vs java 谁是王者？差距大吗？							</a>
						</p>
						<p>
							下一篇：							<a href="/article/1154037.html">
								01. SQL Server 如何读写数据							</a>
						</p>
					</div>
															<div class="wz_tuijian">
						<p>
							推荐阅读						</p>
						<ul>
														<li>
								<a href="/article/2312793.html" target="_blank" title="菜鸟学PHP之Smarty入门">
									<h2>
										菜鸟学PHP之Smarty入门									</h2>
								</a>
							</li>
														<li>
								<a href="/article/2308926.html" target="_blank" title="Ajax+PHP边学边练 之五 图片处理_PHP">
									<h2>
										Ajax+PHP边学边练 之五 图片处理_PHP									</h2>
								</a>
							</li>
														<li>
								<a href="/article/2303511.html" target="_blank" title="新手学PHP之数据库操作详解及乱码解决！_php基础">
									<h2>
										新手学PHP之数据库操作详解及乱码解决！_php基础									</h2>
								</a>
							</li>
														<li>
								<a href="/article/2251373.html" target="_blank" title="HTML5 实战PHP之Web页面表单设计">
									<h2>
										HTML5 实战PHP之Web页面表单设计									</h2>
								</a>
							</li>
														<li>
								<a href="/article/2227654.html" target="_blank" title="PHP字符串函数系列之nl2br()，在字符串中的每个新行 (
) 之前插入 HTML 换行符br">
									<h2>
										PHP字符串函数系列之nl2br()，在字符串中的每个新行 (
) 之前插入 HTML 换行符br									</h2>
								</a>
							</li>
														<li>
								<a href="/article/2203684.html" target="_blank" title="php实例分享之html转为rtf格式">
									<h2>
										php实例分享之html转为rtf格式									</h2>
								</a>
							</li>
														<li>
								<a href="/article/2188299.html" target="_blank" title="HTML5 实战PHP之Web页面表单设计">
									<h2>
										HTML5 实战PHP之Web页面表单设计									</h2>
								</a>
							</li>
														<li>
								<a href="/article/2117235.html" target="_blank" title="PHP字符串函数系列之nl2br()，在字符串中的每个新行 (
) 之前插入 HTML 换行符br">
									<h2>
										PHP字符串函数系列之nl2br()，在字符串中的每个新行 (
) 之前插入 HTML 换行符br									</h2>
								</a>
							</li>
														<li>
								<a href="/article/2083339.html" target="_blank" title="PHP字符串函数系列之nl2br()，在字符串中的每个新行 (
) 之前插入 HTML 换行符br">
									<h2>
										PHP字符串函数系列之nl2br()，在字符串中的每个新行 (
) 之前插入 HTML 换行符br									</h2>
								</a>
							</li>
														<li>
								<a href="/article/2044242.html" target="_blank" title="新手学PHP之数据库操作详解及乱码解决！">
									<h2>
										新手学PHP之数据库操作详解及乱码解决！									</h2>
								</a>
							</li>
													</ul>
					</div>
									</article>
			</div>
            			
		</main>
		<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer>	</body>
	</html>