HTML文档基础_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

HTML文档基础_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:40 AM

一.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>

登入後複製

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

然后将这个网页保存到这个站点里，名字改为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>

登入後複製

然后依旧保存到那个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>

登入後複製

其中代码中的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>

登入後複製

(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>

登入後複製

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

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

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

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn