第二章 HTML置标语言.ppt

第二章 HTML置标语言 学习目标 熟练应用页面布局技术； 使用CSS样式使网站具有统一风格； 灵活应用超链接a标记； 制作表单； 合理选用多媒体技术； 恰当应用文字显示和布局标记； 能够制作动态网站首页。 2.1创建HTML文档 1、HTML文档的制作过程 HTML文档是文本文件，可以使用简单的文本 编辑器编辑，编辑完成的HTML文档，以“.html”为 扩展名进行保存，然后在Web浏览器中查看效果。 2、HTML标记基本语法现象 HTML标记的作用 HTML是Internet上大多数计算机能够识别的语 言，是基本的发布语言。“置标”是设置标记，用来 标志文字、图形和图像等信息在浏览器中的显示 方式。 HTML语法 HTML语法两个重要组成： 显示元素：通过浏览器展示的内容； 标记：设定内容的显示方式，标记用“”括起来。 其格式一般为： 标记名显示元素/标记名 【注意】 标记大多成对出现，个别不成对的。如：br input； 标记与字母的大小写无关； 标记可以联合使用，也可以嵌套使用； 标记可以带有一个或多个属性，多个属性用空格分开，不分先后。 3、HTML文档的结构和文档结构标记 HTML文档的结构 HTML文档结构标记 HTML文档标记html 通知浏览器html文档开始，按照html语法规则来解释 执行其后的代码。 文档头部标记head 保存文档的相关信息，主要标记：title、meta 文档正文标记body 标明文档的主体，主要属性：bgcolor、background、 text、alink、vlink、link 注释标记 注释内容不在浏览器中显示，一般格式： !--注释内容-- 2.2 文字显示方式标记 1、文字显示标记的应用 2、字体标记font face:设置文字的字体 size:控制字的大小，默认大小为3 color:设置文字颜色 3、颜色属性color HTML预定义的16种色彩名称设置颜色，也可以用“#”开头的6位16进制数表示。 4、标题标记hi：i取值为1到6 5、文字变化标记：使文字以指定的样子显示 6、特殊字符 2.3 文字布局标记 1、文字分隔标记pbrnobrhr p 表示另起一段，并在段前空一行。 br 表示换行，中间不插入空行 nobr 表示禁止自动换行 hr 表示在页面上画出一条水平线，分隔页面 2、预格式化标记pre HTML文档中的空格、Tab字符、回车换行符 在浏览器中不起作用，pre与格式化标记可以 解决该问题。格式：pre…../pre 3、块容器标记div和span 在版面设计时，将页面分成几块，把相关主 题的内容图像、动画和文字装到一起，以使内容 主题突出。 div标记 div标记之间可以容纳多个不同的HTML标 记和显示元素，在div前和/div都会自动换 行，形成一个独立的块。 span span之间可以容纳多个不同的HTML标记和 语言元素，span和/span前后不会自动换行。 4、列表标记uloldl ul 无序列表，type定义列表符号 ol有序列表，type,start定义列表序号 dl描述列表 在列表中，每一表项以标记li开始，结束标记 /li是可选项。列表可以嵌套使用，一个列表中的 表项又可以是一个列表。 2.4 多媒体标记 1、图像标记ing 常用的图像文件格式为：jpg、gif、swfh、bmp 2、嵌入背景音乐标记bgsound 格式： bgsound src=“音乐文件地址” loop=循环播放次数 loop: 为1时表示循环不止地播放音乐。 3、嵌入声音或视频标记embed 格式： embed src=“URL” width=播放器宽 height=播放器高 autostart=true|false 2.5 超链接标记 1、超链接标记的使用 格式： a href=连接目的地URL target=“目标窗口”热点/a 2、链接到其他文件 3、链接到文本档指定的位置 如果一个页面内容较多，页面就会长些，阅读 时需要来回翻，不便利。为了方便阅读，作者常 分出目录，目录名点明内容的主题。读者单击目 录名即可跳转到相关内容。“锚点” 格式： a href=“#锚名”》标题名/a …. a name=“锚名”标题内容/a 4、链接到其他文档指定位置 5、链接电子邮件 格式：a href=mailto:电子信箱地址热点/a 2.6 滚动标记 格式1： mar