HTML文档基础_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:40:47
Original
1286 Leute haben es durchsucht

一.HTML(Hyper Text Markup Language超文本标记语言)是一种用来制作超文本文档的简单标记语言,HTML在正文的文本中编写各种标记,通过Web浏览器进行编译和执行才能正确显示。此篇文章主要介绍HTML文档基础和常用标记,此篇文章的内容框架如下,但是只先介绍HTML文档基础:

上图在HTML文档的常用标记中,少画了一个多媒体标记,请见谅!


1.HTML文档基础:

1.1 HTML标记:HTML是超文本标记语言。主要由文本和标记两部分构成。HTML的标记通常是由“”以及其中所包含的标记元素组成的。例如:

就是一对标记,此标记称为主体标记,用来指明文档中的主体内容。

(1).在HTML超文本标记语言中,大多数标记都是成对出现的,一般是由一个开始标记和一个结束标记组成的,其中开始标记告诉Web浏览器从此处开始执行该标记所表示的功能,而结束标记告诉Web浏览器在这里结束该功能。这类标记称为“双标记”,其语法格式如下:

内容标记>

其中“内容”部分就是要被这对标记起作用的部分,例如在页面中输出y的平方,可以通过标记来实现。

(2).接着附上一个“双标记”的例子,启动Dreamweaver CS5工具,也可以用其它编写网页的工具,在创建新项目中选择HTML,在“代码”窗口中编写如下代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>输出y的平方</title></head><body>输出y的平方:y<sup>2</sup></body></html>
Nach dem Login kopieren

接着新建一个站点,点击工具栏的站点,然后这样选择:


然后将这个网页保存到这个站点里,名字改为sup.html,运行效果如下:

(3).虽然在HTML超文本标记语言中,大多数的标记为“双标记”,但是也有一些是以单独形式存在的标记,此类标记称为“单标记”。这类标记只需单独使用就能完整地表达其意思,语法格式为:<标记>

在HTML超文本标记语言中,最常用的“单标记”是
,此标记为换行标记。其实写成
也可以达到换行的效果。

(4).接下来附上一个“单标记”的例子,通常在页面中用一行显示一段文字,由于此行文字太长显得页面很不美观,此时可以使用单标记
将此段文字分为两行显示,代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>单标记</title></head><body>梦想遥不可及,但是不可放弃<br>只要再坚持一下,成功的路就在脚下!</body></html>
Nach dem Login kopieren

然后依旧保存到那个JavaScript站点下,改为br.html,运行后如下:

(5).在使用大多数单标记和双标记的开始标记内通常可以包含一些属性,其语法格式为:<标记 属性1 属性2 属性3...>

在上面的语法中,所有属性必须在开始标记的尖括号“<”中编写,各属性之间用空格分隔,无先后次序之分,属性也可以省略(即取其默认值)。属性值需要使用英文半角双引号("")标注。

(6).接下来附上一个标记中带属性的例子,使用单标记


在页面中画一条水平线,并设置其size属性、noshade属性、width属性和color属性,代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>绘制一条水平线</title></head><body><hr size="6" noshade="noshade" width="70%" color="#CCFF55"></body></html>
Nach dem Login kopieren

其中代码中的size属性表示水平线的粗细,noshade属性表示将水平线的阴影去掉,水平线默认为空心带阴影的立体效果,width属性表示水平线的宽度,color属性表示水平线的颜色。

保存此文件到站点上,文件名改为br.html,运行效果如下:





1.2 HTML文档的基本结构:使用HTML语言编写的超文本文件称为HTML文件。可以在Windows下的文本编辑器中手工直接编写HTML文件,也可以使用FrontPage、Dreamweaver等可视化编辑软件编写HTML文档。

(1).在HTML超文本标记语言中,定义了3种标记用于描述页面的基本结构。HTML中的基本结构如下:

<html><head>...头部信息<body>...主体内容</body></head></html>
Nach dem Login kopieren

(2).下面详细介绍各种标记的功能及用法:

? ...标记:HTML文档中的第一个标记,该标记用于表示该文档是HTML文档,当浏览器遇到标记时,就会按HTML的标准来解释文本。结束标记出现在HTML文档的尾部。

? ...标记:此标记出现在标记内起始的部分,此标记称为头部标记。头部标记用于提供与Web页面有关的各种信息。在头部标记中,可以使用标记模拟HTTP协议的响应头报文,用于鉴别作者、标注内容提要和关键字、设定页面字符集、刷新页面等,在HTML头部可以包括任意数量的标记;使用...标记来指定网页的标题;使用标记来定义CSS样式表;使用<script>...</script>标记来插入脚本语言等。一般来说,位于头部标记中的内容都不会在网页上直接显示。

? ...标记:此标记称为主体标记,在头部标记之后。它定义了HTML文件显示的主要内容和显示格式。作为网页的主体部分,此标记有很多内置属性,这些属性用于设定网页的总体风格。例如,定义页面的背景图像、背景颜色、文字颜色以及超文本链接颜色等。

(3).接下来附上一个使用...标记的例子,标记应用于HTML文件的主体标记与之间,并且只影响它所标识的文字。

这里例子通过标记的face属性定义字体为“黑体”,通过size属性定义大小为“16px”,通过color定义颜色为蓝色,代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>定义文字字体</title></head><body>应用<font>标记来定义文字字体:<br><font face="黑体,宋体" size="16px" color="#3399FF">蓝色的天空下,让我们一起飞翔!</font></body></html>
Nach dem Login kopieren

保存此文件为font.html到站点下,运行后如下:

 

这个例子中,使用了<和>来输出""这些符号,即在HTML中为一些特殊的字符设置了特殊的代码。字符的实体名称都以一个“&”符号开始,以一个“;”符号结束。在这个例子代码中,,特殊符号“



二.此篇文章介绍了HTML文档的基础,HTML文档的常用标记下次再介绍了,以上内容仅供大家学习参考,写得不好,请见谅,如有错误,请指出,谢谢!

??

版权声明:本文为博主原创文章,未经博主允许不得转载。

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage