HTML基本标记和网站链接.ppt
合集下载
html讲解ppt
<html>
<head> <title>标题</title>
</head>
<body> <h1>这是标题 1</h1> <h2>这是标题 2</h2> <h3>这是标题 3</h3> <h4>这是标题 4</h4> <h5>这是标题 5</h5> <h6>这是标题 6</h6>
</body>
</html>
实例
<html> <head> <title>设置页面背景</title> </head> <body bgcolor="blue"> </body>
</html>
text属性
• 设置页面中文字显示的颜色 • 可以使用颜色单词，也可以使用十六进制 颜色值
实例
<html> <head>
<title>设置页面背景</title> </head> <body bgcolor="blue" text="white"> 页面文字颜色 </body> </html>
属性
属性
• 在标记和属性之间有个空格（如果有一个 或多个已存在的属性，就与前一个属性之 间有一个空格） • 属性后面紧跟着一个“=”符号. •有一个属性值，由一对双引号“ ”括起来
html课件-第3章 网页元素标记PPT教学课件
2020/12/11
2
➢HTML文档基本结构
包括HEAD、TITLE、BODY三部分，下面是基本结构： <HTML> <HEAD> <title>标题部分</title> </HEAD> <BODY> 正文部分 </BODY>
</HTML>
2020/12/11
3
Html.htm
➢HTML文档基本标记
▪ 用法：<Meta name=“Keywords” Content=“关 键词1,关键词2,关键词3,关键词4,……”> 2、Description (简介) 用法：<Meta name="Description" Content=" 你网页的简述">
2020/12/11
14
▪ <html>
▪ <head>
▪ 1、<Meta http-equiv=“Content-Type” Content=“text/html; Charset=gb2312”>(显示字符 集的设定)
2、<Meta http-equiv=“Refresh” Content=“30”> <Meta http-equiv=“Refresh” Content=“5;Url=”>(设 置网页刷新时间）
▪。
2020/12/11
6
3.1.2 基底网址标记<BASE>
▪ <BASE>标记可以设定URL地址，一般用 来设定浏览器中文件的绝对路径，然后在 文件中只需写下文件的相对位置，在浏览 器中浏览的时候这些位置会自动附加在绝 对路径后面，成为完整路径。
html标签ppt
• 我们所看到的网页，其实都是HTML代码通过浏览器 翻译过来的
• 我们所要了解的，就是知道网页中我们看到的元素和 HTML代码的一一对应关系,并能手写简单的页面
HTML文档的编写方法
1. 手工直接编写
– 记事本等，存成.htm .html格式
• 使用可视化HTML编 辑 器
– Frontpage、Dreamweaver等
网页设计之HTML
主要内容
• 第一课目标：HTML简介，HTML语言的标记 语法和文档结构，介绍常用标签（文字，图片， 表格）
• 第二课目标：表单，层，框架,CSS标签的介 绍
HTML第一课目标
1． HTML简介 2． HTML语言的标记语法和文档结构 3． 介绍常用标签（文字，图片，表格）及其 属性 4. 手动编写简单的网页
第一张网页
<html> <head> <title>第一张网页</title> </head> <body> 欢迎光临我的主页！ </body>
</html>
基本组成部分—— HTML元素属性
• HTML元素可以有自己的相关属性，每一个属 性还可以由我们网页编制者赋一定的值。元素 属性出现在元素的< >内，并且和元素名之间 有一个空格分隔；属性值用“”引起来。
第二张网页
<html> <head> <title>第一张网页</title> </head> <body> <p align="center">欢迎光临我的主页!</p> </body>
• 我们所要了解的，就是知道网页中我们看到的元素和 HTML代码的一一对应关系,并能手写简单的页面
HTML文档的编写方法
1. 手工直接编写
– 记事本等，存成.htm .html格式
• 使用可视化HTML编 辑 器
– Frontpage、Dreamweaver等
网页设计之HTML
主要内容
• 第一课目标：HTML简介，HTML语言的标记 语法和文档结构，介绍常用标签（文字，图片， 表格）
• 第二课目标：表单，层，框架,CSS标签的介 绍
HTML第一课目标
1． HTML简介 2． HTML语言的标记语法和文档结构 3． 介绍常用标签（文字，图片，表格）及其 属性 4. 手动编写简单的网页
第一张网页
<html> <head> <title>第一张网页</title> </head> <body> 欢迎光临我的主页！ </body>
</html>
基本组成部分—— HTML元素属性
• HTML元素可以有自己的相关属性，每一个属 性还可以由我们网页编制者赋一定的值。元素 属性出现在元素的< >内，并且和元素名之间 有一个空格分隔；属性值用“”引起来。
第二张网页
<html> <head> <title>第一张网页</title> </head> <body> <p align="center">欢迎光临我的主页!</p> </body>
HTML基础ppt课件
表示链接一个外部CSS文件default.css如下: <link href="default.css" rel="stylesheet" type="text/css“ />
15
2.1 head容器的标记
3．meta元素 格式：
<meta name="text" http-equiv="text" content="text“ />
第1章 HTML基础
1
第1章 HTML基础
1 HTML文档结构 2 HTML基本标记的使用 3 超链接标记 4 HTML表格 5 HTML表单
2
1 HTML文档结构
在互联网中传送的文档，绝大部分使 用超文本标记语言编写，这些文档称为 HTML文档。
在基本HTML文档中，只允许两种元 素存在：一种是HTML标记，另一种则是 普通文本。
18
2.1 head容器的标记
5．script元素 格式：
<script type=“text/javascript”> 脚本语言代码段
3
1 HTML文档结构
HTML文档的组成结构如下：
4
1 HTML文档结构
一个完整的HTML文档通常由以下三部分组成：
1．HTML标记 格式：<html> … </html>
2．头部信息 格式：<head> … </head>
3．文本主体 格式：<body> … </body>
5
1 HTML文档结构
11
2.1 head容器的标记
15
2.1 head容器的标记
3．meta元素 格式：
<meta name="text" http-equiv="text" content="text“ />
第1章 HTML基础
1
第1章 HTML基础
1 HTML文档结构 2 HTML基本标记的使用 3 超链接标记 4 HTML表格 5 HTML表单
2
1 HTML文档结构
在互联网中传送的文档，绝大部分使 用超文本标记语言编写，这些文档称为 HTML文档。
在基本HTML文档中，只允许两种元 素存在：一种是HTML标记，另一种则是 普通文本。
18
2.1 head容器的标记
5．script元素 格式：
<script type=“text/javascript”> 脚本语言代码段
3
1 HTML文档结构
HTML文档的组成结构如下：
4
1 HTML文档结构
一个完整的HTML文档通常由以下三部分组成：
1．HTML标记 格式：<html> … </html>
2．头部信息 格式：<head> … </head>
3．文本主体 格式：<body> … </body>
5
1 HTML文档结构
11
2.1 head容器的标记
HTML代码简介 PPT课件
• <a href=“” target=_blank title="新浪站点链接"> 新浪站点链接</a>
• </body>
• </html>
显示结果
1.25
© 2009
HTML代码简介
• 链接到email地址 • 在网站中，你经常会看到“联系我们”
的链接，一点击这个链接，就会触发你 的邮件客户端，比如Outlook Express， 然后显示一个新建mail的窗口。用<a>可 以实现这样的功能。
பைடு நூலகம்
1.26
© 2009
HTML代码简介
• <html>
• <body>
• <a href="biaoti.htm">这是一个链接 </a><br>
• <a href="" target=_blank title="新浪站点链接">新浪站 点链接</a>
• <a href = "mailto:info@">联系新 浪</a>
HTML代码简介
HTML注释
• 在HTML文件里，你可以写代码注释，解 释说明你的代码，这样有助于你和他人 日后能够更好地理解你的代码。
• 注释可以写在<!--和-->之间。浏览器是 忽略注释的，你不会在HTML正文中看到 你的注释。
• <!-- This is a comment -->
1.15
HTML绝对路径(Absolute Path)
HTML基础知识及相关标签的用法27页PPT
任务三 认识HTML标签
行的控制
段(Paragraph) (可以看作是空行) <p></p> 换行 <br> 空白占位符
实例：d.html
陕西新华电脑软件学校-电子商务教研组 ©版权所有
21
任务三 认识HTML标签
标尺线
<hr size = #>：设定线宽 <hr width=#>：设定线长 <hr align=#>：设定对齐方式 #=left, right <hr color=#> ：设定线的颜色
6
任务二 HTML基本语法
HTML标签格式
格式一 <标签名>内容</标签名> 格式二 <标签名 属性名="属性值">内容</标签名> 格式三
<标签名/>
陕西新华电脑软件学校-电子商务教研组 ©版权所有
7
任务三 认识HTML标签
HTML基本结构
<html> <head> <title></title> <meta/> </head> <body> HTML 文件的正文</ body > </html >
11
任务三 认识HTML标签
<meta>元素
用来标记文档的作者 <meta name="author" content=“your name"> 用来标记你的页面的解码方式 <meta http-equiv=“Content-Type”
HTML网页设计基础PPT
软件开发过程—说明
描述了什么时候、什么人、做什么事以及怎 样实现某一特定的目标。RUP采用以下四 个基本模型元素，组织和构造系统开发过 程： Workers: the who Activities: the how Artifacts: the what Workflows: the when
“网页”视图：根据具体需要以及想要如何查 看和处理网页，可以从四种不同类型的“网页” 视图中进行选择。 “设计”视图：可以在默认的“网页”视图 （“设计”视图）中设计和编辑网页。使用设 计工具创建网页时，此视图提供了近似于所见 即所得的创作体验。 “代码”视图 您可以亲自查看、编写和编辑 HTML 标记。通过 FrontPage 中的优化代码功 能，可以创建清洁的 HTML，并且更易于删除 任何不需要的代码。
3.4.2 网页制作基础 1．利用模板创建网页 2．网页内容的输入 3．网页内容的修饰 4．设置编号与项目符号 5．插入图片 6．设置网页属性
3.4.3 插入表格 3.4.4 设置超级链接 3.4.5 表单网页制作 1．表单的插入 2．插入各种表单域 3．设置表单属性
制作一个网站
要求： 1、20页以上（包含20页） 2、有一个主题，例如足球世界、鲜花世界等 3、每个页面必须都被超链接寻找到 4、每个页面上都使用至少一个表格、一张图片 5、主页要有Logo、版权、联系方法、电子邮件 的超链接等 6、页面美观大方，色彩自然 7、要有详细的文档
编码规范
文件夹结构设置
第3章 HTML网页设计 基础
3.1 认识和使用HTML 3.2 HTML常用标记 3.3 HTML表单标记 3.4 用 FrontPage设计HTML
HTML语言基础PPT演示课件
3.3.2 图像标记
我们要可以在页面中插入一些漂亮的图像，使文章图文并茂，如何在Web页面上插入图像呢？
它的语法格式为： <img src=图像的URL地址>
[例]
<html> <head> <title>例3-12</title> </head> <body> <img src=picture1.jpg align=left alt=风景 height=165 width=200>插入一个图像 <br><p><a href="picture2.jpg">单击这里可以看到一个图像</a></p> <a href="music.mp3">单击这里可以欣赏音乐</a> </body> </html>
字体标记符的 COLOR 属性可用来控制文字的颜色，使用方法与正文标记符<BODY> 中使用的 BGCOLOR 属性相同。face 属性
face 属性用来指定字体样式。在这个属性中用户可以指定一个或几个字体名称 [例3-5] 字体设置
<html> <head> <title>例3-5</title> </head> <body> <font size=7 color=red>这是7号字体</font> <font size=5 color=blue>这是5号字体</font> <font size=3 color=yellow>这是3号字体</font> <font size=2 color=red>这是２号字体</font> </body> </html>
我们要可以在页面中插入一些漂亮的图像，使文章图文并茂，如何在Web页面上插入图像呢？
它的语法格式为： <img src=图像的URL地址>
[例]
<html> <head> <title>例3-12</title> </head> <body> <img src=picture1.jpg align=left alt=风景 height=165 width=200>插入一个图像 <br><p><a href="picture2.jpg">单击这里可以看到一个图像</a></p> <a href="music.mp3">单击这里可以欣赏音乐</a> </body> </html>
字体标记符的 COLOR 属性可用来控制文字的颜色，使用方法与正文标记符<BODY> 中使用的 BGCOLOR 属性相同。face 属性
face 属性用来指定字体样式。在这个属性中用户可以指定一个或几个字体名称 [例3-5] 字体设置
<html> <head> <title>例3-5</title> </head> <body> <font size=7 color=red>这是7号字体</font> <font size=5 color=blue>这是5号字体</font> <font size=3 color=yellow>这是3号字体</font> <font size=2 color=red>这是２号字体</font> </body> </html>
第三章HTML5基本标签PPT资料49页
article元素
• article元素最<a容rt易ic跟les>ection和div容易混淆， 其实article代<h表1>一一个篇在文文章档</，h1页> 面或者网站 中自成一体的<内p>容文，章其内目容的..是</为p>了让开发者独
立开发或重用<。fo譬ot如er论> 坛的帖子，博客上的文
• section通常还带标<a题rt，ic虽l然e>html5中section会自动给标题h1-h6降 级，但是最好手动<给h2他>关们于降级se。ct如i下on：</h2>
• 示例代码sectio<n使p>用se注ct意i：on的介绍</p> • 一张页面可以用<sescetcitoino划n分> 为简介、文章条目和联系信息。不过在
2
文件结构
属性：标记通过属性来精确控制信息，以便制作出各种效果。
<标记 属性１＝属性值 属性２＝属性值…>内容</标记>
并不是每个标记都有属性。 可以根据需要使用标记的所有属性或几个属性，属性之间没 有顺序。 属性和标记一样，也不区分大小写。
3
② HTML5基本框架
<html>
文件结构
<head>
章，一篇用户<的p>评论，一个互动的widget小工
具
版权：html5jscss网所属，作
者：XXX
• 除了它的内容<，/pa>rticle会有一个标题（通常 会在header里<）/f，oo会te有r>一个footer页脚。
</article>