基本块级标签3-2
段落标签
<p>……</p>
前后换行， …… <body> <h1>北京欢迎你</h1> <p>北京欢迎你，有梦想谁都了不起！/p> <p>有勇气就会有奇迹。</p> </body> …… 操作演示3：段落标签
基本块级标签3-3
水平线标签
<hr />
单个标签的闭 合形式 横线用于内容 分割
…… <body> <h1>北京欢迎你</h1> <hr /> <p>北京欢迎你，有梦想谁都了不起！/p> <p>有勇气就会有奇迹。</p> </body> ……
操作演示4：水平线标签
练习——基本块级标签
需求说明：
显示唐诗介绍（ UltraEdit环境 ）
分析应使用哪 些标签？
Index1.html
重置按钮 (reset)
表单的基本语法2-1
<form action="表单提交地址" method="提交方法"> … 文本框、按钮等表单元素… </form>
指定提交后，由 服务器上哪个处 理程序处理
指定向服务器提交的方法： 一般为post或get方法, post方法比较安全
表单的基本语法2-2
…… <form action="login.jsp" method="post"> <p>用户名：<input name="username" type="text" size="20" 表单输入元 maxlength="10" /></p> 素：input <p>密 码： <input name="pwd" type="password" size="20" /></p> <p><input type="submit" name="btn" value="提交" /> <input name="reset" type="reset" value="重填" /></p> </form> …… 表单提交地址和 方法的设置
常用于布局的块级标签7-2
无序列表标签
<ul> <li>列表项1</li> …… </ul>
<body> <h3>新人上路指南 </h3> <ul> <li>如何激活会员名？</li> <li>如何注册贵美会员？</li> <li>注册时密码设置有什么要求？</li> <li>贵美认证</li> </ul> </body>
基本块级标签3-1
标题标签
<h1>标题</h1> …… <h6>标题</h6>
…… <body> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> </body> ……
操作演示2：标题标签 h1最大 h6最小 前后隔行
操作演示10：分区标签
练习——常用于布局的块级标签
需求说明：
实现简单的商品购买页
分析应使用哪些 标签？
Index2.html
行级标签3-1
图像标签
为了不同浏览器之间的兼容，推荐使用 title属性 ，确保能显示提示文字
<img src= "图片地址" alt="提示文字" title="提示文字" />
上级目录：../
操作演示2：链接路径
为什么使用表单
表单的典型应用
提供搜 索工具 收集用户反 馈信息
用户登录 /注册
常见的表单元素
单行文本框 (text)
密码框 (password)
文本域 (textarea)
单选按钮 (radio)
复选框 (checkbox)
下拉列表 (select)
提交按钮 (submit)
操作演示10：密码框应用
表单元素的逐一介绍8-3
按钮
<input name= "名称" type= "按钮类型" value="按钮文字" src="图片按钮的图片url"> 普通按钮：button
提交按钮：submit 重置（清空）按钮：reset 图片按钮：image type="reset" name="reset" value=" 重填" /> type="submit" name="button" value="同意……" /> type="button" name="confirm" value="点播音乐" /> type="button" name="cancel" value="取消" /> type="image" src="images/login.gif" />
<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>
操作演示13：换行标签
练习——行级元素
需求说明：
注意HTML结构的语 义化，遵守 XHTML1.0基本规范
Index3.html
基本语法
<a href="链接地址" target="目标窗口位置"> 链接热点文本或图像 </a> …… <a href="span.html" target="_blank">灿坤蒸气电熨斗</a> …… 链接在新 窗口中打 开
HTML：Hyper Text Markup Language 超文本标签语言 HTML：网页的“源码” 浏览器：“解释和执行”HTML源码的工具
HTML告知浏览器如 何显示网页
HTML文档的基本结构
HTML文档的结构
<html> 网页标题 <head> <title>我的第一个网页 </title> </head> <body > Hello World! </body> </html> 网页内容，可以是 文本、图像等
第一章 HTML基本标签
预习检查
HTML文档的基本结构是什么？ 什么是块级、行级标签？
<h1>、<p>、<hr>分别代表什么？
插入一条直线用什么标签？
本章任务
制作图文并茂的商品介绍页
本章目标
使用HTML的基本结构创建网页 使用行级和块级标签组织页面内容 使用图像标签实现图文并茂的页面
什么是HTML
常用于布局的块级标签7-1
有序列表标签
<ol> <li>列表项1</li> …… </ol>
有序列表
…… <body> <h3>注册步骤：</h3> <ol> <li>填写信息</li> <li>收电子邮件</li> <li>注册成功</li> </ol> </body> …… 操作演示5：有序列表标签
…… <img src="images/drink.jpg" alt="精品热卖：高清晰，30寸等离子电视" title="精品热卖：高清晰，30寸等离子电视" /> ……
