html教案

合集下载

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

HTML
1、什么是 HTML？
超文本标记语言，即HTML（Hypertext Markup Language），是用于描述网页文档的一种标记语言。

html作为一种标识性的语言，是由一些特定符号和语法组成的，理解和掌握起来都是十分容易的。

HTML是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。

网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。

浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。

但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。

1.1 HTML基本概念
1.标记
html用于描述功能的符号称为“标记”，如“html”“body”“table”等。

标记在使用是必须用尖括号“<>”括起来，而且是成对出现的，无斜杠的标记表示开始，有斜杠的表示结束。

必须使用小写。

每页都必须包含的相同的整体结构，格式如下：
<html>
<head>
<title>……</title>
</head>
<body>
……
</body>
</html>
<head> 标签用于定义文档的头部，它是所有头部元素的容器。

<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。

文档的头部描述了文档的各种属性和信息，包括文档的标题、在Web 中的位置以及和其他文档的关系等。

绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在head 部分<base> <link> <meta> <script><style>以
及<title>。

<title> 定义文档的标题，它是head 部分中唯一必需的元素。

<base> 标签为页面上的所有链接规定默认地址或默认目标。

兼容性注释
在HTML 4.01 中，不赞成使用body 元素的alink,vlink 属性；在XHTML 1.0 Strict DTD 中，不支持body 元素的alink ,vlink属性。

2.特殊字符
在html中，有些符号是代表特定的意义的，所以当要使用这些特殊符号时，便要用替代命令。

( &quot &nbsp &lt &gt &amq )
3.语法
一个标记，为了明确它的功能，往往用一些属性参数来描述，对这些属性参数的规定就是所谓的语法，如……。

标记的基本格式为：
<标记属性1=属性值属性2=属性值…> 受标记影响的内容</标记>
其中：
（1）标记必须用“<>”围住，否则认为是普通文本，</>表示结束标记。

标记字母不区分大小写。

（2）对一段内容可以用多个标记来共同作用，产生一定的效果。

此时，各个标记间的顺序也是任意的，但是不能交叉使用。

（3）根据需要可以只用该标记的几个属性，也可以不用属性，在使用时属性之间没有顺序。

不是所有的标记都有属性和结束标记，如单标记 表示换行。

2、字体标签
（head头标签，属性 title标题 link显示与其他文档的关系base设置文档的原始url值。

）
1、<body>……</body>标签
子属性：bgcolor="" text="字体颜色" link="按颜色" vlink="点后颜色" alink="当前用的链接" background="" leftmargin="左边距" topmargin=""
2、…… <basefont>……</basefont>文本标签
子属性：size="" face="" color="" （<big> ）
3、设定字体大小、颜色、字型的标签
…… <hn>……</hn> …… …… ……
…… <strike>……</strike>(删除线) <del>……</del> <address>……</address> ……上标 ……下标
……
背景音乐 <bgsound src="" loop="">
会移动的文字
<marquee>……</marquee>
相关属性
direction =left/right/up/down方向
behavior=scroll一圈一圈/slide只一圈/alternate回走
loop
scrollamount速度
scrolldelay延时
align
bgcolor height width vspace hspace
3、表格标签
<table>……</table>
相关属性
align(top/middle/center/bottom/left/right) valign bgcolor background border height width cellspacing（单元格间距） cellpadding （单元格边距）
<caption>……</caption> 标题
相关属性
align
<tr>……</tr> 表格行
相关属性
align
<th>……</th> 表格栏标题（表头）粗体字
相关属性
align colspan（栏宽） rowspan（栏高）
<td>……</td> 表格单元格
相关属性
align bgcolor height width colspan rowspan
4、图像标签
<image>
相关属性
align alt border height src width title hspace(左右边框大小) vspace usemap="#a"
<map>……</map> 设定地图
相关属性
name
<area>……</area>
相关属性
coords（设定动作域坐标 0,0,0,0）
href
noherf
shape（外形）（rect矩形区域 poly多边形区域设置各个顶点的坐标 circle 圆形区域前两个参数为圆心横纵坐标，第三个为半径）
给图片加动态说明和替代文字（title，alt）
图文混排（p标签的使用）
动态图像替换效果
<img src="" width="" height="" align="" name="123"
onmouseover="123.src='图片路径'" onmouseout="123.src='图片路径'">
插入视频剪辑
<img src="url.gif" dynsrc="url.avi" start="fileopen/,mouseover" loop="n/infinite" loopdelay="n毫秒">
嵌入多媒体文本
<embed src="" height="" width="" volume="10">
本标记可以用来在主页中嵌入多媒体文本，如：电影(movie), 声音(sound)。