HTML基本标签
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
…… <p> 商品价格 : 仅售 <span style="color:red;font-size:70px;">10</span> 元 </p> ……
操作演示12：span标签
行级标签3-3
换行标签 <br/>
…… <p> 北京欢迎你，有梦想谁都了不起！<br /> 有勇气就会有奇迹。<br /> 北京欢迎你，为你开天辟地<br /> 流动中的魅力充满朝气。<br /> 北京欢迎你，在太阳下分享呼吸<br /> 在黄土地刷新成绩。<br /> 北京欢迎你，像音乐感动你<br /> 让我们都加油去超越自己。<br /> </p> …… 和<p>的区别： 前后不换行
基本块级标签3-1
标题标签
<h1>标题</h1> …… <h6>标题</h6>
…… <body> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> </body> ……
操作演示2：标题标签 h1最大 h6最小 前后隔行
…… <body> <h1>北京欢迎你</h1> <hr /> <p>北京欢迎你，有梦想谁都了不起！/p> <p>有勇气就会有奇迹。</p> </body> ……
操作演示4：水平线标签
练习——基本块级标签
需求说明：
显示唐诗介绍（ UltraEdit环境 ）
分析应使用哪 些标签？
Index1.html
操作演示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" />
常用于布局的块级标签7-4
用定义描述标签实现图文混编的效果
文字有一定的缩进
…… <body> <dl> <dt> 图片的HTML代码（后续讲解）……<dt> <dd>商品名称：灿坤蒸气电熨斗</dd> <dd>商品价格：388元</dd> <dd>商品简介：金钢低血超硬超顺滑,140ml透明大水箱设计</dd> </dl> </body> ……
常用于布局的块级标签7-1
有序列表标签
<ol> <li>列表项1</li> …… </ol>
有序列表
…… <body> <h3>注册步骤：</h3> <ol> <li>填写信息</li> <li>收电子邮件</li> <li>注册成功</li> </ol> </body> …… 操作演示5：有序列表标签
常用于布局的块级标签7-5
表格
<table> <tr> <td>百度</td> <td>新浪</td> </tr> …… </dl>
<table>--表格 <tr> --行 <td> --列（单元格）
演示示例8：表格标签
常用于布局的块级标签7-7
分区标签 <div>
…… <div style="width:400px; height:300px; background:#9FF"> <p>……</p> <h3>新人上路</h3> div标签可内嵌到<p>等标签 <ul> 内，作为普通块状元素使用 …… </ul> div其实就是一个...... </div> …… 一般当作结构化块状元素使用，作 为逻辑分区（分块）即容器来使用
第一章 HTML基本标签
预习检查
HTML文档的基本结构是什么？ 什么是块级、行级标签？
<h1>、<p>、<hr>分别代表什么？
插入一条直线用什么标签？
本章任务
制作图文并茂的商品介绍页
本章目标
使用HTML的基本结构创建网页 使用行级和块级标签组织页面内容 使用图像标签实现图文并茂的页面
什么是HTML
HTML：Hyper Text Markup Language 超文本标签语言 HTML：网页的“源码” 浏览器：“解释和执行”HTML源码的工具
HTML告知浏览器如 何显示网页
HTML文档的基本结构
HTML文档的结构
<html> 网页标题 <head> <title>我的第一个网页 </title> </head> <body > Hello World! </body> </html> 网页内容，可以是 文本、图像等
表单元素的逐一介绍8-2
密码框
<input name= "名称" type="password" value="初值" size="数字">
<form method="post" action=""> <p>密 码： <input name="pass" type="password" size="22" /> </p> …… 隐藏输入的信息 </form>
操作演示9：表单应用
表单元素的基本格式
控件的名称 指定元素的类型，可 为text、radio、 submit等 控件的初始值
<input name="表单元素名称" type="类型" value="值" size="显示宽度" maxlength="对大长度" checked="是否选中" /> 控件是否 被选中 checked
常用于布局的块级标签7-2
无序列表标签
<ul> <li>列表项1</li> …… </ul>
<body> <h3>新人上路指南 </h3> <ul> <li>如何激活会员名？</li> <li>如何注册贵美会员？</li> <li>注册时密码设置有什么要求？</li> <li>贵美认证</li> </ul> </body>
基本块级标签3-2
段落标签
<p>……</p>
前后换行， …… <body> <h1>北京欢迎你</h1> <p>北京欢迎你，有梦想谁都了不起！/p> <p>有勇气就会有奇迹。</p> </body> …… 操作演示3：段落标签
基本块级标签3-3
水平线标签
<hr />
单个标签的闭 合形式 横线用于内容 分割
控件中输入的 最多字符个数
控件的初始 宽度
表单元素的逐一介绍8-1
文本框
<input name= "名称" type= "text" value= "初值" size= "数字">
<form method="post" action=""> <p>用户名： <input name= "userName" type="text" size="21" /> </p> …… 单行文本输入框， </form> 字符宽度为21 name用于服务器端获取数据，例如： request.getParameter("userName ") 操作演示10：文本框应用
操作演示10：分区标签
练习——常用于布局的块级标签
需求说明：
实现简单的商品购买页
分析应使用哪些 标签？
Index2.html
行级标签3-1
图像标签
为了不同浏览器之间的兼容，推荐使用 title属性 ，确保能显示提示文字
<img src= "图片地址" alt="提示文字" title="提示文字" />
操作演示13：换行标签
练习——行级元素
需求说明：
注意HTML结构的语 义化，遵守 XHTML1.0基本规范
Index3.html
基本语法
<a href="链接地址" target="目标窗口位置"> 链接热点文本或图像 </a> …… <a href="span.html" target="_blank">灿坤蒸气电熨斗</a> …… 链接在新 窗口中打 开
重置按钮 (reset)
表单的基本语法2-1
<form action="表单提交地址" method="提交方法"> … 文本框、按钮等表单元素… </form>
指定提交后，由 服务器上哪个处 理程序处理
指定向服务器提交的方法： 一般为post或get方法, post方法比较安全
表单的基本语法2-2
<head>头部部分 HTML 网页
<body>主体部分
这部分包含文本、图像和链接，它包括在 这部分包括标题和其他说明信息，包括在 <html>…</html>标签标记 HTML<body>…</body> <head>…</head> 文档的开始和结束 标签内
网页的摘要信息2-1
网页摘要信息利于浏览器解析和搜索引擎搜索： 使用<title>标签
…… <img src="images/drink.jpg" alt="精品热卖：高清晰，30寸等离子电视" title="精品热卖：高清晰，30寸等离子电视" /> ……
源自文库
操作演示11：图像标签
行级标签3-2
范围标签<span> ：显示某行内的独特样式
<span >文本等行级内容</span>
设置红色、大号字 突出显示
上级目录：../
操作演示2：链接路径
为什么使用表单
表单的典型应用
提供搜 索工具 收集用户反 馈信息
用户登录 /注册
常见的表单元素
单行文本框 (text)
密码框 (password)
文本域 (textarea)
单选按钮 (radio)
复选框 (checkbox)
下拉列表 (select)
提交按钮 (submit)
操作演示6：无序列表标签
无序列表
常用于布局的块级标签7-3
定义描述标签
<dl> <dt>标题</dt> <dd>描述1</dd> …… </dl>
这种效果可以和无序列表互相 替代，因dt是块状元素，所以 常用于图文混编的布局场合
…… <body> <dl> <dt>咖啡</dt> <dd>一种黑色的热饮料，原料据说是咖啡豆，非洲盛产这类原料。</dd> <dd>可以提神，刺激神经。</dd> <dl> </body> …… 操作演示7：dl和dt标签
<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>
…… <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> …… 表单提交地址和 方法的设置
HTML页面中的块和行
HTML标签分类（方便后续的布局设计）：
块级标签：显示为“块”状，前后隔一行 行级标签：按行逐一显示
分类好处：方便后续的布局设计
行级：包 括文字、 图片等 块级： 块内包含 多行
块级标签
根据使用场合，块级标签又细分为：
基本块级标签：标题标签<h1>,段落标签<P>,水平标 签<hr> 常用于布局的块级标签 有序列表<ol>，无序列表<ul>，定义列表<dl>，表格 <table>，表单<form>，分区标签<div>
操作演示1：超链接
链接路径
相对地址：相对于当前目录的地址，常用
<a href="login/login.htm">登录</a>
绝对地址：指向目标地址的完整描述 ，少用
<a href="http://www.sohu.com">搜狐</a>
…… <a href="../web1.htm">上级目录</a> <a href="../../web2.htm">上上级目录</a> …… 上上级目 录：../../