HTML基础知识点汇总.doc

发布时间：2022-06-09 发布人：admin 分类：说明书资料大小：1.61M 资料格式：doc 举报版权申诉

qq_16836315-10144856-4744302542957129481.doc.pdf-第1页.png

第1页 / 共17页

qq_16836315-10144856-4744302542957129481.doc.pdf-第2页.png

第2页 / 共17页

qq_16836315-10144856-4744302542957129481.doc.pdf-第3页.png

第3页 / 共17页

qq_16836315-10144856-4744302542957129481.doc.pdf-第4页.png

第4页 / 共17页

qq_16836315-10144856-4744302542957129481.doc.pdf-第5页.png

第5页 / 共17页

qq_16836315-10144856-4744302542957129481.doc.pdf-第6页.png

第6页 / 共17页

qq_16836315-10144856-4744302542957129481.doc.pdf-第7页.png

第7页 / 共17页

qq_16836315-10144856-4744302542957129481.doc.pdf-第8页.png

第8页 / 共17页

1.4 HTML基础知识

1.4.1 HTML概念

1.4.2 HTML基本语法

1.4.3 基本标记

1.4.4 格式标记

1.4.5 文本标记

1.4.6 图像标记

1.4.7 表格标记

1.4.8 链接标记

1.4.9 帧标记

1.4.10 表单标记

1.5 网页设计的流程

1.5.1 客户提出需求

1.5.2 注册域名和申请空间

1.5.3 确定网站的内容和主题

1.5.4 设计页面

1.5.5 设计网页动画

1.5.6 网页整合

1.5.7 文件发布

1.5.8 后期维护

1.6 小结

第 1 章网页设计概述 ·19· 1.4 HTML 基础知识 Internet 风行世界，作为展现 Internet 风采的重要载体，Web 页受到了愈来愈多人的重视。好的 Web 页可以吸引用户频频光顾站点，从而达到宣传网站的目的。Web 页是由 HTML（Hypertext Markup Language，超文本标记语言）组织起来的，由浏览器解释显示的一种文件。最初的 HTML 语言功能极其有限，仅能够实现静态文本的显示，人们远远不满足于死板的类似于文本文件的 Web 页。后来增强的 HTML 语言扩展了对图片、声音、视频影像的支持。通过浏览器访问到的 Web 页面，通常是基于 HTML 的基础上所形成的。那么，什么是 HTML 呢？下面将介绍有关 HTML 的概念及其基本语法。 1.4.1 HTML 概念当畅游 Internet 时，通过浏览器所看到的网站是由 HTML 语言所构成的。HTML 是一种建立网页文件的语言，通过标记式的指令（Tag），将影像、声音、图片、文字等连接显示出来。这种标记性语言是因特网上网页的主要语言。 HTML 网页文件可以使用记事本、写字板或 Dreamweaver 等编辑工具来编写，以.htm 或.html 为文件后缀名保存。将 HTML 网页文件用浏览器打开显示，若测试没有问题则可以放到服务器（Server）上，对外发布信息。 1.4.2 HTML 基本语法 HTML 标记是由“<”和“>”所括住的指令标记，用于向浏览器发送标记指令。主要分为：单标记指令、双标记指令（由“<起始标记>”＋内容＋“”构成）。 HTML 语言使用标志对的方法编写文件，既简单又方便。它通常使用“<标志名>内容” 来表示标志的开始和结束，因此在 HTML 文档中这样的标志对都必须是成对使用的。为了便于理解，将 HTML 标记语言大致分为基本标记、格式标记、文本标记、图像标记、表格标记、链接标记、表单标记和帧标记等。 1.4.3 基本标记基本标记是用来定义页面属性的一些标记语言。通常一份 HTML 网页文件包含 3 个部分：标头区 ……、内容区……和网页区……。 1．…… 标志用于 HTML 文档的最前边，用来标识 HTML 文档的开始。而标志恰恰相反，它放在 HTML 文档的最后边，用来标识 HTML 文档的结束，两个标志必须一块使用。

·20· Dreamweaver 网页制作与色彩搭配全攻略 2．…… 和构成 HTML 文档的开头部分，在此标志对之间可以使用、等标志对。这些标志对都是用来描述 HTML 文档相关信息的，和标志对之间的内容是不会在浏览器的框内显示出来的，两个标志必须一块使用。 3．…… 和是 HTML 文档的主体部分，在此标志对之间可包含

……

、

……

、
、

等众多的标志。它们所定义的文本、图像等将会在浏览器的框内显示出来。标志主要属性如表 1-1 所示。表 1-1 标志主要属性属性用途范例设置背景颜色设置文本颜色设置链接颜色设置已使用的链接的颜色设置鼠标指向的链接的颜色红色背景蓝色文本链接为蓝色链接为红色黄色以上各个属性可以结合使用，如。引号内的 rrggbb 是用 6 个十六进制数表示的 RGB（即红、绿、蓝 3 色的组合）颜色，如#ff0000 对应的是红色。 4．…… 使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息，那些信息一般是网页的主题。要将网页的主题显示到浏览器的顶部其实很简单，只要在标志对之间加入需要显示的文本即可。下面是一个简单的网页实例。通过该实例，读者便可以了解以上各个标志对在一个 HTML 文档中的布局或所使用的位置。显示在浏览器窗口最顶端中的文本

红色背景、蓝色文本

注意：标志对只能放在标志对之间。 1.4.4 格式标记这里所介绍的格式标记都是用于标志对之间的。

第 1 章网页设计概述 ·21· 1．

……

标志对是用来创建一个段落，在此标志对之间加入的文本将按照段落的格式显示在浏览器上。

标志还可以使用 align 属性，它用来说明对齐方式，语法如下所示。

Align 的参数可以是 Left（左对齐）、Center（居中）和 Right（右对齐）3 个值中的任何一个。例如

表示标志对中的文本使用居中的对齐方式。 2．

是一个很简单的单标记指令，它没有结束标志，因为它用来创建一个回车换行，即标记文本换行。 注意：如果把
加在

标志对的外边，将创建一个大的回车换行，即
前边和后边的文本的行与行之间的距离比较大。若放在

的里边则
前边和后边的文本的行与行之间的距离将比较小。 3．

……

在

标志对之间加入的文本将会在浏览器中按两边缩进的方式显示出来。 4．

……、

……

、

……

用来创建一个普通的列表；

用来创建列表中的上层项目；

用来创建列表中最下层项目，

和

都必须放在

标志对之间。通过下面的实例，读者可以更好地理解这几个相近的标记。一个普通列表

中国城市: 北京; 上海; 广州
美国城市: 华盛顿; 芝加哥; 纽约

该实例在网页中的效果，如图 1-29 所示。 5．

……、

……

标志对用来创建一个标有数字的列表。

标志对用来创建一个标有圆点的列表。

·22· Dreamweaver 网页制作与色彩搭配全攻略

标志对只能在

或

标志对之间使用，此标志对用来创建一个列表项，若

放在

之间，则每个列表项加上一个数字；若放在

之间，则每个列表项加上一个圆点。示例如下所示：图 1-29 格式标记执行效果图

中国城市

北京
上海
广州

美国城市

华盛顿
芝加哥
纽约

以上在 IE 中的运行效果如图 1-30 所示。图 1-30 格式标记执行效果图

第 1 章网页设计概述 ·23· 6．

……

标志对用来排版大块 HTML 段落，也用于格式化表，此标志对的用法与

标志对非常相似，同样有 align 对齐方式属性。 1.4.5 文本标记文本标记主要针对文本的属性设置进行标记说明，如斜体、黑体字、加下划线等。 1．

……

标志对用来对文本进行预处理操作。 2．

……

HTML 语言提供了一系列对文本中的标题进行操作的标志对：

、

、……、

。

是最大的标题，而

则是最小的标题。如果在 HTML 文档中需要输出标题文本，可以使用这 6 对标题标志对中的任何一对。 3．……、……、…… 经常使用 Word 的人对这 3 个标志对一定很快就能掌握。用来使文本以黑体字的形式输出；用来使文本以斜体字的形式输出；用来使文本以下加一划线的形式输出。 4．……、……、……、…… 这些标志对的用法和上边的一样，差别只是在于输出的文本字体不太一样而已。用来输出打字机风格字体的文本；用来输出引用方式的字体，通常是斜体；用来输出需要强调的文本（通常是斜体加黑体）；则用来输出加重文本（通常也是斜体加黑体）。 5．…… 可以对输出文本的字体大小、颜色进行随意的改变。这些改变主要是通过对它的两个属性 size 和 color 的控制来实现的。size 属性用来改变字体的大小，它可以取值为-1、1 和+1；而 color 属性则用来改变文本的颜色，颜色的取值是十六进制 RGB 颜色码或 HTML 语言给定的颜色常量名。文本标记的具体用法如以下代码所示：文本标记的综合示例

最大的标题

使用 h3 的标题

最小的标题

黑体字文本

斜体字文本

下加一划线文本

打字机风格的文本

引用方式的文本

·24· Dreamweaver 网页制作与色彩搭配全攻略

强调的文本

加重的文本

size 取值 “+1”、color 取值“red”时的文本

此例在浏览器中的显示如图 1-31 所示。 1.4.6 图像标记再简单朴素的网页如果只有文字而没有图像将失去许多活力，图像在网页制作中是非常重要的一个方面， HTML 语言也专门提供了标志来处理图像的输出。 1．标志并不是真正地把图像加入到 HTML 文档中，而是将标志对的 src 属性赋值。这个值是图像文件的文件名，其中包括路径，这个路径可以是相对路径，也可以是网址。所谓相对路径是指所要链接或嵌入到当前 HTML 文档的文件与当前文件的相对位置所形成的路径。图 1-31 文本标记执行效果图假如网站的 HTML 文件与图像文件（文件名假设是 logo.gif）在同一个目录下，则可以将代码写成

。假如网站的图像文件放在当前的 HTML 文档所在目录的一个子目录（子目录名假设是 images）下，则代码应为

。 注意：通常图像文件都会放在网站中一个独立的目录里。必须注意一点，src 属性在标志中是必须赋值的，是标志中不可缺少的一部分。除此之外，标志还有 alt、align、border、width 和 height 属性。align 是图像的对齐方式，在上边已经提到过。border 属性是图像的边框，可以取大于或者等于 0 的整数，默认单位是像素。width 和 height 属性是图像的宽和高，默认单位也是像素。alt 属性是当光标移动到图像上时显示的文本。 2．

标志是在 HTML 文档中加入一条水平线。它可以直接使用，具有 size、color、width 和 noshade 属性。 size 用来设置水平线的厚度，而 width 用来设定水平线的宽度，默认单位是像素。noshade 属性不用赋值，而是直接加入标志即可使用，它是用来加入一条没有阴影的水平线，不加入此属性水平线将有阴影。图像标记的使用如以下代码所示，效果如图 1-32 所示。图像标记的综合示例

第 1 章网页设计概述 ·25·

网页设计

1.4.7 表格标记图 1-32 图像标记效果图表格标记对于制作网页是很重要的，现在很多网页都是使用多重表格，主要是因为表格不但可以固定文本或图像的输出，而且还可以任意地进行背景和前景颜色的设置。 1．……

标志对用来创建一个表格。它的属性较多，诸如 bgcolor、bordercolor、cellpadding 等。具体的属性参数将在使用 Dreamweaver 整合页面时作详细介绍。 2．……、…… 标志对用来创建表格中的每一行。此标志对只能放在

标志对之间使用，而在此标志对之间加入文本将是无效的。标志对用来创建表格中一行中的每一个表格，此标志对只有放在标志对之间才是有效的。 3．…… 标志对用来设置表格头，通常是黑体居中文字。表格标记使用如下代码，效果如图 1-33 所示。阿森纳图 1-33 表格标记效果图表格标记的综合示例。

·26· Dreamweaver 网页制作与色彩搭配全攻略表格标记的综合示例

意大利		英格兰		西班牙
AC 米兰	佛罗伦萨	曼联	纽卡斯尔	巴塞罗那	皇家社会	尤文图斯	桑普多利亚	利物浦	阿森纳	皇家马德里	……	拉齐奥	国际米兰	切尔西	米德尔斯堡	马德里竞技	……

1.4.8 链接标记链接是 HTML 语言的一大特色，正因为有了链接，网站内容的浏览才能够具有灵活性和网络性。 1．…… 该标志对的属性 href 是无论如何不可缺少的，标志对之间加入需要链接的文本或图像（链接图像即加入标志）。 href 的值可以是 URL 形式，即网址或相对路径，也可以是 mailto:形式，即发送 E-mail 形式。当 href 为 URL 时，语法为，这样就构成一个超文本链接了。示例如下：

分享到：

赞收藏

资料库

HTML基础知识点汇总.doc

……

最大的标题

使用 h3 的标题

最小的标题

相关推荐

课程资源

热门标签

最新资料