网页制作HTML代码教程
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1.12
HTML代码简介
• <html< • <body< • <!--这是代码注释--< • <p<代码注释是不会显示在网页里的。 </p< • </body< • </html<
1.13
HTML代码简介
加入水平线 • 用<hr<这个Tag可以在HTML文件里加一 条横线 • <Hr<没有结束标签
1.19
HTML代码简介
• 链接的title属性 • 使用 链接的title 属性，可以让鼠标悬停 在超链接上的时候，显示该超链接的文 字注释。
1.3
HTML代码简介
正文标题
• HTML用<h1<到<h6<这几个Tag来定义 正文标题，从大到小。每个正文标题自 成一段。
1.4
HTML代码简介
• • • • • • • • • •
1.5
<html< <body< <h1<这是1号标题</h1< <h2<这是2号标题</h2< <h3<这是3号标题</h3< <h4<这是4号标题</h4< <h5<这是5号标题</h5< <h6<这是6号标题</h6< </body< </html<
HTML代码简介
HTML 开发
•HTML 标记用于标记 HTML 文档的开始和结束
<HTML< . . . </HTML<
• HTML 标记的格式组成：
<ELEMENT ATTRIBUTE = value<
•值 - 分配给属性的内容 •属性 - 描述标记
1.1
•元素 - 标识标记
HTML代码简介
HTML 文档的结构
• 链接的target属性 • 使用链接的target属性，可以在一个新窗 口里打开链接文件。
1.18
HTML代码简介
• <html< • <body< • <a href="biaoti.htm"<这是一个链接 </a<<br< • <a href="" target=_blank <新浪站点链接</a< • </body< • </html<
1.14
HTML代码简介
• <html< • <body< • <p<村妇想像皇宫的生活：皇后得用金扁担挑水吧。 </p< • <hr< • <p<问：谁是世界上最可怜的人？答：炮兵连炊事班 战士！问：为什么？答：戴绿帽还给别人背黑锅</p< • </body< • </html<
HTML代码简介
• 段落划分 • 在HTML里用<p<和</p<划分段落,<P<可 以不成对出现。
1.6
HTML代码简介
段落标记
<HTML< <HEAD< <TITLE<欢迎使用 HTML</TITLE< </HEAD< <BODY BGCOLOR = lavender< <P<这会是一种很有趣的体验 <P< 另一个段落元素 </BODY< </HTML<
1.15
HTML代码简介
HTML利用超链接打开链接文件 • HTML用<a<</a<来表示超链接 • <a<</a<可以指向任何一个文件源：一个 HTML网页，一个图片，一个影视文件等 。用法如下： • <a href="url"<链接的显示文字</a< • 点击<a<</a<当中的内容，即可打开一 个链接文件，href属性则表示这个链接 文件的路径。
基本结构： HTML 部分 文档头部分 正文部分
<HTML< <HEAD< <TITLE<欢迎进入 HTML 世界</TITLE< </HEAD< <BODY< <P<这会是一种很有趣的体验</P< </BODY< </HTML<
运行结果
1.2
HTML代码简介
HTML头部信息(Head)
• HTML头部信息(head)里包含关于所在网页的 信息。头部信息(head)里的内容，主要是被浏 览器所用，不会显示在网页的正文内容里。 • 标题(title) • 标题(title)是最常用的head信息。它不显示在 HTML网页正文里，显示在浏览器窗口的标题 栏里。 • 示例代码如下： • <html< • <head<<title<HTML中文教程头部信息 </title<</head< • </html<
1.10
换行ห้องสมุดไป่ตู้记
HTML代码简介
<HTML< <HEAD< <TITLE<欢迎使用 HTML</TITLE< </HEAD< <BODY BGCOLOR = lavender< <P<这会是一种很有趣的<BR<体验 <P< 另一个段落元素 </BODY< </HTML<
1.11
HTML代码简介
HTML注释 • 在HTML文件里，你可以写代码注释，解 释说明你的代码，这样有助于你和他人 日后能够更好地理解你的代码。 • 注释可以写在<!--和--<之间。浏览器是忽 略注释的，你不会在HTML正文中看到你 的注释。 • <!-- This is a comment --<
右对齐
1.8
HTML代码简介
使用对齐属性修饰标题
• <html< • <body< • <h1 align="center"<这是标题</h1< • <p<上面的标题是居中显示的。</p< • </body< • </html<
1.9
HTML代码简介
换行
• 通过使用<br<这个Tag，可以在不新建 段落的情况下换行。<br<没有Closing Tag。 • 用<p<换行是个坏习惯，正确的是使用 <br<,即在行末加入<br<。
1.16
HTML代码简介
• <html< • <body< • <a href="biaoti.htm"<这是一个链接 </a<<br< • <a href=""<新浪 站点链接</a< • </body< • </html＞
1.17
HTML代码简介
1.7
HTML代码简介
使用对齐属性修饰段落
Left：左对齐 <HTML< Center：居中 <HEAD< Right：右对齐 <TITLE<学习HTML</TITLE< </HEAD< <BODY BGCOLOR=lavender< <P align = center<这会是一种很有趣的体验</P< </BODY< </HTML<
HTML代码简介
• <html< • <body< • <!--这是代码注释--< • <p<代码注释是不会显示在网页里的。 </p< • </body< • </html<
1.13
HTML代码简介
加入水平线 • 用<hr<这个Tag可以在HTML文件里加一 条横线 • <Hr<没有结束标签
1.19
HTML代码简介
• 链接的title属性 • 使用 链接的title 属性，可以让鼠标悬停 在超链接上的时候，显示该超链接的文 字注释。
1.3
HTML代码简介
正文标题
• HTML用<h1<到<h6<这几个Tag来定义 正文标题，从大到小。每个正文标题自 成一段。
1.4
HTML代码简介
• • • • • • • • • •
1.5
<html< <body< <h1<这是1号标题</h1< <h2<这是2号标题</h2< <h3<这是3号标题</h3< <h4<这是4号标题</h4< <h5<这是5号标题</h5< <h6<这是6号标题</h6< </body< </html<
HTML代码简介
HTML 开发
•HTML 标记用于标记 HTML 文档的开始和结束
<HTML< . . . </HTML<
• HTML 标记的格式组成：
<ELEMENT ATTRIBUTE = value<
•值 - 分配给属性的内容 •属性 - 描述标记
1.1
•元素 - 标识标记
HTML代码简介
HTML 文档的结构
• 链接的target属性 • 使用链接的target属性，可以在一个新窗 口里打开链接文件。
1.18
HTML代码简介
• <html< • <body< • <a href="biaoti.htm"<这是一个链接 </a<<br< • <a href="" target=_blank <新浪站点链接</a< • </body< • </html<
1.14
HTML代码简介
• <html< • <body< • <p<村妇想像皇宫的生活：皇后得用金扁担挑水吧。 </p< • <hr< • <p<问：谁是世界上最可怜的人？答：炮兵连炊事班 战士！问：为什么？答：戴绿帽还给别人背黑锅</p< • </body< • </html<
HTML代码简介
• 段落划分 • 在HTML里用<p<和</p<划分段落,<P<可 以不成对出现。
1.6
HTML代码简介
段落标记
<HTML< <HEAD< <TITLE<欢迎使用 HTML</TITLE< </HEAD< <BODY BGCOLOR = lavender< <P<这会是一种很有趣的体验 <P< 另一个段落元素 </BODY< </HTML<
1.15
HTML代码简介
HTML利用超链接打开链接文件 • HTML用<a<</a<来表示超链接 • <a<</a<可以指向任何一个文件源：一个 HTML网页，一个图片，一个影视文件等 。用法如下： • <a href="url"<链接的显示文字</a< • 点击<a<</a<当中的内容，即可打开一 个链接文件，href属性则表示这个链接 文件的路径。
基本结构： HTML 部分 文档头部分 正文部分
<HTML< <HEAD< <TITLE<欢迎进入 HTML 世界</TITLE< </HEAD< <BODY< <P<这会是一种很有趣的体验</P< </BODY< </HTML<
运行结果
1.2
HTML代码简介
HTML头部信息(Head)
• HTML头部信息(head)里包含关于所在网页的 信息。头部信息(head)里的内容，主要是被浏 览器所用，不会显示在网页的正文内容里。 • 标题(title) • 标题(title)是最常用的head信息。它不显示在 HTML网页正文里，显示在浏览器窗口的标题 栏里。 • 示例代码如下： • <html< • <head<<title<HTML中文教程头部信息 </title<</head< • </html<
1.10
换行ห้องสมุดไป่ตู้记
HTML代码简介
<HTML< <HEAD< <TITLE<欢迎使用 HTML</TITLE< </HEAD< <BODY BGCOLOR = lavender< <P<这会是一种很有趣的<BR<体验 <P< 另一个段落元素 </BODY< </HTML<
1.11
HTML代码简介
HTML注释 • 在HTML文件里，你可以写代码注释，解 释说明你的代码，这样有助于你和他人 日后能够更好地理解你的代码。 • 注释可以写在<!--和--<之间。浏览器是忽 略注释的，你不会在HTML正文中看到你 的注释。 • <!-- This is a comment --<
右对齐
1.8
HTML代码简介
使用对齐属性修饰标题
• <html< • <body< • <h1 align="center"<这是标题</h1< • <p<上面的标题是居中显示的。</p< • </body< • </html<
1.9
HTML代码简介
换行
• 通过使用<br<这个Tag，可以在不新建 段落的情况下换行。<br<没有Closing Tag。 • 用<p<换行是个坏习惯，正确的是使用 <br<,即在行末加入<br<。
1.16
HTML代码简介
• <html< • <body< • <a href="biaoti.htm"<这是一个链接 </a<<br< • <a href=""<新浪 站点链接</a< • </body< • </html＞
1.17
HTML代码简介
1.7
HTML代码简介
使用对齐属性修饰段落
Left：左对齐 <HTML< Center：居中 <HEAD< Right：右对齐 <TITLE<学习HTML</TITLE< </HEAD< <BODY BGCOLOR=lavender< <P align = center<这会是一种很有趣的体验</P< </BODY< </HTML<