第一章 web语言入门和超文本.pptVIP

实践目标：通过云服务创建网站 课程内容和目标 掌握Web技术的理论框架 结合实践，从简单到复杂 网页设计之路 从语言特性到开始designing...、 Html, css 客户端编程 javascript：动态 服务器端编程 PHP：简单的互动设计 理解云服务 课程学习方法 理解得越多，需要记忆的就越少 假如我是web技术的创造者 多问问题 没有傻问题 勤于实践 踏出第一步，你会发现惊喜 保持良好学习心态 循序渐进 参考资源 网上知识手册 / /tiy/t.asp?f=html_poem 万维网联盟——网络语言标准的制定者 / / 其他书籍 《head first HTML 与 CSS, XHTML》等系列书籍 HTML: Web沟通的语言 HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 (Hyper Text Markup Language) 浏览器是怎么知道如何显示一个页面呢 XXX.html文件 输入输出对比 文本编辑器 不仅在记事本中可以编写HTML代码，任何文本编辑器都可以编写HTML。比如写字板、word等，但保存的时候必须保存为.html或.htm格式。 HTML提供的“结构”：实践方法 从Internet Explorer上的“查看-源文件”就可以看到其HTML源文件。 还可以用notepad++。 “我们的班级主页” “Head First lounge” 什么是 HTML 标签 HTML 文档和 HTML 元素是通过 HTML 标签进行标记的。 HTML 标签由开始标签和结束标签组成。 开始标签是被括号包围的元素名。 结束标签是被括号包围的斜杠和元素名。 开始标签 所标记的内容 结束标签 标记的工作原理 用包围文本的成对标记告诉浏览器网页的结构。 整个语句称为一个元素。 我们也称一对开始标记和结束标记为匹配标记。 元素=开始标记+内容+结束标记 HTML !--...-- 标签 注释标签用来在源文档中插入注释。 注释会被浏览器忽略。 您可使用注释对您的代码进行解释，这样做有助于您在以后的时间对代码的编辑。 HTML html 标签 定义和用法 此元素可告知浏览器其自身是一个 HTML 文档。 在它们之间是文档的头部和主体。 head 标签用于定义文档的头部，它是所有头部元素的容器。 body 元素定义文档的主体。 示例 html head 这里是文档的头部 ... ... ... /head body 这里是文档的主体 ... ... ... /body /html HTML title 标签 title 元素可定义文档的标题。 浏览器通常把它放置在浏览器窗口的标题栏或状态栏上。 当把文档加入用户的链接列表或者收藏夹或书签列表时，标题将成为该文档链接的默认名称。 HTML h1 到 h6 标签 h1 - h6 标签可定义标题。 h1 定义最大的标题。 h6 定义最小的标题。 由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。 p 标签 p 标签定义段落。 p 元素会自动在其前后创建一些空白。 HTML 属性 HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。 属性总是以名称/值对的形式出现，比如：name=value。 属性总是在 HTML 元素的开始标签中规定。 HTML img 标签 img 元素向网页中嵌入一幅图像。 img 标签从网页上链接图像。 img 标签创建的是被引用图像的占位空间。 src 属性的值是文件的路径，即URL。 HTML em 标签 把文本定义为强调的内容。 HTML标签只是为了表现结构，具体的显示样式会在后续讲到的CSS技术中指定。 没有傻问题 可以说HTML就是一大堆包围文本的标记吗？ 所谓“超文本标记语言”，它标记内容结构和超链接。 浏览器是如何显示HTML的？ 会根据所标记的文档结构，按照默认的规则来显示，当然，也可以用CSS来修改，后续会看到。 HTML源文件中的缩进和空格，在浏览器中看不到吗？为什么？ 浏览器只关注你所标记的结构，且会忽略制表符（tab键）、回车和大多数空格。 没有傻问题 HTML文件就是普通的文本文件吗？ YES！只是后缀名为.html或者.htm 那么，为什么不使用word等格式，而用纯文本这么老土的数据形式呢？ HTML的出身是为了方便研究者们共享论文，纯文本是最简单的。 为了防止出现技术垄断。……但是有好几个公司正在试图这样做，比如微软的silverlight方案，Adobe的flex技术等，为此 w3联盟 推出了HTML 5 标准。 Starbuzz咖