基本标签(一)

1、HTML基本标签（一）什么是什么是HTMLHTML HTML：Hyper Text Markup Language 超文本标签语言 HTML：网页的“源码” 浏览器：“解释和执行”HTML源码的工具 HTML告知浏览器如告知浏览器如何显示网页何显示网页HTMLHTML文档的基本结构文档的基本结构 HTML文档的结构我的第一个网页我的第一个网页 Hello World!HTML 网页网页头部部分头部部分主体部分主体部分标签标记标签标记 HTML 文档的开始和结束文档的开始和结束网页标题网页标题网页内容，可以是网页内容，可以是文本、图像等文本、图像等这部分包括标题和其他说明信息，包括在这部分包括标

2、题和其他说明信息，包括在 标签内标签内这部分包含文本、图像和链接，它包括在这部分包含文本、图像和链接，它包括在 标签内标签内网页的摘要信息网页的摘要信息2-1 2-1 网页摘要信息利于浏览器解析和搜索引擎搜索：网页摘要信息利于浏览器解析和搜索引擎搜索：使用使用标签标签 搜狐搜狐-中国最大的门户网站中国最大的门户网站 网页的摘要信息网页的摘要信息2-1 2-1 使用使用标签标签（1）描述文档类型和字符编码）描述文档类型和字符编码（2）描述搜索关键字和描述）描述搜索关键字和描述提供搜索关键字和内容描述提供搜索关键字和内容描述信息，方便搜索引擎的搜索信息，方便搜索引擎的搜索 HTMLHTML页面中的

3、块和行页面中的块和行HTML标签分类（方便后续的布局设计）：标签分类（方便后续的布局设计）：块级标签：显示为块级标签：显示为“块块”状，前后隔一行状，前后隔一行 行级标签：按行逐一显示行级标签：按行逐一显示 分类好处：方便后续的布局设计分类好处：方便后续的布局设计 块级：块级：块内包含块内包含多行多行行级：包行级：包括文字、括文字、图片等图片等块级标签块级标签根据使用场合，块级标签又细分为：根据使用场合，块级标签又细分为：基本块级标签基本块级标签 常用于布局的块级标签常用于布局的块级标签 基本块级标签基本块级标签3-13-1标题标签 一级标题一级标题 二级标题二级标题 三级标题三级标题 四级标

4、题四级标题 五级标题五级标题 六级标题六级标题h1h1最大最大h6h6最小最小前后隔行前后隔行标题标题标题标题基本块级标签基本块级标签3-23-2段落标签 北京欢迎你北京欢迎你 北京欢迎你，有梦想谁都了不起！北京欢迎你，有梦想谁都了不起！/p 有勇气就会有奇迹。有勇气就会有奇迹。基本块级标签基本块级标签3-33-3水平线标签 北京欢迎你北京欢迎你 北京欢迎你，有梦想谁都了不起！北京欢迎你，有梦想谁都了不起！/p 有勇气就会有奇迹。有勇气就会有奇迹。横线用于内容横线用于内容分割分割单个标签的闭单个标签的闭合形式合形式练习练习基本块级标签基本块级标签 需求说明： 显示唐诗介绍 分析应使用哪分析应使

5、用哪些标签？些标签？常用于布局的块级标签常用于布局的块级标签7-17-1有序列表标签 注册步骤：注册步骤： 填写信息填写信息 收电子邮件收电子邮件 注册成功注册成功 有序列表有序列表 列表项列表项1 常用于布局的块级标签常用于布局的块级标签7-27-2无序列表标签 新人上路指南新人上路指南 如何激活会员名？如何激活会员名？ 如何注册贵美会员？如何注册贵美会员？ 注册时密码设置有什么要求？注册时密码设置有什么要求？ 贵美认证贵美认证无序列表无序列表 列表项列表项1 常用于布局的块级标签常用于布局的块级标签7-37-3定义描述标签 咖啡咖啡 一种黑色的热饮料，原料据说是咖啡豆，非洲盛产这类原料。一

6、种黑色的热饮料，原料据说是咖啡豆，非洲盛产这类原料。 可以提神，刺激神经。可以提神，刺激神经。这种效果可以和无序列表互相这种效果可以和无序列表互相替代，因替代，因dtdt是块状元素，所以是块状元素，所以常用于图文混编的布局场合常用于图文混编的布局场合 标题标题 描述描述1 图片的图片的HTML代码（后续讲解）代码（后续讲解） 商品名称：灿坤蒸气电熨斗商品名称：灿坤蒸气电熨斗 商品价格：商品价格：388元元 商品简介：金钢低血超硬超顺滑商品简介：金钢低血超硬超顺滑,140ml透明大水箱设计透明大水箱设计常用于布局的块级标签常用于布局的块级标签7-47-4 用定义描述标签实现图文混编的效果文字有一

7、定的缩进文字有一定的缩进常用于布局的块级标签常用于布局的块级标签7-57-5表格 百度 新浪 -表格表格 -行行 -列（单元格）列（单元格）常用于布局的块级标签常用于布局的块级标签7-67-6 表单 一般和一般和table使用：使用： . . . 常用于布局的块级标签常用于布局的块级标签7-77-7 分区标签 divdiv标签可内嵌到标签可内嵌到等标签等标签内，作为普通块状元素使用内，作为普通块状元素使用一般当作结构化块状元素使用，作一般当作结构化块状元素使用，作为逻辑分区（分块）即容器来使用为逻辑分区（分块）即容器来使用 新人上路新人上路 div其实就是一个其实就是一个. 小结小结1、div

8、-ul(ol)-li ：常用于分类导航或菜单等 2、div-dl-dt-dd ：常用于图文混编的场合 3、table-tr-td ：常用于图文布局或显示数据 4、form-table-tr-td：常用于布局表单 请说出实际开发常用的请说出实际开发常用的4种块状结构是什么？种块状结构是什么？练习练习常用于布局的块级常用于布局的块级标签标签 需求说明： 实现简单的商品购买页 分析应使用哪些分析应使用哪些标签？标签？行级标签行级标签3-13-1图像标签 为了不同浏览器之间的兼容，推荐使用为了不同浏览器之间的兼容，推荐使用title属性属性 ，确保能显示提示文字，确保能显示提示文字行级标签行级标签3-

9、23-2范围标签 ：显示某行内的独特样式 商品价格商品价格:仅售仅售10元元文本等行级内容文本等行级内容设置红色、大号字设置红色、大号字突出显示突出显示 行级标签行级标签3-33-3换行标签 北京欢迎你，有梦想谁都了不起！北京欢迎你，有梦想谁都了不起！ 有勇气就会有奇迹。有勇气就会有奇迹。 北京欢迎你，为你开天辟地北京欢迎你，为你开天辟地 流动中的魅力充满朝气。流动中的魅力充满朝气。 北京欢迎你，在太阳下分享呼吸北京欢迎你，在太阳下分享呼吸 在黄土地刷新成绩。在黄土地刷新成绩。 北京欢迎你，像音乐感动你北京欢迎你，像音乐感动你 让我们都加油去超越自己。让我们都加油去超越自己。 和和的区别：的区

10、别：前后不换行前后不换行为什么需要为什么需要W3CW3C标准标准 W3C：World Wide Web Consortium，万维网联盟 W3C的职能：负责制定和维护web行业标准 W3C标准包括：列的标准： HTML内容方面：XHTML 样式美化方面：CSS 结构文档访问方面：OM 页面交互方面：ECMAScript 制定统一的制定统一的web标准标准W3CNetscape的图标W3CW3C提倡的提倡的WebWeb结构结构规范的示例规范的示例一级主题一级主题1 一级主题阐述文字一级主题阐述文字 二级主题二级主题 二级主题阐述文字二级主题阐述文字 项目列表项目列表1 项目列表项目列表2 项目列表项目列表3 W3C提倡的提倡的Web结构：结构：1、内容（结构）和表现（样式）、内容（结构）和表现（样式）分离分离2、HTML内容结构要求语义化内容结构要求语义化 body部分内容部分内容XHTML 1.0XHTML 1.0基本规范基本规范标签名和属性名称必须小写标签名和属性名称必须小写 HTML标签必须关闭标签必须关闭 属性值必须用引号括起来属性值必须用引号括起来 标签必须正确嵌套标签必须正确嵌套 必须添加文档类型声明必须添加文档类型声