第1章 HTML基本标签和表单
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
课程项目展示
贵美商城
首页 商品展示页（点击左边“商品分类”任一链接） 具体商品详细介绍页（点击任一商品图片） 购物车页面（点击“立刻购买”按钮） 登录页（点击右上方的导航菜单） 注册页（点击右上方的导航菜单） 帮助中心客服页面（点击右上方的导航菜单）
本章任务 1. 制作图文并茂的商品介绍页
1.1.2 HTML的编辑工具
记事本 UltraEdit
操作演示1：在记事本里创建网页
1.1.3 网页的摘要信息（<title>标签）
网页摘要信息利于浏览器解析和搜索引擎搜索： 使用<title>标签
<head> <title>搜狐-中国最大的门户网站</title> </head>
1.1.3 网页的摘要信息（<meta>标签）
</head> 实现的方式仍然为“名称/值”对的形式，其中keywords 表示搜索关键字， description表示同站内容的具体描述。 设置keyword、description的好处，提高被google、百度等搜索到的命 中率和排名。
1.2 HTML页面中的块和行
HTML标签分类（方便后续的布局设计）：
章节目录
第 1章 第 2章 第 3章 第 4章 第 5章 第 6章 HTML基本标签和表单 HTML表格和框架 CSS样式表 贵美商城网站设计和实现 JavaScript基本语法 函数和window对象
计划学时
3 3 3 3 3 3
学习方法很重要
复习并掌握先修课的有关内容 课堂：听讲与理解、适当笔记 课后：认真读书、完成作 实验：充分准备、勇于实践 总成绩＝考试成绩＋平时成绩 学习 要求
1.2.2 常用于布局的块级标签
用定义描述标签实现图文混编的效果
文字有一定的缩进
…… <body> <dl> <dt> <img src=“images/iron.jpg”> </dt> <dd>商品名称：灿坤蒸气电熨斗</dd> <dd>商品价格：388元</dd> <dd>商品简介：金钢低血超硬超顺滑,140ml透明大水箱设计</dd> </dl> Fra Baidu bibliotek/body> ……
1.3.1 图像标签
为了不同浏览器之间的兼容，推荐使用 title属性 ，确保能显示提示文字
<img src= "图片地址" alt="提示文字" title="提示文字" /> …… <img src="images/drink.jpg" alt="精品热卖：高清晰，30寸等离子 电视" title="精品热卖：高清晰，30寸等离子电视" /> …… alt 属性用来为图像 定义一串预备的可替 换的文本。在浏览器 无法载入图像时，浏 览器将显示替代性文 本 title属性是在你鼠标悬停在该图片上时 显示一个小提示
<meta>标签可提供有关页面的元信息（meta-information）， 包括文档内容类型、字符编码信息、搜索关键字、网主提供的 功能和服务的详细描述等。 <meta> 标签描述的内容并不显示，其目的是方便浏览器解析 或利于搜索引擎搜索 <meta> 标签位于文档的头部，不包含任何内容。<meta> 标 签的属性定义了与文档相关联的名称/值对。
1.2.2 常用于布局的块级标签
2. 无序列表标签
<ul> <li>列表项1</li> …… </ul>
<body> <h3>新人上路指南 </h3> <ul> <li>如何激活会员名？</li> <li>如何注册贵美会员？</li> <li>注册时密码设置有什么要求？</li> <li>贵美认证</li> </ul> </body>
可选属性
属性 http-equiv 值 •content-type •expires •refresh •set-cookie •author •description •keywords •generator •revised •others 描述 把 content 属性关联到 HTTP 头部。
…… <body> <h1>北京欢迎你</h1> <hr /> <p>北京欢迎你，有梦想谁都了不起！ /p> <p>有勇气就会有奇迹。</p> </body> ……
1.2.2 常用于布局的块级标签
1.有序列表标签
<ol> <li>列表项1</li> …… </ol>
有序列表
…… <body> <h3>注册步骤：</h3> <ol> <li>填写信息</li> <li>收电子邮件</li> <li>注册成功</li> </ol> </body> ……
HTML文档的结构
<html> 网页标题 <head> <title>我的第一个网页 </title> </head> <body > Hello World! </body> </html>
网页内容，可以 是文本、图像等
<head>头部部分 HTML 网页 <body>主体部分
这部分包含文本、图像和链接，它包括在 这部分包括标题和其他说明信息，包括在 <html>…</html>标签标记 HTML<body>…</body> <head>…</head> 文档的开始和结束 标签内
1.2 小结
请说出实际开发常用的4种块状结构是什么？
1、div-ul(ol)-li ：常用于分类导航或菜单等 2、div-dl-dt-dd ：常用于图文混编的场合 3、table-tr-td ：常用于图文布局或显示数据 4、form-table-tr-td：常用于布局表单
1.3 行级标签
行级标签也称内联标签、行内标签。 使用块级标签为页面 “ 搭建完成组织结构 ” 后，往每个小 区块添加内容时.就需要用到行级标签。 行级标签类似文本的显示、按“行”逐一显示。 常用的行级标签包括图像标签<img> 、超链接标签<a> 、 范围标签<span>、 换行标签< br />以及和表单相关 的输入框标签<input / > 文本域标签<textarea> 等。 表单涉及的行级标签将在后面详细介绍。
必需的属性
属性 content 值 some_text 描述 定义与 http-equiv 或 name 属性相关的元信息
1.1.3 网页的摘要信息（<meta>标签）
<meta> 标签的属性定义了与文档相关联的名称/值对。 必需的属性
属性 content 值 some_text 描述 定义与 http-equiv 或 name 属性相关的元信息
无序列表
1.2.2 常用于布局的块级标签
3. 定义描述标签
<dl> <dt>标题</dt> <dd>描述1</dd> …… </dl> 这种效果可以和无序列表互相 替代，因dl是块状元素，所以 常用于图文混编的布局场合
…… <body> <dl> <dt>咖啡</dt> <dd>一种黑色的热饮料，原料据说是咖啡豆，非洲盛产这类原料。</dd> <dd>可以提神，刺激神经。</dd> <dl> </body> ……
1.2.2 常用于布局的块级标签
6. 分区标签 <div>
…… <div style="width:400px; height:300px; background:#9FF"> <p>……</p> <h3>新人上路</h3> div标签可内嵌到<p>等标签 <ul> 内，作为普通块状元素使用 …… </ul> div其实就是一个...... </div> …… 一般当作结构化块状元素使用，作 为逻辑分区（分块）即容器来使用
本章任务 2. 制作页面间导航 3. 制作“注册”表单页面
1.1 HTML文档的基本结构
HTML：Hyper Text Markup Language 超文本标签语 言 HTML：网页的“源码” 浏览器：“解释和执行”HTML源码的工具
HTML告知浏览器如 何显示网页
1.1.1 基本结构
1.2.1基本块级标签
1. 标题标签
<h1>标题</h1> …… <h6>标题</h6>
…… <body> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> </body> …… h1最大 h6最小 前后隔行
网页设计与开发—HTML、CSS、JavaScript
网页设计技能结构图一
网页设计技能结构图二
本门课程目标
学完本门课程后，你能够：
制作界面美观大方、面向企业应用的静态商业网站 掌握Web开发的行业规范和标准 使用JavaScript实现表单验证 使用JavaScript制作网页广告特效 使用JavaSctipt制作弹出窗口特效 使用JavaScript实现时钟特效 使用JavaScript实现级联显示功能 使用JavaScript+CSS制实现CSS样式特效 使用JavaScript动态创建页面元素
块级标签：显示为“块”状，前后隔一行 行级标签：按行逐一显示
分类好处：方便后续的布局设计
行级：包 括文字、 图片等 块级： 块内包含 多行
1.2 HTML页面中的块和行
块级标签显示的外观按“块”显示，具有一定的高度和宽 度，例如<div>块标签、<p>段落标签等 行级标签显示的外现为按“行”显示，类似文本的显示， 例如<img>图片标签、<a>超链接标签等。 和行级标签相比，块级标签具有如下特点： 前后断行显示，默认状态下占用一整行 具有一定的宽度和高度，可以通过设置块级标签的 width、 height 属性来控制 块级标签常用作容器.即可以再容纳其他块级标签或行级标 签。而行级标签一般用于组织内容，即只能用于“容纳” 文字、图片或其他行级标签。 从页面布局的角度，块级标签又可细分为基本块级标签和 常用于页面布局的块级标签。
1.1.3网页的摘要信息（<meta>标签）
使用<meta>标签
（2）描述搜索关键字和描述
提供搜索关键字和内容描述 信息，方便搜索引擎的搜索
<head>
<meta name= "keywords" content= "淘宝,网上购物,在线交易,交易市场" /> <meta name= "description" content= "淘宝网-亚洲最大、最安全的网上交易 平台，提供各类服饰、美容、家居、数码、……" />
1.2.1 基本块级标签
2. 段落标签
<p>……</p>
前后换行， 类似教材中 的段落
…… <body> <h1>北京欢迎你</h1> <p>北京欢迎你，有梦想谁都了不起！/p> <p>有勇气就会有奇迹。</p> </body> ……
1.2.1 基本块级标签
3. 水平线标签
<hr />
单个标签的 闭合形式 横线用于内 容分割
1.2.2 常用于布局的块级标签
4. 表格
<table> <tr> <td>百度</td> <td>新浪</td> </tr> …… </table >
<table>--表格 <tr> --行 <td> --列（单元格）
表格的用法将在后续详细介绍
1.2.2 常用于布局的块级标签
5. 表单
<form> …… </form> 一般和table使用： <form> <table> <tr> <td>...</td> <td>...</td> </tr> ..... </table> </form> 表单标签用于描述需要用户输入的页面内容。
参考书
王 津 涛 ， 孟 庆 昌 ， 页 设 计 与 开 发 —HTML 、 CSS 、 JavaScript，清华大学出版社，2012
参考书
第1章 HTML基本标签和表单
本章目标
使用HTML的基本结构创建网页 使用行级和块级标签组织页面内容 使用图像标签实现图文并茂的页面 使用超链接实现页面间导航 使用各种表单元素实现注册页面
name
把 content 属性关联到一个名称。
1.1.3网页的摘要信息（<meta>标签）
使用<meta>标签
（1）描述文档类型和字符编码
<head>
<meta http-equiv=“content-type" content="text/html; charset=gb2312" />
</head> 属性http-equiv 提供“名称/值”中的名称， 属性conent 提供“名称/ 值” 中的值，上述HTML 代码的含义如下： 名称: content-type (文档内容类型) 值: text/html: charset=gb2312 (文本类别html，字符编码为简体中文)