第二-三讲 Web开发基础.ppt

Web开发基础 授课教师：董晓慧 email：ise_dongxh@ 本讲内容 第四章 HTML概述 对(X)HTML标记如何工作有基本的感觉，包括理解元素和特性 观看浏览器如何解释(X)HTML文档 学习(X)HTML文档的基本结构 初看样式表使用 第五章 标记文本 重要术语：(X)HTML (X)HTML是HTML和它的最新版本XHTML的合并简写。 创建(X)HTML文档的步骤 第一步：从内容开始。添加纯文本内容，观察浏览器如何处理。 第二步，文档结构化。学习(X)HTML元素，以及创建文档结构的元素。 第三步，确定文本元素。用适当的文本元素来描述内容，并学习(X)HTML的正确使用方法。 第四步，添加图像。向网页中添加图像，学习特性和空元素 第五步，使用样式表改变外观。使用层叠样式表来格式化内容。 启动文本编辑器 Windows操作系统下，启动记事本创建新文档（演示） 也可以用其他编辑器，只要能用于文本编辑，能保存为.html扩展名的纯文本文件。 如果文件类型的扩展名隐藏了，可以设置扩展名为可见。 第一步，从内容开始 打开新文档，输入内容（演示） 保存 直接保存或另存为 创建一个新文件夹，存放这个网站的所有文件 保存文件时，文件的扩展名为.html，保存类型为“所有文件”（注：文件命名规则） 在浏览器中浏览文件 文件命名习惯 文件使用正确的后缀 (X)HTML文件必须以.html(.htm)结束 web图像根据文件类型来命名，如；.gif，.jpg(.jpeg) 不要在文件名内使用字符空格 可用短下划线和短横来在视觉上隔开文件名中的单词，如robbins_bio.html、robbins-bio.html 避免诸如?、%、#、/、:、;、.等字符 文件名只限使用字母、数字、下划线、连字符和句号 根据服务器配置，文件名可能大小写敏感 没有特殊要求，文件名坚持用小写字母 保持文件名简短 短文件名可以保持字符数和你的(X)HTML文件尺寸在控制之中； 若真要定义长的、多单词的文件名，可用大写字母或下划线隔开，如ALongDocumentTitle.html、a_long_document_title.html 自定习惯 网站要有统一的命名方案 从第一步学到了什么？ 显示在浏览器上的文件，源码中的一些信息会被忽略掉，包括 换行（回车） 在文本流中，文本和元素连续排列，直至遇到块元素，如标题（h1）和段（p），或换行（br）元素 制表符和多个空格 当浏览器遇到制表符和多个空格时，它只会显示1个空格 不可识别的标记 注释中的文本 !--和--标签之间的文本用于表示注释，浏览器不会显示 简单的输入一些内容并命名文档远远不够 我们将使用标记来添加结构 先给文档本身添加（第二步） 在给网页内容添加（第三步） 第二步 文档结构化 HTML元素 通用的HTML元素的结构 基本的文档结构 (X)HTML文档有head(头)和body(主体) 别忘记好标题 title元素不仅是每篇文档必须的，更是有用的 标题将显示在用户的书签或收藏夹列表中 描述性的标题可加强易用性 使用屏幕阅读器时，标题将会被人首先看到 搜索引擎很大程度上依赖于文档标题 应为文档提供有思想性、描述性的标题，避免含糊的标题 第三步 确定文本元素 语义标记 语义标记（semantic markup）：选择合适的(X)HTML元素，为当前的内容作最有意义的描述。 标记内容时，即为内容选择元素时，重要的是要根据什么能使内容更有意义来选择。 标记除了增添内容的内涵，还可以使文档结构化。 块元素和内联元素 标题和段落元素是块级元素(block-level elements)，在浏览器中显示时，都是从新行开始； 默认情况下，块级元素整体上下还有一些空间。 强调(em)元素是内联元素(inline element)，在浏览器中显示时，不从新行开始，仍然在文本流中 块级元素和内联元素的区别很重要 块级元素不能放在内联元素中； 应用层叠样式表时，二者也有不同 默认样式 所有的浏览器都有自己内建的样式表，控制(X)HTML元素的默认显示 第四步 添加图像 空元素 没有文本内容，只是用来提供一些简单的指令 如图像(img)元素——告诉浏览器从服务器获取一副图片文件并插入到文档文本流的某个位置；br、hr等。 HTML和(X)HTML中空元素的语法有所差异 HTML，空元素不使用关闭标签，如phello!brwelcome/p (X)HTML中，所有的元素都必须关闭，包括空元素phello!br /welcome/p 特性 特性是用来阐明或修改元素的指示 特性的语法如下 element attribute-name=valueContent/element 空元素语法 element