web2.0(html css php javascript)课件_2 HTML and CSS Basics(C)
合集下载
web前端开发ppt课件
23
Web前端开发
NO.4 html标签/元素和属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
5
Web前端开发
NO.1 Web前端开发设计？？ 网页设计师、Web前端设计师与网站开发 工程师、交互设计师等区别： 网站开发工程师：掌握ASP、PHP、.NET、 JSP等开发语言，熟悉运用Access、SQL语 言、SQL数据库等；对IIS、Apache等服务 器有一定的理解等
6
Web前端开发
19
Web前端开发
NO.3 纠结的浏览器兼容问题
CSS Hack（解决兼容问题）：
火狐和IE7能识别"!important"；
#divcss1{
background:blue; /*Firefox 背景变蓝色*/ *+background:green !important; /*IE7 背景变绿色*/ _background:orange; /*IE6 背景变橘色*/ background:black\0; /*IE8 背景为黑色*/ background:red\9\0; /*IE9 背景为红色*/ body:nth-of-type(1) background:red; /*Chrome Safari
Web前端开发
NO.2 Web标准？Xhtml？
Xhtml（html）语法规则：
属性不能简写（<input checked="checked" />）
Web前端开发
NO.4 html标签/元素和属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
5
Web前端开发
NO.1 Web前端开发设计？？ 网页设计师、Web前端设计师与网站开发 工程师、交互设计师等区别： 网站开发工程师：掌握ASP、PHP、.NET、 JSP等开发语言，熟悉运用Access、SQL语 言、SQL数据库等；对IIS、Apache等服务 器有一定的理解等
6
Web前端开发
19
Web前端开发
NO.3 纠结的浏览器兼容问题
CSS Hack（解决兼容问题）：
火狐和IE7能识别"!important"；
#divcss1{
background:blue; /*Firefox 背景变蓝色*/ *+background:green !important; /*IE7 背景变绿色*/ _background:orange; /*IE6 背景变橘色*/ background:black\0; /*IE8 背景为黑色*/ background:red\9\0; /*IE9 背景为红色*/ body:nth-of-type(1) background:red; /*Chrome Safari
Web前端开发
NO.2 Web标准？Xhtml？
Xhtml（html）语法规则：
属性不能简写（<input checked="checked" />）
第6章 Web2PPT课件
• 随着技术的发展，这使惠普以新的方式更 接近客户。
21
博客融入惠普的营销战略
• 能否通过营销，服务或业务会话建立个人 之间的了解，信任和健康的辩论？惠普博 客给了他们答案。
• 惠普的博客程序让他们的对话通过客户延 伸至全球。更多的人可以加入谈话。
第6章 Web2.0与网络营销
1
整体概述
概况一
点击此处输入相关文本内容 点击此处输入相关文本内容
概况二
点击此处输入相关文本内容 点击此处输入相关文本内容
概况三
点击此处输入相关文本内容 点击此处输入相关文本内容
2
6.1 Web2.0的基本思想与技术
• 6.1.1 Web2.0概述 • 以BLOG、TAG、SNS、RSS、WiKi等社会
比较 • 1、用户通过邮件列表获取信息的特点 • 2、用户通过RSS订阅方式获取信息的特点
6
• 用户通过RSS订阅方式获取信息的优点： • 1.无需担心信息内容过大 • 2.不用担心垃圾邮件和病毒邮件的影响 • 3、RSS传递信息更快 • 4、RSS接收信息送达率高 • 5、RSS接收信息准确率较高
7
• 用户通过RSS订阅方式获取信息的缺点： • 1.目前RSS的应用远不如电子邮件普及 • 2.长期不接收RSS信息时，过期的信息无法
被保留，存在信息丢失的问题 • 3.网站难以准确了解RSS用户订阅情况 • 4.通过RSS获取信息难以实现个性化服务 • 5.不同用户之间共享RSS信息不方便
8
• 在许多新闻信息服务类网站，会看到这样的
11
12
6.2.2 RSS的应用模式归纳
• 1.跟踪新闻组 • 2.创建日历事件 • 3.接收天气预报 • 4.分类广告信息 • 5.情报搜索 • 6.商品货运跟踪 • 7.商品打折通知 • 8.拍卖商品跟踪
21
博客融入惠普的营销战略
• 能否通过营销，服务或业务会话建立个人 之间的了解，信任和健康的辩论？惠普博 客给了他们答案。
• 惠普的博客程序让他们的对话通过客户延 伸至全球。更多的人可以加入谈话。
第6章 Web2.0与网络营销
1
整体概述
概况一
点击此处输入相关文本内容 点击此处输入相关文本内容
概况二
点击此处输入相关文本内容 点击此处输入相关文本内容
概况三
点击此处输入相关文本内容 点击此处输入相关文本内容
2
6.1 Web2.0的基本思想与技术
• 6.1.1 Web2.0概述 • 以BLOG、TAG、SNS、RSS、WiKi等社会
比较 • 1、用户通过邮件列表获取信息的特点 • 2、用户通过RSS订阅方式获取信息的特点
6
• 用户通过RSS订阅方式获取信息的优点： • 1.无需担心信息内容过大 • 2.不用担心垃圾邮件和病毒邮件的影响 • 3、RSS传递信息更快 • 4、RSS接收信息送达率高 • 5、RSS接收信息准确率较高
7
• 用户通过RSS订阅方式获取信息的缺点： • 1.目前RSS的应用远不如电子邮件普及 • 2.长期不接收RSS信息时，过期的信息无法
被保留，存在信息丢失的问题 • 3.网站难以准确了解RSS用户订阅情况 • 4.通过RSS获取信息难以实现个性化服务 • 5.不同用户之间共享RSS信息不方便
8
• 在许多新闻信息服务类网站，会看到这样的
11
12
6.2.2 RSS的应用模式归纳
• 1.跟踪新闻组 • 2.创建日历事件 • 3.接收天气预报 • 4.分类广告信息 • 5.情报搜索 • 6.商品货运跟踪 • 7.商品打折通知 • 8.拍卖商品跟踪
《WEB2.0技术应用》课件
Diagram
Add Your Text Add Your Text Add Your Text
Add Your Title
Diagram
Text
Text
Text
ThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.
前言
❖ 2001年秋天互联网公司（dot-com)泡沫的破灭标 志着互联网的一个转折点。许多人断定互联网被过分炒作， 事实上网络泡沫和相继而来的股市大衰退看起来像是所有 技术革命的共同特征。
❖ “Web 2.0”的概念开始于一个会议中，展开于 O'Reilly公司和MediaLive国际公司之间的头脑风暴部 分。所谓互联网先驱和O'Reilly公司副总裁的戴尔·多尔 蒂(Dale Dougherty)注意到，同所谓的“崩溃”迥然 不同，互联网比其他任何时候都更重要，令人激动的新应 用程序和网站正在以令人惊讶的规律性涌现出来。更重要 的是，那些幸免于当初网络泡沫的公司，看起来有一些共 同之处。那么会不会是互联网公司那场泡沫的破灭标志了 互联网的一种转折，以至于呼吁“Web 2.0”的行动有 了意义？我们都认同这种观点，Web 2.0会议由此诞生。
Diagram
Text
Text
Text
Text
Add Your Title
Diagram
Concept
concept
Concept
Concept
Diagram
1
ThemeGallery is a Design Digital Content & Contents mall developed by Guild Design Inc.
Html及javaScript的ppt2
• 通过在网页中加入<Script>…</Script>标记 JavaScript的开始和结束，将JavaScript代 码放到<Script>…</Script>之间(8.htm) • 也可以引入一个外部的JavaScript文件，这个 JavaScript文件一般以.js作为扩展名(9.htm) • 原则上，放在<head></head>之间。但视情 况可以放在网页的任何部分(10.htm) • 一个页面可以有几个<Script>…</Script> (11.htm)，不同部分的方法和变量，可以共享。
• 范例名称：form中文本框的使用 • 文件名称：form-1.htm
HTML中常用标记符
• 范例名称：form中复选框的使用 • 文件名称：checkbox.htm
HTML中常用标记符
• 范例名称：单选框的使用 • 文件名称：radio.htm
HTML中常用标记符
• 范例名称：“提交”和“重置”按钮的使 用 • 文件名称：Button.htm
– 30.htm
JavaScript内置对象
• this
– 指的是当前的对象(31.htm)
• for…in
– In后跟一个对象，对此对象中的所有元素循环一次 (32.htm)
• with
– 为一段代码建立一个缺省的对象，任何无对象的属性 引用，都将使用该缺省的对象(33.htm)
HTML字体和文字布局 HTML字体和文字布局
• <h1>…</h1>…<h6>…</h6>：各级标题 • <font color="" size="“ face=“”>…</font>：字体的 颜色、大小(font.htm) • <b>…</b>：黑体 <i>…</i>：斜体 <u>…</u>：下划线 <ul>…</ul>：无序号列表 <ol>…</ol>：有序号列表 • <p>…</p>：定义段落 <br>：换行 • <div align="">…</div>：分区显示
• 范例名称：form中文本框的使用 • 文件名称：form-1.htm
HTML中常用标记符
• 范例名称：form中复选框的使用 • 文件名称：checkbox.htm
HTML中常用标记符
• 范例名称：单选框的使用 • 文件名称：radio.htm
HTML中常用标记符
• 范例名称：“提交”和“重置”按钮的使 用 • 文件名称：Button.htm
– 30.htm
JavaScript内置对象
• this
– 指的是当前的对象(31.htm)
• for…in
– In后跟一个对象，对此对象中的所有元素循环一次 (32.htm)
• with
– 为一段代码建立一个缺省的对象，任何无对象的属性 引用，都将使用该缺省的对象(33.htm)
HTML字体和文字布局 HTML字体和文字布局
• <h1>…</h1>…<h6>…</h6>：各级标题 • <font color="" size="“ face=“”>…</font>：字体的 颜色、大小(font.htm) • <b>…</b>：黑体 <i>…</i>：斜体 <u>…</u>：下划线 <ul>…</ul>：无序号列表 <ol>…</ol>：有序号列表 • <p>…</p>：定义段落 <br>：换行 • <div align="">…</div>：分区显示
网站设计项目化教程(HTML+CSS+JavaScript)-PPT课件
1
项目一 网站规划设计
设计内容
2
网站开发基础 网站总体规划
网站开发基础
3
明确课程学习目标。
掌握与网站相关的基本概念。
掌握静态网页和动态网页的区别。
网页设计制作相关术语
术语
4
各专业、行业的专门用语。 在网页设计制作中，经常要使用的术语可以包含两部分：
网络相关术语 网站相关术语
<h3><i>所学知识</i></h3> <ul type="circle"> <li>文字</li> <li type="disc">列表 <ul> <li type="square">有序</li> <li>无序</li> </ul> </li> </ul>
有序列表
54
用于创建一个标有编号的列表。使用标记<ol></ol>
网络相关术语
Internet
5
Internet是覆盖全球的信息基础设施之一，其将全球范围内不同国家、不同区 域的众多资源连接起来，为用户提供一个庞大的远程计算机网络。
WWW
全称World Wide Web，简称Web，中文称万维网，是基于超文本的信息查 询和信息发布的系统。
6 网络相关术语
需求分析 网站定位 内容规划
14
企业网站设计说明
15
16
思考：
你用过哪几种浏览器？ 说说WWW技术原理。
项目一 网站规划设计
设计内容
2
网站开发基础 网站总体规划
网站开发基础
3
明确课程学习目标。
掌握与网站相关的基本概念。
掌握静态网页和动态网页的区别。
网页设计制作相关术语
术语
4
各专业、行业的专门用语。 在网页设计制作中，经常要使用的术语可以包含两部分：
网络相关术语 网站相关术语
<h3><i>所学知识</i></h3> <ul type="circle"> <li>文字</li> <li type="disc">列表 <ul> <li type="square">有序</li> <li>无序</li> </ul> </li> </ul>
有序列表
54
用于创建一个标有编号的列表。使用标记<ol></ol>
网络相关术语
Internet
5
Internet是覆盖全球的信息基础设施之一，其将全球范围内不同国家、不同区 域的众多资源连接起来，为用户提供一个庞大的远程计算机网络。
WWW
全称World Wide Web，简称Web，中文称万维网，是基于超文本的信息查 询和信息发布的系统。
6 网络相关术语
需求分析 网站定位 内容规划
14
企业网站设计说明
15
16
思考：
你用过哪几种浏览器？ 说说WWW技术原理。
电子商务课件-Web2.0
2009/12/05， 23:10
Idea Economy的新生儿
把new idea嵌入到互联网中去
把人们从“互联网泡沫破灭之后”的低沉与迷惘中 带出来
使硅谷重新焕发了昔日的激情和活力，并将这种活力播 散向全世界。
起源
O‘Reilly媒体公司总裁兼CEO提姆•奥莱理（Tim O’Reilly）在2004年10月5-7日在San Francisco组织召开了第一届“Web2.0”会议
WEB2.0的产品类型
博客
blog 是一个易于使用的网站，网站提供给用户博客模板以及内容存放的空间， 用户自定义生成页面内容，包括页面的形态，这是一种典型的Web2.0模式。
用户可以在其中迅速发布想法、与他人交流以及从事其他活动。一个博客 （blog）就是一个网页，它通常是由简短且经常更新的Post所构成。
互联网从业者比其他行业的人们更热衷于追逐一个 又一个新的“idea”
在眼花缭乱的“idea”竞技场背后，是人们持久不懈地 对于新价值的探索与发现。
为什么互联网如此迷人？
首先，互联网的传播速度很快，传播成本很 低，也就意味着，当一个标准化的产品或服 务出现之后，它能享受到其他行业所无法比 拟的边际效应。
WEB 2.0与WEB 1.0的比较 -- 内容
WEB 1.0以商业公司为主体，通过少数 的人将大量的信息编辑、整理、分类； 然后通过商业的力量，上传到网上。
WEB1.0以网站对个人为主的传播方式， 是典型的一对多的广播式传播。这样的 传播方式客观上没有民主性可言，网站 编辑的喜好决定了用户看到的内容。首 页上的新闻数目有限，网站编辑选择的 内容会给人一种先入为主的观念。
WEB 2.0 的核心技术
AJAX
AJAX并不是一种技术，它实际上是几种已经在 各自领域有所风行的技术的强强联合。AJAX混 合了
Idea Economy的新生儿
把new idea嵌入到互联网中去
把人们从“互联网泡沫破灭之后”的低沉与迷惘中 带出来
使硅谷重新焕发了昔日的激情和活力，并将这种活力播 散向全世界。
起源
O‘Reilly媒体公司总裁兼CEO提姆•奥莱理（Tim O’Reilly）在2004年10月5-7日在San Francisco组织召开了第一届“Web2.0”会议
WEB2.0的产品类型
博客
blog 是一个易于使用的网站，网站提供给用户博客模板以及内容存放的空间， 用户自定义生成页面内容，包括页面的形态，这是一种典型的Web2.0模式。
用户可以在其中迅速发布想法、与他人交流以及从事其他活动。一个博客 （blog）就是一个网页，它通常是由简短且经常更新的Post所构成。
互联网从业者比其他行业的人们更热衷于追逐一个 又一个新的“idea”
在眼花缭乱的“idea”竞技场背后，是人们持久不懈地 对于新价值的探索与发现。
为什么互联网如此迷人？
首先，互联网的传播速度很快，传播成本很 低，也就意味着，当一个标准化的产品或服 务出现之后，它能享受到其他行业所无法比 拟的边际效应。
WEB 2.0与WEB 1.0的比较 -- 内容
WEB 1.0以商业公司为主体，通过少数 的人将大量的信息编辑、整理、分类； 然后通过商业的力量，上传到网上。
WEB1.0以网站对个人为主的传播方式， 是典型的一对多的广播式传播。这样的 传播方式客观上没有民主性可言，网站 编辑的喜好决定了用户看到的内容。首 页上的新闻数目有限，网站编辑选择的 内容会给人一种先入为主的观念。
WEB 2.0 的核心技术
AJAX
AJAX并不是一种技术，它实际上是几种已经在 各自领域有所风行的技术的强强联合。AJAX混 合了
Web前端开发课件：HTML、CSS、JavaScript基础
2
以及Ajax优势。
学习创建、配置和使用
XMLHttpRequest对象来向服务器请
求数据和响应客户端。
3
响应处理
如何处理服务器的响应，以便更好地 交互和更快地更新页面
网站开发架构和区分前后端处理
开放式Web架构
详细解释开放式Web架构 的概念，包括数据存储和 传输，以及Web资源之间 的交互方式。
SEO基础（搜索引擎优化）
1
了解SEO
基础SEO知识,包括如何从搜做引擎的
搜索引擎优化
2
角度思考网站设计。
通过内容、元数据、链接和用户体验
来优化您的网站，以提高其排名。
3
其他优化技巧
一些其他优化技巧，例如通过社交媒 体和博客网站来引擎流量。
Web安全基础和防范措施
安全问题
所涉及的威胁以及可能感 到担忧的位置。
Web前端开发课件
本课程将涵盖HTML、CSS和JavaScript的基础知识，帮助您入门Web开发。 从基础语法开始，内容丰富、易于理解。
程序员入门指南
编程语言
选择一门适合你的编程语 言并针对该语言的知识进 行学习。
计算机基础
学习计算机基础，包括数 据结构、Байду номын сангаас法、操作系统 和网络基础知识。
实践项目
选择器和操作
使用jQuery选择器来操作 HTML元素，并使用方法来执 行更复杂的操作。
事件处理
jQuery的事件处理器可以进行 更简化你常规的事件处理。
Ajax基础知识、XMLHttpRequest对象的 使用
1
Ajax基础知识
了解什么是Ajax以及为什么要使用它，
XMLHttpRequest对象的使用
HTML+CSS+JS入门基础ppt
• 开一个新的(浏览器)窗口 (Target Window) <a href="URL" target=“_blank"> ... </a>
2.2.7 超级链接
超级链接是用锚元素<a>定义的 • 在<a>元素下，有元素属性href,href的属性值为一
个URL地址
➢ 如：<a href="/eschool">指向 学院的超级链接</a>
➢ 如：<a href="top.htm">普通超级链接</a> ➢ 如：<a href="../pic/left.htm">普通超级链接</a>
• 空格标记
2.2.5 水平线标记
• 水平线
<hr size = #>：设定线宽 <hr width=#>：设定线长 <hr align=#>：设定对齐方式 #=left, right <hr color=#> ：设定线的颜色
• <hr size=7 align=center width="75%" color="red">
2.1.3 HTML 文档结构-(head)meta
• 编写一个网页，要求3秒钟后自动跳转到北软教育首页。
• <html>
•
<head>
•
<title>my first page</title>
• <meta http-equiv="refresh" content="3;URL=">
2.2.7 超级链接
超级链接是用锚元素<a>定义的 • 在<a>元素下，有元素属性href,href的属性值为一
个URL地址
➢ 如：<a href="/eschool">指向 学院的超级链接</a>
➢ 如：<a href="top.htm">普通超级链接</a> ➢ 如：<a href="../pic/left.htm">普通超级链接</a>
• 空格标记
2.2.5 水平线标记
• 水平线
<hr size = #>：设定线宽 <hr width=#>：设定线长 <hr align=#>：设定对齐方式 #=left, right <hr color=#> ：设定线的颜色
• <hr size=7 align=center width="75%" color="red">
2.1.3 HTML 文档结构-(head)meta
• 编写一个网页，要求3秒钟后自动跳转到北软教育首页。
• <html>
•
<head>
•
<title>my first page</title>
• <meta http-equiv="refresh" content="3;URL=">
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
放在 body 部分里面 更多段落的示例
27 June 2011
12 / 49
换行符: <br />
在块元素中强制换行（内联）
Web 2.0 Programming – HTML/CSS Basics
<p>Teddy said it was a hat, <br /> So I put it on.</p> <p>Now Daddy's sayin', <br /> Where the heck's the toilet plunger gone?</p> HTML
27 June 2011
5 / 49
注释: <!-- … -->
Web 2.0 Programming – HTML/CSS Basics
为你的HTML文件加入注释或者 “添加注释” 文本 <!-- My web page, by Tim Student SS 12345, Spring 2048 --> <p>SS courses are <!-- NOT --> a lot of fun!</p>
有的标签不包含内容; 有的标签可以用来打开或关闭内容
• • •
27 June 2011
17 / 49
链接: <a>
Web 2.0 Programming – HTML/CSS Basics
链接，或者 “锚点”，指向其他页面(内联)
<p> Search <a href=“/”>Google</a> or our <a href=“lectures.html”>Lecture Notes</a> </p> HTML
HTML
放在网页的head部分里面 在浏览器的标题栏显示并且作为收藏网页时的标题
27 June 2011
8 / 49
网页元数据: <meta>
描述网页元数据
Web 2.0 Programming – HTML/CSS Basics
<meta name=“description" content=“introduction of SYSU" /> HTML <meta http-equiv="Content-Type" content="text/html; charset=gbk" /> HTML
Web 2.0 Programming – HTML/CSS Basics
基础 HTML Web 标准 基础 CSS 思考…
27 June 2011
2 / 49
Web 2.0 Programming – HTML/CSS Basics
超文本标记语言(HTML) Nhomakorabea
1993: HTML最初的工作草案被提交到互联网工程工作小组 (IETF). 1995: HTML 2 标准版作为RFC 1866 发布. 1996-97: HTML 3.2 规范了众多包括表单，表格，图像映射 和国际化设置在内的众多特征. 1997: HTML 4 作为W3C推荐标准, 增加了样式表, 脚本处 理, 框架, 嵌入式对象，国际化设置, 和无效处理的辅助功能. 1999: HTML 4.01 是W3C发布的最后一个版本. 目前网络上 绝大多数网页仍然用它作为起始语言. 2001-01: XHTML, 基于XML的HTML
School of Software
Support by Google
output
更多定义标题的示例
27 June 2011
14 / 49
语义化的HTML
Web 2.0 Programming – HTML/CSS Basics
如果你觉得下面的代码输出的文本在浏览器里显示过大， 你会怎么做? <h1>Sun Yat-Sen University</h1> HTML
27 June 2011
3 / 49
Web 2.0 Programming – HTML/CSS Basics
超文本标记语言(HTML)
描述网页信息的内容跟结构
•
不同于网页效果的展示（在屏幕上显示的外观）
用开始标签跟结束标签(tags)环绕文本内容 每个标签称为一个元素
• •
语法: <element> 内容</element> 示例: <p>这是一个段落</p>
Web 2.0 Programming – HTML/CSS Basics
在网页中定义标题来分隔主区域（块） <h1>Sun Yat-Sen University</h1> <h2>School of Software</h2> <h3>Support by Google</h3>
HTML
Sun Yat-Sen University
字符集
• • • • • •
27 June 2011
10 / 49
Web 2.0 Programming – HTML/CSS Basics
块跟内联元素
块（block） 元素包含整块区域的内容
• •
示例: 段落, 列表, 表格,单元格 浏览器在块元素之间用空白边缘分隔开 示例: 加粗文本, 代码片段 , 图像 浏览器允许多个内联元素出现在同一行 必须嵌在块元素里面
有的标签可以包含额外的属性(attribute)
• •
语法:
<element attribute1="value1" attribut2="vaule2"> content</element>
示例: <a href="page2.html">Next page</a> syntax: <element attribute1="v1" attribut2="v2" /> example: <hr /> example: <img src="bunny.jpg" alt="bunny" />
放在网页的head部分里面 字符编码(chartset) 在实际操作中非常重要, 我们通常采用 utf-8 编码而不是英文编码
•
字符编码解码发生在什么地方，什么时候，是怎么执行的？
27 June 2011
9 / 49
字符编码
Web 2.0 Programming – HTML/CSS Basics
27 June 2011
6 / 49
XHTML 网页的结构
Web 2.0 Programming – HTML/CSS Basics
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="/1999/xhtml"> <head> information about the page </head> <body> page contents </body> </html>
XHTML
用head部分描述网页，用body部分来装载网页的内容 一个HTML网页被保存在以扩展名.html结尾的文件中
27 June 2011
7 / 49
网页的标题: <title>
描述该网页的标题
Web 2.0 Programming – HTML/CSS Basics
<title>Chapter 2: HTML Basics</title>
Teddy said it was a hat, So I put it on. Now Daddy's sayin', Where the heck's the toilet plunger gone?
br 后面必须紧随 />
output
27 June 2011
13 / 49
标题: <h1>, <h2>, …<h6>
第2讲 HTML 和 CSS 基础
SE-805 Web 2.0 Programming
(/courses/web2.0/, supported by Google) School of Software, Sun Yat-sen University
概览
Sun Yat-Sen University
output
把 h1 改为 h3? 语义化的HTML – 关注点的分离
• •
选择基于内容的标签而不是基于外观的 灵活的并且可复用的
27 June 2011
15 / 49
水平线: <hr />
用来分隔网页的主要区域(块) <p>First paragraph</p> <hr /> <p>Second paragraph</p>