第一章html基本标签_第1页
第一章html基本标签_第2页
第一章html基本标签_第3页
第一章html基本标签_第4页
第一章html基本标签_第5页
已阅读5页，还剩31页未读， 继续免费阅读

付费下载

下载本文档

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

文档简介

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

使用行级和块级标签组织页面内容使用图像标签实现图文并茂的页面HTML：Hyper

Text

Markup

Language

超文本标签语言HTML：网页的“源码”浏览器：“解释和执行”HTML源码的工具HTML告知浏览器如何显示网页HTML文档的结构<html><head><title>我的第一个网页</title></head></html>HTML

网页<head>头部部分<body>主体部分这部分包<含h括tm文标l本题>…、和<图其/h像他tm和说l>链明标接信签，息标它，记包H括TM在L<文bho档eda的dy>开…始</和bhoe结addy束>标签内网页标题<body

>Hello

World!</body>网页内容，可以是文本、图像等记事本UltraEdit操作演示1：在记事本里创建网页网页摘要信息利于浏览器解析和搜索引擎搜索：使用<title>标签<head><title>搜狐-中国最大的门户网站</title></head>使用<meta>标签描述文档类型和字符编码描述搜索关键字和描述<head><meta

http-equiv="Content-Type"

content="text/html;

charset=gb2312"

/></head>提供搜索关键字和内容描述信息，方便搜索引擎的搜索<head><meta

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

name="description"content="淘宝网-亚洲最大、最安全的网上交易平台，提供各类服饰、美容、家居、数码、……"/></head>HTML标签分类（方便后续的布局设计）：块级标签：显示为“块”状，前后隔一行行级标签：按行逐一显示分类好处：方便后续的布局设计行级：包括文字、图片等块级：

块内包含多行根据使用场合，块级标签又细分为：基本块级标签常用于布局的块级标签标题标签……<body><h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5>五级标题</h5><h6>六级标题</h6></body>……h1最大

h6最小

前后隔行操作演示2：标题标签<h1>标题</h1>……<h6>标题</h6>段落标签前后换行，类似教材中的段落<p>……</p>……<body><h1>北京欢迎你</h1><p>北京欢迎你，有梦想谁都了不起！</p><p>有勇气就会有奇迹。</p></body>……操作演示3：段落标签水平线标签横线用于内容分割单个标签的闭合形式<hr

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

/><p>北京欢迎你，有梦想谁都了不起！/p><p>有勇气就会有奇迹。</p></body>……操作演示4：水平线标签需求说明：显示唐诗介绍分析应使用哪些标签？有序列表标签有序列表<ol><li>列表项1</li>…

…</ol>……<body><h3>注册步骤：</h3><ol><li>填写信息</li><li>收电子邮件</li><li>注册成功</li></ol></body>……操作演示5：有序列表标签无序列表标签无序列表<ul><li>列表项1</li>……</ul><body><h3>新人上路指南</h3><ul><li>如何激活会员名？</li><li>如何注册贵美会员？</li><li>注册时密码设置有什么要求？</li><li>贵美认证</li></ul></body>操作演示6：无序列表标签定义描述标签这种效果可以和无序列表互相替代，因dt是块状元素，所以常用于图文混编的布局场合<dl><dt>标题</dt><dd>描述1</dd>……</dl>……<body><dl><dt>咖啡</dt><dd>一种黑色的热饮料，原料据说是咖啡豆，非洲盛产这类原料。</dd><dd>可以提神，刺激神经。</dd><dl></body>……操作演示7：dl和dt标签文字有一定的缩进……<body><dl><dt>图片的HTML代码（后续讲解）……<dt><dd>商品名称：灿坤蒸气电熨斗</dd><dd>商品价格：388元</dd><dd>商品简介：金钢低血超硬超顺滑,140ml透明大水箱设计</dd></dl></body>……用定义描述标签实现图文混编的效果表格<table><tr><td>百度</td><td>新浪</td></tr>……</dl><table>--表格<tr><td>--行--列（单元格）演示示例8：表格标签表单一般和table使用：<form><table><tr><td>...</td><td>...</td></tr>.....</table></form><form>……</form>演示示例9：表单标签分区标签<div>等标签素使用一般当为逻辑div标签可内嵌到<p>内，作为普通块状元作结构化块状元素使用，作分区（分块）即容器来使用……<div

style="width:400px;

height:300px;

background:#9FF"><p>……</p><h3>新人上路</h3><ul>……</ul>div其实就是一个......</div>……操作演示10：分区标签请说出实际开发常用的4种块状结构是什么？1、div-ul(ol)-li

：常用于分类导航或菜单等2、div-dl-dt-dd

：常用于图文混编的场合3、table-tr-td

：常用于图文布局或显示数据4、form-table-tr-td：常用于布局表单需求说明：实现简单的商品购买页分析应使用哪些标签？图像标签为了不同浏览器之间的兼容，推荐使用title属性，确保能显示提示文字<img src=

"图片地址"

alt="提示文字"

title="提示文字"

/>……<img

src="images/drink.jpg"alt="精品热卖：高清晰，30寸等离子电视"title="精品热卖：高清晰，30寸等离子电视"/>……操作演示11：图像标签范围标签<span>：显示某行内的独特样式<span>文本等行级内容</span>设置红色、大号字突出显示……<p>商品价格:仅售<span

style="color:red;font-size:70px;">10</span>元</p>……操作演示12：span标签换行标签<br/>……<p>北京欢迎你，有梦想谁都了不起！<br/>有勇气就会有奇迹。<br/>北京欢迎你，为你开天辟地<br/>流动中的魅力充满朝气。<br/>北京欢迎你，在太阳下分享呼吸<br/>在黄土地刷新成绩。<br/>北京欢迎你，像音乐感动你<br/>让我们都加油去超越自己。<br/></p>……和<p>的区别：前后不换行操作演示13：换行标签W3C：World

Wide

Web

Consortium，万维网联盟

W3C的职能：负责制定和维护web行业标准

W3C标准包括：列的标准：HTML内容方面：XHTML样式美化方面：CSS结构文档访问方面：OM页面交互方面：ECMAScript……W3C制定统一的web标准Netscape的图标不规范的示例<font

size="7">一级主题</Font><br/>一级主题阐述文字<br/><Br/><font

size="5">二级主题</font><br/>二级主题相关文字<P>项目列表1<p>项目列表2<p>项目列表3存在问题：1、内容和表现没分离，后期很难维护和修改2、HTML代码不能表示页面的内容语义，不利于搜索引擎搜索操作演示：不规范的示例规范的示例<h1>一级主题1</h1><p>一级主题阐述文字</p><h2>二级主题</h2><p>二级主题阐述文字</p><ul><li>项目列表1</li><li>项目列表2</li><li>项目列表3</li></ul>W3C提倡的Web结构：1、内容（结构）和表现（样式）分离2、HTML内容结构要求语义化操作演示：规范的示例<!DOCTYPE

html

PUBLIC

"-//W3C//DTD

XHTML1.0

Strict//EN""

"><html><head>……</head>……body部分内容……</html>标签名和属性名称必须小写HTML标签必须关闭属性值必须用

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

温馨提示

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

最新文档

评论

0/150

提交评论