HTML语言课件.docx
《HTML语言课件.docx》由会员分享，可在线阅读，更多相关《HTML语言课件.docx（40页珍藏版）》请在冰点文库上搜索。
HTML语言课件
HTML语言
一．HTML简介
二．HTML的基本标记
三．HTML的格式化标记
四．HTML的链接标记
五．HTML的列表标记
六．HTML的图片标记
七．HTML的框架标记
八．HTML的表格标记
九．HTML的表单标记
一十．HTML的层标记
一十一．HTML的文件头标记
一．
HTML简介
1.1什么是HTML
HTML是一种构成网页基础的语言，同时由一些简单的英文单词构成；
HTML是一个超文本标记语言；
HTML是由浏览器解释执行的一种语言；
HTML是由成对的标记构成的。
1.2学习HTML的目的
HTML是WEB开发的基础；
HTML是电子商务平台的基础；
HTML是后续学习的基础；
HTML是JSP的基础。
1.3HTML的发展史
1993年，超文本标记语言（第一版）被推出；
1995年，HTML2.0的标准被推出，W3C推荐；
1996年，HTML3.0推出，W3C推荐；
1997年，HTML4.0推出，W3C推荐；
1999年，HTML4.01推出，W3C推荐，至今为止的一个最终版本；
2000年以后，XML、XHTML兴起，大有取代HTML之意，但是举步维艰；
2008年，HTML5.0的草案推出；
2011年，HTML5.0的第二个草案推出，W3C认可。
1.4
HTML文档结构WelcometoWebSiteHTML的文档结构
1.5第一个HTML文档
：
是HTML文档的起始和结束标记；
：
是HTML文档的头标记，包含所有网页关联内容，如字符集、关键字、搜索引擎等；
：</p><p>是一个标题标记，用于控制网页标题栏的显示；</p><p><body>：</p><p>是HTML的主体标记，所以页面显示内容都包含在BODY标记中；</p><p><font>：</p><p>是HTML的文字标记，用于控制文字的显示；</p><p>color=”red”：</p><p>color是标记的一个属性，也就意味着所有的标记都可以定制特定的属性；</p><p>1.6HTML的元素</p><p>HTML是由标记和属性两种元素构成的。</p><p>1.7推荐学习平台</p><p>推荐学习网站：</p><p>推荐浏览器：</p><p>谷歌、IE9.0、火狐、Opera、Safari。</p><p>推荐学习软件：</p><p>EditPlus、DreamweaverCS6。</p><p>1.8注意事项</p><p>文件夹和文件名尽量使用英文、单词、字母、数字及其组合；</p><p>网上下载的内容一律要求更改文件名；</p><p>代码一定要采用缩进格式。</p><p>二．HTML的基本标记</p><p><HTML></p><p><HEAD></p><p><TITLE>Hn标记静夜思
床前明月光，疑是地上霜；举头望明月，低头思故乡。
2.1标题标记：
Hn
Hn标记是用来控制文本的标题，n的取值范围为1~6，数字越大，标题大小越小，同时会产生一个换行分段的效果。
2.2段落标记：
P
P标记静夜思
床前明月光，疑是地上霜；
举头望明月，低头思故乡。
P标记用于控制文本的分段，产生换行分段效果；P标记可以只有开始部分，即可以成为一个单标记。
2.3换行标记：
BR
BR标记静夜思
床前明月光，疑是地上霜；
举头望明月，低头思故乡。
BR标记只是纯粹的单标记。
BR标记和P标记的区别：
BR标记可以连续使用多个，但是P标记不能。
HR标记静夜思
作者：
李白
床前明月光，
疑是地上霜；
举头望明月，
低头思故乡。
2.4水平线标记：
HR
HR标记用于给文字划线或者区分上下文的关系。
HR标记我们可以使用width属性控制它的宽度，使用color属性控制它的色彩，使用align属性控制它的基本位置。
2.5
Hn标记静夜思
--标题-->
作者：
李博
--作者-->
床前明月光，
疑是地上霜；
举头望明月，
低头思故乡。
注释标记
-->
--->注释标记：
用来给设计者说明当前位置的代码的作用，起到一个解释的效果。
三．HTML的格式化标记
HTML的格式化标记用于控制文本的显示。
Font标记静夜思
床前明月光，
疑似地上霜；
举头望明月，
低头思故乡。
3.1字体标记：
font
说明：
：
font标记用于控制文字的字体，但是现在的网页中已经被取消了，替代它的就是我们后续课程要学到的CSS；
face：
控制文字的字体，一般情况下，不要设置特殊字体或者平时用量较少的字体；如果设置了前者，默认会以宋体的形式出现；
size：
控制文字的大小，一般情况下，可以使用默认形式或者像素大小来描述；如果采用默认形式，size的取值范围为1~7，默认为2；如果采用像素大小描述，后面要加上单位px，一般范围取值为9px或者12px；
3.2格式化标记：
一组标记
格式化标记静夜思
床前明月光，
疑似地上霜；
举头望明月，
低头思故乡。
格式化标记用于控制文字的一些特殊属性，如：
上标、下标、加粗、倾斜等，但是有很多标记实际上已经不常用或者被同化掉。
除了b标记和u标记以外，常见的格式化标记还有、、、、等。
3.3预处理标记：
PRE
PRE标记静夜思
床前明月光，疑似地上霜；
举头望明月，低头思故乡。
PRE标记是将网页设计的文档内容保持，并以网页的形式在浏览器中解释执行，但是它会使文字缩小。
3.4特殊字符标记：
&
在HTML中，由于有很多的字符无法直接在文本文档中输入或者无法直接被浏览器解释，因此需要将这类字符以特殊的形式出现；如：
空格、<、>、红桃等。
在HTML中定义了以&开头的特殊字符。
如：
空格：
<：
<>：
>红桃：
♥
3.5其他文字标记
四．HTML的链接标记
HTML的链接标记是HTML标记中最重要的一种标记，也是HTML页面之间唯一的切换方式。
HTML的链接方式在目前的网页设计中有很多种，但是在本学期的网页设计中，我们只针对静态页面进行讲解，因此，只涉及到两大类链接。
1.HTML链接的主要方式
Ø外部链接：
通过链接可以切换到或者跳转到其他网站或者其他网站的某个页面。
格式：
链接名称
外部链接新浪网
新浪网
其中：
URL地址是指具体的网页的网络地址或者网页的IP地址。
Ø内部链接：
通过链接可以切换到或者跳转到当前网站的其他页面或者当前页面的其他位置。
格式：
链接名称
内部链接1第一个页面
第二个页面
2.HTML内部链接的具体表现
1）链接到当前网站的某一个页面：
这类链接操作比较简单，其表现形式为内部链接的基本形式。
2）链接到当前网站的某一个文件或图片：
内部链接2下载WORD文档
打开图片
显示图片
这类链接操作表现形式有多种，比如：
下载文件、显示图片、打开图片。
3）链接到当前网站的当前页面的某一个位置或其他页面的某一个位
置：
这类链接操作表现形式也被称为“锚接”，也称为“书签链接”。
其具体表现格式为：
命名锚：
指定锚名
链接锚：
链接名称
第一个页面：
first.html
第二个页面：
second.html
此类链接还可以表现为同一个页面中内容的跳转。
3.HTML链接的链接技巧
1）设定链接目标：
在设置链接时，可以通过TARGET属性链接目标显示的方式。
默认状态下，显示方式有四种，分别是：
_blank：
在新窗口中打开
_parent：
在父级框架集中打开（仅针对于框架）
_self：
在当前窗口中打开
_top：
在当前的窗口主体打开
除此以外，还可以通过设定框架集中的子框架的name属性设定链接目标。
如：
第一个页面
2）使用键盘快捷键实现链接：
在设置链接时，可以通过ACCESSKEY属性设定键盘快捷方式打开链接。
如：
第一个页面（Alt+Y）
3）TAB键的使用：
在设置链接时，可以通过TABINDEX属性设定TAB快捷键的逻辑方式。
如：
第一个页面
第二个页面
第三个页面
4）改变链接颜色：
在设置链接时，可以通过BODY标记的link属性设定链接的色彩。
4.相对路径与绝对路径
相对路径：
相对路径是指从当前页面出发到链接目标的计算机实际逻辑路径。
当前页面是不断变化的，相对路径也是不断变化的。
绝对路径：
绝对路径是指从计算机根目录出发到链接目标的计算机实际逻辑路径。
计算机根目录是不变的，绝对路径是不变的。
五．HTML的列表标记
列表标记是目前网页中大量采用的一种标记形式，应用于网页目录显示、标题栏标题等。
列表标记包涵：
有序列表、无序列表和自定义列表（定义列表）。
1．列表的种类
有序列表：
ol
无序列表：
ul，menu，dir
定义列表：
dl
2．列表的实现
1）有序列表
按照一定的顺序将内容排列，并且有指定的序列号；
格式：
……
或
……
其中，li标记代表了有序列表的每一个列，即列数；
相关属性：
type属性：
这个属性可以用于ol或li标记；如果用于ol则表示整个列表的序列号类型；如果用于li则表示当前列的序列号类型；此属性有5个默认选项，分别为：
a，A，1，I，i。
start属性和value属性：
此类属性效果完全一致，start属性用于ol标记，value属性用于li标记，用于控制序列号的起始值；
NewDocument
第一章第二章第三章“就近原则”
2）无序列表
无序列表是将内容按照一定的方式排列，使得内容看上去整齐；
格式：
和有序列表是完全一致的。
或
menu、dir和ul标记的使用效果是完全一致的。
相关属性：
type属性：
可以用于ul或li标记，默认有四种类型：
实心圆disc；空心圆circle；实心方块和空心方块square；
NewDocument第一章第二章第三章“显示效果与浏览器密切相关”
3）定义列表
定义列表用于名词或者相关术语的解释，由于有很多标记可以替代它，因此目前的网页设计中使用量很少。
格式：
- ----名词
- ----用于说明解释
- ----dd可有可无，可多可少
3．列表标记的复合使用
将多种不同的列表标记或者相同的列表标记混合使用；
不管如何去嵌套或者复合使用，都只是在对应的li或dt/dd标记之后加入一个新的列表标记，同时一定要注意好缩进格式。
4．使用相关图片来做列表标记的序列标示
一般会使用无序列表，在后续的CSS课程中我们将进一步说明。
六．HTML的图片标记
图片标记是HTML标记中最常见的标记，也是网页中用量最多的一种标记。
1.图片标记的基本格式
格式:
其中：
img是图片标记，src是图片的存放路径即相对路径。
2.图片标记的相关属性
1）alt属性：
这个属性在图片显示成功时，会在鼠标的右下角出现alt属性所对应的文字或在图片显示不成功时，会在图片显示位置的左上角显示alt属性所对应的文字；
2）border属性：
这个属性用于控制图片的外框，这个属性在最新的HTML中已经不使用的。
3）height和width属性：
这两个属性用于控制图片的宽度和高度。
4）align属性：
（慎用）
这个属性可以控制图片的位置，也可以控制图片与文字的对齐关系。
左✍右leftcenterright
上✍下topmiddlebottom
注意：
align所显示的效果是与文字相对应的，但是它无法实现复杂的图文显示效果，复杂的图文显示需要通过表格或层来实现；
当align的属性是设置center或middle时，效果要求文字在图片的中间，那么这个效果是以图片的中轴线为基线的；
5）vspace和hspace属性：
这两个属性是控制图片距离左右上下的距离，即在左右上下形成一个指定宽度的空白空间，这两个在最新的HTML的已经不使用了。
6）dynsrc属性：
这个属性可以使得图片标记播放avi等视频文件，但是能不能正常播放与浏览器和视频本身有一定关系。
7）start属性：
这个属性控制img播放的视频，它有两个属性：
fileopen：
文件打开时播放
mouseover：
鼠标滑过时播放
3.图片标记的特殊使用----图片映射
由于在实际中有很多的图片具有特殊性，如：
地图、气象图、星云图等，这种特殊的图片往往我们需要在一个图片中实现多个不同的链接，在这种情况下，我们需要采用图像映射的方式来实现这类特殊操作。
在使用图像映射时，我们需要掌握以下几个方面的内容：
1）图片的形状；
2）图片的图像处理操作；
3）能够记住图像的坐标。
NewDocument
实际操作是复杂的，我们可以借助一些软件来设计。
4.HTML的色彩
这里主要是介绍HTML中两种色彩的来源，一个是通过图片，一个是通过直接的颜色选择。
以BODY为例：
如果BODY标记的背景是一个图片，那么使用background属性定义一张图片；如果BODY标记的背景是一种颜色，那么使用bgcolor属性来定义。
问题：
如果将一个图片设置为背景图片，那么如果保证这张图片不会重复出现？
那么在设置色彩时，我们可以通过三种方式来设置：
1）英文red，yellow
2）RGB色#ffffff，#98ffa3范围：
#000000~#ffffff
七．HTML的框架标记
框架标记是HTML的页面布局三大标记之一。
框架标记目前使用量很少，主要用于后台页面的设计、特殊页面的设计。
目前主要的框架标记是frameset标记，但是还有一个标记用于局部页面的框架，即iframe标记。
1.框架标记的格式
框架标记与我们以前学到的标记不一样，框架标记不属于任何标记，即不可以放在BODY标记中；另外，框架标记不包含任何实质的内容。
一旦使用了框架标记，那么意味着，你的页面结构大小等同于你的屏幕大小。
2.框架标记的相关属性
1）rows和cols属性：
rows和cols属性控制框架的格子划分。
rows属性：
将整个页面水平分割。
在使用时，我们一般书写格式为：
rows=”100px,200px,*”
其中，划分除了可以采用像素的形式以外，还可以采用百分比形式。
不管何种形式，最后一格都要使用*号。
使用rows属性时，在frameset标记里面，需要与之匹配同等数量的frame标记。
cols的使用与rows完全一致，将整个页面垂直分割。
一旦使用了rows或cols属性，将不可逆。
一旦分割，分割后的子格子相互无关联。
同时，rows属性和cols属性可以嵌套使用，即在已经分割的格子下继续分割。
在嵌套使用时，我们只需要将需要再次分割的格子对应的frame标记替换为frameset，即可。
升级会员 