网站设计-HTML基础

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

HTML标记符及其属性
四、 Web页的结构
HTML 必须包含的基本结构标记符：
• • • • HTML标记：<HTML> 头标记： <HEAD> 标题标记： <TITLE> 正文标记： <BODY> </HTML> </HEAD> </TITLE> </BODY>
三大结构：
正文标记符<BODY> </BODY> 首部标记 <HTML> •HTML 包含标记 Web 页的具体内容，包括文字、图形 • <HEAD> </HEAD> <HEAD> 、超链接及其他各种 HTML 对象。 • 位于 <HTML> • Web </HTML> 页的开头，不包括 Web 页的 <TITLE> • 正文标记符中的文字—— Web 页有关 • 任何实际内容，提供一些与 Web页的第一个和最后一个标记符的特定信息如果没有其他标记符修饰，正文标记符 • Web 页的其他所有内容都位于这对标记 </TITLE> 中的文字将以无格式的形式显示 • 通常包含一下标记符：符之间 </HEAD> 如果浏览器窗口显示不下，则自动换行标题标记符 ——<TITLE> </TITLE> • HTML 标记符告诉浏览器或其他阅读该页 <BODY> 空格、回车这些格式控制在显示时都不 META标记符——<META> 的程序，此文件为一个 Web页起作用 BGSOUND 标记符——<BGSOUND> </BODY> • 不包含其它属性 </HTML>
3.网页测试
• • IE、谷歌、360等浏览器静态页面制作工具、网页测试工具
三、标记符
1.标记符的定义：
——HTML语言通知浏览器如何显示网页内容的方式
2.标记符的形式：
• 所有标记符都用尖括号括起来 • 绝大多数标记符是成对出现的，即包括开始标记符和结束标记符，个别是单一标记符。例如： <TITLE> </TITLE>
注释可插入在 Web 页的任何位置
七、显示特殊字符
特殊字符——参考字符参考字符以“ & ”号开始，以“ ; ”结束参考字符既可用数字代码表示，也可用代码名称表示与HTML标记符同，字符代码名称区分大小写例子：
<BODY> <Tom & Jerry> is a good programmer. </BODY>
3.标记符的属性
• 作用—— 对标记符作用的内容进行更详细的控制
开始标记符的尖括号里，与标记符之间用 • 位置—— 空格隔开，属性值跟在相应的属性之后，用等号连接，不同属性之间用空格隔开 • 形式—— 小写
<FONT size="1" color="red">红色一号的文字</FONT>
学习和掌握HTML的关键：
六、添加注释
注释的作用 HTML 注释的格式
• 由开始标记符  构成 • 标记符之间的任何内容都将被浏览器解释为注释，而不在浏览器中显示
例子：
<HTML> <HEAD> <TITLE> 网页标题</TITLE> </HEAD> <BODY> 正文，正文，正文 </BODY>  </HTML>
16 种标准颜色
色彩名十六进制值
#00FFFF #000000 #0000FF #FF00FF #808080 #008000
色彩名
十六进制值
#000080 #808000 #800080 #FF0000 #C0C0C0 #008080
Aqua（水蓝色） Black（黑色） Blue（蓝色） Fuchsia（樱桃色） Gray（灰色） Green（绿色）
五、设置页面属性
正文标记符包括一些常用属性，可以用于设置网页背景颜色和图案，以及设置文档中文字和超链接的颜色设置页面背景颜色—— bgcolor
• <BODY bgcolor=“颜色名称">
设置页面背景图像—— background
• <BODY background = "背景图案的地址">
HTML基础
本讲主要内容
HTML定义建立与测试网页标记符 Web页的结构设置页面属性添加注释显示特殊字符
一、HTML定义
超级文本标记语言（ HyperText Markup Language 英文缩写：HTML ）是标准通用标记语言下的一个应用，也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（比如：文字如何处理、图片如何显示、页面如何排版等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，网页设计者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释。超级文本标记语言文档制作不是很复杂，但功能强大，其主要特点如下：简易性、可扩展性、平台无关性。
Navy（藏青色） Olive（茶青色） Purple（紫色） Red（红色） S源自lver（银色） Teal（茶色）
Lime（石灰色）
Maroon（褐红色）
#00FF00
#800000
White（白色）
Yellow（黄色）
#FFFFFF
#FFFF00
浏览器将采用默认的设置 • bgcolor——白色或灰色 • text —— 黑色 • Link —— 蓝色 • vlink —— 紫色 • alink —— 红色
• 使用背景图案时，如果图案小于浏览器窗口的大小，则浏览器会自动象铺地板砖一样平铺背景图案。
可以同时设置背景图案和背景色，以便在不能显示图像的浏览器上显示背景色
页面基本属性——定义在<body>中
• • • • • • background=" " 背景图片文件名 bgcolor= " "背景颜色 text =" "文本默认颜色 link =" "未被访问链接源文字的颜色 alink =" "被激活链接源文字的颜色 vlink =" "访问过链接源文字的颜色
<P>、 <BR>、<HR>
• 开始标记符和结束标记符定义了标记符所影响的范围，它们的区别是结束标记符多了一个斜线/，例如：
<FONT color=“red”>好好学习 </FONT>天天向上
• 不区分大小写，但为了可读性和维护性，使用大写
<HTML> <H1>这是H1格式的字体</H1> <BR>这是默认格式的字体 </HTML>
标题标记符——<TITLE> </TITLE>
• 用于定义网页的标题,并在浏览器窗口的标题栏中显示 • 网页标题可被浏览器用作书签和收藏清单
<HTML> <HEAD> <TITLE>这是网页标题 </TITLE> </HEAD> <BODY>请看浏览器的标题栏。 </BODY> </HTML>
例子：
例子： <BODY bgcolor="#000000" text="#FFFFFF" link="#999999" vlink="#CCCCCC" alink="#666666">
<HTML> <HEAD> <TITLE>背景图案示例</TITLE> </HEAD> <BODY background="background.png" > 背景图案示例 </BODY> </HTML>
<HTML> <HEAD> <TITLE>网页标题</TITLE> </HEAD> <BODY> 正文，正文，正文，正文，正文，正文，正文，正文，正文 </BODY> </HTML>
META标记符——<META>
• 用于描述不包含在标准HTML里的一些文档信息，例如网页
关键词，网页描述等。这些定义的内容并不在网页页面中显
，
二、测试和创建Web页
1.网页编辑工具
• • • 纯文档编辑工具——记事本其它文本编辑器——EditPlus 所见即所得工具——Dreamweaver
2.网页创建步骤(使用“记事本”创建网页)
① 打开“程序/附件/记事本”
② 在“记事本”的窗口中输入HTML代码
③ 选择“文件”菜单的“另存为”命令 ④ 在“文件名”框中输入网页的名称，文件名必须以.html或.htm为后缀名 ⑤ 单击保存
示，但是搜索引擎可以检索这些信息，浏览者可以根据这些关键词或描述查找到该网页。
<html> <head> <title>我的第一个网页</title> <META NAME=“Keywords” CONTENT=“关键词1,关键词2,关键词3"> <META NAME=“Description” CONTENT=“网页描述"> </head> <body> </body> </html>
<Tom & Jerry> is a good programmer.
特殊字符 & 数字代码 & 代码名称 &
<
> 空格
<
>  
<
>