超文本标记语言HTML .ppt
合集下载
html超文本标记语言
2/55
概述
二、HTML的基本语法
1、HTML的元素与标签 基本形式：<元素名>内容</元素名> 说明：尖括号间的标记用于确定超文本在浏览器中的 显示方式和内容。 也有些元素，如<hr>，不需要</hr>，不对文档中的某 个部分起作用，只是用来提供给浏览器的一种显示方式。 也有些元素具有属性，属性值可以更准确的描述浏览 器的显示方式。如： <hr align=“center” color=“green” size=“10” noshade>
四、网页内部的链接
当网页比较长时，可以网页内部建立链接，使得可以快速 跳转。有时需要跳转到另外一张网页时，也需要直接到达 该网页的内部。 做法： 1、利用<a>标记符的name属性，建立目标锚点 2、利用<a>标记符的href属性，建立链接
26/55
HTML页的链接
that.htm文件
<html> <body> <a name="#top">标题</a><p> 这是一些无关的内容!<p>这是一些无关的内容!<p>这是一些无关的内容!<p> 这是一些无关的内容!<p>这是一些无关的内容!<p>这是一些无关的内容!<p> 这是一些无关的内容!<p>这是一些无关的内容!<p>这是一些无关的内容!<p> 这是一些无关的内容!<p>这是一些无关的内容!<p>这是一些无关的内容!<p> 这是一些无关的内容!<p>这是一些无关的内容!<p>这是一些无关的内容!<p> 这是一些无关的内容!<p>这是一些无关的内容!<p>这是一些无关的内容!<p> 这是一些无关的内容!<p>这是一些无关的内容!<p>这是一些无关的内容!<p> <a name="#point">锚点</a><p> <a href="a">回到标题</a> </body> </html>
概述
二、HTML的基本语法
1、HTML的元素与标签 基本形式：<元素名>内容</元素名> 说明：尖括号间的标记用于确定超文本在浏览器中的 显示方式和内容。 也有些元素，如<hr>，不需要</hr>，不对文档中的某 个部分起作用，只是用来提供给浏览器的一种显示方式。 也有些元素具有属性，属性值可以更准确的描述浏览 器的显示方式。如： <hr align=“center” color=“green” size=“10” noshade>
四、网页内部的链接
当网页比较长时，可以网页内部建立链接，使得可以快速 跳转。有时需要跳转到另外一张网页时，也需要直接到达 该网页的内部。 做法： 1、利用<a>标记符的name属性，建立目标锚点 2、利用<a>标记符的href属性，建立链接
26/55
HTML页的链接
that.htm文件
<html> <body> <a name="#top">标题</a><p> 这是一些无关的内容!<p>这是一些无关的内容!<p>这是一些无关的内容!<p> 这是一些无关的内容!<p>这是一些无关的内容!<p>这是一些无关的内容!<p> 这是一些无关的内容!<p>这是一些无关的内容!<p>这是一些无关的内容!<p> 这是一些无关的内容!<p>这是一些无关的内容!<p>这是一些无关的内容!<p> 这是一些无关的内容!<p>这是一些无关的内容!<p>这是一些无关的内容!<p> 这是一些无关的内容!<p>这是一些无关的内容!<p>这是一些无关的内容!<p> 这是一些无关的内容!<p>这是一些无关的内容!<p>这是一些无关的内容!<p> <a name="#point">锚点</a><p> <a href="a">回到标题</a> </body> </html>
《HTML页面与表格》PPT课件
HTML文档
• HTML页面的基本结构 • 起始标记 • 文件头
襄樊1软22 0件2学1/院4/23
你的潜力，我们的动力！
HTML页面的基本结构
基本结构
起始标记 网页标题
文件主体
<Html> <Head> 网页的标题和属性 </Head> <Body> 文件主体 </Body>
</Html>
襄樊1软23 0件2学1/院4/23
原理： 在欲链接处做个记号 链接时就寻找个这记号
▪ 内部链接就是网页中的书签
格式
<a Name=”书签名称”>书签内容</a>
襄樊2软21 0件2学1/院4/23
你的潜力，我们的动力！
内部链接实例
例如，先定义一个标签a，然后找到“标 签名”这个标签，就可编写如下代码：
<a name=”标签a”>书签内容</a> <a Href=”#标签a”>单击此处监视浏览器调到“标签a”处</a>
你的潜力，我们的动力！
网页基础知识
统一资源定位器——URL （Uniform Resource Locator）
• URL包括传送协议，服务器名称、文件的完整路径 例如：/index.html 其中http://是传送协议 是服务器名称 index.html 是文件的完整路径
</Body>
襄樊2软26 0件2学1/院4/23
你的潜力，我们的动力！
有通栏的表格
1．有横向通栏的表格用<td colspan=#>属性说 明
以像素为单位 #代表通栏占据的网格数
HTML5介绍ppt课件
什么是HTML5？
◆HTML5 将成为 HTML、 XHTML 以及 HTML DOM 的 新标准。
◆ HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。
◆ HTML5 仍处于完善之中。然 而，大部分现代浏览器已经具 备了某些 HTML5 支持
发展趋 势
HTML5将成
<input type=datetime-local>datetimelocal<br/>
<input type=email>email<br/> <input type=number>numbrt<br/> <input type=range>range<br/> <input type=time>time<br/> <input type=tel>tel<br/> <input type=url>url<br/> <input type=week>week</br>
为20主13年流全球有
10亿手机浏览器 支持HTML5。 HTML5将成为 未来5-10年内， 移动互联网领域 的主宰者。
移动优先
从如今移动应用层 出不穷，在这个智 能手机和将平板电 脑大爆炸的时代， 移动优先已成趋势， 不管是开发什么，
游戏开发者
引领许多游戏开发商都
被Facebook或者 Zynga推动着发展， 而未来的 Facebook应用生 态系统是基于 HTML5的.
Welcome to HTML 5
1
简介+趋 势
优势 & 略势
html超文本标记语言
Html教程（1）什么是HTML文件？∙HTML的英文全称是Hypertext Marked Language，中文叫做“超文本标记语言”。
∙和一般文本的不同的是，一个HTML文件不仅包含文本内容，还包含一些Tag，中文称“标记”。
∙一个HTML文件的后缀名是.htm或者是.html。
∙用文本编辑器就可以编写HTML文件。
这就试写一个HTML文件吧！打开你的Notepad，新建一个文件，然后拷贝以下代码到这个新文件，然后将这个文件存成first.html。
<html><head><title>Title of page</title></head><body>This is my first homepage. <b>This text is bold</b></body></html>要浏览这个first.html文件，双击它。
或者打开浏览器，在File菜单选择Open，然后选择这个文件就行了。
示例解释这个文件的第一个Tag是<html>，这个Tag告诉你的浏览器这是HTML文件的头。
文件的最后一个Tag是</html>，表示HTML文件到此结束。
在<head>和</head>之间的内容，是Head信息。
Head信息是不显示出来的，你在浏览器里看不到。
但是这并不表示这些信息没有用处。
比如你可以在Head信息里加上一些关键词，有助于搜索引擎能够搜索到你的网页。
在<title>和</title>之间的内容，是这个文件的标题。
你可以在浏览器最顶端的标题栏看到这个标题。
在<body>和</body>之间的信息，是正文。
在<b>和</b>之间的文字，用粗体表示。
<b>顾名思义，就是bold的意思。
超文本标记语言
表格元素
表单元素 超链接元素
TABLE,TR,TD,TH,CAPTION
FORM,INPUT,SELECT,OPTION,TEXTAREA A,MAP,AREA
字符格式元素
帧元素 图片元素 层元素 脚本元素 内嵌对象元素
FONT,B,I,U,S等
FRAMESET,FRAME,NOFRAME,IFRAME IMG DIV,SPAN,LAYER,ILAYER SCRIPT APPLET,OBJECT,PARAM,EMBED
要链接到上一级目录中文件,则先输入"../",再输入文件名.
相对路径示例
相对路径名 href="abc.htm" 含义 abc.htm 是本地当前路径下的文件 abc.htm 是本地当前路径下web子目 录下的文件
href="web/abc.htm "
href="../ abc.htm " href="../../ abc.htm "
作用：设置字符的颜色、大小和字体。
(1) 格式:
<font face=值1 size=值2 color=值3> …… </font>
(2) 属性
属性
face size color
功能
设置文字字体 设置文字的大小 设置文字的颜色
默认值
宋体 3 黑色
(3) 说明
如果系统中没有face属性所指定的字体,则使用默认字体; size属性的取值为1~7;也可以用"+n"或"-n"来设定字号的 相对值; color属性的值为：rgb颜色("#rrggbb").
第8章 超文本标记语言HTML与静态网页设计
从服务器下载文件 ; 如果该文件是一个 HTML文件 ,则翻译该文件中的 HTML代码 ; 对代码表示的内容格式化 ,并显示格式化后的内容 ; 如果该文件还包含图像及其他类型文件的链接 ,则处理相应的图 像和文件的内容 .
Slide 8-6
第 8章 超文本标记语言 HTML与静态网页设计
8.1 HTML简介 (Cont.)
Slide 8-17
第 8章 超文本标记语言 HTML与静态网页设计
8.2 文字版面编辑 (Cont.)
例 :
<html> <head> <title>测试强制不换行标签</title> </head> <body> 春夜喜雨<br> <p>好雨知时节，当春乃发生。随风潜入夜，润物细无声。</p> <p align=left> 好雨知时节，当春乃发生。随风潜入夜，润物细无声。</p> <p align=center>好雨知时节，当春乃发生。随风潜入夜，润物细无声。</p> <p align=right>好雨知时节，当春乃发生。随风潜入夜，润物细无声。</p> </body> </html>
Slide 8-8
第 8章 超文本标记语言 HTML与静态网页设计
8.1 HTML简介 (Cont.)
4. 网页技术概况 静态网页 无论何时何地浏览都以相同的画面显示.用户只能浏览,不 能向网站提供信息让网站响应用户的请求. 例如 : HTML,CSS 动态网页 让网页按照用户的请求做出动态响应. JavaScript/VBScript,ASP等 网页美工 处理网页素材的技术. 例如 :Flash,Fireworks等
Slide 8-6
第 8章 超文本标记语言 HTML与静态网页设计
8.1 HTML简介 (Cont.)
Slide 8-17
第 8章 超文本标记语言 HTML与静态网页设计
8.2 文字版面编辑 (Cont.)
例 :
<html> <head> <title>测试强制不换行标签</title> </head> <body> 春夜喜雨<br> <p>好雨知时节，当春乃发生。随风潜入夜，润物细无声。</p> <p align=left> 好雨知时节，当春乃发生。随风潜入夜，润物细无声。</p> <p align=center>好雨知时节，当春乃发生。随风潜入夜，润物细无声。</p> <p align=right>好雨知时节，当春乃发生。随风潜入夜，润物细无声。</p> </body> </html>
Slide 8-8
第 8章 超文本标记语言 HTML与静态网页设计
8.1 HTML简介 (Cont.)
4. 网页技术概况 静态网页 无论何时何地浏览都以相同的画面显示.用户只能浏览,不 能向网站提供信息让网站响应用户的请求. 例如 : HTML,CSS 动态网页 让网页按照用户的请求做出动态响应. JavaScript/VBScript,ASP等 网页美工 处理网页素材的技术. 例如 :Flash,Fireworks等
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>
精选第01讲超文本标记语言HTML资料
2019/7/4
超文本标记语言-HTML
2
Softeem Consultancy Service
统一资源定位器——URL
• URL（UniformResourceLocation）即统一资源定位器，它 指出了文件在Internet中的位置。URL由协议名、Web服 务器地址、文件在服务器中的路径（即目录）和文件名 四部分构成。例如，http： ///intl/cn/index.html。
Softeem Consultancy Service
超文本标记语言-HTML
ID:SCSC007-HTML,CSS,JS
Softeem Consultancy Service
超文本标记语言-HTML
• HTML概念 • HTML页面的基本框架 • HTML常用格式标签 • 图像标签<IMG> • 列表标签 • 表格标签 • HTML超链接 • 框架 • 表单
• 其中http：//是协议名，表示文件的运行是遵循超文本 传输协议的。是Web服务器的地址， /intl/cn是文件所在的目录，index.html则是文件名。
2019/7/4
超文本标记语言-HTML
3
Softeem Consultancy Service
超文本标语语言——HTML
2019/7/4
超文本标记语言-HTML
11
Softeem Consultancy Service
常用的图像文件格式
– 网页中常用的图像文件格式： • GIF–颜色数不超过256色，可用于动画或透明背 景的图像。 • JPG–适用于颜色丰富或渐变色较多的图像文件， 但不可以做成动画。
2019/7/4
2019/7/4