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