HTML入门教程：基本标签、表格、表单与CSS样式

4星 · 超过85%的资源需积分: 3 123 浏览量更新于2024-07-23 收藏 3.51MB DOC 举报

"该资源是一个HTML教程，适合初学者，主要涵盖了HTML的基础知识，包括基本标签、表格基础、表单和框架以及CSS样式表。" HTML教程详细内容如下： 1. **HTML基本标签**： - HTML是HyperText Markup Language的缩写，是一种用于创建网页的标准标记语言。 - HTML的基本结构包括`<html>`、`<head>`和`<body>`标签，它们定义了整个文档的结构。 - HTML基本语法包括标签的开始和结束，如`<tag>`和`</tag>`，以及属性的使用，如`<a href="url">`表示超链接。 2. **基本标记**： - 包括常用的文本格式化标签，如`<p>`（段落）、`<h1>`到`<h6>`（标题）、`<b>`（粗体）、`<i>`（斜体）等。 3. **格式标记**： - 如`<br>`（换行）、`<hr>`（水平线）、`<pre>`（预格式化文本）等用于控制文本的显示效果。 4. **文本标记**： - 用于强调、引用、代码块等，如`<em>`（强调）、`<strong>`（强烈强调）、`<blockquote>`（引用）和`<code>`（代码）。 5. **图像标记**： - `<img>`标签用于插入图片，`src`属性定义图片的URL，`alt`属性提供替代文字。 6. **特殊字符集**： - HTML字符实体用于显示特殊字符，例如` `用于显示空格。 7. **链接标记**： - `<a>`标签创建链接，`href`属性定义链接的目标URL，`target`属性指定在何处打开链接。 8. **滚动标签**： - 可能涉及`<marquee>`标签，用于创建滚动文本效果。 9. **表格基础**： - `<table>`定义表格，`<tr>`表示行，`<td>`表示单元格，`<th>`表示表头。 - `table`、`tr`、`td`和`th`都有相关的属性来调整表格的外观和行为。 10. **表单**： - `<form>`定义表单，`<input>`用于用户输入，`type`属性可设置不同类型的输入控件，如文本框、复选框、单选按钮等。 - `<select>`创建下拉列表，`<option>`定义选项。 - `<textarea>`定义多行文本输入区域。 11. **帧标记（框架）**： - 框架允许将一个页面分割成多个独立的浏览区域，`<frameset>`定义框架布局，`<frame>`定义每个区域的内容。 12. **CSS样式表**： - CSS（Cascading Style Sheets）用于美化HTML元素的样式。 - CSS可以通过内部样式表、行内样式和外部样式表引入到网页中。 - `class`和`id`用于选择器，分别用于一类元素和特定唯一元素的样式定义。 - CSS注释用`/* ... */`包围，用于解释代码。这个教程旨在帮助初学者理解并掌握HTML的基础概念，通过学习，读者能够创建基本的静态网页，并能对网页进行简单的样式设计。通过实践练习，可以进一步巩固所学知识。

$标志中是必须赋值的，是标志中不可缺少的一部分。

除此之外，1"标志还有 #、#1、&$、>1$! 和 !1! 属性。#1 是

图像的对齐方式，在上边已经提到过。&$ 属性是图像的边框，可以取大于或者等于 ;

的整数，默认单位是像素。>1$! 和 !1! 属性是图像的宽和高，默认单位也是像素。

# 属性是当光标移动到图像上时显示的文本。

．

! 标志是在  文档中加入一条水平线。它可以直接使用，具有

81O、3&#&、>1$! 和 &8!$ 属性。

81O 用来设置水平线的厚度，而 >1$! 用来设定水平线的宽度，默认单位是像素。

&8!$ 属性不用赋值，而是直接加入标志即可使用，它是用来加入一条没有阴影的水平

线，不加入此属性水平线将有阴影。

图像标记的使用如以下代码所示，效果如图 K 所示。

!"#

!$

1#图像标记的综合示例%1#

%!$

&$

  #194341"  8394((%#&&N?.M?;(154  #94 网页设计 4

>1$!94N?.4!1!94?;4%

!>1$!94?;;481O9443&#&94:;;;;FF4

%&$

%!"#

图 K图像标记效果图

.特殊字符集1 字符实体123%$$/4

有些字符在  里有特别的含义，比如小于号就表示  的开始，这个小于

号是不显示在我们最终看到的网页里的。那如果我们希望在网页中显示一个小于号，该怎

么办呢？

用实体1名字的好处是比较好理解，一看 #，大概就猜出是 #88! 的意思，

但是其劣势在于并不是所有的浏览器都支持最新的 1 名字。而实体1编号，各

种浏览器都能处理。

.如何显示空格

通常情况下， 会自动截去多余的空格。不管你加多少空格，都被看做一个空格。

比如你在两个字之间加了 ; 个空格， 会截去 E 个空格，只保留一个。为了在网页

中增加空格，可以使用P8J表示空格。

、最常用的字符实体I!3118

显示结果说明

1

Q"

1Q"

显示一个空格

P8

P:?;J



小于

P#J P:?;J



大于

PJ P:?*J

P符号

P"

P:0.J

双引号

PH&

P:0NJ

*、其他常用的字符实体I!3118

显示结果说明

1

Q"

1Q"

版权

P3&J P:?EJ

注册商标

PJ P:SNJ

乘号

P1"8

P:*KJ

除号

P$1=1$

J

P:*NSJ

5链接标记

超文本链接指针（超文本链接）是 !"# 最吸引人们优点之一。使用超文本链接指针

可以使顺序存放的文件具有一定程度上随机访问的能力，这更加符合人类的思维方式。人

的思维是跳跃的、交叉的，而每一个链接指针正好代表了作者或者读者的思维跳跃。因而

组织得好的链接指针不仅能使读者跳过他不感兴趣的章节比如一些枯燥的数据，而且有

助于更好地理解作者的意图。

567统一资源定位器

一个超文本链接指针由两部分组成。一是被指向的目标，它可以是同一文件的另一部

分，也可以是世界另一端的一个文件，还可以是动画或音乐；另一部分是指向目标的链接

指针。

统一资源定位器15&"8&3&3&是文件名的扩展。在单机系统中，定

位一个文件需要路径和文件名，对于遍布全球的  网，显然还需要知道文件存放在

哪个网络的哪台主机中才行。与单机系统不一样的是在单机系统中，所有的文件都由统一

的操作系统管理，因而不必给出访问该文件的方法；而在  上，各个网络，各台主

机的操作系统都不一样，因此必须指定访问该文件的方法。一个  包括了以上所有的信

息。它的构成为：

&&3&# %%"3!1("V &W／$13&／X#" 其中 &&3&# 是访问

该资源所采用的协议，即访问该资源的方法，它可以是：

!超文本传输协议，该资源是 !"# 文件 X#文件传输协议'用 5 访问该资源 5

文件传输协议'用 5 访问该资源 &!&! 协议'该资源是 &! 文件 >8表明

该资源是网络新 "$31("是存放该资源主机的 Y地址'通常以字符形式出现'如

8(1!(3(3& 端口号，是服务器在该主机所使用的端口号。一般情况下端口号不

需要指定，只有当服务器所使用的端口号不是缺省的端口号时才指定。

5相对路径和绝对路经

、概念：

『相对路径』：相对当前目录的路径，以引用文件之网页所在位置为参考基础，而建

立出的目录路径。

『绝对路径』：从根目录下的全路径（一般不推荐使用）。

其实绝对路径与相对路径的不同处，只在于描述目录路径时，所采用的参考点不同。

由于对网站上所有文件而言，根目录这个参考点对所有文件都是一样的，因此，运用以根

目录为参考点的路径描述方式才会被称之为绝对路径。

、表示方法：

以下为建立路径所使用的几个特殊符号，及其所代表的意义。

　　4(4代表目前所在的目录。

　　4((4代表上一层目录。

4%4代表根目录。

、例子说明：

（）建立的  站点拥有如下图所示目录路径。

假若要在 5(!" 文件中引用 65(15 文件时，其相对路径如下：

　　(%-+1*%65(15

　　上面的引用路径中，4(4代表目前的目录+1，所以4(%-+1*4代表目前目录下的

-+1*。其实，也可以省略4(%4直接用下面这个方式引用。

　　-+1*%65(15

若使用绝对路径以根目录为参考点引用该文件时，引用路径如下：

　　%+1%-+1*%65(15

（*）如果  站点的目录之结构如下图时

假若要在

5(!" 文件

中引用

65(15 文件时其相对路径如下：　((%-+1*%65(15

上面的引用路径中，4((4代表上一层目录，所以，%+1*4代表上一层目录下的 +1* 子

目录。若使用绝对路径引用时，则引用路径如下：%+1*%6(15

再举一个比较复杂的例子，来比较一下相对路径与绝对路径的使用。假设在读者所建

立之  站点中，拥有如下图的目录路径。

　　我们用以一

个表格来说明在

上图的情况下，

某文件引用另一

文件时，所应使

用的相对路径与绝对路径。

剩余63页未读，继续阅读

csdncsdn001

粉丝: 0
资源: 1

HTML入门教程：基本标签、表格、表单与CSS样式

html 学习教程.zip

html基础教程学习

动态HTML教程.rar_HTML 学习_HTML 教程_html教程

htmlhelp制作学习教程

HTML基础学习教程—ppt

DHTML 入门手册html学习教程

HTML教程 HTML教程

HTML5从入门到精通》中文学习教程，html5教程

2017全新版零基础HTML视频教程、零基础学习HTML视频教程

html 5 学习教程笔记.zip

最新资源