HTML简介及其基本标记.ppt

第一章：HTML 简介及其基本标记,Web HTML简介 HTML文档结构 HTML基本标签 使用列表和超链接,1,1.1 Web,常用术语 浏览器：是客户软件，它使用户能够显示一超文本文档并与之对话 Web服务器：响应Web浏览器检索资源的请求。它也用来指运行服务器程序的计算机。 主页：它是当用户选择连接到任何Web服务器时被显示的第一个超文本文档。 HTML（ Hypertext Markup Language/超文本标记语言）：是用来创建Web文档的编码形式。 HTTP （Hypertext Transfer Protocol/超文本传输协议）：是用来在Web上传输超文本的协议。所谓协议是计算机用来通讯的一套规则。 URL （Uniform Resource Locator/统一资源定位器）：是一精确定位因特网资源的Web寻址形式。任何从一个文档到另一个文档的链接总是通过使用URL去实现。URL包含了关于文档地址的信息。一个URL可以指向另一HTML文档或者一个图象。,2,W3C,World Wide Web Consortium 对网络标准制定的一个非赢利组织，像HTML、XHTML、CSS、XML的标准就是由W3C来定制 使命：通过发展规范、指导方针、软件以及工具，来尽展万维网潜能,3,第一章：HTML 简介及其基本标记,Web HTML简介 HTML文档结构 HTML基本标签 使用列表和超链接,4,1.2 HTML简介,HTML:超文本标记语言 Web用于创建和识别文档的标准语言 通用的语言，独立于平台，能够在任何平台上使用 使用标签：标记文档，指定页面的显示方式 包含链接：使得用户可以跳到同一文档的不同位置或跳到其他文档资料、图像等 css（Cascading Style Sheets）层叠样式表 样式 Js（Javascript） 行为,5,HTML参考书籍,6,第一章：HTML 简介及其基本标记,Web HTML简介 HTML文档结构 HTML基本标签 使用列表和超链接,7,1.3 HTML文档结构,HTML文档结构 HTML编辑器： Dreamweaver、Sublime、记事本 HTML文档：一系列的标签，指定页面的显示方式 标签： 开始标签：，结束标签： 开始标签和结束标签之间的文本：元素的内容 属性 属于标签，可选 用于在标签中修饰或进一步指定信息，如颜色、对齐方式、高度和宽度等。 属性以名称/值对出现：名称=值。 属性只能添加到开始标签,8,1.3 HTML文档结构,HTML文档主要由三部分组成： HTML部分：以标签开始，以标签结束 头部：以标签开始，以标签结束。 主体部分：以标签开始，以标签结束,9, HTML课程 你现在来到的是HTML第一课 ,第一章：HTML 简介及其基本标记,Web HTML简介 HTML文档结构 HTML基本标签 使用列表和超链接,10,1.4 HTML基本标签,标题标签：6级标题，最大，最小,11, HTML课程 你现在来到的是HTML第一课 你现在来到的是HTML第一课 你现在来到的是HTML第一课 你现在来到的是HTML第一课 你现在来到的是HTML第一课 你现在来到的是HTML第一课 ,1.4 HTML基本标签,段落标签 ：用于标记段落的开始 ：段落结束标记，并非是必需的 align属性：对齐方式，如左对齐、居中、右对齐,12, HTML课程 你现在来到的是HTML第一课 你现在来到的是HTML第一课 你现在来到的是HTML第一课 ,1.4 HTML基本标签,换行标签 ：结束一行，不开始一个新的段落 预格式化标签 :被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 标签的常见应用就是用来表示计算机的源代码,13,1.4 HTML基本标签,14, HTML课程 这是 预格式文本。 它保留了 空格 和换行。 pre 标签很适合显示计算机代码： for i = 1 to 10 print i next i ,1.4 HTML基本标签,文本格式化标签 用于格式化HTML文本内容,定义或更改文本的显示格式 标签 粗体字体显示文本 标签 用斜体字体显示文本 标签 为显示的文本添加下划线 标签 使文本的高度低于周围的文本，并以更小的字体进行显示 标签 使文本的高度高于周围的文本，并以更小的字体进行显示,15,1.4 HTML基本标签,16, HTML课程 你现在来到的是HTML第一课 你现在来到的是HTML第一课 你现在来到的是HTML第一课 你现在来到的是HTML第一课 你现在来到的是HTML第一课 ,1.4 HTML基本标签,标签 用于在页面上绘制水平线 只有开始标签，没有结束标签 属性： ALIGN：指定水平线的位置，可以将水平线居中对齐、右对齐或左对齐。 WIDTH：指定水平线的长度。可以按像素或百分比为单位指定长度。默认值为100%。 SIZE：指定水平线的宽度，以像素为单位。 NOSHADE：指定水平线以纯色而不是以阴影进行显示。,17,1.4 HTML基本标签,标签 位于网页的标题部分 提供有关网页的信息，比如针对搜索引擎和更新频度的描述和关键词 name 属性 name 属性提供了名称/值对中的名称 http-equiv 属性 http-equiv 属性为名称/值对提供了名称 指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对 ,18,1.4 HTML基本标签,19, 本文档的 meta 属性标识了创作者和编辑软件。 ,1.4 HTML基本标签,标签 用于控制网页上文本的显示。文本大小、颜色和样式等属性都可使用它来指定。 属性 COLOR：用于指定字体的颜色。可以指定颜色名称或十六进制值 SIZE：用于指定字体的大小。可以为字体指定的大小范围为从1到7，默认大小为3。 FACE：用于指定字体的类型,20,1.4 HTML基本标签,标签 用于在HTML文档中嵌入图像 并不会在网页中插入图像，而是从网页上链接图像 标签有两个必需的属性：src 属性 和 alt 属性,21,1.4 HTML基本标签,22, 未设置对齐方式的图像： 图像 在文本中 已设置对齐方式的图像： 图像 在文本中 图像 在文本中 图像 在文本中 请注意，bottom 对齐方式是默认的对齐方式。 ,1.4 HTML基本标签,特殊字符 某些字符在HTML中具有特殊意义，如小于号（）即定义HTML标签的开始。要在浏览器中显示这些特殊字符，就在HTML文档中使用字符实体 字符实体由三部分组成：&号、实体名称和分号（；）。例如：要在HTML文档中显示小于号，则使用<,示例,任务场景 Jessup是电子消费品制造公司，其产品包括：电冰箱、空调、洗衣机、电视机和家用炊具等。该公司成立于1982年，通过其积极的市场政策和对产品的不断推陈出新，现在已成为家用电器产品的主流生产厂商 该公司为了能及时了解有关部门的经理设置情况，需要建立Web页，以便随时查看 要求：页面简洁、层次清晰 页面,24,第一章：HTML 简介及其基本标记,Web HTML简介 HTML文档结构 HTML基本标签 使用列表和超链接,25,1.5 使用列表和超链接,列表标签 列表用于按逻辑方式对数据分组 在HTML文档中可创建以下不同类型的列表：无序列表、有序列表 无序列表 项目列表，列表项前面带有项目符号 列表中每项都用列表标签标记，其中LI表示列表项。结束标记为可选项,1.5 使用列表和超链接, HTML课程 第一课的内容有 因特网 万维网 统一资源定位器 超文本标记语言 HTML文档结构 创建WEB页 ,1.5 使用列表和超链接,有序列表 有序列表的列表以自动生成的顺序显示,1.5 使用列表和超链接, HTML课程 第一课的内容有 因特网 万维网 统一资源定位器 超文本标记语言 HTML文档结构 创建WEB页 ,1.5 使用列表和超链接,超链接标签 超链接是到另一个文档或文件（图形、音频、视频等）甚至到同一个文档的另一部分的连接 超链接可链接到：同一文档的特定部分、其他文档、其他文档的特定部分、其他文件、其他站点 创建超链接 要链接文件的完整地址或URL 将提供链接的热点。热点可以是文本行，甚至是图像。 当用户单击热点时，浏览器将读取URL中指定的地址并跳到新的位置 标签 HREF参数用于指定要链接文档的地址或URL 页面,1.5 使用列表和超链接,链接到其他目录中的文件 绝对路径名：指定从根目录到文件的完整路径。 相对路径名：指定相对于当前文件的文件位置。 链接到文档的各个部分 标签的name属性来创建锚记 在链接地址里要写上锚记名称，并在前面加一个“#” 本公司简介 本公司简介,示例,任务场景 Jessup公司高层管理不仅需要查看相关部门经理的名单，而且希望通过点击经理名字能以列表的方式查看到该经理的详细介绍，为此需要建立新的Web页 页面,小结,因特网是一个全世界的人们都能访问的