网页设计第三课HTML.ppt

HTML第一讲 主讲：刘跃 HTML实例讲解 html head title我的第一个 HTML 页面/title /head body pbody 元素的内容会显示在浏览器中。/p ptitle 元素的内容会显示在浏览器的标题栏中。/p /body /html 简单的段落 html body p这是段落。/p p这是段落。/p p这是段落。/p p段落元素由 p 标签定义。/p /body /html 更多的段落 body p 这个段落 在源代码中 包含许多行 但是浏览器 忽略了它们。 /p p 这个段落 在源代码 中 包含 许多行 但是 浏览器 忽略了 它们。 /p p 段落的行数依赖于浏览器窗口的大小。如果调节浏览器窗口的大小，将改变段落中的行数。 /p /body “诗歌”问题 body h1春晓/h1 p 春眠不觉晓， 处处闻啼鸟。 夜来风雨声， 花落知多少。 /p p注意，浏览器忽略了源代码中的排版（省略了多余的空格和换行）。/p /body 折行 html body p To breakbr /linesbr /in abr /paragraph,br /use the br tag. /p /body /html HTML 文档中显示标题的标签 html body h1This is heading 1/h1 h2This is heading 2/h2 h3This is heading 3/h3 h4This is heading 4/h4 h5This is heading 5/h5 h6This is heading 6/h6 p请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请使用其它标签或 CSS 代替。/p /body /html 居中排列的标题 body h1 align=centerThis is heading 1/h1 p上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。上面的标题在页面中进行了居中排列。/p /body HR标签定义水平线 body phr 标签定义水平线：/p hr / p这是段落。/p hr / p这是段落。/p hr / p这是段落。/p /body 隐藏的注释 body !--这是一段注释。注释不会在浏览器中显示。-- p这是一段普通的段落。/p /body 背景颜色 body bgcolor=yellow h2请看: 改变了颜色的背景。/h2 /body 预格式化文本 body pre 这是 预格式文本。 它保留了 空格 和换行。 /pre ppre 标签很适合显示计算机代码：/p pre for i = 1 to 10 print i next i /pre 删除字效果和下划线效果 body p一打有 del二十/del ins十二/ins 件。/p p大多数浏览器会改写为删除文本和下划线文本。/p p一些老式的浏览器会把删除文本和下划线文本显示为普通文本。/p /body 创建超级链接 body p a href=/index.html本文本/a 是一个指向本网站中的一个页面的链接。/p pa href=/本文本/a 是一个指向万维网上的页面的链接。/p /body 将图像作为链接 html body p 您也可以使用图像来作链接： a href=/example/html/lastpage.html img border=0 src=/i/eg_buttonnext.gif / /a /p /body /html 在新的浏览器窗口打开链接 body a href=/ target=_blankVisit W3School!/a p如果把链接的 target 属性设置为 _blank，该链接会在新窗口中打开。/p /body 无序列表 html body h4一个无序列表：/h4 ul li咖啡/li li茶/li li牛奶/li /ul /body /html 有序列表 html body h4一个有序列表：/h4 ol li咖啡/li li茶/li li牛奶/li /ol /body /html 不同类型的无序列表 body h4Disc 项目符号列表：/h4 ul type=disc li苹果/li li香蕉/li li柠檬/li li桔子/li /ul h4Circle 项目符号列表：/h4 ul type=circle li苹果/li l