HTML标签_图文.ppt
合集下载
《html标记语言》PPT课件
一些html标记符
➢ 11〕段落标记 ＜P＞……＜/P＞
➢
转行标记 ＜BR＞……＜/BR＞
➢ 12〕连接标记
➢ <a href="?">连接文字</a><"?"是连接地 址>
➢ 13〕滚动字幕
➢ <marquee>需要滚动的字幕</marquee>
➢
看懂简单网页
<html> <head>
<title>这是测试文件</title> </head> <body>
网页制作与网站设计
HTML标记语言
➢ 1、HTML基本知识 ➢ 2、HTML文件基础 ➢ 3、使用HTML语言编写简单页面
贯穿始终
HTML语言基本知识
➢ HTML <HperText Markup Language >—— 是一种描述性语言.
➢ 两类： 1.对称标记,格式是：<标记>内容<标记> 2.单独标记,格式是：＜标记＞
<h2 align= center>这是我制作的第一章网页</h2> <img src=banner.gif> <h3 align=left><font color=#ff0080>看来还有好多东东要学哦！ </font></h3> <p><a href="index.html"><h3 align=right>返回主页</h3></p> </body> <html>
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>
第三章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>
《html标记》课件
《html标记》PPT课件
HTML标记是创建网页的基础，通过本课件，您将了解HTML标记的各个方面， 包括资源链接、基础标记结构、多媒体标记等。
HTML是什么
1 定义：
HTML（超文本标记语言）是一种用于创建网页的标准标记语言，它描述了网页内容的 结构和语义。
2 重要性：
HTML使我们能够以框架、文本、图像和多媒体元素等方式组织和呈现信息，并与其他网 页和资源进行链接。
<meta> 标签用于定义网页的 元数据，如字符编码、关键 词和描述。
< link>
<link> 标签用于引入外部资源， 如样式表或图标。
段落标记
有序列表
<ol> 标签用于创建有序列 表，如步骤、排名等。
无序列表
<ul> 标签用于创建无序列 表，如清单、特征等。
定义列表
<dl> 标签用于创建定义列 表，如名词解释等。
超链接标记
1
外部链接
2
使用<a>标签的href属性指定外部URL。
3
内部链接
使用<a>标签的href属性指定要链接 的页面或位置。
锚链接
使用<a>标签的href属性与页面内的id 配合创建页面内链接。
头部标记
< title>
<title> 标签用于定义网页的 标题，显示在浏览器的标题 栏中。
< meta>
嵌入外部内容
<iframe> 可以用来嵌入来自其 他网站的内容，如Youtube视频。
图片标记
1 插入图片
<img> 用于在网页中插 入图片，通过src属性指 定图片的URL。
HTML标记是创建网页的基础，通过本课件，您将了解HTML标记的各个方面， 包括资源链接、基础标记结构、多媒体标记等。
HTML是什么
1 定义：
HTML（超文本标记语言）是一种用于创建网页的标准标记语言，它描述了网页内容的 结构和语义。
2 重要性：
HTML使我们能够以框架、文本、图像和多媒体元素等方式组织和呈现信息，并与其他网 页和资源进行链接。
<meta> 标签用于定义网页的 元数据，如字符编码、关键 词和描述。
< link>
<link> 标签用于引入外部资源， 如样式表或图标。
段落标记
有序列表
<ol> 标签用于创建有序列 表，如步骤、排名等。
无序列表
<ul> 标签用于创建无序列 表，如清单、特征等。
定义列表
<dl> 标签用于创建定义列 表，如名词解释等。
超链接标记
1
外部链接
2
使用<a>标签的href属性指定外部URL。
3
内部链接
使用<a>标签的href属性指定要链接 的页面或位置。
锚链接
使用<a>标签的href属性与页面内的id 配合创建页面内链接。
头部标记
< title>
<title> 标签用于定义网页的 标题，显示在浏览器的标题 栏中。
< meta>
嵌入外部内容
<iframe> 可以用来嵌入来自其 他网站的内容，如Youtube视频。
图片标记
1 插入图片
<img> 用于在网页中插 入图片，通过src属性指 定图片的URL。
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”