使用HTML制作网页_第1页
使用HTML制作网页_第2页
使用HTML制作网页_第3页
使用HTML制作网页_第4页
使用HTML制作网页_第5页
已阅读5页，还剩46页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

使用HTML制作网页

第二单元《静态网页制作》本门课程目标学完本门课程后，你能够：使用HTML进行网页布局使用CSS美化网页使用JavaScript制作网页特效课程项目展示当当网上书城演示示例：当当网上书城本课任务制作图文并茂的简单网页李清照简介页面家用电器排行榜页面4/37本课目标学完本次课程后，你能够：熟练掌握HTML基本结构创建网页熟练掌握HTML的基本标签掌握超链接标签制作页面导航熟练掌握表格标签制作网页表格会使用表单标签制作提交页面了解XHTML框架结构

什么是HTMLHTMLHyperTextMarkupLanguage（超文本标记语言）超文本包括：文字、图片、音频、视频、动画等HTML的发展史HTML的发展史1993-6超文本标记语言1995-11HTML2.0HTML3.21996-1-14HTML4.01997-12-18HTML4.011999-12-24XHTML1.02000-1-26XHTML1.12001-5-31XHTML2.0HTML52014-10-28W3C标准W3C：WorldWideWebConsortium（万维网联盟）成立于1994年，Web技术领域最权威和具影响力的国际中立性技术标准机构//W3C标准包括:结构化标准语言（XHTML、XML）表现标准语言（CSS）行为标准（DOM、ECMAScript）网页开发软件TXT记事本EditPlusDreamWeaver演示示例：

使用软件演示新建网页HTML基本结构HTML网页基本结构<html><head><title>网页标题</title>

</head>

<body>

网页内容<hr/>

</body></html>网页头部（用于设置网页的一些属性）主体部分（网页内容编辑区）1、<body>、</body>等成对的标签，分别叫开放标签和闭合标签;2、单独呈现的标签（空元素），如<hr/>；意为用/来关闭空元素;注意页面规范声明DOCTYPE声明（告诉浏览器使用什么规范）<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head> <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>标题</title></head><body>

网页内容</body></html>XHTML1.0版本网页编码设置<meta>标签-用于定义文件信息<meta

http-equiv="Content-Type"content="text/html;

charset=utf-8"/>推荐utf-8，还可设置为gb23121、

gb2312包含全部中文字符;utf-8则包含全世界所有国家需要用到的字符2、页面编码应与页面文件保存时的编码一致注意给标签设置不同属性，具体不同的功能案例分析案例分析HTML网页分析标题标签<h1>斜体标签<em>粗体标签<strong>特殊符号 (空格)换行标签<br/>水平线标签<hr/>段落标签<p>课堂演示需求说明：制作清平乐诗词网页要求：使用HTML标签实现演示示例：制作清平乐诗词网页小结2-1网页基本标签元素标签说明例子<h1>~<h6>标题标签(head)<h1>清平乐·年年雪里</h1><p>段落标签（paragraph）<p>年年雪里，常插梅花醉..</p><br/>换行标签（breakrow）原文：<br/><hr/>水平线标签（horizontalrow）<hr/>原文：

<em>斜体标签<em>朝代:宋代</em><strong>加粗标签<strong>李清照</strong>小结小结2-2注释和特殊符号特殊符号字符实体示例空格

<ahref="#">百度</a> | <ahref="#">新浪</a>大于号(>)>如果时间>晚上6点，就坐车回家小于号(<)<如果时间<早上7点，就走路去上学引号(")"W3C规范中，HTML的属性值必须用成对的"引起来版权符号@©©2003-2015众软小结<!--HTML注释内容

-->注释标签规范

标签规范（

XHTML标签规范）：标签名应小写HTML标签应闭合标签应正确嵌套应添加文档类型声明<!DOCTYPE>

书写HTML页面时，请遵循XHTML标签规范注意课堂练习需求说明标题用标题标签，人名加粗显示，时间斜体显示，并制作页面版权部分完成时间：10分钟共性问题集中讲解图像标签2-1常见的图像格式图像类型优点缺点*.jpg体积小，较清晰.适合色彩丰富的图像有损压缩，画面失真*.gif体积小、支持动画图片，较为常用的网页图片类型支持有限的透明度,效果不如其他PNG图片*.bmp支持24位颜色深度，兼容性好不支持压缩，容量大*.png最新的图片格式，兼有GIF和JPG的优势部分浏览器（IE.6）不支持透明图像标签2-2<imgsrc="path"alt="text"title="text"width="x"height="y"/>图像路径（绝对路径&相对路径）图像的替代文字语法鼠标悬停提示文字图像宽度图像高度<imgsrc="image/hetao.jpg"width="160"height="160"alt="无漂白薄皮核桃"title="无漂白薄皮核桃"/>示例演示示例：图像标签超链接标签<ahref="path"target="目标窗口位置">

链接文本或图像</a>链接路径链接在哪个窗口打开,常用值：_self、_blank语法示例演示示例：超链接锚链接锚链接从A页面的甲位置跳转到本页中的乙位置(同一页面)从A页面的甲位置跳转到B页面中的乙位置(两个页面)创建步骤创建跳转标记

创建跳转链接<aname="marker">乙位置</a><ahref="#marker">甲位置</a>演示示例：锚链接课堂练习需求说明制作家用电器排行榜页面标题使用标题标签家电名称加上超链接商品之间使用水平线分隔教员讲需求实现思路家用电器排行榜放在标题<h1>标签中图像使用<img>标签商品名称使用超链接<a>标签商品之间使用<hr>标签实现分隔完成时间：10分钟共性问题集中讲解HTML列表无序列表有序列表定义列表无序列表语法说明没有顺序，每个<li>标签独占一行默认<li>标签项前有实心小圆点一般用于无序类型的列表，如导航，侧边栏新闻列表等

<ul

><li>列表项内容一</li> <li>列表项内容x</li>

<li>列表项内容最后一项</li></ul>有序列表语法说明有顺序，每个<li>标签独占一行默认<li>标签项前有顺序标记可通过修改<ol>标签的type属性值(a,A等)更改一般用于排序类型的列表，如试卷，问卷选项等<ol><li>列表项内容一</li> <li>列表项内容x</li>

<li>列表项内容最后一项</li></ol>定义列表语法说明没有顺序,每个<dt>、<dd>标签独占一行默认没有标记<dl><dt>咖啡</dt> <dd>黑色的热饮料</dd> <dt>Milk</dt> <dd>白色的冷饮料</dd></dl>表单—学习目标了解什么是表单知道表单的作用掌握如何制作表单为什么使用表单用户登录/注册收集用户反馈信息提供搜索工具表单的典型应用表单的执行原理Internet12客户端：请求登录，通过表单填写账户信息服务器端：验证发来的账号信息，然后给出反馈客户端和服务器类似两人沟通一样，从而建立交互活动表单的典型应用：假定登录126邮箱单行文本框(text)单选按钮(radio)复选框(checkbox)下拉列表(select)重置按钮(reset)提交按钮(submit)密码框(password)常见的表单元素文本域(textarea)文件选择框(file)<formaction="表单提交地址"method="提交方法">

…文本框、按钮等表单元素…</form>表单基本结构--<form>标签

语法action属性：如果为空则代表向当前页面提交method属性：可选值post|get

get方法提交参数在地址栏可见

post方法一般用于多数据、保密数据提交

注意<inputname="表单元素名称"type="类型"value="值"size="显示宽度"maxlength=“最大长度"checked="是否选中"/>表单基本元素-<input>标签语法type属性：可选值text（默认）、password、button、checkbox、radio等checked属性：

仅与<inputtype="checkbox">或<inputtype="radio">配合使用，选中值为checked

注意课堂演示需求说明使用表单元素制作注册页面要求：制作注册页面内容使用HTML基本标签完成演示示例：商城注册页面2-1小结各类表单元素type功能例子text单行文本输入<inputtype="text"name="username"/>password密码<inputtype="password"name="password"/>radio单选<inputtype="radio"name="sex"value="男"/>男<inputtype="radio"name="sex"value="女"/>女checkbox多选<inputtype="checkbox"name="hobby"value="书"/>书<inputtype="checkbox"name="hobby"value="画"/>画reset重置表单数据<inputtype="reset"value="重置"/>file文件上传<inputtype="file"name="files"/>submit提交表单数据<inputtype="submit"value="提交"/>hidden隐藏域<inputtype="hidden"name="name"value="1"/>button普通按钮<inputtype="button"value="播放音乐"/>小结课堂练习需求说明：完成网站登录页面完成时间：10分钟共性问题集中讲解1、提交地址：login.html2、提交方法：post其他表单元素<select

name="指定列表名称"size="显示的行数">

<option

value="选项值"selected="selected">…</option>……</select><textarea

name="..."

cols="列宽"

rows="行宽">文本内容</textarea>列表框文本域

关联表单元素

<labelfor="username">姓名:</label><inputname="name"id="username"size="20"/>或<label>姓名:<inputname="name"size="20"/></label>表单的高级用法2-1点击label标签鼠标聚焦文本框中<labelfor="关联元素ID"></label>语法示例只读属性readonly：希望某个框内的内容只允许用户看，不能修改禁用属性disabled：因没达到使用的条件，限制用户使用示例表单的高级用法2-2<inputtype="text"name=""value="123"readonly="readonly"/><inputtype="button"name=""value="点击"disabled="disabled"/>课堂演示需求说明使用表单元素制作注册页面要求继续完善注册页面完成“出生日期”项完成“注册条款”项给输入框加上关联元素标签演示示例：商城注册页面2-2课堂练习需求说明：使用表单相关标签制作简易求职表表单完成时间：10分钟“协议”只读，“提交”按钮禁用用隐藏域提交求职者姓名“zhangsan”共性问题集中讲解表格—学习目标掌握表格的基本结构掌握表格跨行、跨列的实现方式表格应用场景哪里用到表格？论坛中应用表格系统中应用表格<tablewidth="100%"border="1"cellspacing="0"cellpadding="0"bgcolor="gray">

<tr><tdalign="center">第1个单元格的内容</td>

<td>第2个单元格的内容</td>

......

</tr>

<tr>

<td>第1个单元格的内容</td>

<td>第2个单元格的内容</td>

......

</tr></table>表格基本语法语法演示示例：表格基本组成<tr>标签定义列<table>标签定义表格表格的属性表格常用属性属性名功能width/height表格的宽/高，单位可以为像素（px）或百分比（%）border默认为表格边框为

0（无边框），可设置为数值cellspacing控制单元格之间的间距，可设

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论