《网页设计与制作》第1章_第1页
《网页设计与制作》第1章_第2页
《网页设计与制作》第1章_第3页
《网页设计与制作》第1章_第4页
《网页设计与制作》第1章_第5页
已阅读5页，还剩32页未读， 继续免费阅读

下载本文档

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

文档简介

HTML基本标签（一）第一章本门课程目标学完本门课程后，你能够：制作界面美观大方、面向企业应用的静态商业网站掌握Web开发的行业规范和标准课程项目展示贵美商城首页商品展示页（点击左边“商品分类”任一链接）具体商品详细介绍页（点击任一商品图片）购物车页面（点击“立刻购买”按钮）登录页（点击右上方的导航菜单）注册页（点击右上方的导航菜单）帮助中心客服页面（点击右上方的导航菜单）

教员现场演示贯穿项目本章任务制作图文并茂的商品介绍页本章目标使用HTML的基本结构创建网页使用行级和块级标签组织页面内容使用图像标签实现图文并茂的页面什么是HTMLHTML：HyperTextMarkupLanguage超文本标签语言HTML：网页的“源码”浏览器：“解释和执行”HTML源码的工具

HTML告知浏览器如何显示网页HTML文档的结构<html><head><title>我的第一个网页</title></head><body>HelloWorld!</body></html>HTML网页<head>头部部分<body>主体部分<html>…</html>标签标记HTML文档的开始和结束网页标题网页内容，可以是文本、图像等这部分包括标题和其他说明信息，包括在<head>…</head>

标签内这部分包含文本、图像和链接，它包括在<body>…</body>

标签内HTML文档的基本结构记事本UltraEditHTML的编辑工具操作演示1：在记事本里创建网页网页的摘要信息2-1网页摘要信息利于浏览器解析和搜索引擎搜索：使用<title>标签<head>

<title>搜狐-中国最大的门户网站</title></head><head>

<metaname="keywords"content="淘宝,网上购物,在线交易,交易市场"/>

<metaname="description"content="淘宝网-亚洲最大、最安全的网上交易平台，提供各类服饰、美容、家居、数码、……"/></head><head>

<metahttp-equiv="Content-Type"content="text/html;

charset=gb2312"/></head>网页的摘要信息2-1使用<meta>标签（1）描述文档类型和字符编码（2）描述搜索关键字和描述提供搜索关键字和内容描述信息，方便搜索引擎的搜索

Meta标签http-equiv属性:模拟http消息头(所谓消息头，是由w3c定义的一些关键字，浏览器与服务器都会遵守)。content属性:消息头的属性值。常见的两个消息头:（1）<metahttp-equiv="content-type"content="text/html;charset=gbk">模拟生成一个content-type消息头，告诉浏览器，返回的数据是html，编码是gbk。浏览器一定会以指定的gbk编码来打开该页面。需要注意：指定的编码一定要与实际保存文件的编码一致。（2）<metahttp-equiv="refresh"content="2">模拟生成一个refresh消息头，告诉浏览器，每隔2秒刷新该页面。

HTML页面中的块和行HTML标签分类（方便后续的布局设计）：块级标签：显示为“块”状，前后隔一行

行级标签：按行逐一显示分类好处：方便后续的布局设计块级：块内包含多行行级：包括文字、图片等块级标签根据使用场合，块级标签又细分为：基本块级标签

常用于布局的块级标签块级元素与行内无素的区别

块级元素和行内元素是布局最基本的两种元素，常见的块级元素有div、p、form、ul、ol、li等，常用的行内元素有span、strong、em等

块级元素会独占一行，默认情况下，其宽度自动填满其父元素宽度，行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化。

块级元素可以设置width、height属性。行内元素设置width、height属性无效。

注意，块级元素即使设置了宽度，仍然是独占一行的。标题标签

……<body>

<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5>

<h6>六级标题</h6></body>……基本块级标签3-1h1最大h6最小前后隔行操作演示2：标题标签<h1>标题</h1>……<h6>标题</h6>段落标签

……<body><h1>北京欢迎你</h1>

<p>北京欢迎你，有梦想谁都了不起！/p><p>有勇气就会有奇迹。</p></body>……基本块级标签3-2前后换行，类似教材中的段落操作演示3：段落标签<p>……</p>水平线标签

……<body><h1>北京欢迎你</h1><hr/><p>北京欢迎你，有梦想谁都了不起！/p><p>有勇气就会有奇迹。</p></body>……基本块级标签3-3横线用于内容分割单个标签的闭合形式操作演示4：水平线标签<hr/>练习——基本块级标签需求说明：显示唐诗介绍（UltraEdit环境）完成时间：20分钟分析应使用哪些标签？有序列表标签

……<body><h3>注册步骤：</h3><ol><li>填写信息</li><li>收电子邮件</li><li>注册成功</li></ol></body>……常用于布局的块级标签7-1有序列表操作演示5：有序列表标签<ol><li>列表项1</li>……</ol>无序列表标签

<body><h3>新人上路指南</h3><ul>

<li>如何激活会员名？</li><li>如何注册贵美会员？</li><li>注册时密码设置有什么要求？</li><li>贵美认证</li></ul></body>常用于布局的块级标签7-2无序列表操作演示6：无序列表标签<ul><li>列表项1</li>……</ul>定义描述标签

……<body><dl><dt>咖啡</dt><dd>一种黑色的热饮料，原料据说是咖啡豆，非洲盛产这类原料。</dd><dd>可以提神，刺激神经。</dd><dl></body>……常用于布局的块级标签7-3这种效果可以和无序列表互相替代，因dt是块状元素，所以常用于图文混编的布局场合操作演示7：dl和dt标签<dl><dt>标题</dt><dd>描述1</dd>……</dl>……<body><dl>

<dt>图片的HTML代码（后续讲解）……<dt><dd>商品名称：灿坤蒸气电熨斗</dd><dd>商品价格：388元</dd><dd>商品简介：金钢低血超硬超顺滑,140ml透明大水箱设计</dd></dl></body>……常用于布局的块级标签7-4用定义描述标签实现图文混编的效果文字有一定的缩进表格<table><tr>

<td>百度</td><td>新浪</td></tr>

……</table>

常用于布局的块级标签7-5<table>--表格<tr>--行<td>--列（单元格）演示示例8：表格标签常用于布局的块级标签7-6表单

一般和table使用：<form><table><tr><td>...</td>

<td>...</td>

</tr>.....</table></form>演示示例9：表单标签<form>……</form>常用于布局的块级标签7-7分区标签<div>

div标签可内嵌到<p>等标签内，作为普通块状元素使用一般当作结构化块状元素使用，作为逻辑分区（分块）即容器来使用……<divstyle="width:400px;height:300px;background:#9FF"><p>……</p><h3>新人上路</h3><ul>……</ul>div其实就是一个......</div>……操作演示10：分区标签小结1、div-ul(ol)-li：常用于分类导航或菜单等2、div-dl-dt-dd：常用于图文混编的场合3、table-tr-td：常用于图文布局或显示数据4、form-table-tr-td：常用于布局表单请说出实际开发常用的4种块状结构是什么？练习——常用于布局的块级标签需求说明：实现简单的商品购买页完成时间：25分钟分析应使用哪些标签？图像标签

……<imgsrc="images/drink.jpg"alt="精品热卖：高清晰，30寸等离子电视"title="精品热卖：高清晰，30寸等离子电视"/>……行级标签3-1为了不同浏览器之间的兼容，推荐使用title属性

，确保能显示提示文字操作演示11：图像标签<imgsrc="图片地址"alt="提示文字"title="提示文字"/>alt属性与title属性alt属性是图片的替换文字。title属性规定元素的额外信息，有视觉效果。alt属性：1、alt属性是考虑到不支持图像显示或者图像显示被关闭的浏览器的用户，以及视觉障碍的用户和使用屏幕阅读器的用户。当图片不显示的时候，图片的替换文字。

2、alt属性值得长度必须少于100个英文字符

3、alt属性是img标签的必须属性，如果没有特别意义的图片，可以写alt=“”

4、alt属性是搜索引擎判断图片与文字是否相关的重要依据，alt属性添加到img主要的目的才是为了SEO

title属性：1、title属性并不是必须的。

2、title属性规定元素的额外信息，有视觉效果，当鼠标放到文字或是图片上时有文字显示。

3、title属性并不作为搜索引擎抓取图片的参考，更多倾向于用户体验的考虑。

范围标签<span>：显示某行内的独特样式

……<p>商品价格:仅售<spanstyle="color:red;font-size:70px;">10</span>元</p>……行级标签3-2操作演示12：span标签<span>文本等行级内容</span>设置红色、大号字突出显示

换行标签

<br/>

……<p>

北京欢迎你，有梦想谁都了不起！<br/>

有勇气就会有奇迹。<br/>

北京欢迎你，为你开天辟地<br/>

流动中的魅力充满朝气。<br/>

北京欢迎你，在太阳下分享呼吸<br/>

在黄土地刷新成绩。<br/>

北京欢迎你，像音乐感动你<br/>

让我们都加油去超越自己。<br/></p>……行级标签3-3和<p>的区别：前后不换行操作演示13：换行标签为什么需要W3C标准W3C：WorldWideWebConsortium，万维网联盟W3C的职能：负责制定和维护web行业标准W3C标准包括：列的标准：HTML内容方面：XHTML样式美化方面：CSS结构文档访问方面：OM页面交互方面：ECMAScript……制定统一的web标准W3CNetscape的图标W3C提倡的Web结构不规范的示例<fontsize="7">一级主题</Font><br/>一级主题阐述文字<br/><Br/><fontsize="5">二级主题</font><br/>二级主题相关文字<P>项目列表1<p>项目列表2<p>项目列表3存在问题：1、内容和表现没分离，后期很难维护和修改2、HTML代码不能表示页面的内容语义，不利于搜索引擎搜索

操作演示：不规范的示例W3C提倡的Web结构规范的示例<h1>一级主题1</h1><p>

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论