HTML文档的基本结构.ppt
上传者：jiaoyuan2014
2022-06-26 02:10:44上传
PPT文件
280 KB
HTML
HTML文档的基本结构
文字和段落
超级链接标志
图像、背景与颜色标志
表格标志
动态HTML
1
HTML初步
超文本标记语言HTML是生成WWW网页文件的语言，用以生成超文本文档。在文档中，可以加入任何元素（文本、图像、动画和声音等）的链接
使用浏览器浏览的网页就是HTML文档
通常是使用记事本作为HTML文档的编辑器，利用浏览器浏览文档效果
2
HTML语言基础
HTML只是标记语言，基本上只要明白了各种标记的用法，就学懂了HTML
标记的写法：
标记由：<> 括号包围的元素组成，如<TITLE>
标记的表示：起始标记<TITLE>，结束标记</TITLE>
标记中加属性和参数
参数只能加在起始标记中
<font size="5">Hello</font>
标记字母大小写无关
3
HTML文档中的标记
大多数标志都是成对出现的，
起始标志（如<HEAD>）和结束标记（如</HEAD>）
在起始标记和结束标记之间，放入网页元素
如：文本、图片、超级链接等
<p> welcome to you </p>
所有的HTML文档内容都是由
起始标记<HTML>和结束标记</HTML>包围起来的
4
HTML文档的基本结构
<HTML>
<HEAD>
<TITLE>文档标题</TITLE>
</HEAD>
<BODY>
文档的正文内容
</BODY>
</HTML>
网页文件格式： 表示是HTML文档
文档头，可加入：网页标题、作者信息、版本信息
正文区，放置网页中所显示信息的标志和属性
网页标题：<TITLE>…</TITLE>加在<HEAD>中
注释： <!--…-->加在<HEAD>中
两个减号，注释中加入作者信息或版本信息，浏览时不显示出来
5
简单的HTML文档
<HTML>
<HEAD>
<TITLE>李小龙的主页</TITLE>
<!– version number=“1.0” -->
</HEAD>
<BODY>
欢迎访问我的主页!
</BODY>
</HTML>
6
输入和保存HTML文档
打开“记事本”编辑器，输入要编辑的HTML语言代码
输入完毕后，保存HTML文档
菜单[文件]→[保存]/[另存为]
“保存类型”选择“所有文件”
在“文件名”框中输入：myhtml.htm，注意：扩展名(.htm)一定不能省略
用IE打开网页文件：myhtml.htm
打开HTML文档
记事本中选择“所有文件”类型，打开文件
浏览器中选择菜单[查看]→[源文件]
源文件
7
BODY中的标记和属性
<BODY>标记中放置要在浏览器中所显示信息的所有标记和属性
标记中间可以放置：文字、段落、图像、表格、超级链接、框架等
在标记中设置属性，主要是对标记进行补充说明
8
文字标题标记
标题能分隔大段文字，使得网页显示的内容结构清晰。
共有六级标题：H1～H6，从大到小。
<H1></H1> , … , <H6></H6>
对齐方式：设置标题的对齐属性。三个属性：
ALIGN=Left、ALIGN=Center、ALIGN=right
实例：<h1 align=center>欢迎访问我的主页</h1>
<h2>Welcome to everybody!</h2>
9
文字段落<P>及换行<BR>
文字段落标记：<P>…</p>
换行标记：<BR> 不成对出现，不用结束标记
在指定位置分行，但不另起段落
实例：<P>Despite the fact:<br>在指定位置分行，但不另起段落</p>
<HTML>
<P>这是一个小小的段落</P>
<p>这是另一个小段落</P>
<HTML>
10
HTML文档的基本结构
文字和段落
超级链接标志
图像、背景与颜色标志
表格标志
动态HTML
1
HTML初步
超文本标记语言HTML是生成WWW网页文件的语言，用以生成超文本文档。在文档中，可以加入任何元素（文本、图像、动画和声音等）的链接
使用浏览器浏览的网页就是HTML文档
通常是使用记事本作为HTML文档的编辑器，利用浏览器浏览文档效果
2
HTML语言基础
HTML只是标记语言，基本上只要明白了各种标记的用法，就学懂了HTML
标记的写法：
标记由：<> 括号包围的元素组成，如<TITLE>
标记的表示：起始标记<TITLE>，结束标记</TITLE>
标记中加属性和参数
参数只能加在起始标记中
<font size="5">Hello</font>
标记字母大小写无关
3
HTML文档中的标记
大多数标志都是成对出现的，
起始标志（如<HEAD>）和结束标记（如</HEAD>）
在起始标记和结束标记之间，放入网页元素
如：文本、图片、超级链接等
<p> welcome to you </p>
所有的HTML文档内容都是由
起始标记<HTML>和结束标记</HTML>包围起来的
4
HTML文档的基本结构
<HTML>
<HEAD>
<TITLE>文档标题</TITLE>
</HEAD>
<BODY>
文档的正文内容
</BODY>
</HTML>
网页文件格式： 表示是HTML文档
文档头，可加入：网页标题、作者信息、版本信息
正文区，放置网页中所显示信息的标志和属性
网页标题：<TITLE>…</TITLE>加在<HEAD>中
注释： <!--…-->加在<HEAD>中
两个减号，注释中加入作者信息或版本信息，浏览时不显示出来
5
简单的HTML文档
<HTML>
<HEAD>
<TITLE>李小龙的主页</TITLE>
<!– version number=“1.0” -->
</HEAD>
<BODY>
欢迎访问我的主页!
</BODY>
</HTML>
6
输入和保存HTML文档
打开“记事本”编辑器，输入要编辑的HTML语言代码
输入完毕后，保存HTML文档
菜单[文件]→[保存]/[另存为]
“保存类型”选择“所有文件”
在“文件名”框中输入：myhtml.htm，注意：扩展名(.htm)一定不能省略
用IE打开网页文件：myhtml.htm
打开HTML文档
记事本中选择“所有文件”类型，打开文件
浏览器中选择菜单[查看]→[源文件]
源文件
7
BODY中的标记和属性
<BODY>标记中放置要在浏览器中所显示信息的所有标记和属性
标记中间可以放置：文字、段落、图像、表格、超级链接、框架等
在标记中设置属性，主要是对标记进行补充说明
8
文字标题标记
标题能分隔大段文字，使得网页显示的内容结构清晰。
共有六级标题：H1～H6，从大到小。
<H1></H1> , … , <H6></H6>
对齐方式：设置标题的对齐属性。三个属性：
ALIGN=Left、ALIGN=Center、ALIGN=right
实例：<h1 align=center>欢迎访问我的主页</h1>
<h2>Welcome to everybody!</h2>
9
文字段落<P>及换行<BR>
文字段落标记：<P>…</p>
换行标记：<BR> 不成对出现，不用结束标记
在指定位置分行，但不另起段落
实例：<P>Despite the fact:<br>在指定位置分行，但不另起段落</p>
<HTML>
<P>这是一个小小的段落</P>
<p>这是另一个小段落</P>
<HTML>
10
HTML文档的基本结构
