《第1章学习简单的网页设计.ppt》由会员分享，可在线阅读，更多相关《第1章学习简单的网页设计.ppt（16页珍藏版）》请在三一文库上搜索。
1、第1章 学习简单网页设计,WANGYESHEJIJICHU,1.1 html的基本概念 1.2 html的常用标记 1.3 web网页设计,1.1 html的基本概念,HTML的英文全称是Hypertext Marked Language，中文叫做“超文本标记语言”。 和一般文本的不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称“标记”。 一个HTML文件的后缀名是.htm或者是.html。,打开Notepad，新建一个文件，然后拷贝以下代码到这个新文件，然后将这个文件存成index.html 简单网页设计 This is my first homepage. This i
2、s my first homepage. 要浏览这个index.html文件，双击它。或者打开浏览器，在File菜单选择Open，然后选择这个文件就行了。,这个文件的第一个Tag是，这个Tag告诉你的浏览器这是HTML文件的头。 文件的最后一个Tag是，表示HTML文件到此结束。 在和之间的内容，是Head信息。Head信息是不显示出来的，在 浏览器里看不到。但是这并不表示这些信息没有用处。比如你可以在Head信息里加上一些关键词，有助于搜索引擎能够搜索到你的网页。 在和之间的内容，是这个文件的标题。 在和之间的信息，是正文。 在和之间的文字，用粗体表示。顾名思义，就是bold的意思。,1.2
3、 html的常用标记, 这是第一段。 这是第二段。 这是第三段。 在HTML里，用p来定义段落。 ,这个示例显示在HTML文件里如何分段,属性,居中的正文标题 这是标题 上面的标题是居中显示的。 ,HTML注释,在HTML文件里，你可以写代码注释，解释说明你的代码，这样有助于你和他人日后能够更好地理解你的代码。 注释可以写在之间。浏览器是忽略注释的，你不会在HTML正文中看到你的注释。 , 代码注释是不会显示在网页里的。 ,HTML特殊字符显示,有些字符在HTML里有特别的含义，比如小于号就表示HTML Tag的开始，这个小于号是不显示在我们最终看到的网页里的。那如果我们希望在网页中显示一个小
4、于号，该怎么办呢？ 这就要说到HTML字符实体(HTML Character Entities)了。 一个字符实体(Character Entity)分成三部分：第一部分是一个。 用实体(Entity)名字的好处是比较好理解，一看lt，大概就猜出是less than的意思，但是其劣势在于并不是所有的浏览器都支持最新的Entity名字。而实体(Entity)编号，各种浏览器都能处理。 注意：Entity是区分大小写的。,显示空格,通常情况下，HTML会自动截去多余的空格不管加多少空格，都被看做一个空格。比如你在两个字之间加了10个空格，HTML会截去9个空格，只保留一个。为了在网页中增加空格，你
5、可以使用表示空格。,1.3 正文标题,HTML用到这几个Tag来定义正文标题，从大到小每个正文标题自成一段 This is a heading This is a heading This is a heading This is a heading This is a heading This is a heading,换行 通过使用这个Tag，可以在不新建段落的情况下换行。 没有Closing Tag。 This is a paragraph with line breaks, 这一段 在源代码里 包含很多分行， 但是浏览器忽略 这些分行。 这一段 在浏览器里 包含 很多 空格， 但是 浏
6、览器忽略多余空格。 你使用的浏览器的窗口大小决定了段落的行数。如果你改编浏览器窗口的大小，段落的行数会因此改变。 ,如何在HTML文中加条横线, 用hr这个Tag可以在HTML文件里加一条横线。 信息类网站 交易类网站 互动游戏类网站 ,如何改变HTML文件的背景色。, 看，这个页面是黄色的。 ,HTML常用格式,HTML定义了一些文本格式的Tag，比如利用Tag，可以将字体变成粗体或者斜体。从下面的示例，你可以了解各种文本格式Tag如何改变HTML文本的显示。, 粗体用b表示。 斜体用i表示。 芙蓉姐姐这个词当中划线表示删除。 想唱就唱这个词下划线插入。 X2其中的2是下标 X2其中的2是上标 好好学习，天天向上。 这句话缩进表示引用 这是 预设(preformatted)文本. 在pre这个tag里的文本 保留 空格和 分行。 ,