HTML教程-语法结构.pptx

《HTML教程-语法结构.pptx》由会员分享，可在线阅读，更多相关《HTML教程-语法结构.pptx（14页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、HTML教程（一）教程（一）HTML基本语法和结构基本语法和结构网页设计与制作网页设计与制作网页设计与制作网页设计与制作HTMLHTMLHTMLHTML简单教程简单教程简单教程简单教程前言：Dreamweaver 系列软件是一个“所见即所得的”网页工具，它给网页制作者带来了很大的方便。“所见即所得”是指在工具上直接编辑页面效果，可以不用管理HTML代码，但其原理离不开HTML语言，只不过它用另一种方式帮用户写好了这些代码，某些功能有局限。因此，要学好网页制作必须掌握HTML知识。一、什么是一、什么是HTML HTML（Hyper Text Markup Language 超文本标记语言）是一种

2、用来制作超文 本文档的简单标记语言。自1990年以来，HTML就一直被当作万维网（world wide web）上的信息表示语言，用来描述网页的格式设计和它与万维网上其他页面的连接信息。网页设计与制作网页设计与制作网页设计与制作网页设计与制作HTMLHTMLHTMLHTML简单教程简单教程简单教程简单教程二、二、HTML基本语法和结构基本语法和结构 HTML的语法非常简单，它采用简洁的标签命令，通过对文字、图像、多媒体元素等的定义，创建具有文本、图像、超链接等对象的复杂页面。HTML的标签用于指定标签中对象的属性，它是用小于号“”括起来的短语和符号如：标签分为双标签和单标签 双标签双标签：这类

3、成对的形式出现，这些称为双标签 如:前面一个是开始标记，后一个为结束标记。单标签单标签：这类标签只有一个，称单标签。如换行标签。用“/”表示结束，如网页设计与制作网页设计与制作网页设计与制作网页设计与制作HTMLHTMLHTMLHTML简单教程简单教程简单教程简单教程 HTML HEAD 网页标题网页标题/HEAD BODY HTML HTML 文件的文件的正文（这部份内容会出现在网页中）正文（这部份内容会出现在网页中）/BODY/HTML头头部部整个整个文档文档身身体体 三、三、HTML 文件结构文件结构 html文档包括头部（head）和主体(body)两大部分，其中头部描述网页的相关信息

4、，如网页标题、网页关键字等。Body 中的内容是网页显示的主体部份，包括文本、图像、表单等各种具体对象。HTML文档的一般结构如下：网页设计与制作网页设计与制作网页设计与制作网页设计与制作HTMLHTMLHTMLHTML简单教程简单教程简单教程简单教程三、HTML文档的编写方法1、手工直接编写记事本等，存成.htm.html格式（文件类型选择所有文件）2、使用可视化HTML编 辑 器：Frontpage、Dreamweaver等Html文件命名规则：由小写英文字符、数字、下划线构成，不能有空格、特殊符号（例如&符号），扩展名用*.htm或*.html首页文件名默认为：index.htm 或 i

5、ndex.html网页设计与制作网页设计与制作网页设计与制作网页设计与制作HTMLHTMLHTMLHTML简单教程简单教程简单教程简单教程第一张网页 第一张网页 欢迎光临我的主页！(1.html)网页设计与制作网页设计与制作网页设计与制作网页设计与制作HTMLHTMLHTMLHTML简单教程简单教程简单教程简单教程HTML元素属性HTML元素可以有自己的相关属性，每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的内，并且和元素名之间有一个空格分隔；属性值用“”引起来。例如：属性值网页设计与制作网页设计与制作网页设计与制作网页设计与制作HTMLHTMLHTMLHTML简单教程简单教

6、程简单教程简单教程第二张网页（2.HTML）第一张网页 欢迎光临我的主页!网页设计与制作网页设计与制作网页设计与制作网页设计与制作HTMLHTMLHTMLHTML简单教程简单教程简单教程简单教程HEAD元素元素1 元素定义HTML文档的标题。与之间的内容将显示在浏览器窗口的标题栏。例：第一张网页第一张网页 HTML结构标签HEAD 元素出现在文档的开头部分。元素出现在文档的开头部分。与与之间的内容不会在浏览器之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义。的文档窗口显示，但是其间的元素有特殊重要的意义。网页设计与制作网页设计与制作网页设计与制作网页设计与制作HTMLHTM

7、LHTMLHTML简单教程简单教程简单教程简单教程HEAD元素元素2元素元素 元素下面可以插入很多很有用的元素属性。下面介绍四种：1、作用：用来标记搜索引擎在搜索你的页面时所取出的关键词。2、作用：用来标记文档的作者 注：注：ContentContent属性表示刷新或跳转的开始时间，属性表示刷新或跳转的开始时间，URLURL属性表示跳转网址属性表示跳转网址上例说明，上例说明，5 5秒后跳转到指定网页秒后跳转到指定网页关键字关键字值作者作者的名称网页设计与制作网页设计与制作网页设计与制作网页设计与制作HTMLHTMLHTMLHTML简单教程简单教程简单教程简单教程4、作用：确定如何显示要加载的数

8、据。5、作用：用来自动刷新网页注：在学习网页设计的初期可以暂时不设置元素网页设计与制作网页设计与制作网页设计与制作网页设计与制作HTMLHTMLHTMLHTML简单教程简单教程简单教程简单教程练习（3.HTML）编写一个网页，要求3秒钟后自动跳转到校网主页。my first page 三秒钟后本网页将自动跳转到华东理工大学首页 网页设计与制作网页设计与制作网页设计与制作网页设计与制作HTMLHTMLHTMLHTML简单教程简单教程简单教程简单教程 元素表明是HTML文档的主体部分。在与之间的内容会出现在浏览器中，通常都会有很多其它元素；这些元素和元素属性构成HTML文档的主体部分。HTML结构

9、标签BODY元素中有下列元素属性：1、bgcolor1）设置页面的背景颜色。如：。2）设置字体颜色如：注：HTML使用16进制的RGB颜色值对颜色进行控制。16 进制的数码有:0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.颜色颜色名和RGB值黑色Black=”#000000”银色Silver=”#c0c0c0”红色Red=”#ff0000”蓝色Blue=”#0000ff”白色White=”#ffffff”黄色Yellow=”ffff00”绿色Green=”#00ff00”海蓝色Aqua=”#00ffff”常见颜色的代码网页设计与制作网页设计与制作网页设计与制作网页设计与制作HTMLHTMLHTMLHTML简单教程简单教程简单教程简单教程3、bgproperties=fixedbgproperties=fixed使背景图片成水印效果，即图片不随着滚动条的滚动而滚动。2、background设置背景图片。如：可以使用的图片格式为GIF，JPG例：05.htm、06.htm4、text 设置文档的正文文字颜色，如Text元素定义的颜色将用于整个文档。5、link、alink、vlink、hover超级链接有四种状态Link：初始状态 alink：鼠标点击时状态（活动链接）hover:鼠标悬停 vlink：访问过的链接例：