学习简单的网页设计.ppt

第1章学习简单网页设计 WANGYESHEJIJICHU 1 1html的基本概念1 2html的常用标记1 3web网页设计 1 1html的基本概念 HTML的英文全称是HypertextMarkedLanguage 中文叫做 超文本标记语言 和一般文本的不同的是 一个HTML文件不仅包含文本内容 还包含一些Tag 中文称 标记 一个HTML文件的后缀名是 htm或者是 html 打开Notepad 新建一个文件 然后拷贝以下代码到这个新文件 然后将这个文件存成index html简单网页设计Thisismyfirsthomepage Thisismyfirsthomepage 要浏览这个index html文件 双击它 或者打开浏览器 在File菜单选择Open 然后选择这个文件就行了 这个文件的第一个Tag是 这个Tag告诉你的浏览器这是HTML文件的头 文件的最后一个Tag是 表示HTML文件到此结束 在和之间的内容 是Head信息 Head信息是不显示出来的 在浏览器里看不到 但是这并不表示这些信息没有用处 比如你可以在Head信息里加上一些关键词 有助于搜索引擎能够搜索到你的网页 在和之间的内容 是这个文件的标题 在和之间的信息 是正文 在和之间的文字 用粗体表示 顾名思义 就是bold的意思 1 2html的常用标记 这是第一段 这是第二段 这是第三段 在HTML里 用p来定义段落 这个示例显示在HTML文件里如何分段 属性 居中的正文标题这是标题上面的标题是居中显示的 HTML注释 在HTML文件里 你可以写代码注释 解释说明你的代码 这样有助于你和他人日后能够更好地理解你的代码 注释可以写在之间 浏览器是忽略注释的 你不会在HTML正文中看到你的注释 代码注释是不会显示在网页里的 HTML特殊字符显示 有些字符在HTML里有特别的含义 比如小于号 就表示HTMLTag的开始 这个小于号是不显示在我们最终看到的网页里的 那如果我们希望在网页中显示一个小于号 该怎么办呢 这就要说到HTML字符实体 HTMLCharacterEntities 了 一个字符实体 CharacterEntity 分成三部分 第一部分是一个 用实体 Entity 名字的好处是比较好理解 一看lt 大概就猜出是lessthan的意思 但是其劣势在于并不是所有的浏览器都支持最新的Entity名字 而实体 Entity 编号 各种浏览器都能处理 注意 Entity是区分大小写的 显示空格 通常情况下 HTML会自动截去多余的空格不管加多少空格 都被看做一个空格 比如你在两个字之间加了10个空格 HTML会截去9个空格 只保留一个 为了在网页中增加空格 你可以使用表示空格 1 3正文标题 HTML用到这几个Tag来定义正文标题 从大到小每个正文标题自成一段ThisisaheadingThisisaheadingThisisaheadingThisisaheadingThisisaheadingThisisaheading 换行通过使用这个Tag 可以在不新建段落的情况下换行 没有ClosingTag Thisisaparagraphwithlinebreaks 这一段在源代码里包含很多分行 但是浏览器忽略这些分行 这一段在浏览器里包含很多空格 但是浏览器忽略多余空格 你使用的浏览器的窗口大小决定了段落的行数 如果你改编浏览器窗口的大小 段落的行数会因此改变 如何在HTML文中加条横线 用hr这个Tag可以在HTML文件里加一条横线 信息类网站交易类网站互动游戏类网站 如何改变HTML文件的背景色 看 这个页面是黄色的 HTML常用格式 HTML定义了一些文本格式的Tag 比如利用Tag 可以将字体变成粗体或者斜体 从下面的示例 你可以了解各种文本格式Tag如何改变HTML文本的显示 粗体用b表示 斜体用i表示 芙蓉姐姐这个词当中划线表示删除 想唱就唱这