HTML语言与网设计 ppt课件
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
script、meta 使用范围：html_tag
7
（3）<title>标记
功能：定义文档标题 属性：dir, lang 结束标记：</title> 包含: plain_text 使用范围：head_content 说明： ➢ 此标记只能在head标记内出现. ➢ title的内容通常在浏览器的标题栏中显示. ➢ 浏览器中收藏夹内书签的名称是title的内容. ➢ title的内容可以方便搜索引擎索引页面. ➢ 从搜索引擎搜索到的内容的标题往往是网页title的内容. 示例：当当
• 元素名即预定义的标记（签） • 属性：用来指定标记的行为确定元素内容的显示方式，如果标记有属性，则将
跟在元素名后，属性之间用一个或多个制表符、空格、回车符分开，不区分出 现的顺序。
• <>：把标记和标记所描述的内容区分开，一般成对出现，结束标记没有属性 • HTML的元素名、属性不区分大小写（xHTML区分且只能用小写），但最好用
笨，没有学问无颜见爹娘 ……” • “太阳当空照，花儿对我笑，小鸟说早早早……”
4
2.2 HTML文档的基本结构
HTML文档包含定义文档内容的文本和定义文 档结构及外观的标记，基本结构如下：
<html>：容器标记
<head> 头标记，用于定义文档标题及其它可能会用于控制文档显 示或访问的参数，如<title>、<base>、<link>、<isindex>、 <meta>等 </head> <body> 正文，包括要显示的文本和文档的控制标记 </body>
• 定义网页简短描述
<meta name="description" content="阿里巴巴（china.alibaba.com）是全球企业间 （B2B）电子商务的著名品牌，汇集海量供求信息，是全球领先的网上交易 市场和商人社区。首家拥有超过1400万网商的电子商务网站，遍布220个国 家地区，成为全球商人销售产品、拓展市场及网络推广的首选网站" />
</html>：容器结束标记
5
2.3 HTML的常用元素和标记
2.3.1 HTML结构标记
（1）<html>标记 功能：界定一个完整的HTML文档 属性：dir, lang, version 结束标记：</html> 包含: head_tag, body_tag, frames dir属性：内容的显示方式，用于本标记用于决定整个文档的显示方 向，默认为”ltr”，用于其它标记则用于决定该标记内的内容的显示 方向 lang属性：文档或文本的显示语言 version属性：说明支持的html标准的版本，在HTML4中已弃用，并 用<！doctype>标记来代替.
小写（有的操作系统大小敏感，如unix）
• HTML的源文件是纯文本文件，可以用任何一种文本编辑器来编写，但后缀应
用.htm或.html。
2
精品资料
• 你怎么称呼老师？ • 如果老师最后没有总结一节课的重点的难点，你
是否会认为老师的教学方法需要改进？ • 你所经历的课堂，是讲座式还是讨论式？ • 教师的教鞭 • “不怕太阳晒，也不怕那风雨狂，只怕先生骂我
9
<meta>标记应用：name属性与content属性组合
• 定义网页关键词
<meta name="keywords" content="阿里巴巴，行业门户，网上贸易，b2b，电子 商务，内贸，外贸，批发，行业资讯，网上贸易，网上交易，交易市场， 在线交易，买卖信息，贸易机会，商业信息，供求信息，采购，求购信息， 供应信息，加工合作，代理，商机，行业资讯，商务服务，商务网，商人 社区，网商" /> 阿里巴巴
2.HTML语言与网页设计
复习要点： • HTML通用标记结构、HTML文档的基本结构、
meta标记、超链接标记、字符实体、各种表单标记 • 什么是CSS • 样式表定义语法、CSS选择符 • 样式引用的基本方式 • 样式的优先级 • html与xhtml的主要区别
1
2.HTML语言与网页设计
2.1 HTML语言简介
• 定义搜索引擎索引要求
<meta name="robots" content="robotterms" >
robotterms是一组使用逗号(,)分割的值，通常有如下几种取值：none， noindex，nofollow，all，index和follow。sciencedirect
例：<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “”> ,如yahoo
6
（2）<head>标记
功能：定义文档头区百度文库属性：dir, lang, profile 结束标记：</head> 包含: head_content，如base、object、link、style、
http-equiv属性用于提供HTTP协议的响应头报文(MIME文档头),它 是以名称/值形式的名称,http-equiv属性的值所描述的内容(值)通过 content属性表示,通常为网页加载前提供给浏览器等设备使用.其中最重 要的是content-type charset 提供编码信息,refresh刷新与跳转页面,nocache 页面缓存,expires网页缓存过期时间. 结束标记：无 使用范围： head_content
• HTML，即超文本标记语言，是英文HyperText Markup Language的缩写，是一种
独立于操作系统的网页编写语言。HTML的最大特点就是用标记描述和表现信息 的显示格式和内容。所谓标记就是采用一系列的指令符号来控制输出的效果， 通用标记结构为：
<元素名 属性=“属性值”>内容</元素名>
8
<meta>标记
功能：提供用户不可见信息，为其它应用程序和搜索引擎访问提供可用信 息
属性：meta属性主要分为两组 ➢ name属性与content属性
name属性用于是以名称/值形式的名称描述网页,name属性的值所描 述的内容(值)通过content属性表示,便于搜索引擎机器人查找,分类.其中 最重要的是description, keywords和robots. ➢ http-equiv属性与content属性
7
（3）<title>标记
功能：定义文档标题 属性：dir, lang 结束标记：</title> 包含: plain_text 使用范围：head_content 说明： ➢ 此标记只能在head标记内出现. ➢ title的内容通常在浏览器的标题栏中显示. ➢ 浏览器中收藏夹内书签的名称是title的内容. ➢ title的内容可以方便搜索引擎索引页面. ➢ 从搜索引擎搜索到的内容的标题往往是网页title的内容. 示例：当当
• 元素名即预定义的标记（签） • 属性：用来指定标记的行为确定元素内容的显示方式，如果标记有属性，则将
跟在元素名后，属性之间用一个或多个制表符、空格、回车符分开，不区分出 现的顺序。
• <>：把标记和标记所描述的内容区分开，一般成对出现，结束标记没有属性 • HTML的元素名、属性不区分大小写（xHTML区分且只能用小写），但最好用
笨，没有学问无颜见爹娘 ……” • “太阳当空照，花儿对我笑，小鸟说早早早……”
4
2.2 HTML文档的基本结构
HTML文档包含定义文档内容的文本和定义文 档结构及外观的标记，基本结构如下：
<html>：容器标记
<head> 头标记，用于定义文档标题及其它可能会用于控制文档显 示或访问的参数，如<title>、<base>、<link>、<isindex>、 <meta>等 </head> <body> 正文，包括要显示的文本和文档的控制标记 </body>
• 定义网页简短描述
<meta name="description" content="阿里巴巴（china.alibaba.com）是全球企业间 （B2B）电子商务的著名品牌，汇集海量供求信息，是全球领先的网上交易 市场和商人社区。首家拥有超过1400万网商的电子商务网站，遍布220个国 家地区，成为全球商人销售产品、拓展市场及网络推广的首选网站" />
</html>：容器结束标记
5
2.3 HTML的常用元素和标记
2.3.1 HTML结构标记
（1）<html>标记 功能：界定一个完整的HTML文档 属性：dir, lang, version 结束标记：</html> 包含: head_tag, body_tag, frames dir属性：内容的显示方式，用于本标记用于决定整个文档的显示方 向，默认为”ltr”，用于其它标记则用于决定该标记内的内容的显示 方向 lang属性：文档或文本的显示语言 version属性：说明支持的html标准的版本，在HTML4中已弃用，并 用<！doctype>标记来代替.
小写（有的操作系统大小敏感，如unix）
• HTML的源文件是纯文本文件，可以用任何一种文本编辑器来编写，但后缀应
用.htm或.html。
2
精品资料
• 你怎么称呼老师？ • 如果老师最后没有总结一节课的重点的难点，你
是否会认为老师的教学方法需要改进？ • 你所经历的课堂，是讲座式还是讨论式？ • 教师的教鞭 • “不怕太阳晒，也不怕那风雨狂，只怕先生骂我
9
<meta>标记应用：name属性与content属性组合
• 定义网页关键词
<meta name="keywords" content="阿里巴巴，行业门户，网上贸易，b2b，电子 商务，内贸，外贸，批发，行业资讯，网上贸易，网上交易，交易市场， 在线交易，买卖信息，贸易机会，商业信息，供求信息，采购，求购信息， 供应信息，加工合作，代理，商机，行业资讯，商务服务，商务网，商人 社区，网商" /> 阿里巴巴
2.HTML语言与网页设计
复习要点： • HTML通用标记结构、HTML文档的基本结构、
meta标记、超链接标记、字符实体、各种表单标记 • 什么是CSS • 样式表定义语法、CSS选择符 • 样式引用的基本方式 • 样式的优先级 • html与xhtml的主要区别
1
2.HTML语言与网页设计
2.1 HTML语言简介
• 定义搜索引擎索引要求
<meta name="robots" content="robotterms" >
robotterms是一组使用逗号(,)分割的值，通常有如下几种取值：none， noindex，nofollow，all，index和follow。sciencedirect
例：<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “”> ,如yahoo
6
（2）<head>标记
功能：定义文档头区百度文库属性：dir, lang, profile 结束标记：</head> 包含: head_content，如base、object、link、style、
http-equiv属性用于提供HTTP协议的响应头报文(MIME文档头),它 是以名称/值形式的名称,http-equiv属性的值所描述的内容(值)通过 content属性表示,通常为网页加载前提供给浏览器等设备使用.其中最重 要的是content-type charset 提供编码信息,refresh刷新与跳转页面,nocache 页面缓存,expires网页缓存过期时间. 结束标记：无 使用范围： head_content
• HTML，即超文本标记语言，是英文HyperText Markup Language的缩写，是一种
独立于操作系统的网页编写语言。HTML的最大特点就是用标记描述和表现信息 的显示格式和内容。所谓标记就是采用一系列的指令符号来控制输出的效果， 通用标记结构为：
<元素名 属性=“属性值”>内容</元素名>
8
<meta>标记
功能：提供用户不可见信息，为其它应用程序和搜索引擎访问提供可用信 息
属性：meta属性主要分为两组 ➢ name属性与content属性
name属性用于是以名称/值形式的名称描述网页,name属性的值所描 述的内容(值)通过content属性表示,便于搜索引擎机器人查找,分类.其中 最重要的是description, keywords和robots. ➢ http-equiv属性与content属性