第2章 HTML基础
合集下载
第2章 HTML设置与编写
学会设置编码平台
学会设置编码平台
3.设置“代码格式”参数
说明：除了“大小写自动转换”之外的所有首选参数只影响新文档和新添加 到现 有文档的部分。 “自动缩进”方法：查看/代码视图选项/自动缩进
学会设置编码平台
4.设置“代码提示”参数
此对话框允许用户指定首选参数，以确定Dreamweaver在“代码”视图和快 速标 签编辑器中显示代码的方式和时间。
学会设置编码平台
“内容”：指如何插入标签的内容，即是否将换行符、格式设置和缩进规则
应用于内容。Fra bibliotek“大小写”：指定特定标签的大小写。选项为：默认、小写、大写、混合
大
小写 “+”：添加标签 “－”：删除标签
编 写 代 码
1.编码环境
Dreamweaver 8编码环境支持的语言类型： HTML、XHTML、CSS、JavaScript、VBScript、ColdFusion、ASP、、 JSP、PHP 2.代码提示功能 示例：<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>代码提示功能</title> <script language="javascript"></script> </head> <body> </body> </html>
第二章 HTML基础
2.4 建立超链接
2.4.1 建立超链接
建立超链接的标记是<a>，语法格式为： <a href = "url" >超链接标识 </a> url：指明链接目标的具体路径和文件名。 超链接标识：是网页中链接的载体，可以 是文字或图像、热区等页面元素，用户点击它 就会跳到超链接的目标位置。
2.4 建立超链接
2.2 文本的编辑
2.2.4 列表
2．无序列表 基本语法结构为：
<ul type=n> <li>项目1 <li>项目2 …… <li>项目n </ul>
Type：设置符号形状，有实心圆、小正方 形、空心圆三种，具体情况如下： n=disk：符号为实心圆。 n=square：符号为正方形。 n=circle：符号为空心圆。
3．水平线标记<hr> 水平线是在网页上划出一条水平的分割线，用 <hr>来标记水平线。语法格式为： <hr align=left / center / right noshade size=？ width=？ color=？> Size：设置水平线的高度，以像素为单位。 Color：设置水平线的颜色。 Width：设置水平线的宽度，单位是像素或百 分比，像素是绝对大小，不会随着浏览器窗口的大 小而改变，百分比是相对于浏览器窗口水平线所占 的比例，会随着浏览器窗口的大小而改变。 Align：设置水平线的对齐方式。对齐方式有 三种：左对齐、居中、右对齐。
2.3 图像编辑
我们在网页上经常会浏览图像，适当使 用图像可以增加网页的美观。在网页中最常 用到的是插入图像和设置背景图像。
2.3.1 插入图像 2.3.2 使用背景图像
第2章 html基础语法
第2章目录
第2章 HTML语言基础 HTML语言基础
六、超链接标记
链接－当前页面与其他相关页面间的联结关系；链 接的目标可以是任何图像和文件。若浏览器能识别就显 示，不能识别就下载 格式：<A>…</A> 功能：在当前页面和其他页面间建立链接。 主要属性见附表。 【举例2 【举例2－7】超级链接
第2章目录
第2章目录
功能：分区显示文档(布局)
第2章 HTML语言基础 HTML语言基础
说明：在一个文本块或许多段落中设置布局(对齐) 方式，经常使用DIV，它可以将文档内容分成区块一次 性地布局
注意：★若单个align属性出现在DIV内的标题或段 注意：★若单个align属性出现在DIV内的标题或段 落中,这些值将使全局变量DIV的设置无效 落中,这些值将使全局变量DIV的设置无效 ★DIV不是段落类型，故DIV应与其它标记配 DIV不是段落类型，故DIV应与其它标记配 合使用( 合使用(如P、Hn、UL、BLOCKQUOTE等) Hn、UL、BLOCKQUOTE等 ★也可以用CENTER代替DIV 也可以用CENTER代替DIV
第2章目录
【举例2 【举例2－4】文本标记综合示例
第2章 HTML语言基础 HTML语言基础
四、列表格式标记
1、有序列表 格式：<OL type=“符号类型”> <LI type=“符号类型”>……</LI> <LI type=“符号类型”>……</LI> …… </OL> 功能：建立有序列表
第2章目录
第2章目录
【举例】<Br>标记 【举例】<Br>标记
第2章 HTML语言基础 HTML语言基础
第二章HTML语言基础
第二章HTML编程基础HTML是超文本标记语言（Hypertext Markup Language）的缩写，是Web环境的语言基础。
浏览器的主要功能就是识别和解释HTML语言，从而决定网页内容的显示方式。
HTML只是一种描述性的标记语言，不是编程语言，没有复杂的语法和结构，因而非常简单易学。
2．1 构建HTML网页HTML文件是纯ASCII码文件，可以用任何纯文本编辑工具（如记事本）编写，一般使用Dreamweaver或FrontPage这些所见即所得的可视化工具更为方便。
2.1.1HTML页面的基本组成启动 Dreamweaver 时自动建立一个新的空白HTML文档。
切换到“代码”视图窗口，就可以看到以下代码：<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>无标题文档</title></head><body></body></html>从中可见，一个基本的HTML文档总是以标记<html>开始，以</html>结束。
其中用<head></head>和<body></body>把文档分为两个部分。
<head>与</head>之间的是文件头，文件头内包含关于文件的说明信息，这些信息并不在浏览器窗口中显示。
在<body>和</body>之间的内容是文档的体，包括文本、图形、窗体和框架等，都是窗口中要显示的内容。
HTML 文件结构如图2-1所示。
图2-1 HTML文件结构2.1.2HTML标记的特点(1)HTML标记均是用尖括号<>阔起来的，大多数标记是成对出现和使用的，有开始标记和对应的结束标记，结束标记在尖括号中使用反斜杠“/”，其用法格式为：<标记名>文本</标记>比如：<title>无标题文档</title>，这条语句的作用是在浏览器的标题栏显示“无标题文档”几个字。
第2章 HTML、XHTML、HTML5
第2章 HTML、XHTML、HTML5
第14页
2.2.5 命名空间
在XHTML文档中，还有一句常见的代码： <html xmlns="/1999/xhtml" > xmlns，即XHTML Namespace的缩写，即命名空间。 该属性声明了html顶级元素的命名空间，用来定义该顶级元 素以及其包含的各级子元素的唯一性。由于XML语言允许用 户自定义标签，使用命名空间，可以避免自己定义的标签和 别人定义的标签发生冲突。比如，如果两个人定义了一个一 模一样的文档，若文件头部没有xmlns命名空间的区分，就 会发生冲突，如果在文档头部加上了不同的命名空间，则文 档不会冲突。通俗地讲，命名空间就是给文档做一个标签， 标明该文档是属于哪个网站的。对于HTML文档来说，由于 它的元素是固定的，不允许用户进行定义，所以指定的命名 空间永远是/1999/xhtml。
第20页
2.4 新增和废除的属性
2.4.1 新增的属性 2.4.2 废除的属性
第2章 HTML、XHTML、HTML5
第21页
2.4.1 新增的属性
HTML5中新增的属性主要体现在表单属性、链接 属性以及其他属性。
第2章 HTML、XHTML、HTML5
第22页
2.4.1 新增的属性
第2章 HTML、XHTML、HTML5
第2页
本章的学习目标
了解H TML语言的作用、结构和语法 了解XHTML和XML的关系，及XHTML的 语法特点 掌握HTML5的语法和元素 掌握HTML5中新增的以及废除的元素 掌握HTML5中新增的和废除的属性 掌握HTML5新增的全局属性 掌握HTML5新增的事件
第2章 HTML入门
本”或“写字板等”进行编辑，代码输入后，一定要 把文件的扩展名保存为“.htm”或“.html”。
图2-2 编辑HTML文档
图2-3 IE显示HTML网页内容
2.3 HTML编码基础
2.3.1 HTML文档的基本架构 • HTML文档的基本结构如下：
<html> <head> 文件头信息 </head> <body> 文件体信息 </body> </html> ——文件开始标记 文件头标记
2.4.1 文本格式
2．文字修饰标记
• HTML文档允许在要显示的文字两端添加各种文字修
饰标记，这些标记及其功能描述如下表 ：
2.4.1 文本格式
[例2]文字修饰标记——制作如图2-5所示的多格式网页 文本效果 。
图2-5字体修饰标记的应用
2.4.1 文本格式
代码如下：
<html> <head> <title>文字修饰标记</title> </head> <body> <B>粗体字</B><p> <I>斜体字</I><p> <U>加下划线</U><p> <sub>下标字效果</sub><p> <strike>带删除线字体</strike><p> <Strong>字体强调效果</strong><p> </body> </html>
2.4.2 段落格式
图2-2 编辑HTML文档
图2-3 IE显示HTML网页内容
2.3 HTML编码基础
2.3.1 HTML文档的基本架构 • HTML文档的基本结构如下：
<html> <head> 文件头信息 </head> <body> 文件体信息 </body> </html> ——文件开始标记 文件头标记
2.4.1 文本格式
2．文字修饰标记
• HTML文档允许在要显示的文字两端添加各种文字修
饰标记，这些标记及其功能描述如下表 ：
2.4.1 文本格式
[例2]文字修饰标记——制作如图2-5所示的多格式网页 文本效果 。
图2-5字体修饰标记的应用
2.4.1 文本格式
代码如下：
<html> <head> <title>文字修饰标记</title> </head> <body> <B>粗体字</B><p> <I>斜体字</I><p> <U>加下划线</U><p> <sub>下标字效果</sub><p> <strike>带删除线字体</strike><p> <Strong>字体强调效果</strong><p> </body> </html>
2.4.2 段落格式
HTML基础知识
上一页 下一页 返回
2.4 HTM L标记
2.图像标记<IMG>
在HTML中，使用IMG标记在网页中加入图像。它具有 两个基本属性src和alt，分别用于设置图像文件的位置和替 换文本。
上一页 下一页 返回
2.4 HTM L标记
2.4.6超链接标记
1.相对地址与绝对地址 URL 统一资源定位符，也被称为网页地址，是表示互联
上一页 下一页 返回
2.4 HTM L标记
2.4.3文本标记
1.<FONT> <FONT>标记用于控制网页上文字的字体，大小和颜色。
控制方式是利用属性设置得以实现的。 2.特殊符号
某些字符在HTML中具有特殊意义，如小于号(<)即定 义HTML标记的开始。这个小于号是不显示在最终看到的网 页单的。那如果希望在网页中显示一个小于号，该怎么办呢? 要在浏览器中显示这些特殊字符，就必须在HTML文档中使 用字符实体。
在<TD>和<TH>标记内使用colspan的取值表示水平 方向上合并的列数。
上一页 下一页 返回
2.4 HTM L标记
2.4.8表单标记
1.表单元素 <FORM>标记：用于在网页中创建表单区域，属于一
个容器标记，表示其他表单标记需要在它的包围中才有效。 其属性介绍如下。 action用来设置接收和处理浏览器递交的表单内容的服务器程 序的URL。 method：此属性告诉浏览器如何将数据发送给服务器，它指 定向服务器发送数据的方法(用POST方法还是用GET方法)。
上一页 下一页 返回
2.4 HTM L标记
2.4.10脚本标记
有时，网页中的一些特殊效果击要加入脚本语言才能够 实现，脚本语言是一种简化的编程语言，它可以生成许多的 网页特效，如滚动的文字、雪花效果、波浪效果等。‘常用 的脚本语言有3种，分别是JavaScript， VBScript和 Jscript。其中JavaS cript是IE不II Navigator都完全 支持的脚本语言，所以使用得最广泛。
2.4 HTM L标记
2.图像标记<IMG>
在HTML中，使用IMG标记在网页中加入图像。它具有 两个基本属性src和alt，分别用于设置图像文件的位置和替 换文本。
上一页 下一页 返回
2.4 HTM L标记
2.4.6超链接标记
1.相对地址与绝对地址 URL 统一资源定位符，也被称为网页地址，是表示互联
上一页 下一页 返回
2.4 HTM L标记
2.4.3文本标记
1.<FONT> <FONT>标记用于控制网页上文字的字体，大小和颜色。
控制方式是利用属性设置得以实现的。 2.特殊符号
某些字符在HTML中具有特殊意义，如小于号(<)即定 义HTML标记的开始。这个小于号是不显示在最终看到的网 页单的。那如果希望在网页中显示一个小于号，该怎么办呢? 要在浏览器中显示这些特殊字符，就必须在HTML文档中使 用字符实体。
在<TD>和<TH>标记内使用colspan的取值表示水平 方向上合并的列数。
上一页 下一页 返回
2.4 HTM L标记
2.4.8表单标记
1.表单元素 <FORM>标记：用于在网页中创建表单区域，属于一
个容器标记，表示其他表单标记需要在它的包围中才有效。 其属性介绍如下。 action用来设置接收和处理浏览器递交的表单内容的服务器程 序的URL。 method：此属性告诉浏览器如何将数据发送给服务器，它指 定向服务器发送数据的方法(用POST方法还是用GET方法)。
上一页 下一页 返回
2.4 HTM L标记
2.4.10脚本标记
有时，网页中的一些特殊效果击要加入脚本语言才能够 实现，脚本语言是一种简化的编程语言，它可以生成许多的 网页特效，如滚动的文字、雪花效果、波浪效果等。‘常用 的脚本语言有3种，分别是JavaScript， VBScript和 Jscript。其中JavaS cript是IE不II Navigator都完全 支持的脚本语言，所以使用得最广泛。
第2章 HTML语言基础
<head> <script src="path/to/script.js" language="javascript" type="text/javascript"> </script> </head>
引用外部 文件
2.2.3 HTML中样式表的书写
级联样式表CSS可以精确指定网页元素位置，控制网页 外观以及创建特殊效果。 在网页上使用样式表有三种方法： ① 应用内嵌样式到各个网页元素。 ② 在网页上创建嵌入式样式表。 ③ 将网页链接到外部样式表。 1．内嵌样式 使用内嵌样式以应用层叠样式表属性到网页元素上。 例如段落标记符的内嵌样式属性如下： <p style="border-style: solid">
2.2.3 HTML中样式表的书写
2．嵌入式样式表 若只是定义当前网页的样式，可使用嵌入的样式表。
<HEAD><TITLE>字体属性示例</TITLE> <STYLE> <!-.s1{ font-family:黑体;font-size:x-large; font-style:italic } .s2{ font-size:larger} .s3{ font-variant:small-caps} .s4{ font-weight:bolder} .s5{ font:bolder italic 楷体_gb2312} --> </STYLE> </HEAD>
图2-1 简单的HTML文档
2.2 HTML文件的整体结构
2.2.1 HTML文件结构
一个完整的HTML文件结构如下: <html> 头部 <head>头部信息</head> <body>正文信息</body> 正文 </html>
第2章 HTML语言基础
16
2.1.2 HTML文件
【例2-1】简单的HTML文件。 <HTML> <HEAD> <TITLE> 简单的HTML文件 </TITLE> </HEAD> <BODY> 最简单的网页 </BODY> </HTML>
17
2.2 HTML语言的段落、超链接、图片标记
2.2.1 简单标记的认识与使用
表2-2 16种标准颜色
23
2.2.1 简单标记的认识与使用
例2-2 使用网页的背景色（bgcolor）属性，可以设定整个 网页的背景颜色；使用网页的文本色（text）属性，可以设 定整个网页文字的颜色。 <HTML> <HEAD> 这是主体之外的文本 <TITLE> 试试BODY标记的属性 </TITLE> </HEAD> <BODY bgcolor=greenyellow text=blue>
就其本质而言，是一个基于文本的编码标准，用于指示浏
览器以什么方式显示信息。 HTML是一种用于网页制作的排版语言，是Web最基本的构 成元素。HTML并非一种编程语言。 组成HTML的“命令”就是标记，它用符号“<”和“>”括起
来。
3
2.1.1 HTML概述
2. HTML的作用
① 格式化文本。 ② 建立超链接。
注意： ①并不是所有的标记都有属性，如换行标记<BR>。 ②根据需要可以用该标记的所有属性，也可以只用 需要的几个属性，在使用时，属性之间没有顺序。多 个属性之间用空格隔开。 属性和标记一样，都不区分大小写。但为了阅读方 便，本书用大写字母表示标记，小写字母表示属性。
2.1.2 HTML文件
【例2-1】简单的HTML文件。 <HTML> <HEAD> <TITLE> 简单的HTML文件 </TITLE> </HEAD> <BODY> 最简单的网页 </BODY> </HTML>
17
2.2 HTML语言的段落、超链接、图片标记
2.2.1 简单标记的认识与使用
表2-2 16种标准颜色
23
2.2.1 简单标记的认识与使用
例2-2 使用网页的背景色（bgcolor）属性，可以设定整个 网页的背景颜色；使用网页的文本色（text）属性，可以设 定整个网页文字的颜色。 <HTML> <HEAD> 这是主体之外的文本 <TITLE> 试试BODY标记的属性 </TITLE> </HEAD> <BODY bgcolor=greenyellow text=blue>
就其本质而言，是一个基于文本的编码标准，用于指示浏
览器以什么方式显示信息。 HTML是一种用于网页制作的排版语言，是Web最基本的构 成元素。HTML并非一种编程语言。 组成HTML的“命令”就是标记，它用符号“<”和“>”括起
来。
3
2.1.1 HTML概述
2. HTML的作用
① 格式化文本。 ② 建立超链接。
注意： ①并不是所有的标记都有属性，如换行标记<BR>。 ②根据需要可以用该标记的所有属性，也可以只用 需要的几个属性，在使用时，属性之间没有顺序。多 个属性之间用空格隔开。 属性和标记一样，都不区分大小写。但为了阅读方 便，本书用大写字母表示标记，小写字母表示属性。
第2章 常用HTML标记和格式(20)
思考
• 可以让H1比H2小吗？怎样做到？
思考
• 可以让H1比H2小吗？怎样做到？ • H标记有size属性吗？
思考
• 可以让H1比H2小吗？怎样做到？ • H标记有size属性吗？ • 通过标记嵌套做到
• <h2><font size=22> Current Research Highlights </font></h2> • <h1>Research Highlights</h1>
浏览器会自动地在标题的前后添加空行
• • • •
ቤተ መጻሕፍቲ ባይዱ
一般情况下，浏览器对标题作如下解释： H1 黑体，特大字体，居中，上下各有两行空行。 H2 黑体，大字体，上下各有一到两行空行。 H3 黑体（斜体），大字体，左端微缩进，上下空 行。 • H4 黑体，普通字体，比H3缩进更多，上边一空行。 • H5 黑体（斜体），与H4相同缩进，上边一空行。 • H6 黑体，与正文有相同缩进，上边一空行。
• 例如一种颜色在十进位中红、绿、蓝的比例分别 是36、104、160（■），在十六进位制中则分别 为24、68、A0，所以十六进位制数字表示方法就 为：2468A0，如果数字小于16，在十六进位中就 会小于10，前面就要加0，如在十进位中分别为0、 1、2，在十六进位制数字表示方法中就为： 000102，所以可以表示的颜色数总共有：2563 = 16,777,216 种。[1] • /wiki/%E7%BD%91%E9%A 1%B5%E9%A2%9C%E8%89%B2
•
• •
段落
HTML 段落 段落是通过 <p> 标题定义的。 实例
<p>This is a paragraph</p> <p>This is another paragraph</p>
第二章 网页设计语言_Html
标题标记用于设置文档中的标题，其中
<H1>...</H1>标记表示字体最大的标题，
<H6>…</H6>标记表示字体最小的标题。
每个标题标记所标记的字句将独占一行且上下留下一空 白行。
演示：Sample2_4.htm
水平线的插入 <hr>标志是在Html文档中加入一条水平线。
COLOR属性
设置水平线的颜色，例如<HR color=red>
2.5.1 在网页中插入图像
演示：Sample2_13.htm、Sample2_14.htm
2.5.2
播放多媒体文件
Img标记不仅用于在网页中插入图像，也可以用
于播放多媒体文件（.avi）。若要在网页中播放多媒
体文件，应在IMG标记中设置以下属性： DYNSRC：指定要播放的多媒体文件的URL。 START：指定何时开始播放多媒体文件，其取值可 以是fileopen或mouseover。
二、创建无序列表 使用UL和LI标记来创建，语法格式如下：
<UL>
<LI>列表项1
…… <LI>列表项n </UL>
UL标记的TYPE属性用于指定列表项前面显示的项目 符号，其取值可以是：
disc：使用实心圆作为项目符号（默认值）。
circle：使用空心圆作为项目符号。 square：使用方块作为项目符号。 演示：Sample2_10.htm
<P align=“center”> 演示：Sample2_7.htm 、Sample2_8.htm
二、换行标记<BR> 大多数情况下，段落标记<P>是分隔文本的最佳
第2章++HTML标记语言
设置字型标记应用举例
<HTML> <HEAD><TITLE>字型设置标记的应用</TITLE> </HEAD> <BODY> <B>黑体</B> <I>斜体</I> <U>带下划线</U> <TT>标准打印机字体</TT> <STRIKE>带删除线</STRIKE> <SUB>下标</SUB> <SUP>上标</SUP> <BIG>大字体</BIG> <SMALL>小字体</SMALL> </BODY> </HTML>
举 例
<HTML> <HEAD> 这是主体之外的文本 <TITLE>个人网页</TITLE> </HEAD> <BODY bgcolor="greenyellow" Text="#0000FF"> <P>页面背景为黄绿色</P> <P>文本颜色为蓝色</P> </BODY> </HTML>
颜色代码表
第2章 HTML标记语言
2.1 HTML基础 2.2 HTML文档结构标记 2.3 段落和文字标记 2.4 列表标记 2.5 建立超级链接 2.6 插入图片 2.7 表格 2.8 框架 2.9 表单 2.10 其他HTML标记
2.1 HTML基础
• Dreamweaver是和HTML语言一起使用的，利用Dreamweaver制作 的网页要通过HTML标记显示； • HTML不是一种编程语言，它是一种描述性的标记语言，使用标 记符定义HTML文档的功能和信息； • HTML文件的组成：标记、文字与图片资料、统一资源定位器U记 • FONT标记
HTML基础
《Web程序设计》
10
表2-1 BODY标记属性值
标记属性 background=URL bgcolor=colorvalue text=colorvalue link=colorvalue vlink=colorvalue alink=colorvalue bgproperties =fixed leftmargin=size 设置网页的背景图片 设置网页的背景颜色 设置文本的颜色 设置尚未被访问过的超文本链接的颜色，默认为蓝色 设置已被访问过的超文本链接的颜色，默认为紫色 设置超文本链接在被单击的瞬间的颜色，默认为红色 设置背景是否随滚动条滚动 设置网页左边的空白 功能
《Web程序设计》
预定义格式标记
23
《Web程序设计》
24
例 <HTML> <HEAD> <TITLE>显示<p>与<pre>的区别 </TITLE> </HEAD> <BODY> <P>春晓 春眠不觉晓，处处闻啼鸟。 夜来风雨声，花落知多少。 </P> <PRE width=1>春晓 春眠不觉晓，处处闻啼鸟。 夜来风雨声，花落知多少。 </PRE> </BODY> </HTML>
《Web程序设计》
2.1.2 HTML文档的结构
<HTML> <HEAD> 标题部分 </HEAD> <BODY> 正文部分 </BODY> </HTML> 每一个用尖括号“ < ”和“ > ” 括起来的部分称为一个标记，每一 个标记都必须有一个标记名称来作 为该标记的唯一标识。绝大部分的 标记都有其相关属性及属性值，取 值可以用双引号括起来 ( 也可以不 用) 大部分的标记都是成对出现的， 这类标记称为包容标记。个别标记 是单独出现的，这类标记称为空标 记。需要说明的是，HTML语言是不 区分大小写的 5 《Web程序设计》
第2章：HTML、JavaScript简介
<html>
<head> <title>javascript的学习</title> <script language="javascript"> var row=5; var col=10; document.write("<table border=\"1\">"); for(i=0;i<row;i++){ document.write("<tr>"); for(j=0;j<col;j++){ document.write("<td>"+i*j+"</td>"); } document.write("</tr>"); } document.write("</table>"); </script> </head> <body></body> </html>
别忘了，这些文件保存为*.html; 如果你对这个语言很是了解了，有时也可 以不用Var声明，直接写出变量即可；即上 面的红色的字段去掉即可，产生的也是同 样的效果(前提是较高的浏览器版本。)
在JavaScript中程序也分为一下三种结
构： <1>、顺序结构：程序代码从头到尾执行 ； <2>、分支结构：中间加入若干判断条件 ，根据判断条件来决定代码的执行； <3>、循环结构：将一段代码体重复执行 ； 为什么下面这个代码中的变量i,j不用 定义成整型的呢，定义成整型的却是代码 无法在网页中显示？
第二章HTML基础
•计算机一班 •计算机二班
例：
无序列表
例：
有序列表
1. 计算机一班 2. 计算机二班
1.无序列表
无序列表由两个标记组成，语法如下：
<ul>
<li> <li> 计算机一班 计算机二班
</ul>
<ul></ul> 表示中间的内容为无序列表 <li> 表明为一个列表项
例：
<html><body> <ul> <li>第一章 <li>第二章 <li>第三章 </ul> </body></html>
问其它的信息资源。
HTML文件大致结构
<HTML> <HEAD> <TITLE>网页标题</TITLE> </HEAD>
<BODY>
网页的内容 </BODY>
</HTML>
一个完整的html文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "/TR/REC-html40/strict.dtd"> <HTML> <HEAD> <TITLE>The document title</TITLE> </HEAD> <BODY> <H1>Main heading</H1> <P>A paragraph.</P> <P>Another paragraph.</P> </BODY> 运行结果 </HTML>
例：
无序列表
例：
有序列表
1. 计算机一班 2. 计算机二班
1.无序列表
无序列表由两个标记组成，语法如下：
<ul>
<li> <li> 计算机一班 计算机二班
</ul>
<ul></ul> 表示中间的内容为无序列表 <li> 表明为一个列表项
例：
<html><body> <ul> <li>第一章 <li>第二章 <li>第三章 </ul> </body></html>
问其它的信息资源。
HTML文件大致结构
<HTML> <HEAD> <TITLE>网页标题</TITLE> </HEAD>
<BODY>
网页的内容 </BODY>
</HTML>
一个完整的html文件
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "/TR/REC-html40/strict.dtd"> <HTML> <HEAD> <TITLE>The document title</TITLE> </HEAD> <BODY> <H1>Main heading</H1> <P>A paragraph.</P> <P>Another paragraph.</P> </BODY> 运行结果 </HTML>
第2章 HTML语言基础
HTML语言基础 第2章 HTML语言基础
HTML概述 HTML概述
HTML( Hypertext Marked Language，超文本标记语言 ： ，超文本标记语言)： 是一种用来制作超文本文档的简单标记语言。 是一种用来制作超文本文档的简单标记语言。
HTML是一种标记式语言，而不是如C++和Java之类的编程语 HTML是一种标记式语言，而不是如C++和Java之类的编程语 是一种标记式语言 C++ 明白了各种标记的用法便算学懂了HTML。 基本上只要明白了各种标记的用法便算学懂了HTML 言，基本上只要明白了各种标记的用法便算学懂了HTML。 任何文本编辑器都可以用来编写HTML网页，包括记事本、写 任何文本编辑器都可以用来编写HTML网页，包括记事本、 HTML网页 字板、word等编辑软件 但在保持时注意， 等编辑软件， 字板、word等编辑软件，但在保持时注意，一定要用扩展名 为”.html”的纯文本方式存盘。 .html”的纯文本方式存盘。 在客户端浏览器，可以通过单击菜单[查看]/[源文件] 在客户端浏览器，可以通过单击菜单[查看]/[源文件]查看 ]/[源文件 浏览器所打开的HTML网页的源代码。 HTML网页的源代码 浏览器所打开的HTML网页的源代码。
（2）多数标记是成对出现的，一对标记的前面一个是起始标 ）多数标记是成对出现的， 第二个是结束标记， 记，第二个是结束标记，在起始和结束标记之间的文本是元素 内容。在起始标记的标记名称前加上符号“ 便是结束标记 便是结束标记。 内容。在起始标记的标记名称前加上符号“/”便是结束标记。 例如：<html>与</html>、<body>与</body>。 例如：<html>与</html>、<body>与</body>。
HTML概述 HTML概述
HTML( Hypertext Marked Language，超文本标记语言 ： ，超文本标记语言)： 是一种用来制作超文本文档的简单标记语言。 是一种用来制作超文本文档的简单标记语言。
HTML是一种标记式语言，而不是如C++和Java之类的编程语 HTML是一种标记式语言，而不是如C++和Java之类的编程语 是一种标记式语言 C++ 明白了各种标记的用法便算学懂了HTML。 基本上只要明白了各种标记的用法便算学懂了HTML 言，基本上只要明白了各种标记的用法便算学懂了HTML。 任何文本编辑器都可以用来编写HTML网页，包括记事本、写 任何文本编辑器都可以用来编写HTML网页，包括记事本、 HTML网页 字板、word等编辑软件 但在保持时注意， 等编辑软件， 字板、word等编辑软件，但在保持时注意，一定要用扩展名 为”.html”的纯文本方式存盘。 .html”的纯文本方式存盘。 在客户端浏览器，可以通过单击菜单[查看]/[源文件] 在客户端浏览器，可以通过单击菜单[查看]/[源文件]查看 ]/[源文件 浏览器所打开的HTML网页的源代码。 HTML网页的源代码 浏览器所打开的HTML网页的源代码。
（2）多数标记是成对出现的，一对标记的前面一个是起始标 ）多数标记是成对出现的， 第二个是结束标记， 记，第二个是结束标记，在起始和结束标记之间的文本是元素 内容。在起始标记的标记名称前加上符号“ 便是结束标记 便是结束标记。 内容。在起始标记的标记名称前加上符号“/”便是结束标记。 例如：<html>与</html>、<body>与</body>。 例如：<html>与</html>、<body>与</body>。
第2-9章html知识g
Page 32
3.4.6 忽略html标记
Page 33
3.4.7 设置段落缩进
利用段落的缩进，可以增加段落的层次效果。 基本语法：
<blockquote>…</blockquote>
Page 34
3.4.7 设置段落缩进
01：<!--程序3-20--> 02：<html> 03：<head> 04：<title>段落缩进</title> 05：</head> 06：<body> 07： 关于我们<br> 08： <blockquote > 09： <p>五十个不同的分子，在不同状态下进入了同一容器，</p><!--缩进了5个字符--> 10： </blockquote> 11： <blockquote><blockquote> 12： <p>这就组成了我们的家——083007班。<p> 13： </blockquote></blockquote> 14： <!--缩进了10个字符--> 15：</body> 16：</html>
3.3.3上标、下标
在数学公式中，上标和下标的使用比较广泛，比如x1，x2， y1，y2等。 基本语法： <sup>…</sup> <sub>…</sub>
<!--程序3-10--> <html> <head> <title>上标、下标的实现</title> </head> <body> <h2>解下面的代数方程式</h2> x<sup>2</sup>-3x+2=0<br> 解：x<sub>1</sub>=2; x<sub>2</sub>=1<br> </body> </html>
第二章_HTML基础
文件的基本结构
<html> <head> <title>网页标题</title> </head> <body> 网页正文 </body> </html> //文件开始 //文件头 //网页标题 //文件头结束 //文件体 //文件体结束 //文件结束
第一个HTML文件示例
效果图
第一个HTML文件示例
2.4.1 网页文字的颜色属性
页面文字颜色 text 语法： <body text=颜色值> 提示：所有颜色表示方式为两种：十六进制 （RGB）或英文颜色名称。如红色为red或 者#ff0000。 背景颜色 bgcolor 语法 <body bgcolor=颜色值>
2.4.2 网页背景属性 背景图片 background 语法 <body background=背景图片所在位 置> 提示：背景图片所在位置的路径必须要 描述正确，否则可能导致网页背景无法 正常预览。
第二章
HTML基础
第二章 HTML基础
要把信息发布到全球，就必须要使用一 种大多数计算机或者浏览器能够识别的 语言。 在Internet上，通常使用的发布语言是 HTML (HyperText Markup Language)。
本章内容
基 础 实 例
编辑与运行环境
基本语法结构及
文字颜色 网页背景 链接文字颜色 边距属性
文件结构
书写注意事项
2.1 编辑与运行环境
HTML语言是一个纯文本文件，用
户可以采用任何一个文本编辑器 (常用为释执行。
2.2 基本语法结构及文件结构 一个HTML文件是由一系列的元素和标 签组成。 元素指逻辑上同一的对象，例如标题、 网页主体等。 标签用来分割和描述这些元素。 •单独标签 –语法：<元素名称></元素名 称>
快速上手HTML与CSS编程
快速上手HTML与CSS编程第一章：HTML基础知识HTML（HyperText Markup Language）是一种用于创建网页的标记语言。
它使用标签（tag）来描述网页的结构和内容。
在学习HTML之前，我们需要了解一些基础知识。
1. HTML文档结构HTML文档由文档类型（<!DOCTYPE>）、<html>、<head>和<body>标签组成。
其中，<!DOCTYPE>声明文档类型，<html>标签定义了HTML文档的根元素，<head>标签包含一些元数据，<body>标签是网页内容的容器。
2. HTML标签HTML标签用于定义文档的元素和内容。
常见的标签包括：<h1>-<h6>标签用于标题，<p>标签用于段落，<a>标签用于创建超链接等。
每个标签都有特定的语义和用法。
3. HTML属性HTML属性提供了附加的信息，用于指定标签的行为和样式。
比如，<a>标签的href属性指定了超链接的目标地址，<img>标签的src属性指定了图片的位置。
第二章：CSS基础知识CSS（Cascading Style Sheets）是一种用于描述网页样式的样式表语言。
通过CSS，我们可以对HTML元素应用各种视觉效果。
1. CSS语法CSS由选择器和声明块组成。
选择器指定要应用样式的HTML 元素，声明块包含一系列的属性和值对，用于描述元素的样式。
2. CSS选择器CSS选择器用于选择HTML元素，并对其应用样式。
常见的选择器有：元素选择器（如p、div等）、类选择器（以.开头，如.class）、id选择器（以#开头，如#id）等。
3. CSS样式属性CSS样式属性用于设置HTML元素的外观。
比如，color属性用于设置文本的颜色，background属性用于设置元素的背景颜色或图片。
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第2章 HTML基础
75-
10
HTML句法结构 句法结构
标记和文本结合起来形成元素(Element).每个元 标记和文本结合起来形成 . 素代表文档中的一个对象,比如文件头, 素代表文档中的一个对象,比如文件头,段落 或图片.一个元素可具有一个或一对标记, 或图片.一个元素可具有一个或一对标记,通 常具有一些相关的属性. 常具有一些相关的属性. 元素有两种类型:容器( 元素有两种类型:容器(container)元素和 ) 单个元素(空元素). 单个元素(空元素).
第2章 HTML基础
75-
5
HTML句法结构 句法结构
第2章 HTML基础
75-
6
HTML句法结构 句法结构
Google首页的部分源代码 首页的部分源代码 <html> <head> <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=GB2312"> <title>Google</title> ... </head> 另外还有HTML文档主体部分的声明. 文档主体部分的声明. 另外还有 文档主体部分的声明 <body bgcolor=#ffffff text=#000000 link=#0000cc vlink=551a8b alink=#ff0000 onLoad=sf()> <center>
第2章 HTML基础 7517
HTML文档结构和常用元素 文档结构和常用元素
ISMAP属性用于建交互式的图形.如果使用 属性用于建交互式的图形. 属性用于建交互式的图形 <A "href=http://URL1"><IMG src="URL2" ismap></A>语法,则这图像上成为一个可击 语法, 语法 产生一个链接到URL1处. 点,产生一个链接到 处 例如: 例如:
第2章 HTML基础
75-
13
HTML文档结构和常用元素 文档结构和常用元素
这三个元素一起构成完整的HTML文档结构模板,所 文档结构模板, 这三个元素一起构成完整的 文档结构模板 有的HTML文档都应该遵循这个模板: 文档都应该遵循这个模板: 有的 文档都应该遵循这个模板
<HTML> <HEAD> Header element </HEAD> <BODY> body of Document </BODY> </HTML>
<A "href="><IMG src="xjtu_logo.gif" ismap></A>
第2章 HTML基础
75-
18
HTML文档结构和常用元素 文档结构和常用元素
<UL><LI>text<LI>text</UL>:该结构提供了一个无序的条目列 表;每个条目以<LI>标记开始.通常在显示出的各条目项前置 一个实心的圆点. <A HREF=URL>text</A>:超文本标记,也称为超链接.文本 用某种特殊方式来显示(用颜色,下划线或其它类似方法); 当点击屏幕上的超文本链接时,Web服务器将检索"HREF" 属 性中的"URL"给出的文档,并将结果返回给用户浏览器. <HR>:放置一个横穿浏览器窗口的水平线,通常水平线的上下 各有一个空行. <BR>:在文本中强制换行,以便后继文本都放在下一行.
第2章 HTML基础
75-
16
HTML文档结构和常用元素 文档结构和常用元素
<IMG src="URL" alt="text" align=TOP/MIDDLE/BOTTOM ISMAP>
把图像插入到文档中,图像可以在 把图像插入到文档中,图像可以在src属性指定的 属性指定的 URL处找到.最常见的图像格式是 处找到. 处找到 最常见的图像格式是GIF. . 如果浏览器不支持插入图像(例如, 如果浏览器不支持插入图像(例如,Lynx浏览 浏览 ),将显示在可选的 属性中给出的文本. 将显示在可选的alt属性中给出的文本 器),将显示在可选的 属性中给出的文本.如 果没有给出alt属性值 属性值, 果没有给出 属性值,在图形所在的位置上可能 会出现[IMAGE]的字样. 的字样. 会出现 的字样 可选的align属性指出文本的当前行与图像在垂直 可选的 属性指出文本的当前行与图像在垂直 方向上怎样对齐(通常是BOTTOM,但这随浏览 方向上怎样对齐(通常是 , 器的不同而不同). 器的不同而不同).
基于开放平台的 网页设计与编程
第2章 HTML基础 章 基础
第2章 HTML基础
75-
1
第2章 HTML基础 章 基础
本章内容
HTML句法结构 句法结构 HTML文档结构和常用元素 文档结构和常用元素 HTML标准单位 标准单位 HTML基本元素的使用 基本元素的使用 HTML的其他元素 的其他元素
第2章 HTML基础
75-
15
HTML文档结构和常用元素 文档结构和常用元素
<BODY>容器元素中包含以下几个常用元素: 容器元素中包含以下几个常用元素: 容器元素中包含以下几个常用元素
<H#>text</H#>:标题把括起来的文本作为标题.从标记 :标题把括起来的文本作为标题. <H1>,<H2>直到 直到<H6>,可以有六个层次的标题(较小的 , 直到 ,可以有六个层次的标题( 数字标记较重要的标题).标题通常用较大的字型编排, ).标题通常用较大的字型编排 数字标记较重要的标题).标题通常用较大的字型编排,并 且在该标题的上下各有一个空行. 且在该标题的上下各有一个空行. <P>:段落标识文本主体中两个段落之间的间隔. :段落标识文本主体中两个段落之间的间隔. <IMG SRC="URL">:图像标记把图像插入到文档中,图像 :图像标记把图像插入到文档中, 可以在SRC属性中给出的 属性中给出的URL处找到. 处找到. 可以在 属性中给出的 处找到
第2章 HTML基础
75-
8
HTML句法结构 句法结构
主页文档第二行的<head>标记中, 标记中, 在Google主页文档第二行的 主页文档第二行的 标记中 head是标记名,没有相关属性. 是标记名, 是标记名 没有相关属性. 在文档主体<body>定义中,定义了若干属性, 定义中, 在文档主体 定义中 定义了若干属性, 属性值为" 属性值为"bgcolor=#ffffff text=#000000 link=#0000cc vlink=551a8b alink=#ff0000 onLoad=sf()". .
第2章 HTML基础
75-
11
HTML句法结构 句法结构
容器元素包含文本内容,代表一个文本段,它由文本 包含文本内容,代表一个文本段, 包含文本内容 主体(或其他元素)组成, 主体(或其他元素)组成,文本主体在开头和结尾处 用一对标记来确定边界( 用一对标记来确定边界(结尾的标记用标记名前加 来表示, "/"来表示,并不带任何属性). 来表示 并不带任何属性).
第2章 HTML基础
75-
4
概述
使用HTML的可以创建: 的可以创建: 使用 的可以创建
发布包括标题,正文表格甚至照片的联机文档; 发布包括标题,正文表格甚至照片的联机文档; 联机文档 可以通过超链标记将所建的文档与其他联机文档建 可以通过超链标记将所建的文档与其他联机文档建 立访问关联; 立访问关联; 设计浏览器表单进行远程交互服务 如查找信息, 进行远程交互服务, 设计浏览器表单进行远程交互服务,如查找信息, 进行预订,购置产品等; 进行预订,购置产品等; 可以将电子表格,视频剪辑,声音节目和其他多媒 可以将电子表格,视频剪辑,声音节目和其他多媒 体信息包括在 包括在HTML文档中. 文档中. 体信息包括在 文档中
第2章 HTML基础
75-
2
第2章 教学目标 章
理解和掌握HTML句法,文档结构,基本元素, 句法,文档结构,基本元素, 理解和掌握 句法 其中列表,表单, 其中列表,表单,表格等与后续课程有重要联 系的HTML元素尤为重要; 元素尤为重要; 系的 元素尤为重要 了解CSS的基本工作原理.掌握和熟练使用基 的基本工作原理. 了解 的基本工作原理 于文本的HTML编辑工具,学习使用 编辑工具, 于文本的 编辑工具 学习使用Web服务 服务 器发布网页; 器发布网页; 学习使用浏览器查看网页的源代码. 学习使用浏览器查看网页的源代码.
例如,在输入HTML文件时,可以在每个标记后有若干个空行, 或在每个单词之间有10个空格,但浏览器对此却"熟视无睹", 结果显示可能会出乎预料.
尽管这可能使简单的格式变得更复杂, 尽管这可能使简单的格式变得更复杂,但它允许作者 通过使用编程风格的技巧, 通过使用编程风格的技巧,如额外的空白空间和制表 符等而使HTML文件具有可读性而不影响最终的文档 符等而使 文件具有可读性而不影响最终的文档 显示. 显示.
<tagneme attribute1=value1 attribute2=value2…>
在标记定义中, 在标记定义中,"tagname"是标记名,定义标记的 是 , 类型; 类型;而"attributes"为属性,一般标记即可以不定 为属性, 义属性,也可以定义若干个属性, 给出了这个元 义属性,也可以定义若干个属性,属性给出了这个元 给出了这个 素的附加信息. 素的附加信息.