Web前端开发技术ppt课件.ppt
Web前端开发技术,第二单元 图文并茂的页面制作,按照HTML语法编写图文并茂的HTML文档,编辑文字，如段落、标题等编辑图像,2.1 HTML与XHTML标准2.2 (X)HTML基础语法2.3 HTML文档整体结构2.4 添加段落2.5 添加标题,2.6 文本修饰2.7 特殊字符2.8 图片与超链接2.9 HTML文件命名2.10 编写HTML代码的注意事项,HTML与XHTML标准,1,2.1 HTML与XHTML标准,HTML与XHTML： W3C组织（World Wide Web Consortium），即全球万维网联盟，制定了(X)HTML相应规范，形成编写网页的统一标准。XHTML可以认为是HTML的“严谨版”。W3C组织还负责制定CSS、XML等其他网络语法的规范。位于文档中的最前面的位置，处于 标记之前。此标记可告知浏览器文档使用哪种 HTML 或 XHTML 规范。它来决定如何显示HTML文档，如下面示例代码所示。,（X）HTML基础语法,2,2.2.1 标 记,标记： HTML标记用于构建网页内容，在HTML语言中为最基本的单位，是HTML文档最重要的组成部分。标记的组成： 由尖括号包围的关键词组成。标记的分类： 双标记和单标记。 什么是双标记在网页文档中成对出现的称为双标记。,2.2.2 属 性,属性： 属性是用来描述标记的，比如单标记是一条水平线，当需要改变水平线的粗细、对齐方式、宽度等就要给标记的相应属性赋上不同的值。 属性的值可以用双引号、单引号引起来，也可以不用。规范用法：属性值全部用双引号括起来。,2.2.3 注 释 符 号,注释符号作用： 注释符号可以对HTML代码添加注释说明，增加代码可读性；也可用于注释HTML代码。位置： 注释写入的位置不限，可以是HTML文档的任意地方，注释语句不会显示在浏览后的网页中。,HTML文档整体结构,3,2.3 文 档 整 体 结 构,构成 ： 一个网页文档基本结构由文档头和文档体两部分组成。文档头： 文档体： 标记的直接子元素就只有head和body标记。,2.3.1 文 档 头 部,文档头即标记所在区域，该区域可用于进行一些网页信息的定义，一般不用来显示。1.设置文档标题： 在HTML文档的头部区域有一对标记，用于设置网页标题，输入标题信息后就可以在浏览器的标题栏上显示。,2.3.1 文 档 头 部,2.设置元信息 ： 设置元信息的标记是标记，该元素定义有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。元信息属性：,2.3.2 文 档 主 题,标记定义文档主体，所在区域为网页内容显示区域。元素包含文档任意可显示的元素，比如文本、超链接、图像、表格和列表等。 标记中的属性可定义页面样式，如页面背景图像、背景颜色和文本颜色等。这些属性现在都不赞成使用，已经被CSS样式取代，在这里可以做适当了解。,2.3.2 文 档 主 题,Body属性值：,添加段落,4,2.4 添 加 段 落,文字是网页中最为常见的元素之一。编辑文字时一般不直接将文字放置在标记中，而是赋予一定的语义，比如标题、段落等。标记会自动在其前后创建一些空白，默认独占一行。注意：要在浏览器中显示换行效果，需要添加换行标记，在HTML代码中在键盘输入的回车符在浏览器中显示为一个空格。,添加标题,5,2.5 添 加 标 题,标题按照字体大小分为6级，分别用标记来定义标题。定义字体最大的标题。定义字体最小的标题。标记定义标题的基本语法：,文本修饰,6,2.6.1-2.6.3 加 粗、倾 斜、下 划 线 效 果,加粗效果 ： 和这两组标记都可设置文字加粗效果的基本语法。倾斜： 标记设置文字倾斜效果的基本语法下划线： 标记设置文字下划线效果的基本语法,特殊字符,7,2.7 特 殊 字 符,在网页上想要显示多个空格那么直接敲键盘上的空格键是不能解决问题的，需要用特殊字符来表示。常用特殊字符表：,图片与超链接,8,2.8.1 设 置 图 片,图片作为网页中必须的元素，其灵活的应用会给网页增添不少的特效。而且图片的直观、明了、绚丽和美观等都是文字无法代替的。基本语法： 标记定义图片语法说明： 其中src属性是必需的，指定图片所在路径。alt属性在图片无法显示时，指定该图片的替代文本。title属性为图片添加了描述性文本。,2.8.2 添 加 超 链 接,浏览网页时，可以通过超链接实现单击一张图片或者一段文字就可以链接到其他网页，它是同其他网页或站点之间进行连接的元素。将相关网页链接在一起后，才能构成一个所谓的网站。基本语法： 标记定义超链接语法说明： href属性用于创建指向另外一个资源的链接，URL为该资源的地址。链接内容是显示在网页上的内容。,2.8.2 添 加 超 链 接,链接内容有两种形式分别是文字与图片，即给文本添加超链接和给图片添加超链接，基本用法如下所示： target属性：规定在何处打开链接文档，可选值如下表所示：,2.8.3 绝 对 路 径 与 相 对 路 径,编辑图片和添加超链接时，必须分别为src和href属性设置资源路径。一般分为绝对路径和相对路径，须根据不同的情况来设置路径。绝对路径：指文件的完整路径，包括文件传输的协议http、ftp等，一般用于网站的外部链接。相对路径：参考的当前位置，就是其他资源相对于当前html页面的路径。,2.8.3 绝 对 路 径 与 相 对 路 径,相对路径三种情况：同一层：当前页面和图片在同一个硬盘目录下，则直接写图片的名称下一层：图片在当前页面所在目录的下一层目录下，图片的路径需要加上目录上一层：图片在当前页面所在目录的上一层目录下, 图片的路径需要加上./,HTML文件名,9,2.9 HTML 文 件 名,HTML文件的命名规则和约定俗成的规范：文件的扩展名要以.html或.html结束。文件名需要“顾名思义”。文件名称可由英文字母、数字或下划线组成(不要用中文命名)。文件名中不要包含特殊符号，比如空格、$等。文件名是区分大小写的，在Unix和Windows主机中有大小写的不同。网站首页文件名默认是index.htm或index.html。,编写HTML 代码注意事项,10,2.10 编 写 HTML 代 码 注 意 事 项,所有标记都要用尖括号（）括起来，这样，浏览器就可以知道，尖括号内的标记是HTML命令。对于成对出现的标记，最好同时输入起始标记或结束标记，以免忘记。在HTML代码中，不区分大小写，比如，将写成或都可以，我们规定都用小写。标记中属性值用双引号括起来。回车或多个空格在HTML代码中都无效，插入空格或回车有专用的标记，分别是 和。标记中不要有空格，除了用来分隔属性，否则浏览器可能无法识别，比如不能将写成 或是,THANK YOU FOR WATCHING,
