HTML.docx

上传人:b****2 文档编号:23113250 上传时间:2023-04-30 格式:DOCX 页数:56 大小:51.48KB
下载 相关 举报
HTML.docx_第1页
第1页 / 共56页
HTML.docx_第2页
第2页 / 共56页
HTML.docx_第3页
第3页 / 共56页
HTML.docx_第4页
第4页 / 共56页
HTML.docx_第5页
第5页 / 共56页
点击查看更多>>
下载资源
资源描述

HTML.docx

《HTML.docx》由会员分享,可在线阅读,更多相关《HTML.docx(56页珍藏版)》请在冰豆网上搜索。

HTML.docx

HTML

3.1.HTML语法

HTML语法非常简单,组成HTML语法的元素只有HTML标签与HTML属性.

HTML文档(页面)[国家]--->HTML元素[家庭]--->HTML标签[重要成员,男人女人]--->HTML属性[其它成员,比如孩子]

3.2.HTML标签

HTML标签是HTML语言中最基本的单位,HTML标签是HTML语言最重要的组成部分.

∙通常要用两个角括号括起来:

<和>.

∙都是闭合的(闭合就是标签的最后要有一个/,来标示结束.),但不一定是成对出现的,比如和一对标签.(是开始标签,是结束标签,在开始和结束标签中可以有内容),比如
就是单独的.(注意要在最后加上/,以标示其是独立的)

∙标签是大小写无关的,跟表示的意思是一样的.标准推荐使用小写.

HTML标签语法

HTML标签(两种形式,成对与不成对):

<标签名>内容

<标签名/>

示例

表格的开始标签与结束标签


单独出现的换行标签

常用HTML标签

∙html标签--定义HTML文档.

∙body标签--定义HTML文档的内容.

∙p标签--定义段落.

∙h1-h6标签--定义标题.

∙html注释--定义注释内容.

3.3.HTML属性

HTML属性--一般都出现在HTML标签中,HTML属性是HTML标签的一部分

∙标签可以有属性,它包含了额外的信息.属性的值一定要在双引号中

∙标签可以拥有多个属性

∙属性由属性名和值成对出现

∙引用网址:

HTML属性语法

<标签名属性名1="属性值"属性名2="属性值"...属性名N="属性值">

示例

标签是超链接标签.使用href属性,可以定义链接的位置(URI)代码:

标签

是表格标签.使用border属性,定义没有边框的表格.使用summary属性定义表格的简短描述

3.4.HTML元素

HTML元素是构建网页的一种单位,是由HTML标签和HTML属性组成的,HTML元素也是网页中的一种基本单位.

引用网址:

示例

尽情学习

这是一个HTML链接元素.

这是我的第一个网页,在这里

尽情学习

吧!

这是一个HTML段落元素,它包含了一个HTML链接元素.

3.5.HTML文档

HTML文档就是HTML页面,也就是网页,是由HTML元素组成的

引用网址:

互联网的所有内容都是由一个个HTML文档体现的

3.6.HTML注释

HTML注释,我们经常要在一些代码旁做一些HTML注释,这样做的好处很多,比如:

方便查找,方便比对,方便项目组里的其它程序员了解你的代码,而且可以方便以后你对自己代码的理解与修改等等.

HTML注释的开始使用

--,结束使用-->

引用网址:

HTML注释语法

--注释的内容-->

示例

--到梦之都XHTML教程的链接-->

学习XHTML

吧!

--链接结束-->

3.7.用一个例子来学习HTML语法

示例

--这些都是HTML的基础呀,要好好学.-->

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http:

//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

欢迎来到梦之都

--链接到梦之都.-->

这是我的第一个网页,在这里

分析一下HTML语法示例中的内容

和是一对标签,而

这是我的第一个网页,在这里

是HTML的主体元素

是一对标签,而

欢迎来到梦之都

则是HTML的标题元素

是一对标签,而

则是HTML的链接元素

此HTML元素以开始标签开头,内容是尽情学习,以结束标签中止

此标签中有一个属性href,属性的值为

猴子提示:

上面覆盖了XHTML程序中98%的语法,很简单吧:

4.1.HTML骨架--解剖一下HTML

其实本节的标题,应该叫HTML框架(就是描述HTML文件的结构),可惜HTML中有一种元素就叫框架,所以我在这里使用骨架

HTML骨架示例

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http:

//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML文件标题

HTML头信息

HTML内容信息

上面这个框架应该够清晰了

引用网址:

说明

∙HTML文档首先要声明一个文档类型,也就是上面例子第一行,定义了XHTML1.1文档类型(文档类型是为了说明这个页面使用了何种HTML规则,或者结构,这个在将来的教程中会详细介绍)

∙和是HTML文档的开始与结束,也是HTML文档的根元素

∙除了文档类型外的所有页面内容,都包括在html元素

∙HTML文件中主要分为头信息head与内容信息body

文档head信息

∙头信息head可以容纳文档的HTML相关信息,比如标题title,页面的语言与文字类型,css样式,javascript代码,简短描述,关键词等内容,是用户无法直接看到的

文档body信息

∙内容信息body包括用户可以看到的全部内容,比如段落,链接,表格等

∙同学们还要注意一点,编写代码时一定要有层次感,head标签和body标签都是在html标签中的,所以我向后挫了一个tab键的距离,而HTML头信息又比head标签后挫了一个tab键的距离

上面就是html最基本的框架,而我们将来要学习的内容多数在body元素中,还有一少部分在head元素中

猴子推荐:

使用tab键产生HTML代码的层次感,可以使代码更清晰,更容易扩展.

4.2.HTMLhtml标签

html标签--代表HTML文档的开始

∙html标签是成对出现的,以开始,结束

∙引用网址:

∙属性

oCommon--一般属性

oxml:

lang--国际化属性

oxmlns--代表xml命名空间

odir--定义元素(文字)的对齐方式

示例

lang="zh-CN"dir="ltr">

说明

∙xmlns=""代表使用做为命名空间

∙xml:

lang="zh-CN"代表使用中文作为页面文字

∙dir="ltr"代表左到右(left-to-right)的文字对齐方式

4.3.HTMLhead标签

head标签--代表HTML文档的头信息

∙head标签是成对出现的,以开始,结束

∙引用网址:

∙属性

oCommon--一般属性

说明

∙头(head)包含了当前文档的一些信息,例如标题信息,meta信息等,正常情况下头信息是不会显示在HTML文档中的.

∙head元素包含的标签:

otitle标签

obase标签

olink标签

ostyle标签

oscript标签

ometa标签

4.2.1HTMLtitle标签

title标签--代表HTML文档的标题

∙title标签是成对出现的,以开始,结束

∙引用网址:

∙属性

oCommon--一般属性

示例

XHTMLtitle标签事例

说明

∙此标签只能在head标签内出现

∙title的内容通常在浏览器的标题栏中显示

∙浏览器中收藏夹内书签的名称是title的内容

∙title的内容可以方便搜索引擎索引页面

∙从搜索引擎搜索到的内容的标题往往是网页title的内容

∙title通常体现了网页的主体内容,所以记得一定要加上:

使用技巧

比如"关于我们"这个页面,title内容的写法通常是"梦之都--关于我们"

比如网站的"首页",title内容的写法通常是"首页--介绍网站建设知识(HTML教程,CSS教程)"

猴子提示:

title的内容要和网站本身有关联性,不能是独立的.

4.5.HTMLbody标签

body标签--代表HTML文档的主体

∙body标签是成对出现的,以开始,结束

∙引用网址:

∙属性

oCommon--一般属性

说明

∙HTML文档的所有内容应该全部放在此标签中.比如浏览器所能表现的文字,图像,链接等

5.有趣的试验

5.1.HTML分段显示

5.2.HTML换行

5.3.HTML强调与斜体

5.4.HTML按标题显示

5.5.HTML大于与小于

5.6.HTML空格

好,你已经掌握HTML的基本骨架了,现在我们来做几个小试验

5.1.HTML分段显示

大家应该发现一个问题,在文本编辑器里编辑的代码无论怎样给文字换行,在浏览器里显示的都是一行.大家可以试试下面两个例子

在这里

开始学分段!

恩?

不好用?

我们可以把上面的代码复制到文本编辑器中,文本编辑器中的代码虽然换行了,但是实际页面并没有换行,这是因为浏览器并不认识记事本里的空格与回车,所以只有加一个标签,让浏览器知道

示例

在这里

开始学分段!

啊!

可以了!

p标签是paragraph的缩写,是段落的意思.由

组成的元素可以显示成一个段落.

5.2.HTML换行

前面我们学会了分段显示.可是怎样在一个段落中换行呢?

答:

使用br标签

在这里


开始学换行!


再换行

5.3.HTML强调与斜体

可以把文字加重(强调)或斜体显示

示例

强调

斜体

HTML强调与斜体示例--可以尝试编辑

∙HTML强调与斜体示例

HTML教程强调与斜体示例

强调

斜体

上面的内容对应着下面的代码;

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http:

//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML强调与斜体示例

强调

斜体

5.4.HTML按标题显示

示例

标题1

标题2

标题3

标题4

标题5

标题6

上面是六个标题标签,是从大到小的顺序的,h1最大,h6最小

猴子提示:

h1标签在一个页面中只能使用一次(它就是页面的主标题,这相当于一篇文章不会有很多主标题一样),但是h2到h6标签可以使用多次,从h1到h6应该是大到小的顺序.

HTML按标题显示示例--可以尝试编辑

∙HTMLh标签示例

"HTML教程h标签示例

标题1--一个页面只能有一个

标题2

标题3

标题4

标题5

标题6

上面内容对应下面代码:

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http:

//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTMLh标签示例

标题1--一个页面只能有一个

标题2

标题3

标题4

标题5

标题6

5.5.HTML大于与小于

3<4

上面这个表达式怎么显示?

如果原封不动的写入HTML文件中是不会正常显示的.因为小于号是一个HTML实体(HTML实体:

键盘无法表示的符号,或者HTML本身要用的符号,比如HTML标签的开始<,与结尾>,还有属性值需要使用的"引号等

遇到这种情况时需要使用HTML实体来显示(参见HTML实体)

<可以显示<小于号>可以显示>大于号

所以上面的3<4的式子,要这样表示:

示例

3<4

HTML大于与小于示例--可以尝试编辑

∙HTML大于与小于示例

HTML教程大于与小于示例

大于>

小于<

上面内容对应下面代码

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http:

//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML大于与小于示例

大于>

小于<

5.6.HTML空格

如何在网页中插入HTML空格?

通常在网页中插入一个空格的时候可以使用普通的空格。

示例

空格

上面的示例中空格两个字中间有一个空格,但是如果有多个空格在网页中将显示为一个,同学们可以自己试一下。

HTML空格实体插入多个空格

可以使用 表示是一个空格。

这种编码称为HTML实体。

示例

空     格

上面的代码插入了5个空格。

6.1.HTML链接--a标签--把我和世界连起来

目录

1.a标签

2.链接语法

3.链接a标签说明

4.延伸阅读

链接是超级链接的缩写,英文是hyperlink。

HTML中的H就是hypertext的缩写,超文本的意思。

超文本链接语言(网页)的精髓就是链接,通过链接才可以把世界各地的网页链到一起,成为互联网。

a标签

a标签--代表HTML链接

∙a标签是成对出现的,以开始,结束

∙引用网址:

∙属性.

oCommon--一般属性

oaccesskey--代表一个链接的快捷键访问方式

ocharset--指定了链接到的页面所使用的编码方式,比如UTF-8

ocoords--使用图像地图的时候可以使用此属性定义链接的区域,通常是使用x,y坐标

ohref--代表一个链接源(就是链接到什么地方)

ohreflang--指出了链接到的页面所使用的语言编码

orel--代表文档与链接到的内容(href所指的内容)的关系

orev--代表文档与链接到的内容(href所指的内容)的关系

oshape--使用图像地图的时候可以使用shape指定链接区域

otabindex--代表使用"tab"键,遍历链接的顺序

otarget--用来指出哪个窗口或框架应该被此链接打开

otitle--代表链接的附加提示信息

otype--代表链接的MIME类型

∙a,是anchor(锚)的第一个字母

链接语法

显示的文字

链接a标签说明

∙a--是链接的标签

∙href--是链接的属性,告诉浏览器链接到的网址(URI)

∙url--是我们要链接到的网页或者文件。

url可以是一个绝对的网页,如:

o如:

dreamdu.html,学习相对路径和绝对路径

ourl除了是网页外,还可以是其它的文件(如文本文件,pdf文件等).

ourl还可以是指向HTML文件中的一个位置.

ourl还可以是Email地址.

∙显示的文字--是我们想要显示的文字,浏览者点击'显示的文字'就会连接到url页面.

示例

点击链接到--梦之都XHTML教程

HTML链接示例--可以尝试编辑

∙HTMLa标签示例

梦之都HTML教程,a标签示例.

使用绝对链接,访问

使用相对链接,访问html教程

上面内容对应下面代码

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http:

//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTMLa标签示例

使用相对链接,访问html教程

∙HTML链接到指定位置示例

梦之都HTML教程,HTML指定位置的链接示例.

链接到页面下部

链接到页面上部

链接到Math函数与属性使用语法

上面内容对应下面代码

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http:

//www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML链接到指定位置示例

链接到页面下部

链接到页面上部

链接到Math函数与属性使用语法

∙HTML邮件链接示例

梦之都HTML教程,HTML邮件链接示例.

给我写邮件

上面内容对应下面代码

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.1//EN""http:

//www.w3.org/TR/xhtml11/DTD/xhtm

展开阅读全文
相关搜索

当前位置:首页 > 总结汇报 > 其它

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1