教女友学PHP之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的文件夹)下,写下如下代码。
浏览器相关知识HTML运行方式 Hello,world
使用浏览器打开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文件的基本结构
内容标签>
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)。
文档的头部描述了文档的各种属性和信息,包括文档的标题、在 Web 中的位置以及和其他文档的关系等。
绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
这些标签可用在 head 部分:
文档的主体包含了文档需要呈现给读者/用户的全部内容。
body包含文档的所有内容(比如文本、超链接、图像、表格和列表等等)。
可用在主体部分的标签有很多很多,下面会陆续介绍常用在主体部分的标签。
2.2 案例
代码:demo2.html,位于C:\html目录下。测试demo2 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 一号标题
二号标题
三号标题
四号标题
五号标题
六号标题
测试
具体标题标签有h1、h2、h3、h4、h5和h6,随着编号的逐渐增大,标题标签的内容大小和粗细会逐渐减小。
标题标签属于块级标签,浏览器会自动地为块级标签后添加一个空行,也就是有换行的显示效果。
提示:
请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页,所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题(最重要的),其后是 h2(次重要的),再其次是 h3,以此类推。
3.2 案例:标题标签的使用
代码:demo3.html,位于C:\html\目录下测试demo3 一号标题
二号标题
三号标题
四号标题
五号标题
六号标题
使用浏览器打开demo3.html,本地运行Html文档。
说明:
Ⅰ.从浏览器内容区的显示效果可以看出,标题标签随着编号的逐渐增大,标题标签的内容大小和粗细会逐渐减小。
Ⅱ.可以看出不同标题标签处在不同的行,这是因为标题标签属于块级标签,浏览器会自动地为块级标签添加一个空行,显示为换行的效果。
4. HTML常用标签[body部分]??水平线
4.1 介绍
标签为单标签。
标签用于在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
通常使用水平线 (
标签) 来分隔文章中的小节(但并不是唯一的办法)。
4.2 案例:水平线标签的使用
代码:demo4.html,位于C:\html\目录下。测试demo4 何以笙箫默
既然琴瑟起,何以笙箫默。
悄悄是别离的笙箫,沉默是今晚的康桥。
使用浏览器本地运行demo4.html文件,选中demo4.html,单击右键选择浏览器打开。
说明:
“何以笙箫默”为文章的标题;“既然琴瑟起,何以笙箫默。”为文章的内容;“悄悄是别离的笙箫,沉默是今晚的康桥。”为文章第二小节的内容。
5. HTML常用标签[body部分]??段落
5.1 介绍
段落标签p为双标签。
段落标签p用来描述html文档中的一段内容。
段落标签p属于块级标签/元素。
浏览器会自动地为块级标签添加一个空行,显示为换行的效果。
提示:
使用内容为空的段落标签
代替它!也就是说,不要使用段落标签来达到换行的效果,段落标签的内容也该是一大段文本内容。
5.2 案例:段落标签的使用
代码:demo5.html,位于C:\html目录下。测试demo5 再别康桥
但我不能放歌,
悄悄是离别的笙箫;
夏虫也为我沉默,
沉默是今晚的康桥。悄悄是别离的笙箫,沉默是今晚的康桥。
使用浏览器打开demo5.html,显示效果如下:
说明:对比demo5.html的源码,可以看出使用“
6. HTML常用标签[body部分]??控制文本显示格式
6.1 介绍
在HTML开发中,很多时候都需要控制文本的显示显示格式,如,斜体字、加粗、下划线,文本是代码时显示为代码的格式等。这时就会使用到下面的标签。
文本格式化标签定义粗体文本。 | |
定义大号字。 | |
定义着重文字。 | |
定义斜体字。 | |
定义小号字。 | |
定义加重语气。 | |
定义下标字。 | |
定义上标字。 | |
定义插入字。 | |
定义删除字。 | |
不赞成使用。使用 | |
不赞成使用。使用 | |
不赞成使用。使用样式(style)代替 |
当显示在页面中的内容为一段代码时,需要保留代码中的显示格式(缩进、换行、空格)时,就可以使用下面的这些标签。
|标签| 描述|
|----|------|
|| 定义计算机代码。|
|| 定义键盘码。|
| 定义计算机代码样本。|
|| 定义打字机代码。|
|| 定义变量。|
|| 定义预格式文本。|
| 代替。|
| 代替。|
| 代替。|
6.2 案例:文本格式化标签的使用
代码:demo6.html,位于C:\html目录下。测试demo6 文本格式化标签
普通 加粗 加大 着重 斜体 加重 下标上标删除字
使用浏览器打开demo6.html,显示效果如下:
上一篇: php使用cookie实现记住登录状态
下一篇: php+js出现异常,求!