《html基础精品培训教程》由会员分享，可在线阅读，更多相关《html基础精品培训教程（116页珍藏版）》请在金锄头文库上搜索。
1、HTML语法,1 HTML基础,HTML 建立与测试网页 标记符 Web页的结构 设置页面属性 添加注释 显示特殊字符,一、HTML（HyperText Markup Language）超文本标记（标签）语言，是表示网页的一种规范一组影响网页内容显示的标记符的集合使用HTML语言描述的文件，能独立于各种操作系统平台（如UNIX，WINDOWS等），访问它只需要一个WWW浏览器，我们所看到的网页，是浏览器对HTML文件进行解释的结果。,二、测试和创建Web页 1.网页编辑工具 纯文档编辑工具记事本 所见即所得工具FrontPage 、Dreamweave 2.网页创建步骤(使用“记事本”创建网页
2、) 打开“程序/附件/记事本” 在“记事本”的窗口中输入HTML代码 选择“文件”菜单的“另存为”命令 在“文件名”框中输入网页的名称，文件名必须以.html或.htm为后缀名 单击保存 3.网页测试 IE 工具即现,三、标记符 1.标记符的定义：HTML语言通知浏览器如何显示网页内容的方式 2.标记符的形式： 所有标记符都用尖括号括起来 绝大多数标记符是成对出现的，即包括开始标记符和结束标记符，个别是单一标记符。例如：、 、 开始标记符和结束标记符定义了标记符所影响的范围，它们的区别是结束标记符多了一个斜线/，例如： 好好学习 天天向上 不区分大小写，但为了可读性和维护性，使用大写, 这是H
3、1格式的字体 这是默认格式的字体 ,3.标记符的属性 作用 位置形式红色一号的文字学习和掌握HTML的关键：HTML标记符及其属性,对标记符作用的内容进行更详细的控制,开始标记符的尖括号里，与标记符之间用空格隔开，属性值跟在相应的属性之后，用等号连接，不用属性之间用空格隔开,小写,四、 Web页的结构 HTML 必须包含的基本结构标记符： HTML标记： 头标记： 标题标记： 正文标记： 三大结构：,HTML标记Web页的第一个和最后一个标记符 Web 页的其他所有内容都位于这对标记符之间 HTML标记符告诉浏览器或其他阅读该页的程序，此文件为一个Web页 不包含其它属性,首部标记位于 Web
4、 页的开头，不包括 Web 页的任何实际内容，提供一些与 Web 页有关的特定信息 通常包含一下标记符： 标题标记符 META标记符 BGSOUND 标记符,正文标记符 包含 Web 页的具体内容，包括文字、图形、超链接及其他各种 HTML 对象。 正文标记符中的文字 如果没有其他标记符修饰，正文标记符中的文字将以无格式的形式显示 如果浏览器窗口显示不下，则自动换行 空格、回车这些格式控制在显示时都不起作用,标题标记符 用于定义网页的标题,并在浏览器窗口的标题栏中显示 网页标题可被浏览器用作书签和收藏清单这是网页标题请看浏览器的标题栏。,例子：网页标题正文，正文，正文，正文， 正文，正文，正文
5、，正文， 正文,META标记符 用于描述不包含在标准HTML里的一些文档信息，例如开发工具，作者，网页关键字，网页描述等。这些定义的内容并不在网页页面中显示，但是一些搜索引擎可以检索这些信息，浏览者可以根据这些关键字或描述查找到该网页。 常用功能是设置自动转址功能使浏览器自动从一个地址跳转到另一个地址 位置 META 标记符的常用属性包括：name、 content和 http-equiv name 属性给出特性名content 属性给出特性值 http-equiv 属性指定 HTTP 响应名称，通常用于替换 name 属性，HTTP 服务器使用该属性值为 HTTP 响应消息头收集信息,例1设
6、置客户端行内程序的语言是 JavaScript 例2设置行内样式的样式语言为 CSS 例3META示例再过10秒钟，我就上学校的网站了！ ,我的第一个网页,例4,五、设置页面属性,正文标记符包括一些常用属性，可以用于设置网页背景颜色和图案，以及设置文档中文字和超链接的颜色 设置页面背景颜色 bgcolor设置页面背景图像 background使用背景图案时，如果图案小于浏览器窗口的大小，则浏览器会自动象铺地板砖一样平铺背景图案。可以同时设置背景图案和背景色，以便在不能显示图像的浏览器上显示背景色,页面基本属性定义在中 background=“ “ 背景图片文件名 bgcolor= “ “背景颜
7、色 text =“ “文本默认颜色 link =“ “未被访问链接源文字的颜色 alink =“ “被激活链接源文字的颜色 vlink =“ “访问过链接源文字的颜色 topmargin =“ “ 信息内容的顶边距离 leftmargin =“ ”信息内容的左边距离 背景音乐标记符 用于指定网页的背景音乐 属性 src，用于指定背景音乐的源文件。 loop，用于指定背景音乐重复的次数，如果不指定该属性，则背景音乐无限循环 例子,表 1-1 16 种标准颜色,浏览器将采用默认的设置 bgcolor白色或灰色 text 黑色 Link 蓝色 vlink 紫色 alink 红色 例子： ,背景图案示
8、例背景图案示例,注释的作用 HTML 注释的格式 由开始标记符 构成 标记符之间的任何内容都将被浏览器解释为注释，而不在浏览器中显示 例子：网页标题正文，正文，正文 注释可插入在 Web 页的任何位置,六、添加注释,七、显示特殊字符,特殊字符参考字符（附录 2 ） 参考字符以“ is a popular VCD program. is a popular VCD program, 小结,WWW由无数的Web服务器构成，通过浏览器访问这些服务器上的网页，不同的网页通过超链接联系在一起，构成了WWW的网状结构。 HTML是表示网页的一种规范，它通过标记符定义了网页内容的显示。 最基本的HTML标记
9、符包括： HTML标记符和 首部标记和 正文标记和。 BODY标记符包括一些常用属性，用于控制网页的基本显示效果。发布网页的基本过程为：制作本地站点、申请网页空间、上传网页。,2 文本控制,字体控制标记符 物理字符样式 滚动文字效果 文本分段 文本对齐 列表格式,一、字体控制标记符 ,size 属性控制字符的大小size=“ “ 字号从17,字号越大，默认值为3 color属性控制字符的颜色color=“ “ 使用颜色名称或十六进制值指定颜色 face 属性指定字体样式face =“ “ 常用的英文字体有“Times New Roman”、“Arial”等 常用的中文字体有“宋体”、“楷体”等
10、 例子：例子一 例子二 例子三 例子四,二、物理字符样式 指标记符本身就说明了所修饰文字的效果的字符样式 使用方法：将设置格式的字符括在标记符之间 由于带有超链接的文本下通常包含下划线，因此下划线格式易让人产生误解，建议使用时慎重 常见的物理字符样式,物理字符样式效果示例此处为粗体显示文本此处为大字体文本此处为小字体文本此处为斜体文本此处为等宽字体文本此处为下划线文本此处为使用标记设置的删除线文本此处为上标示例：x2 + y2 = R2此处为下标示例：H2SO4,三、滚动文字效果 作用：标记符之间的内容以滚动的方式显示 属性： width 和height滚动字幕滚动区域的宽度和高度 align
11、滚动字幕与周围对象对齐的方式 behavior滚动字幕移动的方式 bgcolor 滚动字幕区域的背景色 direction 文本滚动的方向 hspace和vspace 滚动字幕四周水平和垂直方向上的间隙 loop 滚动重复的次数 scrollamout 文本滚动的步进象素间距 scrolldelay 两次文本重画之间的毫秒延时数, 滚动字幕示例哈哈哈，我在滚动！图像也可以滚动哦！我滚动的很快！,四、文本分段 1.段落标记符 将文档划分为段落 可以省略 2.换行标记符 在文档中强制断行 区别： 不能产生多个空行，而则可在内容之间设置多个空行，即形成空白 是断段，而是断行,标记符可以产生多个空行效
12、果此为最后一段,3.水平线标记符 在网页内容中添加水平线，分隔文档内容 属性： size：水平线的粗细程度，用整数表示，默认值为2width：水平线的长度，用像素长度或宽度的百分比表示noshade：去除水平线的3D样式 color：水平线的颜色 align：水平线的对齐方式 例子： ,水平线效果 以下是默认水平线：以下是粗为 5 像素的水平线：以下是长度为100像素的水平线：以下是长度为屏幕宽度 50% 的水平线：以下是粗为 5 像素的实心水平线：以下是红色的水平线：,4.标题标记符 标识文档中的标题和副标题 浏览器在解释标题标记符时，会自动改变文字的大小，并且将字体改为黑体，同时将内容设为
13、一个段落 n是1至6的数字，表示最大的标题，表示最小的标题 例子：标题效果此为一级标题此为二级标题此为三级标题此为四级标题此为五级标题此为六级标题此为正常文本,五、文本对齐 1.align属性 设置段落的对齐格式 取值：right（右）、left（左）、center（居中）justify（两端） 应用范围： 多种标记符，最典型的是应用于 P、Hn、HR 、 DIV 不同的标记符，其align属性的默认值并不相同 标记符P、Hn 的align属性默认值为left 标记符HR的align属性默认值为center 2.DIV标记符 为文档分节，以便为文档的不同部分应用不同的段落格式 必须与 alig
14、n等属性联合使用 位于 DIV 标记符中的多段文本将被认为是一个节，可为它们设置一致的对齐格式。 3.CENTER标记符 将和 包括起来的内容定义为居中对齐, 使用 align 属性本行为默认对齐的段落，相当于 align=“left“本行为居中对齐的段落本行为右对齐的段落本行为居中对齐的一级标题以下为左对齐的水平线：, 使用 DIV 标记符浣溪沙晏殊一曲新词酒一杯，去年天气旧池台，夕阳西下几时回？无可奈何花落去，似曾相识燕归来，小园香径独徘徊。,六、列表格式 1.有序列表（Ordered list） 定义：一种在表的各项前显示有数字或字母的缩排列表列表项 1列表项 2 列表项 3 OL标记符
15、的属性： type设置数字序列样式 start 设置数字序列的起始值, 值可以是任意整数 当位于 OL 标记符内时，LI 标记符的属性： type 设置数字样式，取值与 OL 的 type 属性相同 value 设置一个新的数字序列起始值，以获得非连续性的数字序列,有序列表示例用大写罗马字母表示的有序列表：列表项1 列表项2 列表项3起始数字为 3 的有序列表：列表项1 列表项2 列表项3编号不连续的有序列表列表项1 列表项2 列表项3变换了数字样式的有序列表列表项1 列表项2 列表项3 ,有序列表的嵌套 使用有序列表嵌套可以获得不同层次的编号列表。嵌套时，只需将内层列表作为外层列表的一个列表
16、项即可。列表的嵌套层数没有限制。, 嵌套的有序列表嵌套的有序列表列表项 1子列表项 1子列表项 2子列表项 3列表项 2列表项 3,2.无序列表（Unordered list） 定义：一种在表的各项前显示有特殊项目符号的缩排列表。 无序列表标记符 UL 标记符的 type 属性控制列表项前特殊符号的显示 列表项标记符 LI 标记符的 type 属性的值如下表所示：,在Internet Explorer 中，type 的值是区分大小写的, 无序列表示例默认无序列表：列表项1列表项2列表项3使用方块作为列表项标记的无序列表：列表项1列表项2列表项3,3. 混合嵌套列表 有序列表和无序列表也可互相嵌套，如以下 HTML 代码所示：列表项1列表项2子列表项1 子列表项2列表项3,
