常用HTML标记-PPT课件
合集下载
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基础知识及相关标签的用法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基础常识》课件
《HTML基础常识》PPT课 件
让我们一起来探索HTML的奥秘吧！
HTML是什么
HTML（超文本标记语言）是一种用于创建网页的标准标记语言，它使用标签来描述网页的结构和内容。
HTML的历史发展
HTML起源于1989年，经过多次版本更新和改进，成为现代Web开发的基础。HTML5引入了许多新特性和语义 元素。
HTML链接
使用<a>标签可以在网页之间创建链接，使用户可以轻松导航到其他页面或位置。
HTML表格
使用<table>标签以及相关的<tr>、<td>标签可以创建具有行和列的表格， 用于展示和组织数据。
HTML表单
通过<form>标签可以创建交互式的表单，用于用户提交数据。各种输入类型和验证规则可以通过不同的标签 来定义。
HTML元素与标签
HTML元素由开始标签和结束标签组成，标签用于定义元素的类型和含义。例 如，<p>标签用于定义段落。
HTML文本格式化
HTML提供了多种标签来格式化文本，如<b>加粗</b>、<i>斜体</i>和<u> 下划线</u&的HTML文档由<!DOCTYPE>声明、<html>元素、头部信息和主体 内容组成。
HTML图像
使用<img>标签可以插入图像到网页中，通过指定图像的URL或搜索查询， 可以显示具体的图片。
HTML音视频
HTML5引入了<audio>和<video>标签，可以直接在网页中嵌入音频和视频 内容，为用户提供丰富的多媒体体验。
HTML颜色与样式
让我们一起来探索HTML的奥秘吧！
HTML是什么
HTML（超文本标记语言）是一种用于创建网页的标准标记语言，它使用标签来描述网页的结构和内容。
HTML的历史发展
HTML起源于1989年，经过多次版本更新和改进，成为现代Web开发的基础。HTML5引入了许多新特性和语义 元素。
HTML链接
使用<a>标签可以在网页之间创建链接，使用户可以轻松导航到其他页面或位置。
HTML表格
使用<table>标签以及相关的<tr>、<td>标签可以创建具有行和列的表格， 用于展示和组织数据。
HTML表单
通过<form>标签可以创建交互式的表单，用于用户提交数据。各种输入类型和验证规则可以通过不同的标签 来定义。
HTML元素与标签
HTML元素由开始标签和结束标签组成，标签用于定义元素的类型和含义。例 如，<p>标签用于定义段落。
HTML文本格式化
HTML提供了多种标签来格式化文本，如<b>加粗</b>、<i>斜体</i>和<u> 下划线</u&的HTML文档由<!DOCTYPE>声明、<html>元素、头部信息和主体 内容组成。
HTML图像
使用<img>标签可以插入图像到网页中，通过指定图像的URL或搜索查询， 可以显示具体的图片。
HTML音视频
HTML5引入了<audio>和<video>标签，可以直接在网页中嵌入音频和视频 内容，为用户提供丰富的多媒体体验。
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>