认识HTML语言.共60页文档
HTML语言基础PPT教学课件
2020/12/10
9
水 平 线 标 记<HR>
水平线标记用于在网页窗口中加一条水平线，用以分隔文 档。它的标记为<HR>，其属性有： ➢ align，用于设定水平线的位置，值有靠左left，居中
center，靠右right ➢ noshade，用于设定水平线不具有三维立体感 ➢ size，用于设定水平线的高度 ➢ width，用于设定水平线的宽度 ➢ color，用于设定水平线的颜色
rignt，靠上top，靠下bottom等 ➢ width，height,分别用于设置图像的宽度和高度 ➢ vspace，hspace，用于设置图像的水平和垂直间距 ➢ id，用于给图像命名 问：插入站点images目录下的图片em.jpg，设置其文字提示为“峨嵋天 下秀”，设置其边框为1，设置其位置为居中，设置其宽度为200象素， 高度为150象素，代码如何编写？
件说明和刷新网页等（提示：在DWMX中可通过插入/文件头 标签来进行设置） ➢ 标题：<TITLE></TITLE>，用于定义文件标题，该标题将显 示于浏览器顶端的标题栏（提示：在DWMX中可通过文档工 具栏的标题文本框来设置） ➢ 样式：<STYLE></STYLE>，用于定义和控制网页的版式 （提示：在DWMX中可通过文本/CSS样式来进行设置）
1.初识html语言
课题：第一课：初识html语言
前言
我们知道internet 是目前世界上应用最广泛是计算机网络，而internet上面的信息的基本组织是网页和网站，因此具备网页与网站设计技术是非常必要的。
本课程主要以html基础语言知识为讲解，让大家深入明白、理解、运用我们所学的html语言技术
那html是什么呢？
Html是网页制作的基础语言，是英文Hyper Text Mark-up Language是缩写它是一种用来制作超文本文档的基础语言
我们通常所说的网页语言其实包括很多种，有html、asp、php….
而html语言是学网页设计、网站架设、网站开发….必须具备的基础知识
备注
所以为了大家能够真正的学习到这些技术，我们开设了html培训班这套课程。
为的是让新手能够真正学习好关于网站方面的各种技术，有了基础，那么再学习其他技术也就非常容易了！也是为了老手能够重新温习一下这些技术！所以说我们开设本套课程是非常有必要的！
Html课程总共50课，课程主要以新手为主来按照顺序讲解的！在课程中如果有什么遗漏疏忽，望请大家多多包涵！。
HTML语言简介ppt课件
;
4
标记语言
• ＜标记 属性＝值＞内容＜/标记＞ • <B>这是Bold的文字</B> • <A href=“1.htm”>这是链接</A>
;
5
标记语言
• 起始标记(Start Tag)和结束标记(End Tag)一般 成对使用。<a>……</a>
• MIME类型和子类型一般以类型/子类型
的形式列出。
• 例如，一个MPEG视频文件将会以 "video/mpeg"的形式列出。
;
27
MIME多目的Internet邮件扩展
常见的MIME类型 超文本标记语言文本 .html,.html 普通文本 .txt RTF文本 .rtf GIF图形 .gif JPEG图形 .jpeg,.jpg au声音文件 .au MIDI音乐文件 mid,.midi RealAudio音乐文件 .ra, .ram MPEG文件 .mpg,.mpeg AVI文件 .avi GZIP文件 .gz TAR文件 .tar
9. 一个一般的URI会包括哪几个部分？
10. 什么是相对的URI？
11. HTTP协议工作在一个什么模型上？
12. HTTP协议中，Web服务器如何把网页发回给浏览器？
;
1
HTML
• HyperText Markup Language
• RFC 2616 - Hypertext Transfer Protocol -- HTTP1.1
• HTML文档中所有的内容都应该在这 两个标记之间，一个HTML文档总是 以<html>开始，以</html>结束。
html的基本概念
html的基本概念HTML是网页制作的基础语言，它通过标签和属性的组合形成一个完整的页面，其中包含着各种不同的元素和内容。
了解HTML的基本概念是学好网页制作的前提，下面就让我们来一步一步地了解HTML的基本概念吧。
第一步：HTML的全称是超文本标记语言，它是一种用于构建网站和网页的标记语言。
HTML最初是由欧洲核子研究中心的物理学家蒂姆·伯纳斯-李发明的，其设计目的是用来在不同的电脑之间共享文档。
HTML的主要特点是可以在文本中添加超链接、图像、音频、视频等元素，从而实现丰富的内容呈现效果。
第二步：HTML的基本结构由两部分组成，分别是文本内容和标记。
文本内容是指页面中要呈现的文字、图像和其他元素，而标记则是指用于描述和组织文本内容的特定的代码。
HTML的标记由尖括号“< >”组成，通常包含一个标记名和一些属性，标记名通常是一个关键词，用于指明该标记的作用，而属性则用于对标记进行进一步细分和描述。
第三步：HTML的基本元素包括文本元素、图像元素、链接元素、表格元素、表单元素等，这些元素在组合起来构成一个完整的网页。
其中，文本元素是HTML中最基本的元素，包括各种标题、段落、文本样式等。
图像元素用于在页面中插入图像，链接元素用于在页面中添加链接，表格元素用于构建表格，而表单元素则用于构建用户输入和提交信息的界面。
第四步：HTML的基本语法是由标记和属性组成的语句，其中标记通常用尖括号来包围，而属性则用于对标记的进一步性质进行描述。
例如，一个简单的HTML语句可以是“<p align='center'>这是一个居中对齐的段落。
</p>”，其中“p”是一个表示段落的标记，而“align”是属性，用于描述该段落的对齐方式。
在HTML中，标记和属性通常采用小写字母进行书写，而且在一些情况下，属性的取值也需要加上引号。
第五步：HTML的基本规范是需要遵循W3C标准，这是一种国际化的网页标准，可以确保网页在不同的浏览器和设备中能够正常地显示和处理。
第1章 认识HTML语言
第1章 认识HTML语言从本章开始，本书来介绍HTML+CSS方面知识。
前面部分主要介绍HTML（Hyper Text Markup Language 超文本标记语言），然后介绍如何在HTML里面用DIV和CSS结合来控制HTML标签表达页面效果，接着介绍CSS常用的属性，最后，用不同的网站风格来布局主页，灵活运用学过的HTML和CSS知识。
本章节主要给读者介绍HTML语言，通过介绍，让读者对HTML语言有初步认识。
学好HTML是网页前台制作的基础，从而为以后做网页打好基础。
在学习本章前，先告诉读者，先从HTML语言最基础的部分介绍，如什么是HTML，用什么来写HTML代码，怎么查看写完代码后的效果等，在将要学习本章时，以下知识点即将要介绍给读者，内容如下： HTML标记概念怎么创建网页HMTL页面运行环境如果在window系统安装编写HTML软件HTML最其本的代码是什么HTML有哪些浏览器支持1.1 HTML简介HTML是一种用来制作超文本文档的简单标记语言。
用HTML编写的超文本文档称为HTML文档，自1990年以来HTML就一直被用作World Wide Web上的信息表示语言，用于描述网页的格式设计和它与WWW上其他页面的连结信息。
HTML语言是通过利用各种标记（tags）来标识文档的结构以及标识超链（Hyperlink）的信息。
但有时因不同浏览器显示不同的效果，这就是为什么同一文档在不同的浏览器中展示的效果会不一样。
目前HTML语言的版本是2.0，它是基于SGML（Standard Generalized Markup Language，标准广义置标语言，是一套用来描述数字化文档的结构并管理其内容的复杂的规范）中的一个子集演变而来的。
现在很多工具都支持“所见即所得”。
“所见即所得”是指在工具上直接编辑页面效果，可以不用管理HTML代码，换言之，在不知道HTML的前提下，有了“所见即所得”的工具也可以做网页，但需要提醒读者的是，那些“所见即所得”工具的确给网页制作带来很大方便，很多人使用，但原理还离不开HTML语言，只不过它用另一种方式帮用户写好了这些代码，要注意，万变不离其宗，学好了HTML语言，要使用那些“所见即所得”的工具时，可以不使用“所见即所得”的功能。
HTML语言介绍
HTML语言介绍
HTML的历史可以追溯到1990年，当时由物理学家蒂姆·伯纳斯-李（Tim Berners-Lee）创建了第一个网页。
他发现人们需要一种结构化的
方式来共享信息，于是创造了HTML作为万维网的基础。
当时的HTML版本
非常简单，只能展示文本、标题和列表等基本内容。
随着互联网的发展，HTML的功能不断扩展。
第二个主要版本HTML2
于1995年发布，添加了表格和图像等功能。
HTML3于1997年发布，引入
了样式表和插入式对象。
然后，HTML4于1997年发布，引入了框架、表
单和标记语言扩展等功能。
这些功能的添加使得HTML可以创建更复杂和
丰富的网页。
然而，随着技术的发展，HTML的功能仍然有限。
为了满足用户对富
媒体和互动性的需求，W3C（World Wide Web Consortium）开始制定新的
版本HTML5
除此之外，HTML5还引入了一种名为Web Storage的新特性，用于在
用户的浏览器中存储本地数据。
这比传统的Cookie方式更高效和灵活，
可以存储更大量的数据，并且在客户端进行操作，减少了与服务器的通信。
而随着移动设备的普及，HTML5还针对移动Web应用做出了一些优化。
它引入了一种称为响应式设计的技术，可以根据设备的尺寸和分辨率自动
调整网页布局。
此外，HTML5还支持通过设备的位置信息和传感器来创建
基于位置的应用。
html基础知识
html基础知识HTML（HyperText Markup Language）是一种常见的标记语言，用于创建网页。
如果你对HTML基础知识感兴趣，那么你来对地方了。
在本文中，我们将简要介绍HTML的一些基本概念和用法，以帮助你入门。
首先，HTML是一种描述网页结构的语言。
它使用一系列的标签来定义网页的不同部分。
一个HTML文档通常由两个部分组成，分别是头部（head）和主体（body）。
在头部中，你可以定义文档的标题、引用样式表和脚本等信息。
而主体部分则包含了实际显示在网页上的内容。
在HTML中，最基本的标签是`<html>`标签，它用来定义整个HTML文档。
在`<html>`标签内，我们将头部和主体部分分别用`<head>`和`<body>`标签包裹起来。
在头部部分，你可以使用`<title>`标签来定义网页的标题。
这将是在浏览器标签页上显示的文本。
例如，`<title>我的第一个网页</title>`将在浏览器标签页上显示"我的第一个网页"。
另一个重要的头部标签是`<meta>`标签。
它用来指定网页的元数据，比如字符编码和描述等信息。
例如，`<meta charset="UTF-8">`将告诉浏览器使用UTF-8编码来解析网页。
在主体部分，你可以使用各种标签来定义不同的内容。
例如，`<h1>`到`<h6>`标签用来定义标题，数字越小，标题的级别越高。
`<p>`标签用于定义段落，而`<br>`标签用于换行。
除了以上的基本标签外，HTML还提供了许多其他标签来定义更丰富的内容。
例如，`<a>`标签用于创建链接，`<img>`标签用于插入图像，`<table>`标签用于创建表格等等。
认识HTML语言
<Table>……</Table>
<table>...</table> - 定义表格 <tr> - 定义表行 <th> - 定义表头 <td> - 定义表元(表格的具体数据) <table border=5> <tr><th>Food</th><th>Drink</th><th>Swee t</th> <tr><td>A</td><td>B</td><td>C</td> </table>
认识HTML语言 认识HTML语言 与DW
主讲教师：卢明波 主讲教师：
HTML基本概念 HTML基本概念
什么是HTML文件 什么是HTML文件 HTML
–HTML的全称为HyperText Markup Language, HTML的全称为HyperText HTML的全称为 即超文本标记语言,(泰德 纳尔逊)、（ 泰德纳尔逊 、（蒂 即超文本标记语言 泰德 纳尔逊 、（蒂 伯纳斯李 姆伯纳斯 李） 伯纳斯 – 表 1-1 HTML层级特色 HTML层级特色
标题文字
水平线的设定
＜hr＞标识可以在网页中生成一条横线 ＞ 1．size属性以像素值为单位，规定横线 属性以像素值为单位， ． 属性以像素值为单位 的粗细，默认值为2 的粗细，默认值为2 2．width属性指定了横线的长短 ． 属性指定了横线的长短 默认width值的横线长短为 默认 值的横线长短为100％ ％ 值的横线长短为 3、align属性规定了水平线的对齐方式， 属性规定了水平线的对齐方式， 、 属性规定了水平线的对齐方式 默认为居中， 默认为居中，这里设定水平线为左对齐 （align=left）, ）
HTML语言概述
19
1.注释标记 注释标记<!--注释性文字 注释性文字--> 注释标记 注释性文字
用于在HTML文档中书写说明性的文字，内容在浏览器中不显示。 文档中书写说明性的文字，内容在浏览器中不显示。 用于在 文档中书写说明性的文字 格式： 注释性文字--> 格式： <!--注释性文字 注释性文字
HTML语言 HTML语言
HTML语言 HTML语言
3
2 我的第一张网页
网页实例： 网页实例：
index.htm
<html> 标签， 标签，表示网页的开始 <head> <title>我的主页 我的主页</title> 我的主页 </head> <body> 我的第一张网页 属性， 属性，进一 <hr> 步控制标签 <p> 作用的;/p>
HTML语言 HTML语言
14
1 文件标签
<body>标签 标签 (1) text属性 属性——设定网页上的文字颜色 属性 设定网页上的文字颜色
COLOR的值可以是以十六进制表示的颜色，或者是16种颜色中的一种。 的值可以是以十六进制表示的颜色，或者是 种颜色中的一种。 种颜色中的一种 的值可以是以十六进制表示的颜色 名称 | 颜色 | 名称 | 颜色 black | 黑色 | Red | 红色 Line | 石灰色 | Maroon | 栗色 Gray | 灰色 | Silver | 银白色 Navy | 海军蓝 | Olive | 橄榄绿 Purple | 紫色 | Yellow | 黄色 Aqua | 浅绿色 | Blue | 蓝色 Green | 绿色 | Fuchsia | 紫红色 White | 白色 | Teal | 暗蓝绿
HTML基础知识讲解(全
<BODY>
<TABLE BORDER=1>
<CAPTION> Normal Table </CAPTION>
<TR>
<TD> First Column </TD>
<TD>Second Column </TD>
对于16 进制编码的颜色，我们可以这样理解rrggbb六个字符：前两个表示红色，中间的两个表示绿色，后两个表示蓝色；那么，红色（red）ff0000，同样绿色（green）00ff00，蓝色0000ff；其它的颜色就是这几个字符（0-9，a-f）的组合。
比如：<font color=red> 文字 </font> 红色文字
缺省情况下，表格在浏览器屏幕上左对齐，你可以使用<TABLE>的ALIGN属性来指定表格的对齐方式。ALIGN属性可以取值“left”、“center”和“right”。例如，让一个表格在屏幕中央显示可以使用：
<TABLE ALIGN=“CENTER”>
注意
使用<TABLE>的ALIGN属性要小心，不是所有的浏览器都能识别它。如果你要让表格显示在屏幕中央，使用<CENTER>标识符来包含表格会更安全些。
好了，咱们来大体看看网页的结构：
<html>
<head>
<title>
标题
</title>
</head>
<body>
页面内容
</body>
HTML语言基础PPT课件
-
25
向右缩进标记<blockquote>
语法：< blockquote>向右缩进的内容 </ blockquote> 说明：< blockquote>标记控制所包含的某段文字以向
右缩进方式显示。
-
26
标题文字标记<hn>
语法：<hn align=left | center | right>标题文字</hn> 说明：<hn>标记用于标示网页中的标题文字，被标
示的文字将以粗体的方式显示在网页中。在HTML 中，共有6个层次的标题，因此其中n的范围为1～ 6。标题文字标记中可以设置align属性，用于控制 对齐方式，默认的对齐方式为靠左。
-
27
文字格式标记<font>
语法：<font 属性=属性值……>文字</font> 说明：<font>文字格式标记用于控制文字的
<title>HTML实例</title> </head> <body>
<!-- 简单的HTML文件 --> <p>Hello World！</p> <br> </body> </html>
-
7
HTML文档的基本构成
<HTML> <HEAD> ……… </HEAD> <BODY> <标签1 [属性[=属性值]] [属性[=属性值]].....> <标签2 [属性[=属性值]] [属性[=属性值]].....> ........... [</标签2>] [</标签1>]
详解HTML编程语言基础
详解HTML编程语言基础第一章：HTML简介与发展历程HTML全称为超文本标记语言，是一种用于构建网页的标记语言。
它由蒂姆·伯纳斯-李在1990年创立，旨在共享科研成果。
随着互联网的普及，HTML也在不断发展和演变，从HTML1.0发展到HTML5，成为构建现代网页的基础。
第二章：HTML基本结构HTML文档由标签、元素和属性构成。
标签用于定义元素的开始和结束，元素是构成HTML文档的基本单位。
每个标签都可以拥有不同的属性，这些属性用于提供元素的更多信息。
HTML文档以<!DOCTYPE html>声明开始，后面跟随<html>和</html>标签，定义文档的根元素。
第三章：HTML文本标记HTML使用一系列的文本标记来定义文档的内容。
常用的文本标记包括标题标记（<h1>至<h6>）、段落标记（<p>）、加粗标记（<b>和<strong>）、斜体标记（<i>和<em>）等等。
使用这些标记，可以清晰地表示文本的结构和语义。
第四章：HTML链接和图像链接和图像是构建网页中重要的元素。
通过<a>标签，可以创建超链接，将一个文本或图像与另一个页面相连。
链接可以指向其他网页、文件、电子邮件地址等。
而<img>标签则用于插入图像，通过src属性指定图像的路径。
第五章：HTML列表HTML提供了有序列表（<ol>）、无序列表（<ul>）和定义列表（<dl>）三种列表类型。
有序列表使用数字或字母对项目进行编号，无序列表使用符号标记项目，而定义列表使用术语和对应的定义。
列表标签可以嵌套，用于构建复杂的列表结构。
第六章：HTML表格表格是一种用于展示和组织数据的重要元素。
HTML的<table>标签用于创建表格，<tr>标签用于定义行，<td>标签用于定义单元格。
HTML语言的基本知识讲解
标记可以拥有自己的属性,从而能够包含更多额外的信息。
例如<body bgcolor=“red”>，表示整个页面在浏览器中的背景为 红色。
很多标记内可以拥有多个属性，其语法是：<标记 属性1 属性2
属性3 … >
例如<hr size=3 align=left width="75%">
《网页设计与制作》（ISBN：978-7-04-029632-7）教材配套光盘
高等教育出版社 高等教育电子音像出版社
1.2 HTML语言基本知识--常用标记 插入视音频的标记
格式：<embed src="视频/音频文件地址"> 属性： •autostart •loop •width 和height •volume 参看“教材所附光盘中的本书范例\第一章\原始文件 \web2\视音频实例.html”网页文档
高等教育出版社 高等教育电子音像出版社
1.2 HTML语言基本知识-- HTML文件结构分析
❖ 实例结构分析
参看教材所附光盘中的 “本书范例\第1章\原始文件\myfirstpage.txt”
表 示 HTML 文 件 开 始
表示文件头开始
表示该网页的标题是“广州欢迎 你” 表示文件头结束
表示网页正文开始
<td>...</td> 用于定义一个单元格，一对<td>标 记将建立一个单元格，<td>标记必 须嵌套在<tr>标记内，
参看“教材所附光盘中的本书范例\第一章\原始文件\简单表格标记.html”文档及“表格标记及属
HTML语言.ppt
标记属性 name=cda ta size=num multiple 功能 设置选择栏的名字 设置在选择栏中一次可见的选项个数 设置选项栏是否支持多选
<option>属性： 属性： 属性
标记属性 value=cd ata selected 功能 设置选项的默认值 表示此选项为预置项
HTML语言
设置<BODY> <BODY>的属性 四 文档的格式与风格 设置<BODY>的属性
标记属性 background=URL bgcolor=colorvalue text=colorvalue link=colorvalue vlink=colorvalue alink=colorvalue bgproperties =fixed leftmargin=size topmargin=size margingwidth=size marginheight =size 设置网页的背景图片 设置网页的背景颜色 设置文本的颜色 设置尚未被访问过的超文本链接的颜色， 设置尚未被访问过的超文本链接的颜色，默认为蓝色 设置已被访问过的超文本链接的颜色， 设置已被访问过的超文本链接的颜色，默认为紫色 设置超文本链接在被单击的瞬间的颜色， 设置超文本链接在被单击的瞬间的颜色，默认为红色 设置背景是否随滚动条滚动 设置网页左边的空白 设置网页上方的空白 设置网页空白的宽度 设置网页空白的高度 功能
HTML语言
3．自定义列表 格式： 格式：<DL> <DT>…</DT> <DD>…</DD> <DT>…</DT> <DD>…</DD> … </DL> <DL>定义列表 <DT>定义列表项 定义列表； 定义列表项， <DL> 定义列表 ； <DT> 定义列表项 ， 项目会自动换行并 左对齐，但项目间没有空行；<DD>用来定义语句 用来定义语句。 左对齐，但项目间没有空行；<DD>用来定义语句。
02HTML语言基础
例3 标有数字或圆点的列表 <html> <head> <title></title> </head> <body text="blue"> <ol> <p>中国城市 </p> <li>北京 </li> <li>上海 </li> <li>广州 </li> </ol> <ul> <p>美国城市 </p> <li>华盛顿 </li> <li>芝加哥 </li> <li>纽约 </li> </ul> </body> </html>
</ul>
</body>
</html>
2.3 文本标志
1.<h1></h1>……<h6></h6> 2.<b></b>,<i></i>,<del></ del>, <sub></sub>,<sup></sup>,<blockqu ote>,</blockquote> ,<pre></pre>,<co de> </code> 3.<tt></tt><cite></cite>
3.<cite></cite><em></em><stron g></strong>