Download
1 / 24
240 likes | 497 Views
专业铸造品质 知识成就未来 - 硅谷动力网络学院. HTML 第一讲. 主讲：吴涛. 硅谷动力网络学院. 作者仅授权硅谷动力网络学院发表该系列教程 , 版权归作者本人与网络学院拥有 . 任何个人与网站转载请联系 hzhang@mail.enet.com.cn. HTML 概念. HTML （ Hyper Text Markup Language 超文本标识语言） 是一种用来制作超文本文档的简单标记语言。 用 HTML 编写的超文本文档称为 HTML 文档。. HTML 文档的编写方法. 手工直接编写 记事本等，存成 .htm .html 格式
E N D
专业铸造品质 知识成就未来-硅谷动力网络学院 HTML第一讲 主讲：吴涛 硅谷动力网络学院 作者仅授权硅谷动力网络学院发表该系列教程,版权归作者本人与网络学院拥有.任何个人与网站转载请联系hzhang@mail.enet.com.cn
HTML概念 • HTML（Hyper Text Markup Language 超文本标识语言） • 是一种用来制作超文本文档的简单标记语言。 • 用HTML编写的超文本文档称为HTML文档。
HTML文档的编写方法 • 手工直接编写 • 记事本等，存成.htm .html格式 • 使用可视化HTML编 辑 器 • Frontpage、Dreamweaver等 • 由Web 服务器（ 或称HTTP 服务器） 一 方实时动态地生成。
网页文件命名 • *.htm或*.html • 无空格 • 无特殊符号（例如&符号），只可以有下划线“_”，只可以为英文、数字 • 区分大小写 • 首页文件名默认为：index.htm 或 index.html
HTML 文件结构 <html>...</html> <head>...</head> <body>...</body> • 元素：是HTML语言的基本部分。元素总是成对出现，每一对元素一般都有一个开始的标记（如<body>），也有一个结束的标记（如</body>）。元素的标记要用一对尖括号括起来，并且结束的标记总是在开始的标记前加一个斜杠。
HTML 文件结构(Document Structures) • <HTML> • <HEAD> • <title></title> • <meta> • </HEAD> • <BODY> • HTML 文件的正文 • </BODY> • </HTML>
第一张网页（01.htm） <html> <head> <title>my first page</title> </head> <body> This is my first homepage! </body> </html>
基本组成部分——HTML元素属性 • HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的< >内，并且和元素名之间有一个空格分隔；属性值用“”引起来。
第二张网页（02.htm） <html> <head> <title>my first page</title> </head> <body> <p align="center">This is my first homepage!</p> </body> </html>
HTML基本结构的有关元素和元素属性 • HEAD元素——1 <head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。 • <title> <title>元素定义HTML文档的标题。<title>与</title>之间的内容将显示在浏览器窗口的标题栏。
HTML基本结构的有关元素和元素属性 • HEAD元素——2 • <meta>元素 • <meta>元素下面可以插入很多很有用的元素属性。下面介绍四种： • <meta name="keywords" content="study,computer"> • 用来标记搜索引擎在搜索你的页面时所取出的关键词。
HTML基本结构的有关元素和元素属性 • HEAD元素——3 • <meta>元素 • <meta name="author" content=“wutao"> • 用来标记文档的作者。
HTML基本结构的有关元素和元素属性 • HEAD元素——4 • <meta>元素 • <meta http-equiv=“Content-Type” content=“text/html; charset=gb2312”> • 用来标记你的页面的解码方式。
HTML基本结构的有关元素和元素属性 • HEAD元素——5 • <meta>元素 • <meta http-equiv=“refresh” content=“5;URL=http://www.enet.com.cn/eschool”> • 用来自动刷新网页
练习（03.htm） • 编写一个网页，要求3秒钟后自动跳转到硅谷动力学院的网站。 <html> <head> <title>my first page</title> <meta http-equiv=“refresh” content=“3;URL=http://www.enet.com.cn/eschool”> </head> <body> <p align=“center”>三秒钟后本网页将自动跳转到硅谷动力网络学院首页</p> </body> </html>
<body>元素及元素属性——1 • <body>元素表明是HTML文档的主体部分。在<body>与</body>之间，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。
<body>元素及元素属性——2 <body>元素中有下列元素属性： • (1)bgcolor • bgcolor属性标志HTML文档的背景颜色。如：bgcolor="#CCFFCC"。 • 例：04.htm
HTML对颜色的控制 • HTML对颜色的控制也有自己的语法。HTML使用16进制的RGB颜色值对颜色进行控制。 • 16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.
<body>元素及元素属性——3 • <body>元素中有下列元素属性： • (2)background • background属性标志HTML文档的背景图片。如：background=“images/bg.gif"。 • 可以使用的图片格式为GIF，JPG 例：05.htm、06.htm
<body>元素及元素属性——4 • <body>元素中有下列元素属性： • (3)bgproperties=fixed • bgproperties=fixed使背景图片成水印效果，即图片不随着滚动条的滚动而滚动。 例：07.htm和08.htm对比
<body>元素及元素属性——5 • <body>元素中有下列元素属性： • (4)text • text属性标志HTML文档的正文文字颜色。如：text=“#FF6666”。Text元素定义的颜色将应用于整篇文档。 • 例：09.htm
<body>元素及元素属性——6 • <body>元素中有下列元素属性： • (5)超级链接颜色 • link、vlink、alink分别控制普通超级链接、访问过的超级链接、当前活动超级链接颜色。 • 例：10.htm
<body>元素及元素属性——7 • <body>元素中有下列元素属性： • (6) leftmargin和topmargin • 设置网页主体内容距离网页顶端和左端的距离如：leftmargin="20" topmargin="30“ • 例：11.htm
