网页html代码详解
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
注释可有多行。
2.1.3 HTML的制作
制作HTML文档需要两个基本工具，一个HTML 编辑器，一个Web浏览器。 HTML编辑器可分为两类：基于文本或代码的编 辑器和所见即所得(WYSIWYG)编辑器。前者在 创建文档时只能看到HTML代码，后者在编辑时 即显示出类似于最终浏览器窗口显示的结果。
例：<hr width="20" size="2" > <hr width="80%" align="center" color="red">
2.2.1 排版标记
5. <center>
<center>称为居中标记，可以使标记的内容居中 显示，使用时需要结束标记</center>。
<div>是块定义标签，用于定义一个块的风格。 div要有开始标签<div>和结束标签</div> 当要在许多段落中设置对齐方式时，常用<div>标 记和align属性。如：
2.2.4 图像标记
·align：图像与文本的对齐方式，可取值为：
top：文本与图像顶部对齐；
middle：文本与图像中央对齐；
bottom：文本与图像底部对齐；
left：图像居左；
right：图像居右。
例[2-5]
2.2.4 图像标记
绝对路径与相对路径
⑴绝对路径
指定文档或文件的完整地址。
相对路径又分为根相对路径和文档相对路径， 根相对路径总是以站点根目录“/”为起始目录， 写起来比较简单；文档相对路径是以当前文件 所在路径为起始目录，进行相对的文件查找。
第2章 HTML语言
本章要点：
HTML的基础知识
常用HTML标记
XHTML
2.1 HTML简介
HTML（Hyper Text Markup Language）称为 超文本标记语言，是一种描述文档结构的标记 语言，它是一种应用非常广泛的网页格式，也 是最早被用来显示Web页的语言之一。它与操 作系统平台的选择无关，只要有浏览器就可以 运行HTML文档，显示网页内容。 HTML文档类似于.txt文本文件，不同的是，文 档里还包含一种被称为标记的符号。
Web浏览器用来浏览HTML文档，在Windows操 作系统上，常用的浏览器是Microsoft Internet Explorer，也常简称为IE。
2.1.3 HTML的制作
用记事本制作网页的步骤如下： 1) 打开记事本。 2) 在记事本中输入代码：
<html> <head> <title>我的第一个网页</title> </head> <body bgcolor="black" text="#FFFFFF"> 这是我用记事本做的第一个网页，我会努力学好HTML！ </body> </html>
为一整数，用来设定当前项的编号，其后的项目
将以此值为起始数目递增，前面各项不受影响。
2.2.3 列表标记
[例2-4]
图2.4 列表标记
2.2.4 图像标记
1. 图像文件的格式 常用图片格式：png、jpeg、gif、bmp。 2. 加入图像<img> 格式：<img src="图像文件名"> 常用属性： ·src：图像文件。 ·alt：替代文本。 ·height：高度；width：宽度。 ·border：边框宽度。 ·vspace：垂直边距；hspace：水平边距。
2.2.2 字体标记
2. <font>标记
格式：<font size=“数字” color=“颜色”>文本
</font> 常用属性： ·face：用来设定文本的字体，属性值为逗号隔 开的字体列表，如果浏览器所在机器上没有安 装指定的任何一种字体，则以浏览器默认字体 显示，所以使用时最好不使用特殊字体。
2.2.2 字体标记
[例2-3]
图2.3 字体标记
2.2.3 列表标记
1. 无序列表<ul>与<li>
定义项目列表的语法为：
<ul> <li>项1</li> <li>项2</li> …… </ul>
<ul>的常用属性只有一个type，用来 设定列表项前面出现的符号，可取属 性值有： ·disc：列表项前面加上符号●； ·circle：列表项前面加上符号○； ·square：列表项前面加上符号■。
⑵相对路径
2.2.4 图像标记
文档相对路径的几种形式：
①同一个目录中的文件：如果源文件和目标文件 在同一个目录里，直接写目标文件名即可。 ②表示上级目录：../表示源文件所在目录的上一 级目录，../../表示源文件所在目录的上上级目 录，以此类推。
③表示下级目录：直接写下级目录文件的路径即 可。
<b>为粗体标记，<b>与</b>之间的文本产生加粗效果。
<i>为斜体标记，<i>与</i>之间的文本产生斜体效果。 <u>为加下划线标记，<u>与</u>之间的文本显示时会 加底线。 <s>为加删除线标记，<s>与</s>之间的文本显示时会加 删除线。 注：这四个标记都是双标记，使用时如果忘掉结束标 记，则开始标记对后面的所有文本都起作用。
6. <div>
<div align=“center/right/left”>文本或图像</div>
2.2.1 排版标记
[例2-2]
图2.2 排版标记
2.2.2 字体标记
1. 标题<Hn> 格式： <Hn>标题</Hn>，n可取1~6之间的整数值
每个标题标记所标记的文本加粗显示独占一行 且上下保留一空白行，由<h1>到<h6>字体依次变 小。可用属性设置标题的对齐方式。
2.2.4 图像标记
[例2-6]：假设有如 图2.5所示的目录结构， 其中root、web、a、b、 c为文件夹，t.htm、 1.gif、2.gif等为相应文 件夹中的文件，怎样在 t.htm页中分别插入1至5 这五个图片？
本节分类介绍常用的HTML标记及其常用属 性，其它标记的详细情况请参考相关书籍。 1. 排版标记 2. 字体标记
3. 列表标记
5. 链接标记
4. 图像标记
6. 表格标记
7. 表单标记
8. 其他标记
2.2.1 排版标记
1. 段落标记<p>
用于分段，<p>和</p>之间的文字在同一段落， 并使前段与后段之间加一空白行。结束标记 </p>可以省略，下一个<p>开始意味着上一个 <p>结束 。
<pre>称为预格式化标记，它的作用是按原始代 码的排列方式显示内容。通常情况下，浏览器 显示时会忽略内容中的空白及换行，而<pre>与 </pre>之间的空白及换行会被保留。
3. 预格式化标记<pre>
2.2.1 排版标记
4. 水平线标记<hr> <hr>称为水平线标记，可以在页面中产生一条水 平线，没有结束标记。<hr>的常用属性有： ·align：对齐方式，属性值有left、center、right； ·width：长度，属性值可以是绝对值(像素)或相对 值(百分比) ； ·size：粗细，属性值为整数，单位为像素； ·color：颜色。
2.1.2 HTML文档结构
1. 文件头部
<head>、</head>之间定义，内容可包括标题 名、文本文件地址、创作者信息等网页信息说 明。
文件头部还可包括一些其他标记： ·<title> </title>：定义网页的标题；
·<meta>：说明一些与文档相关的信息，如作 者、关键内容、所用语言等；
<p>的常用属性align，用来设定段落的对齐方 式，可取属性值有： ·left：左对齐； ·center：居中对齐； ·right：右对齐。
2.2.1 排版标记
2. 强制换行<br>
<br>称为换行标记，在网页设计中比较常用， 它的作用就是换行。<br>属于单标记，没有结 束标记，且不包含任何属性。
2.1.3 HTML制作工具
3) 保存文件：HTML文件的扩展名为.htm、.html、 .aspx或asp，因为有些Web服务器对中文文件名不 能很好支持，所以文件名中尽量不要使用汉字。
4) 用浏览器打开上步保存的文件，即可看到如图2.1 所示的页面。
图2.1 第一个网页
2.2 常用HTML标记
2.2.2 字体标记
·size：用来设定文本的大小，属性值可以是绝 对的或相对的，如size=“5”是绝对的，表示文本 以5号字显示; size=“+2”是相对的，表示文本在 原先大小的基础上再增大2级。 size属性可取1~7 之间的整数值.
·color：设定文本的颜色。
2.2.2 字体标记
3. <b>、<i>、<u>、<s>标记
2.1.2 HTML文档结构
2. 文件主体
位于头部之后，在<body>、</body>之间定义， 定义了网页上显示的主要内容和显示格式。
文件主体内可包括众多其他标记。
Baidu Nhomakorabea
2.1.2 HTML文档结构
<body>标记常用属性： ·background：设置网页背景图案。
例如<body background=“photo_6.gif”>
·bgcolor：设置网页背景色。 例如<body bgcolor=“#00FF00”> ·text：设置文本颜色，默认黑色。 ·link：设置尚未被访问过的超文本链接的颜色。
·vlink：设置已被访问过的超文本链接的颜色。
2.1.2 HTML文档结构
3. 注释
格式：<!-- 注释 -->
注释以“<!--”开始，以“-->”结束，注释的内容会 被浏览器忽略。利用注释可以为HTML文档的不同 部分加上说明，方便日后修改，也可以利用注释为 HTML文档加上版权声明。
2.2.3 列表标记
2. 有序列表<ol>与<li>
定义编号列表的语法为：
<ol> <li>项1</li> <li>项2</li> …… </ol>
2.2.3 列表标记
<ol>的常用属性有： ·type：用来设定列表的编号形式，可取属性值有： 1：用阿拉伯数字1，2，3，…编号； a：用小写英文字母a，b，c，…编号； A：用大写英文字母A，B，C，…编号； i：用小写罗马字母ⅰ，ⅱ，ⅲ，…编号； I：用大写罗马字母Ⅰ，Ⅱ，Ⅲ，…编号。 ·start：用来设定列表开始编号的位置，不论采 用何种编号形式，属性值都为整数，如 start=“3”表示第一项从第3的位置开始编号。
(2) <标记名 属性名1=“属性值1” 属性名2=“属性 值2” >文本或超文本</标记名> 例：<font size=“3” color=“red”>你好！</font> (3) <标记名>
2.1.1 标记的格式
书写HTML代码时应注意以下几点： 1) HTML标记及属性中字母不区分大小写，如 <HTML>与<Html>对浏览器来说是完全相同的。 2) 标记名与左尖括号之间不能留有空白，如< html> 是错误的。 3) 属性要写在开始标记的尖括号中，放在标记名后， 并且与标记名之间要有空白；多个属性之间也要有 空白；属性值最好用单引号或双引号引起来，引号 一定要是英文的引号，不能是中文引号。 4) 结束标记要书写正确，不能忘掉斜杠。
2.2.3 列表标记
3. <li>标记 <li>用来标记列表中的一项，需同<ul>或<ol>一
起使用，它的属性有：
·type：用来设定列表项的符号，如果<li>用<ul> 里，属性取值为disc、circle或square，如果<li> 用在<ol>里，则属性取值为1、a、A、i或I。 ·value：此属性仅当<li>用在<ol>里有效，属性值
2.1.1 标记的格式
1. 标记的功能
控制网页的显示方式
由 <…>、</…>及括在其中的命令字符串组成 双标记： <…>、</…>成对出现， 如<HTML>、</HTML> 单标记： <…>，如<BR>、<HR>
2. 标记的构成
2.1.1 标记的格式
3. 标记的使用方法
(1) <标记名>文本或超文本</标记名>
2.1.2 HTML文档结构
表2-1 html文件构成骨架
文件开始 <html> <head> <title>标题名</title> 头 部 …其他头部内容定义标记… </head> <body> 主 体 …网页内容（文本、图像等)… </body> 文件结束 </html> <!--头部结束--> <!--主体开始--> <!--可包括其他标记--> <!--主体开始--> <!--头部开始--> <!--html文件标题-->
2.1.3 HTML的制作
制作HTML文档需要两个基本工具，一个HTML 编辑器，一个Web浏览器。 HTML编辑器可分为两类：基于文本或代码的编 辑器和所见即所得(WYSIWYG)编辑器。前者在 创建文档时只能看到HTML代码，后者在编辑时 即显示出类似于最终浏览器窗口显示的结果。
例：<hr width="20" size="2" > <hr width="80%" align="center" color="red">
2.2.1 排版标记
5. <center>
<center>称为居中标记，可以使标记的内容居中 显示，使用时需要结束标记</center>。
<div>是块定义标签，用于定义一个块的风格。 div要有开始标签<div>和结束标签</div> 当要在许多段落中设置对齐方式时，常用<div>标 记和align属性。如：
2.2.4 图像标记
·align：图像与文本的对齐方式，可取值为：
top：文本与图像顶部对齐；
middle：文本与图像中央对齐；
bottom：文本与图像底部对齐；
left：图像居左；
right：图像居右。
例[2-5]
2.2.4 图像标记
绝对路径与相对路径
⑴绝对路径
指定文档或文件的完整地址。
相对路径又分为根相对路径和文档相对路径， 根相对路径总是以站点根目录“/”为起始目录， 写起来比较简单；文档相对路径是以当前文件 所在路径为起始目录，进行相对的文件查找。
第2章 HTML语言
本章要点：
HTML的基础知识
常用HTML标记
XHTML
2.1 HTML简介
HTML（Hyper Text Markup Language）称为 超文本标记语言，是一种描述文档结构的标记 语言，它是一种应用非常广泛的网页格式，也 是最早被用来显示Web页的语言之一。它与操 作系统平台的选择无关，只要有浏览器就可以 运行HTML文档，显示网页内容。 HTML文档类似于.txt文本文件，不同的是，文 档里还包含一种被称为标记的符号。
Web浏览器用来浏览HTML文档，在Windows操 作系统上，常用的浏览器是Microsoft Internet Explorer，也常简称为IE。
2.1.3 HTML的制作
用记事本制作网页的步骤如下： 1) 打开记事本。 2) 在记事本中输入代码：
<html> <head> <title>我的第一个网页</title> </head> <body bgcolor="black" text="#FFFFFF"> 这是我用记事本做的第一个网页，我会努力学好HTML！ </body> </html>
为一整数，用来设定当前项的编号，其后的项目
将以此值为起始数目递增，前面各项不受影响。
2.2.3 列表标记
[例2-4]
图2.4 列表标记
2.2.4 图像标记
1. 图像文件的格式 常用图片格式：png、jpeg、gif、bmp。 2. 加入图像<img> 格式：<img src="图像文件名"> 常用属性： ·src：图像文件。 ·alt：替代文本。 ·height：高度；width：宽度。 ·border：边框宽度。 ·vspace：垂直边距；hspace：水平边距。
2.2.2 字体标记
2. <font>标记
格式：<font size=“数字” color=“颜色”>文本
</font> 常用属性： ·face：用来设定文本的字体，属性值为逗号隔 开的字体列表，如果浏览器所在机器上没有安 装指定的任何一种字体，则以浏览器默认字体 显示，所以使用时最好不使用特殊字体。
2.2.2 字体标记
[例2-3]
图2.3 字体标记
2.2.3 列表标记
1. 无序列表<ul>与<li>
定义项目列表的语法为：
<ul> <li>项1</li> <li>项2</li> …… </ul>
<ul>的常用属性只有一个type，用来 设定列表项前面出现的符号，可取属 性值有： ·disc：列表项前面加上符号●； ·circle：列表项前面加上符号○； ·square：列表项前面加上符号■。
⑵相对路径
2.2.4 图像标记
文档相对路径的几种形式：
①同一个目录中的文件：如果源文件和目标文件 在同一个目录里，直接写目标文件名即可。 ②表示上级目录：../表示源文件所在目录的上一 级目录，../../表示源文件所在目录的上上级目 录，以此类推。
③表示下级目录：直接写下级目录文件的路径即 可。
<b>为粗体标记，<b>与</b>之间的文本产生加粗效果。
<i>为斜体标记，<i>与</i>之间的文本产生斜体效果。 <u>为加下划线标记，<u>与</u>之间的文本显示时会 加底线。 <s>为加删除线标记，<s>与</s>之间的文本显示时会加 删除线。 注：这四个标记都是双标记，使用时如果忘掉结束标 记，则开始标记对后面的所有文本都起作用。
6. <div>
<div align=“center/right/left”>文本或图像</div>
2.2.1 排版标记
[例2-2]
图2.2 排版标记
2.2.2 字体标记
1. 标题<Hn> 格式： <Hn>标题</Hn>，n可取1~6之间的整数值
每个标题标记所标记的文本加粗显示独占一行 且上下保留一空白行，由<h1>到<h6>字体依次变 小。可用属性设置标题的对齐方式。
2.2.4 图像标记
[例2-6]：假设有如 图2.5所示的目录结构， 其中root、web、a、b、 c为文件夹，t.htm、 1.gif、2.gif等为相应文 件夹中的文件，怎样在 t.htm页中分别插入1至5 这五个图片？
本节分类介绍常用的HTML标记及其常用属 性，其它标记的详细情况请参考相关书籍。 1. 排版标记 2. 字体标记
3. 列表标记
5. 链接标记
4. 图像标记
6. 表格标记
7. 表单标记
8. 其他标记
2.2.1 排版标记
1. 段落标记<p>
用于分段，<p>和</p>之间的文字在同一段落， 并使前段与后段之间加一空白行。结束标记 </p>可以省略，下一个<p>开始意味着上一个 <p>结束 。
<pre>称为预格式化标记，它的作用是按原始代 码的排列方式显示内容。通常情况下，浏览器 显示时会忽略内容中的空白及换行，而<pre>与 </pre>之间的空白及换行会被保留。
3. 预格式化标记<pre>
2.2.1 排版标记
4. 水平线标记<hr> <hr>称为水平线标记，可以在页面中产生一条水 平线，没有结束标记。<hr>的常用属性有： ·align：对齐方式，属性值有left、center、right； ·width：长度，属性值可以是绝对值(像素)或相对 值(百分比) ； ·size：粗细，属性值为整数，单位为像素； ·color：颜色。
2.1.2 HTML文档结构
1. 文件头部
<head>、</head>之间定义，内容可包括标题 名、文本文件地址、创作者信息等网页信息说 明。
文件头部还可包括一些其他标记： ·<title> </title>：定义网页的标题；
·<meta>：说明一些与文档相关的信息，如作 者、关键内容、所用语言等；
<p>的常用属性align，用来设定段落的对齐方 式，可取属性值有： ·left：左对齐； ·center：居中对齐； ·right：右对齐。
2.2.1 排版标记
2. 强制换行<br>
<br>称为换行标记，在网页设计中比较常用， 它的作用就是换行。<br>属于单标记，没有结 束标记，且不包含任何属性。
2.1.3 HTML制作工具
3) 保存文件：HTML文件的扩展名为.htm、.html、 .aspx或asp，因为有些Web服务器对中文文件名不 能很好支持，所以文件名中尽量不要使用汉字。
4) 用浏览器打开上步保存的文件，即可看到如图2.1 所示的页面。
图2.1 第一个网页
2.2 常用HTML标记
2.2.2 字体标记
·size：用来设定文本的大小，属性值可以是绝 对的或相对的，如size=“5”是绝对的，表示文本 以5号字显示; size=“+2”是相对的，表示文本在 原先大小的基础上再增大2级。 size属性可取1~7 之间的整数值.
·color：设定文本的颜色。
2.2.2 字体标记
3. <b>、<i>、<u>、<s>标记
2.1.2 HTML文档结构
2. 文件主体
位于头部之后，在<body>、</body>之间定义， 定义了网页上显示的主要内容和显示格式。
文件主体内可包括众多其他标记。
Baidu Nhomakorabea
2.1.2 HTML文档结构
<body>标记常用属性： ·background：设置网页背景图案。
例如<body background=“photo_6.gif”>
·bgcolor：设置网页背景色。 例如<body bgcolor=“#00FF00”> ·text：设置文本颜色，默认黑色。 ·link：设置尚未被访问过的超文本链接的颜色。
·vlink：设置已被访问过的超文本链接的颜色。
2.1.2 HTML文档结构
3. 注释
格式：<!-- 注释 -->
注释以“<!--”开始，以“-->”结束，注释的内容会 被浏览器忽略。利用注释可以为HTML文档的不同 部分加上说明，方便日后修改，也可以利用注释为 HTML文档加上版权声明。
2.2.3 列表标记
2. 有序列表<ol>与<li>
定义编号列表的语法为：
<ol> <li>项1</li> <li>项2</li> …… </ol>
2.2.3 列表标记
<ol>的常用属性有： ·type：用来设定列表的编号形式，可取属性值有： 1：用阿拉伯数字1，2，3，…编号； a：用小写英文字母a，b，c，…编号； A：用大写英文字母A，B，C，…编号； i：用小写罗马字母ⅰ，ⅱ，ⅲ，…编号； I：用大写罗马字母Ⅰ，Ⅱ，Ⅲ，…编号。 ·start：用来设定列表开始编号的位置，不论采 用何种编号形式，属性值都为整数，如 start=“3”表示第一项从第3的位置开始编号。
(2) <标记名 属性名1=“属性值1” 属性名2=“属性 值2” >文本或超文本</标记名> 例：<font size=“3” color=“red”>你好！</font> (3) <标记名>
2.1.1 标记的格式
书写HTML代码时应注意以下几点： 1) HTML标记及属性中字母不区分大小写，如 <HTML>与<Html>对浏览器来说是完全相同的。 2) 标记名与左尖括号之间不能留有空白，如< html> 是错误的。 3) 属性要写在开始标记的尖括号中，放在标记名后， 并且与标记名之间要有空白；多个属性之间也要有 空白；属性值最好用单引号或双引号引起来，引号 一定要是英文的引号，不能是中文引号。 4) 结束标记要书写正确，不能忘掉斜杠。
2.2.3 列表标记
3. <li>标记 <li>用来标记列表中的一项，需同<ul>或<ol>一
起使用，它的属性有：
·type：用来设定列表项的符号，如果<li>用<ul> 里，属性取值为disc、circle或square，如果<li> 用在<ol>里，则属性取值为1、a、A、i或I。 ·value：此属性仅当<li>用在<ol>里有效，属性值
2.1.1 标记的格式
1. 标记的功能
控制网页的显示方式
由 <…>、</…>及括在其中的命令字符串组成 双标记： <…>、</…>成对出现， 如<HTML>、</HTML> 单标记： <…>，如<BR>、<HR>
2. 标记的构成
2.1.1 标记的格式
3. 标记的使用方法
(1) <标记名>文本或超文本</标记名>
2.1.2 HTML文档结构
表2-1 html文件构成骨架
文件开始 <html> <head> <title>标题名</title> 头 部 …其他头部内容定义标记… </head> <body> 主 体 …网页内容（文本、图像等)… </body> 文件结束 </html> <!--头部结束--> <!--主体开始--> <!--可包括其他标记--> <!--主体开始--> <!--头部开始--> <!--html文件标题-->