第三章 静态网页技术
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
…… <body> <h1>北京欢迎你</h1> <p>北京欢迎你，有梦想谁都了不起！</p> <p>有勇气就会有奇迹。</p> </body> ……
基本块级标签——水平线
• 水平线标签
…… <body> <h1>北京欢迎你</h1> <hr /> <p>北京欢迎你，有梦想谁都了不起！ </p> <p>有勇气就会有奇迹。</p> </body> ……
行级标签——换行标签
• 换行标签 <br/>
和<p>的区别： 前后不换行
…… <p> 北京欢迎你，有梦想谁都了不起！<br /> 有勇气就会有奇迹。<br /> 北京欢迎你，为你开天辟地<br /> 流动中的魅力充满朝气。<br /> 北京欢迎你，在太阳下分享呼吸<br /> 在黄土地刷新成绩。<br /> 北京欢迎你，像音乐感动你<br /> 让我们都加油去超越自己。<br /> </p> ……
W3C标准
• W3C：World Wide Web Consortium，万维网联盟 • W3C的职能：负责制定和维护web行业标准
W3C
制定统一的web标准
W3C提倡的Web结构
• 不规范的示例
存在问题： 1、内容和表现没分离，后期很难 维护和修改 2、HTML代码不能表示页面的内 容语义，不利于搜索引擎搜索
• 3.3 表格布局
• 3.4 表单布局 • 3.5 框架布局
2016年9月18日星期 日
信息与工程学院
表格的应用
门户网站应 购物网站 用表格 应用表格 论坛中应用 表格
基本语法
<td>…</td> 定义列
<table> <tr> <td>第1个单元格的内容</td> <td>第2个单元格的内容</td> ...... </tr> <tr> <td>第1个单元格的内容</td> <td>第2个单元格的内容</td> ...... </tr> </table>
2016年9月18日星期 日
Hale Waihona Puke Baidu
信息与工程学院
• 3.1 HTML简介 • 3.2 HTML常用标签介绍
• 3.3 表格布局
• 3.4 表单布局 • 3.5 框架布局
2016年9月18日星期 日
信息与工程学院
HTML简介 HTML
• HTML：Hyper Text Markup Language 超文本标签语言 • HTML：网页的“源码”
特殊符号
特殊符号
空格： 大于(>)：> 小于(<）: < 引号（”）："
1、因为<、>等符号在HTML 中已使用，所以必须用其他 符号来代替 2、都以分号结束（；）
版权号：©
• 3.1 HTML简介 • 3.2 HTML常用标签介绍
常用于布局的块级标签—— 表格
<table>--表格 <tr> --行 <td> --列（单元格）
表格
<table> <tr> <td>百度</td> <td>新浪</td> </tr> …… </table>
常用于布局的块级标签—— 表单
表单
<form> …… </form>
一般和table使用： <form> <table> <tr> <td>...</td> <td>...</td> </tr> ..... </table> </form>
• 2、设置链接到标记位置： <a href="#标记名">当前位置</a>
…… <a href="#star">[明星专区]</a> …… <a name=“star”>明显专区内容</a> …… 定义标记
设置链接到 标记位置
适用于页面 内容较多， 超过一屏的 场合
……链接页…. 明星体验：<a href="anchor.html#star">明星专区</a> …… 云南工商学院：朱晓晶
<h1>一级主题1</h1> <p>一级主题阐述文字</p> <h2>二级主题</h2> <p>二级主题阐述文字</p> <ul> <li>项目列表1</li> <li>项目列表2</li> <li>项目列表3</li> </ul>
超链接
• 超链接---实现页面间的导航
链接文本或图像
链接地址（目标）
常用于布局的块级标签—— DIV层
…… <div style="width:400px; height:300px; background:#9FF"> <p>……</p> div标签可内嵌到<p>等标签 <h3>新人上路</h3> 内，作为普通块状元素使用 <ul> …… </ul> div其实就是一个...... </div> …… 一般当作结构化块状元素使用，作 为逻辑分区（分块）即容器来使用
• 用定义描述标签实现图 文混编的效果
文字有一定的缩进
…… <body> <dl> <dt> 图片的HTML代码（后续讲解）……<dt> <dd>商品名称：灿坤蒸气电熨斗</dd> <dd>商品价格：388元</dd> <dd>商品简介：金钢低血超硬超顺滑,140ml透明大水箱设计</dd> </dl> </body> ……
colspan 跨3列
rowspan 跨2行
表格布局
图文布局，数据 规则整齐
表单布局， 同样要求数 据规则整齐
图文布局的实现
图文布局的实现
整个是5行2列的表格,实 际布局时border=“0”隐 藏边框
…… 公告栏：跨2列 <table border="1px"> <tr> <td colspan="2"><img src=“…" alt="公告栏" /></td> 图片：跨4行 </tr> <tr> <td rowspan="4"><img src=“…" alt="公告左侧图" /></td> <td>大学要求老师开网店</td> </tr> <tr> <td>安全锤网上大热销</td> </tr> …… </tr> </table> ……
标题标签
…… <body> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> </body> ……
h1最大 h6最小 前后隔行
基本块级标签——段落
• 段落标签
前后换行， 类似教材中 的段落
<tr>…</tr> 定义行
<table>...
</ table>定 义表格
跨行、跨列
…… <table width="200" border="1"> <tr> <td colspan="3">学生成绩</td> </tr> <tr> <td rowspan="2">张三</td> <td>语文</td> <td>98</td> </tr> <tr> <td>数学</td> <td>95</td> </tr> ....代码同上两行.... </table> ……
单个标签的闭 合形式
横线用于内容 分割
常用布局的块级标签—— 有序列表
• 有序列表标签
有序列表 …… <body> <h3>注册步骤：</h3> <ol> <li>填写信息</li> <li>收电子邮件</li> <li>注册成功</li> </ol> </body> ……
常用布局的块级标签—— 无序列表
电子商务网站设计 PHP语言
信息与工程学院：朱晓晶
Tel：15368068582
E-mail：908160211@qq.com
第三章 静态网页技术
2016年9月18日星期 日
信息与工程学院
学习目标
• 3.1 HTML简介 • 3.2 HTML常用标签介绍 • 3.3 表格布局 • 3.4 表单布局 • 3.5 框架布局
…… <a href="../web1.htm">上级目录</a> <a href="../../web2.htm">上上级目录</a> …… 上上级目 录：../../
上级目录：../
云南工商学院：朱晓晶
超链接的三类应用场合
• 页面间链接
• 锚链接
• 功能性链接
常用于网站 导航
锚链接
• 实现锚链接 • 1、定义标记(锚)： <a name="标记名">目标位置</a>
行级标签——图像标签
• 图像标签
…… <img src="images/drink.jpg" alt="精品热卖：高清晰，30寸等离子电视" title="精品热卖：高清晰，30寸等离子电视" /> ……
行级标签——范围标签
• 范围标签<span> ：显示某行内的独特样式
…… <p>商品价格:仅售<span style="color:red;font-size:70px;">10</span>元</p> ……
这种效果可以和无序列表互相 替代，因dt是块状元素，所以 常用于图文混编的布局场合
…… <body> <dl> <dt>咖啡</dt> <dd>一种黑色的热饮料，原料据说是咖啡豆，非洲盛产这类原料。 </dd> <dd>可以提神，刺激神经。</dd> <dl> </body> ……
常用布局的块级标签—— 描述标签
<font size="7">一级主题</Font><br/> 一级主题阐述文字 <br /><Br /> <font size="5">二级主题</font><br /> 二级主题相关文字 <P>项目列表1 <p>项目列表2 <p>项目列表3
W3C提倡的Web结构
规范的示例
W3C提倡的Web结构： 1、内容（结构）和表现（样式） 分离 2、HTML内容结构要求语义化
超链接
…… <a href="span.html" target="_blank">灿坤蒸气电熨斗</a> …… 链接在新 窗口中打 开
相对地址：相对于当前目录的地址，常用
<a href="login/login.htm">登录</a>
绝对地址：指向目标地址的完整描述 ，少用
<a href="/memAdmin/login/login.htm">登录</a> <a href="http://www.sohu.com">搜狐</a>
• 无序列表标签
无序列表 <body> <h3>新人上路指南 </h3> <ul> <li>如何激活会员名？</li> <li>如何注册贵美会员？</li> <li>注册时密码设置有什么要求？</li> <li>贵美认证</li> </ul> </body>
常用布局的块级标签—— 描述标签
• 定义描述标签
功能性链接
• 邮箱、QQ链接等
…… <a href="mailto: guimeiWebMater@gmgw.com">站长信箱</a> ……
注释
<!--注释内容 -->
用于增加代码的可读 性，不显示 …… <!-- <li>被注释掉的行将不显示</li> --> <li>正常显示行1</li> <li>正常显示行2</li> ……
网页内容，可以是 文本、图像等
这部分包含文本、图像和链接，它包括在 这部分包括标题和其他说明信息，包括在 <html>…</html>标签标记 HTML<body>…</body> <head>…</head> 文档的开始和结束 标签内
网页的摘要信息
网页摘要信息利于浏览器解析和搜索引擎搜索：
使用<title>标签
<head> <title>搜狐-中国最大的门户网站</title> </head>
使用<meta>标签 （1）描述文档类型和字符编码 （2）描述搜索关键字和描述
<head> <head> <meta name= http-equiv="Content-Type" content="text/html; charset=gb2312" <meta "keywords" content= "淘宝,网上购物,在线交易 ,交易市场" /> /> </head> <meta name= "description" content= "淘宝网-亚洲最大、最安全的网上交易平台，提 供各类服饰、美容、家居、数码、……" /> </head>
• 浏览器：“解释和执行”HTML源码的工具
云南工商学院：朱晓晶
HTML文档的基本结构
<html> 网页标题 <head> <title>我的第一个网页 </title> </head> <body > Hello World! </body> </html>
<head>头部部分 HTML 网页 <body>主体部分
• 3.1 HTML简介 • 3.2 HTML常用标签介绍
• 3.3 表格布局
• 3.4 表单布局 • 3.5 框架布局
2016年9月18日星期 日
信息与工程学院
HTML页面中的块和行
行级：包 括文字、 图片等
块级： 块内包含 多行
块级标签
根据使用场合，块级标签又细分为：
基本块级标签
常用于布局的块级标签
基本块级标签——水平线
• 水平线标签
…… <body> <h1>北京欢迎你</h1> <hr /> <p>北京欢迎你，有梦想谁都了不起！ </p> <p>有勇气就会有奇迹。</p> </body> ……
行级标签——换行标签
• 换行标签 <br/>
和<p>的区别： 前后不换行
…… <p> 北京欢迎你，有梦想谁都了不起！<br /> 有勇气就会有奇迹。<br /> 北京欢迎你，为你开天辟地<br /> 流动中的魅力充满朝气。<br /> 北京欢迎你，在太阳下分享呼吸<br /> 在黄土地刷新成绩。<br /> 北京欢迎你，像音乐感动你<br /> 让我们都加油去超越自己。<br /> </p> ……
W3C标准
• W3C：World Wide Web Consortium，万维网联盟 • W3C的职能：负责制定和维护web行业标准
W3C
制定统一的web标准
W3C提倡的Web结构
• 不规范的示例
存在问题： 1、内容和表现没分离，后期很难 维护和修改 2、HTML代码不能表示页面的内 容语义，不利于搜索引擎搜索
• 3.3 表格布局
• 3.4 表单布局 • 3.5 框架布局
2016年9月18日星期 日
信息与工程学院
表格的应用
门户网站应 购物网站 用表格 应用表格 论坛中应用 表格
基本语法
<td>…</td> 定义列
<table> <tr> <td>第1个单元格的内容</td> <td>第2个单元格的内容</td> ...... </tr> <tr> <td>第1个单元格的内容</td> <td>第2个单元格的内容</td> ...... </tr> </table>
2016年9月18日星期 日
Hale Waihona Puke Baidu
信息与工程学院
• 3.1 HTML简介 • 3.2 HTML常用标签介绍
• 3.3 表格布局
• 3.4 表单布局 • 3.5 框架布局
2016年9月18日星期 日
信息与工程学院
HTML简介 HTML
• HTML：Hyper Text Markup Language 超文本标签语言 • HTML：网页的“源码”
特殊符号
特殊符号
空格： 大于(>)：> 小于(<）: < 引号（”）："
1、因为<、>等符号在HTML 中已使用，所以必须用其他 符号来代替 2、都以分号结束（；）
版权号：©
• 3.1 HTML简介 • 3.2 HTML常用标签介绍
常用于布局的块级标签—— 表格
<table>--表格 <tr> --行 <td> --列（单元格）
表格
<table> <tr> <td>百度</td> <td>新浪</td> </tr> …… </table>
常用于布局的块级标签—— 表单
表单
<form> …… </form>
一般和table使用： <form> <table> <tr> <td>...</td> <td>...</td> </tr> ..... </table> </form>
• 2、设置链接到标记位置： <a href="#标记名">当前位置</a>
…… <a href="#star">[明星专区]</a> …… <a name=“star”>明显专区内容</a> …… 定义标记
设置链接到 标记位置
适用于页面 内容较多， 超过一屏的 场合
……链接页…. 明星体验：<a href="anchor.html#star">明星专区</a> …… 云南工商学院：朱晓晶
<h1>一级主题1</h1> <p>一级主题阐述文字</p> <h2>二级主题</h2> <p>二级主题阐述文字</p> <ul> <li>项目列表1</li> <li>项目列表2</li> <li>项目列表3</li> </ul>
超链接
• 超链接---实现页面间的导航
链接文本或图像
链接地址（目标）
常用于布局的块级标签—— DIV层
…… <div style="width:400px; height:300px; background:#9FF"> <p>……</p> div标签可内嵌到<p>等标签 <h3>新人上路</h3> 内，作为普通块状元素使用 <ul> …… </ul> div其实就是一个...... </div> …… 一般当作结构化块状元素使用，作 为逻辑分区（分块）即容器来使用
• 用定义描述标签实现图 文混编的效果
文字有一定的缩进
…… <body> <dl> <dt> 图片的HTML代码（后续讲解）……<dt> <dd>商品名称：灿坤蒸气电熨斗</dd> <dd>商品价格：388元</dd> <dd>商品简介：金钢低血超硬超顺滑,140ml透明大水箱设计</dd> </dl> </body> ……
colspan 跨3列
rowspan 跨2行
表格布局
图文布局，数据 规则整齐
表单布局， 同样要求数 据规则整齐
图文布局的实现
图文布局的实现
整个是5行2列的表格,实 际布局时border=“0”隐 藏边框
…… 公告栏：跨2列 <table border="1px"> <tr> <td colspan="2"><img src=“…" alt="公告栏" /></td> 图片：跨4行 </tr> <tr> <td rowspan="4"><img src=“…" alt="公告左侧图" /></td> <td>大学要求老师开网店</td> </tr> <tr> <td>安全锤网上大热销</td> </tr> …… </tr> </table> ……
标题标签
…… <body> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> </body> ……
h1最大 h6最小 前后隔行
基本块级标签——段落
• 段落标签
前后换行， 类似教材中 的段落
<tr>…</tr> 定义行
<table>...
</ table>定 义表格
跨行、跨列
…… <table width="200" border="1"> <tr> <td colspan="3">学生成绩</td> </tr> <tr> <td rowspan="2">张三</td> <td>语文</td> <td>98</td> </tr> <tr> <td>数学</td> <td>95</td> </tr> ....代码同上两行.... </table> ……
单个标签的闭 合形式
横线用于内容 分割
常用布局的块级标签—— 有序列表
• 有序列表标签
有序列表 …… <body> <h3>注册步骤：</h3> <ol> <li>填写信息</li> <li>收电子邮件</li> <li>注册成功</li> </ol> </body> ……
常用布局的块级标签—— 无序列表
电子商务网站设计 PHP语言
信息与工程学院：朱晓晶
Tel：15368068582
E-mail：908160211@qq.com
第三章 静态网页技术
2016年9月18日星期 日
信息与工程学院
学习目标
• 3.1 HTML简介 • 3.2 HTML常用标签介绍 • 3.3 表格布局 • 3.4 表单布局 • 3.5 框架布局
…… <a href="../web1.htm">上级目录</a> <a href="../../web2.htm">上上级目录</a> …… 上上级目 录：../../
上级目录：../
云南工商学院：朱晓晶
超链接的三类应用场合
• 页面间链接
• 锚链接
• 功能性链接
常用于网站 导航
锚链接
• 实现锚链接 • 1、定义标记(锚)： <a name="标记名">目标位置</a>
行级标签——图像标签
• 图像标签
…… <img src="images/drink.jpg" alt="精品热卖：高清晰，30寸等离子电视" title="精品热卖：高清晰，30寸等离子电视" /> ……
行级标签——范围标签
• 范围标签<span> ：显示某行内的独特样式
…… <p>商品价格:仅售<span style="color:red;font-size:70px;">10</span>元</p> ……
这种效果可以和无序列表互相 替代，因dt是块状元素，所以 常用于图文混编的布局场合
…… <body> <dl> <dt>咖啡</dt> <dd>一种黑色的热饮料，原料据说是咖啡豆，非洲盛产这类原料。 </dd> <dd>可以提神，刺激神经。</dd> <dl> </body> ……
常用布局的块级标签—— 描述标签
<font size="7">一级主题</Font><br/> 一级主题阐述文字 <br /><Br /> <font size="5">二级主题</font><br /> 二级主题相关文字 <P>项目列表1 <p>项目列表2 <p>项目列表3
W3C提倡的Web结构
规范的示例
W3C提倡的Web结构： 1、内容（结构）和表现（样式） 分离 2、HTML内容结构要求语义化
超链接
…… <a href="span.html" target="_blank">灿坤蒸气电熨斗</a> …… 链接在新 窗口中打 开
相对地址：相对于当前目录的地址，常用
<a href="login/login.htm">登录</a>
绝对地址：指向目标地址的完整描述 ，少用
<a href="/memAdmin/login/login.htm">登录</a> <a href="http://www.sohu.com">搜狐</a>
• 无序列表标签
无序列表 <body> <h3>新人上路指南 </h3> <ul> <li>如何激活会员名？</li> <li>如何注册贵美会员？</li> <li>注册时密码设置有什么要求？</li> <li>贵美认证</li> </ul> </body>
常用布局的块级标签—— 描述标签
• 定义描述标签
功能性链接
• 邮箱、QQ链接等
…… <a href="mailto: guimeiWebMater@gmgw.com">站长信箱</a> ……
注释
<!--注释内容 -->
用于增加代码的可读 性，不显示 …… <!-- <li>被注释掉的行将不显示</li> --> <li>正常显示行1</li> <li>正常显示行2</li> ……
网页内容，可以是 文本、图像等
这部分包含文本、图像和链接，它包括在 这部分包括标题和其他说明信息，包括在 <html>…</html>标签标记 HTML<body>…</body> <head>…</head> 文档的开始和结束 标签内
网页的摘要信息
网页摘要信息利于浏览器解析和搜索引擎搜索：
使用<title>标签
<head> <title>搜狐-中国最大的门户网站</title> </head>
使用<meta>标签 （1）描述文档类型和字符编码 （2）描述搜索关键字和描述
<head> <head> <meta name= http-equiv="Content-Type" content="text/html; charset=gb2312" <meta "keywords" content= "淘宝,网上购物,在线交易 ,交易市场" /> /> </head> <meta name= "description" content= "淘宝网-亚洲最大、最安全的网上交易平台，提 供各类服饰、美容、家居、数码、……" /> </head>
• 浏览器：“解释和执行”HTML源码的工具
云南工商学院：朱晓晶
HTML文档的基本结构
<html> 网页标题 <head> <title>我的第一个网页 </title> </head> <body > Hello World! </body> </html>
<head>头部部分 HTML 网页 <body>主体部分
• 3.1 HTML简介 • 3.2 HTML常用标签介绍
• 3.3 表格布局
• 3.4 表单布局 • 3.5 框架布局
2016年9月18日星期 日
信息与工程学院
HTML页面中的块和行
行级：包 括文字、 图片等
块级： 块内包含 多行
块级标签
根据使用场合，块级标签又细分为：
基本块级标签
常用于布局的块级标签