常用于布局的块级标签7-4
用定义描述标签实现图文混编的效果
文字有一定的缩进
…… <body> <dl> <dt> 图片的HTML代码（后续讲解）……<dt> <dd>商品名称：灿坤蒸气电熨斗</dd> <dd>商品价格：388元</dd> <dd>商品简介：金钢低血超硬超顺滑,140ml透明大水箱设计</dd> </dl> </body> ……
…… <body> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> </body> ……
h1最大 h6最小 前后隔行
基本块级标签3-2
段落标签
<p>……</p>
前后换行， 类似教材中 的段落 …… <body> <h1>北京欢迎你</h1> <p>北京欢迎你，有梦想谁都了不起<p> <p>有勇气就会有奇迹。</p> </body> ……
有序列表
以<ol>标签来实现
以<li>标签表示列表项
1(数字，默认)、 A（大写字母）、a（小
写字母）、I（大写罗马数字）和i（小写 罗马数字）
以<dl>标签是实现 定义类表 以<dt>标签定义列表项 以<dd>标签定义内容
31
无项目符号和显示顺序
分别使用哪种列表？
常用于布局的块级标签7-5
表格
分区标签 <div>
常用于布局的块级标签7-7
…… <div style="width:400px; height:300px; background:#9FF"> <p>……</p> <h3>新人上路</h3> div标签可内嵌到<p>等标签 <ul> 内，作为普通块状元素使用 …… </ul> div其实就是一个...... </div> …… 一般当作结构化块状元素使用，作 为逻辑分区（分块）即容器来使用
HTML告知浏览器如 何显示网页
HTML简介
HTML：Hyper Text Markup Language
HTML5 XHTML2.0 2013-5-6 XHTML1.1
目前网页中常用
XHTML1.0 2001-5-31
HTML4.01 2000-1-26 HTML4.0 1999-12-24 HTML3.2 1997-12-18 HTML2.0 1996-1-14 1995-11 1993-6
UltraEdit工作界面
网页的摘要信息2-1
网页摘要信息利于浏览器解析和搜索引擎搜索： 使用<title>标签
<head> <title>搜狐-中国最大的门户网站</title> </head>
网页的摘要信息2-1
使用<meta>标签
（1）描述文档类型和字符编码 （2）描述搜索关键字和描述
<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> </head> 提供搜索关键字和内容描述 信息，方便搜索引擎的搜索 <head> <meta name= "keywords" content= "淘宝,网上购物,在线交易,交易市场" /> <meta name= "description" content= "淘宝网-亚洲最大、最安全的网上交易 平台，提供各类服饰、美容、家居、数码、……" /> </head>
基本块级标签3-3
水平线标签
<hr />
单个标签的闭 合形式 横线用于内容 分割
…… <body> <h1>北京欢迎你</h1> <hr /> <p>北京欢迎你，有梦想谁都了不起！/p> <p>有勇气就会有奇迹。</p> </body> ……
常用于布局的块级标签7-1
有序列表标签
声明有序列表
<body>主体部分
这部分包含文本、图像和链接，它包括在 这部分包括标题和其他说明信息，包括在 <html>…</html>标签标记 HTML<body>…</body> <head>…</head> 文档的开始和结束 标签内
HTML的编辑工具
记事本 UltraEdit
操作演示：在记事本里创建网页
W3C提倡的Web结构
规范的示例
<h1>一级主题1</h1> <p>一级主题阐述文字</p> <h2>二级主题</h2> <p>二级主题阐述文字</p> <ul> <li>项目列表1</li> <li>项目列表2</li> <li>项目列表3</li> </ul> W3C提倡的Web结构： 1、内容（结构）和表现（样式） 分离 2、HTML内容结构要求语义化
<ol> <li>列表项1</li> …… </ol> 声明列表项
…… <body> <h3>注册步骤：</h3> <ol> <li>填写信息</li> <li>收电子邮件</li> <li>注册成功</li> </ol> </body> ……
有序列表
什么是列表 列表的分类
无序列表 有序列表 定义列表
<img src="path" alt="text" title="text" width="x" height="y" />
图像地址
图像的替代文字
图像宽度
示例
<img src="image/hetao.jpg" width="160" height="160" alt="无漂白薄皮核桃" title="无漂白薄皮核桃"/>
无序列表
列表的应用
<ul type="circle"> <li>桔子</li> 无序列表的类型 <li>香蕉</li> <li> 苹果</li> type 取值 </ul>
取值 disc square circle
说明 项目符号显示为实体圆心,默认值 项目符号显示为实体方心 项目符号显示为空心圆
演示示例：无序列表的类型
12
文本标记语言
HTML文档的基本结构
HTML文档的结构
<html> 网页标题 <head> <title>我的第一个网页 </title> </head> <body > Hello World! </body> </html> 网页内容，可以是 文本、图像等
<head>头部部分 HTML 网页
演示示例：图像 37
图像标签
常见的图像格式
JPG GIF PNG BMP
38
行级标签3-2
换行标签 <br/>
和<p>的区别： 前后不换行
…… <p> 北京欢迎你，有梦想谁都了不起！<br /> 有勇气就会有奇迹。<br /> 北京欢迎你，为你开天辟地<br /> 流动中的魅力充满朝气。<br /> 北京欢迎你，在太阳下分享呼吸<br /> 在黄土地刷新成绩。<br /> 北京欢迎你，像音乐感动你<br /> 让我们都加油去超越自己。<br /> </p> ……
定义列表
列表
有序列表
无序列表
24
列表的应用
<ol type="a"> <li>桔子</li> 有序列表的类型 <li>香蕉</li> <li>苹果</li> type取值 </ol>
取值
1 A/a I/i
说明
使用数字作为项目符号，默认值 使用大写/小写字母作为项目符号 使用大写/小写罗马数字作为项目符号
样式美化方面：CSS 结构文档访问方面：DOM 页面交互方面：ECMAScript ……
W3C
Netscape 的图标
