网页设计与制作 2 超文本标记语言HTML

合集下载

第2章网页设计与制作-HTML语言基础

例2.1 简单的HTML文档 <html> <head> <title>珠海欢迎您！</title> </head> <body> 这里是珠海悠游网，我们带您畅游珠海！ </body> </html>
由“<”和“>”组成的就是标记。在HTML 语言中标记分“单标记”和“双标记”。
2.1 HTML概述
2.2 文本的编辑
2.2.3 标题显示等级
语法格式为：
<hn>…</hn>
n：表示不同级别的标题，n值可以是1-6中的任意数字，其中1表示的标题字体最大。
可以用align属性设置对齐方式，常用的有左对齐，居中，右对齐三种对齐方式。
2.2 文本的编辑
2.2.4 列表
在HTML中，列表常用的有“有序列表”和 “无序列表”。
2.2 文本的编辑
2.2.4 列表
2．无序列表基本语法结构为：
<ul type=“n”>
<li>项目1</li> <li>项目2</li>
……
<li>项目n</li>
</ul>
Type:设置符号形状，有实心圆、小正方形、空心圆三种，具体如下：
n=disk：符号为实心圆。 n=square：符号为正方形。 n=circle：符号为空心圆。
绝对路径：完整的描述文件位置的路径就是绝对路径。对于绝对路径可以不需要知道其他任何信息就可以判断出文件的位置。
相对路径：所谓相对路径,顾名思义就是当前文档与目标的相对位置。例<src = "1.bmp">.

第03章超文本标识语言HTML

17
3.3.2标记语
4.注释形式
【例3-5】注释使用示例。 <HTML> <HEAD><TITLE>注释使用示例</TITLE></HEAD> <BODY> <H1 ALIGN="center">注释使用示例</H1>  <P> 山下旌旗在望，山头鼓角相闻。敌军围困万千重，我自岿然不动。 </P>  <P> 早已森严壁垒，更加众志成城。黄洋界上炮声隆，报道敌军宵遁。 </P> </BODY> </HTML>
超文本的特点：

清华大学出版社
3
3.1.1超文本、超媒体与通讯协议
2.超媒体

超媒体是指含有文本对象以外事物的超文本应用媒体。超媒体的应用方式包括：声音、图像、动画、视频等。超文本标记语言HTML含有定义与多媒体对象链接所用的置标标记。多媒体对象如何在浏览器上显示出现。图像媒体如何扩展成文稿中的一幅插图或图像。声音、动画和视频等媒体如何在具有“播放节目”控件、“停止播放节目”控件等的窗体中进行表示。
清华大学出版社
20
3.3.3结构标记
2.文档结构标记（1）总体标记<HTML></HTML> （2）标题标记<HEAD></HEAD> 表3-2标题元素
标题元素
<TITLE> <SCRIPT> <STYLE> <BASE> <META> <ISINDEX>

网页设计与制作 (2)

扩展名：.html，htm
编写工具：记事本，写字板Editplus及各种网页制作工具。
理超文本与标记：解所谓超文本，因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到知另一个文件，与世界各地主机的文件连接。识所谓标记，就是它采用了一系列的指令符号来控制输出的效果，这些指令符号用“<标签名字
注：x、y可取像素数，也可以取百分数。
图像布局 1. 图像在页面居中
<CENTER>标记 <CENTER> <IMG src="图像文件名"> </CENTER>
align属性
<P align="center"> <IMG src="图像文件名"> </P>
设置图像与文本之间的空白
格式： <IMG src=“图像文件名” hspace=x vspace=y>
<HR> <IMG src=“…”> … … <BR> <P>
2.1.3 与网页有关的常见名词
绝对路径:通过文件在文件系统中的绝对位置进行描述。例如：c:\html2\pages\ex\alink1.htm
相对路径:以当前文件所在的文件夹为基准来定位其它文件的路径。相对路径有三种情况：（1）链接的文件在当前文件夹的上一级文件夹下时用 “..”表示向上一级，用“\”来分隔文件夹和文件名。（2）链接的文件在当前文件夹的下一级文件夹下时直接写下一级文件夹名和文件名。（3）链接的文件在当前文件夹中时，直接写文件名。
（3）使用<Hn>标记和align属性的center值格式：<Hn align=“center”>文本或图像</ Hn >

网页设计与制作项目教程(HTML+CSS+Bootstrap)项目二

• ７. ＨＴＭＬ文档
上一页下一页返回
任务一初识 HTML
• ＨＴＭＬ文档用来描述网页. ＨＴＭＬ文档包含ＨＴＭＬ标签和纯文本. ＨＴＭＬ文档也被称为网页. 完整的ＨＴＭＬ文档至少包括< ｈｔｍｌ > 标签、< ｈｅａｄ > 标签、< ｔｉｔｌｅ > 标签和< ｂｏｄｙ >标签.
• ＨＴＭＬ４. ０同样也加入了很多特定浏览器的元素和属性. 但是同时也开始“清理” 这个标准. 把一些元素和属性标记为过时. 建议不再使用它们.
上一页下一页返回
任务一初识 HTML
• ＨＴＭＬ５草案的前身名为ＷｅｂＡｐｐｌｉｃａｔｉｏｎｓ１. ０. 于２００４年由ＷＨＡＴＷＧ提出. 于２００７年被Ｗ３Ｃ接纳. 并成立了新的ＨＴＭＬ工作团队. 在２００８年１月２２日. 第一份正式草案发布.２０１２年１２月１７日. 万维网联盟(Ｗ３Ｃ) 正式宣布凝结了大量网络工作者心血的ＨＴＭＬ５规范已经正式定稿. Ｗ３Ｃ的发言稿称:“ＨＴＭＬ５是开放的Ｗｅｂ网络平台的奠基石.” ２０１３年５月６日. ＨＴＭＬ５.１正式草案公布. 该规范定义了第五次重大版本. 第一次要修订万维网的核心语言: 超文本标记语言(ＨＴＭＬ). 在这个版本中. 新功能不断推出. 以帮助Ｗｅｂ应用程序的作者. 努力提高新元素互操作性. ２０１４年１０月２９日. 万维网联盟宣布. 经过几乎８年的艰辛努力. ＨＴＭＬ５标准规范最终制定完成了. 并已公开发布.
上一页下一页返回
任务一初识 HTML
• ５. ＨＴＭＬ发展历史 • 超文本标记语言(第一版): １９９３年６月作为互联网工程工作小组

第2章超文本标记语言HTML

3
第1节 HTML语言基础 HTML语言基础
注意：
1.每个元素都用“<”和 >”括起来， <”与元素名 1.每个元素都用“<”和“>”括起来，“<”与元素名每个元素都用括起来之间不能有空格或其它字符不能有空格或其它字符。之间不能有空格或其它字符。 2.所有的元素都是成对出现的在元素名前加符号“ 所有的元素都是成对出现 2.所有的元素都是成对出现的，在元素名前加符号“/” 便是其结束标记，表示这种元素内容的结束。便是其结束标记，表示这种元素内容的结束。 3.元素名不用区分大小写。元素名不用区分大小写 3.元素名不用区分大小写。但在编写网页时最好保持元素的大小写一致，这样便于辨认，元素的大小写一致，这样便于辨认，有利于减少编制网页中的错误。制网页中的错误。 4.对同一段要标记的内容可以用多个元素来共同作对同一段要标记的内容， 4.对同一段要标记的内容，可以用多个元素来共同作产生一定的效果。用，产生一定的效果。此时各个元素间的顺序也是任意的。任意的。
2
第1节 HTML语言基础 HTML语言基础
HTML的基本结构二、 HTML的基本结构 HTML的元素与标签 1、HTML的元素与标签 HTML文档是由元素和内容组成的文档是由元素和内容组成的。 HTML文档是由元素和内容组成的。其元素(Element)就是HTML (Element)就是HTML语言中尖括号中，元素 (Element) 就是 HTML 语言中尖括号之间的标记，又叫标签(Tag) (Tag)。之间的标记，又叫标签(Tag)。元素分为两大类：元素分为两大类：一类用于确定超文本在浏览器中显示的方式；浏览器中显示的方式；另一类用于确定超文本在浏览器中显示的内容。文本在浏览器中显示的内容。元素在文本中具有如下格式：中具有如下格式：元素名>内容</元素名> </元素名 <元素名>内容</元素名>

html超文本标记语言

2/55
概述
二、HTML的基本语法
1、HTML的元素与标签基本形式：<元素名>内容</元素名> 说明：尖括号间的标记用于确定超文本在浏览器中的显示方式和内容。也有些元素，如<hr>，不需要</hr>，不对文档中的某个部分起作用，只是用来提供给浏览器的一种显示方式。也有些元素具有属性，属性值可以更准确的描述浏览器的显示方式。如： <hr align=“center” color=“green” size=“10” noshade>
四、网页内部的链接
当网页比较长时，可以网页内部建立链接，使得可以快速跳转。有时需要跳转到另外一张网页时，也需要直接到达该网页的内部。做法： 1、利用<a>标记符的name属性，建立目标锚点 2、利用<a>标记符的href属性，建立链接
26/55
HTML页的链接
that.htm文件
<html> <body> <a name="#top">标题</a><p> 这是一些无关的内容!<p>这是一些无关的内容!<p>这是一些无关的内容!<p> 这是一些无关的内容!<p>这是一些无关的内容!<p>这是一些无关的内容!<p> 这是一些无关的内容!<p>这是一些无关的内容!<p>这是一些无关的内容!<p> 这是一些无关的内容!<p>这是一些无关的内容!<p>这是一些无关的内容!<p> 这是一些无关的内容!<p>这是一些无关的内容!<p>这是一些无关的内容!<p> 这是一些无关的内容!<p>这是一些无关的内容!<p>这是一些无关的内容!<p> 这是一些无关的内容!<p>这是一些无关的内容!<p>这是一些无关的内容!<p> <a name="#point">锚点</a><p> <a href="a">回到标题</a> </body> </html>

网页设计与制作名词解释

1协议：事先约定货定义的一组精确地规定所交换数据的格式和传输方式的方法和规则，即计算机在交换信息时都要遵守的表达方式。

主要包括用户数据和控制信息的结构和格式，需要发出的控制信息以及相应要完成的操作与响应、对事件实现顺序的详细说明等三个部分。

2网站的层次：指整个站点各个层次之间的结构关系。

这是一种逻辑上的概念，目的在于合理组织整个站点中的所有内容，便于访问者查找和浏览，一般来说站点都把自身的内容分为多个层次，每个层次逐渐递进,最后达到最相信的内容。

3表单：是网页中站点服务器处理的一组数据输入域。

当访问者单击按钮或图形来提交表单后，数据就会传送到服务器上。

它是非常重要的通过网页在与服务器之间传递信息的途径，表单网页可以用来说收集浏览者的意见和建议，以实现浏览者与站点之间的互动。

4内联式样式单：它利用于现有的HTML标记，把特殊的样式加入到那些由标记控制的信息中。

5虚拟主机:使用特殊的软硬件技术，把一台运行在因特网上的服务器主机分为多台“虚拟"主机,每一台虚拟主机都具有独立的域名和IP地址,具有完整的Internet服务器功能，虚拟主机之间完全独立,并可由用户自行管理，每一台虚拟主机和一台独立的主机完全一样.6标记型网页制作工具：指创建的网页文件在编辑过程中只能看到页面的源代码，只需要转到浏览器中就能看到页面的效果。

要求用户对HTML的使用方法非常熟悉才能够做出希望要的页面，其优点在于可以完全的控制页面元素，写出精简的代码.7色相：是颜色的基本属性，反应颜色的原貌,通过色相,人们才能区分种种颜色。

8客户端图像地图：它可将每个作用区的URL位置直接对应在Web网页的图像。

客户端图像映射并不需要通过服务器处理来允许站点访问者是否可在图像映射上进行超级链接。

但是,并非所有的浏览器都支持客户端图像映射。

9嵌入式样式单：和Script类似，嵌入到HTML文件的头部中去（<html>和<body>标记之间的〈head〉〈/head>标记之间）使用<Style>和〈/style>标记装载。

超文本标记语言(英文：HyperText Markup Language,HTML)

超文本标记语言（英文：HyperText Markup Language，HTML）超文本标记语言（英文：HyperText Markup Language，HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。

HTML被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。

1982年由蒂姆·伯纳斯-李创建，由IETF用简化的SGML（标准通用标记语言）语法进行进一步发展的HTML，后来成为国际标准，由万维网联盟（W3C）维护。

1 基本介绍HTML（HyperText Markup Language），超文本标记语言，是一种专门用于创建Web超文本文档的编程语言，它能告诉Web浏览程序如何显示Web文档（即网页）的信息，如何链接各种信息。

使用HTML语言可以在其生成的文档中含有其它文档，或者含有图像、声音、视频等，从而形成超文本。

超文本文档本身并不真正含有其他的文档，它仅仅含有指向这些文档的指针，这些指针就是超链接。

HTML是用来制作网页的语言，网页中的每个元素都需要用HTML规定的专门标记来定义。

要让设计者在网络上发布的网页能够被世界各地的浏览者所阅读，需要一种规范化的发布语言。

在万维网(WWW)上，文档的发布语言是HTML。

标记语言是一种基于源代码解释的访问方式，它的源文件由一个纯文本文件组成，代码中由许多元素组成，而前台浏览器通过解释这些元素显示各种样式的文档。

换句话说，浏览器就是把纯文本的后台源文件以赋有样式定义的超文本文件方式显示出来。

HTML和网络是紧密相连的，HTML语言的发展和浏览器的支持是密不可分的，在20世纪90年代网络刚刚兴起时，多种浏览器同时流行于世界各地，它们支持HTML语言的标准也各不相同，这样限制了HTML标记语言本身的发展，逐渐，W3C网络标准化组织联手一些较为流行浏览器开发厂商一同定义HTML标准，并且力推浏览器解释语言和显示方法的统一。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

段落标记
强制回车符分段标记符水平线预排格式分区标记其他的段落标记
5
2.2 HTML语言基本格式(3)

文字标记
字体大小颜色
6
2.2 HTML语言基本格式(4)

列表格式
有序列表无序列表嵌套列表
7
2.3 超链接(1)

链接到属性
连接到标记链接到页面链接到文件链接到邮件

添加pHTML编写网页实例(6)

添加part5内容
23
习题
1.
2. 3. 4.
熟悉掌握基本的HTML语法，不要求全部掌握，但是一些基本的如<a>等要求熟悉。结合网页编辑软件来加深对HTML语法了解。利用表单语法制作一个论坛的账号注册页面。尝试在文本编辑器中利用HTML语法设计一个完整的网页。
24
第2章
超文本标记语言HTML
1
本章重点

HTML编辑工具 HTML基本语法表单
2
2.1 HTML概述

HTML编辑环境
EditPlus
3
2.2 HTML语言基本格式(1)

基本格式标记符
文档标记符头文件标记符主体标记符标题标记符

4
2.2 HTML语言基本格式(2)

11
2.5 表格

表格定义表行单元格
12
2.6 表单(1)
邮箱登录表单
用户注册表单
13
2.6 表单(2)

<FORM>
Action属性 Method属性 Target属性 Enctype属性

14
2.6 表单(3)

<INPUT>
文本<INPUT TYPE="TEXT"> 密码<INPUT TYPE="PASSWORD"> 提交按钮<INPUT TYPE="SUBMIT"> 普通按钮<INPUT TYPE="BUTTON“> 重置按钮<INPUT TYPE="RESET"> 图片<INPUT TYPE="IMAGE" SRC="图片名和路径"> 文件<INPUT TYPE="FILE"> 隐藏<INPUT TYPE="HIDDEN">

表单制作实例
17
2.7 利用HTML编写网页实例(1)

编写网页框架
18
2.7 利用HTML编写网页实例(2)

编写网页内容
添加part1内容
19
2.7 利用HTML编写网页实例(3)

添加part2内容
20
2.7 利用HTML编写网页实例(4)

添加part3内容
21
2.7 利用HTML编写网页实例(5)

15
2.6 表单(4)

<INPUT>
单选<INPUT TYPE="RADIO"> 复选<INPUT TYPE="CHECKBOX"> 下拉菜单<SELECT>内容</SELECT> 多行输入<TEXTAREA>内容</TEXTAREA>

表单的发布
16
2.6 表单(5)
8
2.3 超链接(2)

其他属性
Target属性 hreflang属性 ACCESSKEY属性 TABINDEX属性

9
2.4 图片(1)

SRC属性 ALT属性 WIDTH和HEIGHT属性 BORDER属性 ALIGN属性 HSPACE和VSPACE属性
10
2.4 图片(2)