HTML网页中元素和属性
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页设计与制作
第3章 HTML网页中元素和属性
学习目标
在完成本章的学习，要完成的目标： ✓ HTML列表元素 ✓ HTML图像标记 ✓ HTML5的新增元素 ✓ HTML5的全局属性设置
目录
❖ 3.1 列表元素
❖ 3.3 HTML5中的页面元素
❖ 3.1.1无序列表<ul>
及属性
❖ 3.1.2有序列表<ol>
<ul> <li>无序列表项</li> <li>无序列表项</li> <li>无序列表项</li> <li>无序列表项</li>
</ul>
3.1 列表元素
3.1.1无序列表<ul> 在无序列表结构中，使用<ul></ul>标记表示这一个 无序列表的开始和结束，<li>则表示一个列表项的开始。 在一个无序列表中可以包含多个列表项，并且<li>可以 省略结束标记。 例题3-1：使用无序列表实现文本的排列显示，代码 如下：
<dt>计算机</dt> <dd>用来计算的仪器 ... ...</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd> </dl> </body> </html>
<dl> <dt>内容块的标题</dt> <dd>内容</dd>
</dl>
例题3-3：描述性列表的使用，代码如下：
3.1 列表元素
3.1.3 描述性列表<wk.baidu.coml>、<dt>、<dd>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>描述性列表的使用</title> </head> <body> <dl>
</ul> </li> <li>网页草图
<ul> <li>制作网页草图</li> <li>将草图转化为网页</li> </ul> </li>
<li>站点建设</li> <li>网页布局</li>
<li>网站测试</li> <li>站点发布与管理</li> </ul> </body> </html>
3.1 列表元素
<li>项目需求</li> <li>系统分析
<ul> <li>网站的定位</li> <li>内容的收集</li>
3.1 列表元素
3.1.1无序列表<ul>
<li>栏目的规划</li> <li>网站的目录结构设计</li> <li>网站的标志设计</li> <li>网站的风格设计</li> <li>网站的导航系统设计</li>
❖ 3.3.1分组元素
❖ 3.1.3 描述性列表<dl>、<dt>、<dd❖> 3.3.2页面交互元素
❖ 3.2 图像标记
❖ 3.3.3文本层次语义元素
❖ 3.2.1背景图案的设定
❖ 3.3.4全局元素
❖ 3.2.2网页中插入图像
❖ 3.4 综合案例
❖ 3.2.3<img>标签属性的使用
3.1 列表元素
<ol> <li>第1项</li> <li>第2项</li> <li>第3项</li>
</ol>
3.1 列表元素
3.1.2有序列表<ol>
例题3-2：是使用有序列表实现文本的排列显示，代码如下：
<h4>数字列表：</h4> <ol> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ol> <h4>字母列表：</h4> <ol type="A"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ol>
文字列表可以有序地编排一些信息资源，使其结 构化和条理化，并以列表的样式显示出来，以便浏览者 能更加快捷的获得相应信息。HTML中的文字列表如同 文字编辑软件Word中的项目符号和自动编号。
3.1 列表元素
3.1.1无序列表<ul> 无序列表相当于Word中的项目符号，无序列表的项 目排列没有顺序，只以符号作为分项标识。无序列表使 用 一 对 标 记 <ul></ul> ， 其 中 每 一 个 列 表 项 使 用 <li></li>，其具体语法格式如下：
3.1.1无序列表<ul> 在浏览器中预览的效果图，读者会发现，无序列表项 中，可以嵌套一个列表。如代码中的“系统分析”列 表项和“网页草图”列表项中都有下级列表。因为在 这对<li></li>标记中又增加了一对<ul></ul>标记。
3.1 列表元素
3.1.2有序列表<ol> 有序列表类似于Word中的自动编号功能，有序列表 的使用方法和无序列表的使用方法基本相同，它使用 标记<ol></ol>，每一个列表项使用<li></li>。每一 个项目都有前后顺序之分，通常用数字表示，其具体 语法格式如下：
<h4>罗马字母列表：</h4> <ol type="I"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ol>
3.1 列表元素
3.1.2有序列表<ol>
例题3-2：是使用有序列表实现文本的排列显示，代码如下：
…… <h4>数字列表：</h4> <ol> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ol> <h4>字母列表：</h4> <ol type="A"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ol>
<h4>罗马字母列表：</h4> <ol type="I"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ol> ……
3.1 列表元素
3.1.3 描述性列表<dl>、<dt>、<dd>
描述性列表又称定义列表，是由<dl> 标签结合 <dt> （定义 列表中的项目）和 <dd> （描述列表中的项目）组成的，其具 体语法格式如下：
3.1 列表元素
3.1.1无序列表<ul>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>嵌套无序列表的使用</title> </head> <body> <h1>网站建设流程</h1> <ul>
第3章 HTML网页中元素和属性
学习目标
在完成本章的学习，要完成的目标： ✓ HTML列表元素 ✓ HTML图像标记 ✓ HTML5的新增元素 ✓ HTML5的全局属性设置
目录
❖ 3.1 列表元素
❖ 3.3 HTML5中的页面元素
❖ 3.1.1无序列表<ul>
及属性
❖ 3.1.2有序列表<ol>
<ul> <li>无序列表项</li> <li>无序列表项</li> <li>无序列表项</li> <li>无序列表项</li>
</ul>
3.1 列表元素
3.1.1无序列表<ul> 在无序列表结构中，使用<ul></ul>标记表示这一个 无序列表的开始和结束，<li>则表示一个列表项的开始。 在一个无序列表中可以包含多个列表项，并且<li>可以 省略结束标记。 例题3-1：使用无序列表实现文本的排列显示，代码 如下：
<dt>计算机</dt> <dd>用来计算的仪器 ... ...</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd> </dl> </body> </html>
<dl> <dt>内容块的标题</dt> <dd>内容</dd>
</dl>
例题3-3：描述性列表的使用，代码如下：
3.1 列表元素
3.1.3 描述性列表<wk.baidu.coml>、<dt>、<dd>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>描述性列表的使用</title> </head> <body> <dl>
</ul> </li> <li>网页草图
<ul> <li>制作网页草图</li> <li>将草图转化为网页</li> </ul> </li>
<li>站点建设</li> <li>网页布局</li>
<li>网站测试</li> <li>站点发布与管理</li> </ul> </body> </html>
3.1 列表元素
<li>项目需求</li> <li>系统分析
<ul> <li>网站的定位</li> <li>内容的收集</li>
3.1 列表元素
3.1.1无序列表<ul>
<li>栏目的规划</li> <li>网站的目录结构设计</li> <li>网站的标志设计</li> <li>网站的风格设计</li> <li>网站的导航系统设计</li>
❖ 3.3.1分组元素
❖ 3.1.3 描述性列表<dl>、<dt>、<dd❖> 3.3.2页面交互元素
❖ 3.2 图像标记
❖ 3.3.3文本层次语义元素
❖ 3.2.1背景图案的设定
❖ 3.3.4全局元素
❖ 3.2.2网页中插入图像
❖ 3.4 综合案例
❖ 3.2.3<img>标签属性的使用
3.1 列表元素
<ol> <li>第1项</li> <li>第2项</li> <li>第3项</li>
</ol>
3.1 列表元素
3.1.2有序列表<ol>
例题3-2：是使用有序列表实现文本的排列显示，代码如下：
<h4>数字列表：</h4> <ol> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ol> <h4>字母列表：</h4> <ol type="A"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ol>
文字列表可以有序地编排一些信息资源，使其结 构化和条理化，并以列表的样式显示出来，以便浏览者 能更加快捷的获得相应信息。HTML中的文字列表如同 文字编辑软件Word中的项目符号和自动编号。
3.1 列表元素
3.1.1无序列表<ul> 无序列表相当于Word中的项目符号，无序列表的项 目排列没有顺序，只以符号作为分项标识。无序列表使 用 一 对 标 记 <ul></ul> ， 其 中 每 一 个 列 表 项 使 用 <li></li>，其具体语法格式如下：
3.1.1无序列表<ul> 在浏览器中预览的效果图，读者会发现，无序列表项 中，可以嵌套一个列表。如代码中的“系统分析”列 表项和“网页草图”列表项中都有下级列表。因为在 这对<li></li>标记中又增加了一对<ul></ul>标记。
3.1 列表元素
3.1.2有序列表<ol> 有序列表类似于Word中的自动编号功能，有序列表 的使用方法和无序列表的使用方法基本相同，它使用 标记<ol></ol>，每一个列表项使用<li></li>。每一 个项目都有前后顺序之分，通常用数字表示，其具体 语法格式如下：
<h4>罗马字母列表：</h4> <ol type="I"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ol>
3.1 列表元素
3.1.2有序列表<ol>
例题3-2：是使用有序列表实现文本的排列显示，代码如下：
…… <h4>数字列表：</h4> <ol> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ol> <h4>字母列表：</h4> <ol type="A"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ol>
<h4>罗马字母列表：</h4> <ol type="I"> <li>苹果</li> <li>香蕉</li> <li>柠檬</li> <li>桔子</li> </ol> ……
3.1 列表元素
3.1.3 描述性列表<dl>、<dt>、<dd>
描述性列表又称定义列表，是由<dl> 标签结合 <dt> （定义 列表中的项目）和 <dd> （描述列表中的项目）组成的，其具 体语法格式如下：
3.1 列表元素
3.1.1无序列表<ul>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>嵌套无序列表的使用</title> </head> <body> <h1>网站建设流程</h1> <ul>